/* Custom styles complementarios a Tailwind */
* { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #475569; }

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Animaciones */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.dot-active { animation: pulse-dot 2s ease-in-out infinite; }

/* Toast */
.toast-enter-active, .toast-leave-active { transition: all 0.3s; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(20px); }

/* Login moderno */
.login-bg {
  background:
    radial-gradient(ellipse at top, rgba(14, 116, 144, 0.25), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(99, 102, 241, 0.15), transparent 60%),
    #020617;
}

@keyframes login-fade-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card { animation: login-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes login-logo-in {
  0% { opacity: 0; transform: scale(0.6) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.login-logo { animation: login-logo-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes login-ring {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}
.login-logo-ring {
  border: 2px solid rgba(34, 211, 238, 0.6);
  animation: login-ring 2.4s ease-out infinite;
}

.login-error { animation: login-fade-in 0.25s ease-out; }
.login-submit:not(:disabled):hover { transform: translateY(-1px); }
.login-submit:not(:disabled):active { transform: translateY(0); }

/* Borde superior animado */
@keyframes login-border-sweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.login-border-glow {
  background-size: 200% 100%;
  animation: login-border-sweep 4s linear infinite;
}

/* Shimmer del botón */
@keyframes login-shimmer-move {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.login-shimmer {
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  animation: login-shimmer-move 2.5s ease-in-out infinite;
}

/* Grid de puntos tipo tech */
@keyframes login-grid-pan {
  from { background-position: 0 0; }
  to { background-position: 32px 32px; }
}
.login-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.18) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  animation: login-grid-pan 18s linear infinite;
  opacity: 0.6;
}

/* Scanline sutil */
@keyframes login-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.login-scanline {
  background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.06) 50%, transparent 100%);
  animation: login-scan 7s linear infinite;
  pointer-events: none;
}

/* Líneas de flujo (data streams) */
@keyframes login-stream-flow {
  0% { transform: translateX(-110%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(220%); opacity: 0; }
}
.login-stream {
  position: absolute;
  height: 1px;
  width: 35%;
  background: linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0) 0%, rgba(34, 211, 238, 0.9) 50%, rgba(34, 211, 238, 0) 100%);
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.6));
  animation: login-stream-flow 4s linear infinite;
}
.login-stream-1 { top: 12%; left: -50%; animation-duration: 5s;  animation-delay: 0s;   width: 30%; }
.login-stream-2 { top: 26%; left: -60%; animation-duration: 6.5s; animation-delay: -1.2s; width: 45%; background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.9), transparent); filter: drop-shadow(0 0 4px rgba(129,140,248,0.5)); }
.login-stream-3 { top: 44%; left: -40%; animation-duration: 4.5s; animation-delay: -2.4s; width: 25%; }
.login-stream-4 { top: 62%; left: -55%; animation-duration: 7s;   animation-delay: -0.8s; width: 50%; background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.85), transparent); filter: drop-shadow(0 0 4px rgba(167,139,250,0.5)); }
.login-stream-5 { top: 78%; left: -45%; animation-duration: 5.5s; animation-delay: -3s;   width: 35%; }
.login-stream-6 { top: 90%; left: -60%; animation-duration: 6s;   animation-delay: -1.8s; width: 40%; background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.8), transparent); filter: drop-shadow(0 0 4px rgba(52,211,153,0.5)); }

/* Partículas ascendentes tipo data packets */
@keyframes login-particle-rise {
  0%   { transform: translateY(110vh) translateX(0);    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(20px); opacity: 0; }
}
.login-particle {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  animation-name: login-particle-rise;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* Orbes pulsantes */
@keyframes login-orb-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, -30px); }
}
@keyframes login-orb-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-50px, 40px); }
}
@keyframes login-orb-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.login-orb { animation: login-orb-pulse 6s ease-in-out infinite; }
.login-orb-a { animation: login-orb-pulse 7s ease-in-out infinite, login-orb-drift-a 14s ease-in-out infinite; }
.login-orb-b { animation: login-orb-pulse 8s ease-in-out infinite, login-orb-drift-b 16s ease-in-out infinite; }
.login-orb-c { animation: login-orb-pulse 9s ease-in-out infinite; }