/* Contas da Casa — estilo "Folha" (papel e tinta), igual ao CRM do AlertaPromoo */
@font-face { font-family: "Newsreader"; src: url("fontes/Newsreader.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fontes/Geist.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fontes/GeistMono.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --papel: #F6F5F1; --folha: #FFFFFF; --tinta: #1D1D1B; --grafite: #55544F; --cinza: #8A8880;
  --linha: #D3D0C9; --trilho: #ECEAE4; --chama: #D4501C; --brasa: #A8361A; --musgo: #3F6B4A;
  --leve: #B9B6AE; --amarelo: #FFF4D6;
  --sombra: 0 1px 0 rgba(0,0,0,.04);
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --papel: #161615; --folha: #1F1F1D; --tinta: #EDEBE6; --grafite: #B4B1A9; --cinza: #8E8B83;
  --linha: #34332F; --trilho: #2A2927; --chama: #E3693A; --brasa: #F08A62; --musgo: #7FB08C;
  --leve: #5E5C57; --amarelo: #3A3220;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #161615; --folha: #1F1F1D; --tinta: #EDEBE6; --grafite: #B4B1A9; --cinza: #8E8B83;
    --linha: #34332F; --trilho: #2A2927; --chama: #E3693A; --brasa: #F08A62; --musgo: #7FB08C;
    --leve: #5E5C57; --amarelo: #3A3220;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papel); color: var(--tinta); }
body { font: 15px/1.5 "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: 76px; }
a { color: inherit; }
h1, h2, h3, .num { font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -.01em; }
h1 { font-size: 30px; margin: 0; line-height: 1.15; }
h2 { font-size: 21px; margin: 0 0 12px; }
h3 { font-size: 17px; margin: 0 0 8px; }
.mono, time { font-family: "Geist Mono", ui-monospace, monospace; font-size: .86em; }
.fraco { color: var(--grafite); }
.mini { font-size: 13px; color: var(--grafite); }
.vazio { color: var(--cinza); font-style: italic; }

/* ---------- moldura */
.topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-bottom: 1px solid var(--linha); background: var(--papel); position: sticky; top: 0; z-index: 5; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca .selo { width: 30px; height: 30px; border: 1.5px solid var(--tinta); border-radius: 50%;
  display: grid; place-items: center; font-family: "Newsreader"; font-size: 17px; }
.marca b { font-family: "Newsreader"; font-weight: 500; font-size: 19px; }
.topo-acoes { display: flex; gap: 6px; align-items: center; }
.botao-icone { border: 1px solid var(--linha); background: var(--folha); color: var(--tinta);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }

.menu { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--folha); border-top: 1px solid var(--linha); z-index: 10; padding-bottom: env(safe-area-inset-bottom); }
.menu a { text-decoration: none; text-align: center; padding: 8px 2px 9px; font-size: 11.5px; color: var(--grafite); }
.menu a svg { display: block; margin: 0 auto 2px; width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.menu a.ativo { color: var(--tinta); font-weight: 600; }
.menu a.ativo svg { stroke-width: 2.1; }

main { max-width: 1120px; margin: 0 auto; padding: 18px 16px 28px; }
.cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.navmes { display: flex; align-items: center; gap: 8px; }
.navmes a { text-decoration: none; border: 1px solid var(--linha); border-radius: 999px; width: 34px; height: 34px;
  display: grid; place-items: center; background: var(--folha); }

/* ---------- blocos */
.cartao { background: var(--folha); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; box-shadow: var(--sombra); }
.grade { display: grid; gap: 14px; }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.numero { background: var(--folha); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; }
.numero span { display: block; font-size: 12.5px; color: var(--grafite); }
.numero strong { display: block; font-family: "Newsreader"; font-weight: 500; font-size: 25px; line-height: 1.2; }
.numero small { display: block; font-size: 12px; color: var(--grafite); margin-top: 2px; }
.numero.destaque { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.numero.destaque span, .numero.destaque small { color: var(--leve); }
.bom { color: var(--musgo); }
.ruim { color: var(--brasa); }
.aviso { background: var(--amarelo); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.ok { background: var(--folha); border: 1px solid var(--musgo); color: var(--musgo); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.explica { font-size: 14px; color: var(--grafite); }
.explica ul { margin: 6px 0 0; padding-left: 18px; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--grafite); margin-top: 6px; }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.legenda .l-barra { background: var(--tinta); } .legenda .l-leve { background: var(--leve); }
.legenda .l-renda { background: var(--musgo); height: 3px; vertical-align: 3px; }
.legenda .l-faixa { background: none; border-left: 2px solid var(--grafite); width: 2px; }
.legenda .l-media { background: none; border-left: 2px solid var(--chama); width: 2px; }
.legenda .l-ruim { background: var(--brasa); height: 3px; vertical-align: 3px; }

/* ---------- gráficos */
.grafico { width: 100%; height: auto; display: block; font-family: "Geist", sans-serif; }
.g-grade { stroke: var(--linha); stroke-width: 1; }
.g-zero { stroke: var(--grafite); }
.g-eixo { fill: var(--cinza); font-size: 11px; }
.g-rot { fill: var(--tinta); font-size: 13px; }
.g-val { fill: var(--tinta); font-size: 13px; font-family: "Geist Mono", monospace; }
.g-barra { fill: var(--tinta); }
.g-barra.g-atual { fill: var(--chama); }
.g-barra.g-alerta { fill: var(--brasa); }
.g-barra-leve { fill: var(--leve); }
.g-trilho { fill: var(--trilho); }
.g-media { stroke: var(--chama); stroke-width: 2.5; }
.g-entrada { stroke: var(--musgo); stroke-width: 3; }
.g-renda { stroke: var(--musgo); stroke-width: 2.5; fill: none; }
.g-faixa { stroke: var(--grafite); stroke-width: 1.5; }
.g-linha { stroke: var(--tinta); stroke-width: 2.5; fill: none; }
.g-linha-ruim { stroke: var(--brasa); stroke-width: 2; fill: none; stroke-dasharray: 5 4; }

/* ---------- tabelas e listas */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; font-size: 12px; color: var(--grafite); border-bottom: 1px solid var(--linha); padding: 6px 6px; }
td { border-bottom: 1px solid var(--trilho); padding: 8px 6px; vertical-align: top; }
td.v, th.v { text-align: right; font-family: "Geist Mono", monospace; font-size: 13px; white-space: nowrap; }
.rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--trilho); }
.lista li:last-child { border-bottom: 0; }
.lista .desc { min-width: 0; }
.lista .desc b { font-weight: 500; display: block; overflow-wrap: anywhere; }
.lista .valor { font-family: "Geist Mono", monospace; font-size: 13.5px; white-space: nowrap; text-align: right; }
.etiqueta { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linha); color: var(--grafite); margin-right: 4px; }
.etiqueta.alerta { border-color: var(--chama); color: var(--chama); }

/* ---------- formulários */
form.campos { display: grid; gap: 12px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--grafite); }
input, select, textarea { font: inherit; font-size: 16px; color: var(--tinta); background: var(--folha);
  border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botao { font: inherit; font-weight: 600; background: var(--tinta); color: var(--papel); border: 0; border-radius: 999px;
  padding: 12px 20px; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
.botao.secundario { background: var(--folha); color: var(--tinta); border: 1px solid var(--linha); }
.botao.perigo { background: var(--folha); color: var(--brasa); border: 1px solid var(--brasa); }
.escolha { display: flex; gap: 6px; flex-wrap: wrap; }
.escolha label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); background: var(--folha);
  border-radius: 999px; padding: 8px 14px; color: var(--tinta); font-size: 14px; cursor: pointer; }
.escolha input { width: auto; margin: 0; accent-color: var(--tinta); }
.escolha label:has(input:checked) { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.solta { border: 2px dashed var(--linha); border-radius: 14px; padding: 26px 16px; text-align: center; background: var(--folha); display: block; cursor: pointer; }
.solta input { margin-top: 12px; }
.so-entrada, .so-saida { display: contents; }
[hidden] { display: none !important; }

/* revisão da importação */
.revisao { display: grid; gap: 10px; }
.item { background: var(--folha); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.item.desligado { opacity: .55; }
.item-topo { display: flex; gap: 10px; align-items: start; }
.item-topo input[type=checkbox] { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--tinta); flex: none; }
.item-topo .meio { flex: 1; min-width: 0; }
.item-topo .meio input { padding: 6px 8px; font-size: 15px; }
.item-topo input.valor { font-family: "Geist Mono", monospace; width: 96px; flex: none; padding: 6px 8px; font-size: 15px; }
.item-topo .mini { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.item-topo .etiqueta { margin: 0; }
.item-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.item-campos select { padding: 7px 8px; font-size: 14px; }
.fixo-baixo { position: sticky; bottom: 72px; background: var(--papel); padding: 10px 0; border-top: 1px solid var(--linha);
  display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* barras de categoria (HTML) */
.barras { display: grid; gap: 10px; }
.barra-texto { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.barra-trilho { position: relative; height: 12px; background: var(--trilho); border-radius: 6px; }
.barra-cheia { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinta); border-radius: 6px; width: 0; }
.barra-cheia.alerta { background: var(--brasa); }
.barra-media { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: var(--chama); border-radius: 2px; }
@media (max-width: 600px) {
  .g-eixo { font-size: 21px; }
  .g-rot, .g-val { font-size: 22px; }
}

/* utilitários (a CSP não deixa usar style="") */
.mt { margin-top: 14px; }
.sem-margem { margin: 0; }
.pouca-margem { margin: 6px 0 0; }
.entre { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.grande { font-size: 20px; }
.navmes a.largo { width: auto; padding: 0 12px; }
.direita { text-align: right; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* entrar */
.entrar { max-width: 380px; margin: 12vh auto 0; padding: 0 16px; }
.entrar .selo { width: 54px; height: 54px; font-size: 30px; margin-bottom: 14px; }

@media (min-width: 760px) {
  .numeros { grid-template-columns: repeat(5, 1fr); }
  .duas { grid-template-columns: 1.4fr 1fr; }
  .item { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
@media (min-width: 1000px) {
  body { padding-bottom: 0; padding-left: 210px; }
  .menu { top: 0; right: auto; width: 210px; grid-template-columns: 1fr; align-content: start; padding-top: 74px;
    border-top: 0; border-right: 1px solid var(--linha); background: var(--papel); }
  .menu a { display: flex; align-items: center; gap: 12px; text-align: left; font-size: 15px; padding: 10px 22px; }
  .menu a svg { margin: 0; }
  .topo { position: fixed; left: 0; right: 0; z-index: 12; }
  main { padding-top: 84px; }
  .fixo-baixo { bottom: 0; }
}