/* =====================================================================================
   v2.6 (Pedro, 28/10/2026): passada de qualidade medida. Linkado POR ÚLTIMO nas 4 telas.
   R16 (texto mínimo, Esgotado, um h1), foco visível, alvos de 48 px e CLS do cliente.
   Só HTML e CSS: nenhum arquivo de js/ nem config.js foi tocado. Sem filtro, sem gradiente,
   sem mix-blend-mode, sem sombra de texto, sem cor fora da paleta.
   ===================================================================================== */

/* ---------- h1 só para leitor de tela (a tela do cliente não tinha h1) ---------- */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 1. texto: nenhum rótulo visível abaixo de 14 px, piso de 13 px ---------- */
:root,body,body:has(.topo-in){--fs-micro:.875rem}
.rot{font-size:var(--fs-micro)}

/* ---------- 2. foco visível: anel de 3 px, contraste mínimo 3:1 em qualquer fundo ---------- */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[role="tab"]:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--c-ambar-texto);outline-offset:3px}
/* regiões escuras (topo e barra de comanda): anel ouro-claro */
.topo button:focus-visible,.topo a:focus-visible,.topo input:focus-visible,.barra button:focus-visible,.barra a:focus-visible{outline-color:var(--c-ouro-claro)}
.topo .busca input:focus-visible,.barra-comanda:focus-visible{outline:3px solid var(--c-ouro-claro);outline-offset:2px}
/* campo de busca do balcão fica sobre fundo claro: o anel claro do topo não valia ali */
#campoBuscaItem:focus-visible{outline:3px solid var(--c-ambar-texto);outline-offset:2px}
/* observação do detalhe tirava o anel (outline:none) */
.detalhe-obs:focus,.detalhe-obs:focus-visible{outline:3px solid var(--c-ambar-texto);outline-offset:2px}
.item-abrir:focus-visible{outline:3px solid var(--c-ambar-texto);outline-offset:-3px}
.detalhe-fechar:focus-visible,.detalhe .qtd button:focus-visible,.detalhe-add:focus-visible,.extrato-mes:focus-visible,.extrato-pdf:focus-visible,.extrato-fechar:focus-visible,.extrato-botao:focus-visible{outline-width:3px}

/* ---------- 3. alvos de toque: mínimo 48 x 48 px em todo controle (só min-*: nunca encolhe um controle que já era maior, ex.: .btn-fechar 56) ---------- */
.add,.item .add{min-height:48px}
.step{min-height:48px}
.step button{min-width:48px;min-height:48px}
.opcoes button{min-height:48px}
.obs{min-height:48px}
.btn-topo{min-height:48px}
.busca input{min-height:48px}
.indice a{min-height:48px}
.detalhe-cab{min-height:48px}
.detalhe-fechar{min-width:48px;min-height:48px}
.btn-texto{min-height:48px}
/* .btn-fechar e .btn-acao ficam como estavam: claro.css e equipe25.css já dão 56 px, e um min-height de 48 aqui os encolheria */
.extrato-mes{min-height:48px}
.extrato-pdf,.extrato-fechar{min-height:48px}
.link-demo{min-height:48px;min-width:48px}
.cat{scroll-margin-top:124px}

/* ---------- 4. CLS do cliente em tela larga: o rodapé (dentro do main) nascia na primeira dobra, com o
   main ainda vazio, e era empurrado para o fim da página quando o js montava o cardápio (0,84 de CLS).
   Ele só aparece quando já existe categoria (ou erro, ou busca sem resultado); o espaço continua reservado ---------- */
.rodape-pg{visibility:hidden}
main:has(.cat,#p-erro:not([hidden]),#busca-vazio:not([hidden])) .rodape-pg{visibility:visible}

/* ---------- 5. logos com width/height no HTML: a largura continua vindo da altura ---------- */
.marca img,.rodape-pg img{width:auto}

/* ---------- 6. texto de controle: 14 px em vez de 13 px (piso 13, ideal 14) ---------- */
.aba,.add,.item .add,.barra .btn-claro,.extrato-pdf,.extrato-fechar,.barra.on .barra-comanda .rot,.rodape-pg .logo-frase,.detalhe-add{font-size:.875rem}
td .hora{font-size:.875rem}

/* ---------- 7. CLS residual do cliente: a barra de rolagem entrava quando a página crescia (largura muda)
   e a faixa de categorias nascia escondida e empurrava o main. Reserva os dois, sem js ---------- */
html{scrollbar-gutter:stable}
.indice[hidden]{display:flex!important;visibility:hidden}
.indice[hidden]::before{content:"";flex:none;min-height:48px}

/* ---------- 8. fechar comanda no balcão (v2.6): <dialog> nativo no mesmo desenho do diálogo do painel.
   Só marcação e CSS: o js (lote 7) abre com showModal(), preenche #fechar-total e lê o value do rádio marcado ---------- */
dialog.dialogo{position:fixed;inset:auto 0 0 0;margin:0 auto;border:0;border-top:2px solid var(--c-ambar);color:var(--c-grafite);max-height:90vh;overflow:auto}
dialog.dialogo:not([open]){display:none}
dialog.dialogo::backdrop{background:rgb(31 29 27 / .5)}
@media (min-width:640px){
  dialog.dialogo{inset:0;margin:auto;height:fit-content;border:1px solid var(--c-linha);border-top:2px solid var(--c-ambar);border-radius:var(--r-card)}
}
.dlg-fechar #fechar-forma-rot{display:block;margin:var(--sp-4) 0 var(--sp-2);font-size:1rem;font-weight:600;color:var(--c-grafite)}
.dlg-fechar #fechar-total{font-size:1.75rem;line-height:1;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
#fechar-forma{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.forma{position:relative;display:flex;align-items:center;min-height:56px;font-size:1.0625rem;font-weight:600;color:var(--c-grafite)}
.forma input{appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;border:1.5px solid var(--c-grafite);border-radius:var(--r-1);background:var(--c-cartao);cursor:pointer}
.forma input::before{content:"";position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;border:2px solid var(--c-grafite);border-radius:50%;background:var(--c-cartao)}
.forma input:checked{border-width:3px}
.forma input:checked::before{background:var(--c-grafite);box-shadow:inset 0 0 0 4px var(--c-cartao)}
.forma input:focus-visible{outline:3px solid var(--c-ambar-texto);outline-offset:3px}
.forma span{position:relative;pointer-events:none;padding-left:52px}
.dlg-fechar #fechar-erro{margin:var(--sp-3) 0 0;font-weight:600}
.dlg-fechar #fechar-erro:empty{display:none}