/**
 * Design Tokens — CatWatchful Reseller · Cyber Sentinel
 * Sistema de diseño unificado (sincronizado con landing page)
 *
 * Paleta: azules profundos + púrpura quirúrgico + cyan en 3 niveles + verde terminal
 * Filosofía: centro de operaciones de ciberseguridad de élite
 */

:root {
  /* ========== COLORES ========== */

  /* Primario / Cyan — acento principal del panel */
  --color-primary: #00e5ff;
  --color-primary-rgb: 0, 229, 255;
  --color-primary-hover: #33f0ff;
  --color-primary-muted: rgba(0, 229, 255, 0.2);
  --color-primary-soft: rgba(0, 229, 255, 0.1);

  /* Secundario / Azul profundo */
  --color-secondary: #0b3d6e;
  --color-secondary-rgb: 11, 61, 110;
  --color-secondary-muted: rgba(11, 61, 110, 0.7);
  --color-secondary-soft: rgba(11, 61, 110, 0.25);

  /* Estados semánticos */
  --color-success: #8BC34A;
  --color-success-rgb: 139, 195, 74;
  --color-danger: #dc3545;
  --color-danger-rgb: 220, 53, 69;
  --color-warning: #ffc107;

  /* Fondos — más profundos, con tinte azul de "pantalla" */
  --color-bg-base: #060a10;
  --color-bg-surface: #0a1018;
  --color-bg-surface-alt: #0c1320;
  --color-bg-elevated: #111b28;
  --color-bg-card: rgba(8, 14, 24, 0.85);
  --color-bg-overlay: rgba(4, 8, 16, 0.88);
  --color-bg-input: #141e2c;

  /* Bordes y superficies neutras */
  --color-border: #1a2636;
  --color-border-muted: #2a3545;
  --color-surface-muted: #182230;
  --color-surface-dark: #0a1018;

  /* Acento / Cyan — 3 niveles de intensidad */
  --color-accent-cyan: #00e5ff;
  --color-accent-cyan-rgb: 0, 229, 255;
  --color-accent-cyan-bright: #33f0ff;
  --color-accent-cyan-dim: #0099aa;
  --color-accent-cyan-muted: rgba(0, 229, 255, 0.14);
  --color-accent-cyan-soft: rgba(0, 229, 255, 0.06);

  /* Verde terminal — status "online/activo" */
  --color-terminal-active: #7ff7bd;
  --color-terminal-active-rgb: 127, 247, 189;
  --color-terminal-active-muted: rgba(127, 247, 189, 0.14);

  /* Variantes suaves */
  --color-danger-gradient: #ff5f6d;

  /* Texto — contraste mejorado para legibilidad (WCAG AA) */
  --color-text-primary: #c8d8e4;
  --color-text-light: #e8f0f6;
  --color-text-inverse: #ffffff;
  --color-text-tertiary: #7a95aa;
  --color-text-muted: #4a6478;

  /* Bordes semánticos */
  --color-border-subtle: rgba(0, 229, 255, 0.06);
  --color-border-strong: rgba(0, 229, 255, 0.14);

  /* Overlays */
  --color-overlay-light: rgba(0, 229, 255, 0.04);
  --color-overlay-dark: rgba(4, 8, 16, 0.7);

  /* Terminal (ServiceStatus) */
  --color-terminal-bg: rgba(6, 12, 20, 0.96);
  --color-terminal-green: #7ff7bd;
  --color-terminal-red: #ff5f56;
  --color-terminal-yellow: #ffbd2f;
  --color-terminal-blue: #9bc9e5;
  --color-terminal-muted: #7a95aa;
  --color-terminal-prefix: #5a8aaa;
  --color-terminal-cmd: #d8eaf5;
  --color-terminal-ready: #7ff7bd;
  --color-terminal-warn: #ffd17d;
  --color-terminal-online: #56f3ad;
  --color-terminal-offline: #5a6a78;

  /* Scrollbar */
  --color-scrollbar-track: #0c1420;
  --color-scrollbar-thumb: #1a2a3a;

  /* ========== ESPACIADO ========== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ========== BORDER RADIUS ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ========== SOMBRAS — más sutiles, profundas ========== */
  --shadow-primary: 0 0 2px var(--color-primary);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--color-border);
  --shadow-card-soft: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 0 6px rgba(0, 0, 0, 0.4);
  --shadow-glow-primary: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
  --shadow-glow-cyan: 0 0 20px rgba(0, 229, 255, 0.2);
  --shadow-elevated: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 229, 255, 0.06);

  /* ========== GRADIENTES ========== */
  --gradient-primary: linear-gradient(135deg, #00c8e0, #00e5ff 50%, #00b8d4);
  --gradient-surface: linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-surface-alt) 100%);
  --gradient-dark: linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-base) 100%);

  /* ========== TRANSICIONES ========== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ========== CLASES UTILITARIAS ========== */

/* Fondos */
.bg-card { background-color: var(--color-bg-card); }
.bg-surface-dark { background-color: var(--color-surface-dark); }
.bg-input { background-color: var(--color-bg-input); }

/* Bordes */
.grayBorder { border: 1px solid var(--color-border); }
.border-primary { border: 1px solid var(--color-primary); }
.border-secondary { border: 1px solid var(--color-secondary-muted); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-xl { border-radius: var(--radius-xl); }

/* Sombras */
.blueShadow { box-shadow: var(--shadow-card); }

/* Gradientes */
.blackGradient { background: var(--gradient-surface); }

/* Colores de texto */
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-muted { color: var(--color-text-primary); }

/* Texto de alta legibilidad */
.text-high-contrast {
  color: var(--color-text-light);
  font-weight: var(--font-medium);
}

/* Cards con diseño consistente */
.card-token {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* Inputs */
.input-token {
  background-color: var(--color-bg-input);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* Fondos translúcidos */
.fondoTransClaro {
  background-color: var(--color-primary-muted);
}
.fondoTransOscuro {
  background-color: rgba(0, 0, 0, 0.4);
}
.fondoTransVerde {
  background-color: rgba(var(--color-success-rgb), 0.2);
}
.fondoTransRojo {
  background-color: rgba(var(--color-danger-rgb), 0.4);
}
.fondoNegro {
  background-color: var(--color-bg-overlay);
}

/* Blur */
.divBlur {
  filter: blur(5px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.divBlur2 {
  filter: blur(13px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.divBlur3 {
  filter: blur(20px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* Animaciones blob */
.blob {
  background: var(--color-bg-base);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse-black 2s infinite;
  border-radius: var(--radius-md);
}

.blob.green {
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 1);
  animation: pulse-green 2s infinite;
}
.blob.blue {
  background: var(--color-secondary);
  box-shadow: 0 0 0 0 rgba(var(--color-secondary-rgb), 1);
  animation: pulse-blue 2s infinite;
}
.blob.red {
  background: var(--color-danger);
  box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb), 1);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(var(--color-primary-rgb), 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); }
}
@keyframes pulse-red {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb), 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(var(--color-danger-rgb), 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb), 0); }
}
@keyframes pulse-blue {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--color-secondary-muted); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(var(--color-secondary-rgb), 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--color-secondary-rgb), 0); }
}

/* Scanline overlay — firma visual del sistema */
.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 229, 255, 0.015) 2px,
    rgba(0, 229, 255, 0.015) 4px
  );
  z-index: 1;
}

/* Noise grain — textura cinematográfica */
.noise-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  z-index: 0;
}

/* Status pulse — para indicadores "online" */
@keyframes sentinel-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px currentColor; }
  50% { opacity: 0.5; box-shadow: 0 0 12px currentColor; }
}

.status-pulse {
  animation: sentinel-pulse 2.5s ease-in-out infinite;
}