/* ==================================================================================================
   Nowa — Pantalla de acceso (login, registro, recuperacion, bloqueo y eleccion de portal)

   Traduccion literal de `Login DINYCON - Nowa.dc.html` (maqueta) a CSS de proyecto. La maqueta
   lleva TODO el estilo inline porque su runtime no admite hojas propias; aqui no hay esa
   limitacion, asi que cada bloque inline se convierte en una clase `lg-*` con los MISMOS valores.

   DE DONDE SALE CADA COLOR
   ------------------------
   · Marca (lima): NUNCA escrita a fuego. Llega desde `appearance.*` en el bloque `<style>` de
     `login.html` como `--primary-rgb`, `--accent-ink`, `--ink-on-accent` y `--dark-accent-ink`.
     Todo lo que en la maqueta era `rgba(196,214,0,...)` aqui es `rgba(var(--primary-rgb),...)`.
   · Superficies por franja horaria (`--lg-canvas`, `--lg-card`, `--lg-soft`, `--lg-field`,
     `--lg-line`, `--lg-line2`, `--lg-border`, `--lg-ink`, `--lg-ink2`, `--lg-title`, `--lg-label`):
     valores LITERALES de la maqueta. Son un sistema de iluminacion --que hora es--, no de marca:
     no dependen de quien configure la plataforma y por eso no se derivan de `appearance`.
   · Semanticos puntuales que la propia maqueta declara como excepcion: `#f34343` (error de campo),
     `#2ecc71` (toast correcto), `#ffbd5a` (toast de aviso), `#151821` (fondo del toast).
   · Marca de terceros: los cuatro colores de Google, dentro de su SVG.

   Radios y tipografia salen de los tokens que ya existen (`tokens/spacing.css`,
   `tokens/fonts.css`): `--radius`, `--radius-btn`, `--radius-sm`, `--radius-badge`,
   `--default-font-family`. NO se redefinen aqui.
   ================================================================================================== */

/* --------------------------------------------------------------------------------------------
   1. Variables de piel. `:root` trae la piel CLARA (la de `LIGHT` en la maqueta), asi que el
   primer pintado ya es correcto aunque el JavaScript no llegue nunca.
   -------------------------------------------------------------------------------------------- */
:root {
  --font-display: "Outfit", var(--default-font-family);

  --lg-canvas: #ffffff;
  --lg-card: #ffffff;
  --lg-soft: #f4f5f7;
  --lg-field: #ffffff;
  --lg-line: #e6e7ee;
  --lg-line2: #cfd0dc;
  --lg-border: #ededf5;
  --lg-ink: #3f3f52;
  --lg-ink2: #83839a;
  --lg-title: #151821;
  --lg-label: #4a4a69;

  /* Marca: derivados de `appearance`, nunca del hexadecimal de la maqueta. */
  --lg-link: var(--accent-ink);
  --lg-linkh: color-mix(in srgb, var(--accent-ink) 80%, #000);

  --lg-err: #c0392b;
  --lg-ok: #22a05b;
  --lg-teal: #12857f;
  --lg-warn: #b58100;

  --lg-tint5: rgba(var(--primary-rgb), 0.06);
  --lg-tint10: rgba(var(--primary-rgb), 0.12);
  --lg-float: 0 18px 44px rgba(0, 0, 0, 0.16);
  --lg-modal: 0 24px 60px rgba(0, 0, 0, 0.3);

  --lg-sky:
    radial-gradient(115% 90% at 84% 6%, rgba(var(--primary-rgb), 0.34), transparent 60%),
    radial-gradient(80% 65% at 8% 96%, rgba(90, 190, 170, 0.14), transparent 62%),
    linear-gradient(160deg, #152019 0%, #0e1714 55%, #0a110f 100%);
  --lg-halo:
    radial-gradient(closest-side, rgba(var(--primary-rgb), 0.2),
      rgba(var(--primary-rgb), 0.06) 55%, transparent 72%);
  --lg-star: 0;
}

/* --- Amanecer: 00:00-07:59 ------------------------------------------------------------------ */
[data-lg-moment="amanecer"] {
  --lg-canvas: #fff6e4;
  --lg-card: #fffdf8;
  --lg-soft: #f8ecd5;
  --lg-field: #fffdf8;
  --lg-line: #e8dcc2;
  --lg-line2: #d2c39f;
  --lg-border: #e9d9b8;
  --lg-ink: #3d3524;
  --lg-ink2: #8a7d63;
  --lg-title: #1a1509;
  --lg-label: #574d33;
  /* Ambar, no lima: en esta franja el enlace es luz de amanecer, parte de la piel. */
  --lg-link: #8a6a12;
  --lg-linkh: #6d5309;
  --lg-sky:
    radial-gradient(120% 95% at 14% 0%, rgba(255, 186, 74, 0.62), transparent 56%),
    radial-gradient(90% 72% at 96% 104%, rgba(244, 124, 110, 0.3), transparent 62%),
    linear-gradient(160deg, #3a2d14 0%, #221a0e 52%, #120e08 100%);
  --lg-halo:
    radial-gradient(closest-side, rgba(255, 206, 130, 0.4), rgba(255, 189, 90, 0.12) 55%,
      transparent 74%);
  --lg-star: 0;
}

/* --- Dia: 08:00-17:59 ----------------------------------------------------------------------- */
[data-lg-moment="dia"] {
  --lg-canvas: #f7fbef;
  --lg-card: #ffffff;
  --lg-soft: #eef4e0;
  --lg-field: #ffffff;
  --lg-line: #dfe6cf;
  --lg-line2: #c6d0ae;
  --lg-border: #e0e8cd;
  --lg-ink: #39402e;
  --lg-ink2: #7e876e;
  --lg-title: #151b0c;
  --lg-label: #495337;
  --lg-sky:
    radial-gradient(120% 92% at 86% 4%, rgba(var(--primary-rgb), 0.62), transparent 58%),
    radial-gradient(85% 70% at 6% 98%, rgba(90, 200, 178, 0.3), transparent 62%),
    linear-gradient(160deg, #243a26 0%, #14251c 52%, #0c1712 100%);
  --lg-halo:
    radial-gradient(closest-side, rgba(var(--primary-rgb), 0.34),
      rgba(var(--primary-rgb), 0.1) 55%, transparent 74%);
  --lg-star: 0;
}

/* --- Atardecer: 18:00-20:59 ----------------------------------------------------------------- */
[data-lg-moment="atardecer"] {
  --lg-canvas: #fff1e8;
  --lg-card: #fffbf8;
  --lg-soft: #f9e2d3;
  --lg-field: #fffbf8;
  --lg-line: #ecd6c6;
  --lg-line2: #dabca6;
  --lg-border: #eed6c4;
  --lg-ink: #42312a;
  --lg-ink2: #8f7a6e;
  --lg-title: #1f130e;
  --lg-label: #5c453a;
  /* Naranja de puesta de sol: piel, no marca. */
  --lg-link: #a04a12;
  --lg-linkh: #7f390c;
  --lg-sky:
    radial-gradient(125% 98% at 22% 106%, rgba(244, 110, 42, 0.62), transparent 58%),
    radial-gradient(88% 66% at 90% 0%, rgba(158, 74, 168, 0.36), transparent 62%),
    linear-gradient(160deg, #3b1d14 0%, #22110d 52%, #130a08 100%);
  --lg-halo:
    radial-gradient(closest-side, rgba(250, 150, 90, 0.4), rgba(244, 124, 62, 0.12) 55%,
      transparent 74%);
  --lg-star: 0.35;
}

/* --- Noche: 21:00-23:59 --------------------------------------------------------------------- */
[data-lg-moment="noche"] {
  --lg-canvas: #0a0c11;
  --lg-card: #12161d;
  --lg-soft: rgba(255, 255, 255, 0.06);
  --lg-field: rgba(255, 255, 255, 0.04);
  --lg-line: rgba(255, 255, 255, 0.14);
  --lg-line2: rgba(255, 255, 255, 0.26);
  --lg-border: rgba(255, 255, 255, 0.1);
  --lg-ink: #ffffff;
  --lg-ink2: rgba(255, 255, 255, 0.5);
  --lg-title: #ffffff;
  --lg-label: rgba(255, 255, 255, 0.62);
  /* De noche el lima tiene que ACLARARSE para leerse: el mismo derivado que usa el tema oscuro. */
  --lg-link: var(--dark-accent-ink);
  --lg-linkh: color-mix(in srgb, var(--dark-accent-ink) 78%, #fff);
  --lg-err: #ff8a80;
  --lg-ok: #4ade80;
  --lg-teal: #5eead4;
  --lg-warn: #ffbd5a;
  --lg-tint5: rgba(var(--primary-rgb), 0.08);
  --lg-tint10: rgba(var(--primary-rgb), 0.16);
  --lg-float: 0 18px 44px rgba(0, 0, 0, 0.55);
  --lg-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
  --lg-sky:
    radial-gradient(115% 85% at 50% 106%, rgba(72, 108, 204, 0.4), transparent 58%),
    radial-gradient(75% 58% at 84% 2%, rgba(120, 150, 255, 0.2), transparent 60%),
    linear-gradient(160deg, #0b1224 0%, #080b14 52%, #05070c 100%);
  --lg-halo:
    radial-gradient(closest-side, rgba(150, 175, 255, 0.24),
      rgba(var(--primary-rgb), 0.06) 55%, transparent 74%);
  --lg-star: 1;
}

/* --------------------------------------------------------------------------------------------
   2. Reset y base. `overflow:hidden` en `html,body` es la mitad del requisito «una sola pagina»;
   la otra mitad la pone `_fit()` en `nowa-login.js`.
   -------------------------------------------------------------------------------------------- */
/* `border-box` para TODO lo de dentro. Sin esto, un `<a>` con aspecto de boton --el de Google, el
   «volver a intentarlo» del bloqueo-- se pinta MAS ANCHO que el CTA de al lado: `<button>` es
   `border-box` por el estilo del navegador, pero `<a>` es `content-box`, asi que su `width:100%`
   se suma al padding y al borde. Se vio en pantalla: el boton de Google sobresalia 16px. */
.lg-root,
.lg-root *,
.lg-root *::before,
.lg-root *::after { box-sizing: border-box; }

/* `[hidden]` GANA a cualquier `display` de esta hoja. El `display:none` del user-agent tiene
   especificidad 0 y lo pisa cualquier clase: sin esta regla, el aviso de Bloq Mayus y el toast se
   ven SIEMPRE, porque sus clases declaran `display:flex`. Se vio en pantalla, no en un test. */
.lg-root [hidden] { display: none !important; }

html.lg-html,
html.lg-html body {
  margin: 0;
  padding: 0;
  background: #fff;
  height: 100%;
  overflow: hidden;
}

html.lg-html body {
  font-family: var(--default-font-family);
  font-size: 0.813rem;
  color: var(--lg-ink);
}

/* `:not([class])` NO es un adorno. Sin el, `.lg-root a` --que suma clase + tipo, (0,1,1)-- gana a
   cualquier componente escrito con una sola clase, (0,1,0), aunque venga despues en la hoja. El
   resultado es que TODO enlace con aspecto de boton (la pestana Registro, el CTA de bloqueo, las
   tarjetas de portal, el «volver») se pinta de color enlace. Se vio en la piel de noche, donde la
   pestana inactiva salia lima en vez de gris. Aqui solo se pinta el enlace pelado; cada componente
   trae su propio color. */
.lg-root a { text-decoration: none; }

.lg-root a:not([class]) { color: var(--lg-link); }

.lg-root a:not([class]):hover { color: var(--lg-linkh); }

.lg-root input::placeholder,
.lg-root textarea::placeholder {
  color: var(--lg-ink2);
  opacity: 0.7;
}

.lg-root ::selection {
  background: rgba(var(--primary-rgb), 0.34);
}

/* EL ANILLO DE FOCO, DE DOS TONOS. Es el mismo mecanismo que `tokens/colors.css` define para el
   resto del producto —banda clara, acento del inquilino, banda oscura—, y los valores estan
   escritos DOS VECES a proposito: el login NO carga `tokens/colors.css`, porque tiene su propia
   piel (`--lg-*`) y meterle la paleta de Nowa le cambiaria el aspecto entero. Lo que hay arriba en
   `:root` son los tokens de esta pantalla; estos tres son los del anillo, con los mismos valores.

   Un solo tono no vale aqui MENOS que en ningun otro sitio: esta pantalla tiene cinco pieles por
   franja horaria y una de ellas es de noche (`--lg-card: #12161d`). El acento a 0,9 de opacidad
   media 1,62:1 sobre la tarjeta blanca del dia con el lima de fabrica, y un acento oscuro se
   caeria igual sobre la de noche. Con las dos bandas neutras, la mejor de las dos da 17,75:1 sobre
   la tarjeta del dia, 17,46:1 sobre la del amanecer y 18,13:1 sobre la de noche. */
.lg-root {
  --focus-ring-color: rgb(var(--primary-rgb));
  --focus-ring-hi: #fff;
  --focus-ring-lo: #101828;
  --focus-ring-inner: 2px;
  --focus-ring-width: 3px;
  --focus-ring-outer: 2px;
}

.lg-root :focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-inner);
  box-shadow:
    0 0 0 var(--focus-ring-inner) var(--focus-ring-hi),
    0 0 0 calc(var(--focus-ring-inner) + var(--focus-ring-width) + var(--focus-ring-outer))
      var(--focus-ring-lo);
}

.lg-root input,
.lg-root select,
.lg-root button,
.lg-root textarea {
  font-family: inherit;
}

/* Escalera tipografica por ALTURA de ventana. Todo esta en `rem`, asi que la pantalla entera
   encoge en bloque antes de que `_fit()` tenga que escalar nada. */
@media (max-height: 840px) {
  html.lg-html { font-size: 15px; }
}

@media (max-height: 740px) {
  html.lg-html { font-size: 14px; }
}

@media (max-height: 640px) {
  html.lg-html { font-size: 13px; }
}

@media (max-height: 560px) {
  html.lg-html { font-size: 12px; }
}

/* --------------------------------------------------------------------------------------------
   3. Animaciones. `backwards` y NUNCA `both`: con `both` el estado final se congela y mata los
   `:hover` posteriores. Ningun keyframe lleva el `transform` que COLOCA el elemento.
   -------------------------------------------------------------------------------------------- */
@keyframes dc-spin { to { transform: rotate(360deg); } }

@keyframes dc-wipe {
  0% { clip-path: inset(0 100% 0 0); opacity: 0.001; }
  14% { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes dc-drift {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

@keyframes dc-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.5); }
}

@keyframes dc-breathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}

@keyframes dc-shut-t { to { transform: translateY(-100%); } }

@keyframes dc-shut-b { to { transform: translateY(100%); } }

@keyframes dc-seam {
  0% { transform: scaleX(0); opacity: 0; }
  22% { transform: scaleX(1); opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0.9; }
}

@keyframes dc-seam-out {
  0% { opacity: 0.9; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(4); }
}

@keyframes dc-bloom {
  0% { opacity: 0; }
  18% { opacity: 0.5; }
  100% { opacity: 0; }
}

@keyframes dc-flash {
  0% { opacity: 0; }
  12% { opacity: 0.5; }
  34% { opacity: 0.14; }
  100% { opacity: 0; }
}

@keyframes dc-noise {
  0% { opacity: 0.5; transform: translateY(0); }
  45% { opacity: 0.34; transform: translateY(-7px); }
  100% { opacity: 0; transform: translateY(-15px); }
}

@keyframes dc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dc-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dc-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes dc-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes dc-pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes dc-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

@keyframes dc-pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Los modales se centran con `transform` INLINE; la animacion solo mueve `opacity` y la
   propiedad independiente `scale:`, que compone con `transform` en vez de pisarlo. */
@keyframes dc-modal-in {
  from { opacity: 0; scale: 0.985; }
  to { opacity: 1; scale: 1; }
}

@keyframes dc-toast-x {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}

.lg-root[data-reduce-motion="true"] * {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .lg-root * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------------------------
   4. Rejilla: 1.06fr para el formulario / 0.94fr para el panel.
   -------------------------------------------------------------------------------------------- */
.lg-root {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.lg-grid {
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  background: var(--lg-canvas);
  transition: background-color 1.6s ease;
}

.lg-form {
  display: flex;
  flex-direction: column;
  padding: 1.8rem 2.5rem 1.2rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transform-origin: 0 0;
  border-right: 1px solid var(--lg-border);
  transition: border-color 1.6s ease;
}

.lg-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

.lg-card {
  width: 100%;
  max-width: 392px;
}

.lg-view {
  animation: dc-in-right 0.34s cubic-bezier(0.22, 0.8, 0.28, 1) backwards;
}

.lg-view[data-dir="back"] {
  animation-name: dc-in-left;
}

/* --------------------------------------------------------------------------------------------
   5. Avisos de la columna (mantenimiento y sesion caducada)
   -------------------------------------------------------------------------------------------- */
.lg-notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem 0.45rem 0.7rem;
  border-radius: var(--radius-btn);
  animation: dc-rise 0.5s cubic-bezier(0.22, 0.8, 0.28, 1) backwards;
}

.lg-notice-warn {
  background: rgba(255, 189, 90, 0.14);
  border: 1px solid rgba(255, 189, 90, 0.38);
}

.lg-notice-soft {
  margin-top: 0.6rem;
  background: var(--lg-soft);
  border: 1px solid var(--lg-border);
  animation-delay: 0.06s;
}

.lg-notice > i {
  flex: none;
  font-size: 0.9rem;
}

.lg-notice-warn > i { color: var(--lg-warn); }

.lg-notice-soft > i { color: var(--lg-ink2); }

.lg-notice-txt {
  flex: 1;
  min-width: 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--lg-ink);
}

.lg-notice-more {
  flex: none;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--lg-ink);
  background: transparent;
  border: 1px solid rgba(255, 189, 90, 0.5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease;
}

.lg-notice-more:hover { background: rgba(255, 189, 90, 0.16); }

.lg-notice-x {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--lg-ink2);
}

.lg-notice-x:hover {
  background: var(--lg-card);
  color: var(--lg-ink);
}

.lg-notice-x i { font-size: 0.85rem; }

/* --------------------------------------------------------------------------------------------
   6. Cabecera de vista: saludo, titulo con barrita lima, subtitulo
   -------------------------------------------------------------------------------------------- */
.lg-hello {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--lg-link);
  animation: dc-rise 0.5s cubic-bezier(0.22, 0.8, 0.28, 1) backwards;
}

.lg-hello i { font-size: 0.85rem; }

.lg-h1row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  animation: dc-rise 0.5s cubic-bezier(0.22, 0.8, 0.28, 1) 0.05s backwards;
}

.lg-bar {
  flex: none;
  width: 3px;
  height: 27px;
  border-radius: 2px;
  background: rgb(var(--primary-rgb));
}

.lg-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--lg-title);
}

/* Titulo de vista secundaria: mas pequeno y con menos apretado. */
.lg-h1-sm {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lg-title);
}

.lg-sub {
  margin: 0.4rem 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--lg-ink2);
  animation: dc-rise 0.5s cubic-bezier(0.22, 0.8, 0.28, 1) 0.11s backwards;
}

.lg-sub-sm {
  margin: 0.5rem 0 1.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--lg-ink2);
}

.lg-icon-box {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-btn);
  background: var(--lg-tint10);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.lg-icon-box i {
  font-size: 1.05rem;
  color: var(--lg-link);
}

.lg-icon-box-teal { background: rgba(26, 175, 172, 0.12); }

.lg-icon-box-teal i { color: var(--lg-teal); }

.lg-icon-box-ok { background: rgba(46, 204, 113, 0.12); }

.lg-icon-box-ok i { color: var(--lg-ok); }

.lg-icon-box-err { background: rgba(243, 67, 67, 0.12); }

.lg-icon-box-err i { color: #f34343; }

/* --------------------------------------------------------------------------------------------
   7. Segmentado Entrar / Registro
   -------------------------------------------------------------------------------------------- */
.lg-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  background: var(--lg-soft);
  border-radius: var(--radius-btn);
  margin-bottom: 1.5rem;
  animation: dc-rise 0.5s cubic-bezier(0.22, 0.8, 0.28, 1) 0.17s backwards;
}

.lg-tab {
  padding: 0.52rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.14s ease;
  background: transparent;
  color: var(--lg-ink2);
  box-shadow: none;
}

.lg-tab.is-active {
  background: var(--lg-card);
  color: var(--lg-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------------------------
   8. Banda de credenciales incorrectas
   -------------------------------------------------------------------------------------------- */
.lg-bad {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  margin-bottom: 1rem;
  background: rgba(243, 67, 67, 0.08);
  border: 1px solid rgba(243, 67, 67, 0.25);
  border-radius: var(--radius-btn);
  animation: dc-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) backwards;
}

.lg-bad > i {
  font-size: 0.95rem;
  color: #f34343;
  margin-top: 1px;
}

.lg-bad-t {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--lg-err);
}

.lg-bad-d {
  font-size: 0.72rem;
  color: var(--lg-ink2);
  margin-top: 2px;
}

.lg-ok-band {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  margin-bottom: 1rem;
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(46, 204, 113, 0.25);
  border-radius: var(--radius-btn);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--lg-ink);
  animation: dc-rise 0.4s cubic-bezier(0.22, 0.8, 0.28, 1) backwards;
}

.lg-ok-band > i {
  flex: none;
  font-size: 0.95rem;
  color: var(--lg-ok);
}

/* --------------------------------------------------------------------------------------------
   9. Campos
   -------------------------------------------------------------------------------------------- */
.lg-field {
  margin-bottom: 1rem;
}

.lg-field-tight { margin-bottom: 0.9rem; }

.lg-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--lg-label);
  margin-bottom: 0.35rem;
}

.lg-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.72rem 0.85rem;
  font-size: 0.9rem;
  color: var(--lg-ink);
  caret-color: var(--lg-link);
  background: var(--lg-field);
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.lg-input:hover { border-color: var(--lg-line2); }

.lg-input:focus {
  border-color: rgba(var(--primary-rgb), 0.65);
  box-shadow: 0 0 0 3px var(--lg-tint10);
}

/* El campo del formulario de alta es un punto mas pequeno que el de entrada. */
.lg-input-sm {
  padding: 0.68rem 0.85rem;
  font-size: 0.875rem;
}

.lg-input-pw { padding-right: 2.6rem; }

.lg-pw-wrap { position: relative; }

.lg-pw-eye {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--lg-ink2);
}

.lg-pw-eye:hover {
  background: var(--lg-soft);
  color: var(--lg-ink);
}

.lg-pw-eye i { font-size: 0.95rem; }

.lg-err {
  font-size: 0.72rem;
  color: #f34343;
  margin-top: 0.32rem;
}

.lg-caps {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--lg-warn);
  margin-top: 0.32rem;
}

.lg-caps i { font-size: 0.8rem; }

.lg-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  color: var(--lg-ink);
  background: var(--lg-field);
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
  outline: none;
}

.lg-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
  color: var(--lg-ink);
  background: var(--lg-field);
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
  outline: none;
}

.lg-textarea:focus,
.lg-select:focus {
  border-color: rgba(var(--primary-rgb), 0.65);
  box-shadow: 0 0 0 3px var(--lg-tint10);
}

/* --------------------------------------------------------------------------------------------
   10. Medidor de fuerza de contrasena y lista de requisitos
   -------------------------------------------------------------------------------------------- */
.lg-meter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.lg-meter-bars {
  flex: 1;
  display: flex;
  gap: 3px;
}

.lg-meter-bars span {
  flex: 1;
  height: 4px;
  border-radius: 50rem;
  background: var(--lg-line);
  transition: background 0.25s ease;
}

.lg-meter[data-score="1"] .lg-meter-bars span:nth-child(-n + 1) { background: #f34343; }

.lg-meter[data-score="2"] .lg-meter-bars span:nth-child(-n + 2) { background: var(--lg-warn); }

.lg-meter[data-score="3"] .lg-meter-bars span:nth-child(-n + 3) { background: #2ecc71; }

.lg-meter[data-score="4"] .lg-meter-bars span { background: var(--lg-ok); }

.lg-meter-txt {
  flex: none;
  width: 58px;
  font-size: 0.68rem;
  font-weight: 500;
  text-align: right;
  color: var(--lg-ink2);
}

.lg-meter[data-score="1"] .lg-meter-txt { color: #f34343; }

.lg-meter[data-score="2"] .lg-meter-txt { color: var(--lg-warn); }

.lg-meter[data-score="3"] .lg-meter-txt { color: #2ecc71; }

.lg-meter[data-score="4"] .lg-meter-txt { color: var(--lg-ok); }

.lg-rule {
  font-size: 0.68rem;
  color: var(--lg-ink2);
  margin-top: 0.3rem;
}

.lg-reqs {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.7rem;
}

.lg-req {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.73rem;
  color: var(--lg-ink2);
}

.lg-req i {
  font-size: 0.8rem;
  color: var(--lg-ink2);
  transition: color 0.2s ease;
}

.lg-req.is-done i { color: var(--lg-ok); }

/* --------------------------------------------------------------------------------------------
   11. Recordarme + olvidada
   -------------------------------------------------------------------------------------------- */
.lg-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

/* NO hay interruptor de «recordarme»: el servidor no tiene los dos comportamientos entre los que
   elegiría (la cookie es siempre permanente y caduca siempre a los mismos minutos). En su sitio se
   pinta el dato de cuánto dura la sesión, con esta clase. */
.lg-switch-txt {
  font-size: 0.76rem;
  color: var(--lg-ink);
}

.lg-textlink {
  flex: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--lg-link);
  cursor: pointer;
}

.lg-textlink:hover { color: var(--lg-linkh); }

/* --------------------------------------------------------------------------------------------
   12. Botones
   -------------------------------------------------------------------------------------------- */
.lg-cta {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-on-accent);
  background: rgb(var(--primary-rgb));
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.22, 0.8, 0.28, 1),
    box-shadow 0.18s ease;
}

.lg-cta:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(var(--primary-rgb), 0.34);
}

.lg-cta:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
}

.lg-cta[disabled] {
  cursor: progress;
  opacity: 0.9;
}

.lg-cta[disabled]:hover { transform: none; box-shadow: none; }

.lg-btn2 {
  padding: 0.72rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lg-ink);
  background: var(--lg-card);
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: background 0.14s ease;
}

.lg-btn2:hover { background: var(--lg-soft); }

.lg-btn2-full { width: 100%; }

.lg-spin {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--ink-on-accent) 25%, transparent);
  border-top-color: var(--ink-on-accent);
  border-radius: 50%;
  animation: dc-spin 0.7s linear infinite;
}

.lg-spin-neutral {
  border-color: var(--lg-line);
  border-top-color: var(--lg-ink);
}

.lg-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--lg-ink2);
  cursor: pointer;
}

.lg-back:hover { color: var(--lg-ink); }

.lg-back i { font-size: 0.85rem; }

/* --------------------------------------------------------------------------------------------
   13. Divisores y SSO
   -------------------------------------------------------------------------------------------- */
.lg-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.lg-or span:first-child,
.lg-or span:last-child {
  flex: 1;
  height: 1px;
  background: var(--lg-border);
}

.lg-or-txt {
  font-size: 0.7rem;
  color: var(--lg-ink2);
}

.lg-sso {
  width: 100%;
  padding: 0.72rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lg-ink);
  background: var(--lg-card);
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: background 0.14s ease;
}

.lg-sso:hover { background: var(--lg-soft); }

.lg-sso svg { flex: none; display: block; }

/* --------------------------------------------------------------------------------------------
   14. Casilla de condiciones
   -------------------------------------------------------------------------------------------- */
.lg-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0;
  margin-bottom: 1.2rem;
  cursor: pointer;
  text-align: left;
}

.lg-check input { position: absolute; opacity: 0; pointer-events: none; }

.lg-check-box {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, border-color 0.16s ease;
  border: 1px solid var(--lg-line2);
  background: var(--lg-field);
}

.lg-check-box i {
  font-size: 0.7rem;
  color: var(--ink-on-accent);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.lg-check input:checked + .lg-check-box {
  border-color: rgb(var(--primary-rgb));
  background: rgb(var(--primary-rgb));
}

.lg-check input:checked + .lg-check-box i { opacity: 1; }

.lg-check-txt {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--lg-ink);
}

/* --------------------------------------------------------------------------------------------
   15. Bloques de la vista de bloqueo / referencias / cuenta recordada
   -------------------------------------------------------------------------------------------- */
.lg-block {
  padding: 0.85rem;
  background: var(--lg-soft);
  border-radius: var(--radius-btn);
  margin-bottom: 1.5rem;
}

.lg-block-lg {
  padding: 1rem;
  background: var(--lg-soft);
  border-radius: var(--radius-btn);
  margin-bottom: 1.3rem;
}

.lg-block-t {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--lg-ink2);
  margin-bottom: 0.4rem;
}

.lg-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--lg-ink);
}

.lg-lock-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.lg-lock-lbl {
  font-size: 0.72rem;
  color: var(--lg-ink2);
}

.lg-lock-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lg-title);
}

.lg-lock-track {
  height: 4px;
  margin-top: 0.8rem;
  border-radius: 50rem;
  background: var(--lg-line);
  overflow: hidden;
}

.lg-lock-fill {
  height: 100%;
  border-radius: 50rem;
  background: rgb(var(--primary-rgb));
  transition: width 1s linear;
  width: 100%;
}

/* --------------------------------------------------------------------------------------------
   15 bis. Casillas del codigo de verificacion (pantalla apagada: `TWO_FACTOR_ENABLED`)

   Seis casillas PINTADAS y UN SOLO campo real superpuesto. Con seis `input` de verdad hay que
   reescribir a mano el salto entre casillas, el borrado, el pegado y el autorrelleno del SMS; con
   uno solo, todo eso lo hace el navegador y las casillas son decoracion.
   -------------------------------------------------------------------------------------------- */
.lg-code { position: relative; }

.lg-code-boxes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.45rem;
}

.lg-code-box {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lg-title);
  background: var(--lg-field);
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
  transition: border-color 0.18s ease, background 0.18s ease;
}

/* El campo real: invisible encima de las casillas, pero enfocable y con su propio anillo. */
.lg-code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  outline: none;
  cursor: pointer;
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: 2.6em;
  text-indent: 2.6em;
}

.lg-code-input:focus + .lg-code-boxes .lg-code-box,
.lg-code:focus-within .lg-code-box:first-child {
  border-color: rgba(var(--primary-rgb), 0.85);
}

.lg-code-recov {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-align: center;
  color: var(--lg-ink);
  caret-color: var(--lg-link);
  background: var(--lg-field);
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
  outline: none;
}

.lg-code-recov:focus {
  border-color: rgba(var(--primary-rgb), 0.65);
  box-shadow: 0 0 0 3px var(--lg-tint10);
}

/* --------------------------------------------------------------------------------------------
   16. Tarjetas de portal
   -------------------------------------------------------------------------------------------- */
.lg-ports {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lg-port {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--lg-line);
  border-radius: var(--radius);
  background: var(--lg-card);
  color: var(--lg-ink);
  transition: border-color 0.16s ease, transform 0.18s cubic-bezier(0.22, 0.8, 0.28, 1),
    box-shadow 0.18s ease;
  animation: dc-rise 0.42s cubic-bezier(0.22, 0.8, 0.28, 1) backwards;
}

.lg-port:nth-child(1) { animation-delay: 0.06s; }

.lg-port:nth-child(2) { animation-delay: 0.13s; }

.lg-port:nth-child(3) { animation-delay: 0.2s; }

.lg-port:hover {
  border-color: rgba(var(--primary-rgb), 0.55);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  color: var(--lg-ink);
}

.lg-port-ico {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-btn);
  background: var(--lg-tint10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lg-port-ico i {
  font-size: 1rem;
  color: var(--lg-link);
}

.lg-port-txt {
  flex: 1;
  min-width: 0;
}

.lg-port-t {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
}

.lg-port-d {
  display: block;
  font-size: 0.72rem;
  color: var(--lg-ink2);
  margin-top: 1px;
}

.lg-port > i:last-child {
  font-size: 0.95rem;
  color: var(--lg-ink2);
}

.lg-signed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--lg-ok);
  margin-bottom: 0.9rem;
}

.lg-signed i { font-size: 0.9rem; }

.lg-last {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lg-border);
}

.lg-last > i {
  flex: none;
  font-size: 0.9rem;
  color: var(--lg-ink2);
}

.lg-last-txt {
  flex: 1;
  min-width: 140px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--lg-ink2);
}

.lg-chip-btn {
  flex: none;
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--lg-ink);
  background: transparent;
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease;
}

.lg-chip-btn:hover { background: var(--lg-soft); }

/* --------------------------------------------------------------------------------------------
   17. Pie: idioma, soporte, cifrado, legal
   -------------------------------------------------------------------------------------------- */
.lg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--lg-border);
}

.lg-foot-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.lg-foot-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.72rem;
  color: var(--lg-ink2);
  cursor: pointer;
  text-decoration: underline;
}

.lg-foot-link:hover { color: var(--lg-ink); }

.lg-secure {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--lg-ink2);
}

.lg-secure i { font-size: 0.8rem; }

/* --- Selector de idioma: `<details>` para que abra SIN JavaScript --------------------------- */
.lg-lang { position: relative; }

.lg-lang > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--lg-card);
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background 0.14s ease;
  list-style: none;
}

.lg-lang > summary::-webkit-details-marker { display: none; }

.lg-lang > summary:hover { background: var(--lg-soft); }

.lg-flag {
  flex: none;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Banderas en CSS puro: con emoji no se ven en Windows y con imagen serian otra peticion. */
.lg-flag[data-lang="es"] {
  background: linear-gradient(#c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%);
}

.lg-flag[data-lang="en"] {
  background:
    linear-gradient(#fff 0 0) center / 100% 30% no-repeat,
    linear-gradient(#fff 0 0) center / 18% 100% no-repeat,
    linear-gradient(#c8102e 0 0) center / 100% 15% no-repeat,
    linear-gradient(#c8102e 0 0) center / 7% 100% no-repeat,
    linear-gradient(54deg, transparent 47%, #c8102e 47% 53%, transparent 53%),
    linear-gradient(-54deg, transparent 47%, #c8102e 47% 53%, transparent 53%),
    linear-gradient(54deg, transparent 41%, #fff 41% 59%, transparent 59%),
    linear-gradient(-54deg, transparent 41%, #fff 41% 59%, transparent 59%),
    #012169;
}

.lg-flag[data-lang="eu"] {
  background:
    linear-gradient(#fff 0 0) center / 100% 26% no-repeat,
    linear-gradient(#fff 0 0) center / 16% 100% no-repeat,
    linear-gradient(54deg, transparent 43%, #009b48 43% 57%, transparent 57%),
    linear-gradient(-54deg, transparent 43%, #009b48 43% 57%, transparent 57%),
    #d52b1e;
}

.lg-lang-name {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--lg-ink);
}

.lg-lang > summary > i {
  font-size: 0.8rem;
  color: var(--lg-ink2);
}

.lg-lang-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 268px;
  background: var(--lg-card);
  border: 1px solid var(--lg-border);
  border-radius: var(--radius);
  box-shadow: var(--lg-float);
  transform-origin: bottom left;
  animation: dc-fade-up 0.18s cubic-bezier(0.22, 0.8, 0.28, 1) backwards;
}

.lg-lang-search {
  padding: 0.6rem;
  border-bottom: 1px solid var(--lg-border);
}

.lg-lang-search > div { position: relative; }

.lg-lang-search i {
  position: absolute;
  top: 50%;
  left: 0.55rem;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--lg-ink2);
}

.lg-lang-q {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem 0.45rem 1.9rem;
  font-size: 0.78rem;
  color: var(--lg-ink);
  background: var(--lg-field);
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
  outline: none;
}

.lg-lang-q:focus {
  border-color: rgba(var(--primary-rgb), 0.65);
  box-shadow: 0 0 0 3px var(--lg-tint10);
}

.lg-lang-list {
  max-height: 236px;
  overflow-y: auto;
  padding: 0.35rem;
}

.lg-lang-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
  background: transparent;
  animation: dc-rise 0.28s cubic-bezier(0.22, 0.8, 0.28, 1) backwards;
}

.lg-lang-row:nth-child(1) { animation-delay: 0ms; }

.lg-lang-row:nth-child(2) { animation-delay: 24ms; }

.lg-lang-row:nth-child(3) { animation-delay: 48ms; }

.lg-lang-row:hover { background: var(--lg-tint5); }

.lg-lang-row.is-active { background: var(--lg-tint10); }

.lg-lang-row-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--lg-ink);
}

.lg-lang-row .fe-check {
  flex: none;
  font-size: 0.85rem;
  color: var(--lg-link);
}

.lg-lang-empty {
  padding: 0.9rem 0.55rem;
  font-size: 0.78rem;
  color: var(--lg-ink2);
}

/* --------------------------------------------------------------------------------------------
   18. Panel derecho: cielo, grano, estrellas, obturador, halo y logo
   -------------------------------------------------------------------------------------------- */
.lg-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: #0a0c10;
}

.lg-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--lg-sky);
  background-size: 150% 150%;
  animation: dc-drift 30s ease-in-out infinite alternate;
  transition: background 2s ease;
}

/* El data-URI lleva comillas: en un atributo `style` romperia el HTML por la mitad. */
.lg-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-size: 140px 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lg-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--lg-star);
  transition: opacity 2.4s ease;
}

.lg-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #dce8ff;
}

.lg-stars span:nth-child(1) { top: 14%; left: 22%; animation: dc-twinkle 4.2s ease-in-out 0s infinite; }
.lg-stars span:nth-child(2) { top: 28%; left: 68%; animation: dc-twinkle 5.6s ease-in-out 0.6s infinite; }
.lg-stars span:nth-child(3) { top: 41%; left: 12%; animation: dc-twinkle 3.8s ease-in-out 1.2s infinite; }
.lg-stars span:nth-child(4) { top: 57%; left: 84%; animation: dc-twinkle 6.4s ease-in-out 0.3s infinite; }
.lg-stars span:nth-child(5) { top: 66%; left: 34%; animation: dc-twinkle 4.6s ease-in-out 1.8s infinite; }
.lg-stars span:nth-child(6) { top: 19%; left: 52%; animation: dc-twinkle 5.2s ease-in-out 2.4s infinite; }
.lg-stars span:nth-child(7) { top: 78%; left: 58%; animation: dc-twinkle 3.6s ease-in-out 0.9s infinite; }
.lg-stars span:nth-child(8) { top: 35%; left: 91%; animation: dc-twinkle 6s ease-in-out 1.5s infinite; }
.lg-stars span:nth-child(9) { top: 86%; left: 26%; animation: dc-twinkle 4.8s ease-in-out 2.1s infinite; }
.lg-stars span:nth-child(10) { top: 8%; left: 78%; animation: dc-twinkle 5s ease-in-out 2.8s infinite; }

/* Obturador de encendido: 2,75 s en total. Destello, interferencia y asentado NECESITAN
   `opacity:0` de base; sin ella, al acabar la animacion el panel se queda lavado en azul. */
.lg-shutter {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.lg-shut-t,
.lg-shut-b {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #05070a;
}

.lg-shut-t {
  top: 0;
  animation: dc-shut-t 0.95s cubic-bezier(0.5, 0, 0.18, 1) 0.62s forwards;
}

.lg-shut-b {
  bottom: 0;
  animation: dc-shut-b 0.95s cubic-bezier(0.5, 0, 0.18, 1) 0.62s forwards;
}

.lg-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(closest-side at 50% 50%, rgba(222, 234, 255, 0.95),
    rgba(222, 234, 255, 0.3) 55%, rgba(222, 234, 255, 0) 78%);
  animation: dc-flash 1.1s ease-out 0.42s;
}

.lg-noise {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 4px);
  animation: dc-noise 1.5s ease-out 0.5s;
}

.lg-bloom {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(219, 231, 255, 0.16), transparent 55%);
  animation: dc-bloom 1.4s ease-out 1.1s;
}

.lg-seam {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(var(--primary-rgb), 0.95);
  box-shadow: 0 0 22px 4px rgba(var(--primary-rgb), 0.55);
  animation: dc-seam 1.05s ease-out backwards, dc-seam-out 0.55s ease-in 1.05s forwards;
}

.lg-halo {
  position: absolute;
  width: min(92%, 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: var(--lg-halo);
  transition: background 2s ease;
  animation: dc-breathe 9s ease-in-out infinite;
}

/* El logo va como `background-image` y nunca como `<img>`: el `filter` tiene que poder
   blanquearlo sin tocar el marcado, y el `aspect-ratio` reserva su hueco antes de descargarlo. */
.lg-logo {
  position: relative;
  z-index: 2;
  width: min(64%, 340px);
  aspect-ratio: 3345 / 869;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
  animation: dc-wipe 1.2s cubic-bezier(0.22, 0.8, 0.28, 1) 1.55s backwards;
}

/* El parallax va en el ENVOLTORIO y nunca en el elemento que ya anima `transform`: ahi gana la
   animacion y la capa se queda quieta. */
.lg-px {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 5px), 0);
  transition: transform 0.3s ease;
}

.lg-px-2 { transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px), 0); }

/* --------------------------------------------------------------------------------------------
   19. Modales, overlay y toast
   -------------------------------------------------------------------------------------------- */
.lg-veil {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(10, 12, 16, 0.72);
  border: 0;
  padding: 0;
  cursor: default;
}

.lg-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  width: 520px;
  max-width: calc(100vw - 2rem);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--lg-card);
  border-radius: var(--radius);
  box-shadow: var(--lg-modal);
  animation: dc-modal-in 0.18s ease backwards;
}

.lg-modal-sm { width: 480px; }

.lg-modal-lg { width: 560px; }

.lg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--lg-border);
}

.lg-modal-head > div {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.lg-modal-tick {
  width: 3px;
  height: 16px;
  background: rgb(var(--primary-rgb));
  border-radius: 2px;
}

.lg-modal-tick-err { background: #f34343; }

.lg-modal-h {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--lg-ink);
}

.lg-modal-x {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--lg-ink2);
}

.lg-modal-x:hover { background: var(--lg-soft); }

.lg-modal-x i { font-size: 0.9rem; }

.lg-modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.lg-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--lg-border);
}

.lg-modal-btn {
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-on-accent);
  background: rgb(var(--primary-rgb));
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.lg-modal-btn:hover { opacity: 0.9; }

.lg-modal-btn-ghost {
  color: var(--lg-ink);
  background: transparent;
  border: 1px solid var(--lg-line);
}

.lg-modal-btn-ghost:hover { background: var(--lg-soft); opacity: 1; }

.lg-mant-item {
  display: flex;
  gap: 0.7rem;
}

.lg-mant-item > i {
  flex: none;
  font-size: 0.9rem;
  color: var(--lg-ink2);
  margin-top: 2px;
}

.lg-mant-t {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--lg-ink);
}

.lg-mant-d {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--lg-ink2);
  margin-top: 2px;
}

.lg-legal-t {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--lg-ink2);
  margin-bottom: 0.3rem;
}

.lg-legal-p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--lg-ink);
}

.lg-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--lg-ink2);
}

.lg-note i {
  font-size: 0.8rem;
  margin-top: 1px;
}

/* Filas del modal de seguridad */
.lg-sec-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-btn);
}

.lg-sec-ico {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-btn);
  background: var(--lg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lg-sec-ico i {
  font-size: 0.95rem;
  color: var(--lg-ink2);
}

.lg-sec-txt {
  flex: 1;
  min-width: 0;
}

.lg-sec-t {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--lg-ink);
}

.lg-sec-d {
  display: block;
  font-size: 0.73rem;
  line-height: 1.45;
  color: var(--lg-ink2);
  margin-top: 1px;
}

.lg-sec-btn {
  flex: none;
  padding: 0.4rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--lg-ink);
  background: transparent;
  border: 1px solid var(--lg-line2);
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.14s ease;
}

.lg-sec-btn:hover { background: var(--lg-soft); }

.lg-sec-done {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--lg-ok);
  animation: dc-pop 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}

.lg-sec-done i { font-size: 0.85rem; }

/* Overlay del SSO */
.lg-overlay {
  position: fixed;
  inset: 0;
  z-index: 97;
  background: rgba(10, 12, 16, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lg-overlay-box {
  width: 320px;
  padding: 1.6rem;
  background: var(--lg-card);
  border-radius: var(--radius);
  box-shadow: var(--lg-modal);
  text-align: center;
}

.lg-overlay-spin {
  display: inline-block;
  width: 26px;
  height: 26px;
  border: 2px solid var(--lg-line);
  border-top-color: rgb(var(--primary-rgb));
  border-radius: 50%;
  animation: dc-spin 0.7s linear infinite;
}

.lg-overlay-t {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lg-ink);
}

.lg-overlay-d {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  color: var(--lg-ink2);
}

/* Toast: se centra con `transform` inline y la animacion solo mueve `translate:`. */
.lg-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 99;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: #151821;
  border-radius: var(--radius-btn);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  animation: dc-toast-x 0.2s ease both;
}

.lg-toast i {
  font-size: 0.9rem;
  color: #2ecc71;
}

.lg-toast[data-kind="warn"] i { color: #ffbd5a; }

.lg-toast span {
  font-size: 0.78rem;
  color: #fff;
}

/* --------------------------------------------------------------------------------------------
   20. Movil (<= 900px): el panel pasa a banda superior y vuelve el scroll de pagina.
   `_fit()` se desactiva por debajo de este ancho.
   -------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  html.lg-html,
  html.lg-html body { overflow: auto; }

  .lg-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .lg-root { height: auto; overflow: visible; }

  .lg-form {
    overflow: visible;
    border-right: 0;
    padding: 1.6rem 1.25rem 1.1rem;
    /* Un ajuste heredado del escritorio dejaria la columna escalada y fuera de sitio. */
    transform: none !important;
    width: auto !important;
    height: auto !important;
  }

  .lg-panel {
    order: -1;
    min-height: 150px;
    padding: 1.5rem;
  }

  .lg-logo { width: min(58%, 200px); }

  .lg-foot { justify-content: center; }
}

/* ==================================================================================================
   MENOS MOVIMIENTO. Las MISMAS dos reglas que `nowa/_tema.html` pinta en los tres envoltorios Nowa,
   copiadas aqui porque esta pantalla no monta ese macro: tiene su propio `<style>` y su propia hoja.

   Por que hacia falta. Es la pantalla mas animada del producto —la cortina que se abre, el ruido de
   grano, el parpadeo de las luces, el latido del panel, el temblor del error— y era la unica donde
   el ajuste «Menos movimiento» del centro no apagaba nada. Se ve ANTES de tener sesion, asi que el
   unico ajuste que puede aplicarle es el de la casa.

   Dos reglas y no una: la primera es la eleccion del CENTRO (`data-motion`, que escribe
   `login/_base.html` desde `tema_attrs()`); la segunda es la preferencia de SISTEMA de quien mira,
   que se respeta siempre, este como este el ajuste del centro, porque no la decide el panel de
   administracion.

   No se apagan las animaciones, se acortan a 0,01 ms: lo que anima una entrada desde `opacity:0`
   —media pantalla de acceso— se quedaria invisible para siempre si se pusiera `animation:none`. */
[data-motion="reducido"] *,
[data-motion="reducido"] *::before,
[data-motion="reducido"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}