/**
 * ============================================================================
 * StreamLiveChat — Sistema de Diseño Central & Tokens Permanentes (theme.css)
 * ============================================================================
 * Paleta Oficial Permanente:
 * - Canvas: #07090E | Superficie: #0F131D | Cards: rgba(18, 24, 38, 0.72)
 * - Acento Primario: Electric Indigo (#6366F1 / #4F46E5)
 * - Acento Secundario: Cyber Cyan (#06B6D4 / #00F2FE)
 * - Tríada Tipográfica:
 *     1. Display & Titulares: 'Outfit', sans-serif
 *     2. Cuerpo & Interfaz: 'Inter', sans-serif
 *     3. Métricas & Badges: 'JetBrains Mono', monospace
 * - Plataformas:
 *     Twitch (#9146FF) | Kick (#53FC18) | YouTube (#FF0033) | TikTok (#00F2FE) | Facebook (#1877F2) | Instagram (#E1306C)
 * ============================================================================
 */

:root {
  /* --- 1. JERARQUÍA DE FONDOS (CANVAS & SURFACES) --- */
  --bg-canvas: #07090e;
  --bg-base: #07090e;
  --bg-surface: #0f131d;
  --bg-primary: #0f131d;
  --bg-card: rgba(18, 24, 38, 0.72);
  --bg-card-hover: rgba(26, 34, 52, 0.85);
  --bg-elevated: #192030;
  --bg-secondary: rgba(18, 24, 38, 0.85);
  --bg-tertiary: rgba(25, 32, 48, 0.65);
  --bg-input: #0b0e16;

  /* --- 2. BORDES Y RESPLANDORES --- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-highlight: rgba(255, 255, 255, 0.18);
  --border-focus: #6366f1;
  --border-glow: rgba(99, 102, 241, 0.45);

  /* --- 3. TIPOGRAFÍA & CONTRASTE (WCAG AAA) --- */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-white: #ffffff;

  /* --- 4. ACENTOS Y MARCA STREAMLIVECHAT --- */
  --accent-primary: #6366f1;
  --accent-primary-hover: #4f46e5;
  --accent-primary-glow: rgba(99, 102, 241, 0.35);
  --accent-subtle: rgba(99, 102, 241, 0.12);
  --accent-border: rgba(99, 102, 241, 0.28);

  --accent-secondary: #06b6d4;
  --accent-secondary-glow: rgba(6, 182, 212, 0.35);

  --accent-purple: #8b5cf6;
  --accent-purple-glow: rgba(139, 92, 246, 0.4);

  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --accent-gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
  --brand-stream-color: #6366f1;
  --brand-live-color: #06b6d4;
  --brand-chat-color: #a855f7;

  /* --- 5. ESTADOS DEL SISTEMA --- */
  --status-success: #10b981;
  --status-success-bg: rgba(16, 185, 129, 0.14);
  --status-success-glow: rgba(16, 185, 129, 0.4);

  --status-warning: #f59e0b;
  --status-warning-bg: rgba(245, 158, 11, 0.14);
  --status-warning-glow: rgba(245, 158, 11, 0.4);

  --status-danger: #ef4444;
  --status-danger-bg: rgba(239, 68, 68, 0.14);
  --status-danger-glow: rgba(239, 68, 68, 0.45);

  /* --- 6. IDENTIDAD DE PLATAFORMAS DE STREAMING --- */
  --platform-twitch: #9146ff;
  --twitch-color: #9146ff;
  --twitch-glow: rgba(145, 70, 255, 0.40);
  --twitch-bg: rgba(145, 70, 255, 0.14);

  --platform-kick: #53fc18;
  --kick-color: #53fc18;
  --kick-glow: rgba(83, 252, 24, 0.35);
  --kick-bg: rgba(83, 252, 24, 0.14);

  --platform-youtube: #ff0033;
  --youtube-color: #ff0033;
  --youtube-glow: rgba(255, 0, 51, 0.40);
  --youtube-bg: rgba(255, 0, 51, 0.14);

  --platform-tiktok: #00f2fe;
  --tiktok-color: #00f2fe;
  --tiktok-alt: #fe2c55;
  --tiktok-glow: rgba(0, 242, 254, 0.38);
  --tiktok-bg: rgba(0, 242, 254, 0.14);

  --platform-facebook: #1877f2;
  --facebook-color: #1877f2;
  --facebook-glow: rgba(24, 119, 242, 0.40);
  --facebook-bg: rgba(24, 119, 242, 0.14);

  --platform-instagram: #e1306c;
  --instagram-color: #e1306c;
  --instagram-alt: #f77737;
  --instagram-glow: rgba(225, 48, 108, 0.40);
  --instagram-bg: rgba(225, 48, 108, 0.14);

  /* --- 7. RADIOS Y SOMBRAS --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-neon: 0 0 24px var(--accent-primary-glow);

  --glass-blur: blur(16px);
  --glass-blur-deep: blur(24px);

  /* --- 8. TRANSICIONES SUAVES --- */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.15s var(--ease-smooth);
  --transition-normal: 0.25s var(--ease-smooth);
  --transition-slow: 0.4s var(--ease-smooth);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-ui);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tipografía Utility Classes */
.font-display { font-family: var(--font-display) !important; }
.font-ui { font-family: var(--font-ui) !important; }
.font-mono { font-family: var(--font-mono) !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Focus accesible con resplandor neón */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 12px var(--accent-primary-glow);
}

/* 1. Tarjetas con Glassmorphism */
.stream-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.stream-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-highlight);
  box-shadow: var(--shadow-md);
}

.stream-card-elevated {
  background: var(--bg-elevated);
  backdrop-filter: var(--glass-blur-deep);
  -webkit-backdrop-filter: var(--glass-blur-deep);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* 2. Botones del Sistema */
.btn-stream {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all var(--transition-normal);
}

.btn-stream:hover {
  transform: translateY(-1px);
}

.btn-stream:active {
  transform: translateY(1px) scale(0.98);
}

.btn-stream-primary {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px var(--accent-primary-glow);
}

.btn-stream-primary:hover {
  background: var(--accent-primary-hover);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.55);
}

.btn-stream-gradient {
  background: var(--accent-gradient);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-stream-gradient:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 22px rgba(99, 102, 241, 0.6);
}

.btn-stream-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-stream-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-highlight);
}

.btn-stream-panic {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.4) 100%);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.btn-stream-panic:hover {
  background: rgba(239, 68, 68, 0.55);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.65);
}

/* 3. Badges de Plataforma & Métricas */
.badge-stream {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge-twitch {
  background: var(--twitch-bg);
  color: #c084fc;
  border: 1px solid rgba(145, 70, 255, 0.4);
}

.badge-kick {
  background: var(--kick-bg);
  color: #86efac;
  border: 1px solid rgba(83, 252, 24, 0.4);
}

.badge-youtube {
  background: var(--youtube-bg);
  color: #fca5a5;
  border: 1px solid rgba(255, 0, 51, 0.4);
}

.badge-tiktok {
  background: var(--tiktok-bg);
  color: #67e8f9;
  border: 1px solid rgba(0, 242, 254, 0.4);
}

.badge-facebook {
  background: var(--facebook-bg);
  color: #60a5fa;
  border: 1px solid rgba(24, 119, 242, 0.4);
}

.badge-instagram {
  background: var(--instagram-bg);
  color: #f472b6;
  border: 1px solid rgba(225, 48, 108, 0.4);
}

/* 4. Indicadores de Pulso (Live Radar Pulse) */
.live-pulse {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-success);
  box-shadow: 0 0 10px var(--status-success-glow);
}

.live-pulse::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--status-success);
  opacity: 0.8;
  animation: radarWave 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes radarWave {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* 5. Inputs y Formularios */
.input-stream {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  padding: 10px 14px;
  transition: all var(--transition-normal);
}

.input-stream:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-primary-glow);
  background: #0f131d;
}

.input-stream::placeholder {
  color: var(--text-muted);
}

/* 6. Barra de Scroll Cyberpunk */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: var(--bg-canvas);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.45);
}

/* 7. Toasts de Notificación en Vivo */
.stream-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.stream-toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 18px;
  background: rgba(15, 19, 29, 0.95);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toastSlideIn 0.3s var(--ease-smooth) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.stream-toast.success { border-left: 4px solid var(--status-success); }
.stream-toast.error { border-left: 4px solid var(--status-danger); }
.stream-toast.info { border-left: 4px solid var(--accent-primary); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- 10. ICONOGRAFÍA VECTORIAL SVG & ATRIBUTOS GLOBALES --- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Global SVG Icon System */
svg.icon, .icon, svg.icon-xs, svg.icon-sm, svg.icon-md, svg.icon-lg, svg.icon-xl {
  display: inline-block;
  vertical-align: -0.15em;
  line-height: 1;
  flex-shrink: 0;
}

svg.icon, .icon {
  width: 1.1em;
  height: 1.1em;
}

svg.icon-xs, .icon-xs {
  width: 0.85em !important;
  height: 0.85em !important;
}

svg.icon-sm, .icon-sm {
  width: 1em !important;
  height: 1em !important;
}

svg.icon-md, .icon-md {
  width: 1.25em !important;
  height: 1.25em !important;
}

svg.icon-lg, .icon-lg {
  width: 1.6em !important;
  height: 1.6em !important;
}

svg.icon-xl, .icon-xl {
  width: 2.2em !important;
  height: 2.2em !important;
}

.icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.icon-twitch { color: var(--platform-twitch); }
.icon-kick { color: var(--platform-kick); }
.icon-youtube { color: var(--platform-youtube); }
.icon-tiktok { color: var(--platform-tiktok); }
.icon-facebook { color: var(--platform-facebook); }
.icon-instagram { color: var(--platform-instagram); }

/* Atajos de teclado elegantes (<kbd>) */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.03em;
}