/* ===== Tema claro do painel — sobrepõe o escuro via [data-theme="claro"] =====
   Não altera o CSS escuro: só adiciona regras mais específicas quando o tema claro está ativo.
   A maioria dos componentes vira sozinha porque usa var(--bg/--s1../--tx/--line).
   Aqui ficam as variáveis do claro + os poucos pontos com cor fixa (vidro, logo, scrollbar). */

html[data-theme="claro"]{
  --bg:#EEF1F6; --s1:#FFFFFF; --s2:#F1F4F8; --s3:#E6EBF2; --hover:#EAEEF4;
  --line:rgba(16,24,40,.09); --line2:rgba(16,24,40,.15); --line3:rgba(16,24,40,.24);
  --tx:#1B2430; --tx2:#505D6E; --tx3:#8793A2;
  --teal:#0E9E7D; --teal2:#0E9E7D; --viole:#6D5CE0; --gold:#C98A12; --red:#D8453A; --blue:#2E73B8;
}

/* fundo e brilhos decorativos */
html[data-theme="claro"], html[data-theme="claro"] body{background:var(--bg)}
html[data-theme="claro"] .pbg i{opacity:.07}
html[data-theme="claro"] .pbg .grade{opacity:.18}
html[data-theme="claro"] .lg-bg i{opacity:.1}

/* superfícies de vidro → branco */
html[data-theme="claro"] .sb{background:rgba(255,255,255,.92);border-right:1px solid var(--line);box-shadow:1px 0 0 rgba(16,24,40,.04)}
html[data-theme="claro"] .card{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.05),0 14px 34px -20px rgba(16,24,40,.25)}
html[data-theme="claro"] .dw{background:rgba(255,255,255,.97);border-left:1px solid var(--line2);box-shadow:-30px 0 80px rgba(16,24,40,.18)}
html[data-theme="claro"] .ov{background:rgba(16,24,40,.32)}
html[data-theme="claro"] .topo.stuck{background:rgba(255,255,255,.78);box-shadow:0 1px 0 rgba(16,24,40,.06),0 12px 30px -18px rgba(16,24,40,.25)}
html[data-theme="claro"] .wk{background:rgba(16,24,40,.03)}
html[data-theme="claro"] .wk .wh{background:#fff}

/* título em gradiente (era branco→azul claro) */
html[data-theme="claro"] .topo h1{background:linear-gradient(120deg,#101826 10%,#3A4A61 95%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* logo: no escuro é invertida para ficar branca; no claro mostra a marca escura */
html[data-theme="claro"] .marca img,html[data-theme="claro"] .logo img{filter:none}

/* barra de rolagem */
html[data-theme="claro"] ::-webkit-scrollbar-thumb{background:rgba(16,24,40,.16)}
html[data-theme="claro"] ::-webkit-scrollbar-thumb:hover{background:rgba(16,24,40,.28)}
html[data-theme="claro"] select option{background:#fff;color:var(--tx)}

/* navegação */
html[data-theme="claro"] .nav a:hover{background:rgba(16,24,40,.05)}

/* botões */
html[data-theme="claro"] .btn{background:rgba(16,24,40,.04);border-color:var(--line2)}
html[data-theme="claro"] .btn:hover{background:rgba(16,24,40,.08);border-color:var(--line3)}
html[data-theme="claro"] .btn.gh{background:transparent;border-color:transparent}
html[data-theme="claro"] .btn.gh:hover{background:rgba(16,24,40,.06)}
html[data-theme="claro"] .seg{background:rgba(16,24,40,.03);border-color:var(--line2)}

/* campos */
html[data-theme="claro"] .fl input,html[data-theme="claro"] .fl select,html[data-theme="claro"] .fl textarea,html[data-theme="claro"] .busca,html[data-theme="claro"] .qa input,html[data-theme="claro"] .trow input,html[data-theme="claro"] .trow select,html[data-theme="claro"] #com_txt,html[data-theme="claro"] .tb select{background:#fff;border:1px solid var(--line2)}
html[data-theme="claro"] .fl input:hover,html[data-theme="claro"] .fl select:hover,html[data-theme="claro"] .fl textarea:hover,html[data-theme="claro"] .busca:hover{border-color:var(--line3)}
html[data-theme="claro"] .fl input::placeholder,html[data-theme="claro"] .fl textarea::placeholder,html[data-theme="claro"] .busca input::placeholder{color:var(--tx3)}
html[data-theme="claro"] input:-webkit-autofill,html[data-theme="claro"] input:-webkit-autofill:hover,html[data-theme="claro"] input:-webkit-autofill:focus,html[data-theme="claro"] textarea:-webkit-autofill,html[data-theme="claro"] select:-webkit-autofill{-webkit-text-fill-color:var(--tx);-webkit-box-shadow:0 0 0 1000px #fff inset;caret-color:var(--tx)}
html[data-theme="claro"] .sg{background:rgba(16,24,40,.03);border-color:var(--line2)}
html[data-theme="claro"] .pick label{background:rgba(16,24,40,.02)}
/* o aviso (toast) continua com fundo escuro no claro — mantém o texto claro para ler */
html[data-theme="claro"] #toast{color:#EAF0F6}

/* linhas e superfícies sutis que eram branco-transparente */
html[data-theme="claro"] .row:hover{background:rgba(16,24,40,.04)}
html[data-theme="claro"] .tbl tr:hover td{background:rgba(16,24,40,.03)}
html[data-theme="claro"] .kp>div,html[data-theme="claro"] .pc .st div,html[data-theme="claro"] .mbox div,html[data-theme="claro"] .arq,html[data-theme="claro"] .nrow,html[data-theme="claro"] .col,html[data-theme="claro"] .tk,html[data-theme="claro"] .eu{background:rgba(16,24,40,.03);border-color:var(--line)}

/* ===== botão de alternância (injetado por tema.js) ===== */
.tema-btn{position:fixed;bottom:18px;right:18px;z-index:60;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--s2);border:1px solid var(--line2);color:var(--tx);box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .12s,background .15s}
.tema-btn:hover{transform:translateY(-1px);background:var(--s3)}
.tema-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.tema-btn{bottom:78px}}
/* botão de tema dentro da barra lateral (estilo item de menu) */
.tema-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:10px;border:0;background:transparent;color:var(--tx2);font:inherit;font-weight:500;cursor:pointer;text-align:left;transition:.12s}
.tema-row:hover{background:var(--s2);color:var(--tx)}
.tema-row svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== páginas com paleta própria (fechamento, gasto, meu) — mesmos nomes, valores claros ===== */
html[data-theme="claro"]{
  /* fechamento */
  --card:#FFFFFF; --card2:#F4F6F9; --ink:#1B2430; --muted:#505D6E; --dim:#8793A2; --track:#E6EBF2;
  /* gasto */
  --panel:#FFFFFF; --panel2:#FFFFFF; --white:#1B2430;
  /* meu */
  --glass:rgba(16,24,40,.03);
}
/* gasto: inputs/botões têm fundo escuro fixo */
html[data-theme="claro"] .wrap select,html[data-theme="claro"] .wrap input,html[data-theme="claro"] .wrap textarea{background:#fff;border-color:var(--line2);color:var(--tx)}
html[data-theme="claro"] .wrap input::placeholder,html[data-theme="claro"] .wrap textarea::placeholder{color:var(--tx3)}