/* =============================================================================
   GAIA VIP — Tokens / Theme Variables
   -----------------------------------------------------------------------------
   Variables CSS del tema (dark por defecto + overrides en modo light).
   - Aquí se tocan colores/estética global.
   - El resto de CSS debería “seguir” estas variables.
   - Incluye variables específicas del simulador para aislar su look.
   ============================================================================= */

    :root {
        /* Fondos */
        --bg-body: #0b0d10;
        --bg-shell: #0b0d10;
        --bg-sidebar: #0f1115;
        --bg-surface: #14171d;
        --bg-surface-soft: #1a1f27;
        --bg-topbar: #0f1115;
        /* Bordes */
        --border-subtle: #262a33;
        --border-strong: #343a46;
        /* Texto */
        --text-main: #f3f4f6;
        --text-muted: #a7afbd;
        --text-soft: #7b8596;
        /* Acento */
        --accent-primary: #0ff1b3;
        --accent-primary-soft: rgba(15,241,179,.12);
        --accent-primary-strong: #03c487;
        /* Inputs */
        --input-bg: #0f1217;
        --input-border: #2a2f3a;
        --input-bg-focus: #121620;
        /* Simulador */
        --sim-cell-bg: rgba(255,255,255,.12);
        --sim-cell-border: rgba(255,255,255,.28);
        --sim-track-bg: rgba(255,255,255,.10);
        --sim-track-border: rgba(255,255,255,.25);
        --sim-green-bg: rgba(0, 255, 170, .45);
        --sim-green-border: rgba(0, 255, 170, .80);
        --sim-btn-border: rgba(255,255,255,.55);
        --sim-btn-border-hover: rgba(255,255,255,.75);
        --sim-lvl1: rgba(255, 77, 77, .18);
        --sim-lvl2: rgba(255, 153, 51, .18);
        --sim-lvl3: rgba(255, 230, 77, .18);
        --sim-lvl4: rgba(77, 255, 153, .18);
        --sim-lvl5: rgba(77, 195, 255, .18);
        --sim-lvl6: rgba(180, 120, 255, .18);
    }

    body[data-theme="light"] {
        --bg-body: #f5f6f8;
        --bg-shell: #f5f6f8;
        --bg-sidebar: #ffffff;
        --bg-surface: #ffffff;
        --bg-surface-soft: #f3f4f6;
        --bg-topbar: #ffffff;
        --border-subtle: #e5e7eb;
        --border-strong: #d1d5db;
        --text-main: #111827;
        --text-muted: #6b7280;
        --text-soft: #9ca3af;
        --input-bg: #ffffff;
        --input-border: #d1d5db;
        --input-bg-focus: #f9fafb;
        /* Simulador en claro */
        --sim-cell-bg: rgba(17,24,39,.05);
        --sim-cell-border: rgba(17,24,39,.18);
        --sim-track-bg: rgba(17,24,39,.04);
        --sim-track-border: rgba(17,24,39,.18);
        --sim-btn-border: rgba(17,24,39,.25);
        --sim-btn-border-hover: rgba(17,24,39,.40);
    }