/* ==========================================================================
   Ingreso a la consola (admin/login.html) — estilos propios de la pantalla.
   Composición: página entera en azul pizarra de la consola (el mismo del menú
   lateral, para que nadie la confunda con el ingreso del panel), con una
   cuadrícula tenue de planilla, y una sola caja de papel en el centro.
   Solo tokens (salvo el código QR, que siempre va negro sobre blanco para que
   la app lo pueda leer en cualquier tema). Prefijo de clases: .cl-
   ========================================================================== */

.cl-cuerpo {
  background-color: var(--lateral-fondo);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--cara-acento-borde) 22%, transparent), transparent 70%),
    linear-gradient(90deg, var(--lateral-borde) 1px, transparent 1px),
    linear-gradient(180deg, var(--lateral-borde) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  background-position: 0 0, -1px -1px, -1px -1px;
  background-attachment: fixed;
}
/* La cuadrícula, más tenue en pantallas chicas (ahí las líneas quedan más cerca del texto) */
@media (max-width: 767px) {
  .cl-cuerpo {
    background-image:
      radial-gradient(ellipse 90% 40% at 50% 0%, color-mix(in srgb, var(--cara-acento-borde) 22%, transparent), transparent 70%),
      linear-gradient(90deg, color-mix(in srgb, var(--lateral-borde) 55%, transparent) 1px, transparent 1px),
      linear-gradient(180deg, color-mix(in srgb, var(--lateral-borde) 55%, transparent) 1px, transparent 1px);
  }
}

.cl { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* Barra superior: solo el cambio de tema */
.cl-barra { display: flex; justify-content: flex-end; padding: var(--e-4) var(--e-5) 0; }
.cl-barra .btn-barra { color: var(--lateral-texto-2); }
.cl-barra .btn-barra:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
.cl-barra .btn-barra:focus-visible { outline-color: var(--lateral-marca); }

/* Caja */
.cl .acceso { flex: 1; min-height: 0; padding: var(--e-4) var(--e-4) var(--e-8); }
.cl .acceso:focus { outline: none; }
.cl-caja.tarjeta--relleno {
  width: min(452px, 100%); padding: var(--e-8); border-radius: var(--radio-4);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.18);
  display: grid; gap: var(--e-5);
}

.cl-cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-3); }
.cl-cabecera .logo-completo .lateral__nombre { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: -0.01em; }
.cl-cabecera .logo-completo .logo-marca { width: 32px; height: 32px; }

/* Aviso fijo de acceso restringido */
.cl-registro {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 10px var(--e-3); border-radius: var(--radio-2);
  background: var(--cara-acento-fondo); border: 1px solid var(--cara-acento-borde); color: var(--cara-acento);
  font-size: var(--t-13); font-weight: 500; line-height: 1.45;
}
.cl-registro .ico { flex: none; margin-top: 1px; }

/* Pasos */
.cl-paso { display: grid; gap: var(--e-4); }
.cl-paso[hidden] { display: none; }
.cl-titulo { font-family: var(--fuente-titulo); font-size: var(--t-28); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.cl-titulo:focus { outline: none; }
.cl-sub { color: var(--texto-2); font-size: var(--t-15); margin-top: calc(var(--e-2) * -1); }
.cl-sub strong { color: var(--texto); }
.cl-paso > .form { margin-top: var(--e-1); }

/* Progreso de 2 pasos (correo y contraseña → código) */
.cl-progreso { display: flex; align-items: center; gap: 6px; }
.cl-progreso__barra { width: 28px; height: 4px; border-radius: var(--radio-total); background: var(--pista); }
.cl-progreso__barra--hecha { background: color-mix(in srgb, var(--primario) 40%, var(--pista)); }
.cl-progreso__barra--activa { width: 44px; background: var(--primario); }
.cl-progreso__texto { margin-left: var(--e-2); font-size: var(--t-12); font-weight: 600; color: var(--texto-3); letter-spacing: 0.02em; }

.cl-etiqueta-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.cl-etiqueta-fila .btn--enlace { font-weight: 600; text-decoration: none; }
.cl-etiqueta-fila .btn--enlace:hover { text-decoration: underline; }

/* Ojo de la contraseña: cambia de ícono según aria-pressed (lo pone app.js) */
.cl-ojo .cl-ojo__ocultar { display: none; }
.cl-ojo[aria-pressed="true"] .cl-ojo__ver { display: none; }
.cl-ojo[aria-pressed="true"] .cl-ojo__ocultar { display: block; }
.cl-mayus { color: var(--alerta); font-weight: 500; }

/* Persona que está ingresando */
.cl-usuario { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie-2); min-width: 0; }
.cl-usuario .persona__texto { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.cl-usuario .persona__nombre { font-weight: 600; font-size: var(--t-14); }
.cl-usuario .persona__meta { font-size: var(--t-13); color: var(--texto-3); white-space: normal; overflow-wrap: anywhere; }

/* Código: casillas que ocupan el ancho de la caja */
.cl-campo-otp { grid-template-columns: minmax(0, 1fr); }
.cl-otp { justify-content: space-between; gap: var(--e-2); min-width: 0; }
.cl-otp input { flex: 1 1 0; min-width: 0; width: 0; max-width: 56px; }

/* Reloj del código (ciclo de 30 s) */
.cl-reloj { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--texto-3); font-weight: 500; }
.cl-reloj__aro { width: 16px; height: 16px; transform: rotate(-90deg); }
.cl-reloj__aro circle { fill: none; stroke-width: 2.5; }
.cl-reloj__pista { stroke: var(--pista); }
.cl-reloj__resto { stroke: var(--primario); stroke-linecap: round; stroke-dasharray: var(--resto) 30; transition: stroke-dasharray 1s linear; }
.cl-reloj--poco { color: var(--alerta); }
.cl-reloj--poco .cl-reloj__resto { stroke: var(--tope-alerta); }

/* Alternativas al código */
.cl-alternativas { display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--borde); margin-top: var(--e-1); }
.cl-alternativas__titulo { font-size: var(--t-13); font-weight: 600; color: var(--texto-3); }
.cl-alternativa {
  display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 56px; text-align: left;
  padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie);
  color: var(--texto); font: inherit; cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1);
}
.cl-alternativa:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.cl-alternativa__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radio-2); background: var(--primario-suave); color: var(--primario-texto); }
.cl-alternativa__ico--neutro { background: var(--superficie-3); color: var(--texto-2); }
.cl-alternativa__texto { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.cl-alternativa__texto strong { font-size: var(--t-14); color: var(--texto); }
.cl-alternativa__texto small { font-size: var(--t-12); color: var(--texto-3); }
.cl-alternativa__chev { color: var(--texto-3); flex: none; }

.cl-respaldo { font-size: var(--t-20); letter-spacing: 0.12em; text-transform: uppercase; min-height: 52px; text-align: center; }
.cl-respaldo::placeholder { letter-spacing: 0.12em; }
.cl-volver { justify-self: start; margin-left: calc(var(--e-3) * -1); }
.cl-nota-chica { font-size: var(--t-13); color: var(--texto-3); }
.cl-nota-chica strong { color: var(--texto-2); }

/* Ícono grande (bloqueo, recuperar) */
.cl-icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--superficie-3); color: var(--texto-2); }
.cl-icono--peligro { background: var(--peligro-fondo); color: var(--peligro); }
.cl-icono--marca { background: var(--cara-acento-fondo); color: var(--cara-acento); }

/* Bloqueo: hora de vuelta */
.cl-espera { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie-2); }
.cl-espera__reloj { font-family: var(--fuente-mono); font-size: var(--t-28); font-weight: 500; letter-spacing: -0.02em; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1; }
.cl-espera__texto { display: grid; gap: 2px; font-size: var(--t-13); color: var(--texto-2); line-height: 1.4; }
.cl-espera__texto strong { color: var(--texto); font-size: var(--t-14); }

/* Lista numerada de pasos (recuperar) */
.cl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.cl-lista li { display: flex; gap: var(--e-3); font-size: var(--t-14); color: var(--texto-2); line-height: 1.45; }
.cl-lista strong { color: var(--texto); }
.cl-lista__num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--superficie-3); color: var(--texto); font-size: var(--t-12); font-weight: 700; margin-top: 1px; }

/* ---------- Configurar la verificación (3 pasos) ---------- */
/* Indicador propio: el .pasos de estilos.css lo maneja app.js con el contenedor de afuera. */
.cl-pasos { display: flex; gap: var(--e-2); list-style: none; margin: 0; padding: 0; counter-reset: clpaso; }
.cl-pasos li { flex: 1 1 auto; display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-13); color: var(--texto-3); font-weight: 500; counter-increment: clpaso; min-width: 0; }
.cl-pasos li::before {
  content: counter(clpaso); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--borde-fuerte); font-size: var(--t-12); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--superficie);
}
.cl-pasos li::after { content: ""; flex: 1; height: 1.5px; background: var(--borde); min-width: 8px; }
.cl-pasos li:last-child::after { display: none; }
.cl-pasos li[aria-current="step"] { color: var(--texto); font-weight: 600; }
.cl-pasos li[aria-current="step"]::before { border-color: var(--primario); background: var(--primario); color: var(--en-primario); }
.cl-pasos li.hecho::before { content: "✓"; border-color: var(--primario); color: var(--primario-texto); background: var(--primario-suave); }
.cl-pasos li.hecho::after { background: var(--primario); }
.cl-pasos__texto { white-space: nowrap; }

.cl-subpaso { display: grid; gap: var(--e-4); }
.cl-subpaso[hidden] { display: none; }
.cl-subpaso__titulo { font-size: var(--t-16); font-weight: 600; color: var(--texto); }
.cl-subpaso__titulo:focus { outline: none; }
.cl-subpaso__texto { font-size: var(--t-14); color: var(--texto-2); margin-top: calc(var(--e-3) * -1); }

/* QR: el .qr del sistema (estilos.css); acá solo la fila con sus datos */
.cl-qr-fila { display: flex; align-items: center; gap: var(--e-5); }
.cl-qr-datos { display: grid; gap: var(--e-2); min-width: 0; font-size: var(--t-13); color: var(--texto-2); }
.cl-qr-datos strong { color: var(--texto); font-size: var(--t-14); }
.cl-clave { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.cl-clave code {
  font-family: var(--fuente-mono); font-size: var(--t-14); font-weight: 500; letter-spacing: 0.06em; color: var(--texto);
  padding: 6px 10px; border-radius: var(--radio-1); background: var(--superficie-3); white-space: nowrap;
}

.cl-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.cl-acciones .btn { flex: 1 1 auto; }

/* Códigos de respaldo */

/* ---------- Pie (sobre el azul pizarra) ---------- */
.cl-pie {
  display: grid; justify-items: center; gap: var(--e-3);
  padding: 0 var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom)); text-align: center;
}
.cl-pie__panel { font-size: var(--t-14); color: var(--lateral-texto-2); }
.cl-pie__panel a { color: var(--lateral-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--lateral-marca) 70%, transparent); }
.cl-pie__panel a:hover { color: var(--lateral-marca); }
.cl-pie a:focus-visible { outline-color: var(--lateral-marca); }
.cl-pie__legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--e-1) var(--e-4); font-size: var(--t-12); color: var(--lateral-texto-2); }
.cl-pie__seguro { display: inline-flex; align-items: center; gap: 6px; }

/* Salto al formulario: sobre el azul se ve igual que en el resto */
.cl-cuerpo .saltar:focus { outline-color: var(--lateral-marca); }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .cl-barra { padding: var(--e-2) var(--e-2) 0; }
  .cl .acceso { padding: var(--e-1) var(--e-4) var(--e-6); }
  .cl-caja.tarjeta--relleno { padding: var(--e-6) var(--e-5); gap: var(--e-4); }
  .cl-titulo { font-size: var(--t-24); }
  .cl-sub { font-size: var(--t-14); }
  .cl-otp { gap: 6px; }
  .cl-otp input { height: 54px; }
  .cl-qr-fila { flex-direction: column; align-items: stretch; }
  .cl-qr-fila .qr { align-self: center; }
  .cl-pasos__texto { display: none; }
  .cl-pasos li[aria-current="step"] .cl-pasos__texto { display: inline; }
}
@media (max-width: 360px) {
  .cl-caja.tarjeta--relleno { padding: var(--e-5) var(--e-4); }
  .cl-otp .otp__separador { display: none; }
}

/* Áreas táctiles de 44 px en enlaces de texto: en pantallas táctiles y en celular */
@media (pointer: coarse), (max-width: 767px) {
  .cl-etiqueta-fila .btn--enlace { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--e-1); margin-right: calc(var(--e-1) * -1); }
  .cl-pie__panel a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-1); }
  .cl-alternativa { min-height: 60px; }
  .cl-barra .btn-barra { width: 44px; height: 44px; }
  .cl-ojo.btn--icono.btn--chico { width: 44px; min-height: 44px; height: 44px; right: 0; }
  .cl-volver { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-reloj__resto { transition: none; }
}