/* Variables CSS requeridas */
:root {
    /* Colores principales */
    --primary-bg: #1a1b2e;
    --surface-color: #24283b;
    --surface-variant: #16213e;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-alt: #0f172a;

    /* Colores de texto (dark) */
    --text-primary: #c0caf5;
    --text-secondary: #7aa2f7;
    --text-muted: #94a3b8; /* NUEVO: tono gris azulado legible en dark */

    /* Colores de acento */
    --accent-color: #9d72ff;
    --accent-light: #bb9af7;
    --accent-dark: #7c3aed;

    /* Colores de estado */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Espaciado */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Border radius */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;

    /* Sombras */
    --box-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --box-shadow-md: 0 8px 25px rgba(0,0,0,0.15);
    --box-shadow-lg: 0 16px 48px rgba(0,0,0,0.2);
    --box-shadow-hover: 0 20px 60px rgba(0,0,0,0.3);

    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);

    /* Tipografía */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;

    /* Colores específicos de tablas (modo oscuro por defecto) */
    --tbl-head-bg: #262e3a;
    --tbl-head-text: #f5f7fa;
    --tbl-body-text: #e6e9ef;
    --tbl-row-hover-bg: rgba(157, 114, 255, 0.10);
    --tbl-row-cancelled-bg: rgba(255, 80, 80, .15);
    --tbl-row-cancelled-hover-bg: rgba(255, 80, 80, .22);
    --tbl-row-cancelled-text: #ffc5c5;
    --tbl-scroll-track-bg: #1e2330;
    --tbl-border-color: rgba(255, 255, 255, 0.10);
    --tbl-alt-bg: transparent;
}

/* Tema claro */
:root[data-theme="light"] {
    --primary-bg: #f5f7fb;
    --surface-color: #ffffff;
    --surface-variant: #e9eef5;
    --border-color: rgba(0,0,0,0.12);

    --text-primary: #1d2433;
    --text-secondary: #334155;
    --text-muted: #64748b; /* NUEVO: gris azulado medio en light */

    --accent-color: #6366f1;
    --accent-light: #818cf8;

    /* Overrides modo claro */
    --tbl-head-bg: #ffffff;
    --tbl-head-text: #1d2433;
    --tbl-body-text: #1d2433;
    --tbl-row-hover-bg: #f1f5fb;
    --tbl-row-cancelled-bg: #ffe4e4;
    --tbl-row-cancelled-hover-bg: #ffd4d4;
    --tbl-row-cancelled-text: #b91c1c;
    --tbl-scroll-track-bg: #edf2f7;
    --tbl-border-color: rgba(0,0,0,0.12);
    --tbl-alt-bg: #ffffff;
}