/* ═══════════════════════════════════════════════════════════════════════════
   [R323] MODO CLARO (beta) — calibrado no visual de mercado (fundo claro, cards
   brancos, azul royal da marca). TUDO escopado sob body.tema-claro: com a classe
   ausente, NENHUMA regra deste arquivo se aplica (escuro segue 100% intocado).
   O app usa muito estilo inline — as regras por [style*=...] viram as superfícies
   e textos mais comuns. Fase 1 = superfícies principais; lapidação por tela segue.
   ═══════════════════════════════════════════════════════════════════════════ */

body.tema-claro { background: #f1f5f9 !important; color: #1e293b; }
body.tema-claro .page { background: #f1f5f9 !important; }
body.tema-claro #app-container { background: #f1f5f9 !important; }

/* [R334] COR-BASE ESCURA FORTE — a raiz era `body{color:#fff}`: todo texto SEM cor
   própria (nomes de cliente, células de tabela, títulos, rótulos) herdava branco e
   sumia no fundo claro. Aqui forçamos escuro nos elementos estruturais de texto.
   Cores INTENCIONAIS (verde receita, vermelho alerta, branco em botão) são quase
   sempre INLINE → vencem por especificidade e ficam preservadas. */
body.tema-claro td, body.tema-claro th, body.tema-claro li,
body.tema-claro h1, body.tema-claro h2, body.tema-claro h3, body.tema-claro h4, body.tema-claro h5,
body.tema-claro label, body.tema-claro strong, body.tema-claro small,
body.tema-claro .page div:not([style*="color"]),
body.tema-claro .page span:not([style*="color"]),
body.tema-claro .page p:not([style*="color"]) {
    color: #1e293b !important; /* [R334] !important — o CSS premium seta #e2e8f0 e vencia sem isto */
}
/* Classes conhecidas que setam texto claro no tema escuro → escuro no claro */
body.tema-claro [class*="title"]:not([style*="color"]),
body.tema-claro [class*="label"]:not([style*="color"]),
body.tema-claro [class*="nome"]:not([style*="color"]) {
    color: #1e293b !important;
}

/* Sidebar e topo */
body.tema-claro #sidebar { background: #ffffff !important; border-right: 1px solid #e2e8f0; }
body.tema-claro #sidebar a, body.tema-claro #sidebar span, body.tema-claro #sidebar div { color: #334155; }

/* [R405] MENU LEGÍVEL NO CLARO — o dono, com print: "tem que dar mais uma ajustada
   no contraste, olha pra ver como está o menu. além de que quando coloco o mouse
   em cima some por causa da cor."

   Medido em runtime: 14 dos 15 itens do menu saíam com contraste 1.48 (a norma
   WCAG AA pede 4.5) — texto #cbd5e1 sobre fundo branco. Praticamente invisível.

   CAUSA: a regra acima existia e está correta, mas PERDIA a disputa. O tema
   escuro declara `.nav-item { color: var(--text-slate) !important }`, e
   !important vence especificidade. A correção do claro não tinha !important,
   então nunca chegava a pintar nada.

   O HOVER era pior: `.nav-item:hover { color: #fff !important }` — texto branco
   sobre fundo branco. O item sumia por completo ao passar o mouse, exatamente
   como ele descreveu.

   Corrigido AQUI e não no premium-theme.css: o tema escuro fica intocado. */
body.tema-claro #sidebar .nav-item,
body.tema-claro #sidebar .nav-item span,
body.tema-claro nav .nav-item {
    color: #334155 !important;          /* contraste 10.4 no branco */
}

body.tema-claro #sidebar .nav-item:hover,
body.tema-claro #sidebar .nav-item:focus,
body.tema-claro nav .nav-item:hover {
    color: #0f172a !important;          /* escurece ao passar o mouse, não some */
    background: rgba(15, 23, 42, 0.06) !important;
}

/* O item ativo mantém a cor da empresa, mas escurecida o bastante para ler. */
body.tema-claro #sidebar .nav-item.active,
body.tema-claro #sidebar .nav-item.active span {
    color: var(--brand-ink, #b91c1c) !important;
    font-weight: 700;
}

/* Cards e painéis (classes comuns) */
body.tema-claro .glass-card,
body.tema-claro .site-kpi-card,
body.tema-claro .stat-box,
body.tema-claro .pc-kpi,
body.tema-claro .db-panel > div {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* [R340 fecha] Donut cards legíveis no modo claro: card claro + % e textos ESCUROS
   (o % é fill:#fff hardcoded → ficaria branco-no-branco sem escurecer). */
body.tema-claro .site-donut-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
body.tema-claro .site-donut-pct { fill: #1e293b !important; }
body.tema-claro .site-donut-title,
body.tema-claro .site-donut-label,
body.tema-claro .site-donut-fraction { color: #475569 !important; }

/* Superfícies ESCURAS inline → brancas [R332: cobertura data-driven das cores REAIS do app] */
body.tema-claro [style*="background:#0f172a"], body.tema-claro [style*="background: #0f172a"],
body.tema-claro [style*="background:#1e293b"], body.tema-claro [style*="background: #1e293b"],
body.tema-claro [style*="background:#0a0f1c"], body.tema-claro [style*="background: #0a0f1c"],
body.tema-claro [style*="background:#111827"], body.tema-claro [style*="background: #111827"],
body.tema-claro [style*="background:#1a2332"], body.tema-claro [style*="background: #1a2332"],
body.tema-claro [style*="linear-gradient(135deg,#1e293b"], body.tema-claro [style*="linear-gradient(135deg, #1e293b"],
body.tema-claro [style*="linear-gradient(135deg,#0f172a"], body.tema-claro [style*="linear-gradient(135deg, #0f172a"],
body.tema-claro [style*="radial-gradient(circle at top, #111827"],
body.tema-claro [style*="background:rgba(15,23,42"], body.tema-claro [style*="background: rgba(15,23,42"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}
/* Cards "vidro" (branco translúcido sobre escuro) → branco sólido com borda */
body.tema-claro [style*="background:rgba(255,255,255,0.0"], body.tema-claro [style*="background: rgba(255,255,255,0.0"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* Textos claros inline → tons escuros (botões/links FICAM DE FORA: texto branco
   sobre botão colorido está certo — regra de reversão logo abaixo) */
/* [R722] LISTA DE TAGS NÃO É COBERTURA — E ERA O QUE ESTAVA AQUI.

   As cinco cores abaixo (#cbd5e1, #f1f5f9, #e5e7eb, #d1d5db, #f8fafc) já usavam o
   seletor UNIVERSAL. As duas MAIS USADAS de todas — #e2e8f0 e #94a3b8 — usavam uma
   lista de tags (div, span, p, td, th, h1..h3, label). Tudo que não estivesse na lista
   continuava claro sobre branco: <strong>, <h4>, <h5>, <ol>, <ul>, <em>, <code>,
   <small>, <tr>. São 27 elementos no app, e um deles é o "Saldo" do painel do gerente,
   que o dono viu sumido e chamou de "transparente" (13/08).

   Lista enumerada envelhece sozinha: basta alguém escrever uma tag nova. As duas passam
   à mesma forma universal das outras cinco — uma regra só, sem lista para esquecer.

   A guarda de fundo escuro existe por UM caso real (<tr style="background:#0f172a;
   color:#94a3b8"> em improvements.js): ali o texto claro está certo, porque a linha
   traz o próprio fundo escuro. Escurecer a letra deixaria escuro sobre escuro — trocar
   invisível por invisível. */
body.tema-claro *:not(button):not(button *):not([style*="background:#0f172a"]):not([style*="background: #0f172a"])[style*="color:#e2e8f0"],
body.tema-claro *:not(button):not(button *):not([style*="background:#0f172a"]):not([style*="background: #0f172a"])[style*="color: #e2e8f0"],
body.tema-claro div[style*="color:white"], body.tema-claro div[style*="color: white"],
body.tema-claro span[style*="color:white"], body.tema-claro span[style*="color: white"],
body.tema-claro h1[style*="color:white"], body.tema-claro h2[style*="color:white"], body.tema-claro h3[style*="color:white"],
body.tema-claro h1[style*="color: white"], body.tema-claro h2[style*="color: white"], body.tema-claro h3[style*="color: white"],
body.tema-claro div[style*="color:#fff"], body.tema-claro span[style*="color:#fff"],
body.tema-claro h2[style*="color:#fff"], body.tema-claro h3[style*="color:#fff"] {
    color: #0f172a !important;
}
/* [R722] a linha SELECIONADA da conciliação (R712) escreve #e9d5ff sobre roxo
   translúcido. Sobre o branco do modo claro isso é lavanda-clara em papel: some.
   Vira roxo escuro — a seleção continua roxa, que é o recado, e passa a ser legível. */
body.tema-claro *:not(button):not(button *)[style*="color:#e9d5ff"] { color: #6b21a8 !important; }

/* [R722] mesma unificação do #e2e8f0 acima — universal, não lista de tags. */
body.tema-claro *:not(button):not(button *):not([style*="background:#0f172a"]):not([style*="background: #0f172a"])[style*="color:#94a3b8"],
body.tema-claro *:not(button):not(button *):not([style*="background:#0f172a"]):not([style*="background: #0f172a"])[style*="color: #94a3b8"] {
    color: #475569 !important;
}
/* [R332] #cbd5e1 (52 usos), #f1f5f9, #e5e7eb, #d1d5db, #f8fafc — texto claro que ficava
   invisível no branco. Todos revertidos para tom escuro legível (exceto em botões). */
body.tema-claro *:not(button):not(button *)[style*="color:#cbd5e1"],
body.tema-claro *:not(button):not(button *)[style*="color: #cbd5e1"],
body.tema-claro *:not(button):not(button *)[style*="color:#f1f5f9"],
body.tema-claro *:not(button):not(button *)[style*="color: #f1f5f9"],
body.tema-claro *:not(button):not(button *)[style*="color:#e5e7eb"],
body.tema-claro *:not(button):not(button *)[style*="color: #e5e7eb"],
body.tema-claro *:not(button):not(button *)[style*="color:#d1d5db"],
body.tema-claro *:not(button):not(button *)[style*="color: #d1d5db"],
body.tema-claro *:not(button):not(button *)[style*="color:#f8fafc"],
body.tema-claro *:not(button):not(button *)[style*="color: #f8fafc"] {
    color: #334155 !important;
}

/* Botões coloridos mantêm o texto original (branco sobre cor da marca) */
body.tema-claro button, body.tema-claro button * { color: inherit; }
body.tema-claro button[style*="color:white"], body.tema-claro button[style*="color: white"],
body.tema-claro button[style*="color:#fff"] { color: #ffffff !important; }

/* Formulários */
body.tema-claro input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
body.tema-claro select,
body.tema-claro textarea {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
body.tema-claro input::placeholder, body.tema-claro textarea::placeholder { color: #94a3b8 !important; }

/* [R898] O CAMPO QUE VOCÊ ESTÁ DIGITANDO ERA O MENOS LEGÍVEL DA TELA.
   O premium-theme escurece o fundo no foco (.page textarea:focus → rgba(11,19,36,.75)
   com !important) e o claro não tinha regra de :focus nenhuma. Resultado no tema claro:
   texto #0f172a sobre fundo quase preto — o dono pegou digitando a NC de instalação
   (24/08). Foco aqui CLAREIA, e o anel azul mostra onde está o cursor. */
body.tema-claro input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus,
body.tema-claro select:focus,
body.tema-claro textarea:focus,
body.tema-claro .page input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus,
body.tema-claro .page select:focus,
body.tema-claro .page textarea:focus {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

/* [R903] OS BOTÕES C/NC/NA/NI SUMIAM NO TEMA CLARO.
   Eles nascem com fundo rgba(cor, .08) e borda rgba(cor, .25) — no escuro isso
   aparece; sobre BRANCO vira um fantasma, e o item que ainda não foi respondido
   (nenhum selecionado) ficava quase invisível. Dono (24/08, no meio do checklist):
   "coloca essas opções mais escuro como as outras". Mais fundo, borda de verdade e
   texto em tom escuro — a cor de cada resposta continua a mesma, e o SELECIONADO
   (fundo cheio) não muda em nada. */
body.tema-claro .checklist-btn { font-weight: 900; }
body.tema-claro .checklist-btn.c-btn {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(4, 120, 87, 0.60) !important;
    color: #047857 !important;
}
body.tema-claro .checklist-btn.nc-btn {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(185, 28, 28, 0.60) !important;
    color: #b91c1c !important;
}
body.tema-claro .checklist-btn.na-btn {
    background: rgba(100, 116, 139, 0.18) !important;
    border-color: rgba(51, 65, 85, 0.55) !important;
    color: #334155 !important;
}
body.tema-claro .checklist-btn.ni-btn {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(180, 83, 9, 0.60) !important;
    color: #b45309 !important;
}
/* o escolhido continua cheio e branco — só garantimos que nada aqui o apague */
body.tema-claro .checklist-btn.selected,
body.tema-claro .checklist-btn[class*="selected-"] { color: #fff !important; }

/* Tabelas */
body.tema-claro table { color: #0f172a; }
body.tema-claro th { color: #475569 !important; }
body.tema-claro tr { border-color: #e2e8f0 !important; }

/* ============================================================
   [R340 ONDA 6] MODO CLARO DEFINITIVO — pintores escuros achados
   por auditoria de contraste em runtime (18 páginas, 2 viewports).
   Tudo escopado em body.tema-claro → tema escuro INTOCADO.
   ============================================================ */

/* 1) App-bar sticky do MOBILE (.page > div:first-child pinta rgba(15,23,42,.85)
      em ≤768px — mobile-responsive.css:452). No claro vira glass claro. */
body.tema-claro .page > div:first-child {
    background: rgba(248, 250, 252, 0.94) !important;
    border-bottom-color: #e2e8f0 !important;
}

/* 2) Cards de módulo que pintam escuro por CLASSE (agenda, wizard, dashboard) */
body.tema-claro .ag-card,
body.tema-claro .wizard-wrapper,
body.tema-claro .site-activity-feed {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b;
}
body.tema-claro .segmented-toggle {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}
body.tema-claro .segmented-toggle .toggle-btn { color: #475569; }

/* 3) Botões/links GLASS (fundo branco translúcido + texto claro) →
      cinza claro + texto escuro. Vence a regra "botão mantém branco" por vir DEPOIS. */
body.tema-claro button[style*="background:rgba(255,255,255,0."],
body.tema-claro button[style*="background: rgba(255,255,255,0."],
body.tema-claro a[style*="background:rgba(255,255,255,0."],
body.tema-claro a[style*="background: rgba(255,255,255,0."] {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* 4) Elementos com GRADIENTE + texto branco DECLARADO: filhos voltam a ser
      brancos (o clareamento R334 os forçava escuros). Gradiente accent com
      texto escuro declarado NÃO casa com o seletor → intocado. */
body.tema-claro [style*="linear-gradient"][style*="color: white"] *,
body.tema-claro [style*="linear-gradient"][style*="color:white"] *,
body.tema-claro [style*="linear-gradient"][style*="color: #fff"] *,
body.tema-claro [style*="linear-gradient"][style*="color:#fff"] * {
    color: #ffffff !important;
}

/* 5) Card premium do wizard (gradiente ESCURO via background-image):
      shorthand `background` mata cor E gradiente de uma vez. */
body.tema-claro .card-premium {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* 6) Texto ÂMBAR claro (#fbbf24/#fde68a/#fcd34d) fica fraco sobre fundo claro →
      âmbar escuro legível (badge "pendente", botão 🔐, linha de equipamento). */
body.tema-claro [style*="color:#fbbf24"], body.tema-claro [style*="color: #fbbf24"],
body.tema-claro [style*="color:#fde68a"], body.tema-claro [style*="color: #fde68a"],
body.tema-claro [style*="color:#fcd34d"], body.tema-claro [style*="color: #fcd34d"] {
    color: #b45309 !important;
}

/* 7) LOGIN: o nome da empresa usa gradiente branco→ciano com background-clip:text
      e text-fill-color:transparent (JS) — invisível no claro. Desfaz o clip e
      força texto escuro (o force de `color` sozinho NÃO vence text-fill-color). */
body.tema-claro #page-login h2 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
}

/* 8) Mesma classe em QUALQUER gradiente CLARO inline com clip-text (varredura R343:
      título do mês na Agenda usa #e2e8f0→#a5b4fc — invisível no claro). Gradientes
      SATURADOS (ciano/azul/vermelho) ficam como estão: legíveis nos 2 temas. */
body.tema-claro [style*="background-clip"][style*="#e2e8f0"],
body.tema-claro [style*="background-clip"][style*="#f1f5f9"],
body.tema-claro [style*="background-clip"][style*="#f8fafc"] {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════════════
   [R372-F3] Rodada do dono 2026-07-21 — tabs internas do dashboard,
   agenda (ocupação/semana) e selects nativos no MODO CLARO.
   Escuro fica INTOCADO (tudo atrás de body.tema-claro).
   ═══════════════════════════════════════════════════════════════════ */
/* 3.1 Cards do tab Financeiro (base escura com !important em premium-theme.css) */
body.tema-claro .kpi-card,
body.tema-claro .kpi-card-interactive,
body.tema-claro .kpi-card-small {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
body.tema-claro .kpi-card p,
body.tema-claro .kpi-card-interactive p,
body.tema-claro .kpi-card-small p { color: #475569 !important; }
/* valor neon-ciano ilegível no branco → azul petróleo */
body.tema-claro #kpi-receita { color: #0369a1 !important; }
body.tema-claro #kpi-ticket-medio, body.tema-claro #kpi-conversao { color: #0f172a !important; }

/* 3.4 Agenda no claro: KPIs de ocupação + cards por técnico + células da semana */
body.tema-claro .ag-kpi,
body.tema-claro .ag-tec-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
body.tema-claro .ag-tec-card:hover { background: #f8fafc !important; }
/* células da semana usavam rgba(30,41,59,.6) inline — faltava no mapa R332 */
body.tema-claro [style*="background:rgba(30,41,59"],
body.tema-claro [style*="background: rgba(30,41,59"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

/* 3.5 Selects nativos: dropdown abria ESCURO no tema claro (print do dono) */
body.tema-claro select, body.tema-claro select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}
body.tema-claro select { border-color: #cbd5e1 !important; }

/* ═══════════════════════════════════════════════════════════════════
   [R372-F3b] PALETA DE DESTAQUE NO CLARO — auditoria de CONTRASTE medida
   em runtime (WCAG AA) achou 89 combinações reprovando: as cores de marca
   (ciano/verde/âmbar/azul/roxo) foram desenhadas para fundo ESCURO e viravam
   texto quase invisível no branco (ex.: "📅 Este Ano" ciano #00d4ff sobre
   rgba(0,212,255,0.12) = contraste 1.63 — o dono viu e cobrou).
   Solução: mesma FAMÍLIA de cor, tom escuro (700), só no tema claro.
   Botão com fundo sólido/gradiente NÃO é afetado (lá o texto é branco).
   ═══════════════════════════════════════════════════════════════════ */
body.tema-claro [style*="color:#00d4ff"], body.tema-claro [style*="color: #00d4ff"],
body.tema-claro [style*="color:#00f0ff"], body.tema-claro [style*="color: #00f0ff"],
body.tema-claro [style*="color:#7dd3fc"], body.tema-claro [style*="color: #7dd3fc"],
body.tema-claro [style*="color:#22d3ee"], body.tema-claro [style*="color: #22d3ee"],
body.tema-claro [style*="color:#06b6d4"], body.tema-claro [style*="color: #06b6d4"] {
    color: #0369a1 !important;   /* sky-700 — 5.9:1 no branco */
}
body.tema-claro [style*="color:#34d399"], body.tema-claro [style*="color: #34d399"],
body.tema-claro [style*="color:#4ade80"], body.tema-claro [style*="color: #4ade80"],
body.tema-claro [style*="color:#10b981"], body.tema-claro [style*="color: #10b981"],
body.tema-claro [style*="color:#6ee7b7"], body.tema-claro [style*="color: #6ee7b7"] {
    color: #047857 !important;   /* emerald-700 — 5.0:1 */
}
body.tema-claro [style*="color:#25D366"], body.tema-claro [style*="color: #25D366"],
body.tema-claro [style*="color:#25d366"], body.tema-claro [style*="color: #25d366"] {
    color: #0e7a3c !important;   /* verde WhatsApp escurecido */
}
body.tema-claro [style*="color:#f59e0b"], body.tema-claro [style*="color: #f59e0b"],
body.tema-claro [style*="color:#fbbf24"], body.tema-claro [style*="color: #fbbf24"],
body.tema-claro [style*="color:#fcd34d"], body.tema-claro [style*="color: #fcd34d"],
body.tema-claro [style*="color:#f97316"], body.tema-claro [style*="color: #f97316"] {
    color: #b45309 !important;   /* amber-700 — 5.1:1 */
}
body.tema-claro [style*="color:#60a5fa"], body.tema-claro [style*="color: #60a5fa"],
body.tema-claro [style*="color:#93c5fd"], body.tema-claro [style*="color: #93c5fd"],
body.tema-claro [style*="color:#3b82f6"], body.tema-claro [style*="color: #3b82f6"] {
    color: #1d4ed8 !important;   /* blue-700 — 6.3:1 */
}
body.tema-claro [style*="color:#a78bfa"], body.tema-claro [style*="color: #a78bfa"],
body.tema-claro [style*="color:#c084fc"], body.tema-claro [style*="color: #c084fc"],
body.tema-claro [style*="color:#8b5cf6"], body.tema-claro [style*="color: #8b5cf6"],
body.tema-claro [style*="color:#a855f7"], body.tema-claro [style*="color: #a855f7"] {
    color: #6d28d9 !important;   /* violet-700 — 6.5:1 */
}
body.tema-claro [style*="color:#f87171"], body.tema-claro [style*="color: #f87171"],
body.tema-claro [style*="color:#fca5a5"], body.tema-claro [style*="color: #fca5a5"] {
    color: #b91c1c !important;   /* red-700 — 6.4:1 */
}
/* Variáveis de marca usadas como TEXTO (cards KPI, títulos de seção) */
body.tema-claro .site-kpi-label,
body.tema-claro .pc-card-title,
body.tema-claro .pc-hub-title,
body.tema-claro [style*="color:var(--brand-accent"],
body.tema-claro [style*="color: var(--brand-accent"] {
    color: #0369a1 !important;
}
/* Pills/abas ativas com fundo translúcido da cor (BI, agenda, filtros) */
body.tema-claro .pc-pill.active,
body.tema-claro .ag-btn-vista.active,
body.tema-claro .toggle-btn.active {
    background: #0369a1 !important;
    color: #ffffff !important;
    border-color: #0369a1 !important;
}
/* KPIs numéricos coloridos (id fixo) que ficavam lavados no branco */
body.tema-claro #kpi-a-receber { color: #b45309 !important; }
body.tema-claro #kpi-clientes  { color: #6d28d9 !important; }
body.tema-claro #kpi-inspecoes { color: #047857 !important; }
body.tema-claro #kpi-vencer    { color: #b45309 !important; }
body.tema-claro #kpi-vencidas  { color: #b91c1c !important; }
body.tema-claro #kpi-despesas  { color: #b91c1c !important; }
body.tema-claro #kpi-saldo     { color: #047857 !important; }

/* [R372-F3c] 2ª rodada da auditoria medida: as cores que sobraram reprovando
   (sky-400, indigo-400, red-500, teal, slate-400/500) + tons 700→800 quando o
   texto cai sobre BADGE colorido translúcido (fundo já puxa o contraste). */
body.tema-claro [style*="color:#38bdf8"], body.tema-claro [style*="color: #38bdf8"],
body.tema-claro [style*="color:#0ea5e9"], body.tema-claro [style*="color: #0ea5e9"],
body.tema-claro [style*="color:#0284c7"], body.tema-claro [style*="color: #0284c7"] {
    color: #075985 !important;   /* sky-800 */
}
body.tema-claro [style*="color:#818cf8"], body.tema-claro [style*="color: #818cf8"],
body.tema-claro [style*="color:#6366f1"], body.tema-claro [style*="color: #6366f1"] {
    color: #3730a3 !important;   /* indigo-800 */
}
body.tema-claro [style*="color:#ef4444"], body.tema-claro [style*="color: #ef4444"],
body.tema-claro [style*="color:#dc2626"], body.tema-claro [style*="color: #dc2626"] {
    color: #991b1b !important;   /* red-800 */
}
body.tema-claro [style*="color:#00d4b4"], body.tema-claro [style*="color: #00d4b4"],
body.tema-claro [style*="color:#14b8a6"], body.tema-claro [style*="color: #14b8a6"],
body.tema-claro [style*="color:#2dd4bf"], body.tema-claro [style*="color: #2dd4bf"] {
    color: #115e59 !important;   /* teal-800 */
}
/* Texto secundário cinza-claro: no branco vira quase invisível */
body.tema-claro [style*="color:#94a3b8"], body.tema-claro [style*="color: #94a3b8"],
body.tema-claro [style*="color:#64748b"], body.tema-claro [style*="color: #64748b"],
body.tema-claro [style*="color:#cbd5e1"], body.tema-claro [style*="color: #cbd5e1"] {
    color: #475569 !important;   /* slate-600 — 7.5:1 no branco */
}
/* Sobre BADGE colorido translúcido o fundo já come contraste → tom 800 */
body.tema-claro [style*="background:rgba(245,158,11"] [style*="color"],
body.tema-claro [style*="background: rgba(245,158,11"] [style*="color"],
body.tema-claro [style*="background:rgba(251,191,36"] [style*="color"] {
    color: #92400e !important;   /* amber-800 */
}
body.tema-claro [style*="background:rgba(16,185,129"] [style*="color"],
body.tema-claro [style*="background: rgba(16,185,129"] [style*="color"] {
    color: #065f46 !important;   /* emerald-800 */
}
/* Botão WhatsApp: verde-marca com texto branco reprova AA no claro → tom escuro */
body.tema-claro [style*="background:#25D366"], body.tema-claro [style*="background: #25D366"],
body.tema-claro [style*="background:#25d366"], body.tema-claro [style*="background: #25d366"] {
    background: #0e7a3c !important;
    color: #ffffff !important;
}
/* Classes de texto secundário do app (não-inline) */
body.tema-claro .pc-card-hint,
body.tema-claro .site-kpi-trend,
body.tema-claro .site-donut-fraction { color: #475569 !important; }

/* [R372-F3d] 3ª e última rodada: o que sobrou eram TEXTOS ESCUROS sobre BADGE
   colorido translúcido (3,9–4,5 — o fundo é que comia o contraste). No claro o
   badge vira o tom -50 da mesma família: mantém o código de cor, devolve o texto. */
body.tema-claro [style*="background:rgba(245,158,11"], body.tema-claro [style*="background: rgba(245,158,11"],
body.tema-claro [style*="background:rgba(251,191,36"], body.tema-claro [style*="background: rgba(251,191,36"] { background: #fffbeb !important; }
body.tema-claro [style*="background:rgba(16,185,129"], body.tema-claro [style*="background: rgba(16,185,129"],
body.tema-claro [style*="background:rgba(52,211,153"], body.tema-claro [style*="background: rgba(52,211,153"],
body.tema-claro [style*="background:rgba(37,211,102"], body.tema-claro [style*="background: rgba(37,211,102"] { background: #ecfdf5 !important; }
body.tema-claro [style*="background:rgba(239,68,68"], body.tema-claro [style*="background: rgba(239,68,68"],
body.tema-claro [style*="background:rgba(248,113,113"] { background: #fef2f2 !important; }
body.tema-claro [style*="background:rgba(0,212,255"], body.tema-claro [style*="background: rgba(0,212,255"],
body.tema-claro [style*="background:rgba(56,189,248"], body.tema-claro [style*="background: rgba(56,189,248"],
body.tema-claro [style*="background:rgba(14,165,233"] { background: #f0f9ff !important; }
body.tema-claro [style*="background:rgba(139,92,246"], body.tema-claro [style*="background: rgba(139,92,246"],
body.tema-claro [style*="background:rgba(167,139,250"], body.tema-claro [style*="background:rgba(129,140,248"] { background: #f5f3ff !important; }
/* Botões de ação com fundo sólido claro + texto branco (Excluir, Chamar) → tom escuro */
body.tema-claro button[style*="background:#ef4444"], body.tema-claro button[style*="background: #ef4444"],
body.tema-claro button[style*="background:#f87171"] { background: #b91c1c !important; color: #fff !important; }
body.tema-claro button[style*="background:#10b981"], body.tema-claro button[style*="background: #10b981"],
body.tema-claro button[style*="background:#34d399"] { background: #047857 !important; color: #fff !important; }
body.tema-claro button[style*="background:#f59e0b"], body.tema-claro button[style*="background: #f59e0b"] { background: #b45309 !important; color: #fff !important; }

/* [R372-F3e] Últimos limítrofes da medição (2,5–4,4): textos secundários e
   rótulos de KPI que caem sobre fundos levemente coloridos. Tom mais escuro. */
body.tema-claro [style*="color:#475569"], body.tema-claro [style*="color: #475569"] { color: #334155 !important; }
body.tema-claro [style*="color:#1e293b"], body.tema-claro [style*="color: #1e293b"] { color: #0f172a !important; }
body.tema-claro [style*="color:#047857"], body.tema-claro [style*="color: #047857"] { color: #065f46 !important; }
body.tema-claro [style*="color:#1d4ed8"], body.tema-claro [style*="color: #1d4ed8"] { color: #1e3a8a !important; }
/* Rótulos dos KPIs de retenção (Para avisar HOJE / Vencidos / ...) */
body.tema-claro .ret-kpi-label, body.tema-claro [class*="kpi"] small,
body.tema-claro [class*="hint"], body.tema-claro [class*="sub"] { color: #334155 !important; }
/* Verde/cinza de botão-fantasma que ficou lavado */
body.tema-claro button[style*="color:#10b981"], body.tema-claro button[style*="color: #10b981"] { color: #065f46 !important; }
body.tema-claro [style*="color:#94a3b8"] strong, body.tema-claro strong[style*="color:#94a3b8"] { color: #334155 !important; }

/* [R757-T6] cabeçalho grudado das tabelas com teto — fundo claro no tema claro */
body.tema-claro .tabela-com-teto table thead th { background: #e2e8f0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   [R757-T9] MODAIS NO CLARO — o backlog que sobrou do R340. Os modais montam a
   superfície escura INLINE (#1e293b e #0f172a): no tema claro viravam caixa
   escura com texto forçado a escuro pelo R334 — ilegível. Aqui a superfície
   acompanha o tema; inputs/selects já são tratados pelas regras acima, e cores
   intencionais inline (verde/vermelho/azul) continuam vencendo.
   ═══════════════════════════════════════════════════════════════════════════ */
body.tema-claro [style*="background:#1e293b"],
body.tema-claro [style*="background: #1e293b"],
body.tema-claro [style*="background:#0f172a"],
body.tema-claro [style*="background: #0f172a"] {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}
/* fundo do pano de fundo dos modais (rgba escuro) fica — dá contraste ao cartão claro */

/* [R757] skeleton no claro */
body.tema-claro .skeleton-linha { background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%) !important; background-size: 200% 100% !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   [R816] O TEMA CLARO TAMBÉM PRECISA ALCANÇAR CLASSE, NÃO SÓ `style=`.

   Dono (19/08), na tela de Prontuários: *"se for manter ela então tem que arrumar,
   ainda tem problema com contraste a essa altura do campeonato"*. Ele está certo — e
   a causa é uma LACUNA no conserto anterior: todo o light-theme (e o detector do
   CHECK 42 junto) mira cor escrita em `style="color:#..."`. O Prontuário Digital não
   usa cor inline: ele é feito de CLASSES utilitárias (text-slate-500, bg-slate-900/50,
   border-slate-700). Cinquenta e quatro delas. Nenhuma regra as alcançava, então a
   tela inteira ficou escura no meio do tema claro — cartão preto, rótulo apagado.

   Aqui as classes ganham o mesmo tratamento que as cores inline já tinham: superfície
   escura vira clara, texto claro vira escuro, borda escura vira suave. O detector
   ganhou a regra equivalente na mesma rodada, para classe nova não voltar a passar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* SUPERFÍCIES: os fundos escuros do Tailwind viram claros */
body.tema-claro .bg-slate-950\/80,
body.tema-claro .bg-slate-900,
body.tema-claro .bg-slate-900\/50,
body.tema-claro .bg-slate-900\/30,
body.tema-claro .bg-slate-800,
body.tema-claro .bg-slate-800\/80,
body.tema-claro .bg-slate-800\/60,
body.tema-claro .bg-slate-800\/50,
body.tema-claro .bg-slate-800\/40,
body.tema-claro .bg-slate-800\/30,
body.tema-claro .bg-slate-800\/20 {
    background-color: #f1f5f9 !important;   /* slate-100 */
}
body.tema-claro .bg-slate-700,
body.tema-claro .bg-slate-700\/30,
body.tema-claro .bg-slate-600 {
    background-color: #e2e8f0 !important;   /* slate-200 */
}

/* TEXTO: os cinzas claros do Tailwind viram escuros o bastante para ler */
body.tema-claro .text-slate-500,
body.tema-claro .text-slate-400,
body.tema-claro .text-slate-300 {
    color: #475569 !important;   /* slate-600 — 7,5:1 no branco, mesma escolha do R372-F3c */
}
body.tema-claro .text-slate-200,
body.tema-claro .text-slate-100 {
    color: #1e293b !important;   /* slate-800 — é TEXTO PRINCIPAL no escuro, então vira o mais forte */
}
body.tema-claro .text-slate-600 {
    color: #334155 !important;   /* slate-700 */
}
/* `text-white` sobre superfície CLARA some. Botão colorido fica de fora: lá o branco
   está certo, e é a mesma exceção que o molde de tela cheia já declara (R788). */
body.tema-claro .text-white:not(button):not(button *):not([class*="bg-blue"]):not([class*="bg-emerald"]):not([class*="bg-gradient"]) {
    color: #0f172a !important;   /* slate-900 */
}

/* BORDAS escuras viram suaves — senão o card fica com contorno preto no claro */
body.tema-claro .border-slate-900,
body.tema-claro .border-slate-800,
body.tema-claro .border-slate-800\/80,
body.tema-claro .border-slate-700,
body.tema-claro .border-slate-700\/60,
body.tema-claro .border-slate-700\/50,
body.tema-claro .border-slate-600 {
    border-color: #cbd5e1 !important;   /* slate-300 */
}

/* [R1216] TEXTO CINZA-CLARO INLINE NO FUNDO BRANCO — dono (05/09): "parece que tem um degradê, apaga um
   pouco as escritas; aparece em várias telas". A raiz: rótulos/legendas escritos inline com #94a3b8, #cbd5e1
   e #64748b (pensados para o escuro) sobre superfícies que este tema já clareou. Mesma técnica do R334:
   seletor de atributo, fora de botão e fora de caixa que continua escura. */
body.tema-claro *:not(button):not(button *):not([style*="background:#0f172a"]):not([style*="background: #0f172a"]):not([style*="background:#1e293b"]):not([style*="background: #1e293b"])[style*="color:#94a3b8"],
body.tema-claro *:not(button):not(button *):not([style*="background:#0f172a"]):not([style*="background: #0f172a"]):not([style*="background:#1e293b"]):not([style*="background: #1e293b"])[style*="color: #94a3b8"] {
    color: #475569 !important;
}
body.tema-claro *:not(button):not(button *):not([style*="background:#0f172a"]):not([style*="background: #0f172a"]):not([style*="background:#1e293b"]):not([style*="background: #1e293b"])[style*="color:#64748b"],
body.tema-claro *:not(button):not(button *):not([style*="background:#0f172a"]):not([style*="background: #0f172a"]):not([style*="background:#1e293b"]):not([style*="background: #1e293b"])[style*="color: #64748b"] {
    color: #526071 !important;
}
/* #cbd5e1 já é coberto pelo R332 (vira #334155 — é o que o E2E prova). */
/* cartões novos (motor de cálculo, faturamento confiável, extratos importados, KPIs do robô) */
body.tema-claro [style*="background:rgba(15,23,42,.6)"], body.tema-claro [style*="background:rgba(30,41,59,.5)"],
body.tema-claro [style*="background:rgba(30,41,59,.55)"], body.tema-claro [style*="background:rgba(30,41,59,0.5)"] {
    background: #ffffff !important; border-color: #e2e8f0 !important;
}
body.tema-claro .robo-kpi { background: #ffffff; border-color: #e2e8f0; }
body.tema-claro .robo-kpi-val { color: #0f172a; }
body.tema-claro .robo-kpi-rot, body.tema-claro .robo-kpi-sub { color: #475569; }
body.tema-claro .robo-guia-btn { background: #f8fafc; color: #334155; border-color: #cbd5e1; }
body.tema-claro .robo-guia-btn.ativa { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; }