/* ==========================================
  PALETA DE COLORES Y TOKENS BASE
========================================== */
:root {
  --voz-yellow: #f0ad4e;
  --voz-yellow-hover: #d69027;
  --voz-yellow-press: #c18d1f;
  --voz-light: #f4f7f9;
  --voz-dark: #0b0f1a;
  --voz-navy: #161e35;
  --voz-cyan: #00b4ff;
  --bg-gradient: linear-gradient(145deg, #161e35 0%, #0b0f1a 100%);

  /* Colores de estado */
  --voz-success: #28a745;
  --voz-danger: #dc3545;
  --voz-warning: #ffc107;
  --voz-info: #17a2b8;
  --voz-danger-hover: #bb2d3b;

  /* Colores con opacidad (para rgba) */
  --voz-navy-rgb: 30, 42, 74;
  --voz-cyan-rgb: 0, 156, 217;
  --voz-yellow-rgb: 240, 173, 78;
  --voz-danger-rgb: 220, 53, 69;
  --voz-cyan-deep: #007ab8;
  --voz-cyan-soft: #0088bb;

  /* Espaciado */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Tamaños de fuente */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  /* Pesos de fuente */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Transiciones  */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --motion-interactive-duration: 220ms;
  --motion-interactive-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Sombras con múltiples capas */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.08),
  0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.12),
  0 8px 24px -4px rgba(0, 156, 217, 0.08);
  --shadow-lg: 0 8px 32px -8px rgba(0, 0, 0, 0.16),
  0 12px 48px -8px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 48px -16px rgba(0, 0, 0, 0.2),
  0 24px 64px -16px rgba(0, 0, 0, 0.12);

  /* Sombras de color para hover states */
  --shadow-cyan: 0 8px 24px -8px rgba(0, 156, 217, 0.3),
  0 12px 36px -8px rgba(0, 156, 217, 0.15);
  --shadow-yellow: 0 8px 24px -8px rgba(240, 173, 78, 0.3),
  0 12px 36px -8px rgba(240, 173, 78, 0.15);
  --shadow-navy: 0 8px 24px -8px rgba(30, 42, 74, 0.25),
  0 12px 36px -8px rgba(30, 42, 74, 0.12);

  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Duraciones de animación */
  --duration-instant: 0.1s;
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.8s;
  --duration-slowest: 1.5s;

  /* Blur y backdrop filters */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;

  /* Backgrounds */
  --color-bg-page: var(--voz-light);
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-soft: #f8f9fa;

  /* Textos */
  --color-text-primary: #333333;
  --color-text-secondary: #6c757d;
  --color-text-inverse: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --color-gray-100-rgb: 240, 240, 240;
  --color-gray-150-rgb: 232, 232, 232;
  --color-gray-200-rgb: 233, 236, 239;
  --color-bg-deep-rgb: 15, 22, 41;
  --color-bg-darker-rgb: 22, 33, 62;
  --color-skeleton-dark-rgb: 30, 30, 46;
  --color-skeleton-dark-mid-rgb: 40, 40, 56;

  /* Bordes */
  --color-border-soft: rgba(0, 0, 0, 0.05);
  --color-border-strong: rgba(0, 0, 0, 0.15);

  /* Estados */
  --color-focus: var(--voz-cyan);

  --nav-bg-glass: rgba(30, 42, 74, 0.9);
  --nav-bg-glass-scrolled: rgba(30, 42, 74, 0.95);
  --nav-link-active-bg: rgba(240, 173, 78, 0.1);

  --hero-nosotros-gradient:
  linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.7) 100%);
  --hero-social-gradient:
  linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.7) 100%);
  --hero-programacion-gradient:
  linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.7) 100%);
  --hero-locutores-gradient:
  linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.7) 100%);

  --timeline-border: #eee;

  --hero-title-color: #0f1c3f;
  --hero-text-muted: rgba(8, 18, 40, 0.82);
  --footer-text: rgba(255, 255, 255, 0.85);
  --footer-text-subtle: rgba(255, 255, 255, 0.75);
  --hero-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(235, 242, 255, 0.45) 100%);
  --hero-overlay-tint-rgb: 0, 156, 217;
  --hero-overlay-tint-opacity: 0.12;
  --hero-overlay-shade-opacity: 0.22;
}

/* ==========================================
  VARIANTES DE PALETA (usar data-palette en <html>)
  Ejemplo: <html lang="es" data-palette="marina">
========================================== */
[data-palette="marina"] {
  --voz-navy: #14213d;
  --voz-navy-rgb: 20, 33, 61;
  --voz-cyan: #00a6fb;
  --voz-cyan-rgb: 0, 166, 251;
  --voz-yellow: #f6c453;
  --voz-yellow-hover: #d9a83c;
  --voz-yellow-press: #c18d1f;
  --voz-cyan-deep: #007ab8;
  --voz-cyan-soft: #0088bb;
  --bg-gradient: linear-gradient(145deg, #14213d 0%, #0b0f1a 100%);
  --hero-overlay-tint-rgb: 0, 166, 251;
  --nav-bg-glass: rgba(20, 33, 61, 0.9);
  --nav-bg-glass-scrolled: rgba(20, 33, 61, 0.95);
}

[data-palette="calida"] {
  --voz-navy: #2b1b2f;
  --voz-navy-rgb: 43, 27, 47;
  --voz-cyan: #ff7a59;
  --voz-cyan-rgb: 255, 122, 89;
  --voz-yellow: #f9c74f;
  --voz-yellow-hover: #e1ae3c;
  --voz-yellow-press: #c89431;
  --voz-cyan-deep: #d85f3f;
  --voz-cyan-soft: #e26948;
  --bg-gradient: linear-gradient(145deg, #2b1b2f 0%, #120a14 100%);
  --hero-overlay-tint-rgb: 255, 122, 89;
  --nav-bg-glass: rgba(43, 27, 47, 0.9);
  --nav-bg-glass-scrolled: rgba(43, 27, 47, 0.95);
}

[data-palette="cobalto"] {
  --voz-navy: #0f1c3f;
  --voz-navy-rgb: 15, 28, 63;
  --voz-cyan: #2ec4ff;
  --voz-cyan-rgb: 46, 196, 255;
  --voz-yellow: #ffca3a;
  --voz-yellow-hover: #e0ac24;
  --voz-yellow-press: #c8941e;
  --voz-cyan-deep: #1d96d6;
  --voz-cyan-soft: #229edc;
  --bg-gradient: linear-gradient(145deg, #0f1c3f 0%, #070b1a 100%);
  --hero-overlay-tint-rgb: 46, 196, 255;
  --nav-bg-glass: rgba(15, 28, 63, 0.9);
  --nav-bg-glass-scrolled: rgba(15, 28, 63, 0.95);
}

[data-palette="menta"] {
  --voz-navy: #12343b;
  --voz-navy-rgb: 18, 52, 59;
  --voz-cyan: #34d1bf;
  --voz-cyan-rgb: 52, 209, 191;
  --voz-yellow: #f3d17a;
  --voz-yellow-hover: #d4b45c;
  --voz-yellow-press: #b99a48;
  --voz-cyan-deep: #249785;
  --voz-cyan-soft: #2aa390;
  --bg-gradient: linear-gradient(145deg, #12343b 0%, #0a171a 100%);
  --hero-overlay-tint-rgb: 52, 209, 191;
  --nav-bg-glass: rgba(18, 52, 59, 0.9);
  --nav-bg-glass-scrolled: rgba(18, 52, 59, 0.95);
}

[data-palette="grafito"] {
  --voz-navy: #1a1d29;
  --voz-navy-rgb: 26, 29, 41;
  --voz-cyan: #4ea8ff;
  --voz-cyan-rgb: 78, 168, 255;
  --voz-yellow: #f2b45a;
  --voz-yellow-hover: #d89a46;
  --voz-yellow-press: #bc8539;
  --voz-cyan-deep: #3d87cc;
  --voz-cyan-soft: #478fd4;
  --bg-gradient: linear-gradient(145deg, #1a1d29 0%, #0b0f1a 100%);
  --hero-overlay-tint-rgb: 78, 168, 255;
  --nav-bg-glass: rgba(26, 29, 41, 0.9);
  --nav-bg-glass-scrolled: rgba(26, 29, 41, 0.95);
}

/* ==========================================
  MODO OSCURO
========================================== */
[data-theme="dark"] {
  --voz-light: #0f0f1e;
  --voz-dark: #080813;
  --voz-navy: #2a3a5a;
  --card-bg: #16213e;
  --card-text: #a0a2a6;
  --text-muted: #9aa0a6;

  /* Sombras ajustadas para modo oscuro */
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.4),
  0 4px 12px -2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.5),
  0 8px 24px -4px rgba(0, 156, 217, 0.15);
  --shadow-lg: 0 8px 32px -8px rgba(0, 0, 0, 0.6),
  0 12px 48px -8px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 48px -16px rgba(0, 0, 0, 0.7),
  0 24px 64px -16px rgba(0, 0, 0, 0.5);

  /* Sombras de color más suaves en dark mode */
  --shadow-cyan: 0 8px 24px -8px rgba(0, 156, 217, 0.4),
  0 12px 36px -8px rgba(0, 156, 217, 0.2);
  --shadow-yellow: 0 8px 24px -8px rgba(240, 173, 78, 0.4),
  0 12px 36px -8px rgba(240, 173, 78, 0.2);

  --color-bg-page: var(--voz-dark);
  --color-bg-surface: var(--card-bg);
  --color-bg-soft: #020617;
  --color-bg-elevated: #1a2545;

  --color-text-primary: var(--card-text);
  --color-text-secondary: var(--text-muted);
  --color-text-inverse: #ffffff;

  --color-border-soft: rgba(255, 255, 255, 0.05);
  --color-border-strong: rgba(255, 255, 255, 0.15);

  --color-focus: var(--voz-cyan);
  --nav-bg-glass-scrolled: rgba(8, 8, 19, 0.95);

  --hero-nosotros-gradient:
  linear-gradient(135deg, rgba(8, 8, 19, 0.98) 0%, rgba(0, 156, 217, 0.6) 100%);
  --hero-social-gradient:
  linear-gradient(135deg, rgba(8, 8, 19, 0.98) 0%, rgba(0, 156, 217, 0.6) 100%);
  --hero-programacion-gradient:
  linear-gradient(135deg, rgba(8, 8, 19, 0.98) 0%, rgba(0, 156, 217, 0.6) 100%);
  --hero-locutores-gradient:
  linear-gradient(135deg, rgba(8, 8, 19, 0.98) 0%, rgba(0, 156, 217, 0.6) 100%);

  --timeline-border: rgba(0, 156, 217, 0.3);
  --hero-title-color: #ffffff;
  --hero-text-muted: rgba(255, 255, 255, 0.98);
  --hero-overlay: linear-gradient(135deg, rgba(5, 8, 18, 0.94) 0%, rgba(0, 156, 217, 0.68) 100%);
  --hero-overlay-tint-opacity: 0.2;
  --hero-overlay-shade-opacity: 0.34;
}

/* Ajustes suaves por paleta en modo oscuro */
[data-theme="dark"][data-palette="marina"] {
  --voz-navy: #22345f;
}

[data-theme="dark"][data-palette="calida"] {
  --voz-navy: #3a2140;
}

[data-theme="dark"][data-palette="cobalto"] {
  --voz-navy: #1c2a5c;
}

[data-theme="dark"][data-palette="menta"] {
  --voz-navy: #1b4a52;
}

[data-theme="dark"][data-palette="grafito"] {
  --voz-navy: #24283a;
}

@media (prefers-contrast: high) {
  :root {
    --voz-navy: #0a1428;
    --voz-cyan: #0077aa;
  }
}