/* ============================================================
   JMN — Variáveis de TEMA (fonte única)
   Usado por: dashboard financeiro (atualizar_dashboard._embutir_css),
   dashboards RH (html_assembler_rh) e telas Flask (rota /theme.css).
   O tema padrão (Escuro) vive no :root. Cada tema alternativo é um
   bloco html[data-theme="..."] que sobrescreve as variáveis.
   Cores que participam de rgba() têm par --*-rgb ("R,G,B").
   Para criar um tema novo: copie o bloco "claro" e ajuste os valores.
   ============================================================ */
:root {
  color-scheme: dark;
  --navy:   #060216ab;
  --gold:   #f0a440;
  --gold-rgb: 240, 192, 64;
  --gold2-rgb: 200, 168, 75;      /* dourado dos botões (voltar/collapse) */
  --light:  #07070f;              /* fundo da página */
  --card:   #12121e;
  --text:   #e8e8f2;
  --sub:    #8888aa;
  --green:  #2bff01;
  --green-rgb: 0, 230, 118;
  --green-badge: #00e676;
  --red:    #ff0015;
  --red-rgb: 255, 71, 87;
  --red-badge: #ff4757;
  --orange: #ff6702;
  --orange-rgb: 255, 165, 2;
  --orange-badge: #ffa502;
  --gold-badge: #f0c040;
  --border: #48484b;
  --radius: 10px;
  --card-glow: 0 2px 16px rgba(0,0,0,0.55);
  --header-bg: #0a0e1c;           /* header, nav e cabeçalhos de modal */
  --kpi-accent: #2a3a5a;          /* borda esquerda padrão do kpi-card */
  --table-head-bg: #0f1e3d;
  --code-bg: #07070f;
  --code-text: #00e676;
  --code-border: rgba(0, 230, 118, 0.2);
  --overlay: rgba(0, 0, 0, 0.75);
  --modal-shadow: 0 8px 48px rgba(0,0,0,0.7);
  --on-gold: #0a0a0a;             /* texto sobre fundo dourado (hover) */
  --on-accent: #fff;              /* texto sobre pills/acentos */
  --glow-green:  0 0 10px rgba(0,230,118,0.4);
  --glow-red:    0 0 10px rgba(255,71,87,0.4);
  --glow-orange: 0 0 10px rgba(255,165,2,0.4);
  /* tokens dos inline styles das páginas / popups / chat */
  --gold2: #c8a84b;
  --bg-inset: #12162a;
  --bg-inset2: #1a1a2e;
  --border-soft: #22223a;
  --border2: #2a2a42;
  --border3: #3a3a5a;
  --text-soft: #c8c8e0;
  --text-soft2: #e0e0f0;
  --sub2: #aaa;
  --red2: #e74c3c;
  --red2-rgb: 231, 76, 60;
  --overlay2: rgba(0, 0, 0, 0.72);
  --pop-shadow: 0 24px 64px rgba(0,0,0,.8);
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.45);
  --subtle-bg: rgba(255,255,255,0.05);
  --subtle-bg2: rgba(255,255,255,0.08);
  --chat-bg: #0e1022;
  --chat-shadow: 0 16px 48px rgba(0,0,0,0.7);
  /* chips "Ver por" e cards internos dos popups */
  --bg-inset3: #0e1124;
  --sub3: #aaaacc;
  --blue: #3498db;
  --chip-active-bg: #3a3a5a;
  --chip-gold-text: #12162a;
  /* header / navegação (temáveis) */
  --header-text: #fff;
  --header-text-dim: rgba(255,255,255,0.65);
  --header-text-dim2: rgba(255,255,255,0.7);
  --header-text-dim3: rgba(255,255,255,0.55);
  --header-shadow: 0 2px 16px rgba(0,0,0,0.7);
  --nav-border-top: rgba(255,255,255,0.06);
  --nav-hover-bg: rgba(255,255,255,0.08);
  --nav-active-bg: rgba(255,255,255,0.1);
  --nav-btn-border: rgba(255,255,255,0.2);
}

/* TEMA CLARO — PRÉVIA (paleta definitiva será refinada na etapa 3) */
html[data-theme="claro"] {
  color-scheme: light;
  --gold:   #b07d1e;
  --gold-rgb: 176, 125, 30;
  --gold2-rgb: 160, 122, 40;
  --light:  #e8eaf1;              /* fundo mais escuro que o card → separação */
  --card:   #ffffff;
  --text:   #1c1e2b;
  --sub:    #5a5e75;
  --green:  #1a8f3c;
  --green-rgb: 20, 140, 70;
  --green-badge: #0e8f4d;
  --red:    #c62828;
  --red-rgb: 198, 40, 40;
  --red-badge: #c62828;
  --orange: #b35a00;
  --orange-rgb: 179, 90, 0;
  --orange-badge: #b36a00;
  --gold-badge: #a8791a;
  --border: #ccd0dd;
  --card-glow: 0 1px 4px rgba(20,25,60,0.10), 0 5px 18px rgba(20,25,60,0.07);
  --kpi-accent: #b9c4d8;
  --table-head-bg: #e7ebf5;
  --code-bg: #f0f0f5;
  --code-text: #0a7a3d;
  --code-border: #d5d7e0;
  --overlay: rgba(10, 14, 28, 0.45);
  --modal-shadow: 0 8px 32px rgba(20,25,60,0.25);
  --on-gold: #fff;
  --glow-green:  none;
  --glow-red:    none;
  --glow-orange: none;
  --navy: #ffffff;
  --header-bg: #ffffff;
  --gold2: #8a6d1f;
  --bg-inset: #eef1f7;
  --bg-inset2: #e7eaf3;
  --border-soft: #dde1ec;
  --border2: #cdd1de;
  --border3: #b8bdd0;
  --text-soft: #3a3e55;
  --text-soft2: #2e3248;
  --sub2: #767b8f;
  --red2: #c0392b;
  --red2-rgb: 192, 57, 43;
  --overlay2: rgba(10, 14, 28, 0.45);
  --pop-shadow: 0 24px 64px rgba(20,25,60,.3);
  --shadow-soft: 0 8px 24px rgba(20,25,60,0.18);
  --subtle-bg: rgba(10,14,28,0.05);
  --subtle-bg2: rgba(10,14,28,0.08);
  --chat-bg: #ffffff;
  --chat-shadow: 0 16px 48px rgba(20,25,60,0.28);
  --bg-inset3: #eef1f7;
  --sub3: #6a6e88;
  --blue: #2471a3;
  --chip-active-bg: #3a3e55;
  --chip-gold-text: #ffffff;
  --header-text: #1c1e2b;
  --header-text-dim: rgba(28,30,43,0.75);
  --header-text-dim2: rgba(28,30,43,0.7);
  --header-text-dim3: rgba(28,30,43,0.55);
  --header-shadow: 0 2px 12px rgba(20,25,60,0.1);
  --nav-border-top: rgba(10,14,28,0.06);
  --nav-hover-bg: rgba(10,14,28,0.06);
  --nav-active-bg: rgba(10,14,28,0.09);
  --nav-btn-border: rgba(10,14,28,0.2);
}

/* TEMA COLORIDO — base clara com header esmeralda e acentos quentes */
html[data-theme="colorido"] {
  color-scheme: light;
  --navy: #1f6f4a;
  --header-bg: #1f6f4a;
  --gold: #c08a17;
  --gold-rgb: 192, 138, 23;
  --gold2: #1f6f4a;
  --gold2-rgb: 31, 111, 74;
  --light: #eef3ee;
  --card: #ffffff;
  --text: #1c2b21;
  --sub: #566b5d;
  --green: #1a8f3c;
  --green-rgb: 20, 140, 70;
  --green-badge: #0e8f4d;
  --red: #c62828;
  --red-rgb: 198, 40, 40;
  --red-badge: #c62828;
  --orange: #b35a00;
  --orange-rgb: 179, 90, 0;
  --orange-badge: #b36a00;
  --gold-badge: #a8791a;
  --border: #c6d4c9;
  --card-glow: 0 1px 4px rgba(20,50,32,0.10), 0 5px 18px rgba(20,50,32,0.07);
  --kpi-accent: #a3c9b2;
  --table-head-bg: #e2efe6;
  --code-bg: #eef3ee;
  --code-text: #157a45;
  --code-border: #c6d4c9;
  --overlay: rgba(14, 32, 21, 0.45);
  --modal-shadow: 0 8px 32px rgba(20,50,32,0.25);
  --on-gold: #fff;
  --glow-green:  none;
  --glow-red:    none;
  --glow-orange: none;
  --bg-inset: #eaf2ec;
  --bg-inset2: #e3ede6;
  --bg-inset3: #eaf2ec;
  --border-soft: #dbe6dd;
  --border2: #cbd7ce;
  --border3: #b0c3b5;
  --text-soft: #37503f;
  --text-soft2: #2b4335;
  --sub2: #6f8276;
  --sub3: #60766a;
  --red2: #c0392b;
  --red2-rgb: 192, 57, 43;
  --overlay2: rgba(14, 32, 21, 0.45);
  --pop-shadow: 0 24px 64px rgba(20,50,32,.3);
  --shadow-soft: 0 8px 24px rgba(20,50,32,0.18);
  --subtle-bg: rgba(20,60,35,0.05);
  --subtle-bg2: rgba(20,60,35,0.08);
  --chat-bg: #ffffff;
  --chat-shadow: 0 16px 48px rgba(20,50,32,0.28);
  --blue: #2471a3;
  --chip-active-bg: #1f6f4a;
  --chip-gold-text: #ffffff;
  --header-text: #ffffff;
  --header-text-dim: rgba(255,255,255,0.78);
  --header-text-dim2: rgba(255,255,255,0.72);
  --header-text-dim3: rgba(255,255,255,0.6);
  --header-shadow: 0 2px 12px rgba(20,50,32,0.2);
  --nav-border-top: rgba(255,255,255,0.12);
  --nav-hover-bg: rgba(255,255,255,0.12);
  --nav-active-bg: rgba(255,255,255,0.18);
  --nav-btn-border: rgba(255,255,255,0.35);
}

/* ══════════════════════════════════════════════════════════
   PAINEL DE CONFIGURAÇÕES (compartilhado — qualquer tela que
   carregue este CSS pode renderizar a engrenagem + painel)
   ══════════════════════════════════════════════════════════ */
#cfg-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--overlay);
  z-index: 9998;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
#cfg-overlay.show { display: flex; }

#cfg-panel {
  background: var(--card);
  border-radius: 12px;
  width: 94%; max-width: 440px;
  box-shadow: var(--modal-shadow), 0 0 0 1px var(--border);
  overflow: hidden;
}
#cfg-header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 14px 18px;
  border-bottom: 1px solid var(--gold);
  display: flex; justify-content: space-between; align-items: center;
}
#cfg-header h3 { font-size: 15px; }
#cfg-close { background: none; border: none; color: var(--header-text); font-size: 18px; cursor: pointer; padding: 0 4px; }
#cfg-body { padding: 18px; }

.cfg-section h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--gold); margin-bottom: 10px;
}
.cfg-tema {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.cfg-tema:hover { background: rgba(var(--gold-rgb),0.07); }
.cfg-tema.ativo { border-color: var(--gold); background: rgba(var(--gold-rgb),0.10); }
.cfg-tema .swatches { display: flex; gap: 4px; flex-shrink: 0; }
.cfg-tema .sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); }
.cfg-tema .tema-nome { font-weight: 600; }
.cfg-tema .tema-desc { font-size: 11px; color: var(--sub); margin-left: auto; }
.cfg-note { font-size: 11px; color: var(--sub); margin-top: 10px; }
#btn-config {
  display: flex;
  align-items: center;
  background: var(--nav-hover-bg);
  border: 1px solid var(--nav-btn-border);
  color: var(--header-text);
  padding: 0.42rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
#btn-config:hover { background: var(--nav-active-bg); }