/* Visual do Ceasa: as mesmas cores do KDS/PDV. Escuro por padrão; claro pelo botão de sol/lua.
   Cada área tem a sua cor (--acento): pedidos azul, compras laranja, estoque verde, cadastros roxo,
   sistema ciano. O body recebe data-area e data-tema. */
:root {
  --fundo: #0d111c; --fundo2: #141a2a; --cartao: #1a2134; --cartao-alta: #232b42; --linha: #2c3550; --borda: #343e5c;
  --tinta: #eef1f8; --suave: #9aa3bd; --apagado: #5f6884;
  --sucesso: #22c55e; --atencao: #f59e0b; --erro: #ef4444; --info: #5b8cff; --roxo: #8b5cf6;
  --fundo-erro: #3a1620; --fundo-info: #14284a; --fundo-atencao: #2a2214; --fundo-sucesso: #12261c;
  --tinta-erro: #fca5a5; --tinta-atencao: #fcd34d; --tinta-sucesso: #86efac; --tinta-info: #a5c0ff; --tinta-roxo: #c4b5fd;
  --veu: rgba(0, 0, 0, .6); --sombra: 0 18px 50px rgba(0, 0, 0, .45); --realce: rgba(255, 255, 255, .04);
  --acento: #5b8cff; --acento2: #8b5cf6;
  /* nomes antigos usados nas telas */
  --verde: var(--acento); --vermelho: var(--erro); --vermelho-tinta: var(--tinta-erro);
  color-scheme: dark;
  /* Gráficos: uma cor por medida; duas séries (vendido × comprado) validadas para daltonismo, claro e escuro. */
  --serie1: #3b82f6; --serie2: #ea580c;
}
body { --trilho: color-mix(in srgb, var(--tinta) 9%, transparent); }
body[data-tema="claro"] {
  --fundo: #eef1f7; --fundo2: #f7f8fc; --cartao: #ffffff; --cartao-alta: #e9edf6; --linha: #dfe4ef; --borda: #cfd6e4;
  --tinta: #151b2c; --suave: #4d566f; --apagado: #8a93aa;
  --sucesso: #15a34a; --atencao: #d97706; --erro: #dc2626; --info: #3d6df2; --roxo: #7c4ef0;
  --fundo-erro: #fde8e8; --fundo-info: #e5edff; --fundo-atencao: #fff3d6; --fundo-sucesso: #e3f6ea;
  --tinta-erro: #9a1c1c; --tinta-atencao: #8a4b00; --tinta-sucesso: #0f6b33; --tinta-info: #1f46b0; --tinta-roxo: #5b2fc7;
  --veu: rgba(20, 26, 46, .35); --sombra: 0 14px 40px rgba(20, 26, 46, .14); --realce: rgba(20, 26, 46, .04);
  color-scheme: light;
}
body[data-area="pedidos"]   { --acento: #5b8cff; --acento2: #3b5bdb; }
body[data-area="compras"]   { --acento: #f97316; --acento2: #ea580c; }
body[data-area="estoque"]   { --acento: #22c55e; --acento2: #15803d; }
body[data-area="cadastros"] { --acento: #a855f7; --acento2: #7c3aed; }
body[data-area="sistema"]   { --acento: #06b6d4; --acento2: #0e7490; }
body[data-area="analises"]  { --acento: #ec4899; --acento2: #be185d; }
body[data-area="tv"]        { --acento: #f97316; --acento2: #ea580c; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; color: var(--tinta); font-family: "Segoe UI", "Noto Sans", system-ui, -apple-system, Roboto, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  min-height: 100vh; padding-bottom: env(safe-area-inset-bottom);
  background: radial-gradient(1100px 650px at 90% -10%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(139, 92, 246, .10), transparent 60%), var(--fundo);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: var(--acento); }
#app { max-width: 760px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------ topo */
.topo { background: color-mix(in srgb, var(--fundo2) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--tinta); padding: 12px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid var(--linha); box-shadow: inset 0 -3px 0 var(--acento); }
.topo .emblema { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--acento), var(--acento2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--acento) 35%, transparent); }
.topo .emblema svg { width: 22px; height: 22px; }
.topo .titulo { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.topo .sobre { font-size: 12px; color: var(--acento); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.topo h1 { margin: 0; font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .icone { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borda); background: var(--cartao); color: var(--tinta);
  display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; font-size: 20px; }
.topo .icone svg { width: 20px; height: 20px; }
.topo .acao { height: 44px; padding: 0 14px; border-radius: 12px; background: linear-gradient(135deg, var(--acento), var(--acento2)); color: #fff; border: none; font-weight: 800; }

/* ------------------------------------------------------------ estrutura */
.corpo { padding: 16px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.secao { display: flex; flex-direction: column; gap: 8px; }
.rotulo { font-size: 12px; font-weight: 800; color: var(--acento); letter-spacing: .08em; text-transform: uppercase; }
.divisor { height: 1px; background: var(--linha); margin: 0 -16px; }
.dica { font-size: 13px; color: var(--suave); line-height: 1.45; }
.vazio { background: var(--cartao); border: 1px dashed var(--borda); border-radius: 16px; padding: 18px; text-align: center; color: var(--suave); }
.sub { font-size: 12px; color: var(--suave); }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; color: var(--tinta); }
button.cartao:hover { border-color: var(--acento); }
.lista { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; }
.lista > * + * { border-top: 1px solid var(--linha); }
.linha { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 60px; width: 100%; background: transparent; border: none; text-align: left; text-decoration: none; color: inherit; }
button.linha:hover { background: var(--realce); }
.linha .meio { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.linha .nome { font-size: 16px; font-weight: 700; }
.linha .qtd { font-size: 19px; font-weight: 800; white-space: nowrap; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 600; color: var(--suave); }
.entrada { height: 52px; border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo2); color: var(--tinta); padding: 0 14px; font-size: 17px; width: 100%; outline: none; }
.entrada:focus { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }
/* 16px no mínimo: com letra menor o iPhone dá zoom sozinho ao tocar no campo e não volta. */
textarea.entrada { height: auto; padding: 12px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.45; resize: vertical; }
.entrada::placeholder { color: var(--apagado); }
/* Data e hora: no iPhone o campo tem largura própria e passava da borda do cartão. */
input.entrada { min-width: 0; max-width: 100%; }
input.entrada[type="date"], input.entrada[type="time"] { -webkit-appearance: none; appearance: none; display: block; line-height: 50px; text-align: left; }
input.entrada[type="date"]::-webkit-date-and-time-value, input.entrada[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input.entrada[type="date"]::-webkit-calendar-picker-indicator, input.entrada[type="time"]::-webkit-calendar-picker-indicator { opacity: .7; }
select.entrada { min-width: 0; max-width: 100%; text-overflow: ellipsis; }

/* ------------------------------------------------------------ botões */
.botao { min-height: 56px; border-radius: 14px; border: none; background: linear-gradient(135deg, var(--acento), var(--acento2)); color: #fff; font-weight: 800; font-size: 17px; padding: 0 18px; width: 100%;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--acento) 28%, transparent); transition: transform .08s, filter .15s; }
.botao:hover:not(:disabled) { filter: brightness(1.07); }
.botao:active:not(:disabled) { transform: scale(.98); }
.botao.grande { min-height: 64px; font-size: 19px; border-radius: 16px; }
.botao.claro { background: transparent; color: var(--acento); border: 2px solid var(--acento); box-shadow: none; }
.botao.neutro { background: var(--cartao); color: var(--tinta); border: 1px solid var(--borda); font-weight: 700; box-shadow: none; }
.botao.perigo { background: transparent; color: var(--erro); border: 1px solid var(--erro); box-shadow: none; }
.botao.perigo-cheio { background: var(--erro); color: #fff; box-shadow: none; }
.botao:disabled { background: var(--cartao-alta); color: var(--apagado); border: 1px solid var(--borda); box-shadow: none; cursor: default; }
.dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.rola { flex-wrap: nowrap; overflow-x: auto; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--cartao); color: var(--tinta); font-weight: 700; font-size: 15px; white-space: nowrap; flex-shrink: 0; }
.chip:hover { border-color: var(--acento); }
.chip.ativo { border: 1px solid transparent; background: linear-gradient(135deg, var(--acento), var(--acento2)); color: #fff; }
.chip.data { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 8px; }
.chip.data small { font-size: 11px; font-weight: 600; opacity: .85; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.grade .chip { white-space: normal; line-height: 1.15; padding: 6px 8px; text-align: center; }

.contador { display: flex; align-items: center; gap: 8px; }
.contador button { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--borda); background: var(--cartao-alta); color: var(--tinta); font-size: 28px; font-weight: 700; }
.contador button.mais { background: linear-gradient(135deg, var(--acento), var(--acento2)); color: #fff; border: none; }
.contador .valor { flex: 1; height: 56px; border-radius: 14px; border: 2px solid var(--acento); background: var(--fundo2); display: flex; align-items: center; justify-content: center; gap: 6px; }
.contador .valor input { width: 100px; border: none; text-align: center; font-size: 28px; font-weight: 800; background: transparent; outline: none; color: var(--tinta); }
.contador .valor span { font-size: 17px; font-weight: 700; color: var(--acento); }

/* ------------------------------------------------------------ etiquetas e situação */
.etiqueta { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.e-ok { background: var(--fundo-sucesso); color: var(--tinta-sucesso); }
.e-conferir { background: var(--fundo-atencao); color: var(--tinta-atencao); }
.e-novo { background: var(--fundo-erro); color: var(--tinta-erro); }
.e-azul { background: var(--fundo-info); color: var(--tinta-info); }
.e-roxo { background: color-mix(in srgb, var(--roxo) 18%, transparent); color: var(--tinta-roxo); }
.e-cinza { background: var(--cartao-alta); color: var(--suave); }

.item { border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); overflow: hidden; }
.item.conferir { background: color-mix(in srgb, var(--atencao) 8%, var(--cartao)); border-color: color-mix(in srgb, var(--atencao) 55%, transparent); }
.item.novo { background: color-mix(in srgb, var(--erro) 8%, var(--cartao)); border-color: color-mix(in srgb, var(--erro) 55%, transparent); }
.item.aberto { border: 2px solid var(--acento); }
.item.cancelado { background: transparent; border-style: dashed; }
.item.cancelado .nome, .item.cancelado .qtd { text-decoration: line-through; color: var(--apagado); }
.item .detalhe { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.original { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--suave); }
.motivo { font-size: 12px; font-weight: 700; color: var(--tinta-atencao); }
.falta { color: var(--tinta-atencao); font-weight: 800; }

.faixa { border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; color: var(--tinta); }
.faixa.alerta { background: var(--fundo-atencao); border: 1px solid var(--atencao); }
.faixa.info { background: var(--cartao); border: 1px solid var(--linha); }
.faixa.sucesso { background: var(--fundo-sucesso); border: 1px solid var(--sucesso); }
.resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resumo div { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.resumo b { font-size: 22px; }
.resumo span { font-size: 12px; color: var(--suave); font-weight: 700; }

.rodape { position: sticky; bottom: 0; background: color-mix(in srgb, var(--fundo2) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha); padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; z-index: 4; }

.historico .evento { display: flex; gap: 12px; padding: 10px 14px; }
.historico .ponto { width: 10px; height: 10px; border-radius: 999px; margin-top: 5px; flex-shrink: 0; background: var(--sucesso); }
.historico .ponto.item_cancelado, .historico .ponto.status_alterado { background: var(--erro); }
.historico .ponto.item_alterado, .historico .ponto.data_alterada, .historico .ponto.item_adicionado { background: var(--info); }
.historico .ponto.impresso { background: var(--apagado); }

.modal { position: fixed; inset: 0; background: var(--veu); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.modal .caixa { background: var(--cartao); border: 1px solid var(--linha); border-radius: 22px; padding: 20px; width: 100%; max-width: 440px; max-height: 92vh; overflow: auto;
  display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sombra); }
.modal h2 { margin: 0; font-size: 20px; }

.aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); background: var(--cartao-alta); color: var(--tinta);
  border: 1px solid var(--borda); padding: 12px 16px; border-radius: 14px; max-width: 92vw; z-index: 30; font-weight: 600; box-shadow: var(--sombra); }
.aviso.erro { background: var(--erro); color: #fff; border-color: transparent; }
.desconectado { background: var(--fundo-atencao); color: var(--tinta-atencao); text-align: center; font-size: 13px; font-weight: 700; padding: 6px; }

/* ------------------------------------------------------------ menu em blocos (como o PDV do KDS) */
.saudacao { display: flex; flex-direction: column; gap: 2px; }
.saudacao h2 { margin: 0; font-size: 24px; }
.grupo-menu { display: flex; flex-direction: column; gap: 10px; }
.grupo-menu > header { display: flex; align-items: baseline; gap: 8px; }
.grupo-menu > header .bolinha { width: 10px; height: 10px; border-radius: 999px; background: var(--cor); box-shadow: 0 0 12px var(--cor); align-self: center; }
.grupo-menu > header b { font-size: 15px; letter-spacing: .02em; }
.grupo-menu > header span { font-size: 12px; color: var(--suave); }
.blocos { display: grid; grid-template-columns: 1fr; gap: 10px; }
.bloco { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 14px; min-height: 76px; border-radius: 20px;
  background: var(--cartao); border: 1px solid var(--linha); color: var(--tinta); text-align: left; transition: border-color .15s, transform .08s; }
.bloco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, var(--cor)); opacity: .13; pointer-events: none; transition: opacity .2s; }
.bloco:hover { border-color: var(--cor); }
.bloco:hover::after { opacity: .28; }
.bloco:active { transform: scale(.98); }
.bloco .emblema { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cor) 85%, #fff), color-mix(in srgb, var(--cor) 80%, #000)); }
.bloco .emblema svg { width: 26px; height: 26px; }
.bloco .meio { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; z-index: 1; }
.bloco .nome { font-size: 17px; font-weight: 700; }

/* ------------------------------------------------------------ extras */
.ponto-status { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--apagado); margin-right: 6px; vertical-align: middle; flex-shrink: 0; }
.ponto-status.on { background: var(--sucesso); box-shadow: 0 0 8px var(--sucesso); }
.barra { height: 12px; border-radius: 999px; background: var(--cartao-alta); overflow: hidden; }
.barra > span { display: block; height: 100%; background: linear-gradient(90deg, var(--acento), var(--acento2)); transition: width .3s; }
.codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 28px; font-weight: 800; letter-spacing: .06em; text-align: center; padding: 14px; background: var(--fundo2); border: 2px dashed var(--acento); border-radius: 16px; word-break: break-all; }
.chave { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; word-break: break-all; padding: 12px; background: var(--fundo2); border: 1px solid var(--borda); border-radius: 12px; user-select: all; }
.preco { width: 120px; height: 44px; font-size: 16px; }
/* Botões lado a lado do mesmo tamanho; o texto quebra em duas linhas em vez de jogar um botão para baixo. */
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--fundo2); border: 1px solid var(--borda); border-radius: 14px; }
.segmentado .chip { border: none; background: transparent; min-width: 0; white-space: normal; line-height: 1.15; padding: 6px 8px; font-size: 15px; }
.segmentado .chip.ativo { background: linear-gradient(135deg, var(--acento), var(--acento2)); }
.interruptor { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--linha); cursor: pointer; }
.interruptor input { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--cartao-alta); border: 1px solid var(--borda); position: relative; flex-shrink: 0; transition: background .2s; cursor: pointer; margin: 0; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; transition: left .2s; }
.interruptor input:checked { background: var(--acento); border-color: transparent; }
.interruptor input:checked::after { left: 21px; }
.interruptor .meio { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.painel { background: var(--cartao); border: 1px solid var(--linha); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.painel > header { display: flex; align-items: center; gap: 12px; }
.painel > header .emblema { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--acento), var(--acento2)); flex-shrink: 0; }
.painel > header .emblema svg { width: 22px; height: 22px; }
.painel > header .meio { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.painel > header b { font-size: 18px; }

/* Tela dos carregadores (celular, PC ou TV do box) */
.kds { display: flex; flex-direction: column; gap: 16px; }
.kds .coluna { display: flex; flex-direction: column; gap: 10px; }
.kds .coluna > h2 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--acento); }
.carga { background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.carga.atrasada { border: 2px solid var(--atencao); background: color-mix(in srgb, var(--atencao) 8%, var(--cartao)); }
.carga .alto { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.carga .pedra { font-size: 26px; font-weight: 900; }
.carga .hora { font-size: 22px; font-weight: 800; color: var(--acento); }
.carga ul { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.5; }

/* Colunas da tela: no celular ficam uma embaixo da outra, com o mesmo espaço entre os blocos. */
.lado-a-lado { display: flex; flex-direction: column; gap: 16px; }
.lado-a-lado > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ------------------------------------------------------------ tablet e computador */
@media (min-width: 640px) {
  .blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 1000px) {
  #app { max-width: 1280px; }
  .corpo { padding: 24px 28px; gap: 20px; }
  .topo { padding: 14px 28px; }
  .rodape { padding: 14px 28px 18px; flex-direction: row; justify-content: flex-end; align-items: center; }
  .rodape > .botao, .rodape > .dois { width: auto; min-width: 340px; }
  .rodape > .dica { margin-right: auto; }
  .divisor { margin: 0; }
  .blocos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bloco { min-height: 96px; padding: 18px; }
  .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Duas colunas: à esquerda escolhe (catálogo, dados), à direita confere (itens, histórico). */
  .lado-a-lado { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .lado-a-lado > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .lado-a-lado > div.fixo { position: sticky; top: 92px; }
  .formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
  .formulario > .inteiro { grid-column: 1 / -1; }
  .kds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .modal .caixa { max-width: 520px; }
}
@media (min-width: 1500px) { .blocos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.larga #app { max-width: none; }

/* ------------------------------------------------------------ impressão */
.so-impressao { display: none; }
#impressao { display: none; }
@media print {
  body, html { background: #fff !important; color: #000; }
  .topo, .rodape, .nao-imprime, .aviso, .desconectado, .modal { display: none !important; }
  .so-impressao { display: block; }
  #app { max-width: none; }
  /* Documento pronto do servidor (pedido, relatório, romaneio): só ele vai para o papel. */
  body.imprimindo #app { display: none !important; }
  body.imprimindo #impressao { display: block; color: #000; }
}
#impressao table.planilha tr { break-inside: avoid; }

@media (max-width: 480px) { .topo [data-a="menuInicial"] { display: none; } .topo .acao { padding: 0 10px; } }
.botao svg { width: 22px; height: 22px; flex-shrink: 0; vertical-align: -5px; }
.linha > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--acento); }

/* ------------------------------------------------------------ 0.5.0 */
.acoes-rodape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 8px; align-items: stretch; }
.acoes-rodape > .botao { min-width: 0; }
.info-pedido { padding: 12px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.info-pedido > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }

/* Lançamento manual: busca e item escolhido em cima, itens logo abaixo, catálogo por último. */
.manual-grade { display: flex; flex-direction: column; gap: 16px; }
.manual-grade > div, .manual-grade > details { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.manual-grade > details { display: block; }
.catalogo { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 12px 14px; }
.catalogo summary { cursor: pointer; list-style-position: inside; }
.item-linha { display: flex; align-items: center; gap: 6px; padding-right: 8px; }
.item-linha .linha { min-height: 54px; padding: 8px 12px; }
.item-linha.ativo { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.item-linha .q { min-width: 74px; font-size: 18px; font-weight: 800; white-space: nowrap; }
.item-linha .q small { font-size: 13px; color: var(--acento); }

/* Fechar pedido: preço por item */
.preco-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome nome" "preco total"; gap: 8px 12px; padding: 12px 14px; align-items: center; }
.preco-linha .meio { grid-area: nome; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preco-linha .campo-preco { grid-area: preco; }
.preco-linha .total-linha { grid-area: total; font-size: 17px; white-space: nowrap; text-align: right; }
.campo-preco { display: flex; align-items: center; gap: 6px; height: 48px; border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo2); padding: 0 12px; max-width: 200px; }
.campo-preco:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }
.campo-preco span { color: var(--suave); font-weight: 700; }
.campo-preco input { border: none; outline: none; background: transparent; color: var(--tinta); font-size: 19px; font-weight: 800; width: 100%; min-width: 0; }

/* Listas editáveis (categorias, unidades): campos em cima, ações embaixo no celular. */
.linha-edicao { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 10px 12px; align-items: center; }
.linha-edicao.categoria { grid-template-columns: minmax(0, 1fr); }
.linha-edicao .entrada { height: 44px; font-size: 16px; }
.linha-edicao .sigla { font-weight: 800; text-align: center; padding: 0 6px; }
.linha-edicao .acoes { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.linha-edicao .acoes .sub { margin-right: auto; }
.imp-opcao { display: flex; align-items: center; gap: 10px; text-align: left; justify-content: flex-start; min-height: 64px; }
.imp-opcao .meio { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.imp-opcao .sub { font-weight: 600; }
@media (min-width: 640px) {
  .linha-edicao { grid-template-columns: 90px minmax(0, 1fr) auto; }
  .linha-edicao.categoria { grid-template-columns: minmax(0, 1fr) auto; }
  .linha-edicao .acoes { grid-column: auto; }
  .preco-linha { grid-template-columns: minmax(0, 1fr) 170px 110px; grid-template-areas: "nome preco total"; }
}
@media (min-width: 1000px) {
  .manual-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "a b" "c b"; gap: 20px 24px; align-items: start; }
  .manual-grade > .ga { grid-area: a; }
  .manual-grade > .gb { grid-area: b; position: sticky; top: 92px; }
  .manual-grade > .gc { grid-area: c; }
  .rodape > .acoes-rodape { width: auto; min-width: 480px; }
}


/* ------------------------------------------------------------ 0.6.0 */
/* Barra de % (separação) */
.progresso { position: relative; height: 22px; border-radius: 999px; background: var(--cartao-alta); overflow: hidden; }
.progresso > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--sucesso), color-mix(in srgb, var(--sucesso) 70%, #fff)); border-radius: 999px; transition: width .35s; }
.progresso > b { position: relative; display: block; text-align: center; font-size: 13px; line-height: 22px; color: var(--tinta); }
.progresso.grande { height: 34px; }
.progresso.grande > b { font-size: 17px; line-height: 34px; }

/* Separação item a item: tocar risca */
.sep-lista { display: flex; flex-direction: column; }
.sep-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding-right: 8px; border-top: 1px solid var(--linha); }
.sep-item:first-child { border-top: none; }
.sep-toque { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; background: transparent; border: none; text-align: left; color: inherit; width: 100%; }
.sep-toque .marca { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--borda); display: grid; place-items: center; font-weight: 900; font-size: 18px; flex-shrink: 0; }
.sep-toque .q { min-width: 70px; font-size: 20px; font-weight: 800; white-space: nowrap; }
.sep-toque .q small { font-size: 13px; color: var(--acento); }
.sep-toque .meio { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sep-toque .nome { font-size: 17px; font-weight: 700; }
.sep-item.separado { background: color-mix(in srgb, var(--sucesso) 10%, transparent); }
.sep-item.separado .marca { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.sep-item.separado .nome, .sep-item.separado .q { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--suave); }
.sep-item.faltou { background: color-mix(in srgb, var(--erro) 10%, transparent); }
.sep-item.faltou .marca { background: var(--erro); border-color: var(--erro); color: #fff; }
.sep-item.faltou .nome, .sep-item.faltou .q { text-decoration: line-through; color: var(--suave); }
.sep-item.parcial { background: color-mix(in srgb, var(--atencao) 12%, transparent); }
.sep-item.parcial .marca { background: var(--atencao); border-color: var(--atencao); color: #fff; }
.sep-opcoes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }

/* KDS de pedidos (TV) */
.abas-tv { display: flex; gap: 8px; }
.kds-pedidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.kds-pedido { background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.kds-pedido.separado { border: 2px solid var(--sucesso); }
.kds-pedido.separando { border: 2px solid var(--info); }
.kds-pedido .alto { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kds-pedido .cli { font-size: 24px; font-weight: 900; }
.kds-pedido .sep-toque { min-height: 52px; }
.kds-pedido .sep-toque .nome { font-size: 18px; }

/* Números de resumo (relatórios e análises) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.tiles > div { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tiles span { font-size: 12px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.tiles b { font-size: 22px; font-variant-numeric: tabular-nums; }
.tiles .destaque { border: 2px solid var(--acento); }

.linha-pedido { display: flex; align-items: center; gap: 6px; padding-right: 10px; }
.linha-pedido.pago { background: color-mix(in srgb, var(--sucesso) 7%, transparent); }
.linha-pedido .linha b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pago-check { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--suave); min-width: 64px; cursor: pointer; }
.pago-check input { width: 26px; height: 26px; accent-color: var(--sucesso); cursor: pointer; }

/* Gráficos: barras finas, ponta arredondada, valor em texto (não na cor) */
.barras-h { display: flex; flex-direction: column; gap: 6px; }
.barra-h { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.barra-h .rot, .barra-dupla .rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h .trilho { height: 14px; border-radius: 0 4px 4px 0; background: var(--trilho); overflow: hidden; }
.barra-h .trilho > span { display: block; height: 100%; background: var(--serie1); border-radius: 0 4px 4px 0; min-width: 2px; }
.barra-h .val, .barra-dupla .val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; font-size: 13px; text-align: right; }
.barra-h:hover .trilho > span { filter: brightness(1.15); }
.colunas { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; align-items: end; height: 190px; padding-top: 6px; }
.coluna-v { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; gap: 4px; text-align: center; min-width: 0; }
.coluna-v .trilho { display: flex; align-items: flex-end; justify-content: center; }
.coluna-v .trilho > span { display: block; width: min(34px, 80%); background: var(--serie1); border-radius: 4px 4px 0 0; min-height: 2px; }
.coluna-v .val { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.coluna-v .rot { font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coluna-v:hover .trilho > span { filter: brightness(1.15); }
.legenda { display: flex; gap: 14px; font-size: 13px; color: var(--suave); }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legenda i.s1, .barra-dupla .s1 { background: var(--serie1); }
.legenda i.s2, .barra-dupla .s2 { background: var(--serie2); }
.barras-duplas { display: flex; flex-direction: column; gap: 8px; }
.barra-dupla { display: grid; grid-template-columns: minmax(90px, 36%) minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.barra-dupla .trilhos { display: flex; flex-direction: column; gap: 2px; }
.barra-dupla .t { height: 9px; background: var(--trilho); border-radius: 0 4px 4px 0; overflow: hidden; }
.barra-dupla .t > span { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.barra-dupla .val { line-height: 1.1; font-size: 12px; }
.top-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; font-size: 13px; }
.top-dias ol { margin: 4px 0 0; padding-left: 18px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); border-bottom: 1px solid var(--borda); padding: 6px 8px; position: sticky; top: 0; background: var(--cartao); }
.tabela td { border-bottom: 1px solid var(--linha); padding: 6px 8px; vertical-align: top; }
.tabela td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grade-analise { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.filtros-analise { gap: 10px; }

/* Balança */
.peso-entrada { height: 68px; font-size: 34px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.peso-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; padding: 4px 0; }
.peso-linha b { font-variant-numeric: tabular-nums; }
.peso-liquido { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 0; border-top: 2px solid var(--borda); border-bottom: 2px solid var(--borda); }
.peso-liquido span { font-weight: 800; color: var(--acento); }
.peso-liquido b { font-size: 34px; font-variant-numeric: tabular-nums; }
.peso-liquido.erro b { color: var(--erro); }
.botoes-bloqueados { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.interruptor .chip { margin-left: auto; }
@media (min-width: 1000px) {
  .grade-analise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ 0.7.0 · pedidos finalizados no fim, compactos */
.finalizados { gap: 8px; }
.finalizado-linha { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; min-height: 52px;
  background: color-mix(in srgb, var(--sucesso) 8%, var(--cartao)); border: 1px solid color-mix(in srgb, var(--sucesso) 35%, var(--linha));
  border-radius: 14px; color: inherit; font: inherit; cursor: pointer; opacity: .85; }
.finalizado-linha:hover { opacity: 1; }
.finalizado-linha .ok { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sucesso); color: #fff; font-weight: 900; }
.finalizado-linha .meio { flex: 1 0 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finalizado-linha > .sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finalizado-linha.aberto { opacity: 1; border-radius: 14px 14px 0 0; }
.kds-finalizados { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 8px; align-items: start; }
.kds-finalizados .finalizado-linha { font-size: 18px; }
.kds-finalizados .finalizado-linha > .etiqueta { display: none; }
.kds-aberto { display: flex; flex-direction: column; }
.kds-aberto .kds-pedido { border-radius: 0 0 18px 18px; border-top: 0; }
@media (max-width: 520px) {
  .finalizado-linha { flex-wrap: wrap; row-gap: 2px; }
  .finalizado-linha > .sub { order: 3; width: 100%; padding-left: 38px; white-space: normal; }
  .finalizado-linha > .etiqueta { display: none; }
}

/* ------------------------------------------------------------ o que falta preencher */
.botao.incompleto { filter: saturate(.55); opacity: .8; }
.modal.modal-faltas { z-index: 30; }
.caixa.faltas { border-color: color-mix(in srgb, var(--atencao) 55%, var(--linha)); text-align: left; }
.caixa.faltas .faltas-icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 900;
  color: #fff; background: var(--atencao); animation: faltas-entra .35s ease-out; }
.caixa.faltas ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }
@keyframes faltas-entra { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.piscar-falta { animation: piscar-falta 0.8s ease-in-out 3; border-radius: 14px; }
@keyframes piscar-falta {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px var(--atencao); }
}
@media (prefers-reduced-motion: reduce) { .piscar-falta { animation: none; outline: 3px solid var(--atencao); } .caixa.faltas .faltas-icone { animation: none; } }

/* ------------------------------------------------------------ quem separa cada pedido */
.sep-cartao { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.sep-cartao > .linha { padding: 14px 16px; background: none; border: 0; border-radius: 0; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.sep-cartao-acao { display: flex; justify-content: flex-end; padding: 0 12px 12px; }
.sep-cartao-acao .botao { width: 100%; }
.sep-cartao.de-todos { border-style: dashed; }
.faixa.quem-separa { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left; }
.faixa.quem-separa .meio { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.faixa.quem-separa .botao { width: auto; }
.kds-pedido .alto .quem { color: var(--acento); }

/* ------------------------------------------------------------ janelas de aviso (erro, atenção, confirmar) */
.modal.modal-topo { z-index: 40; }
.modal.modal-topo.alerta { z-index: 45; }
.caixa.janela-aviso { text-align: center; align-items: center; gap: 12px; animation: janela-entra .22s ease-out; }
.caixa.janela-aviso h2 { margin: 0; }
.caixa.janela-aviso p { margin: 0; line-height: 1.45; color: var(--suave); }
.caixa.janela-aviso .dois, .caixa.janela-aviso > .botao { width: 100%; }
.janela-icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 900; color: #fff; }
.janela-aviso.erro { border-color: color-mix(in srgb, var(--erro) 50%, var(--linha)); }
.janela-aviso.erro .janela-icone { background: var(--erro); }
.janela-aviso.atencao .janela-icone, .janela-aviso.perigo .janela-icone { background: var(--atencao); }
.janela-aviso.perigo { border-color: color-mix(in srgb, var(--atencao) 50%, var(--linha)); }
.janela-aviso.pergunta .janela-icone { background: var(--info); }
@keyframes janela-entra { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .caixa.janela-aviso { animation: none; } }

/* ------------------------------------------------------------ telas divididas em seções */
.corpo.estreito { max-width: 760px; margin-inline: auto; width: 100%; }
.lista-cfg { display: grid; gap: 10px; }
.lista-cfg .linha { min-height: 72px; }
.lista-cfg .emblema { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--acento), var(--acento2)); flex: none; }
.lista-cfg .emblema svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .lista-cfg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.segmentado.abas { margin-bottom: 4px; }
.lista-cfg .cartao.linha { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 12px 16px; gap: 14px; }

/* ------------------------------------------------------------ cartão do item onde a pessoa tocou + resumo antes de salvar */
.lista > .cartao-item, .item-linha + .cartao-item { margin: -2px 0 6px; border: 2px solid var(--acento); border-top-width: 2px; border-radius: 0 0 16px 16px; }
.linha.ativo + .cartao-item { border-top: 0; }
.cartao-item .dois + .botao.perigo { margin-top: 2px; }
.resumo-salvar { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.resumo-salvar dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.resumo-salvar dt { color: var(--suave); }
.resumo-salvar dd { margin: 0; font-weight: 700; }
.resumo-itens { margin: 0; padding: 10px 12px; list-style: none; display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--acento) 6%, transparent); border-radius: 12px; }
.lista > .linha.ativo { background: color-mix(in srgb, var(--acento) 12%, transparent); border-radius: 16px 16px 0 0; }

/* Menu inicial no celular: grade de 2 colunas, só ícone e nome (a explicação aparece do tablet para cima).
   Corta a tela do dono de ~2.800 px para menos da metade no iPhone. */
@media (max-width: 639px) {
  .grupo-menu .blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .grupo-menu .bloco { gap: 10px; padding: 10px; min-height: 58px; border-radius: 14px; }
  .grupo-menu .bloco .emblema { width: 34px; height: 34px; border-radius: 10px; }
  .grupo-menu .bloco .emblema svg { width: 19px; height: 19px; }
  .grupo-menu .bloco .nome { font-size: 14px; line-height: 1.2; }
  .grupo-menu .bloco .sub { display: none; }
  .grupo-menu > header span { display: none; }
  .grupo-menu { gap: 8px; }
}
.chip.mini { min-height: 34px; padding: 0 12px; font-size: 13px; }
.chips.rola { padding-bottom: 2px; scrollbar-width: none; }
.chips.rola::-webkit-scrollbar { display: none; }
.chips.rola > .chip { flex-shrink: 0; }
details.mudar-data > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
details.mudar-data > summary::-webkit-details-marker { display: none; }
.aviso.com-acao { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; }
.aviso.com-acao[hidden] { display: none; }
.aviso-desfazer { background: var(--acento); color: #fff; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 800; font: inherit; font-weight: 800; cursor: pointer; min-height: 40px; }

/* Menu inicial de cada pessoa (tela do desenvolvedor) e o "Mais opções" discreto no fim do menu. */
.menu-item .etiqueta { background: var(--fundo-sucesso); color: var(--tinta-sucesso); }
.menu-item.escondido .etiqueta { background: var(--cartao-alta); color: var(--suave); }
.menu-item.escondido .nome, .menu-item.escondido .sub { opacity: .5; text-decoration: line-through; }
.mais-opcoes { background: none; border: 0; color: var(--suave); font: inherit; font-size: 14px; text-decoration: underline; padding: 14px; margin: 6px auto 0; display: block; cursor: pointer; min-height: 44px; }

/* Sem zoom por toque duplo (o toque responde na hora) e, no app instalado na tela de início,
   sem zoom de pinça: a tela fica sempre do tamanho certo, como um aplicativo. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, textarea, select { font-size: max(16px, 1em); }
.entrada.sigla { font-size: 16px; }

.senha-gerada { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 34px; font-weight: 800; letter-spacing: 4px; text-align: center;
  padding: 16px; margin: 6px 0 12px; border-radius: 14px; background: var(--fundo2); border: 1px dashed var(--borda); user-select: all; }
a.botao { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }