/* =============================================================================
   LA PANTALLA PÚBLICA — la tarjeta centrada de todo lo que se ve SIN sesión.

   QUÉ ES. Entrar, crear cuenta, pedir acceso, activar una invitación, «tu sesión
   se cerró», los errores de autenticación y las páginas legales son la MISMA
   pantalla: una tarjeta centrada con la marca arriba, un título, una bajada, una
   acción y un pie. Siete vistas, una forma.

   POR QUÉ EXISTE ESTE ARCHIVO. Porque esa forma estaba escrita SIETE VECES, cada
   una con su propio prefijo —`.su-`, `.ac-`, `.sc-`, `.error-`, `.dg-login-`— y
   sus propios números. Medido antes de escribir esto: la tarjeta tenía cinco
   radios distintos (20px, 16px, 16px, 16px, 1rem) y el botón seis (4px, 9px,
   10px, 0.5rem, y dos derivados). Ninguna usaba el token de la marca. No era
   deuda invisible: se notaba al pasar de una pantalla a la siguiente.

   DÓNDE SE USA, y por qué eso condiciona lo que se puede escribir acá:

     · la app (`apps/web`), vía `app.css`;
     · el tema de Keycloak, que lo COPIA el Dockerfile igual que `tokens.css`.

   Keycloak NO carga `app.css`. Solo ve `tokens.css` y esta hoja. `app.css` define
   92 variables que `tokens.css` no tiene —entre ellas `--border`, que las vistas
   públicas ya usaban—, así que acá **solo se pueden usar tokens de `tokens.css`**:
   cualquier otro se ve bien en la app y cae al fallback en la pantalla de entrar,
   que es justo la mitad que nadie mira mientras desarrolla.

   LOS VALORES PROPIOS VAN EN `.dg-pantalla`, NO EN `:root`. Scopeados ahí no se
   filtran al resto de la app: esta pantalla puede ser más cuadrada que el interior
   sin arrastrar a los mil controles de adentro. Es la misma decisión que el login
   tomaba con sus overrides, pero en un solo sitio y para las siete.

   La referencia es la pantalla de entrar. Fue la elegida —«la vista que me gusta
   es esta»— y `signup` ya se le había alineado en la #1827; lo que faltaba eran
   las otras cinco.
   ============================================================================= */

.dg-pantalla {
  /* LOS CONTROLES NATIVOS, EN EL VERDE DE DEGÚ. Una casilla o un radio sin `accent-color` sale
     en el azul del navegador, y en una pantalla que por lo demás es verde entera se lee como si
     fuera de otro producto. Pasaba en el ciclo de pago y en la casilla de los Términos, que es
     justo el control que obliga a la organización; en «Cómo responde Degú» no, porque ese
     componente lo declaraba por su cuenta.
     VA ACÁ Y NO EN `:root`: esta hoja la importa `app.css`, así que en `:root` alcanzaría a toda
     la aplicación, que tiene sus propias reglas por componente. `.dg-pantalla` es el envoltorio
     de las vistas sin sesión Y el del tema de Keycloak (`template.ftl`), que es donde el defecto
     se ve. Lo heredan también los controles escondidos, que no pintan nada. */
  accent-color: var(--accent);

  /* El radio de la tarjeta y el de los controles. El segundo NO se deriva del
     primero con un `calc()`: eran dos decisiones distintas escritas como una, y
     cambiar la tarjeta movía los botones sin que nadie lo pidiera. */
  --pp-radio-tarjeta: var(--radius-card);
  --pp-radio-control: var(--radius-control);
  /* El radio de la tarjeta en pantalla angosta: a 20px, contra los bordes de un
     teléfono, la curva se lee como un error de alineación. */
  --pp-radio-tarjeta-angosta: var(--radius-control);

  /* El campo de formulario: relleno y borde marcados para que se VEA sobre la tarjeta —con
     el borde del sistema, sobre `--surface`, era casi invisible—.
     
     DERIVADOS, NO LITERALES, y eso es el arreglo de un defecto real: estaban escritos
     `#f4f6f8` y `#cdd3db`, y `.dg-entrada` los combina con `color: var(--text)`, que SÍ se
     vuelve blanco en oscuro. Medido: texto sobre ese relleno daba 1,08:1 —AA pide 4,5—, o
     sea la contraseña de alguien escrita en blanco sobre casi blanco. Lo levantó @nmonge83.
     
     `--surface-1` ya existe para esto y se mueve con el tema (#f5f7f8 claro, #1b201d
     oscuro). Sin bloque de modo oscuro acá: no hay un segundo sitio que mantener.

     EL BORDE SALÍA DEL PROPIO TEXTO —`color-mix(--text 22%)`— y eso contrastaba «por
     construcción», pero no lo suficiente: 22% de un texto que ya es `rgba(0,0,0,.75)` deja
     un alfa efectivo de 0,165, o sea 1,47:1 contra los dos lados del borde. WCAG 2.2
     SC 1.4.11 pide 3:1 para el límite que identifica un control, y un campo vacío no tiene
     otra señal. Ahora sale de `--control-border`, que se declara y se mide en `tokens.css`
     justamente para esto, y sigue moviéndose con el tema. */
  --pp-campo-fondo: var(--surface-1);
  --pp-campo-borde: var(--control-border);

  /* Tres capas, no una: la sombra plana de una sola capa deja la tarjeta pegada al
     fondo cuando los dos son blancos, que es el caso en el tema claro. */
  --pp-sombra:
    0 25px 60px -12px rgba(0, 0, 0, 0.2), 0 12px 28px -8px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);

  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  box-sizing: border-box;
  color: var(--text);
  background: var(--bg);
}

/* ── La tarjeta ───────────────────────────────────────────────────────────── */

.dg-tarjeta {
  width: 100%;
  /* 500 CON `border-box`, que es la MISMA caja que la pantalla de entrar venía midiendo:
     declaraba 420 en `content-box`, o sea 420 de contenido más 80 de relleno. Medido en el
     navegador antes y después. Escribirlo como 420 y `border-box` —que es lo que parece
     correcto leyendo la regla vieja— le quita 80 px de ancho a la pantalla de la que se
     dijo «esta es la que me gusta», sin que nadie lo haya pedido. */
  max-width: 500px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: none;
  border-radius: var(--pp-radio-tarjeta);
  padding: var(--sp-12) var(--sp-10) 36px;
  /* SIN ESTO, marca, título y bajada quedan pegados sin un píxel en medio: la tarjeta es
     `column` y los tres llevan `margin: 0`. El CSS que se fue los separaba a mano, vista por
     vista. Son los 12px que la pantalla de entrar ya usaba dentro de su cabecera, ahora para
     toda la columna y en un solo sitio. Lo levantó @nmonge83; medido antes y después. */
  gap: var(--sp-3);
  box-shadow: var(--pp-sombra);
  animation: dg-tarjeta-entra 0.35s ease-out;
}

/* Quien prefiere menos movimiento no recibe la entrada. La tarjeta aparece igual;
   lo único que se pierde es el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .dg-tarjeta {
    animation: none;
  }
}

@keyframes dg-tarjeta-entra {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── El asistente: un recorrido de varios pasos (el onboarding) ────────────────

   La tarjeta centrada se mueve con su contenido: en el onboarding, cada paso tiene otro alto, así
   que la tarjeta y su título aparecían a otra altura en cada uno (medido en un Mac de 13": el
   título pasaba por 294, 232, 255, 111, 129 y 346 px), y cuatro de siete pasos no cabían en la
   pantalla, con «Continuar» fuera de la vista.

   La forma asistente fija las tres cosas: la tarjeta tiene el MISMO ALTO en cada paso (el de la
   ventana menos un marco parejo, con tope), así que no se mueve al avanzar, y es más ancha, para que
   los campos vayan de a dos.
   Por dentro la vista pone tres franjas: cabecera y pie fijos, y el cuerpo, que es lo único que se
   desplaza si de verdad no cabe. Los botones quedan siempre en el mismo lugar.

   En pantalla angosta O BAJA vuelve a crecer con su contenido: un teléfono no tiene alto que
   repartir, tampoco en horizontal (un iPhone 14 da 852 × 393: más ancho que 640 y menos alto que la
   tarjeta, que quedaba con el pie bajo el borde; @nmonge83, #3202). */
.dg-pantalla--asistente {
  /* UN MARCO EN PROPORCIÓN: la tarjeta ocupa DOS TERCIOS del ancho y casi todo el alto. A cada lado
     queda un sexto de la ventana y arriba y abajo un margen corto, así que el marco lateral es más
     ancho que el superior, que es lo que se lee como armonía (la regla de los tercios). Con un
     margen parejo en los cuatro lados la tarjeta se veía estirada a lo ancho y apretada en el medio.
     Los dos tercios no bajan de 46rem: con la ventana bajo ~69rem (donde 66,667vw = 46rem) la
     tarjeta se queda en 46rem, y solo cuando el espacio disponible es menor que eso toma el ancho
     entero. Los topes (1200 × 1000) son para que en una pantalla muy grande no se vuelva un
     desierto. */
  --pp-asistente-margen: clamp(16px, 4vh, 40px);
  place-items: center;
  padding: var(--pp-asistente-margen);
}

.dg-tarjeta.dg-tarjeta--asistente {
  width: min(100%, max(46rem, 66.667vw));
  max-width: 1200px;
  height: min(1000px, calc(100dvh - 2 * var(--pp-asistente-margen)));
  min-height: 420px;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* EL PASO QUE MUESTRA UNA FILA DE CARTAS NECESITA EL ANCHO ENTERO. El asistente mide dos tercios
   de la pantalla, que alcanzan de sobra para un formulario de una columna y no para cinco degús
   lado a lado: medido en el navegador, a 1366 px el mazo del alta se parte en dos filas, y a 1280
   también. Acá la tarjeta sube hasta el MISMO tope de 1200 px que ya tenía —no es un ancho
   nuevo, es llegar antes al que había— y vuelve a lo suyo al salir del paso. */
.dg-tarjeta.dg-tarjeta--asistente.dg-tarjeta--ancha {
  /* `100%` Y NO `96vw`: el 100% ya descuenta el relleno de la pantalla —`--pp-asistente-margen`,
     16 px por lado en un teléfono—, y `96vw` no, porque el viewport no sabe de ese relleno. Con
     96vw la tarjeta medía 374 px dentro de un hueco de 358 y el documento salía más ancho que la
     ventana: desplazamiento horizontal justo en el paso que decide el alta. Medido por @jotramon
     en Chromium —408/390, 333/320 y 804/800— y confirmado por @KatherineGuerrero. Es la misma
     forma que usa la regla de arriba, que por eso nunca desbordó. El tope de 1200 no cambia. */
  width: min(100%, 1200px);
}

/* LO QUE SE DESPLAZA DENTRO DE LA TARJETA AVISA QUE HAY MÁS: una sombra arriba o abajo, solo si hay
   contenido de ese lado. Es el truco de los fondos `local` contra `scroll` (Lea Verou): las tapas
   del color de la tarjeta viajan con el contenido y tapan la sombra en los extremos. Sin JS. */
.dg-desplazable {
  overflow-y: auto;
  background:
    linear-gradient(var(--surface) 30%, transparent) top / 100% 28px no-repeat
      local,
    linear-gradient(transparent, var(--surface) 70%) bottom / 100% 28px
      no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.12), transparent)
      top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.12), transparent)
      bottom / 100% 10px no-repeat scroll;
}

@media (max-width: 640px), (max-height: 480px) {
  .dg-tarjeta.dg-tarjeta--asistente {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

/* ── La cabecera: marca, título, bajada ───────────────────────────────────── */

.dg-tarjeta-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
}

/* EL LOGOTIPO DE LA TARJETA. Lo pinta la clase `brand-logo` de `app.css`, que resuelve el
   token del logotipo según el tema: el mismo de la barra de arriba. Acá solo se le da el tamaño
   que esta tarjeta necesita, un poco más alto que en la barra —30px— porque es la firma de la
   pantalla entera y no un elemento más de una fila.

   El token no se nombra en esta hoja a propósito: Keycloak la carga y solo tiene `tokens.css`,
   así que una variable de `app.css` escrita acá —aunque fuera en un comentario— es justo lo que
   vigila `las-vistas-publicas-son-una-sola`.

   La regla no toca al login de Keycloak, que usa `.dg-tarjeta-marca` con su propio `.dg-logo`
   y su propio `src`: ahí el logotipo entra como archivo copiado en la imagen, no como token.

   VA CON EL PADRE EN EL SELECTOR, y no es cosmético: `app.css` importa esta hoja en su línea 5
   y más abajo declara `.brand-logo { height: 30px }`. Con la misma especificidad gana el que
   viene después, así que un `.dg-tarjeta-logo` suelto no se aplicaba NUNCA y la tarjeta se
   quedaba en 30 px. Lo midió @jotramon en el navegador; la guarda que lo cuidaba miraba que la
   regla existiera en el CSS, no que tuviera efecto, así que salía verde igual. */
.dg-tarjeta-marca .dg-tarjeta-logo {
  height: 40px;
  width: auto;
}

/* En línea, para las vistas que no tienen un título grande debajo y necesitan que la marca haga
   de encabezado. Antes esto era el logo al lado del NOMBRE ESCRITO, y por eso llevaba color y
   tipografía: el logotipo ya trae el nombre dibujado, así que el texto se fue y con él las tres
   propiedades que lo pintaban. */
.dg-tarjeta-marca--linea {
  flex-direction: row;
  justify-content: center;
  gap: var(--sp-2);
}

.dg-tarjeta-marca--linea .dg-tarjeta-logo {
  height: 30px;
}

.dg-titulo {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: var(--lh-ajustada);
  text-align: center;
}

.dg-bajada {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: var(--lh-normal);
  text-align: center;
}

/* ── Acciones ─────────────────────────────────────────────────────────────── */

.dg-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* 24 y no 36: los 12 del `gap` de la tarjeta ya están puestos, y la separación que la
     pantalla de entrar tiene entre la bajada y el botón —medida— es de 36. */
  margin-top: var(--sp-6);
}

/* UNA ACCIÓN SOLA NO ES UNA BARRA. El botón de esta hoja es `width: 100%`, que es lo correcto
   cuando cierra un formulario: ahí el ancho dice «esto manda lo que escribiste». En una
   pantalla que solo informa —«Tu empresa ya está lista», «No pudimos aprobar tu solicitud»,
   «Ya tienes una cuenta en Degú»— el botón es lo único que hay, y a todo el ancho de la
   tarjeta se lee como una banda de color antes que como algo que se aprieta. Acá mide lo suyo
   y va centrado, con un piso para que un rótulo corto («Entrar») no quede en una pastilla. */
.dg-acciones--sueltas {
  align-items: center;
}
.dg-acciones--sueltas > .dg-boton {
  width: auto;
  /* EL PISO, ACOTADO AL ANCHO DISPONIBLE. `min-width` le gana a `max-width` cuando chocan, así que
     un piso en `rem` desbordaba con la letra del navegador agrandada: el `min()` lo impide y el
     `max-width` sigue sirviendo para un rótulo largo (@jotramon, #4338). */
  min-width: min(14rem, 100%);
  max-width: 100%;
}

.dg-boton {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  /* EL PISO TÁCTIL, Y NO SOBRA. Esta clase se usa en DOS sitios con interlineados distintos: en
     la app el `body` fija `--lh-normal` (1,45) y el botón mide 49,19 px, pero el tema de Keycloak
     —`theme.properties` la declara como `kcButtonClass`, y la usan `login.ftl`, `error.ftl`,
     `info.ftl`, `logout-confirm.ftl` y `login-idp-link-confirm.ftl`— no fija ninguno, así que
     hereda el `normal` del navegador: ahí `#kc-login` cae a 45 px con Space Grotesk y a 42 con
     la fuente de respaldo, bajo los 44 de Apple. Un piso explícito es la única forma que no
     depende ni del interlineado heredado ni de qué fuente alcanzó a cargar (🔵 de @jotramon en
     la #3365; yo había afirmado, midiendo mal, que Keycloak no usaba esta clase). */
  min-height: 44px;
  border: 1px solid var(--panel-border);
  border-radius: var(--pp-radio-control);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
}

.dg-boton:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--panel-border));
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.dg-boton:active {
  transform: translateY(0);
  box-shadow: none;
}

.dg-boton:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* La acción PRINCIPAL. La tarjeta y el botón comparten `--surface`, así que sin
   este realce el botón queda blanco sobre blanco. El fondo lleno y la sombra lo
   despegan y dirigen la mirada. */
/* EL RELLENO ES `--primary-fill`, NO `--primary`, y es el arreglo que la aplicación ya tiene
   desde el 6-oct-2026: con blanco encima, el verde de marca da 3,37:1, y el rótulo de un botón
   no es «texto grande», así que WCAG 1.4.3 le pide 4,5. `--primary-fill` (#08826a) da 4,76.
   `app.css` lo cambió entonces; ESTA hoja —las siete pantallas sin sesión y el tema de
   Keycloak— se quedó con el de marca, así que el arreglo nunca llegó a entrar, a activar la
   cuenta ni al alta. El verde de marca sigue siendo `--primary` en texto, bordes e íconos,
   donde no hay nada encima. */
.dg-boton--primario {
  border: none;
  background: var(--primary-fill);
  color: var(--text-inverse);
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 14px
    color-mix(in srgb, var(--primary-fill) 35%, transparent);
}

.dg-boton--primario:hover {
  background: var(--primary-fill-hover);
  box-shadow: 0 6px 20px
    color-mix(in srgb, var(--primary-fill) 40%, transparent);
}

/* DOS TAMAÑOS, y la diferencia es deliberada: la pantalla de entrar tenía el botón de
   Google más grande que el de enviar el formulario, porque uno es LA vía y el otro es la
   alternativa que hay que desplegar para ver. Al unificar las clases los dos quedaron
   iguales por accidente —tres reglas con el mismo nombre, ganaba la última— y se perdía
   esa jerarquía. Se recupera acá, con nombre. */
.dg-boton--destacado {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-md);
  box-shadow: 0 6px 18px
    color-mix(in srgb, var(--primary-fill) 35%, transparent);
}

.dg-boton--destacado:hover {
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--primary-fill) 45%, transparent);
}

/* UN BOTÓN QUE MIDE SU PROPIO RÓTULO. El de arriba es `width: 100%` porque vive sobre todo en
   formularios de una columna, donde ocupa el ancho del campo. Cuando hay DOS en la misma fila eso
   los obliga a medir lo mismo —y lo mismo es lo que resuelva el primero—, así que el segundo
   recorta si su texto es más largo: pasó en el pie del alta con «Cambiar correo» al lado de «Crear
   mi cuenta profesional», 214 px de texto en 209 de caja. La variante lo deja pedir lo suyo.
   ESTÁ ACÁ Y NO EN LA VISTA a propósito: es el ancho del botón compartido, así que la excepción se
   declara donde vive la regla y cualquiera de las siete vistas públicas puede pedir la misma. */
.dg-boton--auto {
  width: auto;
}

/* APAGADO TIENE FORMA PROPIA, y no es el mismo botón con menos tinta. Con `opacity: .6` el
   principal quedaba en el MISMO verde al 60 %, que sobre la tarjeta blanca se lee como un
   segundo verde de marca y no como «todavía no». Es el botón con el que empieza cada paso del
   alta, y en el teléfono ocupa el ancho entero.
   El `:hover` y el `:focus-visible` se declaran antes, así que acá se vuelven a apagar: sin eso
   un botón que no se puede apretar seguía levantándose al pasarle por encima. */
.dg-boton[disabled],
.dg-boton:disabled {
  border-color: var(--border-color);
  background: var(--surface-1);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* El SVG dentro de un botón no se encoge: sin esto, con un texto largo —«Continuar
   con Google» en alemán— el logo se aplasta. */
.dg-boton svg {
  flex-shrink: 0;
}

/* ── Separador ────────────────────────────────────────────────────────────── */

/* «o con tu email». Marca que lo de abajo es la vía SECUNDARIA; sin él las dos
   opciones se leen como equivalentes. */
.dg-separador {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 22px 0 var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
}

.dg-separador::before,
.dg-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

/* ── Piezas del asistente (el onboarding) ─────────────────────────────────── */

/* EL ANCHO DEL FORMULARIO SIGUE AL DE LO QUE SE ESCRIBE (GOV.UK, «Text input»: «the width of the
   input should reflect the length of the content»; Baymard, largo de campo). En la tarjeta ancha,
   un campo de lado a lado para un nombre o un RUT se lee como una línea sin fin: la columna lo
   acota y lo centra. `--estrecha` para el correo y el código; `--ancha` para listas y opciones.
   Ojo: una pieza que se combine con la columna no puede declarar `margin` abreviado —pisa el
   `margin-inline: auto` que la centra—; usa `margin-block`. */
.dg-columna {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.dg-columna--estrecha {
  max-width: 26rem;
}
.dg-columna--ancha {
  max-width: 40rem;
}

/* UNA CASILLA O UN RADIO QUE SE VE. El navegador los dibuja de 13 px, que al lado de un texto
   de 16 se lee mezquino y en el teléfono cuesta apuntar. No se aplica a `input[type=…]` a secas
   a propósito: la mitad de los de estas pantallas son controles ESCONDIDOS detrás de una tarjeta
   —las dos puertas del alta, las cartas de los degús— o de un interruptor, y una regla por tipo
   gana en especificidad a la que los esconde y los sacaría a la luz. Lleva clase quien se ve.
   El tamaño del objetivo táctil no sale de acá: estos van dentro de su `<label>`, y lo que se
   toca es el renglón entero. */
.dg-control {
  width: 1.25rem;
  height: 1.25rem;
  /* `flex: none` no es por si acaso: la casilla de los Términos va al lado de un párrafo largo
     dentro de un `<label>` flexible, y sin esto el navegador la encogía a 14 de ancho por 20 de
     alto — un óvalo. Medido. */
  flex: none;
}

/* Campos agrupados bajo un rótulo: los opcionales, juntos y marcados una sola vez. */
.dg-grupo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px var(--sp-4) var(--sp-4);
  border-radius: var(--pp-radio-control);
  background: var(--surface-1);
  text-align: left;
}
/* Adentro del grupo, campos algo más bajos y más juntos: son secundarios, y así el paso entero
   cabe en la tarjeta sin desplazarse. Siguen por encima de los 44 px tocables. */
.dg-grupo .dg-entrada {
  padding-block: 10px;
}
.dg-grupo .dg-campo {
  gap: var(--sp-1);
}
.dg-grupo-titulo {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* El error de UN campo, debajo de él. */
.dg-error-campo {
  font-size: var(--fs-xs);
  color: var(--danger-text);
}

/* Un resumen para revisar antes de enviar: una fila por sección, con su «Cambiar». */
.dg-resumen {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--pp-radio-control);
  text-align: left;
}
.dg-resumen > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: var(--sp-0-5) var(--sp-4);
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--panel-border);
}
.dg-resumen > div:first-child {
  border-top: 0;
}
.dg-resumen dt {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
}
.dg-resumen dd {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}
.dg-resumen small {
  display: block;
  color: var(--muted);
}
@media (max-width: 640px) {
  .dg-resumen > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .dg-resumen > div > :last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Lo que sigue: pasos numerados con una línea que los une. El hecho va relleno. */
.dg-pasos-siguientes {
  list-style: none;
  margin-block: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.dg-pasos-siguientes li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--sp-3);
  padding-bottom: 14px;
}
.dg-pasos-siguientes li::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--panel-border);
}
.dg-pasos-siguientes li:last-child::before {
  display: none;
}
.dg-paso-marca {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--panel-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--muted);
  background: var(--surface);
}
.dg-paso-hecho .dg-paso-marca {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}
.dg-pasos-siguientes strong {
  display: block;
  font-size: var(--fs-sm);
}
.dg-pasos-siguientes span {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ── Formulario ───────────────────────────────────────────────────────────── */

.dg-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.dg-campo {
  display: flex;
  flex-direction: column;
  /* Entre la etiqueta y su control. No está en la escala de 4 px a propósito —es más apretado
     que `--sp-2` y más suelto que `--sp-1`— y vive en una propiedad porque la rejilla de abajo
     tiene que usar EL MISMO valor: en `subgrid` el campo no hereda su propio `gap`. */
  --pp-campo-gap: 6px;
  gap: var(--pp-campo-gap);
  text-align: left;
}

/* UN FORMULARIO EN DOS COLUMNAS QUE NO SE DESCUADRA.
   Cada campo es una columna —etiqueta arriba, control abajo—, así que en una rejilla de dos
   columnas una etiqueta que ocupa DOS líneas baja su propio control y lo deja fuera de línea
   con el de al lado. Pasa con «Tu nombre profesional o el de tu oficina» al lado de «País», y
   pasa más seguido en los otros doce idiomas, donde los rótulos son más largos.
   `subgrid` lo resuelve de raíz: los campos no traen sus propias filas, usan las de la rejilla,
   así que todas las etiquetas comparten una fila y todos los controles otra, midan lo que
   midan. Cada campo conserva sus 6 px entre etiqueta y control; entre filas manda el de la
   rejilla. */
.dg-formulario--rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
}
/* EL CONTROL Y SU AVISO, EN LA MISMA FILA. Un campo de la rejilla ocupa DOS filas —la etiqueta y
   el control— y `subgrid` NO abre filas implícitas: un tercer hijo, como el aviso de un RUT malo,
   no cabe y rompe la fila (lo levantaron @jotramon y @KatherineGuerrero en la #4338). Envolver
   control y aviso deja el campo en dos hijos y el aviso debajo de lo escrito, que es donde se lee.
   Fuera de la rejilla el envoltorio es una columna más y no cambia nada. */
.dg-campo-control {
  display: flex;
  flex-direction: column;
  gap: var(--pp-campo-gap);
  min-width: 0;
}

.dg-formulario--rejilla > .dg-campo {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: var(--pp-campo-gap);
  /* Y NINGUNO SE ESTIRA PARA ALCANZAR AL VECINO. Los campos comparten las dos filas, así que
     cuando el del RUT crece —su aviso en rojo va debajo de lo escrito— la fila de los controles
     crece con él; sin esto, el `<input>` de «Razón social», que es un elemento de esa misma
     fila, se estira a lo alto para llenarla y queda del porte de dos campos (@valedt,
     27-oct-2026, visto en producción). Lo que comparten es dónde EMPIEZAN, no cuánto miden. */
  align-items: start;
}
@media (max-width: 640px) {
  .dg-formulario--rejilla {
    grid-template-columns: 1fr;
  }
}

.dg-etiqueta {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.dg-entrada {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-3) 14px;
  border: 1.5px solid var(--pp-campo-borde);
  border-radius: var(--pp-radio-control);
  background: var(--pp-campo-fondo);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.dg-entrada:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ── Avisos ───────────────────────────────────────────────────────────────── */

.dg-aviso {
  margin: 0;
  padding: 10px var(--sp-3);
  border-radius: var(--pp-radio-control);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  text-align: left;
}

.dg-aviso--error {
  color: var(--danger-text);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

.dg-aviso--exito {
  color: var(--success-text);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}

.dg-aviso--atencion {
  color: var(--warn-text);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}

/* Texto auxiliar junto a una etiqueta: «(mín. 8 caracteres)». En peso normal para
   que no compita con la etiqueta, que es la que hay que leer primero. */
.dg-nota {
  font-weight: var(--fw-regular);
  color: var(--muted);
}

/* ── Un bloque dentro de la tarjeta ───────────────────────────────────────── */

/* Una opción que se elige como tarjeta («¿Para quién es Degú?» en el alta): borde y radio de la
   hoja, y la elegida con el acento. Lo que va adentro lo arma cada vista. */
.dg-opcion {
  border: 2px solid var(--border-color);
  border-radius: var(--pp-radio-control);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.dg-opcion:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
}
.dg-opcion:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.dg-opcion:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Contenido secundario agrupado: «si crees que deberías tener acceso, escríbele
   a…». Se despega del fondo de la tarjeta con `--surface-1`, sin llegar a ser
   otra tarjeta. */
.dg-panel {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border: 1px solid var(--panel-border);
  border-radius: var(--pp-radio-control);
  background: var(--surface-1);
  text-align: left;
}

.dg-panel > :first-child {
  margin-top: 0;
}

.dg-panel > :last-child {
  margin-bottom: 0;
}

.dg-lista {
  margin: 0;
  padding-left: var(--sp-5);
  color: var(--muted);
}

.dg-lista li {
  margin: var(--sp-2) 0;
  line-height: var(--lh-normal);
}

/* Una ruta, un identificador: algo que se copia, no que se lee corrido. */
.dg-codigo {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--pp-radio-control);
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
}

/* ── Enlaces y pie ────────────────────────────────────────────────────────── */

.dg-enlace {
  color: var(--primary);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: opacity 0.2s;
}

.dg-enlace:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.dg-pie {
  margin: var(--sp-8) 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.01em;
  line-height: var(--lh-normal);
}

/* ── Angosto ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .dg-tarjeta {
    padding: 36px var(--sp-6) 28px;
    border-radius: var(--pp-radio-tarjeta-angosta);
  }

  .dg-titulo {
    font-size: var(--fs-2xl);
  }
}

/* ── En el teléfono: la pantalla entera, sin tarjeta ──────────────────────────
   Como la entrada de las apps de iOS y Android: la marca y el texto al centro y la acción
   abajo, al alcance del pulgar, en vez de una tarjeta flotante que en un teléfono se come
   los bordes y deja el botón a media pantalla. `data-movil` lo pone la app web en el
   `<html>` (hooks.server.ts); el tema de Keycloak no lo tiene y sigue con la tarjeta. */
:root[data-movil] .dg-pantalla {
  place-items: stretch;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

:root[data-movil] .dg-tarjeta {
  max-width: none;
  min-height: 100%;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Los dos márgenes automáticos reparten el aire: el bloque de arriba queda al centro y las
   acciones bajan al pie. */
:root[data-movil] .dg-tarjeta > :first-child {
  margin-top: auto;
}

:root[data-movil] .dg-acciones {
  margin-top: auto;
  padding-top: var(--sp-6);
}

/* ── El documento público ─────────────────────────────────────────────────── */

/* Términos y privacidad NO son la tarjeta: son texto largo que se lee de corrido,
   así que llevan ancho de lectura y no caja. Viven en esta hoja igual, porque el
   problema que tenían era el mismo —estaban escritas dos veces, con siete reglas
   idénticas duplicadas— y porque comparten la paleta.

   Y no la compartían: invocaban `--texto`, `--texto-suave`, `--verde`,
   `--verde-oscuro` y `--fondo-suave`, CINCO variables que no existen en ningún
   lado. Como todas traían fallback, nadie lo notó nunca: las dos páginas pintaban
   permanentemente con `#1f2933` y `#5b9e4d`, que no son colores de Degú. El mismo
   fondo tenía además dos grises distintos en el mismo archivo. */
.dg-documento {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6) 80px;
  line-height: var(--lh-lectura);
  color: var(--text);
}

.dg-documento h1 {
  font-size: var(--fs-4xl);
  margin-bottom: var(--sp-1);
}

.dg-documento h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-2);
}

.dg-documento ul {
  padding-left: var(--sp-5);
}

.dg-documento li {
  margin-bottom: 6px;
}

.dg-documento a {
  color: var(--primary);
}

.dg-documento code {
  padding: 0.1em 0.35em;
  border-radius: var(--pp-radio-control, 4px);
  background: var(--surface-1);
  font-size: max(var(--fs-3xs), 0.9em);
}

.dg-documento blockquote {
  margin: var(--sp-4) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--pp-radio-control, 4px) var(--pp-radio-control, 4px) 0;
  background: var(--surface-1);
}

.dg-documento blockquote p:last-child {
  margin-bottom: 0;
}

/* La fecha bajo el título: es dato, no texto del documento. */
.dg-documento-fecha {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-8);
}

/* Los Términos traen subtítulos y la tabla de subencargados, y se imprimen: quien los acepta
   tiene derecho a guardarlos (Ley 19.496, art. 12 A). `.dg-enlace` en un <button> es el
   «Imprimir o guardar en PDF», que tiene que verse como un enlace más de la línea. */
.dg-documento h3 {
  font-size: var(--fs-lg);
  margin-top: 28px;
  margin-bottom: 6px;
}

.dg-documento table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  font-size: var(--fs-xs);
}

.dg-documento th,
.dg-documento td {
  padding: var(--sp-2) 10px;
  border: 1px solid var(--panel-border);
  text-align: left;
  vertical-align: top;
}

.dg-documento th {
  background: var(--surface-1);
}

.dg-documento button.dg-enlace {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}

@media print {
  .dg-no-imprimir {
    display: none !important;
  }

  .dg-documento {
    max-width: none;
    padding: 0;
  }
}