/* login.css — Pantalla de acceso de Centinela FAN.
   Los tokens y la tipografía vienen de style.css; aquí solo vive el layout de
   esta pantalla. --deep es propio del panel de marca del login. */

/* El degradado del panel de marca. Sale de `--ocean-0/1` de style.css, que con
   la paleta Cobre pasan a un pardo profundo: el panel es lo primero que se ve
   de la marca y en pizarra azulada contradecía el cobre del resto. Se conserva
   la misma construcción —degradado a 165°, foto de fiordo y campo de flujo
   encima—, solo cambia la temperatura. */

.login-body { height: auto; min-height: 100%; background: var(--bg); }

/* `dvh` con reserva en `vh`: en iOS, 100vh es el viewport GRANDE (sin barra de
   direcciones), así que la pantalla de acceso arrastraba siempre ~70 px de
   scroll fantasma. Los navegadores sin dvh se quedan con la primera.
   Dos columnas que se apilan solas: flex-wrap con bases distintas, sin media
   queries — bajo ~900 px ya no caben lado a lado y el navegador las apila. */
.lgn-split { display: flex; flex-wrap: wrap; min-height: 100vh; min-height: 100dvh; }

/* ---------- Panel de marca ----------
   Fondo oscuro en ambos temas, así que su acento es el cobre CLARO —el mismo
   que usa el modo oscuro de la interfaz— y no el de la paleta activa: el cobre
   pleno sobre este fondo pierde legibilidad. */
/* Acento del panel de marca: su fondo es oscuro en AMBOS temas, así que el
   tono es el mismo en los dos y no sigue al de la interfaz. */
:root, body.dark { --lgn-marca-ac: #8FD9D0; }
.lgn-marca {
  position: relative; flex: 1 1 460px; min-height: 340px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  padding: clamp(20px, 3vw, 44px);
  /* Degradado océano de la marca: el mismo del hero de los reportes. */
  background: linear-gradient(165deg, var(--ocean-0), var(--ocean-1));
}
/* Tres capas: foto de fiordo al fondo, velo que la hunde en el degradado, y el
   campo de flujo encima. La foto es satelital real del archipiélago de los
   Chonos, no una captura del propio visor. */
.lgn-foto {
  position: absolute; inset: 0;
  /* Mar abierto de Giga Khurtsilava (Unsplash 5kwVYW8ZIHo, licencia Unsplash).
     Sustituye a fiordo.jpg: aquella era una vista aérea de canales, bonita pero
     ilegible a este tamaño y con el velo encima. Esta es agua a ras, oscura y
     con nubes bajas —la Patagonia como se ve desde un centro, no desde un
     satélite—, y aguanta el recorte vertical de la columna.
     184 KB contra 684 KB: se pidió a Unsplash ya redimensionada a 1200 px en
     vez de traer el original y dejar que el navegador la encoja. */
  background: url('/static/img/mar-unsplash.jpg') center / cover no-repeat;
  /* Desaturada y oscurecida: la foto está para dar textura y profundidad, no
     para competir con el claim. El color lo pone el velo. */
  opacity: .34; filter: saturate(.55) brightness(.6);
}
.lgn-velo {
  position: absolute; inset: 0;
  /* Los tres tramos salen de --ocean-0/1, así que el velo sigue a la paleta.
     Antes eran rgba() literales del azul océano, y al cambiar el degradado a
     cobre el velo lo tapaba y el panel seguía viéndose azul. */
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ocean-0) 86%, transparent),
    color-mix(in srgb, var(--ocean-1) 60%, transparent) 55%,
    color-mix(in srgb, var(--ocean-1) 90%, transparent));
}
#lgn-flow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lgn-marca > *:not(#lgn-flow):not(.lgn-foto):not(.lgn-velo) { position: relative; z-index: 1; }

.lgn-marca-top { display: flex; align-items: center; gap: 12px; }
.lgn-logo-sm { width: 34px; height: 34px; color: var(--lgn-marca-ac); flex: 0 0 auto; }
.lgn-marca-txt { display: flex; flex-direction: column; gap: 3px; }
.lgn-marca-txt b { font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #EAF1EF; }
.lgn-marca-txt span { font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--lgn-marca-ac); }

.lgn-claim h1 {
  font-family: var(--display); font-size: clamp(30px, 3.6vw, 46px); font-weight: 300; letter-spacing: -.028em;
  line-height: 1.08; color: #F4F8F6; margin: 0 0 14px; max-width: 26ch; text-wrap: balance;
}
.lgn-claim p { font-family: var(--display); font-size: 17px; line-height: 1.5;
  color: #C6D6D4; margin: 0; max-width: 34ch; }

.lgn-rotulo { display: block; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: #7FA8A6; margin-bottom: 10px; }
.lgn-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lgn-pill { padding: 6px 13px; border-radius: 99px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; color: var(--lgn-marca-ac);
  /* `color-mix` en vez de un rgba fijo: el borde sigue al acento de
     la paleta activa sin tener que declararlo dos veces. */
  border: 1px solid color-mix(in srgb, var(--lgn-marca-ac) 40%, transparent); }
.lgn-pill.on { background: var(--lgn-marca-ac); color: #0E2E33; border-color: var(--lgn-marca-ac); }
/* Aclara qué significa el color: sin esta línea, trece pastillas de las que
   seis brillan parecen un adorno y no una distinción entre lo que ya opera y
   lo que está por venir. */
.lgn-nota { display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: .02em;
  color: rgba(233, 227, 214, .45); }

/* ---------- Formulario ---------- */
.lgn-form-col {
  position: relative; flex: 1 1 440px; display: flex; align-items: center;
  justify-content: center; padding: clamp(20px, 3vw, 44px); background: var(--bg);
}
.lgn-tema {
  position: absolute; top: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px);
  width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--line);
  background: transparent; color: var(--nav-muted); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.lgn-tema:hover { background: color-mix(in srgb, var(--onbg) 45%, transparent); color: var(--ink); }
.lgn-tema svg { width: 16px; height: 16px; }

/* El formulario sobre su propia superficie, un paso entre el fondo de la
   columna y el blanco del asistente: --bg #F2EFE7 y --chat-bg #F9F8F3 dejan
   #F6F4ED justo en medio. Lo mismo en oscuro, entre #0b1620 y #12262B.
   Con el fondo a secas los campos flotaban sin nada que los contuviera; el
   escalón basta para leerlo como una pieza y no como texto suelto. */
:root { --lgn-caja-bg: #F6F4ED; }
body.dark { --lgn-caja-bg: #0F1E26; }
.lgn-caja {
  width: 100%; max-width: 376px;
  background: var(--lgn-caja-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 34px 30px 30px;
  /* Sombra apenas perceptible: separa del fondo sin convertir la tarjeta en un
     objeto flotante, que reñiría con la planitud del resto de la interfaz. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
}
.lgn-head { text-align: center; margin-bottom: 26px; }
.lgn-logo { width: 42px; height: 42px; color: var(--teal); margin-bottom: 14px; }
.lgn-head h2 { font-family: var(--display); font-size: 26px; font-weight: 300; letter-spacing: -.024em;
  color: var(--ink); margin: 0 0 4px; }
.lgn-bajada { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nav-muted); }

.lgn-form { display: flex; flex-direction: column; gap: 20px; }
.lgn-campo { display: flex; flex-direction: column; gap: 6px; }
.lgn-campo-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lgn-campo label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nav-muted); }
.lgn-olvide { font-size: 10.5px; text-transform: none; color: var(--teal); text-decoration: none; }
.lgn-olvide:hover { text-decoration: underline; }

/* Campos como líneas de escritura, no como cajas. */
.lgn-campo input[type="email"], .lgn-campo input[type="password"], .lgn-campo input[type="text"] {
  width: 100%; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; font-size: 14px; outline: none;
  transition: border-color .15s;
}
.lgn-campo input:focus { border-bottom-color: var(--teal); }
.lgn-campo.err input { border-bottom-color: var(--crit); }

.lgn-pass-wrap { position: relative; }
.lgn-pass-wrap input { padding-right: 38px; }
.lgn-ver { position: absolute; right: 0; bottom: 4px; width: 30px; height: 30px;
  border: 0; background: transparent; color: var(--nav-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; }
.lgn-ver:hover { color: var(--ink); }
.lgn-ver svg { width: 17px; height: 17px; }

/* El atributo hidden debe ganar a los display de este archivo. */
.login-body [hidden] { display: none !important; }
.lgn-error { display: flex; align-items: center; gap: 9px; margin: 0;
  border: 1px solid var(--crit); border-radius: 11px; padding: 11px 13px;
  color: var(--crit); font-size: 12.5px; animation: cf-fade .2s ease; }
.lgn-error svg { width: 15px; height: 15px; flex: 0 0 auto; }

.lgn-recordar { display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; color: var(--nav-muted); cursor: pointer; }
.lgn-recordar input { width: 15px; height: 15px; accent-color: var(--teal); margin: 0; }

.lgn-btn { width: 100%; padding: 15px; border: 0; border-radius: 99px;
  background: var(--teal); color: var(--bg); font: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 10px; transition: filter .15s; }
.lgn-btn:hover { filter: brightness(1.06); }
.lgn-btn[aria-busy="true"] { cursor: wait; opacity: .7; }
.lgn-btn .sp { width: 15px; height: 15px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: cf-spin .7s linear infinite; }

.lgn-sso { text-align: center; font-size: 12.5px; color: var(--teal); text-decoration: none; }
.lgn-sso:hover { text-decoration: underline; }

.lgn-pie { margin-top: 26px; text-align: center; font-family: var(--font-mono);
  font-size: 9.5px; line-height: 1.6; color: var(--nav-muted); }
.lgn-ok { color: var(--teal); }

:where(.lgn-btn, .lgn-tema, .lgn-ver, .lgn-sso, .lgn-olvide, .lgn-recordar):focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
/* Los campos son líneas, no cajas: el foco engrosa la línea en vez de dibujar
   un recuadro alrededor. El box-shadow evita el salto de layout que provocaría
   cambiar el grosor del borde. */
.lgn-campo input:focus-visible {
  outline: none; border-bottom-color: var(--teal);
  box-shadow: 0 1px 0 0 var(--teal);
}

@keyframes cf-spin { to { transform: rotate(360deg); } }
@keyframes cf-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lgn-error { animation: none; }
  .lgn-btn .sp { animation-duration: 3s; }
}


/* ---------- Táctil ----------
   Cualquier campo por debajo de 16 px hace que Safari iOS amplíe la página al
   enfocarlo, y luego no hay forma evidente de volver. */
@media (pointer: coarse) {
  .lgn-campo input[type="email"],
  .lgn-campo input[type="password"],
  .lgn-campo input[type="text"] { font-size: 16px; }
  .lgn-ver, .lgn-tema { width: 44px; height: 44px; }
  .lgn-ver { bottom: -3px; }
  .lgn-recordar input { width: 20px; height: 20px; }
  .lgn-btn { padding: 17px; }
  .lgn-split { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ---------- Móvil ----------
   Al apilarse, el panel de marca ocupaba más de la mitad del alto y empujaba el
   botón de acceso bajo el pliegue: había que desplazarse para poder entrar, que
   es lo único que se viene a hacer aquí. Se compacta a una cabecera y el
   formulario queda entero a la vista.

   También se retira la cabecera de marca del formulario: con el panel justo
   encima, «Suite Centinela» aparecía dos veces en 400 px. */
@media (max-width: 820px) {
  /* En el teléfono, SOLO el formulario.
     El panel de marca ocupaba la mitad superior con el claim y el campo de
     flujo, y empujaba los campos por debajo del pliegue: había que desplazarse
     para escribir el correo. Quien abre esta pantalla en el móvil viene a
     entrar, no a leer la propuesta de valor —esa ya la vio en el escritorio o
     en el sitio—. */
  .lgn-marca { display: none; }

  .lgn-split { min-height: 100vh; min-height: 100dvh; }

  .lgn-form-col {
    flex: 1 1 100%; width: 100%;
    /* Centrado en los dos ejes: con la marca fuera, la tarjeta es lo único que
       hay y alinearla arriba dejaba un vacío raro debajo. */
    align-items: center; justify-content: center;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* La cabecera VUELVE. Estaba oculta porque el panel de marca ya decía el
     nombre; sin ese panel, la tarjeta se quedaría sin identificar de quién es
     la pantalla en la que estás escribiendo tu contraseña. */
  .lgn-head { display: block; }

  .lgn-caja { max-width: 420px; padding: 30px 24px 26px; }

  /* Anclado a la ventana y no a la columna: dentro de la tarjeta caía sobre la
     etiqueta del primer campo. */
  .lgn-tema { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; }
  .lgn-pie { margin-top: 18px; }
}

/* Pantallas muy estrechas: la tarjeta deja de ser una tarjeta y pasa a ocupar
   el ancho, porque 18 px de margen a cada lado son 36 px menos para escribir. */
@media (max-width: 400px) {
  .lgn-form-col { padding: 18px 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .lgn-caja { padding: 26px 18px 22px; border-radius: 14px; }
}

/* Con el teclado abierto en horizontal no queda alto para nada: la marca
   estorba más de lo que aporta. */
@media (max-height: 480px) and (orientation: landscape) {
  .lgn-marca { display: none; }      /* también en horizontal de escritorio */
  .lgn-form-col { padding: 16px 22px; }
  .lgn-caja { padding: 22px 24px 20px; }
}