/* Acceso «El trazo de la marca» (views/v2/login.ejs; no usa estilos.css). Copia de final/acceso.css sin las ayudas del prototipo.
   El logo animado de ATPI se dibuja a gran escala y sus líneas superior e inferior siguen
   como señales de planta hasta dibujar el borde de la tarjeta.
   Los trazos (SVG) van siempre encima de la tarjeta (solo tocan su borde) y la salida no cambia capas ni z-index:
   todo lo que se mueve al hacer clic es opacidad, transform o el propio SVG, para que el clic pinte rápido con CPU lenta. */
@font-face { font-family: 'Red Hat Display'; src: url('/fonts/RedHatDisplay.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Red Hat Mono'; src: url('/fonts/RedHatMono.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
    --verde: #00B26A;
    --verde-luz: #00CC79;
    --morado: #420F66;
    --morado-noche: #240838;
    --carbon-prof: #141313;
    --perla: #E8E8E9;
    --perla-suave: #B9B9BC;   /* Texto suave en oscuro (manual) */
    --superficie: #1C1B1B;     /* Superficie oscura */
    --acero: #7F8184;
    --display: 'Red Hat Display', system-ui, sans-serif;
    --mono: 'Red Hat Mono', Menlo, ui-monospace, monospace;
    --curva: cubic-bezier(0.516, 0, 0.004, 1);
}
/* Tema clásico (ADR-021): la paleta de la primera versión del panel; ATPI claro y ATPI oscuro dejan el acceso como está. */
:root[data-tema="clasico"] {
    --carbon-prof: #050b14;
    --superficie: #0a1122;
    --morado: #233554;
    --morado-noche: #0a1122;
    --perla: #ccd6f6;
    --perla-suave: #8892b0;
    --verde-luz: #64ffda;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--carbon-prof); }
body { margin: 0; font-family: var(--display); font-size: 16px; line-height: 26px; color: var(--perla); background: var(--carbon-prof); }

/* ---------- Escena ---------- */
.escena { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100dvh;
          display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center;
          column-gap: clamp(64px, 10vw, 180px); padding: 48px clamp(24px, 8vw, 120px);
          background:
              radial-gradient(ellipse 80vmax 60vmax at 0% 100%, color-mix(in srgb, var(--morado) 28%, transparent), transparent 70%),
              var(--carbon-prof); }
/* Sin máscara CSS: a pantalla completa cuesta en cada cuadro; la atenuación por distancia la hace el canvas */
canvas.puntos { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.con-js canvas.puntos.listo { opacity: 1; }
/* Capa propia: cada cuadro repinta solo los trazos, no el fondo ni el texto de la marca */
svg.trazos { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; overflow: visible; will-change: transform; }

/* ---------- Marca (lado izquierdo) ---------- */
.marca { position: relative; z-index: 1; }
/* Sombra suave detrás del lema para que los puntos no compitan con el texto */
.marca::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: 30%; bottom: -25%;
                 background: radial-gradient(closest-side, color-mix(in srgb, var(--carbon-prof) 92%, transparent), color-mix(in srgb, var(--carbon-prof) 0%, transparent)); pointer-events: none; }
.logo-hueco { width: min(420px, 80vw); aspect-ratio: 843 / 94; }
.logo-hueco img { display: block; width: 100%; height: auto; }
.lema { margin: clamp(32px, 4vw, 48px) 0 0; max-width: 560px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.lema em { font-style: normal; color: var(--verde-luz); }
.lema .junto { white-space: nowrap; }   /* «a la» no queda huérfana al final de la primera línea */
.disciplinas { margin: 20px 0 0; font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--perla-suave); }
.disciplinas span { color: var(--verde); }
.con-js .lema, .con-js .disciplinas { opacity: 0; transform: translateY(10px); transition: opacity 0.7s ease, transform 0.9s var(--curva); }
.con-js .escena.lema-visible .lema, .con-js .escena.lema-visible .disciplinas { opacity: 1; transform: none; }
.con-js .escena.lema-visible .disciplinas { transition-delay: 0.15s; }
.con-js .escena.directo .lema, .con-js .escena.directo .disciplinas { transition: none; }

/* ---------- Tarjeta de acceso ---------- */
.tarjeta { position: relative; z-index: 3; padding: 40px 36px 32px; border-radius: 16px; }
/* Fondo y sombra en una capa propia, para encenderla cuando llega la señal */
.tarjeta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
                   background: linear-gradient(160deg, color-mix(in srgb, var(--morado-noche) 55%, transparent), color-mix(in srgb, var(--carbon-prof) 92%, transparent) 55%);
                   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px color-mix(in srgb, var(--verde) 35%, transparent); }
/* Con JavaScript el borde lo dibuja la señal; el marco fijo se apaga. La tarjeta se construye con la señal:
   fondo tenue al principio y, cuando la señal la toca, el contenido sube en cascada (70 ms entre piezas).
   Los botones se pueden pulsar y enfocar desde el primer cuadro; con el foco dentro, todo se ve al instante. */
.con-js .tarjeta::before { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px color-mix(in srgb, var(--perla) 6%, transparent); opacity: 0.35; transition: opacity 0.9s ease; }
.con-js .construida .tarjeta::before { opacity: 1; }
.con-js .tarjeta > :not(.conectando) { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.7s var(--curva); }
.con-js .construida .tarjeta > :not(.conectando), .con-js .tarjeta:focus-within > :not(.conectando) { opacity: 1; transform: none; }
.con-js .construida .tarjeta > :nth-child(2) { transition-delay: 70ms; }
.con-js .construida .tarjeta > :nth-child(3) { transition-delay: 140ms; }
.con-js .construida .tarjeta > .aviso, .con-js .construida .tarjeta > .acciones { transition-delay: 210ms; }
.con-js .construida .tarjeta > .nota { transition-delay: 280ms; }
.con-js .escena.directo .tarjeta > *, .con-js .escena.directo .tarjeta::before { transition: none; }
.ceja { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-luz); }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-luz); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde-luz) 16%, transparent); }
.con-js .led { background: rgba(127, 129, 132, 0.35); box-shadow: none; transition: background 0.4s ease, box-shadow 0.6s ease; }
.con-js .cerrado .led { background: var(--verde-luz); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde-luz) 16%, transparent), 0 0 14px color-mix(in srgb, var(--verde-luz) 80%, transparent); }
/* Clímax: el LED se enciende al máximo ~350 ms, junto con el destello de los nodos de llegada */
.con-js .destello .led { background: var(--perla); box-shadow: 0 0 0 5px color-mix(in srgb, var(--verde-luz) 35%, transparent), 0 0 22px 6px color-mix(in srgb, var(--verde-luz) 95%, transparent); transition-duration: 0.08s; }
h1 { margin: 0 0 12px; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; }
.entrada { margin: 0 0 28px; color: var(--perla-suave); }
.aviso:focus { outline: none; }   /* recibe el foco al cargar solo para que el lector de pantalla lo anuncie */
.aviso[hidden] { display: none; }
.aviso { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 24px; padding: 12px 14px; border-radius: 8px;
         border-left: 3px solid var(--acero); font-size: 15px; line-height: 22px; }
.aviso > div { display: grid; gap: 2px; min-width: 0; }
.aviso b { font-weight: 700; }
.aviso svg { flex: none; margin-top: 2px; }
/* Error de sistema: morado de marca, nunca coral (es de paro de máquina). Sobre oscuro: velo morado translúcido,
   filo perla y texto perla; sin caja clara que se lleve la mirada */
.aviso--error { border-left-color: var(--perla); background: color-mix(in srgb, var(--morado) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--morado) 90%, transparent); color: var(--perla); }
.aviso--error svg { color: var(--perla-suave); }
/* Sesión expirada: informativo, tono neutro */
.aviso--info { border-left-color: var(--acero); background: color-mix(in srgb, var(--perla) 6%, transparent); color: var(--perla); }
.aviso--info svg { color: var(--perla-suave); }
.acciones { display: grid; gap: 14px; }

/* Botones: reglas de .boton de sitio.css (manual, sección 10): mayúsculas, peso 500, 52 px de alto; sombra del primario sobre oscuro */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
         border-radius: 8px; font-family: var(--display); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: uppercase;
         text-decoration: none; text-align: center; white-space: nowrap;
         transition: box-shadow 220ms cubic-bezier(.2, .7, .2, 1), transform 220ms cubic-bezier(.2, .7, .2, 1), background-color 220ms cubic-bezier(.2, .7, .2, 1), border-color 220ms cubic-bezier(.2, .7, .2, 1); }
.boton svg { flex: none; transition: transform 220ms cubic-bezier(.2, .7, .2, 1); }
.boton:active { transform: translateY(1px); box-shadow: none; }
.boton.primario { position: relative; overflow: hidden; will-change: transform; background: var(--verde-luz); color: var(--morado); box-shadow: 0 5px 12px color-mix(in srgb, var(--verde-luz) 35%, transparent); }
.boton.primario > * { position: relative; z-index: 1; }
/* Destello que cruza el botón de izquierda a derecha cuando llega un pulso (dos nombres para que se reinicie entre cumbre y latido) */
.boton.primario::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%);
                         background: linear-gradient(105deg, transparent 25%, color-mix(in srgb, var(--perla) 55%, transparent) 50%, transparent 75%); }
.cumbre .boton.primario::after { animation: destello 0.75s var(--curva); }
.latido .boton.primario::after { animation: destello-pulso 0.75s var(--curva); }
@keyframes destello { to { transform: translateX(110%); } }
@keyframes destello-pulso { to { transform: translateX(110%); } }
.boton.primario:hover { box-shadow: 0 6px 24px color-mix(in srgb, var(--verde-luz) 50%, transparent); transform: translateY(-1px); }
.boton.primario:active { background: var(--verde); }
/* Llega un pulso de datos al nodo: la llamada a la acción respira, sin moverse */
.latido .boton.primario:not(:hover) { box-shadow: 0 5px 12px color-mix(in srgb, var(--verde-luz) 35%, transparent), 0 0 30px color-mix(in srgb, var(--verde-luz) 45%, transparent); transition-duration: 300ms; }
.cumbre .boton.primario:not(:hover) { box-shadow: 0 5px 12px color-mix(in srgb, var(--verde-luz) 35%, transparent), 0 0 40px color-mix(in srgb, var(--verde-luz) 60%, transparent); }
.boton.senal { background: var(--carbon-prof); border: 1px solid color-mix(in srgb, var(--verde-luz) 45%, transparent); box-shadow: 0 5px 14px color-mix(in srgb, var(--verde-luz) 25%, transparent); color: var(--verde-luz); }
.boton.senal span { background: linear-gradient(90deg, var(--perla), var(--verde-luz)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.boton.senal svg { color: var(--verde-luz); }
.boton.senal:hover { box-shadow: 0 6px 26px color-mix(in srgb, var(--verde-luz) 45%, transparent); border-color: var(--verde-luz); }
.boton.senal:hover svg { transform: translateX(4px); }
.boton[aria-disabled="true"] { cursor: progress; }
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (forced-colors: active) {
    .boton { border: 1px solid ButtonText; }
}
/* Foco como el sitio: 3 px de verde luz (8.9:1 sobre carbón profundo) */
.boton:focus-visible, .nota a:focus-visible { outline: 3px solid var(--verde-luz); outline-offset: 3px; }
.nota { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--perla) 8%, transparent); font-size: 13px; line-height: 20px; color: var(--perla-suave); }
.nota a { color: var(--perla); text-underline-offset: 3px; border-radius: 3px; }
.nota a:hover { color: var(--verde-luz); }

/* ---------- Trazos (SVG) ---------- */
.ruta, .borde { fill: none; stroke: var(--verde); stroke-linecap: round; stroke-linejoin: round; }
.ruta { stroke-width: 2; }
.borde { stroke-width: 1.5; transition: stroke 0.6s ease; }
.cerrado .borde { stroke: var(--verde-luz); }
.brillo { fill: none; stroke: var(--verde-luz); stroke-width: 3; opacity: 0; }
.brillo.halo { stroke-width: 14; stroke-opacity: 0.22; }
.cometa { fill: none; stroke: var(--verde-luz); stroke-linecap: round; opacity: 0; }
.cometa.halo { stroke-width: 10; stroke-opacity: 0.2; }
.cometa.cola { stroke-width: 2.5; stroke-opacity: 0.5; }
.cometa.medio { stroke-width: 3; }
.cometa.cabeza { stroke: var(--perla); stroke-width: 3; stroke-opacity: 0.6; }
/* Barrido perla del borde en la cumbre */
.cometa.perla { stroke: var(--perla); }
.cometa.perla.halo { stroke: var(--verde-luz); stroke-width: 18; stroke-opacity: 0.35; }   /* resplandor verde alrededor del núcleo perla */
.cometa.perla.cola { stroke-width: 4; stroke-opacity: 0.6; }
.cometa.perla.medio { stroke-width: 5; }
.cometa.perla.cabeza { stroke-width: 6; stroke-opacity: 1; }
/* Raíz de la señal: continúa el trazo del logo con su grosor y se adelgaza hasta la primera esquina */
.nodo { fill: var(--carbon-prof); stroke: var(--verde-luz); stroke-width: 2; }
.arranque { fill: var(--carbon-prof); stroke: var(--verde); stroke-width: 2; }

/* Calidad ligera (equipo lento): sin halos ni resplandores */
[data-ligero] .brillo.halo, [data-ligero] .cometa.halo { display: none; }
[data-ligero] .boton.primario::after { display: none; }
[data-ligero] .latido .boton.primario:not(:hover), [data-ligero] .cumbre .boton.primario:not(:hover) { box-shadow: 0 5px 12px color-mix(in srgb, var(--verde-luz) 35%, transparent); }
[data-ligero] .cerrado .led, [data-ligero] .destello .led { box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde-luz) 16%, transparent); }

/* ---------- Salida hacia Cognito ---------- */
/* «Conectando»: anclado al pie de la tarjeta, en el lugar de la nota; barra encima y texto centrado */
.conectando { position: absolute; left: 36px; right: 36px; bottom: 32px; display: grid; gap: 10px; justify-items: center;
              opacity: 0; visibility: hidden; transition: opacity 0.25s ease 0.15s, visibility 0s linear 0.4s; }
.conectando p { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-luz); }
.barra { position: relative; width: 100%; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--verde-luz) 15%, transparent); }
.barra::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--verde-luz)); transform-origin: left; animation: barrido 1.1s var(--curva) infinite; }
@keyframes barrido { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Al salir, las señales se encienden y el fondo baja (opacidad del canvas, sin velo encima: no repinta la pantalla).
   La tarjeta sigue legible (AA); solo lo secundario baja */
.saliendo .ruta, .saliendo .borde { stroke: var(--verde-luz); transition: stroke 0.2s ease; }
.con-js .saliendo canvas.puntos.listo { opacity: 0.4; transition: opacity 0.35s ease 0.15s; }
.con-js .escena.saliendo .tarjeta > :not(.conectando), .con-js .escena.saliendo .tarjeta::before { opacity: 1; transform: none; transition: none; }
.saliendo .nota { opacity: 0 !important; }   /* «Conectando» ocupa su lugar; sin transición: no crea capas en el clic */
.saliendo .conectando { opacity: 1; visibility: visible; transition: opacity 0.25s ease 0.15s, visibility 0s; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
    .escena { grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 88px; padding: 40px 16px 32px; }
    .lema { max-width: 62vw; margin-top: 28px; font-size: 24px; }
    .disciplinas { display: none; }
    .boton { padding: 8px 14px; gap: 8px; white-space: normal; }
    .tarjeta { padding: 32px 22px 24px; }
    .conectando { left: 22px; right: 22px; bottom: 24px; }
    h1 { font-size: 26px; line-height: 32px; }
}

/* Movimiento reducido: escena final, sin desplazamientos. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.12s !important; transition-delay: 0s !important; }
    .con-js .lema, .con-js .disciplinas { transform: none; }
    .barra::after { animation: none; transform: none; }
    }