/* ============================================================================
   login.css — entrar a la app.

   Antes esto era una tarjeta blanca con un botón morado (#695CFE) sobre fondo
   gris claro, y campos de texto oscuros dentro de la tarjeta blanca: tres
   temas distintos peleándose en la misma pantalla. Y es la PRIMERA pantalla,
   la única que ve alguien que todavía no entró.

   Ahora es la misma app: fondo #343434, tarjeta #3D3D3D, ámbar en el botón
   principal. Mismos tokens que dashboard.css — se repiten aquí a propósito
   porque esta página no carga esa hoja: son dos pantallas independientes y
   no tiene sentido bajarse la app entera para poner un usuario y una clave.

   Las dos caras (entrar / recuperar contraseña) viven una al lado de la otra
   y se deslizan. Es la misma estructura de siempre; sólo cambió la piel.
   ========================================================================== */

:root{
  --bg:#343434;
  --surface:#3D3D3D;
  --surface-2:#444441;
  --surface-3:#4E4E4B;
  --line:#4A4A47;

  --ink:#FFFFFF;
  --ink-2:#BBBBBB;
  --ink-3:#9F9F9F;

  --coral:#D47862;
  --coral-ink:#E08D77;
  --amber:#F8D180;
  --bad:#E38A80;

  --font:'Poppins','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100%;}

body.login-body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  /* En columna, no en fila: el pie va DEBAJO de la tarjeta. Con la
     dirección por defecto se ponía a su lado y partía el ancho en dos. */
  display:flex;
  flex-direction:column;
  align-items:center;
  /* CENTRADO SEGURO — no cambiar a justify-content:center.
     ------------------------------------------------------------------
     Con `justify-content:center` sobre una caja de 100vh, al abrirse el
     teclado del móvil la ventana visible se encoge pero los 100vh siguen
     midiendo lo mismo. El navegador entonces desplaza la página para
     enseñar el campo enfocado, y como la tarjeta estaba centrada en una
     caja más alta que la pantalla, todo salta y parece que se hace zoom.
     Es lo que delataba que esto no era una app.

     `flex-start` + `margin:auto 0` en la tarjeta centra igual cuando hay
     sitio, pero cuando no lo hay se comporta como un bloque normal en vez
     de empujar el contenido fuera. Los márgenes automáticos, a diferencia
     del centrado del contenedor, nunca hacen que el contenido se salga
     por arriba. */
  justify-content:flex-start;
  /* El teclado del móvil empuja el contenido: el aire de arriba respeta la
     barra de estado y el de abajo la franja de gestos. */
  padding:calc(env(safe-area-inset-top, 0px) + 24px) 20px
          calc(env(safe-area-inset-bottom, 0px) + 24px);
}

button{font-family:inherit;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:8px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* ==========================================================================
   EL RECUADRO
   ========================================================================== */
.container-login{
  width:100%;
  max-width:400px;
  position:relative;
  /* Lo que centra, ahora que el body es flex-start. Ver la nota de arriba. */
  margin:auto 0;
  /* Las dos caras se apilan una junto a otra dentro de este ancho; lo que
     sobra por el lado se recorta. */
  overflow:hidden;
  border-radius:24px;
  background:var(--surface);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

.panel{
  transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
.panel-content{padding:30px 26px 26px;}

/* La cara de recuperar espera fuera, a la derecha, hasta que se la llama. */
.panel-right{
  position:absolute;inset:0;
  background:var(--surface);
  transform:translateX(100%);
  opacity:0;
  pointer-events:none;
}
.container-login.show-recover .panel-left{
  transform:translateX(-100%);
  opacity:0;
  pointer-events:none;
}
.container-login.show-recover .panel-right{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

/* ==========================================================================
   MARCA
   ========================================================================== */
.login-brand{display:flex;justify-content:center;margin-bottom:26px;}
/* El logo ya trae escrito "Dios Con Nosotros": es una imagen ancha, no un
   icono cuadrado. Encajarlo en 56x56 lo dejaba ilegible, y repetir el texto
   debajo era decirlo dos veces. */
.login-brand img{width:auto;max-width:190px;height:34px;object-fit:contain;
  opacity:.9;}

.panel h2{
  margin:0 0 6px;font-size:23px;font-weight:700;letter-spacing:-.3px;
}
.panel .sub{
  margin:0 0 22px;font-size:14px;color:var(--ink-3);
}

/* ==========================================================================
   AVISOS
   ========================================================================== */
.login-notice{
  background:rgba(248,209,128,.1);
  border:1px solid rgba(248,209,128,.28);
  color:var(--amber);
  border-radius:12px;padding:11px 14px;margin:0 0 18px;
  font-size:13.5px;line-height:1.45;
}

/* El error del formulario lleva su icono además del color: rojo sobre gris
   oscuro no es suficiente pista por sí solo. */
.form-error{
  display:flex;align-items:flex-start;gap:8px;
  background:rgba(227,138,128,.1);
  border:1px solid rgba(227,138,128,.3);
  color:var(--bad);
  border-radius:12px;padding:11px 14px;margin:0 0 4px;
  font-size:13.5px;line-height:1.45;
}
.form-error::before{
  content:'!';
  flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:var(--bad);color:#2B2B2B;
  font-weight:700;font-size:12px;line-height:18px;text-align:center;
  margin-top:1px;
}
.form-error[hidden]{display:none;}

/* ==========================================================================
   FORMULARIO
   ========================================================================== */
.panel label{
  display:block;font-size:12.5px;color:var(--ink-2);
  margin:0 0 6px;font-weight:500;
}
.panel input{
  width:100%;
  background:var(--surface-2);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:13px;
  /* 16px o más: por debajo de eso, iOS hace zoom al enfocar el campo y la
     pantalla se descoloca sola. */
  padding:14px 15px;font-size:16px;font-family:inherit;
  margin-bottom:16px;
  transition:border-color .15s ease,background .15s ease;
}
.panel input::placeholder{color:var(--ink-3);}
.panel input:focus{outline:none;border-color:var(--amber);background:var(--surface-3);}
.panel input:-webkit-autofill{
  /* El autocompletado de Chrome pinta el campo de azul claro con texto
     negro. Con este truco conserva el fondo oscuro y el texto blanco. */
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 60px var(--surface-2) inset;
  caret-color:var(--ink);
}

.panel button[type=submit]{
  width:100%;
  background:var(--amber);
  color:#3A2E12;
  border-radius:13px;
  padding:15px;font-size:15px;font-weight:600;
  margin-top:6px;min-height:50px;
  transition:filter .14s ease,transform .12s ease;
}
.panel button[type=submit]:hover:not([disabled]){filter:brightness(1.07);}
.panel button[type=submit]:active:not([disabled]){transform:scale(.99);}
.panel button[type=submit][disabled]{opacity:.55;cursor:default;}

/* La cara de recuperar usa el botón secundario: es la acción menos
   frecuente y no debe competir con "Iniciar sesión". */
.panel-right button[type=submit]{
  background:var(--surface-2);color:var(--ink);
}
.panel-right button[type=submit]:hover:not([disabled]){background:var(--surface-3);filter:none;}

.recover-password{
  display:block;text-align:center;margin-top:20px;
  color:var(--ink-3);font-size:13.5px;text-decoration:none;
}
.recover-password:hover{color:var(--coral-ink);text-decoration:underline;}

/* ==========================================================================
   PIE
   ========================================================================== */
.login-foot{
  text-align:center;margin-top:22px;
  font-size:11.5px;color:var(--ink-3);
}

/* ==========================================================================
   PRELOADER
   Una frase del reglamento mientras carga. Se va sola.
   ========================================================================== */
.preloader{
  position:fixed;inset:0;z-index:60;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:32px;text-align:center;
  transition:opacity .45s ease,visibility .45s ease;
}
.preloader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.preloader-text{max-width:340px;}
.preloader-char{
  display:inline-block;font-size:13px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  animation:subir .5s ease backwards;
}
.preloader-char:nth-child(1){animation-delay:.02s}
.preloader-char:nth-child(2){animation-delay:.06s}
.preloader-char:nth-child(3){animation-delay:.10s}
.preloader-char:nth-child(4){animation-delay:.14s}
.preloader-char:nth-child(5){animation-delay:.18s}
.preloader-char:nth-child(6){animation-delay:.22s}
.preloader-char:nth-child(7){animation-delay:.26s}
.preloader-char:nth-child(8){animation-delay:.30s}
.preloader-char:nth-child(9){animation-delay:.34s}
@keyframes subir{from{opacity:0;transform:translateY(8px);}}

#random-rules{
  margin-top:14px;font-size:15px;line-height:1.55;
  color:var(--ink-2);font-weight:400;letter-spacing:0;text-transform:none;
  animation:subir .6s .35s ease backwards;
}

/* ==========================================================================
   RECUPERAR CONTRASEÑA (reset.php)
   ========================================================================== */
.pw-rules{list-style:none;margin:0 0 16px;padding:0;display:flex;
  flex-direction:column;gap:6px;}
.pw-rules li{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:var(--ink-3);
}
/* La regla cumplida cambia de color Y de símbolo: con el círculo vacío
   frente al tilde se entiende sin depender del verde. */
.pw-rules li::before{
  content:'○';flex-shrink:0;width:16px;text-align:center;
  font-size:13px;line-height:1;
}
.pw-rules li.ok{color:#7FBF8A;}
.pw-rules li.ok::before{content:'✓';font-weight:700;}

.reset-expired{
  font-size:14px;color:var(--ink-2);line-height:1.55;margin:0;
}
.reset-expired a{color:var(--coral-ink);}