/* ═══════════════════════════════════════════════════════════════
   1. VARIABLES Y TOKENS DE DISEÑO
   ═══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────
   1.1 Colores y superficies
   ───────────────────────────────────── */
:root {
  /* ── 1. Colores Base y RGB (Google Calendar Light) ── */
  --white: #FFFFFF;
  --white-rgb: 255, 255, 255;
  --primary: #202124;
  --primary-hover: #0F0F10;
  --accent: #2563EB;
  --accent-rgb: 37, 99, 235;
  --accent-hover: #1D4ED8;
  --secondary: #3C4043;
  --tertiary: #F0F0F0;
  --bg: #FFFFFF;
  --bg-body: #F8F9FA;
  --bg-main: #F8F9FA;

  /* ── 2. Textos y Bordes (Google Style) ── */
  --text-primary: #202124;
  --text-secondary: #5F6368;
  --text-tertiary: #80868B;
  --border: #E8E8E8;
  --border-strong: #DADCE0;

  /* ── 3. Estados Semánticos (Google Color Palette) ── */
  --success: #34A853;
  --success-rgb: 52, 168, 83;
  --success-text: #137333;
  --success-bg: rgba(52, 168, 83, 0.12);
  --whatsapp: #10B981;
  --whatsapp-rgb: 16, 185, 129;
  --warning: #D97706;
  --warning-rgb: 217, 119, 6;
  --warning-bg: rgba(217, 119, 6, 0.12);
  --danger: #EA4335;
  --danger-rgb: 234, 67, 53;
  --danger-bg: rgba(234, 67, 53, 0.12);
  --ai-primary: #0E7490;
  --ai-bg: rgba(0, 199, 190, 0.12);
  --info: #2563EB;
  --info-bg: rgba(37, 99, 235, 0.12);
  --cal-non-business-bg: rgba(0, 0, 0, 0.08);
  --cal-today-bg: rgba(37, 99, 235, 0.08);

  /* ── 4. Superficies (Google Light Theme) ── */
  --card-bg: #FFFFFF;
  --input-bg: #EDEEF0;
  --sidebar-bg: #FFFFFF;
  --item-bg: #F0F0F0;
  --item-bg-hover: #E8E8E8;
  --ev-badge-bg: rgba(37, 99, 235, 0.1);
  --ev-badge-color: #2563EB;

  /* ─────────────────────────────────────
     1.2 Tipografía
     ───────────────────────────────────── */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ─────────────────────────────────────
     1.3 Espaciado (scale)
     ───────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ─────────────────────────────────────
     1.4 Bordes y radios
     ───────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-shell: 24px;
  --radius-full: 999px;

  /* ─────────────────────────────────────
     1.5 Sombras
     ───────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);

  /* ─────────────────────────────────────
     1.6 Transiciones
     ───────────────────────────────────── */
  --transition: 0.2s ease;

  /* ─────────────────────────────────────
     1.6.1 Motion Design Tokens (Premium UI)
     ───────────────────────────────────── */
  --motion-duration-micro: 100ms;
  --motion-duration-fast:  180ms;
  --motion-duration-base:  280ms;
  --motion-duration-slow:  400ms;
  
  --motion-ease-premium: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-apple:   cubic-bezier(0.25, 1, 0.5, 1);
  --motion-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --shadow-premium-hover: 0 12px 30px -10px rgba(0, 0, 0, 0.12);
  --accent-glow-pulse:    rgba(37, 99, 235, 0.4);

  /* ─────────────────────────────────────
     1.7 Dimensiones del layout
     ───────────────────────────────────── */
  --sidebar-width: 240px;
  --header-height: 60px;
  --mobile-nav-height: 72px;
  --calendar-sidebar-width: 400px;

  /* ─────────────────────────────────────
     1.8 Z-index scale
     ───────────────────────────────────── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 150;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-calendar-header: 50;
  --z-picker: 9999;

  /* ─────────────────────────────────────
     1.9 Sistema de eventos del calendario
     (Google Calendar Light Mode)
     ───────────────────────────────────── */

  /* Eventos futuros / activos (Google Blue) */
  --ev-accent-strong: #2563EB;
  --ev-accent-border: #3B82F6;
  --ev-accent-border-active: #60A5FA;
  --ev-accent-glow: rgba(37, 99, 235, 0.15);
  --ev-accent-hover: #1D4ED8;

  /* Eventos pasados (Gris Light Mode) */
  --ev-past-bg: #F0F0F0;
  --ev-past-border: #DADCE0;
  --ev-past-text: #5F6368;
  --ev-past-text-dim: #80868B;
  --ev-past-text-dimmer: #9AA0A6;
  --ev-past-hover: #E8E8E8;
  --ev-cancelled-border: #DADCE0;
  --ev-strike: #9AA0A6;

  /* Íconos de estado — fondos translúcidos + borde sutil (sin sólidos) */
  --ev-icon-scheduled-bg: rgba(37, 99, 235, 0.10);
  --ev-icon-scheduled-color: #2563EB;
  --ev-icon-scheduled-border: rgba(37, 99, 235, 0.22);

  --ev-icon-completed-bg: rgba(52, 168, 83, 0.10);
  --ev-icon-completed-color: #166534;
  --ev-icon-completed-border: rgba(52, 168, 83, 0.22);

  --ev-icon-noshow-bg: rgba(234, 179, 8, 0.10);
  --ev-icon-noshow-color: #854D0E;
  --ev-icon-noshow-border: rgba(234, 179, 8, 0.26);

  --ev-icon-cancelled-bg: rgba(234, 67, 53, 0.10);
  --ev-icon-cancelled-color: #B91C1C;
  --ev-icon-cancelled-border: rgba(234, 67, 53, 0.22);

  /* Manual — tono neutro, texto muted (no debe superar la jerarquía del título) */
  --ev-manual-bg: rgba(0, 0, 0, 0.05);
  --ev-manual-color: #6B7280;
  --ev-manual-border: rgba(0, 0, 0, 0.12);

  /* IA — cian muy suave, texto petróleo muted */
  --ev-ai-bg: rgba(6, 182, 212, 0.08);
  --ev-ai-color: #0E7490;
  --ev-ai-border: rgba(6, 182, 212, 0.22);

  /* Íconos sobre pasado */
  --ev-on-past-bg: #E8E8E8;
  --ev-on-past-color: #80868B;

  /* Bloques de días no laborables */
  --block-future-bg: #F0F0F0;
  --block-future-stripe: #DADCE0;
  --block-future-text: #5F6368;
  --block-future-text-dim: #80868B;
  --block-future-badge-bg: rgba(37, 99, 235, 0.08);
  --block-future-badge-color: #5F6368;

  --block-past-bg: #F0F0F0;
  --block-past-stripe: #DADCE0;
  --block-past-text: #5F6368;
  --block-past-text-dim: #9AA0A6;
  --block-past-badge-bg: rgba(0, 0, 0, 0.04);
  --block-past-badge-color: #80868B;

  /* ─────────────────────────────────────
     1.10 Íconos de estado SOBRE EVENTOS AZULES
     (Agendados futuro/activo)
     ───────────────────────────────────── */
  --ev-icon-on-accent-bg: rgba(255, 255, 255, 0.22);
  --ev-icon-on-accent-color: #FFFFFF;
  --ev-icon-on-accent-border: rgba(255, 255, 255, 0.35);
  --ev-icon-on-accent-glow: rgba(255, 255, 255, 0.5);
  --ev-badge-on-accent-bg: rgba(255, 255, 255, 0.22);
  --ev-badge-on-accent-color: #FFFFFF;
  --ev-badge-on-accent-border: rgba(255, 255, 255, 0.38);

  /* --- 1.11 Nuevos fondos sólidos unificados para citas --- */
  --ev-future-bg-solid: #F3F4F6;
  --ev-past-bg-solid: #E5E7EB;
}


/* ═══════════════════════════════════════════════════════════════
   2. DARK MODE OVERRIDES (Google Calendar Dark Mode)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --primary: #fafafa;
  --primary-hover: #e4e4e7;
  --accent: #3B82F6;
  --accent-rgb: 59, 130, 246;
  --accent-hover: #60A5FA;
  --secondary: #a1a1aa;
  --tertiary: #27272a;
  --bg: #121214;
  --bg-body: #121214;
  --bg-main: #121214;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --border: #27272a;
  --border-strong: #3f3f46;
  --card-bg: #18181b;
  --input-bg: #202024;
  --sidebar-bg: #18181b;
  --item-bg: #202024;
  --item-bg-hover: #27272a;
  --success: #34D399;
  --success-rgb: 52, 211, 153;
  --success-text: #34D399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #F59E0B;
  --warning-rgb: 245, 158, 11;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --danger: #F28482;
  --danger-rgb: 242, 132, 130;
  --danger-bg: rgba(242, 132, 130, 0.12);
  --info: #3B82F6;
  --info-bg: rgba(59, 130, 246, 0.12);
  --ai-primary: #4DD0E1;
  --ai-bg: rgba(77, 208, 225, 0.12);
  --ev-badge-bg: rgba(59, 130, 246, 0.1);
  --ev-badge-color: #3B82F6;
  --cal-non-business-bg: rgba(255, 255, 255, 0.03);
  --cal-today-bg: rgba(59, 130, 246, 0.065);

  /* Eventos del calendario (Dark Mode) */
  --ev-accent-strong: #60A5FA;
  --ev-accent-border: #3B82F6;
  --ev-accent-border-active: #60A5FA;
  --ev-accent-glow: rgba(59, 130, 246, 0.3);
  --ev-accent-hover: #60A5FA;

  --ev-past-bg: #202024;
  --ev-past-border: #27272a;
  --ev-past-text: #a1a1aa;
  --ev-past-text-dim: #71717a;
  --ev-past-text-dimmer: #3f3f46;
  --ev-past-hover: #27272a;
  --ev-cancelled-border: #27272a;
  --ev-strike: #71717a;

  /* Íconos de estado dark — translúcidos + borde sutil */
  --ev-icon-scheduled-bg: rgba(96, 165, 250, 0.14);
  --ev-icon-scheduled-color: #93C5FD;
  --ev-icon-scheduled-border: rgba(96, 165, 250, 0.28);

  --ev-icon-completed-bg: rgba(74, 222, 128, 0.14);
  --ev-icon-completed-color: #86EFAC;
  --ev-icon-completed-border: rgba(74, 222, 128, 0.28);

  --ev-icon-noshow-bg: rgba(251, 191, 36, 0.14);
  --ev-icon-noshow-color: #FCD34D;
  --ev-icon-noshow-border: rgba(251, 191, 36, 0.28);

  --ev-icon-cancelled-bg: rgba(248, 113, 113, 0.14);
  --ev-icon-cancelled-color: #FCA5A5;
  --ev-icon-cancelled-border: rgba(248, 113, 113, 0.28);

  /* Manual dark — neutro muted, texto subordinado al título */
  --ev-manual-bg: rgba(255, 255, 255, 0.07);
  --ev-manual-color: #9AA0A6;
  --ev-manual-border: rgba(255, 255, 255, 0.14);

  /* IA dark — cian muy tenue, texto suave */
  --ev-ai-bg: rgba(77, 208, 225, 0.10);
  --ev-ai-color: #67C8D8;
  --ev-ai-border: rgba(77, 208, 225, 0.22);

  --ev-on-past-bg: rgba(255, 255, 255, 0.08);
  --ev-on-past-color: #9AA0A6;

  --ev-icon-on-accent-bg: rgba(255, 255, 255, 0.22);
  --ev-icon-on-accent-color: #FFFFFF;
  --ev-icon-on-accent-border: rgba(255, 255, 255, 0.35);
  --ev-icon-on-accent-glow: rgba(255, 255, 255, 0.4);
  --ev-badge-on-accent-bg: rgba(255, 255, 255, 0.22);
  --ev-badge-on-accent-color: #FFFFFF;
  --ev-badge-on-accent-border: rgba(255, 255, 255, 0.38);

  /* Bloques (Dark Mode) */
  --block-future-bg: #18181b;
  --block-future-stripe: #27272a;
  --block-future-text: #e4e4e7;
  --block-future-text-dim: #a1a1aa;
  --block-future-badge-bg: rgba(59, 130, 246, 0.08);
  --block-future-badge-color: #a1a1aa;

  --block-past-bg: #121214;
  --block-past-stripe: #18181b;
  --block-past-text: #71717a;
  --block-past-text-dim: #3f3f46;
  --block-past-badge-bg: rgba(255, 255, 255, 0.03);
  --block-past-badge-color: #71717a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-premium-hover: 0 12px 30px -10px rgba(0, 0, 0, 0.4);
  --accent-glow-pulse:    rgba(59, 130, 246, 0.4);

  /* --- Nuevos fondos sólidos unificados para citas (Dark) --- */
  --ev-future-bg-solid: #202024;
  --ev-past-bg-solid: #1c1c1f;
}

/* ═══════════════════════════════════════════════════════════════
   3. SISTEMA DE PALETAS DE COLORES (Sapphire, Amethyst, Emerald, RoseGold)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 3.1 Paleta: Monocromático / Gris (monochrome) ─── */
[data-palette="monochrome"] {
  --accent: #4B5563;
  --accent-rgb: 75, 85, 99;
  --accent-hover: #374151;
  --accent-glow-pulse: rgba(75, 85, 99, 0.4);
  --cal-today-bg: rgba(75, 85, 99, 0.08);
}
[data-theme="dark"][data-palette="monochrome"] {
  --accent: #9CA3AF;
  --accent-rgb: 156, 163, 175;
  --accent-hover: #D1D5DB;
  --accent-glow-pulse: rgba(156, 163, 175, 0.4);
  --cal-today-bg: rgba(156, 163, 175, 0.065);
}

/* ─── 3.2 Paleta: Violeta Amatista (violet) ─── */
[data-palette="violet"] {
  --accent: #7C3AED;
  --accent-rgb: 124, 58, 237;
  --accent-hover: #6D28D9;
  --accent-glow-pulse: rgba(124, 58, 237, 0.4);
  --cal-today-bg: rgba(124, 58, 237, 0.08);
}
[data-theme="dark"][data-palette="violet"] {
  --accent: #A78BFA;
  --accent-rgb: 167, 139, 250;
  --accent-hover: #C4B5FD;
  --accent-glow-pulse: rgba(167, 139, 250, 0.4);
  --cal-today-bg: rgba(167, 139, 250, 0.065);
}

/* ─── 3.3 Paleta: Fucsia / Magenta (fuchsia) ─── */
[data-palette="fuchsia"] {
  --accent: #C026D3;
  --accent-rgb: 192, 38, 211;
  --accent-hover: #A21CAF;
  --accent-glow-pulse: rgba(192, 38, 211, 0.4);
  --cal-today-bg: rgba(192, 38, 211, 0.08);
}
[data-theme="dark"][data-palette="fuchsia"] {
  --accent: #E879F9;
  --accent-rgb: 232, 121, 249;
  --accent-hover: #F5D0FE;
  --accent-glow-pulse: rgba(232, 121, 249, 0.4);
  --cal-today-bg: rgba(232, 121, 249, 0.065);
}

/* ─── 3.4 Paleta: Turquesa / Teal (teal) ─── */
[data-palette="teal"] {
  --accent: #0D9488;
  --accent-rgb: 13, 148, 136;
  --accent-hover: #0F766E;
  --accent-glow-pulse: rgba(13, 148, 136, 0.4);
  --cal-today-bg: rgba(13, 148, 136, 0.08);
}
[data-theme="dark"][data-palette="teal"] {
  --accent: #2DD4BF;
  --accent-rgb: 45, 212, 191;
  --accent-hover: #99F6E4;
  --accent-glow-pulse: rgba(45, 212, 191, 0.4);
  --cal-today-bg: rgba(45, 212, 191, 0.065);
}

/* ─── 3.5 Paleta: Bronce / Cobre (bronze) ─── */
[data-palette="bronze"] {
  --accent: #92400E;
  --accent-rgb: 146, 64, 14;
  --accent-hover: #78350F;
  --accent-glow-pulse: rgba(146, 64, 14, 0.4);
  --cal-today-bg: rgba(146, 64, 14, 0.08);
}
[data-theme="dark"][data-palette="bronze"] {
  --accent: #D97706;
  --accent-rgb: 217, 119, 6;
  --accent-hover: #F59E0B;
  --accent-glow-pulse: rgba(217, 119, 6, 0.4);
  --cal-today-bg: rgba(217, 119, 6, 0.065);
}

/* ═══════════════════════════════════════════════════════════════