/* ============================================================
   Cores do sistema. Tema claro é o padrão; o tema escuro troca
   só estas variáveis (veja [data-tema="escuro"] logo abaixo).
   ============================================================ */
:root {
  color-scheme: light;
  --fundo: #f5f6f4; --papel: #ffffff; --papel-2: #fafbfa;
  --texto: #1d2420; --suave: #66706a; --apagado: #a3aaa5; --linha: #e2e5e1;
  --campo: #ffffff; --borda-campo: #cdd3ce;
  --verde: #1f7a4d; --verde-claro: #e6f2ea; --vermelho: #b23a2e; --vermelho-claro: #fbe9e7;
  --azul: #2457a6; --azul-claro: #e8eef9; --alerta: #e0b04a; --alerta-claro: #fff8e6;
  --topo: #1d2420; --topo-texto: #cfd6d1;
  /* gráficos */
  --serie-1: #2a78d6; --serie-2: #eb6834; --grade: #e8eae6; --eixo: #c9ceca;
  --dica-fundo: #1d2420; --dica-texto: #ffffff;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #141716; --papel: #1c201e; --papel-2: #222724;
  --texto: #e8ebe9; --suave: #a3aca6; --apagado: #6b736e; --linha: #2e3431;
  --campo: #171a19; --borda-campo: #3a413d;
  --verde: #3a9d6b; --verde-claro: #1d3328; --vermelho: #ec7a6e; --vermelho-claro: #3a2220;
  --azul: #7fa8ea; --azul-claro: #1f2a3c; --alerta: #c99a3a; --alerta-claro: #33291a;
  --topo: #0d0f0e; --topo-texto: #b9c1bc;
  --serie-1: #3987e5; --serie-2: #d95926; --grade: #2a302d; --eixo: #3d4541;
  --dica-fundo: #e8ebe9; --dica-texto: #141716;
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); }
.topo { display: flex; align-items: center; gap: 2rem; padding: .8rem 1.5rem; background: var(--topo); color: #fff; flex-wrap: wrap; }
.marca { font-weight: 700; letter-spacing: .02em; }
.topo nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.topo nav a { color: var(--topo-texto); text-decoration: none; padding: .35rem .6rem; border-radius: 6px; }
.topo nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.topo nav a.ativo { color: #fff; background: var(--verde); }
.botao-tema { background: transparent; border: 1px solid rgba(255,255,255,.25); color: var(--topo-texto); padding: .3rem .7rem; font-size: .85rem; }
.botao-tema:hover { color: #fff; filter: none; background: rgba(255,255,255,.08); }
main { max-width: 1150px; margin: 0 auto; padding: 1.5rem; }
h1 { margin: 0 0 1rem; font-size: 1.6rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .6rem; }
a { color: var(--azul); }
.ajuda { color: var(--suave); font-size: .9rem; margin: .2rem 0 .8rem; }
.aviso { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.aviso-ok { background: var(--verde-claro); color: var(--verde); }
.aviso-erro { background: var(--vermelho-claro); color: var(--vermelho); }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem 1.2rem; }
.cartao span { display: block; color: var(--suave); font-size: .85rem; }
.cartao strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.cartao.destaque { border-color: var(--verde); background: var(--verde-claro); }

.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.5rem; }
.caixa { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: .4rem 1.2rem 1.2rem; }
.caixa form label { display: block; margin-bottom: .7rem; font-size: .9rem; color: var(--suave); }
.caixa form label input, .caixa form label select { display: block; width: 100%; margin-top: .2rem; }
.caixa small { color: var(--verde); }
.alternar { display: flex; gap: 1.5rem; margin-bottom: .8rem; }
.alternar label { display: flex !important; align-items: center; gap: .4rem; color: var(--texto) !important; }
.alternar input { width: auto !important; margin: 0 !important; }

table { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
th, td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: middle; }
th { background: var(--papel-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td small { color: var(--suave); display: block; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.neg { color: var(--vermelho); }
.pos { color: var(--verde); }
.vazio { text-align: center; color: var(--suave); padding: 1.5rem; }
.selo { font-size: .7rem; background: var(--azul-claro); color: var(--azul); padding: 0 .35rem; border-radius: 4px; font-weight: 600; }
.barra-cel { width: 30%; min-width: 80px; }
.barra { height: 10px; background: var(--verde); border-radius: 5px; min-width: 2px; }
tr.total td { font-weight: 700; background: var(--papel-2); border-top: 2px solid var(--linha); }
tr.total td:first-child { white-space: nowrap; }
tr.mes-vazio td { color: var(--apagado); }
tr.mes-vazio .barra { display: none; }

input, select { font: inherit; padding: .45rem .6rem; border: 1px solid var(--borda-campo); border-radius: 6px; background: var(--campo); color: var(--texto); }
input:focus, select:focus { outline: 2px solid var(--verde); outline-offset: -1px; border-color: transparent; }
button, .botao-sec { font: inherit; padding: .5rem 1rem; border-radius: 6px; border: 0; background: var(--verde); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover { filter: brightness(1.1); }
button:disabled { opacity: .5; cursor: not-allowed; }
.botao-sec { background: transparent; color: var(--texto); border: 1px solid var(--borda-campo); }
.filtro { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; margin-bottom: 1rem; }
.filtro label { display: flex; flex-direction: column; font-size: .85rem; color: var(--suave); gap: .2rem; }
form.inline { display: inline; margin: 0; }
select.sem-ponto { border-color: var(--alerta); background: var(--alerta-claro); }
.link-perigo { background: none; color: var(--suave); padding: .2rem .5rem; }
.link-perigo:hover { color: var(--vermelho); }
table input[type=text] { width: 100%; }
section { overflow-x: auto; }

/* Pontos de venda */
.ponto-linha { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: end; padding: .9rem 0; border-bottom: 1px solid var(--linha); }
.ponto-linha > label:first-child, .ponto-linha details label { display: block; font-size: .9rem; color: var(--suave); }
.ponto-linha > label:first-child input, .ponto-linha details input { display: block; width: 100%; margin-top: .2rem; }
.ponto-linha label.ativo { display: flex; align-items: center; gap: .4rem; color: var(--texto); padding-bottom: .5rem; }
.ponto-linha label.ativo input { width: auto; margin: 0; }
.ponto-linha details { grid-column: 1 / -1; font-size: .85rem; color: var(--suave); }
.ponto-linha details summary { cursor: pointer; }
.ponto-linha details label { margin: .5rem 0 0; }
form.caixa { padding-top: .2rem; }
form.caixa > button { margin-top: 1rem; }

/* ============================================================
   Relatório e gráficos
   ============================================================ */
.relatorio-topo { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1rem; margin-bottom: .5rem; }
.relatorio-topo .acoes { display: flex; gap: .5rem; }
.subtitulo { color: var(--suave); margin: -.6rem 0 1rem; }
.kpi .variacao { display: block; font-size: .82rem; margin-top: .15rem; color: var(--suave); }
.kpi .variacao b { font-weight: 600; }
.kpi .variacao .sobe { color: var(--verde); }
.kpi .variacao .desce { color: var(--vermelho); }
.painel-grafico { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem 1.2rem 1.2rem; margin-bottom: 1.5rem; overflow: visible; }
.painel-grafico h2 { margin: 0 0 .2rem; }
.painel-grafico .ajuda { margin-bottom: .6rem; }
.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico text { fill: var(--suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico text.valor { fill: var(--texto); font-weight: 600; }
.grafico .linha-grade { stroke: var(--grade); stroke-width: 1; }
.grafico .linha-base { stroke: var(--eixo); stroke-width: 1; }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover + .marca-hover, .grafico g.item:hover .marca { opacity: .85; }
.legenda { display: flex; gap: 1.2rem; font-size: .85rem; color: var(--suave); margin-bottom: .5rem; flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.dica { position: absolute; pointer-events: none; background: var(--dica-fundo); color: var(--dica-texto); font-size: .82rem; padding: .45rem .65rem; border-radius: 6px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .1s; z-index: 5; line-height: 1.4; }
.dica.visivel { opacity: 1; }
.dica i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: .35rem; }
.grade-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 0 1.5rem; }
details.tabela-dados { margin-top: .6rem; font-size: .85rem; color: var(--suave); }
details.tabela-dados summary { cursor: pointer; }
details.tabela-dados table { margin-top: .5rem; font-size: .85rem; }

/* Modo apresentação: tela cheia, sem menu, letras maiores */
body.apresentando .topo, body.apresentando .relatorio-topo .acoes, body.apresentando .filtro { display: none; }
body.apresentando main { max-width: 1400px; font-size: 1.1rem; }
body.apresentando .cartao strong { font-size: 1.9rem; }

@media (max-width: 600px) {
  main { padding: 1rem; }
  .grade2, .grade-graficos { grid-template-columns: 1fr; }
  table { font-size: .85rem; }
  th, td { padding: .45rem .5rem; }
}

/* Impressão / Salvar em PDF: sempre tema claro, cada gráfico inteiro na página */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  :root, :root[data-tema="escuro"] {
    color-scheme: light;
    --fundo: #fff; --papel: #fff; --papel-2: #fafbfa; --texto: #1d2420; --suave: #555d58; --linha: #dfe3df;
    --verde: #1f7a4d; --verde-claro: #eef6f1; --vermelho: #b23a2e;
    --serie-1: #2a78d6; --serie-2: #eb6834; --grade: #e8eae6; --eixo: #c9ceca;
  }
  .topo, .relatorio-topo .acoes, .filtro, .dica, details.tabela-dados, main > h1 { display: none !important; }
  main { max-width: none; padding: 0; }
  .painel-grafico, .cartoes { break-inside: avoid; }
  .quebra { break-before: page; }
  .grade-graficos { grid-template-columns: 1fr 1fr; }
}
.kpi strong { display: block; font-size: 1.3rem; white-space: nowrap; }
.cartoes:has(.kpi) { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Login e cabeçalho com usuário */
main.centro { min-height: 100vh; display: grid; place-items: center; }
.caixa-login { width: min(380px, 100%); padding: 1.5rem 1.8rem 1.8rem; }
.caixa-login h1 { font-size: 1.35rem; margin: .4rem 0 1rem; }
.caixa-login label { display: block; margin-bottom: .9rem; font-size: .9rem; color: var(--suave); }
.caixa-login input { display: block; width: 100%; margin-top: .2rem; }
.caixa-login button { width: 100%; margin-top: .4rem; padding: .65rem; }
.usuario { display: flex; align-items: center; gap: .3rem; font-size: .9rem; }
.usuario a { color: var(--topo-texto); text-decoration: none; padding: .35rem .6rem; border-radius: 6px; }
.usuario a:hover, .usuario a.ativo { color: #fff; background: rgba(255,255,255,.08); }
pre.codigo { background: var(--papel-2); border: 1px solid var(--linha); border-radius: 6px; padding: .6rem .8rem; font-size: .8rem; white-space: pre-wrap; word-break: break-all; }
code { font-size: .88em; }
@media (max-width: 800px) {
  .topo { gap: .6rem 1rem; padding: .7rem 1rem; }
  .topo nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .topo nav a { white-space: nowrap; }
  .usuario { margin-left: auto; }
}
@media (max-width: 1250px) and (min-width: 801px) {
  .topo { gap: 1rem; }
  .usuario a[title^="Minha"] { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Aviso da sincronização automática */
.sync-aviso { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; background: var(--papel); color: var(--texto); border: 1px solid var(--linha); border-left: 4px solid var(--azul); border-radius: 8px; padding: .6rem .9rem; font-size: .88rem; box-shadow: 0 4px 16px rgba(0,0,0,.12); max-width: min(420px, calc(100vw - 2rem)); }
.sync-aviso.ok { border-left-color: var(--verde); }
.sync-aviso.erro { border-left-color: var(--vermelho); }
@media print { .sync-aviso { display: none; } }
form.caixa > label { display: block; margin-bottom: .7rem; font-size: .9rem; color: var(--suave); }
form.caixa > label input, form.caixa > label select { display: block; width: 100%; margin-top: .2rem; }
.caixa .botao-instalar { margin-bottom: .5rem; }
[hidden] { display: none !important; }

/* Links dentro de tabelas (meses, dias): discretos, com destaque ao passar o mouse */
a.link-tabela { color: var(--texto); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: .35rem; border-radius: 4px; }
a.link-tabela::after { content: '›'; color: var(--suave); font-size: 1.1em; line-height: 1; opacity: 0; transform: translateX(-3px); transition: opacity .15s, transform .15s; }
a.link-tabela:hover { color: var(--verde); }
a.link-tabela:hover::after { opacity: 1; transform: none; color: var(--verde); }
a.link-tabela:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
tr.mes-vazio a.link-tabela { color: var(--apagado); font-weight: 400; }
tr:has(a.link-tabela):hover td { background: var(--papel-2); }
a.cartao-link { text-decoration: none; color: inherit; }
a.cartao-link:hover { border-color: var(--verde); }
a.cartao-link span { color: var(--suave); }