/* Motor de temas: 6 atmosferas independentes (data-theme). Cada uma define 100% das suas variáveis.
   A classe .light/.dark do <html> é só um espelho automático (setAtmosphere) para o CSS legado e o Tailwind; as cores vêm daqui.
   Camada de override: carrega por último e só troca variáveis/cores, nunca estrutura. */

/* ---------- Noturnas ---------- */
html[data-theme="obsidian"] {
  --bg-primary: #090D16; --bg-card: #111827; --bg-page: #090D16; --bg-surface: #111827; --bg-elevated: #1E293B; --bg-subcard: #1E293B; --bg-inset: #090D16;
  --bg-sidebar: #111827; --border-subtle: #1F2937; --border: #1F2937; --border-color: #1F2937;
  --text-main: #F8FAFC; --text-primary: #F8FAFC; --text-muted: #94A3B8; --text-secondary: #94A3B8;
  --accent: #F97316; --accent-primary: #F97316; --accent-hover: #EA580C; --accent-rgb: 249,115,22; --accent-text: #FB923C; --btn-text: #FFFFFF; --gold: #F59E0B;
  --accent-dutch: #F97316; --accent-dutch-soft: #EA580C;
  --border-strong: #5C6777; --shadow-surface: 0 10px 30px -12px rgba(0,0,0,.55);
  --top-highlight: inset 0 1px 0 0 rgba(255,255,255,.05);
  color-scheme: dark;
}
html[data-theme="stealth"] {
  --bg-primary: #0A0A0C; --bg-card: #141418; --bg-page: #0A0A0C; --bg-surface: #141418; --bg-elevated: #1C1C22; --bg-subcard: #1C1C22; --bg-inset: #0A0A0C;
  --bg-sidebar: #141418; --border-subtle: #26262E; --border: #26262E; --border-color: #26262E;
  --text-main: #F4F4F5; --text-primary: #F4F4F5; --text-muted: #A1A1AA; --text-secondary: #A1A1AA;
  --accent: #10B981; --accent-primary: #10B981; --accent-hover: #059669; --accent-rgb: 16,185,129; --accent-text: #34D399; --btn-text: #FFFFFF; --gold: #F59E0B;
  --accent-dutch: #10B981; --accent-dutch-soft: #059669;
  --border-strong: #65656B; --shadow-surface: 0 10px 30px -12px rgba(0,0,0,.55);
  --top-highlight: inset 0 1px 0 0 rgba(255,255,255,.05);
  color-scheme: dark;
}
html[data-theme="executive"] {
  --bg-primary: #0B0F19; --bg-card: #151C2C; --bg-page: #0B0F19; --bg-surface: #151C2C; --bg-elevated: #1B2438; --bg-subcard: #1B2438; --bg-inset: #0B0F19;
  --bg-sidebar: #151C2C; --border-subtle: #222D42; --border: #222D42; --border-color: #222D42;
  --text-main: #F1F5F9; --text-primary: #F1F5F9; --text-muted: #94A3B8; --text-secondary: #94A3B8;
  --accent: #3B82F6; --accent-primary: #3B82F6; --accent-hover: #2563EB; --accent-rgb: 59,130,246; --accent-text: #60A5FA; --btn-text: #FFFFFF; --gold: #F59E0B;
  --accent-dutch: #3B82F6; --accent-dutch-soft: #2563EB;
  --border-strong: #606B7C; --shadow-surface: 0 10px 30px -12px rgba(0,0,0,.55);
  --top-highlight: inset 0 1px 0 0 rgba(255,255,255,.05);
  color-scheme: dark;
}

/* ---------- Diurnas (acento de texto mais escuro que o de preenchimento: AA em fundo claro) ---------- */
html[data-theme="paper"] {
  --bg-primary: #F5F2EB; --bg-card: #FCFBF7; --bg-page: #F5F2EB; --bg-surface: #FCFBF7; --bg-elevated: #EAE5D9; --bg-subcard: #EAE5D9; --bg-inset: #EAE5D9;
  --bg-sidebar: #FCFBF7; --border-subtle: #DED8C8; --border: #DED8C8; --border-color: #DED8C8;
  --text-main: #1C1917; --text-primary: #1C1917; --text-muted: #57534E; --text-secondary: #57534E;
  --accent: #D97706; --accent-primary: #D97706; --accent-hover: #B45309; --accent-rgb: 217,119,6; --accent-text: #984607; --btn-text: #FFFFFF; --gold: #9A4607;
  --accent-dutch: #D97706; --accent-dutch-soft: #B45309;
  --border-strong: #837F78; --shadow-surface: 0 1px 3px rgba(28,25,23,.07);
  --top-highlight: inset 0 1px 0 0 rgba(255,255,255,.9);
  color-scheme: light;
}
html[data-theme="daylight"] {
  --bg-primary: #F1F5F9; --bg-card: #FFFFFF; --bg-page: #F1F5F9; --bg-surface: #FFFFFF; --bg-elevated: #E2E8F0; --bg-subcard: #E2E8F0; --bg-inset: #E2E8F0;
  --bg-sidebar: #FFFFFF; --border-subtle: #CBD5E1; --border: #CBD5E1; --border-color: #CBD5E1;
  --text-main: #0F172A; --text-primary: #0F172A; --text-muted: #475569; --text-secondary: #475569;
  --accent: #4F46E5; --accent-primary: #4F46E5; --accent-hover: #4338CA; --accent-rgb: 79,70,229; --accent-text: #4338CA; --btn-text: #FFFFFF; --gold: #9A4607;
  --accent-dutch: #4F46E5; --accent-dutch-soft: #4338CA;
  --border-strong: #798494; --shadow-surface: 0 1px 3px rgba(15,23,42,.06);
  --top-highlight: inset 0 1px 0 0 rgba(255,255,255,.9);
  color-scheme: light;
}
html[data-theme="sage"] {
  --bg-primary: #EDF2F0; --bg-card: #F8FAF9; --bg-page: #EDF2F0; --bg-surface: #F8FAF9; --bg-elevated: #DFEAE5; --bg-subcard: #DFEAE5; --bg-inset: #DFEAE5;
  --bg-sidebar: #F8FAF9; --border-subtle: #C6D8D0; --border: #C6D8D0; --border-color: #C6D8D0;
  --text-main: #111C18; --text-primary: #111C18; --text-muted: #4A635A; --text-secondary: #4A635A;
  --accent: #059669; --accent-primary: #059669; --accent-hover: #047857; --accent-rgb: 5,150,105; --accent-text: #046C4E; --btn-text: #FFFFFF; --gold: #9A4607;
  --accent-dutch: #059669; --accent-dutch-soft: #047857;
  --border-strong: #71867E; --shadow-surface: 0 1px 3px rgba(17,28,24,.06);
  --top-highlight: inset 0 1px 0 0 rgba(255,255,255,.9);
  color-scheme: light;
}

/* ---------- Blindagem de contraste nas atmosferas claras ---------- */
html.light[data-theme] :is(.bg-accent, [class*="from-accent"], [class*="from-orange-500"], .hover\:bg-accent-hover, .nav2-opt-main, .subtab-on, .atmos-on-cta) { color: var(--btn-text); }
html.light[data-theme] :is(.bg-accent, [class*="from-accent"]) * { color: var(--btn-text); }
html.light[data-theme] button.bg-white\/5, html.light[data-theme] button[class*="bg-white/"], html.light[data-theme] .bg-slate-800, html.light[data-theme] .sw-dock-btn { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-subtle) !important; }


body { background-image: radial-gradient(at 0% 0%, rgba(var(--accent-rgb,255,85,0), .06) 0, transparent 48%), radial-gradient(at 100% 0%, rgba(var(--accent-rgb,249,115,22), .04) 0, transparent 45%) !important; }

/* ---------- superfícies: neutras e coerentes com a paleta ---------- */
html[data-theme].light .surface, html[data-theme].light .subcard, html[data-theme].light .guruja-task-card, html[data-theme].light .kpi-card { border-color: var(--border-subtle) !important; }
html[data-theme].light .subcard { background-color: var(--bg-surface) !important; }
html[data-theme] .subcard { background: var(--bg-subcard); }
html[data-theme]:not(.light) :is(.bg-slate-800, [class*="bg-slate-800/"]) { background-color: var(--bg-elevated) !important; }
html[data-theme] .sidebar-panel { background: var(--bg-surface); border-color: var(--border-subtle); }
html[data-theme] #mobile-top-bar, html[data-theme] .bn2 { background: color-mix(in srgb, var(--bg-surface) 94%, transparent) !important; border-color: var(--border-subtle) !important; }
html[data-theme] .subtabs { background: color-mix(in srgb, var(--bg-surface) 94%, transparent); border-color: var(--border-subtle); }
html[data-theme] .sw-dock { background: var(--bg-elevated); color: var(--text-primary); border-color: rgba(var(--accent-rgb), .35); }
html[data-theme] .sw-dock-lbl { color: var(--text-secondary); }
html[data-theme] .sw-dock-btn { background: color-mix(in srgb, var(--text-primary) 10%, transparent); color: var(--text-primary); }
html[data-theme] .sw-dock-save, html[data-theme] .sw-dock-dot-on + .sw-dock-lbl + .sw-dock-time + .sw-dock-btn + .sw-dock-save { background: var(--accent); color: var(--btn-text, #FFFFFF); }
html[data-theme] .nav2-sheet-box { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-subtle); }
html[data-theme] .nav2-opt { background: var(--bg-elevated); color: var(--text-primary); }
html[data-theme] .nav2-opt-main { background: var(--accent); color: var(--btn-text, #FFFFFF); }
html[data-theme] .nav2-opt-ghost { background: transparent; border-color: var(--border-subtle); }
html[data-theme] .nav2-row select { background: var(--bg-inset); color: var(--text-primary); border-color: var(--border-subtle); }
html[data-theme] .bn2-fab { border-color: var(--bg-surface); background: var(--accent); }
html[data-theme] .bn2-item { color: var(--text-secondary); }
html[data-theme] .bn2-item.bn2-on, html[data-theme] .bn2-center .bn2-label { color: var(--accent-text); }
html[data-theme] .subtab { color: var(--text-secondary); }
html[data-theme] .subtab:hover { color: var(--text-primary); }
html[data-theme] .subtab-on { background: var(--accent); color: var(--btn-text, #FFFFFF); box-shadow: none; }
html[data-theme] .nav2-item, html[data-theme] .nav2-item .nav2-ico, html[data-theme] .nav2-subitem { color: var(--text-secondary); }
html[data-theme] .nav2-item:hover, html[data-theme] .nav2-item.nav-active, html[data-theme] .nav2-item.nav2-has-active, html[data-theme] .nav2-subitem:hover { color: var(--text-primary); }
html[data-theme] .nav2-item:hover .nav2-ico, html[data-theme] .nav2-item.nav-active .nav2-ico, html[data-theme] .nav2-has-active .nav2-ico { color: var(--accent-text); }
html[data-theme] .nav2-subitem.on { color: var(--accent-text); background: rgba(var(--accent-rgb), .12); }
html[data-theme] .nav2-sep, html[data-theme] .nav2-sub-in { border-color: var(--border-subtle); }
html[data-theme] .nav2-sep { background: var(--border-subtle); }
html[data-theme] .nav-item:hover { background: rgba(var(--accent-rgb), .10); }
html[data-theme] .nav-active { color: var(--accent-text) !important; background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .40); box-shadow: none; }
html[data-theme] .nav2-badge, html[data-theme] .bn2-badge { background: var(--accent-hover); }
html[data-theme] .news-toggle { color: var(--accent-text); border-color: rgba(var(--accent-rgb), .4); }
html[data-theme] .surface-hover:hover { border-color: rgba(var(--accent-rgb), .45); }

/* ---------- hero da Home: sem creme/pêssego nem preto puro ---------- */
html[data-theme] #tce-motivation-banner.home-hero { background: linear-gradient(135deg, rgba(var(--accent-rgb), .10), transparent 55%), var(--bg-surface) !important; border-color: var(--border-subtle) !important; box-shadow: var(--shadow-surface), var(--top-highlight) !important; }
html[data-theme] .home-hero .hero-streak, html[data-theme] .home-hero .hero-more { background: color-mix(in srgb, var(--bg-elevated) 75%, transparent) !important; border-color: var(--border-subtle) !important; }
html[data-theme] .home-hero .hero-days { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-subtle) !important; }
html[data-theme] .home-hero .hero-streak > div:first-child { border-right-color: var(--border-subtle) !important; }
html[data-theme] .home-hero h2 { color: var(--text-primary) !important; }
html[data-theme] .home-hero #tce-quote { color: var(--text-secondary) !important; }

/* ---------- 4 KPIs: mesma superfície; cor só em pílulas e barras ---------- */
html[data-theme] .home-kpis > div { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; box-shadow: var(--top-highlight) !important; border-radius: .9rem; }
html[data-theme] .home-kpis > div:hover { background: var(--bg-surface) !important; border-color: color-mix(in srgb, var(--text-primary) 18%, var(--border-subtle)) !important; }
html[data-theme] .home-kpis > div > div:first-child > span:first-child { color: var(--text-secondary) !important; }
html[data-theme] .home-kpis [id^="kpi-"][class*="text-3xl"] { color: var(--text-primary) !important; }
html[data-theme] .home-kpis > div > div:first-child > span:last-child { display: none; }
html[data-theme] .home-kpis [id^="kpi-"][class*="text-3xl"], html[data-theme] .home-kpis [id$="-bar"] { }
html[data-theme] .home-kpis [class*="h-1 "] { height: 4px; }

/* ---------- tipografia tabular ---------- */
.tabular-nums, [class*="tabular-nums"], .home-kpis [id^="kpi-"], #tce-days-left, #sw-display, #sw-display-mini, .sw-dock-time, #streak-counter, [id^="hist-kpi-"], #forge-heat-badge, #hdr-rank-label, #sq-score-net { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* ---------- micro-transições táteis ---------- */
.nav2-item, .nav2-subitem, .bn2-item, .subtab, .sw-dock-btn, .nav2-opt, .atmos-opt, .news-toggle, .hero-cta button, .hdr-rank { transition: all .18s cubic-bezier(.16,1,.3,1); }
.surface, .subcard, .home-kpis > div { transition: background-color .18s cubic-bezier(.16,1,.3,1), border-color .18s cubic-bezier(.16,1,.3,1), box-shadow .18s cubic-bezier(.16,1,.3,1), transform .18s cubic-bezier(.16,1,.3,1); }
.nav2-item:active, .nav2-subitem:active, .bn2-item:active, .subtab:active, .sw-dock-btn:active, .nav2-opt:active, .atmos-opt:active, .hero-cta button:active, .hdr-rank:active { transform: scale(.98); }
.bn2-center:active .bn2-fab { transform: scale(.94); }
.home-kpis > div:active { transform: scale(.99); }
@media (prefers-reduced-motion: reduce) { .nav2-item, .nav2-subitem, .bn2-item, .subtab, .surface, .subcard { transition: none; } }

/* ---------- seletor Atmosfera Visual ---------- */
.atmos { padding: .55rem .6rem .6rem; border-radius: .9rem; background: var(--bg-elevated, rgba(255,255,255,.04)); border: 1px solid var(--border-subtle); }
.atmos-title { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary, #94a3b8); margin-bottom: .45rem; }
.atmos-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.atmos-opt { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .4rem .2rem; border-radius: .7rem; border: 1.5px solid transparent; font-size: 10px; font-weight: 800; color: var(--text-secondary, #94a3b8); cursor: pointer; }
.atmos-opt:hover { color: var(--text-primary, #fff); background: color-mix(in srgb, var(--text-primary, #fff) 6%, transparent); }
.atmos-opt.atmos-on { border-color: var(--accent, #FF5500); color: var(--text-primary, #fff); }
.atmos-sw { width: 26px; height: 26px; border-radius: 999px; background: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw-ac) 50% 100%); border: 2px solid var(--border-subtle); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* ---------- light: elimina os tons creme/pêssego remanescentes ---------- */
html[data-theme].light #main-sidebar { background-color: var(--bg-surface) !important; }
html[data-theme].light .sq-alt:hover:not(.sq-locked) { background: var(--bg-elevated); }
html[data-theme].light button.bg-white\/5:hover { background-color: var(--bg-elevated) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; }
html[data-theme].light #nb-markdown-content div[class*="bg-accent"] { background-color: var(--bg-elevated) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; }

/* Trincheira: botão laranja fixo do Tailwind → neutro com acento da paleta (ouro fica só na gamificação) */
html[data-theme] .home-hero .hero-secondary button { color: var(--text-primary); }

/* ---------- contraste dos botões da Home (claro e escuro) ---------- */
html[data-theme] .hero-cta-main, html[data-theme] .hero-cta-main *,
html[data-theme] [class~="from-accent"], html[data-theme] [class~="from-accent"] *,
html[data-theme] .nav2-opt-main, html[data-theme] .nav2-opt-main *, html[data-theme] .subtab-on { color: var(--btn-text, #FFFFFF) !important; }
/* Trincheira: texto sempre legível (acento da paleta), inclusive os spans internos */

/* a regra antiga "html.light #tce-motivation-banner .text-white" usa id: iguala/supera a especificidade aqui */
html[data-theme] #tce-motivation-banner .hero-cta-main, html[data-theme] #tce-motivation-banner .hero-cta-main * { color: var(--btn-text, #FFFFFF) !important; }
html[data-theme] #tce-motivation-banner .hero-secondary button, html[data-theme] #tce-motivation-banner .hero-secondary button * { color: var(--text-primary) !important; }

/* Atmosfera: sai do menu e vira um popover (🎨) com as 6 cores numa linha */
.atmos.atmos-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; padding: .5rem .55rem; border-radius: 1rem; background: var(--bg-card, #111827); border: 1px solid var(--border-color, rgba(255,255,255,.12)); box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.atmos.atmos-pop.is-open { display: block; }
.atmos-pop .atmos-title, .atmos-pop .atmos-opt > span:last-child { display: none; }
.atmos-pop .atmos-opts { display: flex; gap: .35rem; }
.atmos-pop .atmos-opt { padding: .2rem; }
.atmos.atmos-pop { left: 0; right: auto; padding: .4rem .5rem; }
.atmos-pop .atmos-opts { gap: .25rem; }
.atmos-pop .atmos-opt { padding: .15rem; }
.atmos-pop .atmos-sw { width: 20px; height: 20px; }

/* ---------- Campos, foco e contraste (valores medidos pela auditoria WCAG 2.1 das 6 atmosferas) ----------
   Texto: todos os pares texto/fundo >= 4,5:1. Campos: borda >= 3:1 contra o campo e o card (--border-strong). Foco: anel na cor do acento
   (--accent-text, >= 3:1 em todas). Sem !important: estes seletores já vencem as classes do Tailwind (0,1,0). */
html[data-theme] :is(input, select, textarea)[class~="border"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([class*="border-0"]):not([class*="border-none"]) {
  background-color: var(--bg-inset); color: var(--text-primary); border-color: var(--border-strong);
}
html[data-theme] :is(input, textarea)::placeholder { color: var(--text-secondary); opacity: 1; }
html[data-theme] :is(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
html[data-theme] :is(a, button, summary, [role="tab"], [role="radio"], [role="button"], [role="switch"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px;
}
html[data-theme] :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: var(--accent-text); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .25); }
html[data-theme] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }
.atmos-opt.atmos-now:not(.atmos-on) { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- texto de apoio legível em todas as atmosferas (auditoria no navegador: os tons slate fixos do Tailwind ficavam abaixo de 4,5:1) ---------- */
html[data-theme] .text-slate-500 { color: var(--text-muted); }
html.light[data-theme] :is(.text-slate-300, .text-slate-400) { color: var(--text-secondary); }
html.light[data-theme] :is(.text-amber-300, .text-amber-400, .text-yellow-400) { color: var(--gold); }