/* Gustavo Celulares — controle da loja
   Azul-marinho e azul elétrico da marca WEFIX. Verde só para dinheiro entrando, vermelho só para perda. */
:root {
  --tinta: #0b1d4f;        /* marinho da marca: topo, navegação, textos fortes */
  --tinta-2: #142a6b;
  --eletrico: #2453ff;     /* ações */
  --eletrico-claro: #e8edff;
  --papel: #f3f5fa;
  --branco: #fff;
  --linha: #dce1ec;
  --texto: #101829;
  --suave: #5a6478;
  --dinheiro: #0b8a4e;
  --dinheiro-claro: #e3f4ea;
  --perda: #d02b20;
  --perda-claro: #fdebe9;
  --alerta: #a86200;
  --alerta-claro: #fdf1dd;
  --r-grande: 18px;
  --r: 14px;
  --r-pequeno: 10px;
  --nav: 66px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--texto);
  font: 17px/1.45 "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #7d98ff; outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
svg.i { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carregando { padding: 40vh 0; text-align: center; color: var(--suave); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Topo e navegação ---------- */
.topo {
  position: sticky; top: 0; z-index: 30; background: var(--tinta); color: #fff;
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
}
.topo .logo { width: 36px; height: 36px; border-radius: 50%; }
.topo .loja { font-weight: 800; font-size: 18px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.topo .trocar { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 999px; padding: 6px 12px 6px 8px; font-size: 15px; font-weight: 600; }
.topo .trocar svg.i { width: 18px; height: 18px; }
.nav { display: flex; background: var(--tinta); padding: 0 12px 10px; gap: 4px; }
.nav button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: transparent; color: #b9c5ee; padding: 10px 6px; border-radius: var(--r-pequeno);
  font-weight: 700; font-size: 16px;
}
.nav button.ativa { background: var(--branco); color: var(--tinta); }
.conteudo { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; }
@media (max-width: 760px) {
  .nav {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 6px 6px max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 rgba(255,255,255,.06);
  }
  .nav button { flex-direction: column; gap: 2px; font-size: 12.5px; padding: 6px 2px; min-height: 54px; }
  .conteudo { padding-bottom: calc(var(--nav) + 40px); }
}

/* ---------- Tipografia e blocos ---------- */
.titulo { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.intro { color: var(--suave); margin: 4px 0 16px; max-width: 60ch; }
.secao { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 26px 0 10px; }
.secao:first-child { margin-top: 0; }
.sub { color: var(--suave); font-size: 15px; }
.bloco { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-grande); padding: 6px 16px; }
.bloco.solto { padding: 16px; }
.vazio { text-align: center; color: var(--suave); padding: 28px 12px; }
.colunas { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.colunas > * { min-width: 0; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--linha); background: var(--branco); border-radius: var(--r);
  padding: 11px 18px; min-height: 50px; font-weight: 700; text-decoration: none; color: var(--texto);
}
.btn.acao { background: var(--eletrico); border-color: var(--eletrico); color: #fff; }
.btn.forte { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn.perigo { background: var(--perda-claro); border-color: var(--perda-claro); color: var(--perda); }
.btn.zap { background: #25d366; border-color: #25d366; color: #05391b; }
.btn.cheio { width: 100%; }
.btn.enorme { width: 100%; min-height: 62px; font-size: 20px; border-radius: var(--r-grande); }
.btn.pequeno { min-height: 40px; padding: 6px 12px; font-size: 15px; border-radius: var(--r-pequeno); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-linha > .btn { flex: 1 1 160px; }

/* Chips de filtro */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { border: 1.5px solid var(--linha); background: var(--branco); border-radius: 999px; padding: 8px 16px; font-weight: 700; white-space: nowrap; font-size: 15px; }
.chip.ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* Etiquetas do produto (aro, incell, cor) */
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tag { font-size: 13px; font-weight: 600; color: var(--suave); background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; padding: 1px 7px; }

/* Selos de estoque e situação */
.selo { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.selo.ok { background: var(--dinheiro-claro); color: var(--dinheiro); }
.selo.atencao { background: var(--alerta-claro); color: var(--alerta); }
.selo.ruim { background: var(--perda-claro); color: var(--perda); }
.selo.neutro { background: var(--eletrico-claro); color: var(--tinta-2); }

/* Campos */
.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.campo > small { display: block; color: var(--suave); font-size: 14px; margin-top: 4px; }
.campo input, .campo select { width: 100%; border: 1.5px solid var(--linha); border-radius: var(--r); padding: 12px 14px; background: var(--branco); min-height: 52px; }
.campo input:focus, .busca input:focus { outline: none; border-color: var(--eletrico); box-shadow: 0 0 0 3px #c9d5ff; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.busca { position: relative; margin-bottom: 12px; }
.busca svg.i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--suave); }
.busca input { width: 100%; font-size: 20px; padding: 15px 16px 15px 50px; border: 2px solid var(--linha); border-radius: var(--r-grande); background: var(--branco); }

/* Linhas de lista */
.linha { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--linha); }
.linha:last-child { border-bottom: 0; }
.linha .meio { flex: 1; min-width: 0; }
.linha .nome { font-weight: 700; }
.linha .lado { text-align: right; white-space: nowrap; }
button.linha { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
button.linha:last-child { border-bottom: 0; }
.seta { color: var(--suave); }
.valor { font-weight: 800; font-size: 18px; }
.verde { color: var(--dinheiro); }
.vermelho { color: var(--perda); }
.cancelada { opacity: .5; }
.cancelada .nome { text-decoration: line-through; }

/* Passo − + */
.passo { display: inline-flex; align-items: center; border: 1.5px solid var(--linha); border-radius: var(--r); overflow: hidden; background: var(--branco); flex: none; }
.passo button { border: 0; background: var(--papel); width: 48px; height: 48px; display: grid; place-items: center; }
.passo .n { min-width: 46px; text-align: center; font-weight: 800; font-size: 19px; }

/* ---------- Entrar ---------- */
.entrar { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 18px; background: var(--tinta); background-image: radial-gradient(120% 70% at 50% -10%, #2453ff 0%, rgba(36,83,255,0) 60%); }
.entrar-caixa { width: 100%; max-width: 420px; text-align: center; color: #fff; }
.entrar-logo { width: 132px; height: 132px; border-radius: 50%; display: block; margin: 0 auto 14px; }
.entrar h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.entrar p { color: #b9c5ee; margin: 6px 0 22px; }
.nomes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nomes button { border: 0; border-radius: var(--r-grande); background: var(--branco); color: var(--texto); padding: 18px 10px; font-size: 20px; font-weight: 800; }
.nomes button small { display: block; font-size: 14px; font-weight: 600; color: var(--suave); margin-top: 2px; }
.pin-caixa { background: var(--branco); color: var(--texto); border-radius: 22px; padding: 22px; }
.pin-pontos { display: flex; justify-content: center; gap: 12px; height: 26px; margin: 14px 0 18px; }
.pin-pontos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linha); }
.pin-pontos i.on { background: var(--tinta); border-color: var(--tinta); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.teclado button { border: 0; background: var(--papel); border-radius: var(--r); height: 62px; font-size: 26px; font-weight: 700; display: grid; place-items: center; }
.teclado button.ok { background: var(--eletrico); color: #fff; font-size: 19px; }

/* ---------- Vender ---------- */
.vender { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
.resultados { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.produto { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--branco); border: 1.5px solid var(--linha); border-radius: var(--r-grande); padding: 14px 16px; }
.produto:hover:not(:disabled) { border-color: var(--eletrico); }
.produto:disabled { opacity: .5; }
.produto .meio { flex: 1; min-width: 0; }
.produto .nome { font-weight: 800; font-size: 17px; line-height: 1.25; }
.produto .preco { text-align: right; white-space: nowrap; }
.produto .preco b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.produto .preco small { color: var(--suave); font-size: 13.5px; }
.produto .estado { margin-top: 8px; }
.dica-vazia { background: var(--branco); border: 1.5px dashed var(--linha); border-radius: var(--r-grande); padding: 26px 18px; text-align: center; color: var(--suave); }
.dica-vazia b { color: var(--texto); }

.carrinho { position: sticky; top: 132px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-grande); padding: 18px; }
.carrinho-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.carrinho-topo h2 { font-size: 21px; font-weight: 800; }
.fechar-folha { display: none; }
.item { padding: 14px 0; border-bottom: 1px solid var(--linha); }
.item-topo { display: flex; gap: 10px; align-items: flex-start; }
.item-topo .meio { flex: 1; min-width: 0; }
.item .nome { font-weight: 800; line-height: 1.25; }
.tirar { border: 0; background: none; color: var(--suave); padding: 4px; border-radius: 8px; }
.item-preco { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.preco-grande { border: 0; background: none; padding: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; text-decoration: underline dotted var(--linha) 2px; text-underline-offset: 6px; }
.descontos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.descontos button { border: 1.5px solid var(--linha); background: var(--branco); border-radius: var(--r-pequeno); padding: 9px 4px; font-weight: 700; font-size: 14.5px; }
.descontos button.ativo { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.desconto-txt { font-size: 14.5px; margin-top: 8px; color: var(--suave); }
.desconto-txt.limite { color: var(--alerta); font-weight: 700; }
.servico { margin-top: 12px; }
.servico-botao { width: 100%; border: 1.5px dashed var(--linha); background: none; border-radius: var(--r); padding: 12px; font-weight: 700; color: var(--suave); display: flex; gap: 8px; align-items: center; justify-content: center; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 12px; }
.total span { font-size: 18px; font-weight: 700; }
.total b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.pergunta { font-weight: 800; margin-bottom: 8px; }
.pagamentos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pagamentos button { border: 2px solid var(--linha); background: var(--branco); border-radius: var(--r); min-height: 56px; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pagamentos button.ativo { border-color: var(--eletrico); background: var(--eletrico-claro); color: var(--tinta); }
.limpar { width: 100%; border: 0; background: none; color: var(--suave); padding: 12px; font-weight: 600; text-decoration: underline; }

.barra-venda { display: none; }
@media (max-width: 960px) {
  .vender { grid-template-columns: minmax(0, 1fr); }
  .carrinho {
    position: fixed; z-index: 45; inset: 0; border-radius: 0; border: 0; overflow-y: auto;
    padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .22s ease; visibility: hidden;
  }
  .carrinho.aberto { transform: none; visibility: visible; }
  .fechar-folha { display: inline-flex; }
  .barra-venda.mostra {
    display: flex; position: fixed; z-index: 35; left: 10px; right: 10px; bottom: calc(var(--nav) + 10px + env(safe-area-inset-bottom));
    align-items: center; gap: 12px; background: var(--eletrico); color: #fff; border: 0; border-radius: var(--r-grande);
    padding: 14px 18px; font-weight: 800; font-size: 18px; box-shadow: 0 8px 24px rgba(36,83,255,.35);
  }
  .barra-venda .qtd { background: rgba(255,255,255,.2); border-radius: 999px; padding: 2px 10px; font-size: 15px; }
  .barra-venda .vai { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .tem-barra .conteudo { padding-bottom: calc(var(--nav) + 110px); }
}
@media (min-width: 761px) and (max-width: 960px) {
  .barra-venda.mostra { bottom: 16px; }
}

/* ---------- Início do dono ---------- */
.painel-hoje { background: var(--tinta); color: #fff; margin: -18px -16px 18px; padding: 8px 16px 24px; }
.painel-hoje .dia { color: #b9c5ee; font-weight: 600; }
.painel-hoje .numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 10px; max-width: 760px; }
.painel-hoje .rot { color: #b9c5ee; font-size: 15px; font-weight: 600; }
.painel-hoje .grande { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.painel-hoje .lucro .grande { color: #7ee6ad; }
.painel-hoje .miudo { color: #d6ddf6; margin-top: 12px; font-size: 15px; }
@media (min-width: 761px) { .painel-hoje { margin: -18px 0 18px; border-radius: 0 0 var(--r-grande) var(--r-grande); padding: 18px 24px 26px; } }
.atencoes { display: grid; gap: 8px; margin-bottom: 18px; }
.atencao { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-radius: var(--r); padding: 14px 16px; font-weight: 700; }
.atencao.ruim { background: var(--perda-claro); color: #7b160f; }
.atencao.aviso { background: var(--alerta-claro); color: #5e3700; }
.atencao.bom { background: var(--dinheiro-claro); color: #0a5a34; }
.atencao span { flex: 1; }
.atalhos-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
@media (max-width: 760px) { .atalhos-grade { grid-template-columns: 1fr 1fr; } }
.atalho { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; border: 1px solid var(--linha); background: var(--branco); border-radius: var(--r-grande); padding: 16px; font-weight: 800; font-size: 16px; line-height: 1.2; min-height: 104px; }
.atalho svg.i { width: 28px; height: 28px; color: var(--eletrico); }
.atalho.zap svg.i { color: #149c4a; }
.tabela-mini { width: 100%; border-collapse: collapse; }
.tabela-mini td { padding: 11px 0; border-bottom: 1px solid var(--linha); }
.tabela-mini tr:last-child td { border-bottom: 0; }
.tabela-mini td:not(:first-child) { text-align: right; font-weight: 700; }

/* ---------- Contagem ---------- */
.opcoes-contagem { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-bottom: 8px; }
.opcao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-grande); padding: 18px; }
.opcao h2 { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.opcao h2 svg.i { color: var(--eletrico); width: 26px; height: 26px; }
.opcao p { color: var(--suave); margin: 6px 0 14px; }
.progresso-caixa { position: sticky; top: 66px; z-index: 20; background: var(--papel); padding: 10px 0 12px; }
@media (min-width: 761px) { .progresso-caixa { top: 122px; } }
.progresso-texto { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 6px; }
.progresso { height: 10px; background: var(--linha); border-radius: 999px; overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--eletrico); border-radius: 999px; transition: width .2s; }
.contar-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.contar-item:last-child { border-bottom: 0; }
.contar-item .meio { flex: 1; min-width: 0; }
.contar-item .nome { font-weight: 800; line-height: 1.25; }
.contar-item.feito .nome::after { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--dinheiro); margin-left: 8px; vertical-align: middle; }
.contador { display: flex; align-items: center; gap: 6px; flex: none; }
.contador button { width: 50px; height: 50px; border-radius: var(--r); border: 1.5px solid var(--linha); background: var(--branco); display: grid; place-items: center; }
.contador input { width: 64px; height: 50px; text-align: center; font-size: 22px; font-weight: 800; border: 2px solid var(--linha); border-radius: var(--r); background: var(--branco); }
.contar-item.feito .contador input { border-color: var(--dinheiro); color: var(--dinheiro); }
.rodape-fixo { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--papel) 30%); }
@media (max-width: 760px) { .rodape-fixo { bottom: calc(var(--nav) + env(safe-area-inset-bottom)); } }

.resultado-hero { border-radius: var(--r-grande); padding: 22px 20px; margin-bottom: 16px; }
.resultado-hero.ruim { background: var(--perda); color: #fff; }
.resultado-hero.bom { background: var(--dinheiro); color: #fff; }
.resultado-hero .grande { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.resultado-hero p { margin-top: 8px; font-size: 17px; opacity: .95; max-width: 52ch; }
.resultado-hero .pecas { font-size: 21px; font-weight: 800; margin-top: 4px; }
.diferenca { padding: 14px 0; border-bottom: 1px solid var(--linha); }
.diferenca:last-child { border-bottom: 0; }
.diferenca .nome { font-weight: 800; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.tres div { background: var(--papel); border-radius: var(--r-pequeno); padding: 8px 10px; }
.tres small { display: block; color: var(--suave); font-size: 13.5px; font-weight: 600; }
.tres b { font-size: 22px; font-weight: 800; }
.tres .falta { background: var(--perda-claro); color: var(--perda); }
.tres .sobra { background: var(--eletrico-claro); color: var(--tinta-2); }

/* ---------- Modal (folha) e aviso ---------- */
#modal { position: fixed; inset: 0; z-index: 60; background: rgba(8, 18, 48, .55); display: flex; align-items: flex-end; justify-content: center; }
#modal[hidden] { display: none; }
.janela { background: var(--branco); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 22px 18px; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
@media (min-width: 761px) { #modal { align-items: center; } .janela { border-radius: 22px; padding: 24px; } }
.janela h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.janela .intro { margin-bottom: 18px; }
.caixa-cinza { background: var(--papel); border-radius: var(--r); padding: 16px; margin-top: 18px; }
.caixa-cinza h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
#aviso {
  position: fixed; left: 50%; bottom: calc(var(--nav) + 24px); transform: translate(-50%, 10px); z-index: 70;
  background: var(--texto); color: #fff; padding: 14px 20px; border-radius: var(--r); font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; max-width: min(92vw, 520px); text-align: center;
}
#aviso.mostra { opacity: 1; transform: translate(-50%, 0); }
#aviso.erro { background: var(--perda); }
@media (min-width: 761px) { #aviso { bottom: 28px; } }
.sucesso { text-align: center; padding: 10px 0 4px; }
.sucesso .marca { width: 76px; height: 76px; border-radius: 50%; background: var(--dinheiro); color: #fff; display: grid; place-items: center; margin: 0 auto 12px; }
.sucesso .marca svg.i { width: 40px; height: 40px; stroke-width: 3; }
.sucesso .grande { font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 4px; }
.sucesso .btn { margin-top: 18px; }

/* Tabelas largas (prévia do PDF) */
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th { text-align: left; color: var(--suave); font-size: 14px; font-weight: 700; padding: 8px 6px; border-bottom: 2px solid var(--linha); }
.tabela td { padding: 10px 6px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela .num { text-align: right; white-space: nowrap; }
.rolar { overflow: auto; max-height: 360px; }
.segmento { display: grid; grid-template-columns: 1fr 1fr; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r); padding: 4px; margin-bottom: 16px; gap: 4px; }
.segmento button { border: 0; background: none; border-radius: var(--r-pequeno); padding: 10px; font-weight: 700; color: var(--suave); }
.segmento button.ativo { background: var(--tinta); color: #fff; }
.numeros-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.numeros-linha div { background: var(--papel); border-radius: var(--r); padding: 12px; }
.numeros-linha small { display: block; color: var(--suave); font-weight: 600; font-size: 14px; }
.numeros-linha b { font-size: 22px; font-weight: 800; }

/* Ajustes finos de tela pequena */
.btn-linha.tres-botoes { display: grid; grid-template-columns: repeat(3, 1fr); }
.painel-hoje .grande, .resultado-hero .grande { font-size: clamp(30px, 9vw, 40px); }
@media (max-width: 520px) {
  .contar-item { flex-wrap: wrap; gap: 10px; }
  .contar-item .meio { flex-basis: 100%; }
  .contar-item .contador { margin-left: auto; }
  .contador button { width: 56px; height: 52px; }
  .contador input { width: 76px; height: 52px; }
}