/* Terminal de balcão. Fonte grande, alvo grande, alto contraste. Sem animação, sem gradiente. */
* { box-sizing: border-box; }
html { font-size: 20px; }
body {
  margin: 0; font-family: system-ui, -apple-system, Arial, sans-serif;
  background: #f4f4f4; color: #111; line-height: 1.4;
}

.topo {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: #111; color: #fff; padding: 0.9rem 1.2rem; flex-wrap: wrap;
}
.topo .empresa { font-weight: 700; font-size: 1.3rem; }
.topo .sep { margin: 0 .5rem; color: #888; }
.topo .loja { font-size: 1.3rem; }
.topo .operador { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.topo .op { font-size: 1.3rem; background: #1d6b2e; padding: .35rem .8rem; border-radius: 6px; }
.topo form { margin: 0; }

main { max-width: 60rem; margin: 1.5rem auto; padding: 0 1.2rem; }
/* CAIXA ALTA só nos RÓTULOS: título de coluna, nome de campo e botão. Dados, valores e frases
   seguem maiúscula/minúscula (texto corrido em caixa alta é mais lento de ler). */
table th, form label:not(.check), .btn, .btn-sec, button, details.acao > summary { text-transform: uppercase; }
input, select, textarea { text-transform: none; }   /* protege o que o operador digita */
h1 { font-size: 1.5rem; margin: .3rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.2rem 0 .5rem; }

/* grupos do menu: cada grupo é uma "linha" própria, com rótulo curto */
.grupo { margin: 0 0 1.4rem; }
.grupo-rotulo { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
  color: #777; font-weight: 700; margin: .2rem 0 .5rem; }

/* blocos grandes de navegação */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; }
.bloco {
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  min-height: 8rem; padding: 1.5rem; background: #fff; border: 3px solid #111;
  border-radius: 10px; text-decoration: none; color: #111;
}
.bloco .rotulo { font-size: 1.6rem; font-weight: 700; }
.bloco .dica { font-size: 1.1rem; color: #555; }
.bloco.desativado { border-style: dashed; color: #888; }
.bloco.desativado .rotulo { color: #888; }

/* cartões e formulários */
.cartao { background: #fff; border: 3px solid #111; border-radius: 10px; padding: 1.4rem; margin: 1.2rem 0; }
.cartao.destaque { border-color: #b00; }
form label { display: block; font-size: 1.2rem; font-weight: 600; margin: 1rem 0 .3rem; }
input, select {
  font-size: 1.4rem; padding: .7rem .8rem; width: 100%; border: 2px solid #333;
  border-radius: 6px; background: #fff; color: #111;
}
label.check { font-weight: 600; }
label.check input { width: auto; transform: scale(1.5); margin-right: .6rem; }
fieldset { border: 2px solid #333; border-radius: 8px; padding: .8rem 1rem; margin-top: 1rem; }
fieldset.assinatura { border-color: #b00; background: #fff5f5; }
fieldset.lojas label.check { display: block; margin: .5rem 0; }
legend { font-weight: 700; padding: 0 .4rem; }

.btn {
  font-size: 1.5rem; font-weight: 700; padding: .9rem 1.6rem; margin-top: 1.2rem;
  background: #111; color: #fff; border: none; border-radius: 8px; cursor: pointer;
}
.btn-sec {
  font-size: 1.05rem; padding: .55rem 1rem; background: #fff; color: #111;
  border: 2px solid #111; border-radius: 6px; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.cancelar { margin-left: .8rem; }
.voltar { font-size: 1.1rem; text-decoration: none; color: #06c; }

/* tabelas */
table.lista, table.resumo { width: 100%; border-collapse: collapse; font-size: 1.15rem; margin: .6rem 0; }
table.lista th, table.lista td, table.resumo th, table.resumo td {
  text-align: left; padding: .6rem .7rem; border-bottom: 2px solid #ddd;
}
table.lista thead th { background: #eee; }
table.resumo th { width: 12rem; }
.resumo .grande { font-size: 1.8rem; font-weight: 700; }
.total th, .total td { border-top: 3px solid #111; font-weight: 700; }
td.pos { color: #1d6b2e; } td.neg { color: #b00; }

/* mensagens */
.flash { font-size: 1.2rem; padding: .9rem 1.2rem; margin: 0; text-align: center; }
.flash.ok { background: #d8f0dc; color: #14431f; border-bottom: 3px solid #1d6b2e; }
.flash.erro { background: #f7d7d7; color: #6b1414; border-bottom: 3px solid #b00; }
.aviso { font-size: 1.1rem; color: #6b1414; }

/* lançamento */
.ir-inicio { color: inherit; text-decoration: none; }
.ir-inicio:hover { text-decoration: underline; }
.grade-item { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
@media (max-width: 40rem) { .grade-item { grid-template-columns: 1fr; } }
.linha-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.aviso-cliente { font-size: 1.3rem; }
.estrangeiro { margin-top: 1.2rem; }
.spread-vivo { font-size: 1.3rem; font-weight: 700; min-height: 1.6rem; margin: .3rem 0; }
/* LINHAS VIVAS (total e spread ao vivo) das telas de OURO. Ali a frase é comprida — traz a cotação
   equivalente por grama fina e a referência — e quebrava em mais linhas conforme o operador digitava,
   mudando o tamanho do card inteiro. Duas providências: o detalhe vai para uma segunda linha menor
   (.spread-detalhe) e cada linha tem a sua altura RESERVADA, então o texto cresce dentro do espaço
   e nada empurra o resto do formulário. */
.linhas-vivas { min-height: 9.6rem; }                             /* o pior caso, reservado de uma vez */
.linhas-vivas > .spread-vivo { min-height: 1.9rem; }
.spread-detalhe { display: block; font-size: .95rem; font-weight: 400; color: var(--tinta-600);
                  min-height: 2.4rem; margin-top: .15rem; }
/* GRADE DA ESCALA: lojas nas linhas, dias nas colunas. Célula compacta (horário + nomes) e a
   edição num painel que FLUTUA sobre a grade — abrir uma célula não pode fazer a linha crescer e
   espremer as outras lojas. Por isso o .pop é absolute: sai do fluxo, a tabela não se mexe. */
.app-tab.escala { position: relative; }
.app-tab.escala td.cel { vertical-align: top; text-align: left; min-width: 8.5rem; position: relative; }
.app-tab.escala td.cel .gente { font-size: .8125rem; margin: .2rem 0 .3rem; }
details.cel-edit > summary { display: inline-block; cursor: pointer; list-style: none;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .15rem .5rem; border: 1px solid var(--tinta-300); border-radius: var(--raio-sm);
  color: var(--tinta-600); background: var(--branco); }
details.cel-edit > summary::-webkit-details-marker { display: none; }
details.cel-edit > summary:hover { background: var(--creme-100); }
details.cel-edit[open] > summary { background: var(--verde-700); color: var(--creme-on-verde);
  border-color: var(--verde-700); }
/* EDITOR DA CÉLULA — ancorado DENTRO do card, logo abaixo da grade. Nada flutua e nada é
   posicionado por JS: o rádio marcado decide qual painel aparece (um por vez, por construção), e
   como é um bloco no fluxo, não cobre linha nenhuma e não tem como sair do card. */
label.cel-edit { display: inline-block; cursor: pointer;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .15rem .5rem; border: 1px solid var(--tinta-300); border-radius: var(--raio-sm);
  color: var(--tinta-600); background: var(--branco); }
label.cel-edit:hover { background: var(--creme-100); }
.cel-editor > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.cel-editor > .pop { display: none; }
.cel-editor > input[type=radio]:checked + .pop { display: block; }
.cel-editor > .pop {
  margin-top: var(--e3); padding: var(--e3);
  background: var(--creme-050); border: 1px solid var(--tinta-300); border-radius: var(--raio-md);
}
.pop .pop-tit { font-size: .875rem; font-weight: 600; margin-bottom: var(--e2); }
.pop .pop-fechar { float: right; cursor: pointer; font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-500); }
.pop .pop-fechar:hover { color: var(--tinta-900); }
/* os dois blocos e o Salvar LADO A LADO — o editor ocupa uma faixa baixa, não uma coluna alta */
.pop .pop-campos { display: flex; align-items: flex-end; gap: var(--e5); flex-wrap: wrap; }
.pop .pop-rot { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-500); margin-bottom: .15rem; }
.pop select, .pop input[type=time] { font-size: .8125rem; padding: .25rem .35rem; height: auto; }
.pop .pop-quem { display: flex; gap: .3rem; flex-wrap: wrap; }
.pop .pop-quem select { min-width: 10rem; }
.pop .pop-mais { font-size: .75rem; background: none; border: none; color: var(--verde-700);
  cursor: pointer; padding: 0; margin-top: .2rem; display: block; }
/* horário NA HORIZONTAL: fechada, abre, às, fecha — numa linha só */
.pop .pop-horario { display: flex; align-items: center; gap: .35rem; }
.pop .pop-horario input[type=time] { width: 5.6rem; }
.pop .pop-horario .app-check { font-size: .75rem; margin: 0; white-space: nowrap; }
.pop .pop-salvar { margin: 0; }
/* campo DEDUZIDO pelo cálculo cruzado (distinto do que o operador digitou) */
input.calc-auto { background: #eaf3ff; color: #0a58a2; font-style: italic; border-style: dashed; }
/* ações compactas do extrato: botões pequenos (mesmo tamanho, lado a lado) que abrem os campos só
   ao clicar. Cores: conferir=verde, corrigir=amarelo, cancelar=vermelho. */
details.acao { display: inline-block; vertical-align: top; margin: .3rem .4rem 0 0; }
details.acao > summary { display: inline-block; cursor: pointer; list-style: none; font-size: 1.05rem;
  padding: .45rem .9rem; min-width: 8.5rem; text-align: center; background: #fff; color: #111;
  border: 2px solid #333; border-radius: 6px; font-weight: 600; }
details.acao > summary::-webkit-details-marker { display: none; }
details.acao[open] { display: block; }
details.acao > form, details.acao > p { margin-top: .6rem; text-align: left; }
details.acao-conferir > summary { background: #1a7e3b; color: #fff; border-color: #14622e; }
details.acao-corrigir > summary { background: #e6b400; color: #3a2f00; border-color: #b58c00; }
details.acao-cancelar > summary { background: #c0392b; color: #fff; border-color: #93291e; }
details.acao-conferir[open] > summary { background: #14622e; }
details.acao-corrigir[open] > summary { background: #b58c00; }
details.acao-cancelar[open] > summary { background: #93291e; }
.spread-ok, td.spread-ok { color: #1d6b2e; }
.spread-fora, td.spread-fora { color: #b00; font-weight: 700; }
.spread-erro { color: #b00; }
.operando { font-size: 1.4rem; }

/* comprovante */
.comprovante { background: #fff; border: 3px solid #111; border-radius: 10px; padding: 1.6rem; }
.comprovante .codigo { font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; }
.acoes-comprovante { display: flex; gap: 1rem; margin-bottom: 1rem; }
.consentimento { font-size: 1.1rem; margin-top: 1rem; }
@media print {
  .topo, .flash, .acoes-comprovante { display: none; }
  .comprovante { border: none; padding: 0; }
  body { background: #fff; }
}

/* consultas — extrato, histórico, posição */
.filtros { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: end; margin: 1rem 0; }
.filtros label { display: flex; flex-direction: column; font-size: 1rem; gap: .2rem; }
/* referências do câmbio como planilha: compacta, todas as moedas visíveis de uma vez */
.ref-planilha td, .ref-planilha th { padding: .3rem .7rem; }
.ref-planilha input { width: 7.5rem; padding: .3rem .4rem; }
.ref-planilha tr.ref-ouro-lin td { border-top: 2px solid #d4af37; }
.dica-lista { font-size: 1.05rem; color: #555; margin: .4rem 0; }
details.op { border: 2px solid #ccc; border-radius: 8px; margin: .6rem 0; padding: .3rem .9rem; background: #fff; }
details.op summary { display: grid; grid-template-columns: 1.6fr 1.3fr 1fr 1.2fr .9fr .9fr auto;
  gap: .6rem; align-items: center; cursor: pointer; font-size: 1.15rem; padding: .5rem 0; }
@media (max-width: 60rem) { details.op summary { grid-template-columns: 1fr 1fr; } }
details.op .op-cod { font-weight: 700; letter-spacing: .3px; }
details.op .op-total { font-weight: 700; text-align: right; }
details.op-estornada summary { color: #6b1414; text-decoration: line-through; }
.badge-estorno { background: #b00; color: #fff; font-size: .8rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: 4px; text-decoration: none; display: inline-block; }
.estorno-info { color: #6b1414; font-size: 1.1rem; }
.estorno-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end;
  border-top: 2px dashed #ccc; padding-top: .8rem; margin-top: .4rem; }
.estorno-form label { display: flex; flex-direction: column; font-size: 1rem; gap: .2rem; }
.btn-perigo { background: #b00; }
.btn-perigo:hover { background: #900; }

/* cofre visual — rascunho, tem que parecer rascunho (nunca confundir com posição oficial) */
.aviso-rascunho { background: #fff4cc; border: 3px dashed #b58900; color: #6b5200;
  padding: 1rem 1.2rem; margin: 0 0 1rem; font-size: 1.15rem; border-radius: 8px; }
.tag-rascunho { background: #b58900; color: #fff; font-size: .8rem; font-weight: 700;
  padding: .15rem .55rem; border-radius: 4px; vertical-align: middle; text-transform: uppercase; }
/* vale */
.tipo-vale { border: 2px solid #ccc; border-radius: 8px; padding: .6rem 1rem; margin: .8rem 0;
  display: flex; gap: 1.5rem; }
.tipo-vale .radio { font-size: 1.15rem; }

/* cofre — grade 2 colunas, campos pequenos */
.grade-cofre { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.2rem; margin: 1rem 0; }
@media (max-width: 46rem) { .grade-cofre { grid-template-columns: 1fr; } }
.cofre-moeda { display: flex; align-items: center; gap: .6rem; border-bottom: 2px solid #eee; padding: .4rem 0; flex-wrap: wrap; }
.cofre-nome { font-weight: 700; min-width: 8.5rem; }
.cofre-moeda .mini { display: flex; flex-direction: column; font-size: .85rem; gap: .1rem; }
.campo-mini { width: 6.5rem; font-size: 1.1rem; padding: .35rem .5rem; }
.cofre-total { margin-left: auto; font-size: 1.15rem; white-space: nowrap; }

/* cores guia do MoneyGram */
.cor-verde { color: #1d6b2e; font-weight: 700; }
.cor-amarelo { color: #9a6b00; font-weight: 700; }
.cor-vermelho { color: #b00; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   SISTEMA — reforma visual (DESIGN.md). Arquivo de estilo central: as decisões visuais e de
   navegação vivem aqui, para o resto herdar. TUDO escopado sob `.app` (o mundo redesenhado começa
   com <body class="app">) — as telas antigas, sem essa classe, seguem intocadas até migrarem.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  /* Verde de marca — menu lateral, ações primárias */
  --verde-900:#063B2E; --verde-800:#0B4A3A; --verde-700:#125E49; --verde-600:#1B7259;
  /* Dourado — só destaque, nunca fundo de área */
  --ouro-500:#CBAA63; --ouro-600:#BE9B54; --ouro-100:#F7EFDB;
  /* Neutros — a maior parte da tela */
  --creme-050:#FCFAF6; --creme-100:#F8F4EC; --branco:#FFFFFF;
  --tinta-900:#111512; --tinta-600:#525C55; --tinta-500:#767F79; --tinta-300:#C2C7C3; --tinta-200:#E1E4E1;
  --creme-on-verde:#FCFAF6; --creme-on-verde-fraco:rgba(252,250,246,.68);
  /* Semânticas — só onde comunica estado */
  --ok-600:#2F7D5A;      --ok-100:#E5F1EA;
  --atencao-600:#B07F2B; --atencao-100:#F7EEDC;
  --perigo-600:#A8402F;  --perigo-100:#F6E4E0;
  --info-600:#2E6B7A;    --info-100:#E3EEF0;
  /* Tipografia */
  --fonte:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fonte-num:'Inter',ui-monospace,monospace;
  /* Espaço, raio, sombra */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px;
  --raio-sm:4px; --raio-md:8px; --raio-lg:12px; --raio-full:999px;
  --sombra:0 1px 2px rgba(6,59,46,.06); --sombra-md:0 2px 8px rgba(6,59,46,.08);
  --menu-w:220px; --menu-w-recolhido:56px;
  /* altura da faixa de mundos (a moldura tipo navegador). O menu e as telas de
     altura fixa descontam este valor — por isso ele é token, não número solto. */
  --mundos-h:38px;
}

/* ---------------------------------------------------------------- A COR DA EMPRESA (0101)
   O sistema é o MESMO para as duas empresas do grupo, e até aqui nada na tela dizia em qual delas
   a pessoa estava — quem logava na Dantur passava o dia na identidade da Express. A moldura passa
   a dizer isso antes de qualquer texto.

   ⚠ SÓ OS TOKENS DA MARCA MUDAM. O dourado continua dourado (é o acento do grupo, não de uma
   empresa) e as cores SEMÂNTICAS não se movem um grau: verde de "ok", vermelho de "perigo" e
   amarelo de "atenção" comunicam ESTADO. Um sistema onde o vermelho de erro muda de tom conforme
   a empresa é um sistema onde o operador para de confiar na cor.

   ⚠ E POR ISSO A REGRA VIVE NOS TOKENS, não nos componentes: os 31 usos de `var(--verde-…)` no
   arquivo continuam escritos igual, e recolorem juntos. Um tema que precisasse tocar cada
   componente seria um tema que a próxima tela esquece de aplicar.

   A rampa azul acompanha a luminosidade da verde degrau a degrau — não é "outro azul qualquer":
   trocar por um tom mais claro derrubaria o contraste do texto creme sobre o menu, que é medido. */
html.app-root.tema-azul{
  --verde-900:#082B45; --verde-800:#0D3A5C; --verde-700:#164C74; --verde-600:#1F5E8C;
  --sombra:0 1px 2px rgba(8,43,69,.06); --sombra-md:0 2px 8px rgba(8,43,69,.08);
}

/* O CSS legado fixa html{font-size:20px} (terminal de balcão). No mundo redesenhado o root volta a
   16px — a escala do DESIGN.md (1.75rem, 0.875rem…) pressupõe 16px. Escopado por html.app-root, que
   o app_base.html marca; as telas antigas seguem com 20px. */
html.app-root{ font-size:16px; }

/* ---- Layout base: menu lateral fixo + conteúdo ---------------------------------------------- */
body.app{
  margin:0; background:var(--creme-050); color:var(--tinta-900);
  font-family:var(--fonte); font-size:15px; line-height:1.45;
  /* minmax(0,1fr) e não 1fr: uma trilha `1fr` tem mínimo automático = MIN-CONTENT, então uma
     tabela larga (o lucro por loja tem 13 colunas) empurrava a coluna inteira e a PÁGINA ganhava
     barra horizontal, com o menu saindo do lugar. Com minmax(0,…) a coluna respeita a tela e quem
     rola é a tabela, dentro do seu invólucro (.app-tab-rola). Medido: 33 px de excesso. */
  /* DUAS LINHAS: a faixa de mundos atravessa as duas colunas, ACIMA do menu (ver .app-mundos).
     A primeira linha é `auto` e vale ZERO quando não há faixa — assim o mesmo grid serve as telas
     com e sem barra de mundo, sem classe extra. */
  display:grid; grid-template-columns:var(--menu-w) minmax(0, 1fr);
  grid-template-rows:auto minmax(0, 1fr); min-height:100vh;
}
html.menu-recolhido body.app{ grid-template-columns:var(--menu-w-recolhido) minmax(0, 1fr); }
.app *{ box-sizing:border-box; }
.app h1,.app h2,.app h3{ margin:0; font-weight:600; }

/* ---- Fluxo de ENTRADA (pré-mundo: login, operador, escolha, negado) — cartão centralizado, sem
   menu lateral. Usa os mesmos tokens/componentes; só o layout é diferente. --------------------- */
body.app.app-entrada{ display:block; }
.app-entrada__topo{ display:flex; justify-content:space-between; align-items:center; gap:var(--e4);
  flex-wrap:wrap; padding:var(--e3) var(--e6); border-bottom:1px solid var(--tinta-200); background:var(--branco); }
.app-entrada__marca{ display:flex; align-items:center; gap:var(--e2); font-size:1rem; font-weight:600; }
.app-entrada__marca .ponto{ width:10px; height:10px; border-radius:var(--raio-full); background:var(--ouro-500); flex:0 0 auto; }
.app-entrada__ctx{ display:flex; align-items:center; gap:var(--e3); font-size:.8125rem; color:var(--tinta-600); flex-wrap:wrap; }
.app-entrada__ctx form{ margin:0; }
.app-entrada__ctx button{ background:none; border:none; color:var(--verde-700); cursor:pointer;
  font:inherit; font-size:.8125rem; text-decoration:underline; padding:0; }
.app-entrada__main{ max-width:32rem; margin:var(--e8) auto; padding:0 var(--e5); }
.app-entrada__main.largo{ max-width:56rem; }
.app-entrada__titulo{ font-size:1.25rem; font-weight:600; margin:0 0 var(--e5); }

/* ---- Menu lateral --------------------------------------------------------------------------- */
.app-menu{
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
  background:var(--verde-900); color:var(--creme-on-verde);
  display:flex; flex-direction:column; padding:var(--e3) 0;
}
.app-menu__marca{
  display:flex; align-items:center; gap:var(--e2); padding:var(--e2) var(--e4) var(--e4);
  font-size:1rem; font-weight:600; letter-spacing:.01em;
}
.app-menu__marca .ponto{ width:10px; height:10px; border-radius:var(--raio-full); background:var(--ouro-500); flex:0 0 auto; }
.app-menu__grupo{ margin-top:var(--e3); }
.app-menu__rotulo{
  font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--creme-on-verde-fraco); padding:0 var(--e4) var(--e1); margin-top:var(--e2);
}
.app-menu__item{
  display:flex; align-items:center; gap:var(--e3);
  padding:var(--e2) var(--e4); color:var(--creme-on-verde); text-decoration:none;
  font-size:.875rem; border-left:3px solid transparent; white-space:nowrap;
}
.app-menu__item:hover{ background:var(--verde-800); }
.app-menu__item.ativo{ background:var(--verde-800); border-left-color:var(--ouro-500); font-weight:600; }
.app-menu__item.esmaecido{ color:var(--creme-on-verde-fraco); }   /* tela ainda não redesenhada */
/* grupo expansível: item pai (aberto = grupo da tela atual) + caret + sub-itens indentados */
.app-menu__caret{ margin-left:auto; font-size:.6875rem; color:var(--creme-on-verde-fraco); }
.app-menu__item.aberto{ background:var(--verde-800); font-weight:600; }   /* o pai destacado; o filho leva a borda dourada */
.app-menu__item.aberto .app-menu__sigla{ background:var(--ouro-500); color:var(--verde-900); }
.app-menu__filho{ display:block; text-decoration:none; white-space:nowrap;
  color:var(--creme-on-verde-fraco); font-size:.8125rem;
  padding:var(--e1) var(--e4) var(--e1) calc(var(--e4) + 34px); border-left:3px solid transparent; }
.app-menu__filho:hover{ background:var(--verde-800); color:var(--creme-on-verde); }
.app-menu__filho.ativo{ background:var(--verde-800); color:var(--creme-on-verde);
  font-weight:600; border-left-color:var(--ouro-500); }
.app-menu__sigla{
  flex:0 0 auto; width:22px; height:22px; border-radius:var(--raio-sm);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(252,250,246,.10); font-size:.6875rem; font-weight:700; letter-spacing:0;
}
.app-menu__item.ativo .app-menu__sigla{ background:var(--ouro-500); color:var(--verde-900); }
.app-menu__rodape{
  margin-top:auto; padding:var(--e4) var(--e4) var(--e2);
  border-top:1px solid rgba(252,250,246,.14); font-size:.75rem; color:var(--creme-on-verde-fraco);
}
.app-menu__rodape .quem{ color:var(--creme-on-verde); font-weight:600; font-size:.8125rem; }
.app-menu__rodape form{ margin:0; }
.app-menu__acao{
  display:block; width:100%; text-align:left; margin-top:var(--e2);
  background:none; border:none; color:var(--creme-on-verde-fraco); cursor:pointer;
  font:inherit; font-size:.75rem; padding:var(--e1) 0; text-decoration:none;
}
.app-menu__acao:hover{ color:var(--creme-on-verde); text-decoration:underline; }
.app-menu__recolher{
  margin:var(--e3) var(--e4) 0; padding:var(--e1) var(--e2);
  background:none; border:1px solid rgba(252,250,246,.22); border-radius:var(--raio-sm);
  color:var(--creme-on-verde-fraco); cursor:pointer; font:inherit; font-size:.75rem;
}
.app-menu__recolher:hover{ color:var(--creme-on-verde); }
/* recolhido: só as siglas */
html.menu-recolhido .app-menu__marca span,
html.menu-recolhido .app-menu__rotulo,
html.menu-recolhido .app-menu__txt,
html.menu-recolhido .app-menu__rodape .quem,
html.menu-recolhido .app-menu__rodape .quem + *,
html.menu-recolhido .app-menu__acao,
html.menu-recolhido .app-menu__recolher .txt{ display:none; }
html.menu-recolhido .app-menu__item{ justify-content:center; padding:var(--e2) 0; gap:0; }
html.menu-recolhido .app-menu__rotulo{ padding:0; height:var(--e3); }
/* recolhido: só os grupos (siglas). Sub-itens e caret somem; a sigla do grupo aberto fica dourada,
   indicando onde você está. Clicar num grupo leva à 1ª sub-tela; para escolher a irmã, expanda. */
html.menu-recolhido .app-menu__caret,
html.menu-recolhido .app-menu__filhos{ display:none; }

/* ---- Área de conteúdo ----------------------------------------------------------------------- */
/* `width:100%` + `min-width:0`: sem eles o MAIN era dimensionado pelo CONTEÚDO e passava da sua
   própria coluna do grid — a tabela de lucro por loja (13 colunas desde a 0066) empurrava o MAIN
   para 1093 px numa coluna de 1060, e a PÁGINA inteira ganhava barra horizontal, com o menu
   lateral saindo do lugar. Medido: 33 px de excesso; com `width:100%`, 1060 e nada rola.
   Quem rola é a tabela, dentro do seu invólucro `.app-tab-rola`. */
.app-conteudo{ padding:var(--e6) var(--e8); max-width:1280px; width:100%; min-width:0; }
.app-cabecalho{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--e4);
  flex-wrap:wrap; margin-bottom:var(--e5);
}
.app-cabecalho h1{ font-size:1.25rem; }
.app-cabecalho .sub{ font-size:.75rem; color:var(--tinta-500); }
.app-cabecalho .acoes{ display:flex; gap:var(--e2); align-items:center; }
/* faixa de alerta de conferência (topo do conteúdo no mundo do câmbio) — só quando há pendência */
.app-faixa{ display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap;
  background:var(--atencao-100); border:1px solid var(--atencao-600); border-radius:var(--raio-sm);
  padding:var(--e2) var(--e4); margin-bottom:var(--e5); font-size:.875rem; }
.app-faixa__txt{ font-weight:600; color:var(--atencao-600); }
.app-faixa .app-btn{ height:30px; margin-left:auto; }
.app-faixa .app-btn + .app-btn{ margin-left:var(--e2); }

.app .flash{ font-size:.875rem; padding:var(--e2) var(--e4); margin:0 0 var(--e4);
  border-radius:var(--raio-md); text-align:left; }
.app .flash.ok{ background:var(--ok-100); color:var(--ok-600); border:none; }
.app .flash.erro{ background:var(--perigo-100); color:var(--perigo-600); border:none; }
/* atenção: nem sucesso nem erro — a ação deu certo, mas sobrou algo para o admin lembrar. */
.app .flash.atencao{ background:var(--atencao-100); color:var(--atencao-600); border:none; }

/* ---- Filtros de período (topo, valem para tudo) --------------------------------------------- */
.app-filtros{
  display:flex; flex-wrap:wrap; gap:var(--e3); align-items:end;
  background:var(--branco); border:1px solid var(--tinta-200); border-radius:var(--raio-lg);
  padding:var(--e4); margin-bottom:var(--e5);
}
.app-filtros label{ display:flex; flex-direction:column; gap:var(--e1);
  font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-600); }
.app-filtros input,.app-filtros select{
  font:inherit; font-size:.875rem; padding:var(--e2) var(--e3); border:1px solid var(--tinta-300);
  border-radius:var(--raio-sm); background:var(--branco); color:var(--tinta-900); min-width:9rem;
}

/* ---- Botões --------------------------------------------------------------------------------- */
.app-btn{
  font:inherit; font-size:.8125rem; font-weight:600; height:36px; padding:0 var(--e4);
  background:var(--verde-700); color:var(--creme-on-verde); border:none; border-radius:var(--raio-sm);
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; text-transform:uppercase; letter-spacing:.04em;
}
.app-btn:hover{ background:var(--verde-600); }
.app-btn--sec{ background:transparent; color:var(--tinta-900); border:1px solid var(--tinta-300); }
.app-btn--sec:hover{ background:var(--creme-100); }

/* ---- Cartões de resumo (topo do painel) ----------------------------------------------------- */
.app-cartoes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--e4); margin-bottom:var(--e5); }
.app-cartao{ background:var(--branco); border:1px solid var(--tinta-200); border-radius:var(--raio-lg);
  padding:var(--e5); box-shadow:var(--sombra); }
.app-cartao .rotulo{ font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-500); }
.app-cartao .num{ font-family:var(--fonte-num); font-variant-numeric:tabular-nums;
  font-size:1.75rem; font-weight:700; margin:var(--e2) 0 var(--e1); line-height:1.1; white-space:nowrap; }
.app-cartao .num .u{ font-size:.8125rem; font-weight:600; color:var(--tinta-500); margin-right:3px; }
.app-cartao.principal .num{ color:var(--ouro-600); }
.app-cartao .delta{ font-size:.75rem; font-variant-numeric:tabular-nums; }
.app-cartao .delta.sobe{ color:var(--ok-600); } .app-cartao .delta.desce{ color:var(--perigo-600); }
.app-cartao .delta.neutro{ color:var(--tinta-500); }
.app .pos{ color:var(--ok-600); } .app .neg{ color:var(--perigo-600); }

/* ---- Grade de painéis (tabelas densas lado a lado) ------------------------------------------ */
.app-paineis{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e4); align-items:start; }
@media (max-width:60rem){ .app-paineis{ grid-template-columns:1fr; } }
.app-painel{ background:var(--branco); border:1px solid var(--tinta-200); border-radius:var(--raio-lg);
  padding:var(--e5); box-shadow:var(--sombra); }
.app-painel.largo{ grid-column:1 / -1; }
.app-painel__titulo{ font-size:.9375rem; font-weight:600; margin-bottom:var(--e1); }
.app-painel__dica{ font-size:.75rem; color:var(--tinta-500); margin:0 0 var(--e3); }
.app-nota{ font-size:.75rem; color:var(--tinta-500); margin-top:var(--e3); }

/* ---- Tabela densa --------------------------------------------------------------------------- */
.app-tab{ width:100%; border-collapse:collapse; font-size:.875rem; }
/* TABELA LARGA ROLA DENTRO DO PAINEL, nunca empurra a página. O lucro por loja tem 13 colunas
   (ganhou "benefícios" na 0066) e passava da largura da tela: o corpo inteiro ganhava barra
   horizontal e o menu lateral saía do lugar. Quem rola é a tabela, não a página.
   O invólucro é que rola; a tabela dentro dele mantém `table-layout` normal. Nada de
   `min-width:max-content` nas seções — isso vaza para fora do overflow e volta a empurrar a
   página (35 px, medidos). */
.app-tab-rola{ overflow-x:auto; }
.app-tab-rola > .app-tab{ min-width:44rem; }   /* abaixo disso a tabela fica ilegível */
.app-tab th,.app-tab td{ padding:var(--e2) var(--e3); border-bottom:1px solid var(--tinta-200);
  text-align:right; font-variant-numeric:tabular-nums; }
.app-tab th{ font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-600); background:var(--creme-100); }
.app-tab thead th{ position:relative; }
.app-tab th:first-child,.app-tab td:first-child{ text-align:left; }
.app-tab td:first-child{ font-variant-numeric:normal; }
.app-tab tr.total td,.app-tab tr.total th{ font-weight:600; border-top:2px solid var(--tinta-300); }
.app-tab .vazio{ text-align:center; color:var(--tinta-500); padding:var(--e4); }
/* barra de proporção atrás do primeiro campo (leitura de distribuição) */
.app-tab .combarra{ position:relative; }
.app-tab .combarra .barra{ position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:70%; background:var(--ouro-500); opacity:.20; border-radius:var(--raio-sm); z-index:0; }
.app-tab .combarra .rot{ position:relative; z-index:1; }
/* linha expansível (cotação → operadores) */
.app-tab details.exp summary{ cursor:pointer; list-style:none; }
.app-tab details.exp summary::-webkit-details-marker{ display:none; }
.app-det{ border:none; }
.app-det > summary{ display:grid;
  grid-template-columns:1.4fr repeat(4,1fr); gap:var(--e3); align-items:center;
  padding:var(--e2) var(--e3); border-bottom:1px solid var(--tinta-200); cursor:pointer;
  font-size:.875rem; font-variant-numeric:tabular-nums; }
.app-det > summary::-webkit-details-marker{ display:none; }
.app-det > summary:hover{ background:var(--creme-100); }
.app-det > summary .cod{ font-weight:600; text-align:left; }
.app-det > summary .m{ text-align:right; }
.app-det[open] > summary{ background:var(--creme-100); }
.app-det .filhos{ padding:0 0 var(--e3) var(--e4); }
.app-badge{ display:inline-block; font-size:.6875rem; font-weight:600; padding:.1rem .5rem;
  border-radius:var(--raio-full); text-transform:uppercase; letter-spacing:.04em; }
.app-badge.atencao{ background:var(--atencao-100); color:var(--atencao-600); }
.app-badge.perigo{ background:var(--perigo-100); color:var(--perigo-600); }
.app-badge.info{ background:var(--info-100); color:var(--info-600); }
.app-badge.ok{ background:var(--ok-100); color:var(--ok-600); }

/* impressão do comprovante no shell novo: só o comprovante, sem menu/cabeçalho/faixa */
@media print {
  body.app{ display:block; }
  .app-menu, .app-cabecalho, .app-faixa, .acoes-comprovante{ display:none !important; }
  .app-conteudo{ padding:0; max-width:none; }
  .app-painel{ border:none; box-shadow:none; padding:0; }
}

/* ---- Navegação de conteúdo (back-link e cards-link de hub) ----------------------------------- */
.app-voltar{ display:inline-block; font-size:.8125rem; color:var(--verde-700); text-decoration:none;
  margin:0 0 var(--e4); }
.app-voltar:hover{ text-decoration:underline; }
.app-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--e4); }
.app-link{ display:block; background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-lg); padding:var(--e5); text-decoration:none; color:var(--tinta-900);
  box-shadow:var(--sombra); }
.app-link:hover{ border-color:var(--verde-600); }
.app-link .t{ font-size:.9375rem; font-weight:600; }
.app-link .d{ font-size:.75rem; color:var(--tinta-500); margin-top:var(--e1); }

/* ---- Aviso / callout ------------------------------------------------------------------------ */
.app-aviso{ border-left:3px solid var(--atencao-600); background:var(--atencao-100);
  color:var(--tinta-900); padding:var(--e3) var(--e4); border-radius:var(--raio-sm);
  font-size:.8125rem; margin:0 0 var(--e4); }
.app-aviso.perigo{ border-left-color:var(--perigo-600); background:var(--perigo-100); }
.app-aviso strong{ font-weight:600; }

/* ---- Formulários (cadastro/edição do mundo admin) — escopo explícito .app-form -------------- */
.app-form{ display:block; }
.app-form .campo{ margin-bottom:var(--e4); }
.app-form label{ display:block; font-size:.6875rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-600); margin:0 0 var(--e1); }
.app-form input,.app-form select,.app-form textarea{
  font:inherit; font-size:.875rem; padding:var(--e2) var(--e3); width:100%;
  border:1px solid var(--tinta-300); border-radius:var(--raio-sm);
  background:var(--branco); color:var(--tinta-900); }
.app-form input:focus,.app-form select:focus,.app-form textarea:focus{
  outline:2px solid var(--verde-600); outline-offset:-1px; }
.app-form .grade2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e3) var(--e4); }
@media (max-width:46rem){ .app-form .grade2{ grid-template-columns:1fr; } }
/* grade que flui (formulário de item do lançamento: operação, moeda, qtd, cotação, total) */
.app-form .grade-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--e3) var(--e4); }
/* toggle CPF/CNPJ: o botão ativo (classe .ativo dada pelo mascaras.js) fica preenchido */
.app-btn.ativo{ background:var(--verde-700); color:var(--creme-on-verde); border-color:var(--verde-700); }
/* alvo maior nas telas de lançamento (uso em pé, apressado) */
.app-lanc .app-form input, .app-lanc .app-form select{ font-size:1rem; padding:var(--e3); }
.app-lanc .app-btn{ height:44px; }
/* formulário de item: ABRE pronto no começo (sem itens); depois do 1º item FECHA e vira o botão
   "Adicionar outro item" (o estado aberto vem do servidor conforme houver itens). Padrão das telas
   de lançamento — ver DESIGN.md. */
.app-add{ margin-top:var(--e4); }
.app-add > summary{ display:inline-flex; align-items:center; gap:var(--e2); cursor:pointer;
  list-style:none; font:inherit; font-size:.8125rem; font-weight:600; height:44px; padding:0 var(--e4);
  background:transparent; color:var(--tinta-900); border:1px solid var(--tinta-300);
  border-radius:var(--raio-sm); text-transform:uppercase; letter-spacing:.04em; }
.app-add > summary::-webkit-details-marker{ display:none; }
.app-add > summary::before{ content:'+'; font-size:1.1rem; line-height:1; }
.app-add > summary:hover{ background:var(--creme-100); }
.app-add[open] > summary{ margin-bottom:var(--e3); }
.app-add__corpo{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-lg); padding:var(--e5); box-shadow:var(--sombra); }
.app-add__corpo .app-painel__titulo{ margin-bottom:var(--e3); }
/* linha de campos lado a lado (inline) — cada label empilha rótulo+campo */
.app-form.linha,.app-form .linha{ display:flex; flex-wrap:wrap; gap:var(--e3) var(--e4); align-items:end; }
.app-form.linha > label,.app-form .linha > label{ margin:0; }
.app-form.linha input,.app-form.linha select,.app-form .linha input,.app-form .linha select{ min-width:8rem; }
/* checkbox inline (mostrar inativos, ativa) — rótulo em caixa normal, não é label-título */
.app-form .check,.app-check{ display:inline-flex; align-items:center; gap:var(--e2);
  font-size:.875rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--tinta-900); margin:0; }
.app-form .check input,.app-check input{ width:auto; }

/* PIN / assinatura — destaque de atenção (gravação sensível) */
.app-assinatura{ border:1px solid var(--atencao-600); background:var(--atencao-100);
  border-radius:var(--raio-md); padding:var(--e3) var(--e4); margin-top:var(--e4);
  display:flex; flex-wrap:wrap; gap:var(--e3) var(--e4); align-items:end; }
.app-assinatura .leg{ width:100%; font-size:.6875rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--atencao-600); }
.app-assinatura label{ display:flex; flex-direction:column; gap:var(--e1); margin:0;
  font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-600); }
.app-assinatura input,.app-assinatura select{ font:inherit; font-size:.875rem; padding:var(--e2) var(--e3);
  border:1px solid var(--tinta-300); border-radius:var(--raio-sm); background:var(--branco); min-width:9rem; }

/* linha cancelada/estornada na tabela nova */
.app-tab tr.estornada td{ color:var(--tinta-500); text-decoration:line-through; }
.app-tab tr.estornada .app-badge{ text-decoration:none; }
/* linha em destaque (ex.: venda a coletar na OM pendente) */
.app-tab tr.destaque td{ background:var(--atencao-100); }

/* input dentro de célula de tabela (planilha de referências, contagem) */
.app-tab input{ font:inherit; font-size:.875rem; padding:var(--e1) var(--e2); width:100%;
  border:1px solid var(--tinta-300); border-radius:var(--raio-sm); background:var(--branco);
  color:var(--tinta-900); text-align:right; font-variant-numeric:tabular-nums; }
.app-tab td.editavel{ width:9rem; }

/* paginação no visual novo */
.app-paginacao{ display:flex; gap:var(--e3); align-items:center; margin-top:var(--e4); }

/* botão perigo (cancelar/estornar) */
.app-btn--perigo{ background:var(--perigo-600); color:var(--creme-on-verde); }
.app-btn--perigo:hover{ background:var(--perigo-600); filter:brightness(.92); }

/* linha expansível de listagem (vales, e futuras listas tipo extrato) */
.app-op{ background:var(--branco); border:1px solid var(--tinta-200); border-radius:var(--raio-md);
  margin-bottom:var(--e2); }
.app-op > summary{ display:grid; grid-template-columns:1.3fr 1.3fr .8fr 1.4fr .9fr auto; gap:var(--e3);
  align-items:center; padding:var(--e3) var(--e4); cursor:pointer; list-style:none;
  font-size:.875rem; font-variant-numeric:tabular-nums; }
.app-op > summary::-webkit-details-marker{ display:none; }
.app-op > summary:hover{ background:var(--creme-100); }
.app-op[open] > summary{ background:var(--creme-100); border-bottom:1px solid var(--tinta-200); }
.app-op__total{ font-weight:600; text-align:right; }
.app-op__corpo{ padding:var(--e3) var(--e4); font-size:.875rem; }
.app-op.destaque > summary{ background:var(--atencao-100); }
.app-op.destaque[open] > summary{ background:var(--atencao-100); }
.app-op.estornada > summary{ color:var(--tinta-500); }
.app-op.estornada > summary .app-op__total{ text-decoration:line-through; }
.app-op.extrato > summary{ grid-template-columns:1.3fr 1.1fr 1.4fr 1.2fr .8fr .9fr auto; }
@media (max-width:60rem){ .app-op > summary, .app-op.extrato > summary{ grid-template-columns:1fr 1fr; } }

/* ---- FOLHA: linha compacta por funcionário, agrupada por loja base ------------------------- */
/* .folha-cab repete a MESMA grade do summary — cabeçalho e subtotal alinham com as linhas. */
.app-op.folha{ margin-bottom:0; border-radius:0; border-top:none; }
.app-op.folha:first-of-type{ border-top:1px solid var(--tinta-200); }
.app-op.folha > summary,
.folha-cab{ display:grid; grid-template-columns:1.6fr .85fr 1.3fr .7fr .7fr .8fr .8fr 1fr;
  gap:var(--e3); align-items:center; padding:var(--e2) var(--e4); }
.folha-cab{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--tinta-500); }
.folha-cab > span:not(:first-child){ text-align:right; }
.app-op.folha > summary > span:not(:first-child){ text-align:right; }
.folha-cab.subtotal{ text-transform:none; letter-spacing:0; font-size:.875rem;
  color:var(--tinta-600); border-top:1px solid var(--tinta-200); background:var(--creme-100); }
.folha-grupo{ margin-bottom:var(--e4); }
.folha-grupo__tit{ font-weight:600; font-size:.9375rem; margin-bottom:var(--e1); }
/* duas colunas no corpo: origem dos números à esquerda, pontualidade e vales à direita */
.folha-det{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e4); align-items:start; }
/* SÓ o <strong> que é rótulo de seção vira bloco — o <strong> dentro de <p> destaca um número no
   meio da frase e tem que continuar inline, senão a frase quebra em pedaços soltos. */
.folha-det > div > strong{ display:block; margin:var(--e3) 0 var(--e1); font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--tinta-500); }
.folha-det > div > strong:first-child{ margin-top:0; }
.folha-det p{ margin:0; }
.folha-conta{ margin:var(--e3) 0 0; padding-top:var(--e2); border-top:1px solid var(--tinta-200); }
.app-tab.compacta{ font-size:.8125rem; margin-top:var(--e1); }
@media (max-width:60rem){
  .app-op.folha > summary, .folha-cab{ grid-template-columns:1fr 1fr; }
  /* Sem espaço para a linha de cabeçalho: ela sai e CADA CÉLULA passa a carregar o próprio rótulo.
     Sem isto o celular mostrava oito números empilhados sem dizer qual era bônus, ajuste ou vale. */
  .folha-cab:not(.subtotal){ display:none; }
  .app-op.folha > summary > span[data-rot]{ text-align:left; }
  .app-op.folha > summary > span[data-rot]::before{
    content:attr(data-rot); display:block; font-size:.6875rem; text-transform:uppercase;
    letter-spacing:.04em; color:var(--tinta-500); }
  .app-op.folha > summary > span:first-child{ grid-column:1 / -1; font-weight:600; }
  .folha-det{ grid-template-columns:1fr; }
}

/* bloco de pendência (conferência): itens separados por divisória dentro do painel */
.app-pend{ padding:var(--e3) 0; border-top:1px solid var(--tinta-200); }
.app-pend:first-of-type{ border-top:none; }
.app-pend__info{ margin:0 0 var(--e2); font-size:.875rem; }

/* barra de ações do topo do conteúdo já tem .app-cabecalho .acoes; forms ali ficam inline */
.app-cabecalho .acoes form{ margin:0; }

/* ---- COMPROVANTES (câmbio e ouro) ---------------------------------------------------------- */
/* Duas tabelas lado a lado: cliente | operação. Empilha em tela estreita e no papel estreito. */
.comprov-duplo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e4); align-items:start; }
@media (max-width:52rem){ .comprov-duplo{ grid-template-columns:1fr; } }
.comprov-titulo{ font-family:var(--fonte-num); font-weight:700; font-size:.9375rem; letter-spacing:.5px;
  padding-bottom:var(--e2); border-bottom:2px solid var(--tinta-900); margin-bottom:var(--e2); }
/* rótulo de seção e da coluna: CAIXA ALTA por CSS, nunca no texto */
.comprov-secao{ text-transform:uppercase; font-size:.6875rem; font-weight:700; letter-spacing:.08em;
  color:var(--tinta-600); margin:0 0 var(--e2); }
.comprov-tab th{ text-align:left; text-transform:uppercase; font-size:.6875rem; letter-spacing:.06em;
  color:var(--tinta-600); white-space:nowrap; width:9rem; }
.comprov-tab td{ text-align:left; }                     /* dado em maiúscula-minúscula normal */
/* pernas da operação: o que o cliente entregou / recebeu, e o líquido embaixo */
.comprov-pernas{ width:100%; }
.comprov-pernas th{ text-align:left; text-transform:uppercase; font-size:.6875rem; letter-spacing:.06em;
  color:var(--tinta-600); }
.comprov-pernas td{ text-align:right; font-variant-numeric:tabular-nums; }
.comprov-pernas tr.liquido th, .comprov-pernas tr.liquido td{ border-top:2px solid var(--tinta-900);
  font-size:1.0625rem; font-weight:700; color:var(--tinta-900); padding-top:var(--e2); }
.comprov-consent{ margin:var(--e4) 0 0; font-size:.8125rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--tinta-600); }
.comprov-consent strong{ color:var(--tinta-900); }
.comprov-rodape a{ color:var(--verde-700); }
/* bloco de RETIRADA do ouro: é a garantia — tem de saltar aos olhos, inclusive impresso */
.comprov-retirada{ border:2px solid var(--ouro-600); border-radius:var(--raio-md); padding:var(--e3);
  margin-top:var(--e4); }
.comprov-retirada .marca{ font-weight:700; color:var(--ouro-600); text-transform:uppercase;
  font-size:.75rem; letter-spacing:.08em; }
@media print{
  .comprov-duplo{ grid-template-columns:1fr 1fr; }      /* no papel, sempre lado a lado */
  .comprov-retirada{ border:2px solid #000; }
  .app-painel{ padding:0; }
  .nao-imprime{ display:none !important; }              /* controle interno não vai no papel do cliente */
}


/* A FRASE DA DIFERENÇA na conferência. Grande de propósito: é o momento em que o operador decide
   se reconta ou registra, e ele está de pé no balcão, com dinheiro na mão. Número pequeno aqui
   convida ao erro que a conferência inteira existe para pegar. */
.app-conf-frase{ font-size:1.125rem; line-height:1.6; margin:var(--e3) 0 0; }
.app-conf-frase strong{ font-variant-numeric:tabular-nums; }

/* Legenda dos destinos da pendência de caixa: a CONSEQUÊNCIA de cada botão, ao lado dele. Os
   rótulos sozinhos não denunciam que um cria dívida e outro não gera nada. */
.app-pend__legenda{ list-style:none; margin:var(--e2) 0; padding:0;
  font-size:.8125rem; color:var(--tinta-600); }
.app-pend__legenda li{ padding:.15rem 0 .15rem .75rem; border-left:2px solid var(--tinta-200); }
.app-pend__legenda em{ font-style:normal; font-weight:600; color:var(--tinta-900); }


/* ---------------------------------------------------------------- CRM: a fila de retomada */
/* Sete colunas: quem, o quê, quanto, quando, de quem, quantos contatos. A do "quando" é a que
   o operador varre com o olho — por isso o badge, e não uma data solta. */
.app-op.crm > summary{ grid-template-columns:1.5fr 1.4fr .8fr 1fr .9fr auto; }
@media (max-width:60rem){ .app-op.crm > summary{ grid-template-columns:1fr 1fr; } }

/* OS SETE BOTÕES. Cada um com a CONSEQUÊNCIA embaixo, em texto pequeno — a lição das pendências
   de caixa: rótulo sozinho não denuncia que um encerra como perdida e outro sai da estatística.
   Grade, e não linha, para os sete caberem sem rolagem e com alvo grande (uso apressado). */
.crm-acoes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:var(--e3); margin-top:var(--e2); }
@media (max-width:46rem){ .crm-acoes{ grid-template-columns:1fr; } }
.crm-acao{ border:1px solid var(--tinta-200); border-radius:var(--raio-md); padding:var(--e3);
  display:flex; flex-direction:column; }
/* ⚠ `display:flex`, não `block`. Era `block`, e como a regra tem especificidade maior que a de
   `.app-btn` (que é `inline-flex`), ela vencia: os <summary> estilizados como botão perdiam a
   centralização e ficavam com o texto colado à esquerda, ao lado de botões centralizados. Era
   isto que fazia a fileira parecer quebrada. */
.crm-acao__abre > summary{ list-style:none; cursor:pointer; display:flex;
  justify-content:center; }
.crm-acao__abre > summary::-webkit-details-marker{ display:none; }
.crm-acao .app-btn{ width:100%; justify-content:center; text-align:center; }
/* a dica empurra o rodapé do cartão: com alturas de texto diferentes, os cartões da mesma fileira
   terminavam em alturas diferentes e a grade parecia torta */
.crm-acao__dica{ display:block; margin-top:var(--e2); font-size:.75rem; color:var(--tinta-500);
  flex:1 1 auto; }
.crm-acao form{ margin:0; }
.crm-acao__abre[open] > summary{ margin-bottom:var(--e2); }
.crm-acao .campo{ margin-bottom:var(--e2); }
.crm-extras{ display:flex; flex-wrap:wrap; gap:var(--e4); align-items:end;
  margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--tinta-200); }


/* ---------------------------------------------------------------- INBOX (leva B)
   A tela em que a equipe passa o dia. Duas colunas: lista estreita, conversa larga — o que se lê
   o dia todo é a conversa. Altura fixa e rolagem POR COLUNA: a página não rola, cada lado rola o
   seu, como todo aplicativo de mensagem. Rolar a página inteira faria perder a caixa de escrever. */
/* TELA CHEIA. A altura era `calc(100vh - 9rem)` — um palpite: bastava uma faixa de aviso a mais
   no topo (conferência + fila + WhatsApp + reservas empilham) para a página ganhar rolagem e a
   caixa de escrever cair abaixo da dobra. Medido: 149 px de excesso numa janela de 950. Agora
   ninguém adivinha altura nenhuma: o corpo é a janela, o conteúdo é uma coluna flex, e o inbox
   fica com O QUE SOBRAR depois das faixas — quantas forem. */
/* O `overflow:hidden` precisa estar no <html> TAMBÉM: quem rola a viewport é o elemento raiz, e
   travar só o <body> deixava 24 px de rolagem — pouco, mas o bastante para a caixa de escrever
   dançar quando o operador usa a roda do mouse sobre a lista. Medido. */
html.app-root--cheia, html.app-root--cheia body.app{ height:100%; overflow:hidden; }
body.app.app-cheia{ height:100vh; overflow:hidden; }
/* ⚠ DESCONTA A FAIXA DE MUNDOS. Com `100vh` cravado, a faixa empurrava o inbox para baixo e a
   caixa de escrever saía pela borda da janela — que é justamente o que a tela cheia existe para
   impedir. O menu desconta o mesmo valor (ver `.app-mundos ~ .app-menu`). */
body.app.app-cheia .app-conteudo{ height:calc(100vh - var(--mundos-h)); display:flex;
  flex-direction:column; overflow:hidden; padding:var(--e4) var(--e5) var(--e4); max-width:none; }
body.app.app-cheia .app-cabecalho{ margin-bottom:var(--e3); flex:0 0 auto; }
body.app.app-cheia .app-faixa{ flex:0 0 auto; }
.inbox{ display:grid; grid-template-columns:20rem minmax(0,1fr) 17rem; gap:var(--e3);
  flex:1 1 auto; min-height:0; }
/* A coluna "quem é" some antes da conversa: entre saber com quem se fala e PODER falar, o
   segundo vence numa tela apertada. */
@media (max-width:78rem){ .inbox{ grid-template-columns:20rem 1fr; } .inbox__quem{ display:none; } }
@media (max-width:60rem){ .inbox{ grid-template-columns:1fr; }
  body.app.app-cheia{ height:auto; overflow:visible; }
  body.app.app-cheia .app-conteudo{ height:auto; overflow:visible; } }

.inbox__lista{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); overflow-y:auto; }
.inbox__busca{ display:flex; gap:var(--e2); padding:var(--e3);
  border-bottom:1px solid var(--tinta-200); }
.inbox__busca input{ flex:1; min-width:0; height:32px; border:1px solid var(--tinta-300);
  border-radius:var(--raio-sm); padding:0 var(--e2); font-size:.875rem; }
.inbox__som{ font-size:.72rem; color:var(--tinta-500); display:flex;
  align-items:center; gap:.2rem; margin-left:auto; cursor:pointer; }
.inbox__anexo{ display:inline-flex; align-items:center; cursor:pointer; font-size:1.1rem;
  padding:0 var(--e2); opacity:.65; }
.inbox__anexo:hover{ opacity:1; }
.inbox__anexo[data-nome]:not([data-nome=""])::after{ content:attr(data-nome); font-size:.7rem;
  margin-left:.25rem; color:var(--verde-700); max-width:9rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.inbox__notas{ border-top:1px solid var(--tinta-200); }
.inbox__notas > summary{ padding:var(--e2) var(--e4); font-size:.8rem; color:var(--tinta-600);
  cursor:pointer; }
.inbox__nota{ background:var(--creme-100); border-left:3px solid var(--tinta-300);
  padding:var(--e2) var(--e3); margin:0 0 var(--e2); border-radius:var(--raio);
  font-size:.85rem; }
.msg__img{ max-width:220px; max-height:220px; border-radius:var(--raio); display:block; }
.quem__comp{ margin-bottom:var(--e2); }
.quem__comp .app-btn{ width:100%; font-size:.72rem; }
.inbox__modelo{ border-top:1px solid var(--tinta-200); }
.inbox__modelo > summary{ padding:var(--e2) var(--e4); font-size:.82rem; color:var(--verde-700);
  cursor:pointer; font-weight:600; }
.inbox__modelo-corpo{ background:var(--creme-100); border-radius:var(--raio);
  padding:var(--e2) var(--e3); font-size:.85rem; margin:0 0 var(--e3); white-space:pre-wrap; }
/* ABAS DOS TRÊS NEGÓCIOS — sublinhado, não caixa. Caixa cheia disputa atenção com os botões de
   ação; a aba tem de dizer "onde estou" e calar a boca. */
.inbox__negocios{ display:flex; gap:var(--e5); border-bottom:1px solid var(--tinta-200);
  margin-bottom:var(--e3); flex:0 0 auto; }
.inbox__negocio{ position:relative; padding:var(--e2) .15rem calc(var(--e2) + 2px);
  color:var(--tinta-600); font-weight:600; font-size:.875rem; text-decoration:none;
  display:flex; align-items:center; gap:.4rem; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .12s ease, border-color .12s ease; }
.inbox__negocio:hover{ color:var(--tinta-900); }
.inbox__negocio.ativa{ color:var(--verde-700); border-bottom-color:var(--verde-700); }
/* O CONTADOR. Era um "1" solto grudado no rótulo e ninguém sabia do que era. Agora tem forma de
   contador, cor de atenção e um `title` que diz a frase inteira. */
.inbox__negocio .inbox__n{ background:var(--atencao-100); color:var(--atencao-600);
  border-radius:var(--raio-full); min-width:1.15rem; height:1.15rem; padding:0 .3rem;
  display:inline-flex; align-items:center; justify-content:center; font-size:.6875rem;
  font-weight:700; font-variant-numeric:tabular-nums; }
.inbox__negocio.ativa .inbox__n{ background:var(--verde-700); color:var(--creme-on-verde); }
.inbox__abas{ display:flex; flex-wrap:wrap; gap:var(--e1); padding:var(--e2) var(--e3);
  border-bottom:1px solid var(--tinta-200); }
.inbox__aba{ font-size:.75rem; padding:.15rem .5rem; border-radius:var(--raio-full);
  color:var(--tinta-600); text-decoration:none; }
.inbox__aba:hover{ background:var(--creme-100); }
.inbox__aba.ativa{ background:var(--verde-700); color:var(--creme-on-verde); }
.inbox__n{ font-weight:600; }

.inbox__item{ display:flex; gap:var(--e2); padding:var(--e3);
  border-bottom:1px solid var(--tinta-200);
  text-decoration:none; color:var(--tinta-900); }
.inbox__item:hover{ background:var(--creme-100); }
.inbox__item.aberta{ background:var(--creme-100); border-left:3px solid var(--ouro-500); }
/* ESPERANDO é o estado que importa: a última mensagem é do cliente, alguém está esperando AGORA */
.inbox__item.esperando .inbox__nome{ font-weight:600; }
.inbox__item.esperando .inbox__quando{ color:var(--perigo-600); font-weight:600; }
.inbox__corpo-item{ min-width:0; flex:1; }
.inbox__topo{ display:flex; justify-content:space-between; gap:var(--e2); font-size:.875rem; }
.inbox__nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox__quando{ color:var(--tinta-500); font-size:.75rem; white-space:nowrap; }
.inbox__dono{ color:var(--ok-600); }
.inbox__sem-dono{ color:var(--tinta-300); }
.inbox__previa{ font-size:.75rem; color:var(--tinta-500); margin-top:.15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox__marcas{ margin-top:.3rem; display:flex; gap:.25rem; flex-wrap:wrap; }

/* ⚠ SEM `overflow:hidden` aqui. Ele existia como cinto e suspensório contra as gavetas
   estourarem a coluna — mas quem resolve isso é o `min-height:0` da lista de mensagens e o
   `max-height` das gavetas. Com ele, o MENU DE RESERVAR (que abre ancorado à direita e se estende
   para a esquerda) era cortado pela borda do painel. Cinto a mais cortou o que interessava. */
.inbox__conversa{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); display:flex; flex-direction:column; min-height:0; }
/* AS GAVETAS DE BAIXO (notas, oportunidade, modelo aprovado): rolam por dentro E abrem UMA POR
   VEZ (o `name` no <details> faz o acordeão exclusivo). Abertas juntas somavam 1.714 px numa
   coluna de 575 — e como a coluna não rola, os sete botões de decisão ficavam inalcançáveis num
   notebook. Medido em 1366×768. Uma por vez também é o gesto certo: são três coisas diferentes
   de se fazer, não três painéis para consultar ao mesmo tempo. */
.inbox__notas > div, .inbox__oport > div, .inbox__modelo > div{
  max-height:30vh; overflow-y:auto; }
/* O cabeçalho QUEBRA em duas linhas quando não cabe, em vez de espremer o nome até ele sumir.
   Com a ação de lançar/reservar no topo são QUATRO botões, e num notebook eles não cabem ao lado
   do nome: sem o wrap, "Encerrar" saía pela borda e o nome do cliente virava uma coluna de uma
   letra. Numa tela larga continua tudo numa linha só. */
.inbox__cabecalho{ display:flex; justify-content:space-between; align-items:center;
  gap:var(--e2) var(--e3); padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--tinta-200); flex:0 0 auto; flex-wrap:wrap; }
/* O nome CEDE espaço aos botões, em vez de quebrar em duas linhas e empurrar o cabeçalho. Com
   quatro ações (a de lançar/reservar entrou no topo), 1366 px já era apertado. */
.inbox__quem-topo{ display:flex; align-items:center; gap:var(--e3); min-width:0;
  flex:1 1 12rem; }
.inbox__quem-topo > div{ min-width:0; }
.inbox__titulo{ font-size:.9375rem; font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
/* Barra de ações COMPACTA: são quatro botões numa coluna estreita, e o padrão (36 px de altura,
   `--e4` de folga lateral) estourava a borda por poucos pixels justamente no "Encerrar". Menor
   aqui e só aqui — o resto do sistema continua com o botão do tamanho de sempre. */
.inbox__cabecalho .app-btn{ white-space:nowrap; height:30px; padding:0 var(--e3);
  font-size:.75rem; letter-spacing:.02em; }
.inbox__acoes{ display:flex; gap:var(--e2); align-items:center; position:relative; flex:0 0 auto; }
/* MENU DE PASSAR: "Passar" era um <summary> — texto que não parecia clicável. Agora é botão, e o
   que abre é um menu flutuante, que não empurra o cabeçalho para baixo. */
.inbox__menu{ position:relative; }
.inbox__menu[open] > summary{ background:var(--creme-100); }
.inbox__menu > summary{ list-style:none; }
.inbox__menu > summary::-webkit-details-marker{ display:none; }
.inbox__menu-corpo{ position:absolute; right:0; top:calc(100% + var(--e2)); z-index:20;
  background:var(--branco); border:1px solid var(--tinta-300); border-radius:var(--raio-md);
  box-shadow:var(--sombra-md); padding:var(--e3); min-width:15rem; }
/* INICIAIS no lugar da bolinha: cinco linhas de texto quase iguais não se varrem de relance. */
.inbox__ini{ width:2rem; height:2rem; flex:0 0 auto; border-radius:var(--raio-full);
  background:var(--verde-700); color:var(--creme-on-verde); font-size:.75rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; letter-spacing:.02em; }
.inbox__ini--peq{ width:1.6rem; height:1.6rem; font-size:.625rem; }
.inbox__ini--anon{ background:var(--tinta-300); color:var(--tinta-700); }
/* SEPARADOR DE DIA, como no WhatsApp: sem ele, conversa de vários dias vira um bloco só. */
.msg__dia{ text-align:center; margin:var(--e4) 0 var(--e3); }
.msg__dia span{ background:var(--creme-100); border:1px solid var(--tinta-200);
  border-radius:var(--raio-full); padding:.15rem .7rem; font-size:.6875rem;
  color:var(--tinta-600); }
/* `min-height:0` e não 12rem: com um mínimo, a lista de mensagens se recusava a encolher quando
   uma gaveta abria embaixo, e o que sobrava era cortado — os botões de decisão ficavam fora de
   alcance. Quem cede espaço para a gaveta é a lista, que rola. */
.inbox__mensagens{ flex:1 1 auto; overflow-y:auto; padding:var(--e4); min-height:0; }

.msg{ max-width:min(34rem, 80%); margin-bottom:var(--e3); }
.msg--entrada{ margin-right:auto; }
.msg--saida{ margin-left:auto; text-align:right; }
.msg__corpo{ display:inline-block; text-align:left; padding:var(--e2) var(--e3);
  border-radius:var(--raio-md); font-size:.875rem; white-space:pre-wrap; word-break:break-word; }
.msg--entrada .msg__corpo{ background:var(--creme-100); border:1px solid var(--tinta-200); }
.msg--saida .msg__corpo{ background:var(--ok-100); border:1px solid var(--ok-600); }
.msg__pe{ font-size:.6875rem; color:var(--tinta-500); margin-top:.15rem; }
.msg__lida{ color:var(--ok-600); font-weight:600; }

/* A CAIXA DE ESCREVER, no gesto do WhatsApp Web: um balão único com o clipe dentro e o botão
   redondo ao lado. O aviso do relógio sobe para CIMA da caixa — no rodapé ele disputava a linha
   com o botão e era o primeiro a sumir quando a janela apertava. */
.inbox__rodape{ border-top:1px solid var(--tinta-200); padding:var(--e2) var(--e4) var(--e3);
  flex:0 0 auto; }
.inbox__janela{ font-size:.6875rem; color:var(--atencao-600); display:block;
  margin-bottom:var(--e2); }
.inbox__janela.calma{ color:var(--tinta-500); }
.inbox__escrever{ display:flex; gap:var(--e2); align-items:flex-end; }
.inbox__balao{ flex:1; min-width:0; display:flex; align-items:flex-end; gap:var(--e1);
  background:var(--creme-050); border:1px solid var(--tinta-300);
  border-radius:1.25rem; padding:.3rem .3rem .3rem var(--e3); }
.inbox__balao:focus-within{ border-color:var(--verde-700); background:var(--branco); }
.inbox__escrever textarea{ flex:1; min-width:0; border:0; background:none; outline:none;
  padding:.35rem 0; font:inherit; font-size:.875rem; resize:none; max-height:8rem;
  line-height:1.4; }
.inbox__enviar{ width:2.5rem; height:2.5rem; flex:0 0 auto; border-radius:var(--raio-full);
  border:0; background:var(--verde-700); color:var(--creme-on-verde); cursor:pointer;
  font-size:1.05rem; display:inline-flex; align-items:center; justify-content:center; }
.inbox__enviar:hover{ filter:brightness(1.08); }
.inbox__dica-teclado{ font-size:.625rem; color:var(--tinta-400); margin:var(--e1) 0 0;
  text-align:right; }
/* A janela fechada não é aviso decorativo: é a caixa de escrever DESAPARECENDO, porque tentar
   mandar daria erro da Meta com o cliente esperando. */
.inbox__fechada{ padding:var(--e3) var(--e4); border-top:1px solid var(--tinta-200);
  background:var(--atencao-100); color:var(--atencao-600); font-size:.8125rem; }
.inbox__oport{ border-top:1px solid var(--tinta-200); }
.inbox__oport > summary{ padding:var(--e2) var(--e4); cursor:pointer; font-size:.8125rem;
  background:var(--creme-100); }

/* ---------------------------------------------------------------- "quem é" (leva C)
   O que separa esta tela de um WhatsApp Web: enquanto o cliente digita, o operador vê com quem
   está falando. Só leitura — nenhuma conta nova mora aqui. */
.inbox__quem{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); padding:var(--e4); overflow-y:auto; font-size:.8125rem; }
.quem__nome{ font-size:.9375rem; font-weight:600; }
.quem__numeros{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e3) var(--e2);
  padding:var(--e3) 0; border-top:1px solid var(--tinta-200);
  border-bottom:1px solid var(--tinta-200); }
.quem__numeros strong{ display:block; font-size:1.0625rem; font-variant-numeric:tabular-nums; }
.quem__rot{ display:block; font-size:.6875rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-500); }
.quem__nota{ font-size:.6875rem; margin:var(--e2) 0 0; }
.quem__titulo{ font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-500); margin:var(--e4) 0 var(--e2); }
.quem__tab{ width:100%; border-collapse:collapse; font-size:.75rem;
  font-variant-numeric:tabular-nums; }
.quem__tab td{ padding:.2rem 0; border-bottom:1px solid var(--tinta-200); }
.quem__tab td:last-child{ text-align:right; }
.quem__alerta{ margin-top:var(--e3); padding:var(--e2); border-radius:var(--raio-sm);
  background:var(--perigo-100); color:var(--perigo-600); font-size:.75rem; }

/* ---------------------------------------------------------------- respostas prontas (`/`)
   O mesmo gesto do WhatsApp Business, de onde o operador está vindo. Sobe ACIMA da caixa de
   texto: a lista que cobre o que se está escrevendo esconde justamente o que se quer conferir. */
.inbox__campo{ position:relative; flex:1; display:flex; }
.inbox__campo textarea{ flex:1; }
.prontas{ position:absolute; bottom:calc(100% + var(--e2)); left:0; right:0; z-index:5;
  max-height:16rem; overflow-y:auto; background:var(--branco);
  border:1px solid var(--tinta-300); border-radius:var(--raio-md); box-shadow:var(--sombra-md); }
.prontas__item{ padding:var(--e2) var(--e3); cursor:pointer; font-size:.8125rem;
  border-bottom:1px solid var(--tinta-200); }
.prontas__item:last-child{ border-bottom:none; }
.prontas__item.marcado, .prontas__item:hover{ background:var(--creme-100); }
.prontas__item b{ color:var(--verde-700); }
.prontas__previa{ display:block; color:var(--tinta-500); font-size:.75rem; margin-top:.1rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------------------------------------------------------------- abas de MUNDO (0099)
   O menu é "onde estou dentro deste mundo"; a barra é "em qual mundo estou". Ela atravessa a
   LARGURA INTEIRA, na linha 1 do grid, ACIMA do menu — porque trocar de mundo TROCA O MENU, e
   quem manda no menu não pode morar dentro dele. Antes ela vivia no conteúdo e rolava para fora da
   tela: o caminho de volta sumia justamente na página longa, que é onde a pessoa se perde.

   O desenho é o do navegador, e cada peça tem função: a faixa é a moldura escura (o MESMO verde do
   menu, para a marca não se partir num "L" de duas cores) e a ABA ATIVA é da cor do conteúdo, com
   canto superior arredondado e sem borda embaixo — ela deixa de ser um botão e vira a folha que
   está na frente. */
.app-mundos{
  grid-column:1 / -1;                     /* atravessa menu + conteúdo */
  position:sticky; top:0; z-index:30;
  display:flex; align-items:flex-end; gap:2px;
  height:var(--mundos-h); padding:0 var(--e4);
  background:var(--verde-900);
  /* A RÉGUA DOURADA fecha a faixa e separa a moldura do sistema (pedido do dono, 08/09/2026).
     Ela é `box-shadow` e não `border-bottom` por uma razão de layout: borda entraria na altura do
     elemento e empurraria a página 2px, e a altura da faixa é o token que o menu e o inbox
     descontam — mexer nela desalinharia os dois. A sombra pinta por fora, sem ocupar espaço. */
  box-shadow:inset 0 -2px 0 var(--ouro-500);
}
.app-mundo{
  font-size:.875rem; font-weight:500; line-height:1;
  padding:.5rem .95rem .55rem; text-decoration:none;
  color:var(--creme-on-verde-fraco);
  border-radius:var(--raio-md) var(--raio-md) 0 0;
  transition:color .12s, background .12s;
  white-space:nowrap;
}
.app-mundo:hover{ color:var(--creme-on-verde); background:var(--verde-800); }
.app-mundo.ativo{
  /* a cor do CONTEÚDO, não uma cor de destaque: é isso que faz a aba parecer a página em si */
  background:var(--creme-050); color:var(--tinta-900); font-weight:600;
}
.app-mundo.ativo:hover{ background:var(--creme-050); }
.app-mundo:focus-visible{ outline:2px solid var(--ouro-500); outline-offset:-2px; }

/* O menu começa ABAIXO da faixa e a altura dele desconta essa faixa — senão a última linha
   (Sair da loja) ficaria escondida atrás do rodapé da janela. */
.app-mundos ~ .app-menu{ top:var(--mundos-h); height:calc(100vh - var(--mundos-h)); }

/* E A MARCA DO MENU SOME QUANDO HÁ ABA. Com a barra em cima, "Administração" aparecia duas vezes
   coladas — na aba ativa e na linha logo abaixo dela. A aba ativa JÁ diz em que mundo se está, e
   diz melhor, porque mostra também os outros. Sem a barra (não deve acontecer hoje, mas o CSS não
   pode depender disso) a marca continua lá. */
.app-mundos ~ .app-menu .app-menu__marca{ display:none; }
.app-mundos ~ .app-menu{ padding-top:var(--e4); }

/* ---------------------------------------------------------------- GRÁFICOS (§8.34)
   Sem biblioteca: toda biblioteca traz o visual dela — fonte, paleta, tooltip, grade — e o
   sistema passa a ter duas identidades. As cores saem da identidade (verde e dourado do
   DESIGN.md), agrupadas por parentesco: os dois câmbios em verde, o MoneyGram em azul-petróleo,
   os dois ouros em dourado. Assim a leitura "o que é câmbio e o que é ouro" acontece antes de o
   olho ler a legenda. */
.graf{ margin:0; }
.graf__area{ position:relative; }
.graf__grade{ position:absolute; inset:0; pointer-events:none; }
.graf__grade span{
  position:absolute; left:0; right:0; height:1px; background:var(--tinta-200);
}
.graf__grade span:first-child, .graf__grade span:last-child{ background:var(--tinta-300); }
.graf__zero{
  position:absolute; left:0; right:0; height:1px; background:var(--tinta-500); z-index:1;
}
.graf__colunas{
  position:absolute; inset:0; display:flex; align-items:flex-end; gap:1px;
}
.graf__col{ position:relative; flex:1 1 0; height:100%; }
/* ⚠ CADA FATIA É POSICIONADA, não empilhada: altura em % só resolve contra contêiner de altura
   DEFINIDA, e dentro de uma pilha de altura automática ela vira zero. A coluna tem altura real,
   então `bottom` e `height` em % dela funcionam — a conta do empilhamento é feita no macro. */
.graf__fatia{ position:absolute; left:0; right:0; }
.graf__fatia--neg{ opacity:.9; }

/* o realce é do DIA inteiro, não da fatia: a pergunta na frente do gráfico é "o que houve neste
   dia?", e destacar uma faixa isolada responderia outra. */
.graf__col::after{
  content:""; position:absolute; inset:0; background:var(--tinta-900); opacity:0;
  transition:opacity .12s; pointer-events:none;
}
.graf__col:hover::after, .graf__col:focus-visible::after{ opacity:.07; }
.graf__col:focus-visible{ outline:none; }

.graf__balao{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--verde-900); color:var(--creme-on-verde);
  padding:.5rem .65rem; border-radius:4px; font-size:.78rem; line-height:1.5;
  white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .12s;
  z-index:3; box-shadow:0 4px 14px rgba(0,0,0,.18); pointer-events:none;
  display:flex; flex-direction:column; gap:.1rem;
}
.graf__col:hover .graf__balao, .graf__col:focus-visible .graf__balao{ opacity:1; visibility:visible; }
.graf__balao b{ font-weight:600; margin-bottom:.15rem; }
.graf__balao span{ display:flex; align-items:center; gap:.35rem; }
.graf__balao i{ width:.55rem; height:.55rem; border-radius:1px; flex:none; }
.graf__balao em{ font-style:normal; margin-left:auto; padding-left:.9rem;
                 font-variant-numeric:tabular-nums; }
.graf__balao-total{ border-top:1px solid rgba(252,250,246,.22); margin-top:.25rem;
                    padding-top:.25rem; font-weight:600; }
/* perto da borda o balão foge da tela — desloca em vez de sumir */
.graf__col:first-child .graf__balao, .graf__col:nth-child(2) .graf__balao{
  left:0; transform:none; }
.graf__col:last-child .graf__balao, .graf__col:nth-last-child(2) .graf__balao{
  left:auto; right:0; transform:none; }

.graf__eixo{ display:flex; gap:1px; margin-top:.35rem; }
.graf__marca{
  flex:1 1 0; font-size:.68rem; color:var(--tinta-500); text-align:center;
  white-space:nowrap; overflow:visible; font-variant-numeric:tabular-nums;
}
.graf__legenda{
  display:grid; gap:.1rem .9rem; margin-top:var(--e3);
  border-top:1px solid var(--tinta-200); padding-top:var(--e3);
}
@media (min-width:760px){ .graf__legenda{ grid-template-columns:1fr 1fr; } }
.graf__item{
  display:grid; grid-template-columns:.7rem 1fr auto 2.6rem; align-items:baseline;
  gap:.5rem; padding:.22rem 0; font-size:.86rem;
}
.graf__item i{ width:.7rem; height:.7rem; border-radius:2px; align-self:center; }
.graf__nome{ color:var(--tinta-600); }
.graf__valor{ font-variant-numeric:tabular-nums; color:var(--tinta-900); font-weight:500; }
.graf__pct{ font-variant-numeric:tabular-nums; color:var(--tinta-500); text-align:right; }

/* ---------------------------------------------------------------- colunas por categoria */
.graf__area--cat{ position:relative; }
.graf__cats{ position:absolute; inset:0; display:flex; align-items:flex-end; gap:clamp(6px,3%,28px); }
.graf__cat{ position:relative; flex:1 1 0; height:100%; }
.graf__barra{ position:absolute; left:0; right:0; border-radius:2px 2px 0 0; }
.graf__barra.neg{ border-radius:0 0 2px 2px; }
.graf__cat:hover .graf__barra, .graf__cat:focus-visible .graf__barra{ filter:brightness(1.12); }
.graf__cat:focus-visible{ outline:none; }

/* a marca do período anterior: um traço curto ATRAVESSANDO a coluna. Uma segunda coluna ao lado
   dobraria a largura e faria o olho comparar vizinhos errados — o que interessa é a distância
   entre a coluna e a sua própria marca. */
.graf__antes{
  position:absolute; left:-6%; right:-6%; height:2px; background:var(--tinta-900);
  opacity:.55; border-radius:2px;
}
.graf__valor-topo{
  position:absolute; left:0; right:0; text-align:center; font-size:.76rem; font-weight:600;
  color:var(--tinta-900); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.graf__eixo--cat{ gap:clamp(6px,3%,28px); }
.graf__marca-cat{
  flex:1 1 0; text-align:center; font-size:.78rem; line-height:1.35; color:var(--tinta-600);
  display:flex; flex-direction:column; gap:.05rem; min-width:0;
}
.graf__marca-cat b{ font-weight:500; color:var(--tinta-900); overflow:hidden;
                    text-overflow:ellipsis; white-space:nowrap; }
.graf__marca-cat em{ font-style:normal; font-size:.72rem; font-variant-numeric:tabular-nums; }
.graf__marca-cat .sobe{ color:var(--ok-600); }
.graf__marca-cat .desce{ color:var(--perigo-600); }
.graf__marca-cat .novo{ color:var(--tinta-500); }

/* ---------------------------------------------------------------- barras deitadas
   Acima de 8 categorias a coluna fica mais estreita que o nome. Deitada, o nome tem a largura
   toda e a ordenação lê de cima para baixo, como se lê um ranking. */
.graf__barras{ display:flex; flex-direction:column; gap:.15rem; }
.graf__linha{
  display:grid; grid-template-columns:minmax(5rem,9rem) 1fr auto 3.2rem;
  align-items:center; gap:.7rem; padding:.3rem .15rem; border-radius:3px;
}
.graf__linha:hover, .graf__linha:focus-visible{ background:var(--creme-100); outline:none; }
.graf__linha-nome{
  font-size:.86rem; color:var(--tinta-900); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.graf__trilho{ position:relative; height:1.15rem; background:var(--creme-100); border-radius:2px; }
.graf__barra-h{ position:absolute; left:0; top:0; bottom:0; border-radius:2px; }
.graf__barra-h.neg{ background-image:linear-gradient(0deg,rgba(0,0,0,.18),rgba(0,0,0,.18)); }
.graf__antes-h{
  position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--tinta-900); opacity:.55;
  border-radius:2px;
}
.graf__linha-valor{
  font-size:.84rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--tinta-900);
  white-space:nowrap;
}
.graf__linha-var{ font-size:.76rem; text-align:right; font-variant-numeric:tabular-nums; }
.graf__linha-var .sobe{ color:var(--ok-600); font-style:normal; }
.graf__linha-var .desce{ color:var(--perigo-600); font-style:normal; }
.graf__linha-var .novo{ color:var(--tinta-500); font-style:normal; }

/* ---------------------------------------------------------------- mapa de calor
   A intensidade é RELATIVA ao maior valor do período: com escala fixa, um mês fraco sairia todo
   pálido e um forte, todo escuro — e a comparação que interessa é DENTRO do período. */
.graf--mapa{ overflow-x:auto; }
.mapa{ border-collapse:separate; border-spacing:2px; width:100%; font-variant-numeric:tabular-nums; }
.mapa th{ font-size:.72rem; font-weight:600; color:var(--tinta-600); padding:.2rem .35rem;
          white-space:nowrap; }
.mapa thead th{ text-align:center; }
.mapa tbody th{ text-align:right; width:2.6rem; }
.mapa__canto{ background:none; }
.mapa__cel{
  text-align:center; font-size:.76rem; padding:.42rem .2rem; border-radius:2px;
  background:var(--creme-100); color:var(--tinta-900); min-width:2.1rem;
}
.mapa__cel.vazia{ background:var(--creme-100); color:var(--tinta-500); }
/* célula escura pede texto claro — senão o número some justamente onde ele é maior */
.mapa__cel.forte{ color:var(--creme-on-verde); }
.mapa__tot{ text-align:center; font-size:.74rem; color:var(--tinta-600); padding:.42rem .2rem; }
.mapa tfoot th{ color:var(--tinta-600); }
.mapa__geral{ font-weight:700; color:var(--tinta-900); }
.app-oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------------------------------------------------------------- EXTRATO DA CONTA (0102/0103)
   A tela que substitui as abas de banco da planilha do dono. Duas decisões visuais, e as duas
   existem para o mesmo fim — que "pendente" nunca seja lido como "errado":

   · a linha sem confirmação ganha um fundo âmbar SUAVE e uma barra à esquerda, o mesmo par que as
     faixas de aviso usam. Vermelho aqui seria mentira: não há nada de errado com um Pix que ainda
     não compensou, e treinar o olho a ver erro no que é normal é como se para de olhar;
   · o tick do BANCO é visualmente mais pesado que o pessoal, porque um move dinheiro e o outro
     não. Dois checkboxes idênticos lado a lado seriam um convite a clicar no errado. */
.extrato-conta th.ck, .extrato-conta td.ck{ width:3.2rem; text-align:center; }
.extrato-conta tr.pendente{ background:var(--atencao-100); }
.extrato-conta tr.pendente td:first-child{ box-shadow:inset 3px 0 0 var(--atencao-600); }
.extrato-conta tr.abertura{ color:var(--tinta-600); font-style:italic; }
.extrato-conta tr.abertura td{ border-bottom:2px solid var(--tinta-300); }

.tick{
  width:1.5rem; height:1.5rem; padding:0; cursor:pointer; line-height:1;
  border:1px solid var(--tinta-300); border-radius:var(--raio-sm);
  background:var(--branco); color:transparent; font-size:.8rem;
}
.tick:hover{ border-color:var(--tinta-500); }
.tick--on{ background:var(--ok-100); border-color:var(--ok-600); color:var(--ok-600); font-weight:700; }
/* o do banco é o que mexe em dinheiro: borda mais forte, e quando ligado ele é sólido */
.tick--banco{ border-width:2px; }
.tick--banco.tick--on{ background:var(--ok-600); border-color:var(--ok-600); color:var(--branco); }
.tick:focus-visible{ outline:2px solid var(--ouro-600); outline-offset:1px; }

/* ---- QUEM TEM CADA MOEDA (posição do grupo) -------------------------------------------------
   Matriz moeda × loja, só quantidade. A coluna da loja de quem está olhando é destacada: sem isso
   o olho procura a própria linha numa grade de seis colunas iguais, toda vez. */
.posicao-grupo th.eu, .posicao-grupo td.eu{ background:var(--creme-100); }
.posicao-grupo th.eu{ box-shadow:inset 0 -2px 0 var(--ouro-500); }
.posicao-grupo .emp{ font-weight:400; font-size:.6875rem; color:var(--tinta-500); }
/* zero não é número: é ausência. Em cinza claro para a vista pular por cima. */
.posicao-grupo .zero{ color:var(--tinta-300); }

/* ---------------------------------------------------------------- CADASTRO PELO CLIENTE (0107)
   A única tela aberta na internet. O alvo aqui não é o operador treinado: é uma pessoa no celular,
   possivelmente na fila da loja. Daí o alvo grande e a escolha em cartão, não em <select>. */
.cad-opcoes{ display:grid; gap:var(--e3); margin:var(--e5) 0; }
.cad-opcao{
  display:block; padding:var(--e4); text-decoration:none;
  background:var(--branco); border:1px solid var(--tinta-300); border-radius:var(--raio-md);
  transition:border-color .12s, box-shadow .12s;
}
.cad-opcao:hover{ border-color:var(--verde-700); box-shadow:var(--sombra-md); }
.cad-opcao strong{ display:block; color:var(--tinta-900); font-size:1.05rem; }
.cad-opcao span{ display:block; margin-top:var(--e1); color:var(--tinta-600); font-size:.875rem; }
/* o CPF já identificado: informação, não campo — por isso não tem cara de input */
.cad-cpf{ margin:var(--e3) 0 var(--e4); padding:var(--e2) var(--e3); font-size:.875rem;
  background:var(--creme-100); border-radius:var(--raio-sm); color:var(--tinta-700); }
.cad-cpf strong{ color:var(--tinta-900); letter-spacing:.02em; }
.cad-cpf a{ margin-left:var(--e2); font-size:.8125rem; }
/* O BOTÃO DO WHATSAPP DO CNPJ.
   ⚠ NÃO PONHA `display` AQUI. O `.app-btn` centraliza o texto com `inline-flex` + `align-items`;
   um `inline-block` por cima mata a centralização e o texto fica colado em cima, dentro dos 36px.
   Foi assim que ele nasceu torto. O que muda é só o tamanho: alvo maior, porque é tocado no
   celular e é a única ação da página. */
.cad-wpp{ margin-top:var(--e3); height:44px; padding:0 var(--e5); }
.cad-lista{ margin:var(--e4) 0; padding-left:var(--e5); line-height:1.6; }
.cad-lista li{ margin-bottom:var(--e2); }

/* ---- TAXA GUIA DO MONEYGRAM na tela de documento (consulta) ---------------------------------
   Duas linhas, sem grade de tabela. Quem abre esta tela só para dizer a cotação lê o número
   grande e para aí; o "melhorar até" fica ao lado, menor, porque é o piso da negociação e não a
   taxa do dia. A tabela com cabeçalho que havia antes gastava quatro linhas para dizer isto.
   ⚠ `margin-bottom` explícito: `.app-painel` não tem margem própria e este card fica dentro do
   `.app-lanc`, que não tem gap — sem isto ele encosta no formulário de documento. */
.mg-guia{ margin-bottom:var(--e4); }
.mg-guia .quando{ font-weight:400; font-size:.75rem; color:var(--tinta-500); }
.mg-guia__l{ display:grid; grid-template-columns:7.5rem 6rem 1fr; align-items:baseline;
  gap:var(--e3); padding:var(--e2) 0; }
.mg-guia__l + .mg-guia__l{ border-top:1px solid var(--tinta-200); }
.mg-guia .rot{ font-size:.8125rem; color:var(--tinta-600); }
.mg-guia .n{ font-size:1.375rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.mg-guia .ate{ font-size:.75rem; color:var(--tinta-500); }
.mg-guia .ate b{ font-weight:600; color:var(--tinta-600); font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- A CARA DA EMPRESA no cadastro
   Escopado em `.app-publico`: só as telas que o CLIENTE vê. O login e a troca de operador seguem
   sóbrios — lá quem olha é funcionário, e marca em tela de trabalho é ruído.

   Branco, verde e dourado, nessa ordem de área: o branco é o fundo do que se lê, o verde só na
   faixa e nas ações, o dourado só como acento — nunca fundo de área grande (DESIGN.md §2). */
.app-publico{ background:var(--branco); }
.app-publico .app-entrada__topo{
  background:var(--verde-900); border-bottom:2px solid var(--ouro-500);
  color:var(--creme-on-verde); padding:var(--e4) var(--e6);
}
.app-publico .app-entrada__marca{ font-size:1.0625rem; letter-spacing:.01em; }
.app-publico .app-entrada__titulo{ font-size:1.5rem; margin-bottom:var(--e2); }

/* o cartão de escolha ganha o acento dourado ao passar o mouse — é o único lugar onde o
   dourado vira borda, e é o gesto principal da tela */
.app-publico .cad-opcao{ border-color:var(--tinta-200); }
.app-publico .cad-opcao:hover{ border-color:var(--ouro-500); box-shadow:var(--sombra-md); }
.app-publico .cad-opcao strong{ color:var(--verde-900); }

/* ---- o seletor de arquivo -----------------------------------------------------------------
   O `<input type=file>` nativo é feio e diz "Nenhum arquivo escolhido" em cinza — numa tela de
   cliente isso lê como erro. Aqui o input real fica escondido (mas presente: sem JS o formulário
   continua funcionando, porque o <label> abre o seletor por conta do `for`), e o rótulo vira o
   botão. O nome do arquivo escolhido aparece do lado, preenchido por `mascaras.js`. */
.arq{ display:flex; align-items:center; gap:var(--e3); }
.arq input[type=file]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.arq__botao{
  display:inline-flex; align-items:center; gap:var(--e2); cursor:pointer; white-space:nowrap;
  padding:.5rem .9rem; border:1px solid var(--verde-700); border-radius:var(--raio-md);
  background:var(--branco); color:var(--verde-700); font-size:.875rem; font-weight:600;
}
.arq__botao:hover{ background:var(--verde-700); color:var(--branco); }
.arq input[type=file]:focus-visible + .arq__botao{ outline:2px solid var(--ouro-600); outline-offset:2px; }
.arq__nome{ color:var(--tinta-600); font-size:.875rem; overflow:hidden; text-overflow:ellipsis; }
.arq__nome.tem{ color:var(--verde-700); font-weight:600; }

/* O botão de anexar não é rótulo de campo: é um CONTROLE. O `text-transform: uppercase` que o CSS
   legado aplica a todo `form label` transformava "Anexar" e o nome do arquivo escolhido em caixa
   alta — e nome de arquivo em maiúsculas fica ilegível. */
.arq, .arq__botao, .arq__nome{ text-transform:none; letter-spacing:normal; }

/* Os campos da declaração de endereço só aparecem quando a caixa está marcada. A classe é posta
   pelo JS; SEM JS eles ficam visíveis (o seletor abaixo só esconde quando o script marcou a
   página como capaz), e aí o formulário continua completo — só mais longo. */
/* ---- o teclado do iPhone NÃO pode dar zoom ------------------------------------------------
   ⚠ O Safari do iOS dá zoom sozinho ao focar QUALQUER campo com letra menor que 16px. Não é
   opção do usuário nem bug: é regra do sistema, e a página fica torta depois. O sistema interno
   usa .875rem (14px) porque é visto em desktop; o CADASTRO é visto no celular, então aqui os
   campos vão a 16px cheios.

   ⚠⚠ NÃO resolver isso com `maximum-scale=1` no viewport: aquilo mata o zoom de pinça da página
   inteira, e quem enxerga mal fica sem conseguir ler o formulário. O tamanho da letra resolve
   sem tirar nada de ninguém. */
.app-publico .app-form input,
.app-publico .app-form select,
.app-publico .app-form textarea{ font-size:1rem; }

.js .decl-campos{ display:none; }
.js .decl-campos.aberto{ display:block; }

/* ---- assinatura à mão (0107) --------------------------------------------------------------
   ⚠ `touch-action: none` é o que permite ASSINAR no celular: sem ele, arrastar o dedo rola a
   página em vez de desenhar. A linha de base existe para a pessoa saber onde assinar — folha em
   branco faz todo mundo assinar no canto. */
.assina{ margin-top:var(--e2); }
.assina canvas{
  display:block; width:100%; height:150px; touch-action:none; cursor:crosshair;
  background:var(--branco); border:1px solid var(--tinta-300); border-radius:var(--raio-md);
}
.assina.assinado canvas{ border-color:var(--verde-700); }
.assina__pe{ display:flex; align-items:center; justify-content:space-between;
  margin-top:var(--e1); font-size:.8125rem; color:var(--tinta-600); }
.assina__limpar{ background:none; border:none; cursor:pointer; padding:0;
  color:var(--verde-700); font-size:.8125rem; text-decoration:underline; text-transform:none; }

/* ---- documentos na lista de cadastros -------------------------------------------------------
   Cada documento é um bloco: o botão que abre, a data em que chegou, e o ✕ que remove. A DATA
   existe porque documento vence — sem ela ninguém nota que o comprovante é de dois anos atrás. */
.doc-item{ display:inline-flex; align-items:center; gap:var(--e1);
  margin:0 var(--e2) var(--e1) 0; white-space:nowrap; }
.doc-btn{ padding:.2rem .5rem; font-size:.75rem; }
.doc-data{ font-size:.6875rem; color:var(--tinta-600); font-variant-numeric:tabular-nums; }
.doc-remover{ display:inline-flex; align-items:center; gap:var(--e1); margin:0; }
.doc-x{ background:none; border:none; cursor:pointer; padding:0 .2rem; line-height:1;
  color:var(--tinta-400); font-size:.8125rem; }
.doc-x:hover{ color:var(--perigo-600); }
.doc-motivo{ display:inline-flex; align-items:center; gap:var(--e1); }
/* ⚠ QUEM DEFINE `display` ANULA O `hidden`. O atributo esconde através da regra `display:none` da
   folha do navegador, que perde para qualquer regra nossa — então o campo do motivo aparecia
   sempre, mesmo com `hidden` verdadeiro no elemento. Precisa ser dito de novo, explicitamente. */
.doc-motivo[hidden]{ display:none; }
.doc-motivo input{ font-size:.75rem; padding:.15rem .4rem; width:14rem;
  border:1px solid var(--tinta-300); border-radius:var(--raio-sm); }

/* ---- confirmação "você é ...?" e os dados encobertos --------------------------------------- */
.cad-confirma{ margin:var(--e4) 0; padding:var(--e4); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); background:var(--branco); text-align:center; }
.cad-confirma__rot{ display:block; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-600); }
.cad-confirma__nome{ display:block; margin:var(--e2) 0; font-size:1.35rem; letter-spacing:.08em;
  color:var(--verde-900, var(--tinta-900)); }
.cad-dados{ display:grid; grid-template-columns:auto 1fr; gap:var(--e1) var(--e4); margin:0; }
.cad-dados dt{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-600); }
.cad-dados dd{ margin:0; letter-spacing:.06em; }

/* ---- pedir atualização ao cliente ----------------------------------------------------------
   Fechado por padrão: é a exceção, não o caminho do dia (mesmo padrão do "lançar movimento à mão"
   no extrato). */
/* a coluna Documentos é alinhada à direita; o formulário dentro dela, não — texto de
   formulário alinhado à direita fica ilegível linha a linha */
.pedir{ margin-top:var(--e2); text-align:left; }
.pedir > summary{ cursor:pointer; font-size:.75rem; color:var(--verde-700);
  text-decoration:underline; }
.pedir__item{ display:flex; align-items:center; gap:var(--e1); font-size:.8125rem;
  font-weight:400; margin-bottom:.15rem; }
.pedir__motivo{ display:block; width:100%; max-width:22rem; margin:var(--e2) 0;
  font-size:.8125rem; padding:.25rem .4rem; border:1px solid var(--tinta-300);
  border-radius:var(--raio-sm); }

/* ---- ficha do cliente: as quatro abas -------------------------------------------------------
   São a MESMA pessoa vista de quatro ângulos, e não quatro telas — por isso o cabeçalho (nome,
   documento, contato) fica ACIMA delas e não muda ao trocar de aba. */
.fc-abas{ display:flex; gap:var(--e1); margin-bottom:var(--e4);
  border-bottom:1px solid var(--tinta-200); }
.fc-aba{ padding:var(--e2) var(--e4); font-size:.875rem; font-weight:600; color:var(--tinta-600);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.fc-aba:hover{ color:var(--tinta-900); }
.fc-aba.ativa{ color:var(--verde-700); border-bottom-color:var(--verde-700); }

/* ---- "Anexar" e "Não tenho", lado a lado ---------------------------------------------------
   As duas saídas para a MESMA exigência ficam na mesma linha (pedido do dono); os campos da
   declaração quebram para a linha de baixo sozinhos, pelo `flex-wrap`. */
.arq-linha{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e3); }
.arq-linha > .decl-campos{ flex-basis:100%; }

/* ⚠ ISTO É UMA CAIXA DE MARCAR COM CARA DE BOTÃO, e não um <button>. Um botão de verdade só
   funcionaria com JavaScript, e esta tela é ABERTA na internet: sem JS, a caixa deixa os campos
   visíveis e o formulário continua completo. A caixa some da tela; o rótulo vira o botão. */
.decl-botao{ display:inline-flex; margin:0; cursor:pointer; }
.decl-botao input[type=checkbox]{ position:absolute; width:1px; height:1px; opacity:0; }
.decl-botao > span{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:.5rem .9rem; border:1px solid var(--tinta-300); border-radius:var(--raio-md);
  background:var(--branco); color:var(--tinta-700); font-size:.875rem; font-weight:600;
  text-transform:none; letter-spacing:normal;
}
.decl-botao > span:hover{ border-color:var(--verde-700); color:var(--verde-700); }
/* marcado: o botão fica ACESO, senão ninguém sabe qual das duas saídas escolheu */
.decl-botao input:checked + span{
  background:var(--verde-700); border-color:var(--verde-700); color:var(--branco); }
.decl-botao input:focus-visible + span{ outline:2px solid var(--ouro-600); outline-offset:2px; }
.decl-aviso{ margin:var(--e3) 0; }
.cep-aviso{ display:block; margin-top:var(--e1); }

/* ---- links do cadastro para mandar ao cliente ---------------------------------------------- */
.links-cad{ margin-bottom:var(--e4); }
.link-cad{ display:flex; align-items:center; gap:var(--e2); margin-top:var(--e2); flex-wrap:wrap; }
.link-cad__rot{ min-width:13rem; font-size:.8125rem; font-weight:600; color:var(--tinta-700); }
.link-cad__url{ flex:1; min-width:16rem; font-size:.8125rem; padding:.25rem .4rem;
  border:1px solid var(--tinta-300); border-radius:var(--raio-sm); background:var(--branco);
  color:var(--tinta-700); }

/* O FORMATO ACEITO fica ao lado do botão de anexar, não no topo da página: instrução lida antes de
   existir motivo para lê-la é instrução esquecida quando o motivo chega. */
.arq__formato{ font-size:.75rem; color:var(--tinta-600); white-space:nowrap; }

/* O "por quê" é EXPANSÃO: quem já sabe não relê três parágrafos toda vez, e quem não sabe encontra
   sem sair da página para perguntar. */
.porque{ margin:var(--e2) 0 var(--e4); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); background:var(--branco); }
.porque > summary{ cursor:pointer; padding:var(--e3); font-size:.875rem; font-weight:600;
  color:var(--verde-700); }
.porque > p{ margin:0 var(--e3) var(--e3); font-size:.875rem; line-height:1.6;
  color:var(--tinta-700); }

/* ══════════════ SEÇÕES DO CADASTRO: cartão, ritmo e a escolha ══════════════
   O problema não era falta de cor: era falta de HIERARQUIA e de RITMO. O espaço entre duas seções
   era igual ao espaço entre dois campos, e o olho não achava as fronteiras porque elas não
   existiam. Cartão branco sobre o creme separa sem tingir nada — e é a linguagem que o resto do
   sistema já fala. */
.cad-bloco{ margin-bottom:var(--e6); }          /* entre CARTÕES, mais que entre campos (--e4) */
.cad-bloco .campo{ margin-bottom:var(--e4); }
.cad-bloco .campo:last-child{ margin-bottom:0; }
.cad-bloco__sub{ margin:0 0 var(--e2); font-size:.8125rem; color:var(--tinta-600); }

/* ⚠ A ÚNICA COR AQUI, e é BORDA FINA — o que o DESIGN.md permite ("dourado ... só badge, borda
   fina, número"). Ela diz "esta parte é de outra natureza" sem tingir área nenhuma, e sem brigar
   com o tema por empresa. */
.cad-bloco--extra{ border-left:3px solid var(--ouro-500); }

/* O "já temos" deixa de ser cartão dentro de cartão: vira um bloco recuado, mais leve que o que
   ainda precisa de ação. Ele era o único em cartão e por isso parecia a coisa mais importante da
   página — e não é: é o que já está resolvido.

   ⚠ E O QUE ELE MOSTRA É A DATA, NUNCA O ARQUIVO. A entrada do cadastro é só por CPF, e CPF se
   compra em lista: um "ver" aqui entregaria o RG de alguém, com foto e filiação, a quem digitou
   onze números. Esta razão é de SEGURANÇA e vale mais que a decisão visual acima — ela é a que
   impede alguém "melhorar" a tela pondo um botão de abrir o documento. Ver `_ja_temos` em
   `cadastro_publico.py`, e o teste que falha se um link de documento aparecer nesta tela. */
.ja-temos{ margin:0 0 var(--e4); padding:var(--e3); background:var(--creme-100);
  border-radius:var(--raio-md); }
.ja-temos__titulo{ font-size:.8125rem; font-weight:600; color:var(--tinta-700); }
.ja-temos__lista{ margin:var(--e2) 0 0; padding-left:var(--e5); line-height:1.7;
  font-size:.875rem; }
.ja-temos__quando{ color:var(--tinta-600); font-size:.75rem; }

/* AS TRÊS OPÇÕES TÊM DE PARECER OPÇÕES. Iguais e igualmente espaçadas, liam como três documentos
   obrigatórios — o mal-entendido que a seção existe para evitar. Numeradas, com linha fina e um
   "ou" entre elas, quem bate o olho entende sem ler. */
.opcoes{ list-style:none; margin:var(--e3) 0 0; padding:0; counter-reset:opcao; }
.opcoes__item{ position:relative; counter-increment:opcao; padding:var(--e3) 0 var(--e3) var(--e6); }
.opcoes__item + .opcoes__item{ border-top:1px solid var(--tinta-200); }
.opcoes__item::before{
  content:counter(opcao); position:absolute; left:0; top:var(--e4);
  width:20px; height:20px; border-radius:var(--raio-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--creme-100); color:var(--tinta-600);
  font-size:.6875rem; font-weight:700; }
/* o "ou" pousa NA linha divisória: é ele que diz que as opções se excluem */
.opcoes__item + .opcoes__item::after{
  content:"ou"; position:absolute; left:var(--e6); top:-.6em; padding:0 var(--e2);
  background:var(--branco); color:var(--tinta-500); font-size:.6875rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.opcoes__item .campo{ margin-bottom:0; }

/* O "por quê": expansão, não texto sempre aberto — quem já sabe não relê três parágrafos toda vez,
   e quem não sabe encontra sem sair da página para perguntar. */
.porque{ margin:0 0 var(--e2); border:1px solid var(--tinta-200); border-radius:var(--raio-md); }
.porque > summary{ cursor:pointer; padding:var(--e3); font-size:.8125rem; font-weight:600;
  color:var(--verde-700); }
.porque > p{ margin:0 var(--e3) var(--e3); font-size:.8125rem; line-height:1.6;
  color:var(--tinta-700); }
/* ══════════════════════ LOJA PÚBLICA — DESIGN.md §10 ══════════════════════
   Regras PRÓPRIAS, e só aqui. O balcão continua com a densidade da §1: quem repete oito horas
   por dia precisa caber informação; quem vai transferir vinte mil reais uma vez precisa de
   espaço, foto e uma coisa por vez. Herda a paleta, a fonte e o formato de número; muda a
   escala e o respiro. Sem gradiente e sem animação, como no resto do sistema. */

.loja-nota{ margin:0; font-size:.8125rem; color:var(--tinta-500); }
/* A largura do cadastro (896px) espremia quatro cartões em 199px cada — nessa escala a foto da
   barra deixa de ser reconhecível. A VITRINE é larga; o CHECKOUT continua estreito (uma pergunta
   por tela), e é por isso que a largura é da vitrine e não do arquivo inteiro. */
.app-entrada__main.loja{ max-width:1200px; }

/* ---- cabeçalho da loja ------------------------------------------------------------------- */
.loja-topo{ display:flex; align-items:center; gap:var(--e4); margin-bottom:var(--e6); }
.loja-topo__marca{ display:inline-flex; align-items:center; gap:var(--e2); font-weight:600;
  font-size:1.0625rem; color:var(--tinta-900); text-decoration:none; }
.loja-topo__ponto{ width:9px; height:9px; border-radius:var(--raio-full);
  background:var(--ouro-500); }
.loja-topo__carrinho{ margin-left:auto; display:inline-flex; align-items:center; gap:var(--e2);
  padding:var(--e2) var(--e4); border:1px solid var(--tinta-300); border-radius:var(--raio-full);
  color:var(--tinta-900); text-decoration:none; font-size:.875rem; font-weight:600;
  background:var(--branco); }
.loja-topo__carrinho:hover{ border-color:var(--verde-700); color:var(--verde-700); }
.loja-topo__conta{ min-width:1.35rem; height:1.35rem; padding:0 .3rem; border-radius:var(--raio-full);
  background:var(--verde-700); color:var(--creme-on-verde); font-size:.75rem;
  display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
@media (max-width:40rem){ .loja-topo__rot{ display:none; } }

/* ---- títulos ----------------------------------------------------------------------------- */
.loja-cabeca{ margin-bottom:var(--e6); max-width:52ch; }
/* CAIXA ALTA só em rótulo — a regra da §3 vale aqui igual. Este é um eyebrow, é rótulo. */
.loja-cabeca__eyebrow{ margin:0 0 var(--e2); font-size:.6875rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ouro-600); }
.loja-cabeca__titulo{ margin:0; font-size:1.75rem; font-weight:600; line-height:1.2;
  color:var(--tinta-900); }
.loja-cabeca__linha{ margin:var(--e3) 0 0; font-size:.9375rem; color:var(--tinta-600);
  line-height:1.6; }

/* ---- botão da loja ----------------------------------------------------------------------- */
.loja-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  padding:var(--e3) var(--e5); border:1px solid transparent; border-radius:var(--raio-md);
  background:var(--verde-700); color:var(--creme-on-verde); font:inherit; font-size:.9375rem;
  font-weight:600; cursor:pointer; text-decoration:none; transition:background .12s ease; }
.loja-btn:hover{ background:var(--verde-600); }
.loja-btn--grande{ width:100%; padding:var(--e4) var(--e5); }
.loja-btn--sec{ background:var(--branco); border-color:var(--tinta-300); color:var(--tinta-900); }
.loja-btn--sec:hover{ background:var(--creme-100); border-color:var(--verde-700);
  color:var(--verde-700); }
.loja-btn--texto{ background:transparent; color:var(--tinta-600); font-weight:500;
  padding:var(--e2); width:100%; }
.loja-btn--texto:hover{ background:transparent; color:var(--verde-700); }
.loja-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---- avisos ------------------------------------------------------------------------------ */
.loja-aviso{ padding:var(--e4) var(--e5); border-radius:var(--raio-md); margin-bottom:var(--e5);
  font-size:.9375rem; line-height:1.55; border-left:3px solid var(--tinta-300);
  background:var(--creme-100); color:var(--tinta-900); }
.loja-aviso--atencao{ background:var(--atencao-100); border-left-color:var(--atencao-600); }
.loja-aviso--perigo{ background:var(--perigo-100); border-left-color:var(--perigo-600); }

/* ---- vitrine ----------------------------------------------------------------------------- */
/* ⚠ QUATRO POR LINHA no computador, DUAS no celular — pedido do dono, e por isso a contagem é
   FIXA, não `auto-fill`. Com `auto-fill` o número de colunas depende da largura da janela: numa
   tela de 1600px viravam cinco ou seis, e a foto encolhia até a barra não se distinguir. */
.loja-grade{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--e5); }
@media (max-width:64rem){ .loja-grade{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:48rem){ .loja-grade{ grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e4); } }
.loja-cartao{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-lg); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .12s ease, box-shadow .12s ease; }
.loja-cartao:hover{ border-color:var(--ouro-500); box-shadow:var(--sombra-md); }
/* Proporção FIXA e enquadramento igual nas oito: as fotos saíram do mesmo gabarito, então o
   cartão nunca "pula" de altura.

   ⚠ 1:1 E A FOTO DE BORDA A BORDA, sem respiro nem fundo do cartão — decisão do dono
   (10/09/2026): "vc pode deixar o fundo da imagem na loja". As fotos vêm com o fundo dourado do
   fotógrafo, em quadro quadrado; com `padding` e fundo creme por baixo, dava um quadrado dourado
   flutuando dentro de uma carta creme — dois fundos aninhados. Agora o fundo da foto É o fundo
   do cartão.

   ⚠ O DESENHO DE RESERVA CONTINUA COM RESPIRO. Quando não há foto (`barra_desenhada`), o que
   aparece é um SVG de barra, e ele precisa do fundo creme e da margem — desenho colado na borda
   parece corte. */
.loja-cartao__foto{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; }
.loja-cartao__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.loja-cartao__foto:has(.loja-barra__desenho){ background:var(--creme-100); padding:var(--e4); }
.loja-barra__desenho{ max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; }
.loja-cartao__corpo{ padding:var(--e5); display:flex; flex-direction:column; gap:var(--e1);
  flex:1; }
.loja-cartao__nome{ font-size:1.0625rem; font-weight:600; color:var(--tinta-900);
  text-decoration:none; }
.loja-cartao__nome:hover{ color:var(--verde-700); }
/* ⚠ `nowrap`: com duas colunas no celular o cartão fica com ~160px e "R$ 1.550,06" quebrava
   entre o "R$" e o número — o preço, que é o que a pessoa veio ver, saía em duas linhas. */
.loja-cartao__preco{ font-size:1.5rem; font-weight:700; color:var(--tinta-900);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap; }
@media (max-width:48rem){
  .loja-cartao__preco{ font-size:1.1875rem; }
  .loja-cartao__corpo{ padding:var(--e4); }
  .loja-cartao__nome{ font-size:.9375rem; }
}
.loja-cartao__unit{ font-size:.8125rem; color:var(--tinta-500);
  font-variant-numeric:tabular-nums; }
.loja-cartao form{ margin-top:auto; padding-top:var(--e4); }

/* ---- os três selos de credibilidade ------------------------------------------------------- */
/* Cartões, não texto solto (pedido do dono). Numa compra de vinte mil reais o que decide não é o
   preço — é acreditar que a barra chega, que é sua e que dá para provar. Texto corrido no pé da
   página se lê como rodapé; cartão com ícone se lê como garantia. */
.loja-selos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e5);
  margin-top:var(--e8); }
@media (max-width:56rem){ .loja-selos{ grid-template-columns:1fr; gap:var(--e4); } }
.loja-selo{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-lg); padding:var(--e6); display:flex; flex-direction:column;
  gap:var(--e2); }
/* O ícone herda o dourado por `currentColor` — é o único lugar da vitrine onde o dourado aparece
   sozinho, e é de propósito: ele marca a área da confiança, não a do preço. */
.loja-selo__icone{ display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--raio-full); background:var(--ouro-100);
  color:var(--ouro-600); margin-bottom:var(--e2); }
.loja-selo strong{ font-size:1rem; }
.loja-selo p{ margin:0; font-size:.875rem; color:var(--tinta-600); line-height:1.6; }

/* ---- a gaveta do carrinho ----------------------------------------------------------------- */
/* ⚠ `hidden` no HTML é quem esconde de verdade — sem JavaScript, a gaveta simplesmente não é
   renderizada quando fechada. Estas regras cuidam de como ela APARECE, não de se aparece. */
.loja-gaveta__fundo{ position:fixed; inset:0; background:rgba(6,59,46,.32); z-index:40; }
.loja-gaveta__fundo a{ display:block; width:100%; height:100%; }
.loja-gaveta{ position:fixed; top:0; right:0; bottom:0; width:min(26rem,100vw); z-index:41;
  background:var(--branco); border-left:1px solid var(--tinta-200);
  box-shadow:var(--sombra-md); display:flex; flex-direction:column; }
/* ⚠ `display:flex` acima VENCE o `display:none` que o navegador dá a [hidden] — mesma
   especificidade, e a minha regra vem depois. Sem esta linha a gaveta fica aberta o tempo todo,
   que é exatamente o que o dono mandou tirar. Foi assim que apareceu na primeira olhada. */
.loja-gaveta[hidden],.loja-gaveta__fundo[hidden]{ display:none; }
.loja-gaveta__topo{ display:flex; align-items:center; gap:var(--e3);
  padding:var(--e5) var(--e5) var(--e4); border-bottom:1px solid var(--tinta-200); }
.loja-gaveta__topo h2{ margin:0; font-size:1.0625rem; font-weight:600; }
.loja-gaveta__fechar{ margin-left:auto; font-size:1.5rem; line-height:1; color:var(--tinta-500);
  text-decoration:none; padding:0 var(--e2); }
.loja-gaveta__fechar:hover{ color:var(--tinta-900); }
.loja-gaveta__corpo{ flex:1; overflow-y:auto; padding:var(--e5); }
.loja-vazio{ margin:0; color:var(--tinta-500); font-size:.9375rem; }

.loja-itens{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:var(--e5); }
.loja-item{ display:grid; grid-template-columns:56px 1fr auto; gap:var(--e3);
  align-items:start; }
.loja-item__foto{ width:56px; height:62px; object-fit:contain; background:var(--creme-100);
  border-radius:var(--raio-sm); padding:var(--e1); }
.loja-item__meio{ min-width:0; display:flex; flex-direction:column; gap:var(--e1); }
.loja-item__nome{ font-size:.9375rem; font-weight:600; }
.loja-item__unit{ font-size:.75rem; color:var(--tinta-500); font-variant-numeric:tabular-nums; }
.loja-item__total{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-size:.9375rem; }

/* − 1 + e a lixeira, na linha do item. Cada um é um <form> próprio (a gaveta funciona sem JS),
   por isso o `margin:0` — senão eles empilhariam. */
.loja-passo{ display:flex; align-items:center; gap:var(--e1); margin-top:var(--e2); }
.loja-passo form{ margin:0; display:flex; }
.loja-passo__btn{ width:28px; height:28px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--tinta-300); background:var(--branco);
  border-radius:var(--raio-sm); font:inherit; font-size:1rem; line-height:1; cursor:pointer;
  color:var(--tinta-900); }
.loja-passo__btn:hover:not(:disabled){ border-color:var(--verde-700); color:var(--verde-700); }
.loja-passo__btn:disabled{ opacity:.35; cursor:not-allowed; }
.loja-passo__n{ min-width:1.75rem; text-align:center; font-size:.9375rem; font-weight:600;
  font-variant-numeric:tabular-nums; }
.loja-passo__lixo{ margin-left:auto; }
.loja-passo__lixo button{ display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:1px solid transparent; background:transparent; cursor:pointer;
  color:var(--tinta-500); border-radius:var(--raio-sm); }
.loja-passo__lixo button:hover{ color:var(--perigo-600); border-color:var(--perigo-600); }

.loja-gaveta__pe{ border-top:1px solid var(--tinta-200); padding:var(--e5);
  display:flex; flex-direction:column; gap:var(--e3); }
.loja-gaveta__total{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:1.0625rem; }
.loja-gaveta__total strong{ font-size:1.375rem; font-variant-numeric:tabular-nums; }

/* ---- pagamento do pedido (0116) ---------------------------------------------------------- */
.loja-pedido__topo{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); padding:var(--e6); margin-bottom:var(--e5); }
.loja-numero{ font-size:1.75rem; font-weight:600; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; margin:var(--e1) 0 var(--e2); }

/* O RELÓGIO. Conta de verdade (ver `loja.js`) e muda de cor no último minuto — que é quando
   ainda dá para agir. Zerado, a página se recarrega e o servidor expira o pedido. */
.loja-relogio{ display:flex; align-items:baseline; gap:var(--e3); flex-wrap:wrap;
  background:var(--atencao-100); border-left:3px solid var(--atencao-600);
  border-radius:var(--raio-md); padding:var(--e4) var(--e5); margin-bottom:var(--e5); }
.loja-relogio__n{ font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--atencao-600); letter-spacing:.02em; }
.loja-relogio__txt{ font-size:.9375rem; color:var(--tinta-900); }
.loja-relogio.urgente{ background:var(--perigo-100); border-left-color:var(--perigo-600); }
.loja-relogio.urgente .loja-relogio__n,.loja-relogio.acabou .loja-relogio__n{
  color:var(--perigo-600); }

/* ⚠ AS DUAS COLUNAS TÊM ALTURAS DIFERENTES: o PIX é alto (QR + copia e cola) e a TED é baixa.
   Com `align-items:start` o bloco curto ficava solto e o aviso seguinte subia encostando no
   comprido — foi o que apareceu no print do dono. `stretch` dá a mesma altura aos dois, e o
   aviso começa depois dos DOIS. */
.loja-pagar{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e5); align-items:stretch;
  margin-bottom:var(--e5); }
@media (max-width:46rem){ .loja-pagar{ grid-template-columns:1fr; } }
.loja-bloco{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); padding:var(--e5); display:flex; flex-direction:column;
  gap:var(--e3); }
.loja-bloco__titulo{ margin:0; font-size:.9375rem; font-weight:600; }
.loja-pix{ align-items:flex-start; }
/* ⚠ FUNDO BRANCO SEMPRE, e não herdado. O QR é lido por câmera: contraste é requisito de
   funcionamento, não de estilo. A borda larga é a zona de silêncio que o leitor precisa. */
.loja-qr{ background:#fff; padding:var(--e3); border-radius:var(--raio-sm); align-self:center;
  max-width:230px; }
.loja-qr svg{ display:block; width:100%; height:auto; }
/* ⚠ O RELÓGIO FINO — a tela do pedido (pedido do dono, 10/09/2026). Ele encolhe no estado normal
   porque ali a mensagem é "você TEM tempo", que não é urgente, e do tamanho antigo disputava
   atenção com o QR. O estado `urgente` NÃO encolhe: quando o tempo aperta ele volta ao tamanho
   cheio e fica vermelho. Encolher só se defende se continuar gritando na hora em que importa. */
.loja-relogio--fino{ padding:var(--e2) var(--e3); margin-bottom:var(--e3); }
.loja-relogio--fino .loja-relogio__n{ font-size:1.0625rem; }
.loja-relogio--fino .loja-relogio__txt{ font-size:.8125rem; }
.loja-relogio--fino.urgente .loja-relogio__n{ font-size:1.5rem; }

/* O número do pedido no topo: uma linha de referência, não um título. */
.loja-pedido__ref{ margin:0 0 var(--e3); font-size:.8125rem; color:var(--tinta-600); }
.loja-pedido__ref strong{ font-family:var(--fonte-num); color:var(--tinta-900); }

/* O valor colado no QR — ninguém gosta de escanear sem ver o número antes. */
.loja-pix__valor{ margin:var(--e2) 0 var(--e3); font-size:.9375rem; color:var(--tinta-700); }
.loja-pix__valor strong{ font-family:var(--fonte-num); font-size:1.125rem; color:var(--tinta-900); }

/* ⚠ O BOTÃO DE COPIAR TEM O PESO DO QR, não menos: no celular — onde está a maioria — ninguém
   escaneia a própria tela, e o copia e cola é O caminho. */
.loja-copiar{ margin:var(--e3) 0; }
.loja-btn--copiar{ width:100%; }
.loja-btn--copiar.copiado{ background:var(--sucesso-600,var(--verde-700)); border-color:transparent;
  color:#fff; }
.loja-btn--copiar.falhou{ background:var(--perigo-100); color:var(--perigo-600); }
/* O código cru fica, mas recolhido: é de onde o botão lê e é a saída de quem não tem área de
   transferência. Ninguém lê 200 caracteres de BR Code. */
.loja-copia-ver{ margin-top:var(--e2); }
.loja-copia-ver summary{ font-size:.8125rem; color:var(--tinta-600); cursor:pointer; }
.loja-copia-ver[open] summary{ margin-bottom:var(--e2); }

/* ⚠ OS PONTOS DE RETIRADA, DENTRO DO PASSO DE ENTREGA. Recuados à direita para ler como
   consequência da opção acima, e não como uma quinta escolha solta na tela. */
.loja-pontos-escolha{ margin:calc(var(--e2) * -1) 0 var(--e3); padding:0 var(--e3) 0 var(--e5); }
.loja-pontos-ver summary{ font-size:.875rem; color:var(--tinta-700); cursor:pointer;
  padding:var(--e2) 0; }
.loja-pontos-lista{ display:grid; gap:var(--e2); margin:var(--e2) 0; }
/* Cada ponto é um alvo de clique inteiro, como o cartão de frete: no celular, alvo pequeno é
   escolha errada. */
.loja-ponto-op{ display:flex; gap:var(--e3); align-items:flex-start; padding:var(--e3);
  border:1px solid var(--tinta-200); border-radius:var(--raio-md); cursor:pointer;
  background:var(--creme-50, #fff); }
.loja-ponto-op:has(input:checked){ border-color:var(--ouro-500); background:var(--creme-100); }
.loja-ponto-op input{ margin-top:.2rem; flex:none; }
.loja-ponto-op__corpo{ display:grid; gap:2px; font-size:.875rem; }
.loja-ponto-op__end,.loja-ponto-op__hora{ color:var(--tinta-600); font-size:.8125rem; }
.loja-ponto-op__mapa{ font-size:.8125rem; justify-self:start; }

/* Onde retirar, na tela do pedido — é esta página que a pessoa reabre no dia de ir buscar. */
.loja-retirada{ margin:var(--e4) 0; padding:var(--e3); border-radius:var(--raio-md);
  background:var(--creme-100); }
.loja-retirada p{ margin:0; }
.loja-retirada__rotulo{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tinta-500); margin-bottom:2px; }

/* O resumo do pedido, agora embaixo do QR. */
.loja-pedido__resumo{ margin-top:var(--e6); padding-top:var(--e4);
  border-top:1px solid var(--tinta-200); }

/* ⚠ O RODAPÉ DE UMA LINHA DO CHECKOUT. Saem as unidades, os selos e os links; ficam a razão
   social e o CNPJ, que são a prova de que existe empresa do outro lado — lida exatamente onde a
   pessoa decide se transfere o dinheiro. Ver `loja/_casca.html`. */
.oe-rodape-enxuto{ margin-top:var(--e7); padding:var(--e4) var(--e4) var(--e6);
  border-top:1px solid var(--tinta-200); text-align:center; }
.oe-rodape-enxuto p{ margin:0; font-size:.75rem; color:var(--tinta-500); }

.loja-copia{ font-family:var(--fonte-num); font-size:.75rem; width:100%; resize:vertical;
  word-break:break-all; border:1px solid var(--tinta-300); border-radius:var(--raio-sm);
  padding:var(--e2); background:var(--creme-100); color:var(--tinta-900); }
.loja-ted{ display:grid; grid-template-columns:auto 1fr; gap:var(--e2) var(--e4); margin:0;
  font-size:.875rem; align-content:start; }
.loja-ted dt{ color:var(--tinta-500); }
.loja-ted dd{ margin:0; }

/* ══════════════ PEDIDOS DA LOJA (0116) — as ações da linha ══════════════
   Lançar e cancelar lado a lado, na ordem em que se usam. Empilhados, os dois <form> ocupavam
   uma linha cada e o cancelamento ficava com o mesmo peso visual da venda. */
.ped-acoes{ display:flex; flex-wrap:wrap; gap:var(--e3); align-items:flex-start;
  margin-top:var(--e4); }
.ped-acoes > form{ margin:0; }

/* O <summary> É o botão: clicar abre o formulário embaixo, sem JS. O marcador nativo sairia
   dentro do botão, por isso os dois `::-webkit-details-marker` / `list-style`. */
.ped-acao{ margin:0; }
.ped-acao > summary{ cursor:pointer; list-style:none; display:inline-flex; }
.ped-acao > summary::-webkit-details-marker{ display:none; }
.ped-acao[open] > summary{ margin-bottom:var(--e3); }
.ped-acao > .app-form{ padding:var(--e4); border:1px solid var(--tinta-200);
  border-radius:var(--raio-lg); background:var(--creme-100); max-width:44rem; }
/* ---- página do produto -------------------------------------------------------------------- */
.loja-migalha{ margin:0 0 var(--e5); font-size:.8125rem; color:var(--tinta-500); }
.loja-migalha a{ color:var(--tinta-600); }
.loja-migalha span{ margin:0 var(--e1); }
.loja-produto{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e8);
  align-items:start; }
.loja-produto__foto{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-lg); padding:var(--e6); display:flex; align-items:center;
  justify-content:center; }
.loja-produto__foto img,.loja-produto__foto svg{ max-width:100%; height:auto; }
.loja-produto__lado{ display:flex; flex-direction:column; gap:var(--e3); }
.loja-produto__preco{ font-size:2.25rem; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin-top:var(--e2); }
.loja-produto__unit{ margin:0; font-size:.875rem; color:var(--tinta-500);
  font-variant-numeric:tabular-nums; }
.loja-produto__lista{ margin:var(--e3) 0 0; padding-left:var(--e5); line-height:1.9;
  font-size:.875rem; color:var(--tinta-600); }
@media (max-width:52rem){ .loja-produto{ grid-template-columns:1fr; gap:var(--e6); } }

/* ---- checkout: uma pergunta por tela ------------------------------------------------------ */
/* Coluna estreita e centrada. A gaveta não existe daqui em diante (ver `_resumo.html`), então
   não há segunda coluna competindo com a pergunta. */
.loja-passos-col{ max-width:38rem; margin:0 auto; }

.loja-trilha{ display:flex; align-items:center; gap:var(--e4); list-style:none; margin:0 0 var(--e6);
  padding:0; font-size:.8125rem; color:var(--tinta-500); flex-wrap:wrap; }
.loja-trilha li{ display:inline-flex; align-items:center; gap:var(--e2); }
.loja-trilha__n{ width:22px; height:22px; border-radius:var(--raio-full); display:inline-flex;
  align-items:center; justify-content:center; border:1px solid var(--tinta-300);
  font-size:.6875rem; font-weight:600; font-variant-numeric:tabular-nums; }
.loja-trilha .atual{ color:var(--tinta-900); font-weight:600; }
.loja-trilha .atual .loja-trilha__n{ background:var(--verde-700); border-color:var(--verde-700);
  color:var(--creme-on-verde); }
.loja-trilha .feito .loja-trilha__n{ background:var(--creme-100); border-color:var(--ouro-500);
  color:var(--ouro-600); }

/* ---- o resumo do pedido (substitui a gaveta) ---------------------------------------------- */
.loja-resumo{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); margin-bottom:var(--e6); }
.loja-resumo__topo{ display:flex; align-items:baseline; gap:var(--e3); padding:var(--e4) var(--e5);
  cursor:pointer; list-style:none; }
.loja-resumo__topo::-webkit-details-marker{ display:none; }
.loja-resumo__rot{ font-weight:600; font-size:.9375rem; }
.loja-resumo__n{ font-size:.8125rem; color:var(--tinta-500); }
.loja-resumo__valor{ margin-left:auto; font-variant-numeric:tabular-nums; font-size:1.0625rem; }
.loja-resumo__corpo{ padding:0 var(--e5) var(--e5); }
.loja-resumo__linha{ display:flex; justify-content:space-between; gap:var(--e3);
  padding:var(--e2) 0; font-size:.875rem; border-top:1px solid var(--tinta-200); }
.loja-resumo__x{ color:var(--tinta-500); }
.loja-resumo__num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.loja-resumo__linha--total{ font-weight:600; border-top-color:var(--tinta-300); font-size:.9375rem; }

/* ---- o CEP ------------------------------------------------------------------------------- */
.loja-cep{ margin:var(--e5) 0 var(--e6); }
.loja-passos-col .loja-cep label{ display:block; font-size:.9375rem; font-weight:600; margin-bottom:var(--e2);
  /* ⚠ A regra global põe CAIXA ALTA em todo <label> — e está certa no balcão, onde label é NOME
     DE CAMPO. Aqui é uma PERGUNTA ("Para qual CEP?"), e a §3 proíbe caixa alta em frase. */
  text-transform:none; letter-spacing:0; color:var(--tinta-900); }
.loja-cep__linha{ display:flex; gap:var(--e3); flex-wrap:wrap; }
.loja-cep input{ flex:1; min-width:10rem; max-width:13rem; padding:var(--e3) var(--e4);
  font:inherit; font-size:1.0625rem; border:1px solid var(--tinta-300);
  border-radius:var(--raio-md); background:var(--branco); font-variant-numeric:tabular-nums; }
.loja-cep input:focus{ outline:2px solid var(--verde-700); outline-offset:1px;
  border-color:var(--verde-700); }
.loja-cep .loja-nota{ margin-top:var(--e2); }

/* ---- opções de frete: CARTÃO de escolha, não linha de tabela ------------------------------ */
.loja-fretes{ display:flex; flex-direction:column; gap:var(--e3); margin-bottom:var(--e5); }
/* O <label> INTEIRO é o alvo: no celular, um alvo de 60px é a diferença entre escolher e errar. */
/* ⚠ A regra global de <label> põe CAIXA ALTA — e aqui dentro há FRASE ("2 a 4 dias úteis · com
   seguro sobre o valor do pedido"). A §3 proíbe caixa alta em frase, e a §10 não revogou isso. */
.loja-passos-col .loja-frete,.loja-frete *{ text-transform:none; letter-spacing:0; }
.loja-frete{ display:flex; align-items:center; gap:var(--e4); padding:var(--e4) var(--e5);
  background:var(--branco); border:1px solid var(--tinta-200); border-radius:var(--raio-md);
  cursor:pointer; transition:border-color .12s ease; }
.loja-frete:hover{ border-color:var(--tinta-300); }
.loja-frete:has(input:checked){ border-color:var(--verde-700); box-shadow:inset 0 0 0 1px var(--verde-700); }
.loja-frete input{ width:18px; height:18px; accent-color:var(--verde-700); flex:none; }
.loja-frete__corpo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.loja-frete__nome{ font-size:.9375rem; font-weight:600; }
.loja-frete__prazo{ font-size:.8125rem; color:var(--tinta-500); }
.loja-frete__valor{ margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
/* A ressalva do portador: visível, mas sem o peso de um aviso de erro — é condição, não problema. */
.loja-frete__ressalva{ display:block; margin-top:var(--e1); font-size:.75rem;
  color:var(--atencao-600); line-height:1.45; }

/* ---- identificação, documentos e agências ------------------------------------------------- */
.loja-eu{ background:var(--branco); border:1px solid var(--tinta-200); border-radius:var(--raio-md);
  padding:var(--e6); margin:var(--e5) 0; }
.loja-eu__rot{ margin:0; font-size:.6875rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-500); }
/* O nome vem encoberto do servidor (M•••A DA S•••A): tabular para os pontos não dançarem. */
.loja-eu__nome{ margin:var(--e2) 0 var(--e4); font-size:1.375rem; font-weight:600;
  font-variant-numeric:tabular-nums; }
.loja-eu__dados{ display:grid; grid-template-columns:auto 1fr; gap:var(--e2) var(--e4);
  margin:0 0 var(--e5); font-size:.875rem; }
.loja-eu__dados dt{ color:var(--tinta-500); }
.loja-eu__dados dd{ margin:0; }

.loja-exige{ display:flex; flex-direction:column; gap:var(--e3); margin:var(--e5) 0; }
.loja-exige__item{ background:var(--branco); border:1px solid var(--tinta-200);
  border-left:3px solid var(--ouro-500); border-radius:var(--raio-md); padding:var(--e4) var(--e5); }
.loja-exige__item strong{ font-size:.9375rem; }
.loja-exige__item p{ margin:var(--e1) 0 0; font-size:.875rem; color:var(--tinta-600); }

.loja-secao{ margin-top:var(--e6); }
.loja-secao__titulo{ font-size:1.0625rem; font-weight:600; margin:0 0 var(--e4); }
.loja-pontos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--e4); }
.loja-ponto{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); padding:var(--e5); }
.loja-ponto__end{ margin:var(--e2) 0 0; font-size:.875rem; color:var(--tinta-600); line-height:1.55; }
.loja-ponto__hora{ margin:var(--e1) 0 0; font-size:.8125rem; color:var(--tinta-500); }
.loja-ponto__mapa{ display:inline-block; margin-top:var(--e3); font-size:.8125rem; }

/* ---- confirmação --------------------------------------------------------------------------- */
.loja-confirma{ background:var(--branco); border:1px solid var(--tinta-200);
  border-radius:var(--raio-md); padding:var(--e6); display:flex; flex-direction:column;
  gap:var(--e4); }
.loja-confirma p{ margin:0; font-size:.9375rem; line-height:1.6; }
.loja-confirma .loja-aviso{ margin:0; }
/* Os dois prazos, pequenos e no rodapé da tela: é o que ACONTECE DEPOIS, não o que decide o
   clique. Em cartões grandes no meio da página eles disputavam com o preço e com o aviso de
   conta — e uma tela com quatro avisos não tem nenhum. */
.loja-prazos{ margin:var(--e4) 0 0; font-size:.8125rem; color:var(--tinta-500); line-height:1.7;
  display:flex; flex-direction:column; gap:var(--e1); }
.loja-prazos strong{ color:var(--tinta-600); font-weight:600; }

/* O aviso da lei, na tela da identidade: nota de rodapé, não faixa. Ele informa; não é decisão. */
.loja-lei{ margin:var(--e3) 0 var(--e5); font-size:.8125rem; color:var(--tinta-500);
  line-height:1.6; padding-left:var(--e4); border-left:2px solid var(--tinta-200); }

/* ══════════════ A TIRA DE AVISOS ══════════════
   Eram CINCO faixas empilhadas — uns 150px de altura para dizer três números, antes do conteúdo.
   Agora são peças numa linha só, que quebra sozinha quando não cabe (celular).

   ⚠ UMA COR SÓ, a de atenção que já existia. Cada aviso com a sua viraria um semáforo, e semáforo
   de cinco luzes não informa nada. O que distingue um do outro é o NÚMERO, não a cor. */
.app-avisos{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2);
  margin-bottom:var(--e4); }
.aviso{
  display:inline-flex; align-items:center; gap:var(--e1); white-space:nowrap;
  padding:.25rem var(--e3); border:1px solid var(--atencao-600); border-radius:var(--raio-full);
  background:var(--atencao-100); color:var(--atencao-600);
  font-size:.8125rem; font-weight:600; text-decoration:none; }
.aviso:hover{ background:var(--atencao-600); color:var(--branco); }
/* o número na frente e MAIOR: é o que o olho pega de relance; a palavra explica depois */
.aviso strong{ font-size:.9375rem; font-weight:700; }