/* ==========================================================================
   URBIVOX SISTEMA INTEGRAL DE MULTI-PALETA DE TEMAS ELECTORALES
   --------------------------------------------------------------------------
   Temas soportados:
   1. dark       -> Modo Oscuro Oficial (Por defecto · Azul Pizarra Neón)
   2. light      -> Modo Claro (Diurno · Blanco y Gris)
   3. monochrome -> Modo Negro Puro & Escalas de Grises (OLED Noir)
   4. orange     -> Modo Naranja
   5. pri        -> Modo Tricolor (Rojo, Blanco y Verde)
   6. pan        -> Modo Azul Rey & Blanco
   7. morena     -> Modo Guindo & Oro/Blanco
   ========================================================================== */

/* Transiciones fluidas entre cambios de tema */
html, body, aside, header, nav, 
.fi-main, .fi-sidebar, .fi-topbar, .fi-section, .fi-ta-content-ctn, 
.fi-widget, .glass-panel, .bg-slate-950, .bg-slate-900 {
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.2s ease !important;
}

/* ==========================================================================
   1. TEMA 1: MODO OSCURO (DEFAULT OFICIAL URBIVOX)
   ========================================================================== */
html[data-theme="dark"], html:not([data-theme]) {
    --uvx-theme-name: "dark";
    --uvx-bg: #070c18;
    --uvx-card: #0f172a;
    --uvx-border: #1e293b;
    --uvx-accent: #6366f1;
}

/* ==========================================================================
   2. TEMA 2: MODO CLARO (LIGHT DIURNO)
   ========================================================================== */
html[data-theme="light"] {
    --uvx-theme-name: "light";
    --uvx-bg: #f8fafc;
    --uvx-card: #ffffff;
    --uvx-border: #e2e8f0;
    --uvx-text-main: #0f172a;
    --uvx-text-muted: #64748b;
    --uvx-accent: #4f46e5;
}

html[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html[data-theme="light"] aside,
html[data-theme="light"] .fi-sidebar,
html[data-theme="light"] .fi-topbar,
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-950\/90,
html[data-theme="light"] .bg-slate-950\/80,
html[data-theme="light"] .bg-slate-950\/40 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .fi-section,
html[data-theme="light"] .fi-card,
html[data-theme="light"] .fi-ta-content-ctn,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .glass-panel {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200 {
    color: #0f172a !important;
}

html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400 {
    color: #475569 !important;
}

html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-700 {
    border-color: #e2e8f0 !important;
}

/* ==========================================================================
   3. TEMA 3: MODO NEGRO Y ESCALA DE GRISES (OLED NOIR MONOCROMÁTICO)
   ========================================================================== */
html[data-theme="monochrome"] {
    --uvx-theme-name: "monochrome";
    --primary-50: 250, 250, 250;
    --primary-100: 244, 244, 245;
    --primary-200: 228, 228, 231;
    --primary-300: 212, 212, 216;
    --primary-400: 161, 161, 170;
    --primary-500: 255, 255, 255;
    --primary-600: 228, 228, 231;
    --primary-700: 161, 161, 170;
    --primary-800: 113, 113, 122;
    --primary-900: 82, 82, 91;
    --primary-950: 39, 39, 42;

    --gray-50: 250, 250, 250;
    --gray-100: 244, 244, 245;
    --gray-200: 228, 228, 231;
    --gray-300: 212, 212, 216;
    --gray-400: 161, 161, 170;
    --gray-500: 113, 113, 122;
    --gray-600: 82, 82, 91;
    --gray-700: 38, 38, 38;
    --gray-800: 23, 23, 23;
    --gray-900: 10, 10, 10;
    --gray-950: 0, 0, 0;
}

html[data-theme="monochrome"] body,
html[data-theme="monochrome"] .fi-body,
html[data-theme="monochrome"] .fi-main {
    background-color: #000000 !important;
    color: #f4f4f5 !important;
}

html[data-theme="monochrome"] aside,
html[data-theme="monochrome"] .fi-sidebar,
html[data-theme="monochrome"] .fi-topbar,
html[data-theme="monochrome"] .bg-slate-950,
html[data-theme="monochrome"] .bg-slate-950\/90,
html[data-theme="monochrome"] .bg-slate-950\/80 {
    background-color: #050505 !important;
    border-color: #27272a !important;
}

html[data-theme="monochrome"] .fi-section,
html[data-theme="monochrome"] .fi-card,
html[data-theme="monochrome"] .fi-ta-content-ctn,
html[data-theme="monochrome"] .bg-slate-900,
html[data-theme="monochrome"] .glass-panel,
html[data-theme="monochrome"] .bg-slate-950\/40 {
    background-color: #0d0d0e !important;
    border-color: #27272a !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9) !important;
}

html[data-theme="monochrome"] .border-slate-800,
html[data-theme="monochrome"] .border-slate-700 {
    border-color: #27272a !important;
}

html[data-theme="monochrome"] .glow-indigo,
html[data-theme="monochrome"] .glow-emerald,
html[data-theme="monochrome"] .glow-rose {
    box-shadow: 0 0 25px -5px rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   4. TEMA 4: MODO NARANJA
   ========================================================================== */
html[data-theme="orange"] {
    --uvx-theme-name: "orange";
    --primary-50: 255, 247, 237;
    --primary-100: 255, 237, 213;
    --primary-200: 254, 215, 170;
    --primary-300: 253, 186, 116;
    --primary-400: 251, 146, 60;
    --primary-500: 249, 115, 22;
    --primary-600: 234, 88, 12;
    --primary-700: 194, 65, 12;
    --primary-800: 154, 52, 18;
    --primary-900: 124, 45, 18;
    --primary-950: 67, 20, 7;

    --gray-900: 26, 17, 12;
    --gray-950: 13, 8, 5;
}

html[data-theme="orange"] body,
html[data-theme="orange"] .fi-body,
html[data-theme="orange"] .fi-main {
    background-color: #0b0704 !important;
    background-image: radial-gradient(circle at 10% 10%, rgba(249, 115, 22, 0.1), transparent 35%) !important;
    color: #ffedd5 !important;
}

html[data-theme="orange"] aside,
html[data-theme="orange"] .fi-sidebar,
html[data-theme="orange"] .fi-topbar,
html[data-theme="orange"] .bg-slate-950,
html[data-theme="orange"] .bg-slate-950\/90,
html[data-theme="orange"] .bg-slate-950\/80 {
    background-color: #120c08 !important;
    border-color: #3b1d0c !important;
}

html[data-theme="orange"] .fi-section,
html[data-theme="orange"] .fi-card,
html[data-theme="orange"] .fi-ta-content-ctn,
html[data-theme="orange"] .bg-slate-900,
html[data-theme="orange"] .glass-panel,
html[data-theme="orange"] .bg-slate-950\/40 {
    background-color: #1a110a !important;
    border-color: #4a240e !important;
    box-shadow: 0 4px 25px rgba(249, 115, 22, 0.08) !important;
}

html[data-theme="orange"] .border-slate-800,
html[data-theme="orange"] .border-slate-700 {
    border-color: #431f0a !important;
}

html[data-theme="orange"] .glow-indigo {
    box-shadow: 0 0 25px -5px rgba(249, 115, 22, 0.35) !important;
}

/* ==========================================================================
   5. TEMA 5: MODO TRICOLOR (ROJO, BLANCO Y VERDE)
   ========================================================================== */
html[data-theme="pri"] {
    --uvx-theme-name: "pri";
    --primary-50: 254, 242, 242;
    --primary-100: 254, 226, 226;
    --primary-200: 254, 202, 202;
    --primary-300: 252, 165, 165;
    --primary-400: 248, 113, 113;
    --primary-500: 220, 38, 38;
    --primary-600: 185, 28, 28;
    --primary-700: 153, 27, 27;
    --primary-800: 127, 29, 29;
    --primary-900: 69, 10, 10;
    --primary-950: 16, 26, 20;

    --gray-900: 16, 26, 20;
    --gray-950: 7, 12, 9;
}

html[data-theme="pri"] body,
html[data-theme="pri"] .fi-body,
html[data-theme="pri"] .fi-main {
    background-color: #070c09 !important;
    background-image: 
        radial-gradient(circle at 10% 15%, rgba(22, 163, 74, 0.12), transparent 35%),
        radial-gradient(circle at 90% 85%, rgba(220, 38, 38, 0.12), transparent 35%) !important;
    color: #f0fdf4 !important;
}

html[data-theme="pri"] aside,
html[data-theme="pri"] .fi-sidebar,
html[data-theme="pri"] .fi-topbar,
html[data-theme="pri"] .bg-slate-950,
html[data-theme="pri"] .bg-slate-950\/90,
html[data-theme="pri"] .bg-slate-950\/80 {
    background-color: #0c1510 !important;
    border-color: #1c3224 !important;
}

html[data-theme="pri"] .fi-section,
html[data-theme="pri"] .fi-card,
html[data-theme="pri"] .fi-ta-content-ctn,
html[data-theme="pri"] .bg-slate-900,
html[data-theme="pri"] .glass-panel,
html[data-theme="pri"] .bg-slate-950\/40 {
    background-color: #111e17 !important;
    border-color: #233f2d !important;
    border-top: 2px solid #dc2626 !important;
    box-shadow: 0 4px 25px rgba(22, 163, 74, 0.1) !important;
}

html[data-theme="pri"] .border-slate-800,
html[data-theme="pri"] .border-slate-700 {
    border-color: #1f3728 !important;
}

html[data-theme="pri"] .glow-indigo {
    box-shadow: 0 0 25px -5px rgba(22, 163, 74, 0.3) !important;
}

/* ==========================================================================
   6. TEMA 6: MODO AZUL REY Y BLANCO
   ========================================================================== */
html[data-theme="pan"] {
    --uvx-theme-name: "pan";
    --primary-50: 239, 246, 255;
    --primary-100: 219, 234, 254;
    --primary-200: 191, 219, 254;
    --primary-300: 147, 197, 253;
    --primary-400: 96, 165, 250;
    --primary-500: 37, 99, 235;
    --primary-600: 29, 78, 216;
    --primary-700: 30, 64, 175;
    --primary-800: 30, 58, 138;
    --primary-900: 23, 37, 84;
    --primary-950: 2, 6, 20;

    --gray-900: 10, 22, 54;
    --gray-950: 3, 8, 22;
}

html[data-theme="pan"] body,
html[data-theme="pan"] .fi-body,
html[data-theme="pan"] .fi-main {
    background-color: #020716 !important;
    background-image: radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.16), transparent 45%) !important;
    color: #ffffff !important;
}

html[data-theme="pan"] aside,
html[data-theme="pan"] .fi-sidebar,
html[data-theme="pan"] .fi-topbar,
html[data-theme="pan"] .bg-slate-950,
html[data-theme="pan"] .bg-slate-950\/90,
html[data-theme="pan"] .bg-slate-950\/80 {
    background-color: #06112d !important;
    border-color: #173273 !important;
}

html[data-theme="pan"] .fi-section,
html[data-theme="pan"] .fi-card,
html[data-theme="pan"] .fi-ta-content-ctn,
html[data-theme="pan"] .bg-slate-900,
html[data-theme="pan"] .glass-panel,
html[data-theme="pan"] .bg-slate-950\/40 {
    background-color: #0a1b44 !important;
    border-color: #20459c !important;
    box-shadow: 0 4px 28px rgba(37, 99, 235, 0.2) !important;
}

html[data-theme="pan"] .border-slate-800,
html[data-theme="pan"] .border-slate-700 {
    border-color: #1b387e !important;
}

html[data-theme="pan"] .glow-indigo {
    box-shadow: 0 0 25px -5px rgba(37, 99, 235, 0.45) !important;
}

/* ==========================================================================
   7. TEMA 7: MODO GUINDO
   ========================================================================== */
html[data-theme="morena"] {
    --uvx-theme-name: "morena";
    --primary-50: 255, 241, 242;
    --primary-100: 255, 228, 230;
    --primary-200: 254, 205, 211;
    --primary-300: 253, 164, 175;
    --primary-400: 251, 113, 133;
    --primary-500: 159, 18, 57;
    --primary-600: 136, 19, 55;
    --primary-700: 104, 27, 50;
    --primary-800: 76, 17, 32;
    --primary-900: 59, 13, 24;
    --primary-950: 14, 3, 6;

    --gray-900: 28, 7, 14;
    --gray-950: 13, 3, 6;
}

html[data-theme="morena"] body,
html[data-theme="morena"] .fi-body,
html[data-theme="morena"] .fi-main {
    background-color: #0c0205 !important;
    background-image: radial-gradient(circle at 15% 15%, rgba(159, 18, 57, 0.16), transparent 45%) !important;
    color: #fff1f2 !important;
}

html[data-theme="morena"] aside,
html[data-theme="morena"] .fi-sidebar,
html[data-theme="morena"] .fi-topbar,
html[data-theme="morena"] .bg-slate-950,
html[data-theme="morena"] .bg-slate-950\/90,
html[data-theme="morena"] .bg-slate-950\/80 {
    background-color: #16040a !important;
    border-color: #420d1c !important;
}

html[data-theme="morena"] .fi-section,
html[data-theme="morena"] .fi-card,
html[data-theme="morena"] .fi-ta-content-ctn,
html[data-theme="morena"] .bg-slate-900,
html[data-theme="morena"] .glass-panel,
html[data-theme="morena"] .bg-slate-950\/40 {
    background-color: #210710 !important;
    border-color: #581426 !important;
    box-shadow: 0 4px 28px rgba(159, 18, 57, 0.15) !important;
}

html[data-theme="morena"] .border-slate-800,
html[data-theme="morena"] .border-slate-700 {
    border-color: #4b1120 !important;
}

html[data-theme="morena"] .glow-indigo {
    box-shadow: 0 0 25px -5px rgba(159, 18, 57, 0.35) !important;
}

/* ==========================================================================
   ESTILOS DEL COMPONENTE THEME SWITCHER DROPDOWN
   ========================================================================== */
.uvx-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #f8fafc;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    line-height: 1.25;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
}

.uvx-theme-btn:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(148, 163, 184, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.uvx-theme-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 240px;
    background: #0b1120;
    border: 1px solid #1e293b;
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 1000;
    display: none;
    backdrop-filter: blur(16px);
}

.uvx-theme-dropdown.open {
    display: block;
    animation: uvx-dropdown-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes uvx-dropdown-in {
    from { opacity: 0; transform: scale(0.95) translateY(-6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.uvx-theme-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 8px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid transparent;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.uvx-theme-option:hover {
    background: rgba(30, 41, 59, 0.8);
    color: #ffffff;
    border-color: rgba(148, 163, 184, 0.2);
}

.uvx-theme-option.active {
    background: rgba(99, 102, 241, 0.15);
    color: #ffffff;
    border-color: rgba(99, 102, 241, 0.4);
    font-weight: 800;
}

.uvx-swatch-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 8px;
}

.uvx-swatch-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   ADAPTACIÓN DINÁMICA DEL CONTENEDOR DEL MENÚ LATERAL IZQUIERDO (SIDEBAR)
   - En páginas largas (con scroll vertical): El sidebar se adapta a la altura
     de la página para que ninguna opción quede oculta ni recortada.
   - En páginas cortas: El sidebar se mantiene en viewport con scrollbar
     vertical visible y funcional.
   ========================================================================== */

@media (min-width: 64rem) {
    /* 1. MODO EXPANDIDO: Páginas con más contenido / scroll vertical */
    .uvx-sidebar-expanded aside.fi-sidebar,
    .uvx-sidebar-expanded #fi-main-sidebar {
        position: relative !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        inset-block: auto !important;
        top: 0 !important;
    }
    .uvx-sidebar-expanded .fi-sidebar-nav {
        overflow-y: visible !important;
        overflow-x: hidden !important;
        height: auto !important;
        max-height: none !important;
    }
    .uvx-sidebar-expanded .fi-layout {
        min-height: 100vh !important;
        align-items: stretch !important;
    }

    /* 2. MODO SCROLLABLE: Páginas cortas */
    .uvx-sidebar-scrollable aside.fi-sidebar,
    .uvx-sidebar-scrollable #fi-main-sidebar {
        position: sticky !important;
        top: var(--topbar-height, 4rem) !important;
        height: calc(100dvh - var(--topbar-height, 4rem)) !important;
        max-height: calc(100dvh - var(--topbar-height, 4rem)) !important;
    }
    .uvx-sidebar-scrollable .fi-sidebar-nav {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: calc(100dvh - var(--topbar-height, 4rem) - 0.5rem) !important;
        max-height: calc(100dvh - var(--topbar-height, 4rem) - 0.5rem) !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(99, 102, 241, 0.6) transparent !important;
    }
    .uvx-sidebar-scrollable .fi-sidebar-nav::-webkit-scrollbar {
        display: block !important;
        width: 6px !important;
    }
    .uvx-sidebar-scrollable .fi-sidebar-nav::-webkit-scrollbar-track {
        background: transparent !important;
    }
    .uvx-sidebar-scrollable .fi-sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.5) !important;
        border-radius: 9999px !important;
    }
    .uvx-sidebar-scrollable .fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.85) !important;
    }
}