/*
 * ══════════════════════════════════════════════════════════════════════
 * ERP-THEME.CSS v3  —  COOPAC Quinuapata
 * Rediseño completo de paletas + tipografía · 2026
 * ══════════════════════════════════════════════════════════════════════
 *
 *  CLAROS  →  azul (default) · verde · slate · perla · arena
 *  OSCUROS →  carbon · obsidian · midnight · ocean · forest · aurora · ember · void
 *
 * ══════════════════════════════════════════════════════════════════════
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=DM+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   DEFAULT — ZAFIRO INSTITUCIONAL  (azul)
   Sidebar azul pizarra profundo · acento zafiro eléctrico
   Fondo: gris perla, no el gris genérico
══════════════════════════════════════════════════════════════════════ */
:root {
    --primary:           #0e2a4a;
    --primary-hover:     #0a2038;
    --primary-light:     #e8f2fe;
    --primary-mid:       #1c6fe0;
    --primary-mid-h:     #1458c0;

    --accent:            #0c7a4c;
    --accent-hover:      #096038;
    --accent-light:      #e4f5ef;
    --accent-text:       #064d30;

    --bg:                #eef2f8;
    --bg-white:          #ffffff;
    --surface:           #ffffff;
    --surface2:          #f5f8fd;
    --surface3:          #eaeff8;

    --border:            #d8e2f0;
    --border-focus:      #1c6fe0;

    --text:              #0b1827;
    --text-soft:         #3a5070;
    --text-muted:        #8aa0bc;
    --text-on-primary:   #ffffff;

    --success:           #0a8a4c;
    --success-bg:        #e2f8ee;
    --success-border:    #a4e8c4;
    --success-text:      #065c32;

    --warning:           #b86e00;
    --warning-bg:        #fef4e0;
    --warning-border:    #f8d88a;
    --warning-text:      #7a4800;

    --danger:            #cc2828;
    --danger-bg:         #fde8e8;
    --danger-border:     #f6aaaa;
    --danger-text:       #861818;

    --info:              #0270b8;
    --info-bg:           #ddf0fd;
    --info-border:       #9ed4f8;
    --info-text:         #044880;

    --purple:            #6830c4;
    --purple-bg:         #ede4fc;
    --purple-text:       #3e1880;

    --sidebar-w:              260px;
    --sidebar-collapsed:      72px;
    --sidebar-bg:             #0e2a4a;
    --sidebar-text:           rgba(255,255,255,0.55);
    --sidebar-text-hover:     rgba(255,255,255,0.96);
    --sidebar-active-bg:      rgba(28,111,224,0.20);
    --sidebar-active-border:  #4a9aff;
    --sidebar-active-text:    #88c0ff;
    --sidebar-section-color:  rgba(255,255,255,0.26);
    --sidebar-border:         rgba(255,255,255,0.07);
    --sidebar-icon-bg:        rgba(255,255,255,0.07);
    --sidebar-icon-hover:     rgba(255,255,255,0.14);

    --topbar-h:          60px;
    --topbar-bg:         #0e2a4a;
    --topbar-border:     rgba(255,255,255,0.10);
    --topbar-text:       rgba(255,255,255,0.90);
    --topbar-text-muted: rgba(255,255,255,0.50);
    --topbar-surface:    rgba(255,255,255,0.08);
    --topbar-surface-hover: rgba(255,255,255,0.13);

    --font:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    --r-xs:   3px;  --r-sm:   6px;  --r-md:   9px;
    --r-lg:   13px; --r-xl:   17px; --r-2xl:  22px; --r-full: 9999px;

    --shadow-xs: 0 1px 2px rgba(14,42,74,0.05);
    --shadow-sm: 0 1px 4px rgba(14,42,74,0.08), 0 1px 2px rgba(14,42,74,0.04);
    --shadow-md: 0 4px 14px rgba(14,42,74,0.10), 0 2px 4px rgba(14,42,74,0.05);
    --shadow-lg: 0 10px 30px rgba(14,42,74,0.12), 0 4px 8px rgba(14,42,74,0.06);
    --shadow-xl: 0 20px 50px rgba(14,42,74,0.14), 0 8px 16px rgba(14,42,74,0.07);

    --t-fast: all 0.11s ease;
    --t:      all 0.18s ease;
    --t-md:   all 0.28s cubic-bezier(0.4,0,0.2,1);

    --z-dropdown: 100; --z-sidebar: 200;
    --z-topbar:   300; --z-modal:   400; --z-toast: 500;
}

/* ══════════════════════════════════════════════════════════════════════
   VERDE COOPERATIVO
   Bosque institucional · jade oscuro · acento azul cobalto
══════════════════════════════════════════════════════════════════════ */
[data-theme="verde"] {
    --primary:           #0c3c20;
    --primary-hover:     #092e18;
    --primary-light:     #e2f6ec;
    --primary-mid:       #188a4c;
    --primary-mid-h:     #127040;

    --accent:            #1464c0;
    --accent-hover:      #0e50a0;
    --accent-light:      #dbebfd;
    --accent-text:       #0c3c80;

    --bg:                #ecf7f2;
    --surface2:          #f2fbf6;
    --surface3:          #e2f0ea;
    --border:            #c4e2d0;
    --border-focus:      #188a4c;
    --text:              #061a0c;
    --text-soft:         #2a5c3c;
    --text-muted:        #72a888;

    --sidebar-bg:             #0c3c20;
    --sidebar-active-bg:      rgba(24,138,76,0.22);
    --sidebar-active-border:  #54c87c;
    --sidebar-active-text:    #8ce4b0;
    --sidebar-section-color:  rgba(255,255,255,0.26);
    --sidebar-border:         rgba(255,255,255,0.07);
    --sidebar-icon-bg:        rgba(255,255,255,0.07);
    --sidebar-icon-hover:     rgba(255,255,255,0.14);
    --topbar-bg:              #0c3c20;
    --topbar-border:          rgba(255,255,255,0.10);
    --topbar-text:            rgba(255,255,255,0.90);
    --topbar-text-muted:      rgba(255,255,255,0.50);
    --topbar-surface:         rgba(255,255,255,0.08);
    --topbar-surface-hover:   rgba(255,255,255,0.13);
}

/* ══════════════════════════════════════════════════════════════════════
   SLATE EJECUTIVO
   Grafito frío · índigo saturado · elegancia corporativa
══════════════════════════════════════════════════════════════════════ */
[data-theme="slate"] {
    --primary:           #18243c;
    --primary-hover:     #111c30;
    --primary-light:     #e8eaff;
    --primary-mid:       #4c54e8;
    --primary-mid-h:     #3840d0;

    --accent:            #0094a4;
    --accent-hover:      #007888;
    --accent-light:      #d6f3f7;
    --accent-text:       #004c58;

    --bg:                #f4f6fb;
    --surface2:          #edf0f8;
    --surface3:          #e2e6f4;
    --border:            #ccd2ea;
    --border-focus:      #4c54e8;
    --text:              #0c1428;
    --text-soft:         #384060;
    --text-muted:        #8892bc;

    --sidebar-bg:             #18243c;
    --sidebar-active-bg:      rgba(76,84,232,0.18);
    --sidebar-active-border:  #8090ff;
    --sidebar-active-text:    #aab4ff;
    --sidebar-section-color:  rgba(255,255,255,0.26);
    --sidebar-border:         rgba(255,255,255,0.07);
    --sidebar-icon-bg:        rgba(255,255,255,0.07);
    --sidebar-icon-hover:     rgba(255,255,255,0.14);
    --topbar-bg:              #18243c;
    --topbar-border:          rgba(255,255,255,0.10);
    --topbar-text:            rgba(255,255,255,0.90);
    --topbar-text-muted:      rgba(255,255,255,0.50);
    --topbar-surface:         rgba(255,255,255,0.08);
    --topbar-surface-hover:   rgba(255,255,255,0.13);
}

/* ══════════════════════════════════════════════════════════════════════
   PERLA
   Blanco puro · violeta amatista · acento ámbar
   Tipografía Sora — elegante y diferente
══════════════════════════════════════════════════════════════════════ */
[data-theme="perla"] {
    --font:              'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    --primary:           #1e1830;
    --primary-hover:     #161224;
    --primary-light:     #f3eeff;
    --primary-mid:       #7048c8;
    --primary-mid-h:     #5c38b0;

    --accent:            #b07c0a;
    --accent-hover:      #8e6208;
    --accent-light:      #faf3de;
    --accent-text:       #6a4a06;

    --bg:                #f9f9fb;
    --bg-white:          #ffffff;
    --surface:           #ffffff;
    --surface2:          #f5f4f9;
    --surface3:          #eeecf6;
    --border:            #e2deed;
    --border-focus:      #7048c8;
    --text:              #14101e;
    --text-soft:         #40386a;
    --text-muted:        #9890bc;
    --text-on-primary:   #ffffff;

    --sidebar-bg:             #1e1830;
    --sidebar-active-bg:      rgba(112,72,200,0.18);
    --sidebar-active-border:  #a880ff;
    --sidebar-active-text:    #c8aaff;
    --sidebar-section-color:  rgba(255,255,255,0.26);
    --sidebar-border:         rgba(255,255,255,0.07);
    --sidebar-icon-bg:        rgba(255,255,255,0.07);
    --sidebar-icon-hover:     rgba(255,255,255,0.14);
    --topbar-bg:              #1e1830;
    --topbar-border:          rgba(255,255,255,0.10);
    --topbar-text:            rgba(255,255,255,0.90);
    --topbar-text-muted:      rgba(255,255,255,0.50);
    --topbar-surface:         rgba(255,255,255,0.08);
    --topbar-surface-hover:   rgba(255,255,255,0.13);
}

/* ══════════════════════════════════════════════════════════════════════
   ARENA
   Crema cálida · cobre quemado · fondo piel
   Tipografía Sora
══════════════════════════════════════════════════════════════════════ */
[data-theme="arena"] {
    --font:              'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    --primary:           #381c00;
    --primary-hover:     #2a1400;
    --primary-light:     #fff2e4;
    --primary-mid:       #c46800;
    --primary-mid-h:     #a45400;

    --accent:            #2a7c30;
    --accent-hover:      #1e6024;
    --accent-light:      #e4f5e6;
    --accent-text:       #185020;

    --bg:                #fdf4e8;
    --bg-white:          #fffdf8;
    --surface:           #fffdf8;
    --surface2:          #faeedd;
    --surface3:          #f6e4c8;
    --border:            #e8d0a8;
    --border-focus:      #c46800;
    --text:              #281200;
    --text-soft:         #583400;
    --text-muted:        #9c7040;
    --text-on-primary:   #ffffff;

    --sidebar-bg:             #381c00;
    --sidebar-active-bg:      rgba(196,104,0,0.20);
    --sidebar-active-border:  #f09428;
    --sidebar-active-text:    #f8c870;
    --sidebar-section-color:  rgba(255,255,255,0.26);
    --sidebar-border:         rgba(255,255,255,0.08);
    --sidebar-icon-bg:        rgba(255,255,255,0.08);
    --sidebar-icon-hover:     rgba(255,255,255,0.16);
    --topbar-bg:              #381c00;
    --topbar-border:          rgba(255,255,255,0.10);
    --topbar-text:            rgba(255,255,255,0.90);
    --topbar-text-muted:      rgba(255,255,255,0.50);
    --topbar-surface:         rgba(255,255,255,0.08);
    --topbar-surface-hover:   rgba(255,255,255,0.13);
}

/* ══════════════════════════════════════════════════════════════════════
   CARBON  (sustituto del viejo "dark")
   Carbón profundo · teal eléctrico · diseño Palantir refinado
   Tipografía Plus Jakarta Sans
══════════════════════════════════════════════════════════════════════ */
[data-theme="carbon"] {
    --primary:           #050810;
    --primary-hover:     #030508;
    --primary-light:     rgba(0,198,178,0.10);
    --primary-mid:       #00c6b2;
    --primary-mid-h:     #00a898;

    --accent:            #3888ff;
    --accent-hover:      #2270f0;
    --accent-light:      rgba(56,136,255,0.12);
    --accent-text:       #88b8ff;

    --bg:                #070b14;
    --bg-white:          #0c1020;
    --surface:           #0c1020;
    --surface2:          #12182c;
    --surface3:          #182038;
    --border:            rgba(0,198,178,0.10);
    --border-focus:      #00c6b2;

    --text:              #d8e6f4;
    --text-soft:         #86a4be;
    --text-muted:        #3a546c;
    --text-on-primary:   #050810;

    --success:           #00c894;
    --success-bg:        rgba(0,200,148,0.10);
    --success-border:    rgba(0,200,148,0.22);
    --success-text:      #68e8c4;

    --warning:           #f0a200;
    --warning-bg:        rgba(240,162,0,0.10);
    --warning-border:    rgba(240,162,0,0.22);
    --warning-text:      #ffd058;

    --danger:            #f03c5c;
    --danger-bg:         rgba(240,60,92,0.10);
    --danger-border:     rgba(240,60,92,0.22);
    --danger-text:       #ff8098;

    --info:              #3888ff;
    --info-bg:           rgba(56,136,255,0.10);
    --info-border:       rgba(56,136,255,0.22);
    --info-text:         #88b8ff;

    --purple:            #9c6cff;
    --purple-bg:         rgba(156,108,255,0.10);
    --purple-text:       #c298ff;

    --sidebar-bg:             #050810;
    --sidebar-text:           rgba(216,230,244,0.46);
    --sidebar-text-hover:     rgba(216,230,244,0.96);
    --sidebar-active-bg:      rgba(0,198,178,0.11);
    --sidebar-active-border:  #00c6b2;
    --sidebar-active-text:    #00c6b2;
    --sidebar-section-color:  rgba(0,198,178,0.28);
    --sidebar-border:         rgba(255,255,255,0.05);
    --sidebar-icon-bg:        rgba(255,255,255,0.05);
    --sidebar-icon-hover:     rgba(0,198,178,0.12);

    --topbar-bg:     #0c1020;
    --topbar-border: rgba(0,198,178,0.08);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.55);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.65);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.75), 0 0 20px rgba(0,198,178,0.04);
    --shadow-xl: 0 24px 56px rgba(0,0,0,0.85), 0 0 40px rgba(0,198,178,0.06);
}

/* ══════════════════════════════════════════════════════════════════════
   OBSIDIAN GOLD ✦
   Negro volcánico · oro champagne · lujo silencioso
   Tipografía Sora
══════════════════════════════════════════════════════════════════════ */
[data-theme="obsidian"] {
    --font:              'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    --primary:           #08080c;
    --primary-hover:     #050508;
    --primary-light:     rgba(208,168,72,0.08);
    --primary-mid:       #d0a848;
    --primary-mid-h:     #b49038;

    --accent:            #e6c870;
    --accent-hover:      #d0ae58;
    --accent-light:      rgba(230,200,112,0.10);
    --accent-text:       #c09028;

    --bg:                #0a0a0e;
    --bg-white:          #100f14;
    --surface:           #100f14;
    --surface2:          #17161c;
    --surface3:          #1e1c26;
    --border:            rgba(208,168,72,0.12);
    --border-focus:      #d0a848;

    --text:              #ece8da;
    --text-soft:         #b0a890;
    --text-muted:        #625a48;
    --text-on-primary:   #08080c;

    --success:           #48d48c;
    --success-bg:        rgba(72,212,140,0.08);
    --success-border:    rgba(72,212,140,0.20);
    --success-text:      #88e8b4;

    --warning:           #f0ae28;
    --warning-bg:        rgba(240,174,40,0.08);
    --warning-border:    rgba(240,174,40,0.20);
    --warning-text:      #f8cf68;

    --danger:            #f06c6c;
    --danger-bg:         rgba(240,108,108,0.08);
    --danger-border:     rgba(240,108,108,0.20);
    --danger-text:       #f8a8a8;

    --info:              #58a8f8;
    --info-bg:           rgba(88,168,248,0.08);
    --info-border:       rgba(88,168,248,0.20);
    --info-text:         #9cc8ff;

    --purple:            #be88f8;
    --purple-bg:         rgba(190,136,248,0.08);
    --purple-text:       #d8b4ff;

    --sidebar-bg:             #08080c;
    --sidebar-text:           rgba(236,232,218,0.40);
    --sidebar-text-hover:     rgba(236,232,218,0.94);
    --sidebar-active-bg:      rgba(208,168,72,0.11);
    --sidebar-active-border:  #d0a848;
    --sidebar-active-text:    #e6c870;
    --sidebar-section-color:  rgba(208,168,72,0.28);
    --sidebar-border:         rgba(208,168,72,0.07);
    --sidebar-icon-bg:        rgba(208,168,72,0.06);
    --sidebar-icon-hover:     rgba(208,168,72,0.14);

    --topbar-bg:     #0a0a0e;
    --topbar-border: rgba(208,168,72,0.10);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.65), 0 0 0 1px rgba(208,168,72,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.75), 0 0 0 1px rgba(208,168,72,0.06);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.85), 0 0 0 1px rgba(208,168,72,0.08);
    --shadow-xl: 0 24px 56px rgba(0,0,0,0.92), 0 0 40px rgba(208,168,72,0.06);
}

/* ══════════════════════════════════════════════════════════════════════
   MIDNIGHT
   Noche profunda · cian glacial · datos en movimiento
   Tipografía DM Sans
══════════════════════════════════════════════════════════════════════ */
[data-theme="midnight"] {
    --font:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'DM Mono', Consolas, monospace;
    --primary:           #04060e;
    --primary-hover:     #020408;
    --primary-light:     rgba(52,180,255,0.10);
    --primary-mid:       #34b4ff;
    --primary-mid-h:     #1c9ef0;

    --accent:            #7864ff;
    --accent-hover:      #6050f0;
    --accent-light:      rgba(120,100,255,0.10);
    --accent-text:       #a89cff;

    --bg:                #080b18;
    --bg-white:          #0d1020;
    --surface:           #0d1020;
    --surface2:          #12182e;
    --surface3:          #182040;
    --border:            rgba(52,180,255,0.10);
    --border-focus:      #34b4ff;

    --text:              #d4e2f4;
    --text-soft:         #7c96b8;
    --text-muted:        #344460;
    --text-on-primary:   #04060e;

    --success:           #28d49c;
    --success-bg:        rgba(40,212,156,0.10);
    --success-border:    rgba(40,212,156,0.22);
    --success-text:      #6ce8bc;

    --warning:           #ffbc38;
    --warning-bg:        rgba(255,188,56,0.10);
    --warning-border:    rgba(255,188,56,0.22);
    --warning-text:      #ffdc88;

    --danger:            #f05c7c;
    --danger-bg:         rgba(240,92,124,0.10);
    --danger-border:     rgba(240,92,124,0.22);
    --danger-text:       #f89cb4;

    --info:              #34b4ff;
    --info-bg:           rgba(52,180,255,0.10);
    --info-border:       rgba(52,180,255,0.22);
    --info-text:         #7cd0ff;

    --purple:            #9c7cff;
    --purple-bg:         rgba(156,124,255,0.10);
    --purple-text:       #bea8ff;

    --sidebar-bg:             #04060e;
    --sidebar-text:           rgba(212,226,244,0.44);
    --sidebar-text-hover:     rgba(212,226,244,0.96);
    --sidebar-active-bg:      rgba(52,180,255,0.12);
    --sidebar-active-border:  #34b4ff;
    --sidebar-active-text:    #7cd0ff;
    --sidebar-section-color:  rgba(52,180,255,0.26);
    --sidebar-border:         rgba(52,180,255,0.07);
    --sidebar-icon-bg:        rgba(52,180,255,0.06);
    --sidebar-icon-hover:     rgba(52,180,255,0.14);

    --topbar-bg:     #080b18;
    --topbar-border: rgba(52,180,255,0.08);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.55);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.65);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.75), 0 0 16px rgba(52,180,255,0.04);

    --r-xs:4px; --r-sm:7px; --r-md:10px;
    --r-lg:14px; --r-xl:18px; --r-2xl:24px;
}

/* ══════════════════════════════════════════════════════════════════════
   OCEAN
   Profundidades marinas · cian vibrante · agua oscura
══════════════════════════════════════════════════════════════════════ */
[data-theme="ocean"] {
    --font:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'DM Mono', Consolas, monospace;
    --primary:           #060e18;
    --primary-hover:     #040a12;
    --primary-light:     rgba(0,176,216,0.10);
    --primary-mid:       #00b0d8;
    --primary-mid-h:     #0094bc;

    --accent:            #00deb8;
    --accent-hover:      #00c0a0;
    --accent-light:      rgba(0,222,184,0.10);
    --accent-text:       #00a088;

    --bg:                #08161e;
    --bg-white:          #0c1e2c;
    --surface:           #0c1e2c;
    --surface2:          #102838;
    --surface3:          #14304a;
    --border:            rgba(0,176,216,0.12);
    --border-focus:      #00b0d8;

    --text:              #cce8f8;
    --text-soft:         #5a90b4;
    --text-muted:        #244c64;
    --text-on-primary:   #060e18;

    --success:           #00deb8;
    --success-bg:        rgba(0,222,184,0.10);
    --success-border:    rgba(0,222,184,0.22);
    --success-text:      #5cf0d0;

    --warning:           #ffb42c;
    --warning-bg:        rgba(255,180,44,0.10);
    --warning-border:    rgba(255,180,44,0.22);
    --warning-text:      #ffd878;

    --danger:            #ff5068;
    --danger-bg:         rgba(255,80,104,0.10);
    --danger-border:     rgba(255,80,104,0.22);
    --danger-text:       #ff96a4;

    --info:              #00b0d8;
    --info-bg:           rgba(0,176,216,0.10);
    --info-border:       rgba(0,176,216,0.22);
    --info-text:         #5cd8f8;

    --purple:            #7c5cf8;
    --purple-bg:         rgba(124,92,248,0.10);
    --purple-text:       #ac90ff;

    --sidebar-bg:             #060e18;
    --sidebar-text:           rgba(204,232,248,0.44);
    --sidebar-text-hover:     rgba(204,232,248,0.96);
    --sidebar-active-bg:      rgba(0,176,216,0.14);
    --sidebar-active-border:  #00b0d8;
    --sidebar-active-text:    #5cd8f8;
    --sidebar-section-color:  rgba(0,176,216,0.26);
    --sidebar-border:         rgba(0,176,216,0.08);
    --sidebar-icon-bg:        rgba(0,176,216,0.06);
    --sidebar-icon-hover:     rgba(0,176,216,0.14);

    --topbar-bg:     #0c1e2c;
    --topbar-border: rgba(0,176,216,0.09);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.55);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.65);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.75), 0 0 16px rgba(0,176,216,0.05);
}

/* ══════════════════════════════════════════════════════════════════════
   FOREST
   Selva nocturna · verde esmeralda · naturaleza digital
══════════════════════════════════════════════════════════════════════ */
[data-theme="forest"] {
    --primary:           #020c06;
    --primary-hover:     #010804;
    --primary-light:     rgba(0,196,96,0.10);
    --primary-mid:       #00c460;
    --primary-mid-h:     #00a44e;

    --accent:            #3cd48c;
    --accent-hover:      #26bc74;
    --accent-light:      rgba(60,212,140,0.10);
    --accent-text:       #007c48;

    --bg:                #041008;
    --bg-white:          #061808;
    --surface:           #061808;
    --surface2:          #0a2010;
    --surface3:          #0e2c16;
    --border:            rgba(0,196,96,0.12);
    --border-focus:      #00c460;

    --text:              #c4ecd4;
    --text-soft:         #52966c;
    --text-muted:        #1c4c2c;
    --text-on-primary:   #020c06;

    --success:           #3cd48c;
    --success-bg:        rgba(60,212,140,0.10);
    --success-border:    rgba(60,212,140,0.22);
    --success-text:      #84f0b4;

    --warning:           #f8b83c;
    --warning-bg:        rgba(248,184,60,0.10);
    --warning-border:    rgba(248,184,60,0.22);
    --warning-text:      #ffd884;

    --danger:            #f86c5c;
    --danger-bg:         rgba(248,108,92,0.10);
    --danger-border:     rgba(248,108,92,0.22);
    --danger-text:       #ffaa9c;

    --info:              #3cb8f8;
    --info-bg:           rgba(60,184,248,0.10);
    --info-border:       rgba(60,184,248,0.22);
    --info-text:         #7cd8ff;

    --purple:            #a47cf8;
    --purple-bg:         rgba(164,124,248,0.10);
    --purple-text:       #c4a8ff;

    --sidebar-bg:             #020c06;
    --sidebar-text:           rgba(196,236,212,0.42);
    --sidebar-text-hover:     rgba(196,236,212,0.94);
    --sidebar-active-bg:      rgba(0,196,96,0.12);
    --sidebar-active-border:  #00c460;
    --sidebar-active-text:    #5cd89c;
    --sidebar-section-color:  rgba(0,196,96,0.26);
    --sidebar-border:         rgba(0,196,96,0.08);
    --sidebar-icon-bg:        rgba(0,196,96,0.06);
    --sidebar-icon-hover:     rgba(0,196,96,0.14);

    --topbar-bg:     #061808;
    --topbar-border: rgba(0,196,96,0.09);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.60);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.70);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.80), 0 0 16px rgba(0,196,96,0.05);
}

/* ══════════════════════════════════════════════════════════════════════
   AURORA
   Índigo cósmico · violeta eléctrico · SaaS premium
   Tipografía Plus Jakarta Sans
══════════════════════════════════════════════════════════════════════ */
[data-theme="aurora"] {
    --primary:           #060616;
    --primary-hover:     #040410;
    --primary-light:     rgba(124,72,255,0.10);
    --primary-mid:       #7c48ff;
    --primary-mid-h:     #6830f0;

    --accent:            #00ccec;
    --accent-hover:      #00b0d0;
    --accent-light:      rgba(0,204,236,0.10);
    --accent-text:       #009ab8;

    --bg:                #080820;
    --bg-white:          #0c0c2a;
    --surface:           #0c0c2a;
    --surface2:          #121238;
    --surface3:          #181848;
    --border:            rgba(124,72,255,0.14);
    --border-focus:      #7c48ff;

    --text:              #dcd8ff;
    --text-soft:         #8c80c4;
    --text-muted:        #443c80;
    --text-on-primary:   #ffffff;

    --success:           #28dc8c;
    --success-bg:        rgba(40,220,140,0.10);
    --success-border:    rgba(40,220,140,0.22);
    --success-text:      #6cf8b4;

    --warning:           #ffac38;
    --warning-bg:        rgba(255,172,56,0.10);
    --warning-border:    rgba(255,172,56,0.22);
    --warning-text:      #ffd884;

    --danger:            #f84c78;
    --danger-bg:         rgba(248,76,120,0.10);
    --danger-border:     rgba(248,76,120,0.22);
    --danger-text:       #ff96b4;

    --info:              #00ccec;
    --info-bg:           rgba(0,204,236,0.10);
    --info-border:       rgba(0,204,236,0.22);
    --info-text:         #58e8ff;

    --purple:            #bc68ff;
    --purple-bg:         rgba(188,104,255,0.10);
    --purple-text:       #dca8ff;

    --sidebar-bg:             #04041a;
    --sidebar-text:           rgba(220,216,255,0.42);
    --sidebar-text-hover:     rgba(220,216,255,0.96);
    --sidebar-active-bg:      rgba(124,72,255,0.14);
    --sidebar-active-border:  #7c48ff;
    --sidebar-active-text:    #ac90ff;
    --sidebar-section-color:  rgba(124,72,255,0.32);
    --sidebar-border:         rgba(124,72,255,0.08);
    --sidebar-icon-bg:        rgba(124,72,255,0.07);
    --sidebar-icon-hover:     rgba(124,72,255,0.16);

    --topbar-bg:     #080820;
    --topbar-border: rgba(124,72,255,0.12);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,72,255,0.05);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.65), 0 0 0 1px rgba(124,72,255,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.75), 0 0 24px rgba(124,72,255,0.08);
    --shadow-xl: 0 24px 56px rgba(0,0,0,0.85), 0 0 48px rgba(124,72,255,0.10);
}

/* ══════════════════════════════════════════════════════════════════════
   EMBER
   Brasa volcánica · naranja candente · oscuridad cálida
   Tipografía Sora
══════════════════════════════════════════════════════════════════════ */
[data-theme="ember"] {
    --font:              'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    --primary:           #0c0402;
    --primary-hover:     #080300;
    --primary-light:     rgba(236,76,36,0.10);
    --primary-mid:       #ec4c24;
    --primary-mid-h:     #d03c14;

    --accent:            #ff9c18;
    --accent-hover:      #e68000;
    --accent-light:      rgba(255,156,24,0.10);
    --accent-text:       #c86000;

    --bg:                #0e0604;
    --bg-white:          #140a04;
    --surface:           #140a04;
    --surface2:          #1c0e06;
    --surface3:          #261208;
    --border:            rgba(236,76,36,0.14);
    --border-focus:      #ec4c24;

    --text:              #f0dcd4;
    --text-soft:         #ac7c68;
    --text-muted:        #5c3828;
    --text-on-primary:   #ffffff;

    --success:           #34d88c;
    --success-bg:        rgba(52,216,140,0.10);
    --success-border:    rgba(52,216,140,0.22);
    --success-text:      #78f0b4;

    --warning:           #ff9c18;
    --warning-bg:        rgba(255,156,24,0.10);
    --warning-border:    rgba(255,156,24,0.22);
    --warning-text:      #ffcc68;

    --danger:            #ec4c24;
    --danger-bg:         rgba(236,76,36,0.10);
    --danger-border:     rgba(236,76,36,0.22);
    --danger-text:       #ff9878;

    --info:              #4cb8f8;
    --info-bg:           rgba(76,184,248,0.10);
    --info-border:       rgba(76,184,248,0.22);
    --info-text:         #88d4ff;

    --purple:            #cc7cf8;
    --purple-bg:         rgba(204,124,248,0.10);
    --purple-text:       #e4aeff;

    --sidebar-bg:             #08030000;
    --sidebar-bg:             #080200;
    --sidebar-text:           rgba(240,220,212,0.40);
    --sidebar-text-hover:     rgba(240,220,212,0.94);
    --sidebar-active-bg:      rgba(236,76,36,0.12);
    --sidebar-active-border:  #ec4c24;
    --sidebar-active-text:    #ff8c68;
    --sidebar-section-color:  rgba(236,76,36,0.28);
    --sidebar-border:         rgba(236,76,36,0.09);
    --sidebar-icon-bg:        rgba(236,76,36,0.07);
    --sidebar-icon-hover:     rgba(236,76,36,0.16);

    --topbar-bg:     #140a04;
    --topbar-border: rgba(236,76,36,0.10);

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.70);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.78);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.85), 0 0 20px rgba(236,76,36,0.06);
}

/* ══════════════════════════════════════════════════════════════════════
   VOID
   Negro absoluto · cyan nuclear · terminal máquina
   Tipografía IBM Plex Mono — toda mono
══════════════════════════════════════════════════════════════════════ */
[data-theme="void"] {
    --font:      'IBM Plex Mono', Consolas, monospace;
    --font-mono: 'IBM Plex Mono', Consolas, monospace;
    --primary:           #000000;
    --primary-hover:     #040404;
    --primary-light:     rgba(0,252,196,0.06);
    --primary-mid:       #00fcc4;
    --primary-mid-h:     #00e0ae;

    --accent:            #00dcff;
    --accent-hover:      #00c4e8;
    --accent-light:      rgba(0,220,255,0.07);
    --accent-text:       #58f0ff;

    --bg:                #000000;
    --bg-white:          #040404;
    --surface:           #040404;
    --surface2:          #0a0a0a;
    --surface3:          #121212;
    --border:            rgba(0,252,196,0.09);
    --border-focus:      #00fcc4;

    --text:              #dafff4;
    --text-soft:         #78c8b4;
    --text-muted:        #284840;
    --text-on-primary:   #000000;

    --success:           #00fcc4;
    --success-bg:        rgba(0,252,196,0.07);
    --success-border:    rgba(0,252,196,0.18);
    --success-text:      #7afce8;

    --warning:           #ffdc3c;
    --warning-bg:        rgba(255,220,60,0.07);
    --warning-border:    rgba(255,220,60,0.18);
    --warning-text:      #ffec84;

    --danger:            #ff2c58;
    --danger-bg:         rgba(255,44,88,0.07);
    --danger-border:     rgba(255,44,88,0.18);
    --danger-text:       #ff7888;

    --info:              #00dcff;
    --info-bg:           rgba(0,220,255,0.07);
    --info-border:       rgba(0,220,255,0.18);
    --info-text:         #58f0ff;

    --purple:            #cc5cff;
    --purple-bg:         rgba(204,92,255,0.07);
    --purple-text:       #e494ff;

    --sidebar-bg:             #000000;
    --sidebar-text:           rgba(0,252,196,0.34);
    --sidebar-text-hover:     rgba(0,252,196,0.90);
    --sidebar-active-bg:      rgba(0,252,196,0.06);
    --sidebar-active-border:  #00fcc4;
    --sidebar-active-text:    #00fcc4;
    --sidebar-section-color:  rgba(0,252,196,0.20);
    --sidebar-border:         rgba(0,252,196,0.06);
    --sidebar-icon-bg:        rgba(0,252,196,0.04);
    --sidebar-icon-hover:     rgba(0,252,196,0.10);

    --topbar-bg:     #000000;
    --topbar-border: rgba(0,252,196,0.07);

    --r-xs:2px; --r-sm:3px; --r-md:4px;
    --r-lg:6px; --r-xl:8px; --r-2xl:10px;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.98), 0 0 0 1px rgba(0,252,196,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,1),   0 0 8px rgba(0,252,196,0.04);
    --shadow-lg: 0 12px 32px #000,            0 0 20px rgba(0,252,196,0.06);
    --shadow-xl: 0 24px 56px #000,            0 0 40px rgba(0,252,196,0.08);
}

/* ══════════════════════════════════════════════════════════════════════
   EFECTOS ESPECIALES POR TEMA
══════════════════════════════════════════════════════════════════════ */

/* ── CARBON: topbar cristal + teal ── */
[data-theme="carbon"] .erp-topbar {
    background: rgba(12,16,32,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,198,178,0.07);
}
[data-theme="carbon"] .btn-primary {
    background: linear-gradient(135deg, #00c6b2, #00a898);
    border-color: transparent; color: #050810; font-weight:700;
    box-shadow: 0 2px 12px rgba(0,198,178,0.28);
}
[data-theme="carbon"] .btn-primary:hover {
    background: linear-gradient(135deg, #00e0cc, #00c6b2);
    box-shadow: 0 4px 22px rgba(0,198,178,0.44);
    transform: translateY(-1px);
}
[data-theme="carbon"] .nav-item.active { box-shadow: inset 3px 0 0 #00c6b2; }
[data-theme="carbon"] ::-webkit-scrollbar-thumb { background: rgba(0,198,178,0.14); }
[data-theme="carbon"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,198,178,0.28); }

/* ── OBSIDIAN: brillo dorado sutil ── */
[data-theme="obsidian"] .erp-sidebar {
    background: linear-gradient(180deg, #08080c 0%, #0c0c12 100%);
    box-shadow: inset -1px 0 0 rgba(208,168,72,0.07), 3px 0 20px rgba(0,0,0,0.60);
}
[data-theme="obsidian"] .btn-primary {
    background: linear-gradient(135deg, #d0a848, #b49038);
    border-color: transparent; color: #08080c; font-weight:700;
    box-shadow: 0 2px 12px rgba(208,168,72,0.32);
}
[data-theme="obsidian"] .btn-primary:hover {
    background: linear-gradient(135deg, #e8c868, #d0a848);
    box-shadow: 0 4px 22px rgba(208,168,72,0.48);
    transform: translateY(-1px);
}
[data-theme="obsidian"] ::-webkit-scrollbar-thumb { background: rgba(208,168,72,0.18); }
[data-theme="obsidian"] ::-webkit-scrollbar-thumb:hover { background: rgba(208,168,72,0.34); }

/* ── MIDNIGHT: topbar blur + tipografía grande ── */
[data-theme="midnight"] body { font-size: 14.5px; }
[data-theme="midnight"] .erp-topbar {
    background: rgba(8,11,24,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
[data-theme="midnight"] .btn-primary {
    background: linear-gradient(135deg, #34b4ff, #1c9ef0);
    border-color: transparent; color: #04060e; font-weight:700;
    box-shadow: 0 2px 12px rgba(52,180,255,0.30);
}
[data-theme="midnight"] .btn-primary:hover {
    box-shadow: 0 4px 22px rgba(52,180,255,0.46); transform: translateY(-1px);
}
[data-theme="midnight"] ::-webkit-scrollbar-thumb { background: rgba(52,180,255,0.14); }
[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover { background: rgba(52,180,255,0.28); }

/* ── AURORA: glow violeta envolvente ── */
[data-theme="aurora"] .erp-sidebar {
    background: linear-gradient(180deg, #04041a 0%, #080824 100%);
    border-right: 1px solid rgba(124,72,255,0.08);
    box-shadow: 3px 0 24px rgba(0,0,0,0.55);
}
[data-theme="aurora"] .btn-primary {
    background: linear-gradient(135deg, #7c48ff, #6830f0);
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(124,72,255,0.36);
}
[data-theme="aurora"] .btn-primary:hover {
    background: linear-gradient(135deg, #9a6cff, #7c48ff);
    box-shadow: 0 4px 24px rgba(124,72,255,0.52);
    transform: translateY(-1px);
}
[data-theme="aurora"] .nav-item.active { box-shadow: inset 3px 0 0 #7c48ff; }
[data-theme="aurora"] ::-webkit-scrollbar-thumb { background: rgba(124,72,255,0.18); }
[data-theme="aurora"] ::-webkit-scrollbar-thumb:hover { background: rgba(124,72,255,0.34); }

/* ── OCEAN ── */
[data-theme="ocean"] .btn-primary {
    background: linear-gradient(135deg, #00b0d8, #0094bc);
    border-color: transparent; color: #060e18; font-weight:700;
    box-shadow: 0 2px 12px rgba(0,176,216,0.30);
}
[data-theme="ocean"] .btn-primary:hover {
    background: linear-gradient(135deg, #00ccf8, #00b0d8);
    box-shadow: 0 4px 22px rgba(0,176,216,0.46); transform: translateY(-1px);
}
[data-theme="ocean"] ::-webkit-scrollbar-thumb { background: rgba(0,176,216,0.14); }
[data-theme="ocean"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,176,216,0.28); }

/* ── FOREST ── */
[data-theme="forest"] .btn-primary {
    background: linear-gradient(135deg, #00c460, #00a44e);
    border-color: transparent; color: #020c06; font-weight:700;
    box-shadow: 0 2px 12px rgba(0,196,96,0.30);
}
[data-theme="forest"] .btn-primary:hover {
    background: linear-gradient(135deg, #00e078, #00c460);
    box-shadow: 0 4px 22px rgba(0,196,96,0.46); transform: translateY(-1px);
}
[data-theme="forest"] ::-webkit-scrollbar-thumb { background: rgba(0,196,96,0.14); }
[data-theme="forest"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,196,96,0.28); }

/* ── EMBER ── */
[data-theme="ember"] .btn-primary {
    background: linear-gradient(135deg, #ec4c24, #d03c14);
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(236,76,36,0.36);
}
[data-theme="ember"] .btn-primary:hover {
    background: linear-gradient(135deg, #ff6840, #ec4c24);
    box-shadow: 0 4px 22px rgba(236,76,36,0.52); transform: translateY(-1px);
}
[data-theme="ember"] ::-webkit-scrollbar-thumb { background: rgba(236,76,36,0.18); }
[data-theme="ember"] ::-webkit-scrollbar-thumb:hover { background: rgba(236,76,36,0.34); }

/* ── VOID: terminal total ── */
[data-theme="void"] body { font-size: 13px; letter-spacing: .02em; }
[data-theme="void"] .erp-sidebar {
    background: #000;
    border-right: 1px solid rgba(0,252,196,0.07);
    box-shadow: 2px 0 20px rgba(0,252,196,0.02);
}
[data-theme="void"] .erp-topbar {
    background: #000;
    border-bottom: 1px solid rgba(0,252,196,0.07);
}
[data-theme="void"] .btn-primary {
    background: transparent;
    border: 1px solid #00fcc4; color: #00fcc4;
    letter-spacing: .06em;
    box-shadow: 0 0 12px rgba(0,252,196,0.15), inset 0 0 12px rgba(0,252,196,0.03);
}
[data-theme="void"] .btn-primary:hover {
    background: rgba(0,252,196,0.07);
    box-shadow: 0 0 24px rgba(0,252,196,0.28), inset 0 0 16px rgba(0,252,196,0.06);
    transform: translateY(-1px);
}
[data-theme="void"] .nav-item.active {
    box-shadow: inset 2px 0 0 #00fcc4, 0 0 12px rgba(0,252,196,0.05);
}
[data-theme="void"] ::-webkit-scrollbar-thumb { background: rgba(0,252,196,0.14); }
[data-theme="void"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,252,196,0.28); }

/* ── PERLA: botón amatista ── */
[data-theme="perla"] .btn-primary {
    background: linear-gradient(135deg, #7048c8, #5c38b0);
    border-color: transparent; color: #fff;
    box-shadow: 0 2px 10px rgba(112,72,200,0.28);
}
[data-theme="perla"] .btn-primary:hover {
    background: linear-gradient(135deg, #8c60e0, #7048c8);
    box-shadow: 0 4px 20px rgba(112,72,200,0.44); transform: translateY(-1px);
}

/* ── ARENA: botón cobre ── */
[data-theme="arena"] .btn-primary {
    background: linear-gradient(135deg, #c46800, #a45400);
    border-color: transparent; color: #fff;
    box-shadow: 0 2px 10px rgba(196,104,0,0.28);
}
[data-theme="arena"] .btn-primary:hover {
    background: linear-gradient(135deg, #e08400, #c46800);
    box-shadow: 0 4px 20px rgba(196,104,0,0.42); transform: translateY(-1px);
}

/* ── Scrollbar dark global ── */
[data-theme="carbon"] ::-webkit-scrollbar-track,
[data-theme="obsidian"] ::-webkit-scrollbar-track,
[data-theme="midnight"] ::-webkit-scrollbar-track,
[data-theme="ocean"] ::-webkit-scrollbar-track,
[data-theme="forest"] ::-webkit-scrollbar-track,
[data-theme="aurora"] ::-webkit-scrollbar-track,
[data-theme="ember"] ::-webkit-scrollbar-track,
[data-theme="void"] ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }

/* ══ Aliases de compatibilidad ══ */
[data-theme="dark"]      { --primary:#050810; --primary-mid:#00c6b2; --sidebar-bg:#050810;
                           --bg:#070b14; --surface:#0c1020; --surface2:#12182c; }
[data-theme="noche"]     { --primary:#050810; --primary-mid:#00c6b2; --sidebar-bg:#050810; }
[data-theme="copper"]    { --primary:#0c0402; --primary-mid:#ec4c24; --sidebar-bg:#080200; }
[data-theme="aurora_dk"] { --primary:#060616; --primary-mid:#7c48ff; --sidebar-bg:#04041a; }
[data-theme="copper_lt"] { --primary:#381c00; --primary-mid:#c46800; --sidebar-bg:#381c00; }
[data-theme="rose_lt"]   { --primary:#3d0a1e; --primary-mid:#f43f5e; --sidebar-bg:#3d0a1e; }
[data-theme="sakura"]    { --primary:#2d1533; --primary-mid:#ec4899; --sidebar-bg:#2d1533; }
[data-theme="midnight"]  {} /* ya definido arriba */
[data-theme="neon_rose"] { --primary:#12020a; --primary-mid:#f472b6; --sidebar-bg:#12020a; }
[data-theme="candy"]     { --primary:#1a0015; --primary-mid:#ec4899; --sidebar-bg:#1a0015; }