/* ══ TEMA OSCURO (default) — los valores son EXACTAMENTE los históricos
       para que el dark quede pixel-idéntico tras el refactor a variables ══ */
    :root {
      --bg-dark:    #0d0d0d;
      --bg-card:    #141414;
      --bg-sidebar: #111111;
      --bg-elevated:#1a1a1a;   /* headers de tabla, dropdowns */
      --bg-input:   #1c1c1c;   /* form-control */
      --bg-inset:   #101010;   /* inputs/cards hundidos (finanzas) */
      --bg-deep:    #0a0a0a;
      --cyan:       #00e5ff;
      --green:      #00ff88;
      --red:        #ff4d4d;
      --yellow:     #ffd700;
      --text-main:  #e0e0e0;
      --text-muted: #777;
      --text-dim:   #555;
      --text-soft:  #888;
      --text-weak:  #999;
      --text-bright:#aaa;
      --border:     #2a2a2a;
      --border-soft:#222;
      --border-strong:#333;
      /* Overlays blancos sutiles (hover de filas, fondos tenues) */
      --overlay-02: rgba(255,255,255,.02);
      --overlay-03: rgba(255,255,255,.03);
      --overlay-04: rgba(255,255,255,.04);
      --overlay-05: rgba(255,255,255,.05);
      --overlay-06: rgba(255,255,255,.06);
      --overlay-08: rgba(255,255,255,.08);
      --overlay-10: rgba(255,255,255,.1);
      --overlay-20: rgba(255,255,255,.2);
      --overlay-30: rgba(255,255,255,.3);
      --overlay-50: rgba(255,255,255,.5);
      --focus-ring: rgba(0,229,255,.15);
      --on-accent:  #000;      /* texto sobre botones de acento */
      --cyan-hover: #00c8e0;
      --shadow-card: 0 4px 12px rgba(0,0,0,.4);
      /* Chart.js lee estos via getChartTheme() */
      --chart-grid: rgba(255,255,255,0.05);
      --chart-tick: #666;
      --chart-label:#888;
      --ticker-bg:  #131722;
      --ticker-border: #2a2e39;
      /* Páginas auth (login/registro/reset): paleta azulada propia */
      --auth-bg:     #0b0f19;
      --auth-card:   #121824;
      --auth-border: #1a2333;
      --auth-text:   #f8f9fa;
      --auth-muted:  #8997ad;
      --auth-soft:   #ccc;
      --auth-dim:    #666;
      --auth-violet: #7850ff;
    }

    /* ══ TEMA CLARO — override completo por variables ══ */
    [data-theme="light"] {
      --bg-dark:    #f7f8fa;
      --bg-card:    #ffffff;
      --bg-sidebar: #ffffff;
      --bg-elevated:#f1f3f6;
      --bg-input:   #f4f6f9;
      --bg-inset:   #f1f3f6;
      --bg-deep:    #eef0f4;
      --cyan:       #0097a7;   /* cyan oscuro, legible sobre blanco */
      --green:      #00a152;
      --red:        #d32f2f;
      --yellow:     #b58900;
      --text-main:  #14161a;
      --text-muted: #9099a8;
      --text-dim:   #5a6270;
      --text-soft:  #6b7382;
      --text-weak:  #8a93a2;
      --text-bright:#4a515e;
      --border:     #e2e5ea;
      --border-soft:#e9ecf1;
      --border-strong:#d5dae2;
      /* En claro los overlays "blancos" pasan a negros sutiles */
      --overlay-02: rgba(0,0,0,.02);
      --overlay-03: rgba(0,0,0,.03);
      --overlay-04: rgba(0,0,0,.04);
      --overlay-05: rgba(0,0,0,.05);
      --overlay-06: rgba(0,0,0,.06);
      --overlay-08: rgba(0,0,0,.08);
      --overlay-10: rgba(0,0,0,.1);
      --overlay-20: rgba(0,0,0,.2);
      --overlay-30: rgba(0,0,0,.3);
      --overlay-50: rgba(0,0,0,.5);
      --focus-ring: rgba(0,151,167,.25);
      --on-accent:  #ffffff;   /* cyan claro es oscuro: texto blanco */
      --cyan-hover: #00838f;
      --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
      --chart-grid: rgba(0,0,0,0.07);
      --chart-tick: #8a93a2;
      --chart-label:#5a6270;
      --ticker-bg:  #ffffff;
      --ticker-border: #e2e5ea;
      --auth-bg:     #f7f8fa;
      --auth-card:   #ffffff;
      --auth-border: #e2e5ea;
      --auth-text:   #14161a;
      --auth-muted:  #5a6270;
      --auth-soft:   #4a515e;
      --auth-dim:    #8a93a2;
      --auth-violet: #6a48e8;
    }