/* login.css — login con el isotipo DX-ONE en 3D (DX-206, port de visual-lab/clasico/login.css).
   Layout: formulario a la derecha y escenario a la izquierda, con el isotipo 3D (ISO3D, modo login).
   Prefijos: lg- = formulario · cl- = escena, hora y velo · lg-raiz = envoltorio a pantalla completa.
   Colores: solo tokens --cx-* de cx-tokens.css (los --lg-* se derivan de ellos). Sin GSAP: la entrada es CSS y el
   vuelo es WAAPI (login.js). 0 animaciones infinitas en reposo: el único `infinite` es el spinner de
   "Ingresando...", que solo existe mientras carga. */

[x-cloak] { display: none !important; }

body { margin: 0; background: var(--cx-fondo); font-family: var(--cx-f-sans); }
/* En el login quien hace scroll es <html>: sin esto la barra clásica de Windows sale clara en oscuro. */
html.dark { color-scheme: dark; }

/* Envoltorio a pantalla completa: los cortes móviles responden a su ancho (@container lg). */
.lg-raiz { container: lg / inline-size; --lg-vista: 100vh; }
@supports (height: 100dvh) { .lg-raiz { --lg-vista: 100dvh; } }

/* Tokens del formulario, derivados de la paleta única (claro y oscuro salen solos de .dark en cx-tokens.css). */
.lg {
  --lg-texto: var(--cx-tinta); --lg-texto2: var(--cx-texto2); --lg-tinta: var(--cx-marca); --lg-acento: var(--cx-acento);
  --lg-foco: var(--cx-acento); --lg-panel: var(--cx-sup); --lg-linea: var(--cx-linea); --lg-borde-input: var(--cx-control);
  --lg-input-bg: var(--cx-sup); --lg-placeholder: var(--cx-texto3); --lg-hover: var(--cx-sup2); --lg-anillo: var(--cx-acento-t);
  --lg-primario: var(--cx-marca); --lg-primario-hover: var(--cx-marca-h); --lg-primario-txt: #FFFFFF; --lg-enlace: var(--cx-marca);
  --lg-error: var(--cx-error); --lg-error-bg: var(--cx-error-bg); --lg-hint: var(--cx-aviso); --lg-hint-bg: var(--cx-aviso-bg);
  --lg-aviso-bg: var(--cx-acento-t); --lg-tema-bg: var(--cx-sup2); --lg-tema-on: var(--cx-sup);
  position: relative; height: var(--lg-vista); overflow: hidden; color: var(--lg-texto);
  font-family: var(--cx-f-sans); -webkit-font-smoothing: antialiased;
}
.dark .lg { --lg-tinta: var(--cx-acento); --lg-enlace: var(--cx-acento); --lg-input-bg: var(--cx-fondo); --lg-anillo: rgba(96, 165, 250, .22);
            --lg-tema-bg: var(--cx-fondo); --lg-tema-on: var(--cx-linea); }
.lg :focus-visible { outline: 2px solid var(--lg-foco); outline-offset: 2px; }
.lg .lg-input:focus-visible { outline: none; }
.lg-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.lg-ch { display: inline-block; }

/* ---------- formulario ---------- */
.lg-logo { height: 30px; width: auto; display: block; }
.lg-logo-osc { display: none; }
.dark .lg-logo-cla { display: none; }
.dark .lg-logo-osc { display: block; }
.lg-marca { width: 100%; max-width: 360px; }
.lg-msg { display: flex; gap: 8px; align-items: flex-start; font-size: var(--cx-t-13); line-height: 1.45; padding: 10px 12px; border-radius: var(--cx-r-input); margin: 0 0 14px; }
.lg-msg svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.lg-msg-error { background: var(--lg-error-bg); color: var(--lg-error); }
.lg-msg-hint { background: var(--lg-hint-bg); color: var(--lg-hint); }
.lg-msg-aviso { background: var(--lg-aviso-bg); color: var(--lg-texto); }
.lg-google { width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px;
             border: 1px solid var(--lg-borde-input); background: var(--lg-panel); color: var(--lg-texto);
             border-radius: var(--cx-r-input); font: 500 14px var(--cx-f-sans); cursor: pointer; transition: background-color .15s, border-color .15s; }
.lg-google:hover:not(:disabled) { background: var(--lg-hover); }
.lg-google svg { width: 18px; height: 18px; flex: none; }
/* La caja de Google señala el botón: su borde toma el color del aviso (sin animación). */
.cl-hint .lg-google { border-color: var(--lg-hint); }
.lg-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; color: var(--lg-texto2); font-size: var(--cx-t-12); }
.lg-sep::before, .lg-sep::after { content: ''; flex: 1; height: 1px; background: var(--lg-linea); }
.lg-campo { margin-bottom: 14px; }
.lg-campo label { display: block; font-size: 13px; font-weight: 500; color: var(--lg-texto2); margin-bottom: 6px; }
.lg-input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--lg-borde-input); border-radius: var(--cx-r-input);
            background: var(--lg-input-bg); color: var(--lg-texto); font: 400 15px var(--cx-f-sans); outline: none;
            transition: border-color .15s, box-shadow .15s; --lg-c: var(--lg-tinta); }
.lg-input::placeholder { color: var(--lg-placeholder); }
.lg-input[aria-invalid="true"] { --lg-c: var(--lg-error); border-color: var(--lg-error); }
.cl-hint .lg-input[aria-invalid="true"] { --lg-c: var(--lg-hint); border-color: var(--lg-hint); }   /* con la caja de Google, el aviso es ámbar, no error */
/* Foco: el borde de 1 px más 1 px de sombra en el mismo color = 2 px de tinta (≥ 3:1 en los dos temas), con el halo
   suave de afuera. El color sigue al estado del campo (tinta, error o ámbar). */
.lg-input:focus { border-color: var(--lg-c); box-shadow: 0 0 0 1px var(--lg-c), 0 0 0 4px var(--lg-anillo); }
.lg-pass { position: relative; }
.lg-pass .lg-input { padding-right: 46px; }
.lg-ojo { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center;
          border: 0; background: none; color: var(--lg-texto2); border-radius: var(--cx-r-tile); cursor: pointer; }
.lg-ojo::after, .lg-tema button::after { content: ''; position: absolute; inset: -4px; }
.lg-ojo:hover { color: var(--lg-texto); }
.lg-ojo svg { width: 18px; height: 18px; }
.lg-primario { width: 100%; height: 46px; margin-top: 4px; border: 0; border-radius: var(--cx-r-input); background: var(--lg-primario);
               color: var(--lg-primario-txt); font: 600 15px var(--cx-f-sans); cursor: pointer; transition: background-color .15s; }
.lg-primario:hover:not(:disabled) { background: var(--lg-primario-hover); }
.lg button:disabled { opacity: .55; cursor: not-allowed; }
.lg-cargando { display: inline-flex; align-items: center; gap: 9px; }
.lg-spin { width: 14px; height: 14px; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lg-giro .8s linear infinite; }
@keyframes lg-giro { to { transform: rotate(360deg); } }
.lg-olvido { margin-top: 12px; padding: 6px 0; background: none; border: 0; color: var(--lg-enlace); font: 500 var(--cx-t-13) var(--cx-f-sans);
             cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.lg-olvido:hover { text-decoration-color: currentColor; }
.lg-pie { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: var(--cx-t-12); color: var(--lg-texto2); max-width: 360px; }
.lg-tema { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--lg-tema-bg); }
.lg-tema button { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--lg-texto2); cursor: pointer; }
.lg-tema button[aria-pressed="true"] { background: var(--lg-tema-on); color: var(--lg-texto); }
/* Opción activa: además del fondo (que casi no se distingue), un indicador de 2 px en el acento (WCAG 1.4.1/1.4.11).
   ::before, porque ::after es el área de toque. */
.lg-tema button[aria-pressed="true"]::before { content: ''; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;
                                               border-radius: 1px; background: var(--cx-acento); }
.lg-tema svg { width: 15px; height: 15px; }

/* ================= cl- · escenario con el isotipo 3D ================= */
.cl { display: grid; grid-template-columns: 58fr 42fr; background: var(--cx-fondo); }
/* El escenario es un contenedor de tamaño: el isotipo se dimensiona contra él (cqw/cqh), no contra la página. */
.cl-escena { position: relative; min-width: 0; min-height: 0; container: escena / size; }
/* Caja del isotipo: el 3D ocupa el 64 % de su ancho (ISO3D, modo login; ≈ 490 px a 1536); el resto es aire para el
   giro, la vista explotada y la sombra de la pared. Un poco arriba del centro óptico del escenario. */
/* left +1.12cqw: el giro de 26° corre el centro óptico del isotipo 10 px a la izquierda (medido a 1536); se compensa
   moviendo la caja, para que el eje de la cámara siga pasando por el isotipo (moverlo en 3D cambia la perspectiva). */
.cl-iso { position: absolute; left: calc(50% + 1.12cqw); top: 44%; width: min(86cqw, 128cqh); aspect-ratio: 6 / 5; transform: translate(-50%, -50%); }
/* Sin WebGL: el PNG real (ISO3D.respaldo) con el mismo encuadre que el 3D, de frente y quieto. */
.cl-iso > .compuesta { position: absolute; left: 18%; top: 50%; --w: 64% !important; width: 64%; transform: translateY(-50%); }
/* Sin isotipo3d.js (404): login.js pinta las 4 piezas PNG como máscara con --iso-d / --iso-x (lo mismo que
   ISO3D.respaldo), así el escenario no queda vacío. */
.lg-resp span { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
                -webkit-mask-position: center; mask-position: center; background-image: none !important; filter: none !important; }
.lg-resp .o1 { background: var(--iso-d); -webkit-mask-image: var(--pz1); mask-image: var(--pz1); }
.lg-resp .o2 { background: var(--iso-d); -webkit-mask-image: var(--pz2); mask-image: var(--pz2); }
.lg-resp .o3 { background: var(--iso-x); -webkit-mask-image: var(--pz3); mask-image: var(--pz3); }
.lg-resp .o4 { background: var(--iso-x); -webkit-mask-image: var(--pz4); mask-image: var(--pz4); }
/* Hora: lo único que queda de la capa de datos de la Torre. Abajo a la izquierda, sobre la línea base del formulario. */
.cl-hud { position: absolute; left: clamp(20px, 4.5cqw, 56px); bottom: clamp(20px, 6cqh, 44px); margin: 0; }
.cl-hora { margin: 0; font: 500 40px/1 var(--cx-f-brand); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--cx-marca); }
.dark .cl-hora { color: var(--cx-acento); }
.cl-zona { font: 400 13px var(--cx-f-sans); letter-spacing: 0; color: var(--cx-texto2); margin-left: 6px; }
.cl-panel { position: relative; display: flex; flex-direction: column; background: var(--cx-sup); border-left: 1px solid var(--cx-linea);
            padding: clamp(20px, 4vh, 40px) clamp(28px, 4.5cqw, 72px); overflow-y: auto; }
/* El bloque se ancla ARRIBA con un aire fijo: una alerta solo empuja hacia abajo (centrado, saltaba −43 px). */
.cl-form { width: 100%; max-width: 360px; margin: 0; padding: clamp(28px, 11vh, 96px) 0 12px; }
.cl-panel > .lg-pie { margin-top: auto; padding-top: 16px; }
.cl-titulo { margin: 0 0 22px; font: 600 32px/1.1 var(--cx-f-brand); letter-spacing: -.025em; color: var(--lg-texto); }

/* Velo de salida: el color de fondo del Inicio (--cx-fondo). Cubre el panel mientras el isotipo vuela al héroe. */
.cl-velo { position: absolute; inset: 0; z-index: 4; background: var(--cx-fondo); opacity: 0; pointer-events: none; }
/* Durante el vuelo, el escenario (fondo = --cx-fondo, igual que el velo) sube por encima del velo y del panel. */
.cl-saliendo .cl-escena { z-index: 5; }
.cl.cl-saliendo .cl-hud { animation: none; opacity: 0; transition: opacity .2s; }

/* ---------- entrada: el título por máscara, el resto aparece. Una sola orquestación; el formulario se usa a los ~0.35 s ---------- */
.cl-entra .cl-titulo .lg-ch { animation: cl-sube .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.1s + var(--i) * .02s); }
.cl-entra .cl-form > :not(.cl-titulo), .cl-entra .cl-marca-in { animation: cl-aparece .4s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.15s + var(--i, 0) * .03s); }
.cl-entra .cl-hud { animation: cl-funde .5s ease-out both; animation-delay: 1.1s; }
@keyframes cl-sube { from { transform: translateY(115%); } to { transform: none; } }
@keyframes cl-aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cl-funde { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cl-entra .cl-titulo .lg-ch, .cl-entra .cl-form > *, .cl-entra .cl-hud, .cl-entra .cl-marca-in { animation: none; }
  .lg-spin { animation-duration: 2.4s; }
}

/* ---------- teléfono y ventanas angostas (media pantalla incluida): el formulario primero ---------- */
/* El escenario se vuelve una banda compacta arriba y el formulario queda centrado y sube: a 765×672 cabe del título a
   «¿Olvidaste tu contraseña?» sin scroll, y a 390×844 el título y Google quedan en la primera mitad. */
@container lg (max-width: 900px) {
  .cl { grid-template-columns: 1fr; grid-template-rows: clamp(96px, calc(var(--lg-vista) * .18), 150px) auto; height: auto;
        min-height: var(--lg-vista); overflow: visible; }
  .cl-panel { border-left: 0; border-top: 1px solid var(--cx-linea); overflow: visible; align-items: center; gap: 16px;
              padding: 20px clamp(20px, 5cqw, 40px); }
  .cl-form { padding: 0; }
  .cl-titulo { margin-bottom: 16px; }
  /* El isotipo (64 % del ancho de la caja) mide ~70 % del alto de la banda y queda centrado; el resto de la caja es
     aire para el giro. +1.9cqh: la misma compensación del corrimiento óptico del giro que en escritorio. */
  .cl-iso { top: 50%; left: calc(50% + 1.9cqh); width: 155cqh; }
  .cl-hud { display: none; }
}
/* Apilado y bajo (media pantalla en laptop al 125 %): las mismas medidas compactas que escritorio en pantallas bajas,
   así cabe hasta «¿Olvidaste tu contraseña?» aun con un mensaje visible. */
@media (max-height: 760px) { @container lg (max-width: 900px) {
  .cl-titulo { font-size: 28px; }
  .lg-sep { margin: 12px 0 10px; }
  .lg-campo { margin-bottom: 10px; }
  .lg-campo label { margin-bottom: 4px; }
  .lg-input, .lg-google, .lg-primario { height: 42px; }
  .lg-msg { padding: 8px 12px; margin-bottom: 10px; }
  .lg-olvido { margin-top: 6px; }
} }
/* Teléfono con el teclado abierto: sin escenario, el formulario arriba. */
@media (max-height: 600px) { @container lg (max-width: 900px) {
  .cl { grid-template-rows: auto; } .cl-escena { display: none; } .cl-panel { border-top: 0; }
} }
/* Pantallas bajas (laptop al 125 %: ~620 px útiles): el formulario cabe aun con un mensaje visible. */
@media (max-height: 760px) { @container lg (min-width: 901px) {
  .cl-titulo { margin: 0 0 16px; font-size: 28px; }
  .lg-sep { margin: 12px 0 10px; }
  .lg-campo { margin-bottom: 10px; }
  .lg-campo label { margin-bottom: 4px; }
  .lg-input, .lg-google, .lg-primario { height: 42px; }
  .lg-msg { padding: 8px 12px; margin-bottom: 10px; }
  .lg-olvido { margin-top: 6px; }
  .cl-form { padding: clamp(20px, 7vh, 56px) 0 0; }
  .cl-hora { font-size: 34px; }
} }

/* Luz de borde del isotipo: rojo de error (--iso-borde de cx-tokens.css) o ámbar mientras se muestra la caja de Google. */
.cl-iso.cl-ambar { --iso-borde: #D98A00; }
.dark .cl-iso.cl-ambar { --iso-borde: #F59E0B; }   /* el amarillo del aviso volvía caqui el muro */