/* ════════════════════════════════════════════════════════════════════════
   DARK MODE — opt-in BETA (Cellini / Laboratório Milene Braz) v1.93.6
   Ativado por html[data-tema="escuro"] (botão 🌙 no topo, salvo no navegador).
   OFF por padrão: sem o atributo, NADA muda. Reverter = remover o <link>.
   Remapeia os TOKENS neutros (tinta-*, surface, border, text, vidro). As cores
   de marca (navy-grad de fundo, ouro) ficam — funcionam sobre o escuro.
   Beta: alguns cantos com cor fixa (#fff) podem precisar de ajuste.
   ════════════════════════════════════════════════════════════════════════ */

/* Botão de tema (base — sempre carregado, vale nos 2 temas) */
.btn-tema{
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;
  margin-left:10px;flex:0 0 auto;cursor:pointer;color:var(--text-2,#39404a);
  border:1px solid var(--vidro-borda,rgba(255,255,255,.85));
  background:linear-gradient(160deg,var(--vidro-2,rgba(255,255,255,.34)),transparent 55%),
             color-mix(in srgb, var(--surface,#fff) 88%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform .15s ease, background .15s, color .15s, border-color .15s;
}
.btn-tema:hover{color:var(--brand,#b8865a);border-color:var(--prata,#9AA4B2)}
.btn-tema:active{transform:scale(.95)}
@media (max-width:720px){ .btn-tema{width:32px;height:32px;margin-left:6px} }

/* ─── Tokens do tema escuro ─────────────────────────────────────────────── */
html[data-tema="escuro"]{
  --branco:#1b2335; --off-white:#10182a;
  --tinta-50:#1e2840; --tinta-100:#27324b; --tinta-200:#33405c; --tinta-300:#44526f;
  --tinta-400:#6c7990; --tinta-500:#93a0b8; --tinta-600:#aab6cc;
  --tinta-700:#c6cfdf; --tinta-800:#dde4ef; --tinta-900:#f0f4fa;

  --azul-50:#243150; --rubi-600:#e07a6e;
  --bg:#0d1422; --surface:#1b2335; --surface-2:#222c41; --surface-hover:#2a3550;
  --border:#2d3a52; --border-strong:#3b4a68;
  --text:#f0f4fa; --text-2:#c6cfdf; --text-3:#93a0b8;
  --navy:#9fb6e0; --navy-soft:#243150;
  --brand-soft:#39301f;
  --vidro:rgba(26,35,55,.55); --vidro-2:rgba(26,35,55,.36);
  --vidro-borda:rgba(255,255,255,.10); --vidro-ativo:rgba(40,52,78,.72);
  --linha:#2d3a52; --ok:#3ddc97; --erro:#ff8a7a;
  color-scheme:dark;
}
html[data-tema="escuro"] body{
  background:
    radial-gradient(46% 56% at 4% 0%,  rgba(31,69,130,.20), transparent 70%),
    radial-gradient(52% 64% at 98% 30%, rgba(184,134,90,.10), transparent 72%),
    #0d1422;
}

/* Títulos/labels que usam a cor de marca via estilo INLINE (style="color:var(--marca-azul)")
   ficariam escuros sobre o fundo escuro — clareia. */
html[data-tema="escuro"] [style*="color:var(--marca-azul)"]{ color:#9fb6e0 !important; }
html[data-tema="escuro"] [style*="color:var(--marca-azul-3)"]{ color:#cdb78f !important; }

/* Idem para as CLASSES que usam a cor de marca como texto — azul-marinho
   (e ouro escuro no .lnk-vercpf) somem sobre o fundo escuro. */
html[data-tema="escuro"] .odo-dente.sel,
html[data-tema="escuro"] .entry-versao,
html[data-tema="escuro"] .placeholder h2,
html[data-tema="escuro"] .fase.atual,
html[data-tema="escuro"] .fase.atual .fase-num,
html[data-tema="escuro"] .baixa-item .baixa-val,
html[data-tema="escuro"] .wa-toggle-bar strong{ color:#9fb6e0; }
html[data-tema="escuro"] .lnk-vercpf{ color:#cdb78f; }
/* .valor.pendente ficou #8a6a0e no claro (contraste) — no escuro volta ao âmbar vivo */
html[data-tema="escuro"] .valor.pendente{ color:#d4a017; }

/* Overlay de modal mais escuro + scrollbar no tom do tema */
html[data-tema="escuro"] .modal-overlay{ background:rgba(0,0,0,.62); }
html[data-tema="escuro"] ::-webkit-scrollbar-thumb{ background:#3b4a68; }
html[data-tema="escuro"] ::-webkit-scrollbar-thumb:hover{ background:#4a5a7c; }

/* Autofill do Chrome pinta o campo de branco (ignora color-scheme) → "quebra de
   cor" no escuro. O truque do box-shadow interno força o fundo do tema; o
   text-fill-color clareia o texto. transition longa evita o flash branco inicial. */
html[data-tema="escuro"] input:-webkit-autofill,
html[data-tema="escuro"] input:-webkit-autofill:hover,
html[data-tema="escuro"] input:-webkit-autofill:focus,
html[data-tema="escuro"] textarea:-webkit-autofill,
html[data-tema="escuro"] select:-webkit-autofill{
  -webkit-text-fill-color:var(--text,#f0f4fa);
  -webkit-box-shadow:0 0 0 1000px var(--surface,#1b2335) inset;
  caret-color:var(--text,#f0f4fa);
  transition:background-color 9999s ease 0s;
}

/* ─── Legibilidade de campos e botões no escuro ─────────────────────────────
   Campos com cor/borda vindas de tokens claros (--branco, --tinta-100) ficavam
   com pouco contraste; placeholder e cursor sumiam. Bloco aditivo: só no escuro. */
html[data-tema="escuro"] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
html[data-tema="escuro"] select,
html[data-tema="escuro"] textarea{
  color:var(--text) !important;
  background-color:var(--surface-2) !important;
  border-color:var(--border-strong) !important;
  caret-color:var(--brand,#B8865A);
}
html[data-tema="escuro"] input::placeholder,
html[data-tema="escuro"] textarea::placeholder{ color:var(--text-3); opacity:1 }
html[data-tema="escuro"] input:focus,
html[data-tema="escuro"] select:focus,
html[data-tema="escuro"] textarea:focus{
  background-color:var(--surface-hover) !important;
  border-color:var(--brand,#B8865A) !important;
}
/* botões secundários/pílulas: borda visível sobre o fundo escuro */
html[data-tema="escuro"] .btn-secundario,
html[data-tema="escuro"] .fin-status-pill:not(.ativo):not(.fin-tudo){
  color:var(--text) !important;
  border:1px solid var(--border-strong) !important;
}
html[data-tema="escuro"] .btn-secundario:hover,
html[data-tema="escuro"] .fin-status-pill:hover{ border-color:var(--brand,#B8865A) !important }

@media (prefers-reduced-motion:reduce){ .btn-tema{transition:none} }