/* =========================================================
   NOCTEBOOK — Login cyberpunk / NOC HUD
   Archivo nuevo (no toca styles.css)
   ========================================================= */

/* Contenedor raíz: ocupa toda la pantalla y tapa la app,
   pero deja ver su propio canvas de fondo */
#login.cy-root{
  display:block;
  min-height:100vh;
  background:#030712;
  overflow-x:hidden;
  overflow-y:auto;
  font-family:'Inter',system-ui,sans-serif;
  color:#f1f5f9;
  -webkit-font-smoothing:antialiased;
}
#login.cy-root *{box-sizing:border-box}
#login.cy-root input::placeholder{color:#64748b; opacity:1}
#login.cy-root input:-webkit-autofill{-webkit-text-fill-color:#fff; box-shadow:0 0 0 1000px #0b1220 inset}

.font-tech{font-family:'Rajdhani','Inter',sans-serif}

/* Glassmorphism Ultra Premium */
.glass-card{
  background:rgba(15,23,42,.65);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(56,189,248,.2);
  box-shadow:0 0 50px rgba(14,165,233,.15), inset 0 0 20px rgba(168,85,247,.1);
}

/* Neon Glow en los campos */
.neon-border-glow{transition:all .3s cubic-bezier(.4,0,.2,1)}
.neon-border-glow:focus-within{
  border-color:#38bdf8;
  box-shadow:0 0 20px rgba(56,189,248,.5), inset 0 0 10px rgba(56,189,248,.2);
}

/* Logo flotante */
@keyframes floatLogo{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-8px) rotate(1deg)}
}
.animate-float{animation:floatLogo 5s ease-in-out infinite}

/* Glow pulsante */
@keyframes cyberPulse{
  0%,100%{opacity:.8;filter:drop-shadow(0 0 10px rgba(56,189,248,.8))}
  50%{opacity:1;filter:drop-shadow(0 0 25px rgba(168,85,247,.9))}
}
.animate-cyber-glow{animation:cyberPulse 3s infinite}

/* Botón shimmer */
.btn-shimmer{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#2563eb 100%);
  background-size:200% 200%;
  transition:all .4s ease;
}
.btn-shimmer:hover{
  background-position:100% 100%;
  box-shadow:0 0 30px rgba(124,58,237,.6), 0 0 15px rgba(37,99,235,.8);
  transform:translateY(-2px);
}
.btn-shimmer::after{
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:linear-gradient(60deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:rotate(30deg) translateY(-100%);
  transition:transform .8s ease;
}
.btn-shimmer:hover::after{transform:rotate(30deg) translateY(100%)}
.btn-shimmer[disabled]{opacity:.8; cursor:wait; transform:none !important; box-shadow:none !important}
.btn-shimmer[disabled]::after{display:none}

/* Scrollbar */
#login.cy-root::-webkit-scrollbar{width:6px}
#login.cy-root::-webkit-scrollbar-track{background:rgba(15,23,42,.5)}
#login.cy-root::-webkit-scrollbar-thumb{background:rgba(56,189,248,.5);border-radius:3px}

/* Mensajes del formulario (#lmsg) */
#lmsg{min-height:16px; margin:0; text-align:center;
  font-family:'Rajdhani','Inter',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.06em; color:#7dd3fc}
#lmsg:empty{min-height:0}
#lmsg.err{color:#f87171}
#lmsg.hint{display:inline-block; padding:8px 14px; border-radius:10px;
  background:rgba(56,189,248,.10); border:1px solid rgba(56,189,248,.35);
  color:#7dd3fc; box-shadow:0 0 18px rgba(56,189,248,.18)}

/* Recuerda que el canvas de fondo cubra toda la pantalla */
#noc-canvas{position:fixed; inset:0; z-index:0; pointer-events:auto}

/* Equipo de red flotando detrás de la tarjeta */
.cy-deco{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.cy-deco i{
  position:absolute; left:var(--x); top:var(--y);
  font-size:var(--s,26px);
  color:var(--c,rgba(56,189,248,.5));
  text-shadow:0 0 16px currentColor, 0 0 34px currentColor;
  opacity:.55;
  animation:cyFloat var(--t,12s) ease-in-out infinite;
  animation-delay:var(--d,0s);
}
@keyframes cyFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-7deg) scale(1); opacity:.4}
  50%    {transform:translate3d(16px,-30px,0) rotate(9deg) scale(1.08); opacity:.75}
}
@media (max-width:900px){
  .cy-deco i:nth-child(n+7){display:none}   /* menos iconos en pantallas chicas */
}

@media (max-width:640px){
  .glass-card{padding:26px 20px !important; border-radius:20px !important}
}