/* Modo claro (24/10/2026; visual humanizado 27/10/2026) - ver tema.js. As cores do claro ficam no :root do app.css;
   aqui so o botao de troca e o que precisa de ajuste fino no claro. */
body.tema-claro { color-scheme: light; }
.tema-claro .hud-cartao, .tema-claro .card { box-shadow: 0 1px 2px rgba(40, 32, 20, .05); }

/* botao de troca claro/escuro */
.ws-tema-botao { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--c-borda-forte); background: var(--c-superficie); color: var(--c-texto); }
.ws-tema-botao:hover { background: var(--c-superficie-2); }
.ws-tema-botao:focus-visible { outline: 2px solid var(--c-primaria); outline-offset: 2px; }
.ws-tema-botao.flutuante { position: fixed; left: 14px; bottom: 14px; z-index: 1040; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
@media (max-width: 575.98px) { .ws-tema-botao .ws-tema-texto { display: none; } .ws-tema-botao { padding: 4px 9px; } }
@media print { .ws-tema-botao { display: none !important; } }