/* ===== Polvo App · camada de tema (claro/escuro), logo no topo e correções ===== */

/* janela de instalação: o texto herdava o branco da faixa azul */
.sheet, .sheet-back .sheet { color: var(--ink); }

/* logo completa na barra do topo (telas principais) */
.topbar > img.logo-m { content: url("/logo-topo.png"); height: 30px !important; width: auto; max-width: 150px; }
html[data-tema="escuro"] .topbar > img.logo-m { content: url("/logo-topo-escuro.png"); }
.topbar:has(> img.logo-m) > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar:has(> img.logo-m) { padding-right: 62px; }
.topbar:has(> img.logo-m)::after { content: ""; flex: 1; order: 1; }
.topbar:has(> img.logo-m) > :not(img):not(h1) { order: 2; }

/* botão claro/escuro: canto direito do topo */
.pv-tema { position: fixed; z-index: 40; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 14px; width: 38px; height: 38px; border-radius: 12px;
  display: none; place-items: center; border: 1px solid var(--line); background: var(--pv-card, #fff); color: var(--ink); cursor: pointer; padding: 0;
  box-shadow: 0 1px 2px rgba(11,31,59,.06); -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s, transform .15s; }
.pv-tema:active { transform: scale(.94); }
.pv-tema svg { width: 19px; height: 19px; }
.pv-tema .lua { display: block; } .pv-tema .sol { display: none; }
html[data-tema="escuro"] .pv-tema .lua { display: none; } html[data-tema="escuro"] .pv-tema .sol { display: block; }
body:has(.topbar.mobile-only > img.logo-m) .pv-tema { display: grid; }
@media (min-width: 900px) {
  body:has(.shell .page-head) .pv-tema { display: grid; top: 26px; right: 26px; }
  body:has(.shell .page-head) .page-head { padding-right: 76px; }
}

/* ===== modo escuro ===== */
:root { --pv-card: #fff; }
html[data-tema="escuro"] {
  color-scheme: dark;
  --pv-card: #10223B;
  --mist: #081425; --off: #0D1D33; --line: #1F3553; --ink: #E6EDF6; --muted: #9DB0C8; --gray: #7D90A8;
  --todo-bg: #1C2A3D; --todo-fg: #CBD5E1;
  --doing-bg: #3B2F0F; --doing-fg: #FCD34D;
  --done-bg: #0C3A36; --done-fg: #5EEAD4;
  --paid-bg: #0F3A24; --paid-fg: #86EFAC;
  --danger: #F87171; --danger-bg: #3B1515;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.25);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
}
html[data-tema="escuro"] body { background: var(--mist); color: var(--ink); }
html[data-tema="escuro"] .card { border-color: var(--line); }
html[data-tema="escuro"] input, html[data-tema="escuro"] select, html[data-tema="escuro"] textarea { color: var(--ink); }
html[data-tema="escuro"] input::placeholder, html[data-tema="escuro"] textarea::placeholder { color: #6F839C; }
html[data-tema="escuro"] .btn-n { background: #1D3A5F; color: #fff; }
html[data-tema="escuro"] .side { background: #050E1C; }
html[data-tema="escuro"] [style*="background: rgb(255, 255, 255)"], html[data-tema="escuro"] [style*="background:#fff"], html[data-tema="escuro"] [style*="background: #fff"] { background: var(--pv-card) !important; }
html[data-tema="escuro"] [style*="color: var(--navy)"] { color: var(--ink) !important; }
html[data-tema="escuro"] .topbar { border-bottom-color: var(--line); }
html[data-tema="escuro"] .icon-btn { color: var(--ink); }
html[data-tema="escuro"] .muted, html[data-tema="escuro"] .xs.muted { color: var(--muted); }
html[data-tema="escuro"] .banner { background: #0F2A44; color: var(--ink); border-color: #1F3D5E; }
html[data-tema="escuro"] .faixa-inst { background: #050E1C; }

/* gerado automaticamente a partir do CSS do app */
html[data-tema="escuro"] .topbar { background: rgba(13,27,48,.92); }
html[data-tema="escuro"] .bottom { background: var(--pv-card); }
html[data-tema="escuro"] .bottom a.on { color: var(--ink); }
html[data-tema="escuro"] .btn-o { background: var(--pv-card); color: var(--ink); }
html[data-tema="escuro"] .btn-g { color: var(--ink); }
html[data-tema="escuro"] .icon-btn { color: var(--ink); }
html[data-tema="escuro"] .card { background: var(--pv-card); }
html[data-tema="escuro"] .input, html[data-tema="escuro"] .select, html[data-tema="escuro"] .textarea { background: var(--pv-card); }
html[data-tema="escuro"] .chip { background: var(--pv-card); color: var(--ink); }
html[data-tema="escuro"] .chip.on { border-color: #3A5577; }
html[data-tema="escuro"] .empty b { color: var(--ink); }
html[data-tema="escuro"] .li .ic { color: var(--ink); }
html[data-tema="escuro"] .patio-tabs { background: var(--pv-card); }
html[data-tema="escuro"] .patio-tabs button b { color: var(--ink); }
html[data-tema="escuro"] .patio-tabs button.on { color: var(--ink); }
html[data-tema="escuro"] .os-card { background: var(--pv-card); }
html[data-tema="escuro"] .os-card .svs { color: var(--ink); }
html[data-tema="escuro"] .svc-opt { background: var(--pv-card); }
html[data-tema="escuro"] .check { background: var(--pv-card); color: var(--ink); }
html[data-tema="escuro"] .porte-sel button { background: var(--pv-card); }
html[data-tema="escuro"] .porte-sel button.on { border-color: #3A5577; }
html[data-tema="escuro"] .fotos label.add { background: var(--pv-card); }
html[data-tema="escuro"] .pick { background: var(--pv-card); }
html[data-tema="escuro"] .week button { background: var(--pv-card); }
html[data-tema="escuro"] .week button.on { border-color: #3A5577; }
html[data-tema="escuro"] .slots button { background: var(--pv-card); }
html[data-tema="escuro"] .seg { background: var(--pv-card); }
html[data-tema="escuro"] .sheet { background: var(--pv-card); }
html[data-tema="escuro"] .timeline-st div.on { color: var(--ink); }
html[data-tema="escuro"] .wa-item { background: var(--pv-card); }
html[data-tema="escuro"] .logo-up { background: var(--pv-card); }
html[data-tema="escuro"] .onb .card { color: var(--ink); }
html[data-tema="escuro"] .atalho { background: var(--pv-card); color: var(--ink); }
html[data-tema="escuro"] .dias7 button { background: var(--pv-card); }
html[data-tema="escuro"] .dias7 button.on { border-color: #3A5577; }
html[data-tema="escuro"] .vp-hello { background: var(--pv-card); }
html[data-tema="escuro"] .vp-card { background: var(--pv-card); }
html[data-tema="escuro"] .vp-dias button { background: var(--pv-card); }
html[data-tema="escuro"] .vp-dias button.on { border-color: #3A5577; }
html[data-tema="escuro"] .vp-resumo { color: var(--ink); }
html[data-tema="escuro"] .chart-ref span { background: var(--pv-card); color: var(--ink); }
html[data-tema="escuro"] .box { background: var(--pv-card); }
html[data-tema="escuro"] .mini-card { background: var(--pv-card); }
html[data-tema="escuro"] .acesso-card { background: var(--pv-card); }
html[data-tema="escuro"] .manter { color: var(--ink); }