/* Componentes específicos de tela: gráficos, mesas, eventos, venda. */

/* ═══════════════════════════════════════════════════ gráficos ═══ */

svg.grafico { width: 100%; display: block; max-height: 280px; overflow: visible; }
svg.grafico text { font-family: var(--fonte); font-size: var(--t-xs); fill: var(--tinta-3); }
svg.grafico .valor-eixo { font-variant-numeric: tabular-nums; }
svg.grafico .grade { stroke: var(--grade); stroke-width: 1; }
svg.grafico .marca-dado { transition: opacity 140ms; }
svg.grafico .marca-dado:hover { opacity: .85; }
svg.grafico .cursor { stroke: var(--linha-2); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
svg.grafico .ponto { pointer-events: none; }
svg.grafico .alvo { cursor: crosshair; }
svg.grafico .alvo:focus-visible { outline: none; }

.spark { width: 100%; height: 34px; display: block; margin-top: 10px; }

.grafico-vazio {
  padding: var(--e-8) var(--e-4);
  text-align: center;
  color: var(--tinta-3);
  font-size: var(--t-base);
  background: var(--superficie-2);
  border-radius: var(--r);
}

.legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--e-4); }
.legenda-item {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-sm); color: var(--tinta-2);
}
.legenda-cor { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.dica {
  position: fixed;
  padding: 10px 13px;
  background: var(--tinta);
  color: var(--superficie);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.55;
  pointer-events: none;
  z-index: 300;
  box-shadow: var(--sombra-lg);
  max-width: 250px;
}
:root[data-tema="escuro"] .dica { background: #2a303a; color: #fff; }
.dica-titulo {
  font-weight: 600; margin-bottom: 4px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
:root:not([data-tema="escuro"]) .dica-titulo { border-color: rgba(255, 255, 255, .2); }
.dica b { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Barras horizontais em HTML: altura de linha fixa, só a barra estica.
   Em SVG a altura escalaria junto com a largura e viraria um gráfico de
   meia tela em monitor largo. */
.ranking { display: flex; flex-direction: column; }
.ranking-linha {
  display: grid;
  grid-template-columns: minmax(130px, 1.3fr) minmax(80px, 2.4fr) auto;
  align-items: center;
  gap: var(--e-4);
  padding: 11px 12px;
  border-radius: var(--r);
  transition: background 120ms;
}
.ranking.numerado .ranking-linha { grid-template-columns: 30px minmax(120px, 1.2fr) minmax(80px, 2.4fr) auto; }
.ranking-linha:hover { background: var(--superficie-2); }
.ranking-linha:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

.ranking-pos {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--superficie-3);
  color: var(--tinta-2);
  font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ranking-linha:first-child .ranking-pos { background: var(--marca-clara); color: var(--marca); }
.ranking-nome {
  font-size: var(--t-base); color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ranking-trilho { height: 8px; background: var(--superficie-3); border-radius: var(--r-full); overflow: hidden; }
.ranking-trilho > i {
  display: block; height: 100%;
  border-radius: var(--r-full);
  transition: width 420ms cubic-bezier(.2, .8, .3, 1);
}
.ranking-valor {
  font-size: var(--t-base); font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right; min-width: 96px;
  color: var(--tinta);
}

.barra-composicao { display: flex; height: 38px; border-radius: var(--r-sm); overflow: hidden; gap: 2px; }
.barra-composicao > i { display: block; transition: opacity 140ms; }
.barra-composicao > i:hover { opacity: .85; }

.detalhes-tabela { margin-top: var(--e-4); }
.detalhes-tabela > summary {
  cursor: pointer; color: var(--tinta-3); font-size: var(--t-sm);
  padding: 6px 0; user-select: none; list-style: none;
}
.detalhes-tabela > summary::-webkit-details-marker { display: none; }
.detalhes-tabela > summary::before { content: "▸ "; }
.detalhes-tabela[open] > summary::before { content: "▾ "; }
.detalhes-tabela > summary:hover { color: var(--tinta-2); }

/* ═══════════════════════════════════════════════════ mesas ═══ */

.mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: var(--e-4);
  margin-bottom: var(--e-4);
}

.mesa {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--e-4);
  min-height: 150px;
  display: flex; flex-direction: column;
  text-align: left;
  transition: box-shadow 150ms, border-color 150ms, transform 120ms;
}
.mesa:hover { box-shadow: var(--sombra); border-color: var(--linha-2); transform: translateY(-1px); }
.mesa:active { transform: translateY(0); }
.mesa.ocupada { border-color: color-mix(in srgb, var(--marca) 35%, transparent); }

.mesa-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-2); }
.mesa-nome { font-weight: 600; font-size: var(--t-base); color: var(--tinta); }
.mesa-itens { font-size: var(--t-sm); color: var(--tinta-3); margin-top: 1px; }
.mesa-total {
  font-size: var(--t-2xl); font-weight: 700;
  letter-spacing: -.026em; font-variant-numeric: tabular-nums;
  margin-top: auto; padding-top: var(--e-4); color: var(--tinta);
}
.mesa-tempo {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--t-sm); color: var(--tinta-3); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.mesa-nova {
  border-style: dashed; border-color: var(--linha-2);
  background: transparent; box-shadow: none;
  align-items: center; justify-content: center;
  gap: 10px; color: var(--tinta-2);
}
.mesa-nova:hover { border-color: var(--marca); color: var(--marca); background: var(--marca-clara); }

/* ═══════════════════════════════════════════════════ eventos ═══ */

.eventos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: var(--e-4);
}

.evento {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--e-4);
  display: flex; flex-direction: column;
}
.evento.aberto { border-color: color-mix(in srgb, var(--marca) 40%, transparent); }
.evento-topo { display: flex; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-4); }
.evento-topo h3 { font-size: var(--t-base); }
.evento-meta {
  display: flex; flex-wrap: wrap; gap: 3px 14px;
  margin-top: 5px; font-size: var(--t-sm); color: var(--tinta-3);
}
.evento-meta span { display: inline-flex; align-items: center; gap: 5px; }
.evento-meta .icone { width: 13px; height: 13px; }

.evento-numeros {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3);
  padding: var(--e-4) 0;
  border-top: 1px solid var(--linha);
}
.evento-rotulo { font-size: var(--t-xs); color: var(--tinta-3); margin-bottom: 2px; }
.evento-valor {
  font-size: var(--t-xl); font-weight: 700;
  letter-spacing: -.024em; font-variant-numeric: tabular-nums; color: var(--tinta);
}
.evento-valor.positivo { color: var(--ok); }
.evento-valor.negativo { color: var(--erro); }

/* ═══════════════════════════════════════════════════ venda ═══ */

.venda { display: grid; grid-template-columns: 1fr 380px; gap: var(--e-4); align-items: start; }

.produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr));
  gap: var(--e-3);
}
.produto {
  padding: var(--e-4);
  min-height: 104px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  text-align: left;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 140ms, box-shadow 140ms, transform 110ms;
}
.produto:hover { border-color: var(--marca); box-shadow: var(--sombra); transform: translateY(-1px); }
.produto:active { transform: translateY(0); }
.produto-nome { font-weight: 600; font-size: var(--t-base); color: var(--tinta); line-height: 1.3; }
.produto-estoque { font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.produto-preco {
  font-size: var(--t-lg); font-weight: 700; color: var(--marca);
  margin-top: auto; font-variant-numeric: tabular-nums;
}

.carrinho {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  position: sticky; top: var(--e-4);
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 120px);
}
.carrinho-topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-4);
  border-bottom: 1px solid var(--linha);
}
.carrinho-itens { overflow-y: auto; flex: 1; min-height: 100px; padding: var(--e-2); }
.item {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 10px 12px;
  border-radius: var(--r);
}
.item:hover { background: var(--superficie-2); }
.item-info { flex: 1; min-width: 0; }
.item-nome { font-size: var(--t-base); font-weight: 500; color: var(--tinta); }
.item-det { font-size: var(--t-sm); color: var(--tinta-3); }
.item-valor { font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; }

.carrinho-pe { border-top: 1px solid var(--linha); padding: var(--e-4); }
.carrinho-linha {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-base); color: var(--tinta-2); margin-bottom: 7px;
}
.carrinho-linha span:last-child { font-variant-numeric: tabular-nums; }
.carrinho-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--e-3); margin-bottom: var(--e-4);
  border-top: 1px solid var(--linha);
}
.carrinho-total strong { font-size: var(--t-base); color: var(--tinta-2); font-weight: 500; }
.carrinho-total b {
  font-size: var(--t-3xl); font-weight: 700;
  letter-spacing: -.028em; font-variant-numeric: tabular-nums; color: var(--tinta);
}

.qtd { display: inline-flex; align-items: center; }
.qtd button {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--linha-2);
  background: var(--superficie);
  color: var(--tinta-2);
  font-size: var(--t-lg);
}
.qtd button:first-child { border-radius: var(--r) 0 0 var(--r); }
.qtd button:last-child { border-radius: 0 var(--r) var(--r) 0; }
.qtd button:hover { background: var(--superficie-3); color: var(--tinta); }
.qtd span {
  min-width: 52px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--linha-2); border-left: 0; border-right: 0;
  font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--superficie);
}

/* Escolhas grandes: no balcão o dedo precisa de alvo, não de select. */
.escolhas { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.escolha {
  padding: 11px 16px;
  min-height: 44px;
  border: 1px solid var(--linha-2);
  border-radius: var(--r);
  background: var(--superficie);
  color: var(--tinta-2);
  font-size: var(--t-base);
  transition: all 130ms;
}
.escolha:hover { border-color: var(--linha-2); background: var(--superficie-3); }
.escolha.ativa {
  border-color: var(--marca);
  background: var(--marca-clara);
  color: var(--marca);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════ alertas / sino ═══ */

.sino-area { position: relative; }
.sino {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--superficie);
  border: 1px solid var(--linha-2);
  border-radius: var(--r);
  color: var(--tinta-2);
  position: relative;
}
.sino:hover { background: var(--superficie-3); color: var(--tinta); }
.sino.tem-alerta { border-color: var(--alerta); color: var(--alerta); }
.sino-conta {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--erro); color: #fff;
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--superficie);
}

.painel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  z-index: 50; padding: var(--e-2);
}
.painel h3 { padding: 10px 12px 6px; font-size: var(--t-sm); color: var(--tinta-3); font-weight: 600; }
.painel-linha {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r);
  width: 100%; border: 0; background: transparent; text-align: left;
  color: inherit;
}
.painel-linha:hover { background: var(--superficie-2); }
.painel-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.painel-ponto.erro { background: var(--erro); }
.painel-ponto.alerta { background: var(--alerta); }
.painel-nome { flex: 1; min-width: 0; font-size: var(--t-base); color: var(--tinta); }
.painel-nome span { display: block; font-size: var(--t-sm); color: var(--tinta-3); }
.painel-valor { font-size: var(--t-base); color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════ rede ═══ */

.selo-rede {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; min-height: 44px;
  border: 1px solid var(--linha-2);
  border-radius: var(--r);
  background: var(--superficie);
  color: var(--tinta-2);
  font-size: var(--t-base); font-weight: 500;
  white-space: nowrap;
}
.selo-offline { background: var(--alerta-fundo); border-color: var(--alerta); color: #9a6410; }
.selo-fila { background: var(--marca-clara); border-color: var(--marca); color: var(--marca); }
.selo-atualizar { background: var(--info-fundo); border-color: var(--s1); color: var(--s1); }
:root[data-tema="escuro"] .selo-offline { color: var(--alerta); }

/* ═══════════════════════════════════════════ seleção / matriz ═══ */

.selecao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--e-2);
}
.selecao-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 130ms, background 130ms;
}
.selecao-item:hover { border-color: var(--linha-2); }
.selecao-item:has(input:checked) { border-color: var(--marca); background: var(--marca-clara); }
.selecao-item input { width: 18px; height: 18px; accent-color: var(--marca); flex: none; margin-top: 1px; }

.trilha { display: flex; gap: var(--e-2); margin-bottom: var(--e-4); }
.trilha-passo {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--r-full);
  font-size: var(--t-base); color: var(--tinta-3);
}
.trilha-passo.atual { background: var(--marca-clara); color: var(--marca); font-weight: 600; }
.trilha-marca {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--superficie-3); color: var(--tinta-3);
  font-size: var(--t-sm); font-weight: 600; flex: none;
}
.trilha-passo.atual .trilha-marca { background: var(--marca); color: #fff; }
.trilha-passo.feito .trilha-marca { background: var(--ok); color: #fff; }

.matriz th { vertical-align: bottom; }
.matriz input { min-width: 96px; max-width: 130px; text-align: right; min-height: 40px; margin-left: auto; }
.matriz input:placeholder-shown { background: var(--superficie-2); border-color: var(--linha); }

@media (max-width: 1100px) {
  .venda { grid-template-columns: 1fr; }
  .carrinho { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .ranking-linha, .ranking.numerado .ranking-linha { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .ranking-trilho { grid-column: 1 / -1; }
  .ranking.numerado .ranking-pos { grid-row: 1; }
  .evento-numeros { grid-template-columns: 1fr 1fr; }
}

/* Lista de produtos e carrinho mais compactos: cabem mais itens sem rolar. */
.produtos { grid-template-columns: repeat(auto-fill, minmax(min(146px, 100%), 1fr)); gap: 10px; }
.produto { padding: 12px 13px; min-height: 86px; }
.produto-nome { font-size: 13.5px; }
.produto-preco { font-size: 15.5px; }

.carrinho-topo { padding: 12px 16px; }
.carrinho-pe { padding: 16px; }
.item { padding: 8px 10px; }
.carrinho-total b { font-size: 26px; }
.carrinho-linha { margin-bottom: 5px; }

.mesa { padding: 16px; min-height: 130px; }
.mesa-total { font-size: 22px; padding-top: 12px; }
.evento { padding: 16px 18px; }
/* Recipiente e quantidade são tocados em toda venda de chopp: 44px, que é o
   alvo que se acerta de pé, com pressa e com a mão molhada. */
.escolha { min-height: 44px; padding: 9px 14px; }
.qtd button, .qtd span { height: 44px; }

/* Escolha com ícone e nota (ex.: bandeira + taxa). */
.escolha { display: inline-flex; align-items: center; gap: 7px; }
.escolha-nota {
  font-size: var(--t-xs); font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-full);
  background: var(--superficie-3); color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.escolha.ativa .escolha-nota { background: var(--marca); color: #fff; }

/* Divisão da conta. */
.divisao {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--r);
}
.divisao-rotulo { font-size: var(--t-sm); color: var(--tinta-2); font-weight: 500; }
.divisao-valor {
  font-size: var(--t-base); font-weight: 600; color: var(--marca);
  font-variant-numeric: tabular-nums;
}
.carrinho-total b.positivo { color: var(--ok); }

/* Foto do produto no cadastro e na lista de venda. */
.linha-foto { display: flex; gap: 18px; align-items: flex-start; }
.campo-foto { display: flex; flex-direction: column; gap: 8px; width: 132px; flex: none; }
.foto-previa {
  width: 132px; height: 132px;
  border-radius: var(--r);
  border: 1px dashed var(--linha-2);
  background: var(--superficie-2);
  display: grid; place-items: center;
  overflow: hidden;
}
.foto-previa img { width: 100%; height: 100%; object-fit: cover; }
.foto-vazia { color: var(--tinta-3); }
.foto-vazia .icone { width: 30px; height: 30px; }
.foto-acoes { display: flex; flex-direction: column; gap: 6px; }
.foto-acoes .botao { width: 100%; }

/* Miniatura na tabela de estoque e no botão de produto. */
.mini-foto {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--superficie-3);
}
.produto-foto {
  width: 100%; height: 62px;
  border-radius: var(--r-sm);
  object-fit: cover;
  margin-bottom: 6px;
  background: var(--superficie-3);
}

@media (max-width: 720px) {
  .linha-foto { flex-direction: column; }
  .campo-foto { width: 100%; flex-direction: row; align-items: center; }
  .foto-previa { width: 92px; height: 92px; }
  .foto-acoes { flex: 1; }
}
.linha-produto { display: flex; align-items: flex-start; gap: 10px; }

/* ═══════════════════════════════════════════════ fluxo de caixa ═══ */

.valor-entrada { color: var(--ok); }
.valor-saida { color: var(--erro); }

.cats { display: flex; flex-direction: column; gap: 10px; }

.cat {
  border: 1px solid var(--linha);
  border-radius: var(--r);
  padding: 12px 14px;
  background: var(--superficie-2);
}
.cat-topo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cat-cor { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cat-nome { font-weight: 600; color: var(--tinta); font-size: var(--t-base); }

.cat-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cat-sub {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 5px 3px 10px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-full);
  font-size: var(--t-sm); color: var(--tinta-2);
}
.cat-sub-x {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-3);
  font-size: 15px; line-height: 1;
}
.cat-sub-x:hover { background: var(--erro-fundo); color: var(--erro); }
.cat-sub-nova {
  padding: 3px 11px;
  border-style: dashed;
  color: var(--marca);
  background: transparent;
  cursor: pointer;
}
.cat-sub-nova:hover { background: var(--marca-clara); border-color: var(--marca); }

/* Cards de evento mais compactos: cabem três na largura sem rolar. */
.eventos { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.evento { padding: 14px 16px; }
.evento-topo { margin-bottom: 10px; }
.evento-meta { gap: 2px 10px; margin-top: 3px; }
.evento-numeros { padding: 10px 0; gap: 8px; }
.evento-valor { font-size: var(--t-lg); }

/* Botão de venda direta no topo, ao lado do sino. */
.botao-balcao {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; min-height: 44px;
  border-radius: var(--r);
  border: 1px solid var(--marca);
  background: var(--marca); color: #fff;
  font-size: var(--t-base); font-weight: 600;
  box-shadow: var(--sombra-sm);
  white-space: nowrap;
}
.botao-balcao:hover { background: var(--marca-escura); border-color: var(--marca-escura); }
.botao-balcao:disabled { opacity: .45; cursor: not-allowed; }

/* Cabeçalho da home: o evento é o assunto, não a palavra "Mesas". */
.cabecalho-evento {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--marca-clara);
  border: 1px solid color-mix(in srgb, var(--marca) 22%, transparent);
  border-radius: var(--r-lg);
  margin-bottom: var(--e-4);
}
.cabecalho-evento-icone {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-sm);
  background: var(--marca); color: #fff;
  display: grid; place-items: center;
}
.cabecalho-evento h2 { font-size: var(--t-lg); line-height: 1.2; }
.cabecalho-evento-meta { font-size: var(--t-sm); color: var(--tinta-2); margin-top: 1px; }

/* Troca de evento quando há mais de um aberto. */
.troca-evento { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.troca-evento select { min-width: 190px; min-height: 38px; }

/* ═══════════════════════════════════ contas a pagar e a receber ═══ */

.contas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--e-4);
}

.conta-cartao { border-top: 3px solid var(--linha); }
.conta-cartao.a-receber { border-top-color: var(--ok); }
.conta-cartao.a-pagar { border-top-color: var(--erro); }

.conta-total {
  font-size: var(--t-2xl); font-weight: 700;
  letter-spacing: -.026em; font-variant-numeric: tabular-nums;
  margin-top: -6px;
}
.conta-quebra {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: var(--t-sm); margin-top: 4px;
  padding-bottom: 12px; border-bottom: 1px solid var(--linha);
}
.conta-atraso { color: var(--erro); font-weight: 600; }
.conta-hoje { color: var(--alerta); font-weight: 600; }

.contas-lista { display: flex; flex-direction: column; }
.conta-linha {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}
.conta-linha:last-child { border-bottom: none; padding-bottom: 0; }
.conta-desc {
  font-size: var(--t-base); color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conta-meta { font-size: var(--t-sm); color: var(--tinta-3); margin-top: 1px; }
.conta-valor {
  font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--tinta);
}
.contas-vazio { font-size: var(--t-sm); color: var(--tinta-3); padding: 10px 0 0; }

/* Rodapé do cartão de evento: a mesma linha em todos, mesmo zerada, é o que
   mantém a grade alinhada. */
.evento-rodape {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-3);
  padding: 9px 0 12px;
  border-top: 1px solid var(--linha);
}
.evento-despesa {
  font-size: var(--t-base); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tinta-2);
}
/* As ações descem para o pé do cartão: cartão mais alto não empurra o botão
   do vizinho para cima. */
/* As ações do cartão cabem numa fileira só: são até sete, e quebrando para
   a segunda linha o cartão crescia e a grade de eventos ficava desigual.
   Eles encolhem um pouco antes de quebrar — daí o flex: 0 1 e o min-width. */
.evento .grupo-botoes {
  margin-top: auto;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
}
.evento .grupo-botoes .botao-so-icone {
  width: 36px; min-width: 30px; height: 36px;
  /* o min-height de 44px da regra geral precisa sair junto, senão o botão
     encolhe na largura e continua alto */
  min-height: 36px;
  flex: 0 1 36px;
  padding: 0;
}
.evento .grupo-botoes .botao-so-icone .icone { width: 17px; height: 17px; }

/* Local e tipo de evento ocupam ora uma, ora duas linhas. Reservar as duas
   é o que faz Receita, Despesas e os botões caírem na mesma altura em toda
   a grade — sem isso, cada cartão começa o corpo num lugar. */
.evento-meta { min-height: 40px; align-content: start; }
/* Endereço comprido corta com reticências em vez de virar uma terceira
   linha que desalinha o cartão inteiro. */
.evento-local { max-width: 100%; }
.evento-local > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* ═══════════════════════════════════════ seletor de evento ═══ */

.seletor-evento {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 14px;
  max-width: 320px;
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: var(--t-base); font-weight: 500;
  text-align: left;
}
.seletor-evento:hover { border-color: var(--linha-2); background: var(--superficie); }
.seletor-evento-nome {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.seletor-evento-data {
  font-size: var(--t-sm); color: var(--tinta-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.seletor-evento-seta { color: var(--tinta-3); font-size: 11px; margin-left: 2px; }

.lista-eventos {
  display: flex; flex-direction: column;
  max-height: 52vh; overflow-y: auto;
  margin: 0 -4px;
}
.linha-evento {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  text-align: left;
}
.linha-evento:hover { background: var(--superficie-3); }
.linha-evento.escolhida {
  background: var(--marca-clara);
  border-color: color-mix(in srgb, var(--marca) 30%, transparent);
}
.linha-evento-icone {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  background: var(--superficie-3); color: var(--tinta-2);
  display: grid; place-items: center;
}
.linha-evento-icone.ativo { background: var(--marca); color: #fff; }
.linha-evento-nome { font-weight: 600; color: var(--tinta); font-size: var(--t-base); }
.linha-evento-meta { font-size: var(--t-sm); color: var(--tinta-3); margin-top: 1px; }
.linha-evento-valor {
  font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--tinta-2); white-space: nowrap;
}

/* ═══════════════════════════════════════════ configurações ═══ */

.cores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 10px;
}
.cor {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: var(--t-base); font-weight: 500;
  text-align: left;
}
.cor:hover { border-color: var(--linha-2); background: var(--superficie); }
.cor.escolhida {
  border-color: var(--marca);
  background: var(--marca-clara);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 22%, transparent);
}
.cor-amostra {
  width: 22px; height: 22px; flex: none;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}

/* Alocação de eventos por usuário. */
.alocacao {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 46vh; overflow-y: auto;
}
.alocacao-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--superficie-2);
  text-align: left;
}
.alocacao-item:hover { border-color: var(--linha-2); }
.alocacao-item.marcada {
  border-color: var(--marca);
  background: var(--marca-clara);
}
.alocacao-marca {
  width: 22px; height: 22px; flex: none;
  border: 1px solid var(--linha-2);
  border-radius: 6px;
  display: grid; place-items: center;
  background: var(--superficie);
  color: #fff;
}
.alocacao-item.marcada .alocacao-marca {
  background: var(--marca); border-color: var(--marca);
}

/* Detalhe do log: JSON curto, em fonte de largura fixa para ler rápido. */
.log-detalhe .cel-valor {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: var(--t-xs);
  color: var(--tinta-3);
  max-width: 38ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════════════════════════════════════ site e blog ═══ */

.galeria-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: var(--e-4);
}
.foto-cartao {
  margin: 0;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  overflow: clip;
}
.foto-cartao img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; display: block;
  background: var(--superficie-3);
}
.foto-cartao figcaption { padding: 10px 12px 12px; }
.foto-legenda {
  font-size: var(--t-sm); color: var(--tinta-2);
  margin-bottom: 8px; min-height: 34px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.foto-previa-larga {
  width: 100%; max-height: 260px;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--superficie-3);
  display: block;
}
.post-previa { display: block; }

/* ═══════════════════════════════════════ cobrança: atalhos do balcão ═══ */
/*
 * Fechar conta com fila no balcão é tocar, não digitar. Desconto sai em 5%
 * ou 10%, troco sai pela nota que o cliente entregou, e o teclado só aparece
 * quando o valor foge do comum.
 */
.atalhos { flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.atalhos .botao {
  min-height: 48px;
  min-width: 64px;
  padding-inline: 16px;
  font-weight: 600;
  justify-content: center;
}

.troco-linha {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-top: 10px; min-height: 22px;
}
.troco-valor { font-size: var(--t-2xl); color: var(--ok); }
.troco-falta { font-size: var(--t-2xl); color: var(--erro); }

/* Dividir conta é exceção em evento: o bloco fica estreito, fora do caminho. */
.divisao-curta { max-width: 330px; }
.divisao-curta .divisao-valor { white-space: nowrap; }

/*
 * O pop-up do valor abre DENTRO do modal de cobrança.
 * Um modal por cima do outro fecharia o de baixo (só existe um), e com ele
 * iria embora a venda que está sendo fechada.
 */
.pop-valor {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  padding: 16px;
  background: rgb(15 23 42 / .45);
}
.pop-valor[hidden] { display: none; }
.pop-valor-caixa {
  width: min(320px, 100%);
  background: var(--superficie);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  padding: 18px;
}
.pop-valor-caixa label {
  display: block; margin-bottom: 8px;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
.pop-valor-caixa input {
  width: 100%; height: 56px;
  font-size: var(--t-2xl); text-align: right;
}
/* O pop-up se ancora no corpo do modal. */
.modal-corpo { position: relative; }

/* ═══════════════════════════════ cobrança: tudo numa tela só ═══ */
/*
 * O fechamento é a tela em que a fila espera. Cada bloco que empurra o
 * "falta" para fora da vista custa uma rolagem com a mão ocupada, então aqui
 * os espaços são mais curtos que no resto do sistema — sem mexer no tamanho
 * dos alvos, que continuam de 44px para o dedo.
 */
.balcao-alvos .campos { gap: 12px; }
.balcao-alvos .campo { gap: 4px; }
.balcao-alvos .atalhos { margin-top: 5px; gap: 6px; }
.balcao-alvos .atalhos .botao { min-height: 44px; padding-inline: 14px; }
.balcao-alvos .escolhas { gap: 6px; }
/* Dividir numa linha só: rótulo, contador e o resumo lado a lado. Em duas
   linhas, o bloco ocupava 95px de um fechamento que precisa caber na tela. */
.balcao-alvos .divisao {
  padding: 6px 12px;
  flex-wrap: nowrap;
  align-items: center;
}
.balcao-alvos .divisao-valor { margin-left: auto; text-align: right; }
.balcao-alvos .carrinho-linha { padding-block: 4px; }
.balcao-alvos .carrinho-total { margin-bottom: 0; padding-top: 8px; }
.balcao-alvos .troco-linha { margin-top: 6px; }
.balcao-alvos .campo-dica { margin-top: 2px; }

/* ═══════════════════════════════ código de aprovação ═══ */
/*
 * Seis dígitos que o gerente lê em voz alta e o balcão digita. Grande porque
 * é lido a um metro de distância, com barulho de evento em volta.
 */
.codigo-aprovacao {
  margin: 4px 0 14px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
  color: var(--marca);
  font-variant-numeric: tabular-nums;
}
.codigo-entrada {
  font-size: var(--t-2xl);
  letter-spacing: .3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}