/* =====================================================================
   EKKLESIA · Pantallas de acceso (login, login_dev, cambio de clave, 2FO)

   La puerta tiene que parecerse a la casa. Antes esta pantalla vivía en su
   propio azul —un degradado real (#003399 → #2563eb) heredado de la piel
   anterior— mientras la aplicación ya había pasado al azul medianoche del
   menú. Entrabas por una puerta que no era de este edificio.

   Ahora el fondo ES el del menú (`--nav`), así que el salto del login al
   Resumen no cambia de color: solo se abre.

   Composición: la marca NO va en una caja. El campo azul ocupa la página
   entera, el emblema y el nombre de la iglesia se apoyan directamente
   sobre él, y el formulario es una hoja blanca puesta encima. Una sola
   caja, no dos mitades cosidas.

   Requiere ekklesia.css cargado ANTES (de ahí salen los tokens).
   ===================================================================== */

/* ---------------------------------------------------------------------
   El campo azul. Un solo halo frío arriba a la izquierda para que el
   medianoche no quede plano; nada más. El color sale del token del menú,
   no de un hex escrito acá: si el menú cambia de azul, esto lo sigue.
   ------------------------------------------------------------------- */
.au-body{
  /* border-box o el padding se SUMA al min-height:100vh y la página queda
     52px más alta que la ventana: barra de scroll en un login que cabe. */
  box-sizing:border-box;
  min-height:100vh; margin:0; padding:26px; color:#fff;
  display:grid; place-items:center; position:relative; overflow:hidden;
  background:var(--nav);
  /* Opacidad del emblema en reposo y en el pico del latido (animación 2,
     más abajo). Tokens locales porque el móvil los recalibra —el emblema
     es más chico ahí— y así el keyframe no se vuelve a escribir. */
  --au-emblema-a:.05; --au-emblema-b:.075;
}

/* La firma de la pantalla: el mismo emblema, enorme y casi apagado,
   saliéndose por el borde inferior izquierdo. Es el artefacto de la
   iglesia usado como textura — por eso acá no hay retículas ni adornos
   genéricos: este es el único gesto y las ondas (más abajo) nacen de él.

   Animación 1 de 4 — «el emblema respira»: oscila ±7° y SIEMPRE VUELVE
   (antes giraba 360° completos, y eso lo dejaba en cualquier ángulo
   arbitrario — se leía como «se torció», no como «está vivo»), y late
   apenas en opacidad. Solo `transform` y `opacity`, así que no dispara
   layout ni repintado de fondo. `transform` abre un contexto de
   apilamiento nuevo para este pseudo-elemento, pero `.au-card` sigue con
   `z-index:1` explícito: la tarjeta queda por ENCIMA igual — se comprobó
   en el navegador (ver informe). Mismo cuidado que ya costó con la marca
   de agua de `.ek-shell` y con `.ek-card-acc`. */
.au-body::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-190px; bottom:-230px; width:660px; height:660px;
  background:url("/assets/img/logo-renacer-emblema-blanco.png") center/contain no-repeat;
  opacity:var(--au-emblema-a);
  transform-origin:50% 50%;
  animation:
    auEmblemaVaiven 15s ease-in-out infinite,
    auEmblemaLatido 8s ease-in-out infinite alternate;
  will-change:transform, opacity;
}
@keyframes auEmblemaVaiven{
  0%, 100%{ transform:rotate(-7deg); }
  50%{ transform:rotate(7deg); }
}
@keyframes auEmblemaLatido{
  from{ opacity:var(--au-emblema-a); }
  to{   opacity:var(--au-emblema-b); }
}

/* Aurora: tres manchas muy difusas a la deriva (animación 2 de 4).
   Reemplaza a las ondas concéntricas (commit 788bce3, opción C), que
   quedaron en producción hasta ago 2026 — la comparativa sigue viva en
   `docs/rediseno_login_movimiento.html`.

   La maqueta de referencia (tarjeta B de esa comparativa) las dibuja con
   `border-radius:50%` + `filter:blur(46px)`, aceptable en un recuadro de
   260px. A pantalla completa —y animándose todo el rato— `blur` es caro
   porque su costo crece con el ÁREA que cubre: es justo el pero que la
   propia comparativa anota para esta opción, y a pantalla completa deja
   de ser teórico. Acá se logra el mismo aspecto —una mancha difusa es
   exactamente lo que dibuja un degradado radial con parada suave— sin
   filtro que recalcular por cuadro: cada mancha es un `radial-gradient`
   de centro a transparente, y se mueve solo con `transform`.

   Reusa el marcado de las ondas (tres `<i>` en las cinco pantallas de
   acceso): son tres capas del mismo tipo de efecto y así no hace falta
   tocar los cinco archivos para agregar elementos nuevos.

   Colores: sin tono nuevo. Dos manchas en `--acc-nav` (el azul claro que
   ya usa el chrome del menú) y una en `--renacer` (el azul de marca,
   apenas más presente que el `--nav` de fondo, así que queda como una
   mancha oscura y no un foco). `color-mix()` en vez de una `rgba()`
   suelta para no escribir el hex del token dos veces.

   Tamaños en `vmax` (46–60% del lado mayor del viewport) para que sigan
   leyéndose como manchas grandes en cualquier resolución, sin una media
   query aparte. Duraciones distintas (26s/34s/30s) para que las tres no
   vuelvan a coincidir nunca a la vista.

   Comprobado contra la hoja blanca en 1280 y 1440px: al 22%/28%/14% de
   mezcla el blanco de `.au-form` no cambia (es opaco, la mancha queda
   detrás) y el versículo —blanco pleno sobre el azul— se sigue leyendo
   igual de nítido con las tres manchas en su punto más brillante. */
/* ⚠️ El recorte va también en <html>, no sólo en .au-body: las manchas
   miden en `vmax` y a 390px de ancho la más grande se sale ~110px por la
   derecha. El `overflow:hidden` del body no alcanza para impedir el
   scroll horizontal —la propagación de overflow al viewport lo deja
   pasar—, y en el teléfono eso se nota como una pantalla que «se corre»
   de lado. */
html:has(> body.au-body){ overflow-x:hidden; }

.au-aurora{
  display:block; position:absolute; z-index:0; pointer-events:none;
  border-radius:50%;
  will-change:transform;
}
.au-aurora:nth-of-type(1){
  width:60vmax; height:60vmax; left:-16vmax; top:-18vmax;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc-nav) 22%, transparent) 0%, transparent 70%);
  animation:auAurora1 26s ease-in-out infinite;
}
.au-aurora:nth-of-type(2){
  width:52vmax; height:52vmax; right:-14vmax; bottom:-16vmax;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--renacer) 28%, transparent) 0%, transparent 70%);
  animation:auAurora2 34s ease-in-out infinite;
}
.au-aurora:nth-of-type(3){
  width:46vmax; height:46vmax; left:26%; top:22%;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc-nav) 14%, transparent) 0%, transparent 70%);
  animation:auAurora3 30s ease-in-out infinite;
}
@keyframes auAurora1{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(5vw,4vh,0) scale(1.16); }
}
@keyframes auAurora2{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-4vw,-5vh,0) scale(1.12); }
}
@keyframes auAurora3{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-3vw,4vh,0) scale(1.2); }
}

/* ---------------------------------------------------------------------
   La tarjeta ya no es una caja: es la rejilla que sostiene marca y hoja.
   Sin fondo, sin borde, sin sombra propia.
   ------------------------------------------------------------------- */
.au-card{
  position:relative; z-index:1;
  width:min(1000px,100%); display:grid; grid-template-columns:1fr .82fr;
  gap:56px; align-items:center;
}

/* -- Marca, apoyada sobre el azul -- */
.au-hero{ position:relative; padding:0; }
.au-hero-in{ display:flex; flex-direction:column; }

/* El wordmark institucional ES el título: el emblema y «RENACER · IGLESIA»
   vienen en un solo archivo, así que acá no hay ni imagen suelta ni texto
   que los repita.

   Viene ya en blanco sobre transparente, así que no necesita el filtro
   `.ek-inv`. Lo que tenía esta pantalla no era un filtro mal puesto: era
   el emblema AZUL a 38px sobre un hero AZUL, o sea invisible por tamaño y
   por contraste. */
.au-wm{ margin:0; line-height:0; }
.au-wm img{
  width:330px; max-width:100%; height:auto; display:block;
}

/* Marca suelta (emblema sin texto). La usa login_dev. */
.au-brand{ display:flex; align-items:center; }
.au-mark{ width:104px; height:104px; display:block; object-fit:contain; }
/* `.au-sys` —el nombre del sistema escrito en mono bajo el wordmark— se
   eliminó. Ponía «EKKLESIA» a 18px del logo de la iglesia, que es justo la
   competencia que ya se había rechazado en la cabecera del menú lateral: en
   el rincón de la marca manda la iglesia. El nombre del software se mudó a
   la hoja blanca, con su marca de verdad (ver `.au-app` más abajo). */
/* El versículo. Es la voz de la iglesia, no la del sistema: por eso va en
   blanco pleno y con aire, y todo lo demás de esta columna baja de tono
   para dejarlo hablar. Sin comillas decorativas ni cursiva. */
.au-vers{ margin:24px 0 0; max-width:25em; }
.au-vers p{
  margin:0; font-size:19px; line-height:1.45; font-weight:500;
  letter-spacing:-.015em; color:#fff;
  /* Reparte las líneas parejo en vez de cortar donde caiga: sin esto la
     primera línea quedaba en «No dejemos de» y partía la frase por la
     mitad de una idea. Donde no exista, simplemente ajusta como siempre. */
  text-wrap:balance;
}
.au-vers cite{
  display:block; margin-top:12px; font-style:normal;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc-nav);
}

/* Nota al pie de la columna azul: orienta, pero no compite con el versículo. */
.au-sub{
  margin:26px 0 0; font-size:13px; line-height:1.6; max-width:36ch;
  color:rgba(255,255,255,.45);
}
/* Filete corto: separa la marca del texto sin meter una caja.
   El margen va explícito a los cuatro lados: un <hr> trae `margin-inline:auto`
   del navegador y se centraba solo, rompiendo la alineación a la izquierda. */
.au-rule{ width:44px; height:2px; margin:24px 0 0; background:rgba(255,255,255,.22); border:0; }

/* Compatibilidad con marcado anterior (login_dev todavía los usa). */
.au-kick{
  margin-top:24px; font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--acc-nav);
}
.au-title{ margin:10px 0 0; font-size:30px; line-height:1.14; font-weight:700; letter-spacing:-.022em; }
.au-logo{ width:104px; height:104px; flex:none; object-fit:contain; }
.au-feat{ margin-top:26px; display:flex; flex-wrap:wrap; gap:8px; }
.au-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,.78); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); padding:6px 11px; border-radius:999px;
}
.au-chip .dot{ width:6px; height:6px; border-radius:50%; }
.au-deco{ display:none; }   /* las barras decorativas ya no van */

/* ---------------------------------------------------------------------
   La hoja del formulario. Blanca, con la sombra larga de la aplicación:
   parece apoyada sobre el azul, no incrustada en él.
   ------------------------------------------------------------------- */
.au-form{
  background:var(--sf); color:var(--ink); border-radius:14px;
  padding:36px 34px 28px; display:flex; flex-direction:column;
  box-shadow:0 24px 60px -18px rgba(3,7,18,.55);
}
/* ---------------------------------------------------------------------
   La marca del software, encabezando la hoja.

   Acá vive porque acá empieza el software. El campo azul es de la IGLESIA
   —el emblema, «RENACER · IGLESIA», el versículo— y la hoja blanca es el
   sistema: la ϵ puesta en el borde de arriba marca ese umbral. No es un
   logo puesto donde cupo; es la línea entre las dos cosas que conviven en
   esta pantalla.

   Va CHICA y sin gestos. La firma de este login es el emblema enorme y
   apagado saliéndose por el borde inferior, y esa apuesta se gasta entera
   ahí: una segunda marca que grite dejaría a la pantalla con dos centros.

   El filete de abajo hace pareja con el que ya trae `.au-foot`: el
   formulario queda entre dos líneas, con la marca arriba y la ayuda abajo.
   ------------------------------------------------------------------- */
.au-app{
  display:flex; align-items:center;
  padding-bottom:17px; margin-bottom:20px; border-bottom:1px solid var(--ln);
}
.au-app-tx{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:14px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc); white-space:nowrap;
  /* Igual que en la barra superior: el hueco no lo pone un `gap` sino el
     aire interno del viewBox —el trazo no llega al borde del SVG— y se
     compensa acá para que «ϵ» y «kklesia» se lean como UNA palabra. A 26px
     ese aire es mayor que a 20px, de ahí el -4 en vez del -2. */
  margin-left:-4px;
}

.au-fh{ font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.au-fs{ font-size:13.5px; color:var(--mut); margin-top:6px; line-height:1.5; }

.au-lbl{ font-size:12.5px; font-weight:600; color:var(--ink2); margin:18px 0 7px; display:block; }
.au-inpwrap{ position:relative; display:flex; align-items:center; }
.au-inpwrap .ai{
  position:absolute; left:13px; width:15px; font-size:13px; color:var(--mut);
  pointer-events:none; text-align:center;
}
/* Mismo campo que el resto de la aplicación (.inp), con sitio para el ícono. */
.au-inp{
  width:100%; padding:12px 14px 12px 37px; border:1px solid var(--ln);
  border-radius:var(--r); font:inherit; font-size:14.5px; background:var(--sf2);
  color:var(--ink); box-sizing:border-box;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.au-inp::placeholder{ color:var(--mut); }
.au-inp:focus{
  outline:none; border-color:var(--acc); background:var(--sf);
  box-shadow:0 0 0 3px rgba(14,42,99,.13);
}

.au-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin: 0.75rem 0;
}

/* Aviso de error / información */
.au-err, .au-ok{
  display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:var(--r);
  font-size:13px; margin-top:18px; line-height:1.45;
}
.au-err{ background:rgba(225,29,72,.07); color:var(--danger); border:1px solid rgba(225,29,72,.22); }
.au-ok { background:var(--acc-sf);        color:var(--ink2);   border:1px solid var(--acc-bd); }

/* Botón principal: el mismo .btn-primary de la aplicación, a lo ancho.
   Sin mayúsculas ni tracking — ese grito era de la piel anterior. */
.au-btn{
  /* ⚠️ `box-sizing:border-box` es OBLIGATORIO acá: con `width:100%` más
     `padding:13px` y el borde de 1px, en content-box el botón mide 28px
     MÁS que su contenedor y se sale por los dos lados. No se notaba en el
     login —ahí su caja no tiene padding propio— pero sí en cualquier
     bloque que lo envuelva, como el «Quiero donar» de necesitamos.php,
     que se salía de su tarjeta. Esta hoja no tiene reset global de
     box-sizing, así que hay que declararlo por regla. */
  box-sizing:border-box;
  margin-top:22px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid transparent; background:var(--acc); color:var(--acc-ink);
  font:inherit; font-size:14.5px; font-weight:600; text-decoration:none;
  padding:13px; border-radius:var(--r); cursor:pointer; box-shadow:var(--sh);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.au-btn:hover{ background:var(--renacer-hover); }
.au-btn:active{ transform:translateY(1px); }
.au-btn[disabled]{ opacity:.6; cursor:progress; }
.au-btn.ghost{
  background:var(--sf); color:var(--ink2); border-color:var(--ln);
  box-shadow:none; margin-top:10px; font-weight:500;
}
.au-btn.ghost:hover{ background:var(--sf3); border-color:var(--mut); color:var(--ink); }

/* Foco visible: se navega con teclado, y sobre azul el anillo tiene que
   verse tanto en la hoja blanca como fuera de ella. */
.au-inp:focus-visible, .au-btn:focus-visible, .au-sel:focus-visible, .au-foot a:focus-visible{
  outline:2px solid var(--acc-nav); outline-offset:2px;
}

/* Selector de usuario real (solo login de desarrollo) */
.au-pick{ margin:0; }
.au-sel{
  width:100%; font:inherit; font-size:14px; color:var(--ink);
  background:var(--sf2); border:1px solid var(--ln); border-radius:var(--r);
  padding:12px; cursor:pointer; appearance:none;
}
.au-sel:focus{ outline:none; border-color:var(--acc); background:var(--sf); }
.au-sep{
  display:flex; align-items:center; gap:12px; margin:20px 0 6px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--mut);
}
.au-sep::before, .au-sep::after{ content:""; flex:1; height:1px; background:var(--ln); }

/* Pie del formulario */
.au-foot{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--ln);
  font-size:12.5px; color:var(--mut); line-height:1.5;
}
.au-link{ margin-top:16px; font-size:13px; color:var(--mut); text-align:center; }
.au-link a, .au-foot a{ color:var(--acc); font-weight:600; text-decoration:none; }
.au-link a:hover, .au-foot a:hover{ text-decoration:underline; }

/* Segundo factor: seis dígitos monoespaciados y muy espaciados */
.au-codigo{
  padding-left:14px; text-align:center; font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:24px; letter-spacing:.38em; text-indent:.38em;
}

/* Cinta de advertencia (solo entorno de desarrollo) */
.au-dev{
  background:rgba(217,119,6,.09); border:1px dashed rgba(217,119,6,.42); color:#b45309;
  border-radius:var(--r); padding:10px 13px; font-size:12px; font-weight:500; margin-top:18px;
  display:flex; gap:8px; align-items:flex-start; line-height:1.45;
}

/* ---------------------------------------------------------------------
   Móvil: la marca se apila arriba y encoge; la hoja ocupa el ancho.
   El emblema sigue grande —es lo que se pidió— pero deja de competir.
   ------------------------------------------------------------------- */
@media (max-width:860px){
  .au-body{ padding:24px 18px 32px; place-items:start center; --au-emblema-a:.045; --au-emblema-b:.07; }
  .au-body::before{ left:-140px; bottom:-190px; width:460px; height:460px; }
  /* La aurora no necesita recalibrarse acá: está en `vmax`, así que ya
     escala con el viewport. Las ondas sí lo necesitaban porque su
     tamaño y su centro estaban en píxeles fijos, derivados del emblema. */
  .au-card{ grid-template-columns:1fr; gap:30px; max-width:440px; padding-top:26px; }
  .au-hero-in{ align-items:flex-start; }
  .au-mark, .au-logo{ width:76px; height:76px; }
  .au-wm img{ width:210px; }
  /* En el teléfono todo lo que va antes del formulario lo empuja bajo el
     borde de la pantalla. El versículo se queda —achicado—; la bajada
     descriptiva se va: quien entra desde el celular ya sabe qué es esto. */
  .au-vers{ margin-top:18px; }
  .au-vers p{ font-size:16.5px; }
  .au-sub{ display:none; }
  .au-title{ font-size:25px; }
  .au-sub{ margin-top:16px; font-size:14px; }
  .au-rule{ margin-top:18px; }
  .au-form{ padding:28px 24px 22px; }
  /* La marca no se achica —a 26px ya es discreta— pero sí se aprieta contra
     el formulario: en el teléfono cada píxel antes del primer campo cuenta. */
  .au-app{ padding-bottom:14px; margin-bottom:17px; }
  .au-app-tx{ font-size:13px; }
}

/* Entrada en cascada (animación 4 de 4) — mismo keyframe `ekIn` de la
   sección 8 de `ekklesia.css` (cargado antes), para que se sienta de la
   misma familia que el resto del sistema en vez de otra. No hace falta
   la clase `.ek-anim` en el marcado de las cinco pantallas: los
   selectores van directo sobre `.au-hero-in` (wordmark · filete ·
   versículo · bajada, en ese orden) y sobre `.au-form`, que llega un
   paso después para cerrar la secuencia. */
.au-hero-in > *{ animation:ekIn .40s var(--ease) both; }
.au-hero-in > *:nth-child(1){ animation-delay:.02s }
.au-hero-in > *:nth-child(2){ animation-delay:.07s }
.au-hero-in > *:nth-child(3){ animation-delay:.12s }
.au-hero-in > *:nth-child(n+4){ animation-delay:.17s }
.au-card > .au-form{ animation:ekIn .40s var(--ease) .22s both; }

/* La ϵ se dibuja sola (animación 3 de 4). Acotada a `.au-app .ek-marca`:
   `ek_marca_ekklesia()` también la pinta en `includes/layout_top.php`
   (clase `.ek-app`, no `.au-app`) y en `elegir_campus.php`, pero la barra
   superior de la aplicación usa ese OTRO envoltorio y no calza con este
   selector — se comprobó que queda igual (ver informe). `pathLength="1"`
   en los dos <path> de la función normaliza el largo a 1 unidad, así el
   dash no depende de medir el trazo a mano. */
.au-app .ek-marca path{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:auMarcaDibujo .7s var(--ease) forwards;
}
@keyframes auMarcaDibujo{ to{ stroke-dashoffset:0; } }

/* Quien pidió menos movimiento, recibe menos movimiento — las cuatro
   animaciones, sin excepción. Apagarlas tiene que dejar la pantalla en
   su estado FINAL y legible, no a mitad de camino: la ϵ completamente
   dibujada (dashoffset:0), el emblema quieto —sin rotar— en su opacidad
   de siempre (el `opacity` base ya sale del token `--au-emblema-a`, así
   que basta con no animar), la aurora quieta en su posición de reposo
   —el `radial-gradient` ya es la mancha completa, no algo que aparece:
   basta con no animar el `transform`, no hace falta tocar la opacidad
   como sí pedían las ondas— y el contenido de la cascada visible y en
   su sitio. */
@media (prefers-reduced-motion:reduce){
  .au-inp, .au-btn, .au-sel{ transition:none; }
  .au-btn:active{ transform:none; }
  .au-body::before{ animation:none; }
  .au-aurora{ animation:none; }
  .au-hero-in > *, .au-card > .au-form{
    animation:none; opacity:1; transform:none;
  }
  .au-app .ek-marca path{ animation:none; stroke-dashoffset:0; }
}

/* Marca del software, dentro de la hoja blanca (no en la columna azul,
   que es de la iglesia). Mismo patrón que login.php: la ϵ EMPIEZA la
   palabra, por eso el texto dice «kklesia» y no «Ekklesia»; el nombre
   accesible completo lo pone el aria-label del contenedor. Va chica y
   sin gestos — la firma de esta pantalla sigue siendo el emblema grande
   del lado azul. */
.au-app{
  display:flex; align-items:center;
  padding-bottom:17px; margin-bottom:20px; border-bottom:1px solid var(--ln);
}
.au-app-tx{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:14px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc); white-space:nowrap; margin-left:-4px;
}
@media (max-width: 640px){
  .au-app{ padding-bottom:14px; margin-bottom:17px; }
  .au-app-tx{ font-size:13px; }
}

/* Los dos documentos legales, al pie de la hoja blanca. Van bajo la nota
   de la contraseña y separados por un filete: no son ayuda para entrar,
   son el marco bajo el que se entra. Apagados a propósito — tienen que
   estar y poder encontrarse, no competir con el botón. */
.au-legal{ margin-top:11px; padding-top:10px; border-top:1px solid var(--ln2);
  display:flex; gap:7px; justify-content:center; flex-wrap:wrap;
  font-size:11px; color:var(--mut); }
.au-legal a{ color:var(--mut); text-decoration:underline;
  text-underline-offset:2px; }
.au-legal a:hover{ color:var(--ink); }