/* ============================================================
   PreventAI · Ciberseguridad ANIDA — pantalla de acceso
   ------------------------------------------------------------
   Arquitectura (base de login ANIDA): MARCA FIJA, UI ADAPTATIVA.
     · Panel de marca  → navy + logo blanco SIEMPRE (manual ANIDA 2026 §3).
                          Es identidad, no preferencia: no sigue el tema.
     · Panel de acceso → tokens del portal (--bg, --text, --accent…).
                          Nunca la paleta ANIDA a mano: rompería el tema.

   Todas las clases van prefijadas `lg-` (regla 6 del portal): login.html
   también carga styles.css, y nombres como .card/.field/.row/.logo
   colisionarían con el resto del portal.

   TIPOGRAFÍA (regla 2: Inter es mandatoria en todo el portal).
   Los controles de formulario NO heredan la fuente del body: la hoja de
   estilos del navegador les impone la suya. styles.css resuelve esto con
   `input,select,textarea{font-family:inherit}` — que deja FUERA a <button> —,
   por eso cada botón del portal (.btn, .btn-logout, .usr2-newbtn…) repite
   `font-family:inherit` a mano. Aquí se normaliza de una vez en §Tipografía.
   Única excepción: el código MFA en monoespaciada, porque alinea los 6 dígitos.
   ============================================================ */

:root {
  /* Paleta ANIDA 2026 — SOLO para el panel de marca (§2 del manual) */
  --lg-navy: #001B32;
  --lg-azul-medio: #004067;
  --lg-cian: #04B2E8;
  --lg-rojo: #C8102E;
  --lg-blanco: #FFFFFF;
  /* Paleta "Grafito" del panel de marca — cambia SOLO el fondo del brandside.
     El cian (--lg-cian) y el rojo (--lg-rojo) siguen siendo los acentos. */
  --lg-grafito-1: #111418;
  --lg-grafito-2: #20262D;
  --lg-grafito-3: #333C45;
  --lg-halo-b: #7C8794; /* el azul secundario del halo pasa a gris en Grafito */
  --lg-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* `100dvh` descuenta la barra del navegador móvil, pero no existe en Safari <15.4
   ni Firefox <101: sin el 100vh previo esos navegadores se quedan sin alto. */
.lg-stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 880px) { .lg-stage { grid-template-columns: 1fr; } }

/* ══════════════ §Tipografía — unificación Inter ══════════════
   Debe ir ANTES de la monoespaciada del código MFA para que esa la pise. */
.lg-stage button,
.lg-stage input,
.lg-stage select,
.lg-stage textarea {
  font-family: inherit;
}

/* ══════════════ Panel de marca — navy con logo blanco ══════════════ */
.lg-brandside {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4.6vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  /* Paleta "Grafito" (elegida por Isra, jul 2026): neutro premium. Al quitar el azul
     del fondo, el cian de los iconos y el punto rojo pasan a ser lo único con color. */
  background: linear-gradient(158deg, var(--lg-grafito-1) 0%, var(--lg-grafito-2) 46%, var(--lg-grafito-3) 100%);
  color: var(--lg-blanco);
}
/* Brillo cian sutil arriba a la derecha */
.lg-brandside::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(115% 85% at 86% 6%, rgba(4, 178, 232, .16), transparent 58%);
}
@media (max-width: 880px) { .lg-brandside { min-height: 34vh; padding: 28px 24px; gap: 26px; } }

/* Logo real, versión blanca, punto rojo intacto (§3: nunca redibujarlo).
   `align-self` + `flex:none` son obligatorios: el panel es flex-column y su
   align-items:stretch por defecto DEFORMA la imagen a lo ancho — width:auto
   no salva, flexbox lo pisa. */
.lg-logo {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  flex: none;
  height: clamp(34px, 3.4vw, 46px);
  width: auto;
  display: block;
}
@media (max-width: 880px) { .lg-logo { height: 32px; } }

/* Constelación de preventa — decoración de fondo, detrás del texto.
   El tope de `right` no es cosmético: -14% crece con el ancho del panel, y en
   pantallas anchas el sangrado se come el icono de Propuestas y el punto rojo. */
.lg-halo {
  position: absolute;
  right: max(-14%, -60px);
  top: 50%;
  transform: translateY(-50%);
  width: min(64%, 440px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 880px) { .lg-halo { display: none; } }

/* Grafito: el azul secundario del halo (#0072CE en el SVG — anillo interior,
   Partners y Costeo) pasa a gris. El cian y el punto rojo se dejan intactos.
   CSS gana al atributo de presentación del SVG en todos los navegadores. */
.lg-halo [stroke="#0072CE"] { stroke: var(--lg-halo-b); }

/* Barrido de radar sobre el anillo exterior: la única animación de la pantalla.
   En reposo queda apoyado justo en la señal roja (composición fija, no aleatoria). */
.lg-halo-sweep {
  transform-box: view-box;
  transform-origin: 100px 100px;
  transform: rotate(35deg);
}
/* Solo anima donde el origen se resuelve contra el viewBox; sin esto, un
   navegador sin `transform-box` giraría en torno al bounding box y bailaría. */
@supports (transform-box: view-box) {
  .lg-halo-sweep { animation: lgHaloSweep 14s linear infinite; }
}
@keyframes lgHaloSweep {
  from { transform: rotate(35deg); }
  to   { transform: rotate(395deg); }
}

.lg-pitch { position: relative; z-index: 2; }
.lg-pitch .lg-eb {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--lg-cian);
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
}
.lg-pitch .lg-eb::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--lg-rojo);
  border-radius: 2px;
  flex: none;
}
.lg-pitch h2 {
  font-size: clamp(23px, 3.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -.015em;
  font-weight: 700;
  margin: 0 0 14px;
  max-width: 15ch;
  text-wrap: balance;
}
.lg-pitch .lg-sub {
  margin: 0;
  max-width: 38ch;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .72);
}

.lg-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
}
.lg-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.lg-tags span {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 5px;
  padding: 4px 8px;
  white-space: nowrap;
}

/* ══════════════ Panel de acceso — sigue el tema del portal ══════════════ */
/* OJO: styles.css aplica `main{flex:1;overflow-y:auto;min-width:0;padding:24px 28px;width:0}`
   (regla 1 del portal: el ancho lo manda el sidebar, no el módulo). Este panel también
   es un <main>, así que hereda ese `width:0` y COLAPSA. Aquí el ancho lo manda el grid
   de .lg-stage, no un sidebar: neutralizamos la regla solo para esta pantalla. */
.lg-formside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4.6vw, 62px);
  background: var(--bg);
  width: auto;         /* mata el width:0 de main */
  overflow-y: visible; /* que scrollee la página, no el panel */
  flex: none;
}
/* Retícula técnica, desvanecida hacia los bordes */
.lg-formside::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image: linear-gradient(var(--border-3) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border-3) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(90% 70% at 72% 28%, #000 12%, transparent 72%);
          mask-image: radial-gradient(90% 70% at 72% 28%, #000 12%, transparent 72%);
}
/* Sin mask no hay desvanecido y la retícula llegaría dura hasta el borde:
   preferimos no pintarla antes que pintarla mal. */
@supports not ((-webkit-mask-image: radial-gradient(#000, transparent)) or (mask-image: radial-gradient(#000, transparent))) {
  .lg-formside::before { display: none; }
}
.lg-card {
  position: relative;
  z-index: 2;
  width: min(100%, 394px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Tablet en horizontal: el split sigue, pero con menos aire para que la
   tarjeta no se estrangule contra los 394px. */
@media (min-width: 881px) and (max-width: 1100px) {
  .lg-brandside, .lg-formside { padding: clamp(24px, 3.2vw, 38px); }
}

/* ── Indicador de paso — honesto: el MFA es obligatorio para todos ── */
.lg-steps {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.lg-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  flex: 1;
}
.lg-steps li span {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--border);
  color: var(--text-3);
  flex: none;
  transition: .2s;
}
.lg-steps li.on { color: var(--text); }
.lg-steps li.on span { background: var(--accent); color: #fff; }
.lg-steps li.done span { background: var(--text-2); color: #fff; }

/* ── Aviso global ── */
/* Se tiñe desde --critical en vez de fijar un rojo: así sigue el tema claro/oscuro
   del portal. El fallback importa — sin color-mix quedaría un aviso sin fondo. */
.lg-alert {
  margin: 0;
  padding: 11px 14px;
  border-radius: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--critical);
  color: var(--text);
  font-size: 13px;
}
@supports (background: color-mix(in srgb, red 8%, white)) {
  .lg-alert {
    background: color-mix(in srgb, var(--critical) 8%, var(--bg-card));
    border-color: color-mix(in srgb, var(--critical) 26%, transparent);
    border-left-color: var(--critical);
  }
}
/* Tono informativo: "¿olvidaste tu contraseña?" no es un fallo, no debe gritar en rojo. */
.lg-alert.lg-alert--info { border-left-color: var(--accent); }
@supports (background: color-mix(in srgb, red 8%, white)) {
  .lg-alert.lg-alert--info {
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
    border-left-color: var(--accent);
  }
}

.lg-pane { display: flex; flex-direction: column; gap: 20px; }
.lg-pane[hidden] { display: none; }

.lg-head h1 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.lg-head p { margin: 0; color: var(--text-2); font-size: 13.5px; }

.lg-pane form { display: flex; flex-direction: column; gap: 16px; }

.lg-field { display: flex; flex-direction: column; gap: 7px; }
/* styles.css trae `label{display:flex;flex-direction:column;gap:5px}` para los formularios
   del portal; aquí la etiqueta es una sola línea de texto. */
.lg-field label {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lg-inp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-3);
  transition: border-color .18s, box-shadow .18s;
}
/* El anillo DEBE ser translúcido: se pinta fuera del campo, sobre --bg. Un token
   opaco de relleno (--accent-light #eef3fb sobre --bg #f5f6fa) da 1.03:1 y
   desaparece — el foco quedaría señalado solo por el cambio de borde. */
.lg-inp:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 124, 196, .28);
}
@supports (background: color-mix(in srgb, red 8%, white)) {
  .lg-inp:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
}
.lg-inp .lg-lead { color: var(--text-3); display: flex; flex: 0 0 auto; }
/* El campo real va desnudo DENTRO de .lg-inp: el borde, el fondo y el anillo de foco los
   pinta el contenedor. Hay que desarmar el input con caja propia de styles.css
   (`input{border;border-radius;padding;background}` + su `input:focus{box-shadow}`),
   o se ve un recuadro dentro del recuadro y doble anillo al enfocar. */
.lg-inp input,
.lg-inp input:focus {
  all: unset;
  flex: 1;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--text);
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
          appearance: none;
}
.lg-inp input::placeholder { color: var(--text-3); opacity: 1; }
/* Chrome/Edge/Brave/Opera pintan el autorrelleno con un background !important que
   `all:unset` no gana: sin esto aparece una banda azul dentro de la píldora blanca.
   El box-shadow inset se pinta encima y es el único recurso que el UA respeta. */
.lg-inp input:-webkit-autofill,
.lg-inp input:-webkit-autofill:hover,
.lg-inp input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 60px var(--bg-card) inset;
          box-shadow: 0 0 0 60px var(--bg-card) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}
/* Excepción tipográfica única: los 6 dígitos necesitan alinearse */
.lg-inp.lg-code input {
  font-family: var(--lg-mono);
  font-size: 22px;
  letter-spacing: .42em;
  text-indent: .42em; /* compensa el espaciado final: deja los dígitos ópticamente centrados */
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lg-inp .lg-ghost {
  all: unset;
  cursor: pointer;
  color: var(--text-3);
  display: flex;
  padding: 4px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.lg-inp .lg-ghost:hover { color: var(--text); }
.lg-inp .lg-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.lg-err { color: var(--critical); font-size: 11.5px; display: none; }
.lg-field.bad .lg-err { display: block; }
.lg-field.bad .lg-inp { border-color: var(--critical); box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
@supports (background: color-mix(in srgb, red 8%, white)) {
  .lg-field.bad .lg-inp { box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 16%, transparent); }
}

.lg-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 12.5px; }
.lg-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .15s;
}
.lg-link:hover { color: var(--accent-h); border-bottom-color: currentColor; }
.lg-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.lg-submit {
  min-height: 50px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  /* `button` NO hereda la fuente del UA: sin esto el CTA sale en la fuente del
     sistema y rompe la regla 2 (Inter) contra el resto de la pantalla. */
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 12px 28px -12px var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  -webkit-appearance: none;
          appearance: none;
  transition: transform .16s, box-shadow .16s, background .16s;
}
.lg-submit:hover { transform: translateY(-1px); background: var(--accent-h); }
.lg-submit:active { transform: translateY(0); }
.lg-submit:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.lg-submit[disabled] { opacity: .62; cursor: default; transform: none; box-shadow: none; }
.lg-submit[disabled] .lg-arrow { display: none; }
.lg-submit .lg-arrow { flex: none; }

.lg-back {
  all: unset;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-3);
  padding: 6px;
  border-radius: 6px;
}
.lg-back:hover { color: var(--text); }
.lg-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Enrolamiento MFA ── */
.lg-qrbox { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* El QR se queda en blanco puro también en tema oscuro: es un código óptico,
   invertirlo lo vuelve ilegible para varios lectores. */
.lg-qrbox img {
  width: 200px;
  height: 200px;
  max-width: 100%;
  border: 1px solid var(--border-3);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}
.lg-manual { width: 100%; font-size: 12.5px; color: var(--text-2); }
.lg-manual summary { cursor: pointer; color: var(--accent); }
.lg-manual summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.lg-manual p { margin: 10px 0 6px; }
.lg-manual code {
  display: block;
  font-family: var(--lg-mono);
  font-size: 12px;
  word-break: break-all;
  background: var(--bg-input);
  border: 1px solid var(--border-3);
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
}

.lg-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}
.lg-note svg { color: var(--accent); flex: 0 0 auto; }

.lg-helper { margin: 0; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* iOS Safari hace zoom automático al enfocar un campo de menos de 16px y deja la
   página descuadrada. Solo afecta a punteros gruesos; el código MFA ya va a 22px. */
@media (pointer: coarse) {
  .lg-inp input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-stage *, .lg-stage *::before, .lg-stage *::after {
    transition: none !important;
    animation: none !important;
  }
}