/* ═══════════════════════════════════════════════════════════════
   LOGIN CINEMATIC — SimballManager
   Vídeo de fondo + overlay verde corporativo + HUD analítico +
   wordmark viajero + login que florece desde el centro.

   Modelo de disparo: toda la secuencia de entrada corre en CSS puro
   (animation ... both, con animation-delay). No depende de que un
   script añada clases — si login-cinematic.js no llega a cargar,
   el vídeo autoarranca por el atributo nativo, la secuencia se
   reproduce igualmente y el formulario queda usable. JS solo aporta
   mejoras progresivas: botón «saltar», atenuar el HUD al escribir,
   y el contenido vivo de los tres módulos (números, formaciones, Lucy).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --primary-color:#0F6F60;   /* verde corporativo (overlay multiply) */
  --v-abyss:#01100E;
  --v-glow:#66FFCC;
  --v-accent:#0AC17D;

  --gold-100:#F7E4A8;
  --gold-300:#F0CE6A;
  --gold-500:#E4B313;        /* dorado corporativo (acentos) */
  --gold-700:#9C7708;

  --txt:#EAFFF8;
  --txt-dim:rgba(234,255,248,.62);
  --txt-faint:rgba(234,255,248,.42);

  --stack:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','Cascadia Code',ui-monospace,SFMono-Regular,Consolas,monospace;

  /* línea de tiempo de la intro */
  --t-wm-delay:.3s;  --t-wm-dur:2.7s;   /* wordmark: llega a su sitio a los ~3 s */
  --t-card:3s;                          /* login: florece desde el centro a los 3 s */
}

*{box-sizing:border-box}
html,body{height:100%}
body.login-cinematic{
  margin:0; background:var(--v-abyss); color:var(--txt);
  font-family:var(--stack); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

.scene{position:fixed; inset:0; overflow:hidden; isolation:isolate}

/* ═══ CAPA 0 · VÍDEO + OVERLAY VERDE ══════════════════════ */
.v-wrap{position:absolute; inset:0; z-index:0; overflow:hidden}
#introVideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%; background:var(--v-abyss);
  transform:scale(1.02);
  animation:videoSettle 1.2s ease var(--t-card) both;
}
@keyframes videoSettle{
  from{filter:none; transform:scale(1.02)}
  to  {filter:blur(6px) saturate(1.06) brightness(.80); transform:scale(1.2) translateY(4.5%)}
}

/* fondo estático (pantallas sin vídeo, p.ej. home tras el login): el
   mismo último fotograma del clip, ya con el tratamiento "asentado"
   (desenfoque + oscurecido) que el vídeo alcanza al final de su
   propia animación — aquí es el estado permanente, sin transición. */
.v-static{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%;
  filter:blur(6px) saturate(1.06) brightness(.80);
  transform:scale(1.2) translateY(4.5%);
}

/* overlay corporativo: multiply tiñe el vídeo con el verde de marca,
   la viñeta da lectura al texto. Ambos activos desde el fotograma 1. */
.v-tint{
  position:absolute; inset:0; z-index:1;
  background:var(--primary-color);
  mix-blend-mode:multiply; opacity:.42;
}
.v-vignette{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(72% 60% at 50% 44%, rgba(1,16,14,.12), rgba(1,16,14,.58) 82%),
    linear-gradient(180deg, rgba(3,38,33,.44) 0%, rgba(1,16,14,.16) 32%, rgba(1,16,14,.62) 66%, rgba(1,16,14,.97) 100%);
}
/* fundido de apertura desde negro */
.v-blackout{
  position:absolute; inset:0; z-index:3; background:var(--v-abyss);
  pointer-events:none; animation:fadeOut .6s ease .05s both;
}
@keyframes fadeOut{to{opacity:0}}

/* rejilla de datos */
.grid-layer{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background-image:
    linear-gradient(rgba(102,255,204,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(102,255,204,.05) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 88% at 50% 46%,#000 22%,transparent 76%);
          mask-image:radial-gradient(120% 88% at 50% 46%,#000 22%,transparent 76%);
  animation:fadeGrid 1.4s ease 1s both;
}
@keyframes fadeGrid{to{opacity:1}}

/* ═══ CAPA 2 · CABECERA ═══════════════════════════════════ */
.brand{
  position:absolute; top:22px; left:30px; z-index:20;
  display:inline-block; border-radius:12px; padding:6px 10px; margin:-6px -10px;
  animation:brandIn .8s cubic-bezier(.16,1,.3,1) .15s both;
}
@keyframes brandIn{ from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none} }
.brand img{
  height:62px; width:auto; display:block;
  filter:drop-shadow(0 4px 18px rgba(1,16,14,.9));
  transition:transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.brand:hover img{transform:translateY(-2px); filter:drop-shadow(0 6px 26px rgba(102,255,204,.45))}
.brand:focus-visible{outline:2px solid var(--gold-300); outline-offset:4px}

/* wordmark: entra desde fuera del viewport por la izquierda, pasa
   por el centro en grande y ancla arriba-derecha a los ~3 s, a la
   vez que florece el login. Solo transform + opacity. */
.wm{
  position:absolute; top:30px; right:34px; z-index:21; pointer-events:none;
  white-space:nowrap; font-size:clamp(19px,2.4vw,32px); line-height:1;
  font-weight:200; letter-spacing:.1em;
  text-shadow:0 6px 40px rgba(1,16,14,.9);
  animation:wmTravel var(--t-wm-dur) cubic-bezier(.45,.05,.2,1) var(--t-wm-delay) both;
}
.wm b{font-weight:800; color:#fff}
.wm i{font-style:normal; font-weight:200; color:var(--gold-300)}
@keyframes wmTravel{
  0%  {opacity:0; transform:translate(calc(-50vw + 50% + 34px - 60vw), 40vh) scale(2.4)}
  10% {opacity:1; transform:translate(calc(-50vw + 50% + 34px - 18vw), 40vh) scale(2.35)}
  38% {transform:translate(calc(-50vw + 50% + 34px), 38vh) scale(2.1)}
  62% {transform:translate(calc(-50vw + 50% + 34px), 34vh) scale(1.9)}
  100%{opacity:1; transform:none}
}
.wm span{display:inline-block; opacity:0; animation:letterIn .55s cubic-bezier(.16,1,.3,1) both}
.wm span{animation-delay:calc(var(--t-wm-delay) + .08s + var(--i)*.04s)}
@keyframes letterIn{ from{opacity:0; transform:translateY(.45em)} to{opacity:1; transform:none} }

/* ═══ CAPA 1 · HUD ANALÍTICO ══════════════════════════════ */
.hud{position:absolute; z-index:12; opacity:0; animation:hudIn 1.1s ease both}
.hud.h1{left:34px; top:118px; animation-delay:.9s}
.hud.h2{left:34px; bottom:46px; animation-delay:1.15s}
.hud.h3{right:34px; bottom:46px; animation-delay:1.4s}
@keyframes hudIn{to{opacity:.94}}
.typing .hud{opacity:.34 !important; transition:opacity .4s ease}

/* flotación infinita — independiente de la aparición, nunca se detiene */
.hud-float{
  width:224px; border-radius:15px; padding:13px 15px;
  background:linear-gradient(162deg, rgba(15,111,96,.30), rgba(1,16,14,.58));
  border:1px solid rgba(102,255,204,.15);
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  box-shadow:0 22px 46px -30px rgba(0,0,0,.9);
  animation:float 7s linear infinite;
}
.hud.h2 .hud-float{animation-duration:8.5s; animation-delay:-2s}
.hud.h3 .hud-float{animation-duration:7.8s; animation-delay:-4s}
@keyframes float{
  0%{transform:translateY(0)} 25%{transform:translateY(-5px)}
  50%{transform:translateY(-8px)} 75%{transform:translateY(-4px)} 100%{transform:translateY(0)}
}

.hud h4{
  margin:0 0 11px; font-family:var(--mono); font-size:.56rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(102,255,204,.82);
  display:flex; align-items:center; gap:7px;
}
.hud h4::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--v-glow);
  box-shadow:0 0 9px var(--v-glow); animation:blip 2.2s ease-in-out infinite;
}
@keyframes blip{50%{opacity:.2}}

/* módulo 1 · potencia de cálculo */
.stat{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.stat + .stat{margin-top:6px}
.stat span{font-size:.63rem; color:var(--txt-dim)}
.stat b{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.86rem; font-weight:600; color:var(--txt)}
.bars{display:flex; align-items:flex-end; gap:2px; height:28px; margin-top:11px}
.bars i{
  flex:1; height:100%; border-radius:1px; transform-origin:bottom;
  background:linear-gradient(180deg,var(--v-glow),rgba(10,193,125,.3));
  animation:bar 1.6s ease-in-out infinite;
}
@keyframes bar{0%,100%{transform:scaleY(.2)} 50%{transform:scaleY(1)}}

/* módulo 2 · tácticas */
.pitch{width:100%; height:auto; display:block; border-radius:9px; background:rgba(1,16,14,.42)}
.pitch .ln{stroke:rgba(102,255,204,.24); stroke-width:1; fill:none}
.pitch .pl{fill:var(--v-glow); transition:transform 1.2s cubic-bezier(.5,0,.2,1)}
.pitch .gk{fill:var(--gold-300)}
.pitch .pass{
  stroke:var(--gold-300); stroke-width:1.5; fill:none;
  stroke-dasharray:6 210; animation:pass 3.6s linear infinite;
  filter:drop-shadow(0 0 3px rgba(240,206,106,.85));
}
@keyframes pass{to{stroke-dashoffset:-216}}
.form-name{margin-top:9px; text-align:center; font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; color:var(--gold-300)}

/* módulo 3 · Lucy — el avatar real con efectos de IA en movimiento:
   anillos de radar que emanan, dos puntos orbitando (dorado + menta)
   y respiración. Todo transform/opacity, todo infinito. */
.lucy-top{display:flex; align-items:center; gap:12px}
.lucy-vis{width:56px; height:56px; position:relative; flex:none}
.lucy-vis img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  border:1.5px solid rgba(102,255,204,.55);
  box-shadow:0 0 16px rgba(10,193,125,.55);
  animation:breathe 3.4s ease-in-out infinite;
}
/* velo esmeralda sutil para integrar el azul del avatar en la paleta */
.lucy-vis::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 62% 38%, transparent 42%, rgba(10,193,125,.28) 100%);
}
.lucy-ping{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:1px solid rgba(102,255,204,.5);
  animation:ping 3s ease-out infinite;
}
.lucy-ping.p2{animation-delay:1.5s}
@keyframes ping{0%{transform:scale(1); opacity:.8} 100%{transform:scale(1.9); opacity:0}}
.lucy-orbit{position:absolute; inset:-7px; pointer-events:none; animation:orbit 7s linear infinite}
.lucy-orbit::before{
  content:''; position:absolute; top:-2px; left:50%; margin-left:-2.5px;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold-300); box-shadow:0 0 8px rgba(240,206,106,.9);
}
.lucy-orbit.o2{inset:-13px; animation-duration:11s; animation-direction:reverse}
.lucy-orbit.o2::before{
  width:4px; height:4px; margin-left:-2px;
  background:var(--v-glow); box-shadow:0 0 7px rgba(102,255,204,.9);
}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.07)}}
.eq{display:flex; align-items:center; gap:2px; height:24px; flex:1}
.eq i{
  flex:1; height:100%; border-radius:1px; background:var(--v-glow); opacity:.85;
  transform-origin:center; animation:eqb 1.1s ease-in-out infinite;
}
@keyframes eqb{0%,100%{transform:scaleY(.12)} 50%{transform:scaleY(.96)}}
.lucy-line{margin-top:11px; font-size:.66rem; line-height:1.5; color:var(--txt-dim); min-height:3em}
.lucy-line::after{content:'▌'; color:var(--v-glow); animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ═══ CAPA 3 · LOGIN — florece desde el centro a los 3 s ═══ */
.card-slot{
  position:absolute; inset:0; z-index:15;
  display:flex; align-items:center; justify-content:center;
  padding:100px 20px 60px;
}
.card{
  position:relative; width:min(392px,100%); border-radius:22px;
  opacity:0; animation:cardBloom .75s cubic-bezier(.16,1,.3,1) var(--t-card) both;
}
@keyframes cardBloom{
  0%  {opacity:0; transform:scale(.55)}
  55% {opacity:1; transform:scale(1.035)}
  100%{opacity:1; transform:none}
}
/* dos anillos de energía que se expanden desde el centro con la tarjeta */
.ghost{position:absolute; inset:0; border-radius:22px; z-index:1; pointer-events:none; opacity:0}
.ghost.g1{border:1.5px solid rgba(228,179,19,.9); animation:ringOut .8s cubic-bezier(.2,.7,.3,1) var(--t-card) both}
.ghost.g2{border:1.5px solid rgba(102,255,204,.8); animation:ringOut .9s cubic-bezier(.2,.7,.3,1) calc(var(--t-card) + .08s) both}
@keyframes ringOut{
  0%  {opacity:.85; transform:scale(.55)}
  60% {opacity:.35; transform:scale(1.1)}
  100%{opacity:0;  transform:scale(1.18)}
}

/* borde dorado: anillo con máscara (el centro queda recortado para
   que el backdrop-filter del cristal no difumine el degradado) */
@property --ang{syntax:'<angle>'; inherits:false; initial-value:0deg}
.card::before{
  content:''; position:absolute; inset:0; border-radius:22px; z-index:3;
  padding:1.5px; pointer-events:none;
  background:
    conic-gradient(from var(--ang),
      transparent 0deg, rgba(247,228,168,.98) 24deg, rgba(102,255,204,.9) 50deg,
      transparent 94deg, transparent 360deg),
    linear-gradient(170deg, rgba(228,179,19,.92) 0%, rgba(156,119,8,.45) 42%, rgba(228,179,19,.78) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:sweep 7s linear infinite;
}
@keyframes sweep{to{--ang:360deg}}
@supports not ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .card::before{
    background:none; border:1.5px solid var(--gold-500); padding:0; animation:none;
    box-shadow:inset 0 0 0 1px rgba(102,255,204,.18);
  }
}
.card::after{
  content:''; position:absolute; inset:-12px; border-radius:32px; z-index:0;
  background:radial-gradient(58% 55% at 50% 0%, rgba(228,179,19,.34), transparent 72%);
  filter:blur(16px); pointer-events:none;
}

.card-inner{
  position:relative; z-index:2; border-radius:20.5px; padding:34px 32px 28px;
  background:linear-gradient(168deg, rgba(15,111,96,.32), rgba(3,38,33,.84) 52%, rgba(1,16,14,.91));
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
          backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.35), 0 40px 80px -40px rgba(0,0,0,.95);
}

.card-logo{text-align:center; margin-bottom:24px}
.card-logo .l1{font-size:1.75rem; line-height:1.08; letter-spacing:.005em}
.card-logo .l1 b{font-weight:800; color:#fff}
.card-logo .l1 i{font-style:normal; font-weight:300; color:var(--gold-300)}
.card-logo .l2{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--txt-faint); margin-top:10px;
}

/* mensajes de error de validación / sesión */
.form-alert{
  margin-bottom:16px; padding:11px 14px; border-radius:11px; text-align:left;
  font-size:.83rem; line-height:1.4; color:#FFD9D2;
  background:rgba(231,76,60,.16); border:1px solid rgba(231,76,60,.4);
}

.field{position:relative; margin-bottom:12px}
.field input{
  width:100%; border-radius:12px; padding:13px 15px 13px 43px;
  background:rgba(255,255,255,.06); border:1px solid rgba(234,255,248,.17);
  color:var(--txt); font-family:var(--stack); font-size:.93rem; outline:none;
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.field input::placeholder{color:var(--txt-faint)}
.field input:focus{border-color:var(--v-accent); background:rgba(255,255,255,.09); box-shadow:0 0 0 3px rgba(10,193,125,.20)}
.field input:focus ~ svg{stroke:var(--v-glow)}
.field svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; fill:none; stroke:rgba(234,255,248,.5); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .22s ease; pointer-events:none;
}

.row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 4px; font-size:.8rem}
.row label{display:flex; align-items:center; gap:9px; color:var(--txt-dim); cursor:pointer; user-select:none}
.row input[type=checkbox]{accent-color:var(--v-accent); width:15px; height:15px; cursor:pointer}
.row a{color:var(--gold-300); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.row a:hover{color:var(--gold-100)}

.cta{
  width:100%; margin-top:18px; border:0; border-radius:13px; padding:15px;
  font-family:var(--stack); font-weight:700; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase;
  color:#2A1D00; cursor:pointer; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--gold-100) 0%, var(--gold-300) 36%, var(--gold-500) 100%);
  box-shadow:0 12px 28px -14px rgba(228,179,19,.95), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
}
.cta:hover{transform:translateY(-1.5px); box-shadow:0 18px 34px -14px rgba(228,179,19,1), inset 0 1px 0 rgba(255,255,255,.55)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:2px solid var(--v-glow); outline-offset:3px}
.cta::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  animation:sheen 4.4s ease-in-out infinite; pointer-events:none;
}
@keyframes sheen{0%,66%{transform:translateX(-140%)} 100%{transform:translateX(440%)}}

.card-foot{margin-top:18px; text-align:center; font-size:.8rem; color:var(--txt-dim)}
.card-foot a{color:var(--gold-300); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.card-foot a:hover{color:var(--gold-100)}

/* CTA como enlace (pantallas sin formulario, p.ej. home) */
a.cta{display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none}
a.cta svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; flex:none}

/* segunda acción, visualmente subordinada a la CTA dorada principal */
.cta.admin{
  margin-top:12px;
  background:rgba(108,92,231,.14);
  color:#E4DEFF;
  box-shadow:none; text-transform:none; font-weight:600;
  border:1px solid rgba(108,92,231,.4);
}
.cta.admin:hover{background:rgba(108,92,231,.24); box-shadow:0 10px 24px -16px rgba(108,92,231,.6); transform:translateY(-1.5px)}
.cta.admin::after{display:none}

/* ═══ PIE + SALTAR ════════════════════════════════════════ */
.foot{
  position:absolute; left:0; right:0; bottom:0; z-index:18;
  display:flex; justify-content:center; gap:14px; padding:20px;
  font-size:.74rem; color:var(--txt-faint); opacity:0;
  /* entra cuando el botón «Saltar intro» (mismo sitio) ya se ha ido */
  animation:hudIn .9s ease 5s both;
}
.foot a{color:var(--txt-dim); text-decoration:none; pointer-events:auto}
.foot a:hover{color:var(--v-glow)}
.foot span{opacity:.4}

.skip{
  position:absolute; left:50%; transform:translateX(-50%); bottom:26px; z-index:25;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-dim); background:rgba(1,16,14,.55); border:1px solid rgba(234,255,248,.22);
  border-radius:999px; padding:8px 16px; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:color .2s ease, border-color .2s ease;
  opacity:0; animation:skipWindow 4.8s ease both;
}
@keyframes skipWindow{
  0%{opacity:0; pointer-events:none} 8%{opacity:1; pointer-events:auto}
  86%{opacity:1; pointer-events:auto} 100%{opacity:0; pointer-events:none}
}
.skip:hover{color:var(--txt); border-color:var(--v-glow)}
.skip:focus-visible{outline:2px solid var(--gold-300); outline-offset:3px}

/* ═══ SALTAR INTRO — forzado por JS, opcional ═════════════
   Un retardo negativo enorme empuja cada animación finita más allá
   de su duración: con fill-mode "both" queda anclada en el fotograma
   final al instante. Los bucles infinitos (flotación, ecualizador,
   barrido del borde…) no se tocan — viven en otros selectores. */
.skip-now .v-blackout,
.skip-now .grid-layer,
.skip-now .brand,
.skip-now .wm,
.skip-now .wm span,
.skip-now .hud,
.skip-now #introVideo,
.skip-now .card,
.skip-now .ghost,
.skip-now .foot,
.skip-now .skip{
  animation-delay:-999s !important;
  animation-duration:1ms !important;
}

/* ═══ RESPONSIVE ══════════════════════════════════════════ */
/* abajo a la derecha, el módulo de Lucy no choca con la tarjeta
   centrada hasta ~908px: puede vivir hasta el corte global de 900 */
@media (max-width:1180px){ .hud .hud-float{width:200px} }
@media (max-width:900px){ .hud{display:none} }
@media (max-width:767px){
  .brand{top:16px; left:18px}
  .brand img{height:44px}
  .wm{top:24px; right:18px; font-size:17px}
  .card-slot{padding:84px 18px 74px}
  .card-inner{padding:28px 24px 24px}
}
@media (max-height:640px){ .card-slot{padding-top:76px} .card-logo{margin-bottom:18px} }