/* Compatibilidade do app com o tema claro aprovado em 18/10/2026.
   Carregar depois do CSS canônico, claro-camada.css e das folhas do app.
   No design claro, paper/bone são cores de texto. Fundos usam noite/azul-50.
   Todos os ajustes ficam restritos ao tema claro; nenhum dado muda aqui. */
html[data-tema="claro"] {
  color-scheme: light;
  --bg: var(--noite);
  --bg-2: var(--azul-50);
  --vidro: var(--azul-50);
  --vidro-forte: var(--noite);
  --dg-fraco: #3B4663;
  --dg-mudo: #59647F;
  --texto: var(--ink);
  --texto-muted: var(--dg-fraco);
  --review-text: var(--ink);
  --review-surface: var(--noite);
  --review-focus: var(--blue);
}
html[data-tema="claro"] body { color: var(--ink); background: var(--noite); }
html[data-tema="claro"] :is(.lateral, .topo, .barra, .more-panel) {
  background: var(--noite);
  color: var(--ink);
  backdrop-filter: none;
}
html[data-tema="claro"] :is(.vidro, .panel, .metric, .auth-card, .approval-card,
  .error-state, .onboarding-progress, .record, .cat, .rc, .col, .post,
  .entrada-card, .carga-n > div) {
  color: var(--ink);
  background: var(--azul-50);
  border-color: var(--borda);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 22px -20px var(--blue);
}
html[data-tema="claro"] :is(.filters, .field input, .field select, .field textarea,
  .auth-form input, .campo input, .fin-filter input, .fin-filter select,
  .month-grip, .view-nav a, .agenda-day, .kanban-column .record, .step-number,
  .skip-link, .notice-success) {
  color: var(--ink);
  background: var(--noite);
  border-color: var(--azul-300);
}
html[data-tema="claro"] :is(input, select, textarea, option) {
  background: var(--noite);
  color: var(--ink);
  border-color: var(--azul-300);
}
html[data-tema="claro"] :is(input, textarea)::placeholder { color: var(--dg-mudo); opacity: 1; }
html[data-tema="claro"] :is(.badge, .view-label, .upload-form, .invite-result,
  .grouped-list > header, .kanban-column, .sources .source-warning,
  .notice-error, .step-list a:hover, .step-list a[aria-current="step"]) {
  color: var(--ink);
  background: var(--azul-100);
}
html[data-tema="claro"] :is(.chip, .badge-good) {
  color: var(--dg-fraco);
  background: var(--noite);
  border-color: var(--borda);
}
html[data-tema="claro"] :is(.btn, .button):not(.btn--fantasma):not(.btn--ghost):not(.button-quiet),
html[data-tema="claro"] :is(.chip--ativo, .seg-b--on, .operations-view .seg-b--on,
  .nav a[aria-current="page"], .barra a[aria-current="page"], .more-menu[open] > summary,
  .step-list a[aria-current="step"] .step-number, .badge-alert) {
  background: var(--blue);
  color: var(--noite);
  border-color: var(--blue);
  box-shadow: none;
}
html[data-tema="claro"] :is(.btn--fantasma, .btn--ghost, .button-quiet) {
  color: var(--blue);
  background: var(--noite);
  border-color: var(--azul-300);
  box-shadow: none;
}
html[data-tema="claro"] :is(.btn--fantasma, .btn--ghost, .button-quiet):hover {
  color: var(--blue);
  background: var(--azul-100);
}
html[data-tema="claro"] :is(.btn, .button, .nav a, .barra a) :is(span, b, small) { color: inherit; }
html[data-tema="claro"] :is(.btn, .button, .seg-b, .nav a, .barra a, .more-menu > summary) {
  min-block-size: 44px;
}
html[data-tema="claro"] .nav a[aria-current="page"],
html[data-tema="claro"] .barra a[aria-current="page"] { background: var(--navy); }
html[data-tema="claro"] :is(.foto, .publication-client .foto, .logo) {
  color: var(--noite);
  background: var(--blue);
  box-shadow: 0 0 0 2px var(--noite), 0 0 0 3px var(--azul-300);
}
html[data-tema="claro"] .foto .foto-inicial { color: var(--noite); }

/* A hierarquia das referências também se aplica aos títulos reais do app. */
html[data-tema="claro"] :is(.page-heading, .cab, .saud, .dos-identity, .board-report > header) h1 {
  color: var(--ink);
  font-family: var(--f-disp);
  font-size: clamp(2.2rem, 5.6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
}
html[data-tema="claro"] :is(.page-heading, .cab, .saud) h1 b {
  color: var(--blue);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
html[data-tema="claro"] :is(.sec-titulo h2, .bloco h2, .panel-heading h2) { font-weight: 800; }
html[data-tema="claro"] :is(.nota, .ls-hand) { color: var(--blue); font-family: var(--f-hand); }
html[data-tema="claro"] :is(.kpi, .today-compact .kpi) { background: var(--azul-100); }
html[data-tema="claro"] :is(.kpi .num, .today-compact .kpi-period strong) {
  color: var(--blue);
  font-weight: 800;
  text-shadow: none;
}
html[data-tema="claro"] :is(.today-compact .kpi .rot, .today-compact .kpi .var,
  .today-compact .kpi-total, .today-compact .kpi-period-label) { color: var(--dg-fraco); }
html[data-tema="claro"] :is(.kpi--alerta, .destaque-marinho, .duas > .cartao:first-child) {
  color: var(--noite);
  background: var(--navy);
  border-color: var(--navy);
}
html[data-tema="claro"] :is(.kpi--alerta, .destaque-marinho, .duas > .cartao:first-child)
  :is(h2, h3, strong, .num, .tx b) { color: var(--noite); }
html[data-tema="claro"] :is(.kpi--alerta, .destaque-marinho, .duas > .cartao:first-child)
  :is(.rot, .var, .detail-cue, p, small, .tx span) { color: var(--azul-200); }
html[data-tema="claro"] .duas > .cartao:first-child :is(.btn--fantasma, .btn--ghost) {
  color: var(--noite);
  background: transparent;
  border-color: var(--azul-300);
}
html[data-tema="claro"] .client-board-view .faixa::before,
html[data-tema="claro"] .dos-topo::before,
html[data-tema="claro"] .mapa::before { display: none; }
html[data-tema="claro"] :is(.raiz-no, .no-cli, .folha, .dia-b, .frente) {
  background: var(--azul-100);
  color: var(--ink);
  box-shadow: none;
}
html[data-tema="claro"] :is(.dia-b--on, .etapa--gargalo .no, .chip-vez:not(.chip-vez--espera):not(.chip-vez--prazo)) {
  color: var(--noite);
  background: var(--navy);
}
html[data-tema="claro"] .dia-b--on :is(span, b) { color: var(--noite); }
html[data-tema="claro"] :is(.dia--fora, .tk--ok) { opacity: 1; }
html[data-tema="claro"] .dia--fora .n { color: var(--dg-mudo); }

/* Gavetas nativas e suas reservas de imagem não herdam o fundo escuro antigo. */
html[data-tema="claro"] .painel-lat {
  color: var(--ink);
  background: var(--noite);
  box-shadow: -20px 0 60px -20px color-mix(in srgb, var(--navy) 35%, transparent);
}
html[data-tema="claro"] .painel-lat::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
html[data-tema="claro"] .painel-lat :is(.fecha, .linha) {
  color: var(--ink);
  background: var(--azul-50);
}
html[data-tema="claro"] .painel-lat .linha :is(b, .n) { color: var(--ink); }
html[data-tema="claro"] :is(.tag-st--atraso, .chip-vez--prazo, .auth-error, .carga-linha b.al) { color: var(--txt-vermelho); }
html[data-tema="claro"] :is(.espera, .aguard--nos, .espera-q, .tag-st--alt, .etapa .tag) { color: var(--txt-amarelo); }
html[data-tema="claro"] :is(.btn-feito, .wizard-saved, .tag-st--ok, .approval-status) { color: var(--txt-verde); }

/* Financeiro tem CSS próprio com cores antigas; só a apresentação é ajustada. */
html[data-tema="claro"] :is(.fin-owner, .fin-nav a, .fin-crm-metrics > div) {
  color: var(--ink);
  background: var(--azul-100);
  border-color: var(--azul-300);
}
html[data-tema="claro"] :is(.fin-filter label, .fin-amount, .fin-table td, .fin-crm-metrics dd) { color: var(--ink); }
html[data-tema="claro"] :is(.fin-filter p, .fin-metric h2, .fin-metric p:last-child,
  .fin-section > p, .fin-source, .fin-crm-metrics dt, .fin-amount--unknown) { color: var(--dg-fraco); }
html[data-tema="claro"] .fin-table th { color: var(--navy); background: var(--azul-100); }
html[data-tema="claro"] :is(.fin-table th, .fin-table td) { border-color: var(--azul-200); }
html[data-tema="claro"] .fin-table tr:hover td { background: var(--azul-50); }
html[data-tema="claro"] .fin-metric { border-top-color: var(--blue); }
html[data-tema="claro"] .fin-metric--negative { border-top-color: var(--txt-vermelho); }
html[data-tema="claro"] .fin-metric--negative .fin-amount { color: var(--txt-vermelho); }
html[data-tema="claro"] .fin-warning { color: var(--txt-amarelo); background: var(--st-alteracao); border-color: var(--st-alteracao-b); }
html[data-tema="claro"] .fin-chart text { fill: var(--dg-fraco); }
html[data-tema="claro"] .fin-chart-axis { stroke: var(--dg-mudo); }
html[data-tema="claro"] .fin-chart-receita { fill: var(--blue); }
html[data-tema="claro"] .fin-chart-margem { fill: var(--txt-verde); }
html[data-tema="claro"] .fin-legend-income::before { background: var(--blue); }
html[data-tema="claro"] .fin-legend-margin::before { background: var(--txt-verde); }
html[data-tema="claro"] .finance-view :focus-visible { outline-color: var(--blue); }

/* Sem animação adicional; conserva o pedido de reduzir movimento. */
@media (prefers-reduced-motion: reduce) {
  html[data-tema="claro"] *, html[data-tema="claro"] *::before, html[data-tema="claro"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html[data-tema="claro"].reduz *, html[data-tema="claro"].reduz *::before,
html[data-tema="claro"].reduz *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }