/*
  PANTALLA DE ENTRADA DEL PANEL (14/10/2026)

  Como la de MANGORA y TECOMSER, con el monograma id de Ivan Delgado, en
  blanco sobre negro:

    0,20 s  la i y la d se trazan por el contorno
    0,95 s  se rellenan
    1,25 s  cae el punto verde de la i
    1,35 s  IVAN DELGADO se descubre de izquierda a derecha
    2,40 s  el anillo, «Ingresando» y «Conexión cifrada»
    3,30 s  se pasa al panel

  La pone entrada.js con la clase `entrando` en el <body>, solo cuando el
  servidor ya dejó entrar.
*/
.id-entrada{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  background:radial-gradient(110% 80% at 50% 42%, #18181b 0%, #0b0b0c 62%, #050506 100%);
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility 0s linear .5s;
}
.entrando .id-entrada{ opacity:1; visibility:visible; transition:opacity .5s ease; }

/* La tarjeta de acceso se va: se achica y se desenfoca. */
.entrando .acceso__caja{ animation:id-e-salir .5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes id-e-salir{ to{ opacity:0; transform:scale(.96); filter:blur(8px) } }

.id-e-centro{ position:relative; display:flex; flex-direction:column; align-items:center; padding:0 24px; }
.id-e-halo{
  position:absolute; top:-80px; left:50%; width:760px; height:320px; margin-left:-380px;
  background:radial-gradient(closest-side, rgba(255,255,255,.08), transparent);
  opacity:0; transform:scale(.6); pointer-events:none;
}
.entrando .id-e-halo{ animation:id-e-florecer 2.4s cubic-bezier(.16,1,.3,1) .9s forwards; }

.id-e-marca{ width:min(520px, 86vw); }
.id-e-trazo{ display:block; width:100%; height:auto; overflow:visible; }

/* La i y la d: primero el contorno, luego el relleno. */
.id-e-mono{
  fill:#fff; fill-opacity:0; stroke:#fff; stroke-width:4;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.entrando .id-e-mono{
  animation:id-e-dibujar .8s cubic-bezier(.65,0,.35,1) forwards, id-e-rellenar .45s ease forwards;
  animation-delay:calc(.2s + var(--i) * .12s), calc(.95s + var(--i) * .06s);
}

/* El punto verde cae al final, con un pequeño rebote. */
.id-e-punto{ fill:#178c62; opacity:0; transform-box:fill-box; transform-origin:center; transform:translateY(-60%) scale(.4); }
.entrando .id-e-punto{ animation:id-e-caer .6s cubic-bezier(.34,1.56,.64,1) 1.25s forwards; }

/* El nombre se descubre de izquierda a derecha. */
.id-e-nombre{ fill:#fff; clip-path:inset(0 100% 0 0); }
.entrando .id-e-nombre{ animation:id-e-descubrir .9s cubic-bezier(.65,0,.35,1) 1.35s forwards; }

/* Al terminar, un brillo suave recorre el logo una vez. */
.entrando .id-e-trazo{ animation:id-e-brillo 1.6s ease 2.3s both; }

.id-e-estado{
  display:flex; flex-direction:column; align-items:center; margin-top:46px;
  opacity:0; transform:translateY(6px);
}
.entrando .id-e-estado{ animation:id-e-aparecer .7s cubic-bezier(.16,1,.3,1) 2.4s forwards; }
.id-e-circulo{
  width:44px; height:44px; margin-bottom:20px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.12) 80deg, #a1a1aa 220deg, #e4e4e7 320deg, #ffffff 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35));
  animation:id-e-girar 1.1s cubic-bezier(.5,.15,.5,.85) infinite;
}
.id-e-texto{
  margin:0; color:rgba(255,255,255,.92);
  font-size:11.5px; font-weight:600; letter-spacing:.42em; text-indent:.42em; text-transform:uppercase;
}
.id-e-puntos span{ animation:id-e-punto 1.4s ease-in-out infinite both; }
.id-e-puntos span:nth-child(2){ animation-delay:.2s; }
.id-e-puntos span:nth-child(3){ animation-delay:.4s; }
.id-e-sub{
  display:inline-flex; align-items:center; gap:7px; margin:14px 0 0;
  color:rgba(255,255,255,.5); font-size:12px; letter-spacing:.02em;
}
.id-e-sub svg{ width:14px; height:14px; fill:none; stroke:#34d399; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

@keyframes id-e-dibujar{ to{ stroke-dashoffset:0 } }
@keyframes id-e-rellenar{ to{ fill-opacity:1 } }
@keyframes id-e-caer{ to{ opacity:1; transform:none } }
@keyframes id-e-descubrir{ to{ clip-path:inset(0 0 0 0) } }
@keyframes id-e-aparecer{ to{ opacity:1; transform:none } }
@keyframes id-e-florecer{ 50%{ opacity:1 } to{ opacity:.7; transform:scale(1) } }
@keyframes id-e-girar{ to{ transform:rotate(360deg) } }
@keyframes id-e-punto{ 0%,80%,100%{ opacity:.15 } 40%{ opacity:1 } }
@keyframes id-e-brillo{
  0%{ filter:drop-shadow(0 0 0 rgba(255,255,255,0)) }
  45%{ filter:drop-shadow(0 0 10px rgba(255,255,255,.45)) }
  100%{ filter:drop-shadow(0 0 2px rgba(255,255,255,.15)) }
}

@media (prefers-reduced-motion: reduce){
  .entrando .id-e-mono{ animation:none; stroke-dashoffset:0; fill-opacity:1; }
  .entrando .id-e-punto{ animation:none; opacity:1; transform:none; }
  .entrando .id-e-nombre{ animation:none; clip-path:none; }
  .entrando .id-e-estado, .entrando .id-e-halo{ animation:none; opacity:1; transform:none; }
  .entrando .id-e-trazo, .entrando .acceso__caja{ animation:none; }
  .entrando .acceso__caja{ opacity:0; }
  .id-e-puntos span, .id-e-circulo{ animation:none; }
}