/* Tema #MeChamaDeCleiton: preto com vermelho do logo. */
:root {
  --fundo: #0b0b0a;
  --cartao: #171614;
  --texto: #f2f0ea;
  --suave: #a9a59b;
  --linha: #2d2a24;
  /* Cores do logo Dato Cesta Básica: dourado, prata e preto */
  --destaque: #c9a45c;
  --sobre-destaque: #17120a;
  --prata: #dcdcdc;
  --destaque-txt: #e3c47f;
  --destaque-claro: #2e2614;
  --verde: #4ade80;
  --verde-claro: #12301d;
  --vermelho: #ff7a6e;
  --vermelho-claro: #4a1410;
  --amarelo: #facc15;
  --amarelo-claro: #3a2f0a;
  --sombra: none;
  --graf-vendas: #60a5fa;
  --graf-custo: #facc15;
  --graf-lucro: #4ade80;
  --titulo: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--destaque-txt); text-decoration: none; }

.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: color-mix(in srgb, var(--fundo) 85%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linha);
}
.topo-logo { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.topo h1 { font: 400 26px/1 var(--titulo); letter-spacing: .02em; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-voltar { background: none; border: 0; color: var(--destaque-txt); font-size: 17px; padding: 4px 4px 4px 0; cursor: pointer; }
.topo-acoes { display: flex; gap: 6px; }

main { padding: 12px 16px 24px; max-width: 760px; margin: 0 auto; }

.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--cartao) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--linha);
}
.abas a { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--suave); gap: 1px; }
.abas a span { font-size: 21px; line-height: 1.1; filter: grayscale(1); opacity: .7; }
.abas a.ativa { color: var(--destaque); font-weight: 600; }
.abas a.ativa span { filter: none; opacity: 1; }

.cartao { background: var(--cartao); border-radius: 14px; box-shadow: var(--sombra); margin-bottom: 14px; overflow: hidden; }
.cartao > .pad, .pad { padding: 14px 16px; }
.secao { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); margin: 18px 4px 6px; }
.secao:first-child { margin-top: 4px; }

.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.indicador { background: var(--cartao); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra); }
.indicador small { color: var(--suave); font-size: 13px; display: block; }
.indicador strong { font-size: 20px; display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.indicador em { font-style: normal; font-size: 12px; color: var(--suave); }
.indicador.vermelho strong { color: var(--vermelho); }
.indicador.verde strong { color: var(--verde); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { border-bottom: 1px solid var(--linha); }
.lista > li:last-child { border-bottom: 0; }
.linha { display: flex; align-items: center; gap: 12px; padding: 11px 16px; color: inherit; width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }
.linha .meio { flex: 1; min-width: 0; }
.linha .meio b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .meio span { display: block; font-size: 13px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .fim { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha .fim span { display: block; font-size: 12px; color: var(--suave); }
.vazio { padding: 28px 16px; text-align: center; color: var(--suave); }

.mini { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--destaque-claro); flex: none; display: grid; place-items: center; font-size: 20px; color: var(--destaque); font-weight: 700; }
.mini.redonda { border-radius: 50%; }
.foto-grande { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--destaque-claro); display: grid; place-items: center; font-size: 38px; color: var(--destaque); font-weight: 700; margin: 0 auto; }

.selo { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: var(--destaque-claro); color: var(--destaque); }
.selo.paga { background: var(--verde-claro); color: var(--verde); }
.selo.vencida { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.breve { background: var(--amarelo-claro); color: var(--amarelo); }
.ponto-vermelho { width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); display: inline-block; margin-left: 4px; vertical-align: middle; }
li.vencida { background: var(--vermelho-claro); }
li.breve { background: var(--amarelo-claro); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; padding: 11px 16px; background: var(--destaque); color: var(--sobre-destaque); font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.sec { background: var(--destaque-claro); color: var(--destaque); }
.btn.perigo { background: var(--vermelho-claro); color: var(--vermelho); }
.btn.verde { background: var(--verde-claro); color: var(--verde); }
.btn.peq { padding: 6px 10px; font-size: 14px; border-radius: 9px; }
.btn.medio { padding: 10px 12px; font-size: 15px; min-height: 44px; border-radius: 11px; text-align: center; line-height: 1.2; }
.btn.bloco { width: 100%; }
.btn-icone { border: 0; background: var(--destaque-claro); color: var(--destaque); width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.botoes > * { flex: 1; }
.botoes.duas > * { flex: 1 1 calc(50% - 4px); }
.proxima-parcela { font-weight: 600; white-space: nowrap; }
.linha .fim span.proxima-parcela { color: var(--texto); }
.linha .fim span.proxima-parcela.vermelho-txt { color: var(--vermelho); }

.campo { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--linha); min-height: 46px; }
.campo:last-child { border-bottom: 0; }
.campo > label, .campo > .rotulo { flex: 0 0 42%; color: var(--texto); font-size: 15px; }
.campo input, .campo select, .campo textarea { flex: 1; min-width: 0; border: 0; background: none; text-align: right; outline: none; padding: 4px 0; font-size: 16px; }
.campo textarea { text-align: left; resize: vertical; min-height: 60px; }
.campo .valor { flex: 1; text-align: right; font-variant-numeric: tabular-nums; color: var(--suave); }
.campo .valor.forte { color: var(--texto); font-weight: 600; }
.campo.coluna { flex-direction: column; align-items: stretch; }
.campo.coluna > label { flex: none; }
.campo.coluna input, .campo.coluna textarea { text-align: left; }
.campo .manual { font-size: 11px; color: var(--amarelo); }
.ajuda { font-size: 13px; color: var(--suave); margin: 6px 4px 14px; }

.busca { width: 100%; border: 0; border-radius: 11px; padding: 10px 12px; background: var(--cartao); box-shadow: var(--sombra); margin-bottom: 10px; outline: none; font-size: 16px; }
.chips { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { border: 0; border-radius: 99px; padding: 6px 12px; background: var(--cartao); color: var(--texto); white-space: nowrap; cursor: pointer; font-size: 14px; box-shadow: var(--sombra); }
.chip.ativo { background: var(--destaque); color: var(--sobre-destaque); }
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--linha); border-radius: 10px; padding: 2px; gap: 2px; margin: 10px 16px; }
.segmentos button { border: 0; background: none; border-radius: 8px; padding: 7px 4px; cursor: pointer; font-size: 14px; }
.segmentos button.ativo { background: var(--cartao); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / 15%); }
.segmentos.meios { grid-auto-flow: row; grid-template-columns: 1fr 1fr; margin: 0 0 10px; }
.segmentos.meios button { padding: 12px 6px; font-size: 15px; min-height: 44px; }
.segmentos.meios button.ativo { background: var(--destaque); color: var(--sobre-destaque); }

.tabela-lucro { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.tabela-lucro th, .tabela-lucro td { padding: 9px 5px; text-align: right; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela-lucro th:first-child, .tabela-lucro td:first-child { padding-left: 16px; white-space: normal; }
.tabela-lucro th:last-child, .tabela-lucro td:last-child { padding-right: 16px; }
.tabela-lucro th:first-child, .tabela-lucro td:first-child { text-align: left; }
.tabela-lucro th { font-weight: 500; color: var(--suave); font-size: 13px; }
.tabela-lucro tr:last-child td { border-bottom: 0; }

.fotos { display: flex; gap: 10px; overflow-x: auto; padding: 12px 16px; }
.fotos figure { margin: 0; position: relative; flex: none; }
.fotos img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; display: block; }
.fotos figure.principal img { outline: 3px solid var(--destaque); }
.fotos figure button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--vermelho); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }

.item-venda { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--linha); }
.item-venda .meio { flex: 1; min-width: 0; }
.item-venda .meio b { font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-venda input { width: 92px; text-align: right; border: 1px solid var(--linha); border-radius: 8px; padding: 5px 8px; background: var(--fundo); }
.qtd { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.qtd button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--destaque-claro); color: var(--destaque); cursor: pointer; }
.qtd button.btn-cadastro { width: auto; padding: 0 10px; border-radius: 13px; font-size: 12px; margin-left: 4px; white-space: nowrap; }
.resultados { max-height: 260px; overflow-y: auto; }

dialog#folha {
  border: 0; padding: 0; width: 100%; max-width: 560px;
  margin: auto auto 0; border-radius: 18px 18px 0 0;
  background: var(--fundo); color: var(--texto);
  max-height: 88vh; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
dialog#folha::backdrop { background: rgb(0 0 0 / 40%); }
.folha-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.folha-topo h2 { font-size: 17px; margin: 0; }
.folha-corpo { padding: 6px 16px 18px; }

.aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom)); background: #111; color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 50; font-size: 14px; max-width: 90vw; text-align: center; }
.fab { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 9; min-height: 52px; padding: 12px 20px; border-radius: 26px; box-shadow: 0 6px 18px rgb(0 0 0 / 45%); }
.fab.so-sinal { width: 60px; height: 60px; padding: 0; border-radius: 50%; font-size: 30px; line-height: 1; }
.fab[hidden], .abas[hidden] { display: none; }
body.com-fab { padding-bottom: calc(136px + env(safe-area-inset-bottom)); }
.mapa { width: 100%; height: 180px; border: 0; display: block; }
.num { font-variant-numeric: tabular-nums; }
.verde-txt { color: var(--verde); }
.vermelho-txt { color: var(--vermelho); }
.centro { text-align: center; }

/* Painel */
.atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.atalhos a { background: var(--cartao); border-radius: 14px; box-shadow: var(--sombra); padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--texto); }
.atalhos a span { font-size: 22px; }
.seletor-mes { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; }
.seletor-mes label { position: relative; flex: 1; text-align: center; font-size: 17px; cursor: pointer; }
a.indicador { color: var(--texto); }
/* Cartão inteiro leva ao valor principal; os links do rodapé ficam por cima. */
.btn:disabled { opacity: .4; cursor: default; }
.marcar-ajuste { flex: none; width: 22px; height: 22px; accent-color: var(--verde); }
.indicador.inteiro { grid-column: 1 / -1; }
.secao-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.secao-total b { font-size: 17px; font-variant-numeric: tabular-nums; }
/* minmax(0, 1fr) e a foto absoluta: o tamanho real da foto nunca alarga a coluna. */
.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: 14px; overflow: hidden; }
.mosaico > div, .mosaico button { position: relative; min-width: 0; width: 100%; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: var(--destaque-claro); color: var(--destaque); font-size: 28px; font-weight: 700; }
.mosaico > div { cursor: default; }
.mosaico button:not(.selecionado) img { opacity: .75; }
.mosaico .selecionado { outline: 4px solid var(--vermelho); outline-offset: -4px; }
.mosaico .selecionado img { filter: brightness(.7); }
.mosaico .marca { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--vermelho); color: #fff; font-size: 15px; }
.mosaico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.com-links { position: relative; }
.toque-cartao { color: var(--texto); }
.toque-cartao::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.com-links em a { position: relative; z-index: 1; display: inline-block; padding: 4px 0; color: var(--destaque-txt); }
.seletor-mes input[type=month] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.bloco-largo { display: block; margin-bottom: 14px; }
.bloco-largo .lado { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dia-cal { width: 46px; flex: none; text-align: center; background: var(--destaque-claro); color: var(--destaque); border-radius: 10px; padding: 4px 0; }
.dia-cal b { display: block; font-size: 18px; line-height: 1.1; }
.dia-cal span { font-size: 11px; text-transform: uppercase; }
.lista li.dia-venda { background: var(--destaque-claro); }
.lista li.dia-venda .linha { padding-top: 8px; padding-bottom: 8px; }
.lista li.dia-venda .dia-cal { background: var(--cartao); }

/* Cobrança */
li.letra { padding: 4px 16px; font-size: 13px; font-weight: 700; color: var(--destaque); background: var(--fundo); }
.linha .meio span b { display: inline; font-weight: 600; }
.linha .meio.quebra span { white-space: normal; }
.item-venda .mini { width: 40px; height: 40px; }
code { font-size: 12px; word-break: break-all; background: var(--linha); padding: 1px 4px; border-radius: 4px; }

/* Detalhes do tema */
.secao { font: 400 17px/1.1 var(--titulo); letter-spacing: .06em; color: var(--destaque-txt); }
.btn-icone, .btn.sec, .chip, .selo, .qtd button, .dia-cal { color: var(--destaque-txt); }
.indicador strong { font-family: var(--titulo); font-weight: 400; font-size: 26px; letter-spacing: .02em; }
.abas a.ativa { color: var(--destaque-txt); }
.cartao, .indicador, .atalhos a, .busca, .chip { border: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; }
.marca img { width: 64px; height: 64px; border-radius: 50%; }
.marca b { font: 400 26px/1 var(--titulo); letter-spacing: .03em; }
.marca span { display: block; color: var(--suave); font-size: 13px; }
.recibo { white-space: pre-wrap; font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; background: var(--fundo); border-radius: 10px; padding: 12px; margin: 0; color: var(--texto); }

/* Leitor de código de barras */
.leitor-codigo { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; }
.leitor-codigo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leitor-mira { position: absolute; left: 8%; right: 8%; top: 35%; height: 22%; border: 3px solid var(--destaque); border-radius: 14px; box-shadow: 0 0 0 9999px rgb(0 0 0 / 45%); }
.leitor-mira span { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--destaque-txt); animation: leitor-linha 1.6s ease-in-out infinite alternate; }
@keyframes leitor-linha { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
.leitor-dica { position: absolute; top: calc(env(safe-area-inset-top) + 24px); left: 0; right: 0; text-align: center; color: #fff; margin: 0; font-weight: 600; text-shadow: 0 1px 3px #000; }
.leitor-botoes { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 20px); display: flex; gap: 10px; }
.leitor-botoes .btn { flex: 1; }

/* Foto ampliada e foto do produto */
img[data-ampliar] { cursor: zoom-in; }
dialog#zoom { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: #000; }
dialog#zoom::backdrop { background: #000; }
dialog#zoom img { width: 100%; height: 100%; object-fit: contain; display: block; }
dialog#zoom button { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 12px; }
.mini.pequena { width: 34px; height: 34px; border-radius: 8px; margin-left: -6px; }
.foto-produto { display: block; width: 100%; max-height: 280px; object-fit: contain; background: #000; }
.foto-produto.vazia { height: 130px; display: grid; place-content: center; text-align: center; font-size: 34px; color: var(--suave); }
.foto-produto.vazia span { font-size: 13px; }

/* Estoque e simulações */
.linha .meio span.vermelho-txt { color: var(--vermelho); }
.alerta-estoque { display: block; font-size: 12px; color: var(--amarelo); margin: 2px 0 4px; }
.sim-remover { border: 0; background: none; color: var(--vermelho); cursor: pointer; font-size: 15px; padding: 2px 4px; }
.tabela-lucro td:last-child:empty { padding: 0; }
.tabela-lucro td small { display: block; font-size: 12px; }
.tabela-lucro .sim-remover { min-width: 36px; min-height: 36px; margin-right: -8px; }

/* Linha com botão ao lado (link não pode conter botão) */
.com-botao { display: flex; align-items: center; }
.com-botao .linha { flex: 1; min-width: 0; width: auto; }
.com-botao .sim-remover { flex: none; padding: 10px 14px 10px 4px; }

/* Lotes */
.parte-lote { display: block; font-size: 12px; color: var(--suave); margin: 1px 0; }
.item-venda .meio .parte-lote b { display: inline; font-size: inherit; }
.item-venda .fim { text-align: right; white-space: nowrap; }
.selo.esgotado { background: var(--linha); color: var(--suave); }

/* Celular deitado: o iPhone ignora o "orientation" do manifesto, então o app fica coberto até voltar à vertical. */
#girar { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #girar { display: flex; position: fixed; inset: 0; z-index: 9999; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--fundo); color: var(--texto); text-align: center; padding: 20px; }
  #girar span { font-size: 48px; transform: rotate(-90deg); }
  #girar b { font-size: 20px; }
  #girar small { color: var(--suave); font-size: 14px; }
  body { overflow: hidden; }
}

/* Gráfico mensal do Painel */
.grafico-mensal { padding: 12px 10px 10px; }
.grafico-mensal svg { width: 100%; height: auto; display: block; }
.graf-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--suave); margin: 0 4px 6px; }
.graf-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.graf-legenda i { width: 12px; height: 4px; border-radius: 2px; display: inline-block; }
.graf-legenda b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.graf-grade { stroke: var(--linha); stroke-width: 1; }
.graf-zero { stroke: var(--suave); stroke-width: 1; opacity: .6; }
.graf-eixo { fill: var(--suave); font-size: 10px; }
.graf-eixo.atual { fill: var(--texto); font-weight: 700; }
.graf-sel { fill: var(--linha); opacity: .7; }
.grafico-mensal svg { cursor: pointer; touch-action: manipulation; }

/* Lista de produtos: preços do crediário, cartão e à vista */
.linha .fim.precos-produto span.preco-forma { color: var(--texto); font-size: 13px; line-height: 1.35; }
.linha .fim.precos-produto span.preco-forma small { color: var(--suave); font-size: 11px; }
.linha .fim.precos-produto span.preco-forma b { font-weight: 600; }

/* Vendas na loja: passos com botões quadrados */
.lj-trilha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.lj-passo { border: 1px solid var(--linha); background: var(--cartao); color: var(--suave); border-radius: 10px; padding: 6px 4px; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; cursor: pointer; }
.lj-passo b { color: var(--texto); font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-passo.atual { border-color: var(--destaque); color: var(--destaque-txt); font-weight: 700; }
.lj-passo.feito { color: var(--texto); }
.lj-passo:disabled { opacity: .5; cursor: default; }
.lj-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.lj-grade.produtos { grid-template-columns: repeat(2, 1fr); }
.lj-grade.pagamentos .lj-quadrado { aspect-ratio: auto; min-height: 96px; }
.lj-grade.parcelas { grid-template-columns: repeat(4, 1fr); }
.lj-quadrado { aspect-ratio: 1; border: 2px solid var(--linha); background: var(--cartao); color: var(--texto); border-radius: 14px; box-shadow: var(--sombra); padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; cursor: pointer; min-width: 0; font: inherit; }
.lj-quadrado b { font-size: 13px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.lj-quadrado small { font-size: 11px; color: var(--suave); }
.lj-quadrado.ativo { border-color: var(--destaque); background: var(--destaque-claro); }
.lj-quadrado.suave { border-style: dashed; }
.lj-quadrado:disabled { opacity: .45; cursor: default; }
.lj-quadrado.produto { aspect-ratio: auto; min-height: 150px; justify-content: flex-start; }
.lj-quadrado.produto b { font-size: 12px; -webkit-line-clamp: 3; }
.lj-quadrado.mini-q { aspect-ratio: auto; padding: 8px 2px; }
.lj-inicial { width: 44px; height: 44px; border-radius: 12px; background: var(--destaque-claro); color: var(--destaque); display: grid; place-items: center; font-size: 20px; font-weight: 700; flex: none; }
.lj-foto { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: #fff; flex: none; }
.lj-foto.redonda { width: 44px; height: 44px; border-radius: 50%; }
.lj-icone { font-size: 26px; }
.lj-cheio { grid-column: 1 / -1; text-align: center; }
.lj-resumo { margin-bottom: 10px; }

.secao-total #graf-voltar { text-transform: none; letter-spacing: 0; }

.graf-legenda em { font-style: normal; font-size: 12px; font-weight: 600; }
.grafico-barras svg { cursor: pointer; touch-action: manipulation; }