:root {
    --bg:         #0a0a0a;
    --surface:    #141414;
    --surface2:   #1c1c1c;
    --surface-glass: rgba(17,17,17,0.9);
    --border:     #2a2a2a;
    --border-glow: rgba(245,200,66,0.12);
    --c6yellow:   #f5c842;
    --c6gold:     #d4a017;
    --text:       #e8e8e8;
    --text-muted: #888;
    --text-dim:   #555;
    --green:      #22c55e;
    --red:        #ef4444;
    --blue:       #3b82f6;
    --orange:     #f97316;
    --purple:     #a855f7;
    --radius:     20px;
    --radius-sm:  12px;
    --radius-xs:  8px;
    --shadow:     0 4px 24px rgba(0,0,0,0.4);
    --glow-yellow: 0 2px 8px rgba(245,200,66,0.08);
    --gradient-hero: linear-gradient(135deg, #1a1a2e, #16213e);
    --gradient-gold: linear-gradient(135deg, #f5c842, #d4a017);
    --theme-transition: background .25s ease, color .25s ease, border-color .25s ease;
  }

  /* ── Light theme — sistema de cores completo ── */
  html.light {
    --bg:         #EEF2F7;
    --surface:    #FFFFFF;
    --surface2:   #F1F5F9;
    --surface-glass: rgba(255,255,255,0.95);
    --border:     #E2E8F0;
    --border-glow: rgba(180,83,9,0.12);
    --text:       #0F172A;
    --text-muted: #4B5E78;
    --text-dim:   #94A3B8;
    --c6yellow:   #B45309;
    --c6gold:     #92400E;
    --green:      #15803D;
    --red:        #DC2626;
    --blue:       #1D4ED8;
    --orange:     #C2410C;
    --purple:     #7C3AED;
    --shadow:     0 1px 3px rgba(15,23,42,0.07), 0 4px 16px rgba(15,23,42,0.05);
    --glow-yellow: none;
    --gradient-hero: linear-gradient(135deg, #F8FAFC, #EEF2F7);
    --gradient-gold: linear-gradient(135deg, #F59E0B, #D97706);
  }

  /* Transição suave ao trocar tema */
  html.theme-transitioning,
  html.theme-transitioning *,
  html.theme-transitioning *::before,
  html.theme-transitioning *::after {
    transition: background .28s ease, color .28s ease,
                border-color .28s ease, box-shadow .28s ease !important;
  }

  html.light #btn-theme-knob {
    transform: translateX(24px);
  }

  /* ══════════════════════════════════════════════════════
     LIGHT MODE — Correções de contraste e consistência
     Sobrescreve padrões dark-only do tema base
  ══════════════════════════════════════════════════════ */

  /* Login screen */
  html.light #login-screen {
    background: linear-gradient(145deg, #D8E4F0 0%, #C5D3E8 100%);
  }

  /* Bordas de tabela (rgba(white) = invisível em fundo claro) */
  html.light td { border-bottom-color: rgba(15,23,42,.07); }
  html.light tr:hover td { background: rgba(15,23,42,.03); }
  html.light .dinamica-table tbody tr:hover { background: rgba(15,23,42,.035); }
  html.light .dinamica-table tbody tr.selected { background: rgba(180,83,9,.07); }
  html.light .envios-table tr:hover td { background: rgba(15,23,42,.03); }
  html.light .bloco-header:hover { background: rgba(15,23,42,.05); }
  html.light .bloco-conta:hover { background: rgba(15,23,42,.03); }
  html.light .op-progress-row { border-bottom-color: var(--border); }

  /* Badges — fundos ajustados para fundo claro */
  html.light .badge-gray   { background: rgba(15,23,42,.09); }
  html.light .badge-yellow { background: rgba(180,83,9,.11); }
  html.light .badge-green  { background: rgba(21,128,61,.11); }
  html.light .badge-red    { background: rgba(220,38,38,.11); }
  html.light .badge-orange { background: rgba(194,65,12,.11); }
  html.light .badge-blue   { background: rgba(29,78,216,.11); }
  html.light .badge-purple { background: rgba(124,58,237,.11); }

  /* Subfila headers */
  html.light .subfila-header.gray   { background: rgba(15,23,42,.07); }
  html.light .subfila-header.red    { background: rgba(220,38,38,.10); }
  html.light .subfila-header.yellow { background: rgba(180,83,9,.10); }
  html.light .subfila-header.orange { background: rgba(194,65,12,.10); }
  html.light .subfila-header.blue   { background: rgba(29,78,216,.10); }
  html.light .subfila-header.purple { background: rgba(124,58,237,.10); }

  /* Tag tipos (strategy badges) */
  html.light .tag-tipo.predefinida   { background: rgba(29,78,216,.10); }
  html.light .tag-tipo.personalizada { background: rgba(124,58,237,.10); }

  /* Bloco operador */
  html.light .bloco-badge.pendente { background: rgba(180,83,9,.10); }
  html.light .btn-tratar.tratado   { background: rgba(21,128,61,.10); }

  /* No-data hint (amarelo em bege = horrível) */
  html.light .no-data-hint {
    background: rgba(180,83,9,.06);
    border-color: rgba(180,83,9,.22);
  }

  /* Envio actions bar */
  html.light .envio-actions {
    background: rgba(180,83,9,.06);
    border-color: rgba(180,83,9,.18);
  }

  /* Estratégia buttons */
  html.light .btn-estrategia:hover  { background: rgba(180,83,9,.06); }
  html.light .btn-estrategia.active { background: rgba(180,83,9,.09); border-color: var(--c6yellow); }

  /* Upload zone hover */
  html.light .upload-zone:hover,
  html.light .upload-zone.drag { background: rgba(180,83,9,.04); }

  /* Buttons com fundo amarelo brilhante — mantém a identidade da marca */
  html.light .btn-login        { background: #F59E0B; }
  html.light .btn-enviar       { background: #F59E0B; }
  html.light .btn-confirm-yellow { background: #F59E0B; }
  html.light .page-btn:hover,
  html.light .page-btn.active  { background: #F59E0B; border-color: #F59E0B; color: #000; }
  html.light .progress-bar     { background: #F59E0B; }
  html.light .spinner          { border-top-color: #F59E0B; }

  /* Cards com sombra mais pronunciada em fundo claro */
  html.light .kpi-card     { box-shadow: 0 1px 4px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.05); }
  html.light .chart-card   { box-shadow: 0 1px 3px rgba(15,23,42,.07); }
  html.light .table-card   { box-shadow: 0 1px 3px rgba(15,23,42,.07); }
  html.light .bloco-estrategia { box-shadow: 0 1px 3px rgba(15,23,42,.06); }
  html.light .login-card   { box-shadow: 0 8px 32px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.08); }