/* ==========================================================================
   Login y registro con el mismo lenguaje visual del hero orbital:
   fondo navy #0d1220, accion en dorado de marca, acentos azul plateado,
   Unbounded para titulos y Space Mono para etiquetas.
   Se carga DESPUES de premium-theme.css y de los estilos propios de cada
   pagina, por eso los selectores van acotados a #loginModal / .register-box.
   ========================================================================== */
:root{
  --auth-void:#0d1220;
  --auth-panel:rgba(255,255,255,.05);
  --auth-line:rgba(255,255,255,.13);
  --auth-ink:#f0f4ff;
  --auth-ink-dim:#8fa3c0;
  --auth-ink-faint:#4d6080;
  --auth-signal:#a9c3e0;
  --auth-gold:#f6c445;
  --auth-gold-ink:#2a1e05;
}

/* ---------- cielo de las paginas de acceso ----------
   El modal de login vive sobre index.php, asi que detras se ve la portada.
   Registro y 2FA son paginas propias y quedaban con el fondo plano ("no se ve
   nada"), asi que se les recrea el mismo cielo: nebulosa + estrellas.
   El canvas necesita width/height explicitos: es un elemento reemplazado y con
   width:auto usa su tamano intrinseco (300x150) ignorando right/bottom. */
.auth-nebula{
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(96,130,255,.22), transparent 70%),
    radial-gradient(46% 34% at 82% 74%, rgba(246,196,69,.10), transparent 72%),
    radial-gradient(70% 60% at 50% 50%, rgba(19,26,42,.55), transparent 80%);
  z-index:1 !important;
}
canvas.auth-stars{
  position:fixed; left:0; top:0; width:100%; height:100%;
  z-index:2 !important; opacity:.85; pointer-events:none;
}

/* ---------- posicion del modal de login ----------
   Antes se centraba en vertical (place-items:center). Cuando el formulario es
   mas alto que la pantalla, la mitad de arriba se sale del viewport y queda
   tapada por la barra fija, sin forma de subir. Se ancla arriba, dejando libre
   la altura de la barra, y el overlay hace scroll. */
#loginModal.active{
  align-content:start;
  justify-items:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:5.25rem 1rem 2rem;
}
@media (min-width:769px){
  #loginModal.active{ padding:6rem 1.5rem 2.5rem; }
}
@media (min-height:900px){
  #loginModal.active{ padding-top:9vh; }
}
#loginModal .modal{ max-height:none !important; }

/* ---------- estructura comun de tarjeta ---------- */
#loginModal .modal,
.register-box{
  background:
    linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 45%, rgba(255,255,255,.04) 100%),
    rgba(13,18,32,.92) !important;
  border:1px solid var(--auth-line) !important;
  border-radius:1.5rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 32px 64px -20px rgba(0,0,0,.7) !important;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}

/* ---------- titulos ---------- */
#loginModal .modal-header h2,
.register-box h1{
  font-family:'Unbounded', sans-serif !important;
  font-weight:800 !important;
  font-size:clamp(1.2rem, .95rem + 1.1vw, 1.6rem) !important;
  letter-spacing:-.02em !important;
  line-height:1.15 !important;
  text-wrap:balance;
  color:var(--auth-ink) !important;
  background:none !important;
  -webkit-text-fill-color:var(--auth-ink) !important;
}
/* un poco mas ancho en escritorio para que el titulo no parta en dos */
@media (min-width:769px){
  #loginModal .modal{ width:min(26rem, 100%) !important; max-width:26rem !important; }
}
#loginModal > .modal > p,
.register-box .subtitle{
  color:var(--auth-ink-dim) !important;
  font-size:.88rem !important;
}

/* ---------- etiquetas de campo ---------- */
#loginModal .form-label,
.register-box label{
  font-family:'Space Mono', monospace !important;
  font-size:.64rem !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--auth-ink-faint) !important;
}

/* ---------- campos ---------- */
#loginModal .form-input,
.register-box input[type="text"],
.register-box input[type="email"],
.register-box input[type="password"],
.register-box input[type="tel"],
.register-box select{
  background:var(--auth-panel) !important;
  border:1px solid var(--auth-line) !important;
  border-radius:.85rem !important;
  color:var(--auth-ink) !important;
  font-family:'Inter', sans-serif !important;
  font-size:.9rem !important;
  transition:border-color .2s, background-color .2s, box-shadow .2s !important;
}
#loginModal .form-input::placeholder,
.register-box input::placeholder{ color:var(--auth-ink-faint) !important; }

#loginModal .form-input:focus,
.register-box input:focus,
.register-box select:focus{
  outline:none !important;
  border-color:var(--auth-signal) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:0 0 0 3px rgba(169,195,224,.16) !important;
}

/* ---------- boton principal: el dorado de marca ---------- */
#loginModal .btn-submit,
.register-box .btn-register{
  background:var(--auth-gold) !important;
  color:var(--auth-gold-ink) !important;
  border:0 !important;
  border-radius:99px !important;
  font-family:'Inter', sans-serif !important;
  font-weight:800 !important;
  font-size:.95rem !important;
  letter-spacing:0 !important;
  box-shadow:0 .9rem 2rem -.7rem rgba(246,196,69,.45) !important;
  transition:transform .2s cubic-bezier(.19,1,.22,1), box-shadow .2s !important;
}
#loginModal .btn-submit:hover,
.register-box .btn-register:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 1.2rem 2.4rem -.8rem rgba(246,196,69,.55) !important;
}
#loginModal .btn-submit:active,
.register-box .btn-register:active{ transform:translateY(0) scale(.99) !important; }
#loginModal .btn-submit:disabled,
.register-box .btn-register:disabled{ opacity:.6 !important; transform:none !important; }

/* ---------- enlaces ---------- */
#loginModal a,
.register-box .login-link a,
.register-box a{ color:var(--auth-signal) !important; }
#loginModal a:hover,
.register-box a:hover{ color:var(--auth-ink) !important; }

/* ---------- candado animado ----------
   El JS ya alternaba las clases lock-locked / lock-unlocking / lock-unlocked,
   pero no existia CSS para ellas: el icono nunca se movia. Aqui se define el
   ciclo en reposo (se abre y se cierra solo) y la apertura al enviar. */
#loginModal .modal-icon{
  background:var(--auth-panel) !important;
  border:1px solid var(--auth-line) !important;
  border-radius:1rem !important;
  transition:border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
#loginModal .modal-icon svg{
  color:var(--auth-signal) !important;
  overflow:visible;
}
#loginModal .lock-shackle{
  transform-box:fill-box;
  transform-origin:82% 100%;   /* pivota sobre la pata derecha, como un candado real */
  will-change:transform;
}

@keyframes auth-lock-cycle{
  0%, 48%   { transform:translateY(0) rotate(0deg); }
  58%, 78%  { transform:translateY(-2px) rotate(-20deg); }
  90%, 100% { transform:translateY(0) rotate(0deg); }
}
@keyframes auth-lock-open{
  from{ transform:translateY(0) rotate(0deg); }
  to  { transform:translateY(-2px) rotate(-22deg); }
}
@keyframes auth-lock-glow{
  0%, 48%, 90%, 100%{ box-shadow:0 0 0 0 rgba(169,195,224,0); }
  62%, 76%          { box-shadow:0 0 0 6px rgba(169,195,224,.10); }
}

/* en reposo: se abre y se cierra en bucle para llamar la atencion */
#loginModal .lock-locked .lock-shackle,
#loginModal .modal-icon:not(.lock-unlocking):not(.lock-unlocked) .lock-shackle{
  animation:auth-lock-cycle 4.5s ease-in-out infinite;
}
#loginModal .modal-icon.lock-locked{
  animation:auth-lock-glow 4.5s ease-in-out infinite;
}

/* al enviar el formulario: abre y se queda abierto */
#loginModal .lock-unlocking .lock-shackle{
  animation:auth-lock-open .3s cubic-bezier(.19,1,.22,1) forwards;
}
#loginModal .lock-unlocked .lock-shackle{
  animation:none;
  transform:translateY(-2px) rotate(-22deg);
}
#loginModal .modal-icon.lock-unlocked{
  animation:none;
  border-color:rgba(246,196,69,.5) !important;
  background:rgba(246,196,69,.12) !important;
  box-shadow:0 0 0 5px rgba(246,196,69,.12);
}
#loginModal .lock-unlocked svg{ color:var(--auth-gold) !important; }

@media (prefers-reduced-motion:reduce){
  #loginModal .lock-shackle,
  #loginModal .modal-icon{ animation:none !important; }
}

/* ---------- cerrar ---------- */
#loginModal .modal-close{
  background:rgba(255,255,255,.06) !important;
  border:1px solid var(--auth-line) !important;
  color:var(--auth-ink-dim) !important;
}
#loginModal .modal-close:hover{ color:var(--auth-ink) !important; background:rgba(255,255,255,.12) !important; }

/* ---------- mensajes de error ---------- */
#loginModal .error-box,
.register-box .error-msg{
  background:rgba(255,90,60,.12) !important;
  border:1px solid rgba(255,90,60,.32) !important;
  color:#ff9d8a !important;
  border-radius:.75rem !important;
  font-size:.84rem !important;
}

/* ==========================================================================
   Verificacion en dos pasos (verificar_2fa.php)
   ========================================================================== */
/* El body traia overflow-hidden + centrado vertical (clases de Tailwind).
   Cuando la tarjeta es mas alta que la pantalla -por ejemplo en el paso del
   QR en un telefono- la mitad sobrante quedaba fuera del viewport y sin
   posibilidad de desplazarse. Se habilita el scroll vertical y se ancla
   arriba; los adornos se recortan en su propia capa fija. */
.auth-shell{
  background:var(--auth-void) !important;
  color:var(--auth-ink) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  align-items:flex-start !important;
  min-height:100vh;
  padding-top:2rem !important;
  padding-bottom:2.5rem !important;
}
@supports (min-height:100dvh){ .auth-shell{ min-height:100dvh; } }
@media (min-height:900px){
  .auth-shell{ align-items:center !important; }
}
/* capa de adornos: fija y recortada, para que no genere scroll lateral */
.auth-shell > .absolute.inset-0{
  position:fixed !important;
  inset:0 !important;
  overflow:hidden !important;
  pointer-events:none;
}
.auth-orb--accent{ background:rgba(169,195,224,.22) !important; }
.auth-orb--stone{ background:rgba(246,196,69,.14) !important; }
.auth-backdrop-grid{
  opacity:1 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) !important;
  background-size:64px 64px !important;
  mask-image:linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}

.auth-card{
  background:
    linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 45%, rgba(255,255,255,.04) 100%),
    rgba(13,18,32,.92) !important;
  border:1px solid var(--auth-line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 32px 64px -20px rgba(0,0,0,.7) !important;
}

.auth-shell h2{
  font-family:'Unbounded', sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  color:var(--auth-ink) !important;
}
.auth-brand-lock{ background:var(--auth-gold) !important; box-shadow:0 .9rem 2rem -.7rem rgba(246,196,69,.45) !important; }

/* ---------- escudo animado de la marca ----------
   El candado interno se abre y se cierra en bucle, y el contorno del escudo
   late suave: comunica "verificando seguridad" mientras el cliente espera. */
.auth-shield{ width:1.6rem; height:1.6rem; color:var(--auth-gold); overflow:visible; }
.auth-shield-shackle{
  transform-box:fill-box; transform-origin:80% 100%;
  animation:auth-shield-open 4.2s ease-in-out infinite;
}
.auth-shield-body{ animation:auth-shield-pulse 4.2s ease-in-out infinite; }

@keyframes auth-shield-open{
  0%, 45%   { transform:translateY(0) rotate(0deg); }
  57%, 76%  { transform:translateY(-1.4px) rotate(-24deg); }
  88%, 100% { transform:translateY(0) rotate(0deg); }
}
@keyframes auth-shield-pulse{
  0%, 45%, 88%, 100%{ opacity:1; }
  57%, 76%          { opacity:.55; }
}
@media (prefers-reduced-motion:reduce){
  .auth-shield-shackle, .auth-shield-body{ animation:none !important; }
}
.auth-brand-lock-inner{ background:var(--auth-void) !important; }
.auth-wordmark-accent{ color:var(--auth-gold) !important; }

/* opciones (App / Correo) */
.auth-option{
  background:var(--auth-panel) !important;
  border:1px solid var(--auth-line) !important;
  color:var(--auth-ink) !important;
  border-radius:1rem !important;
}
.auth-option:hover{
  border-color:rgba(169,195,224,.45) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:0 1rem 2rem -.9rem rgba(0,0,0,.6) !important;
}
.auth-option-icon{ background:rgba(169,195,224,.14) !important; color:var(--auth-signal) !important; }
.auth-option-icon--success{ background:rgba(246,196,69,.14) !important; color:var(--auth-gold) !important; }

/* campo del codigo */
.auth-code-input{
  background:var(--auth-panel) !important;
  border:1px solid var(--auth-line) !important;
  color:var(--auth-ink) !important;
  font-family:'Space Mono', monospace !important;
}
.auth-code-input:focus{
  border-color:var(--auth-signal) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:0 0 0 3px rgba(169,195,224,.16) !important;
}

.auth-primary-btn{
  background:var(--auth-gold) !important;
  color:var(--auth-gold-ink) !important;
  box-shadow:0 .9rem 2rem -.7rem rgba(246,196,69,.45) !important;
}
.auth-primary-btn:hover{
  background:var(--auth-gold) !important;
  transform:translateY(-2px);
  box-shadow:0 1.2rem 2.4rem -.8rem rgba(246,196,69,.55) !important;
}
.auth-secondary-link{ color:var(--auth-ink-dim) !important; }
.auth-secondary-link:hover{ color:var(--auth-ink) !important; }

/* ---------- vinculacion sin escanear ---------- */
.auth-add-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; margin-bottom:.6rem; padding:.85rem 1rem;
  border-radius:99px; text-decoration:none;
  background:var(--auth-gold); color:var(--auth-gold-ink);
  font-family:'Inter',sans-serif; font-weight:800; font-size:.9rem;
  box-shadow:0 .9rem 2rem -.7rem rgba(246,196,69,.45);
  transition:transform .2s, box-shadow .2s;
}
.auth-add-btn:hover{ transform:translateY(-2px); box-shadow:0 1.2rem 2.4rem -.8rem rgba(246,196,69,.55); }
.auth-add-btn .icono{ font-size:1.15rem; }
.auth-add-hint{
  margin:0 0 1.1rem; text-align:center;
  font-size:.75rem; line-height:1.45; color:var(--auth-ink-dim);
}

.auth-key-box{
  margin-bottom:1.4rem; padding:.9rem 1rem;
  border-radius:1rem; border:1px solid var(--auth-line);
  background:var(--auth-panel); text-align:center;
}
.auth-key-label{
  margin:0; font-family:'Space Mono', monospace; font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--auth-ink-faint);
}
.auth-key-value{
  margin:.5rem 0 .7rem; font-family:'Space Mono', monospace;
  font-size:1rem; font-weight:700; letter-spacing:.18em; word-break:break-all;
  color:var(--auth-signal); user-select:all;
}
.auth-key-copy{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .9rem; border-radius:99px; cursor:pointer;
  border:1px solid var(--auth-line); background:rgba(255,255,255,.06);
  color:var(--auth-ink-dim); font-family:'Inter',sans-serif;
  font-size:.76rem; font-weight:700;
  transition:color .2s, background-color .2s, border-color .2s;
}
.auth-key-copy:hover{ color:var(--auth-ink); background:rgba(255,255,255,.1); }
.auth-key-copy .icono{ font-size:1rem; }
.auth-key-copy.is-copied{
  color:#0a2318; background:#3ddc9a; border-color:transparent;
}

/* clave manual: misma familia mono que los datos del carrusel */
.auth-shell .font-mono{ font-family:'Space Mono', monospace !important; }
.auth-shell .text-blue-300{ color:var(--auth-signal) !important; }

/* ---------- fondo de la pagina de registro ---------- */
.register-box .bg-image,
body:has(.register-box) .bg-image{ background:var(--auth-void) !important; }