/* ===================================================================
   VeyronERP — modo Gestão: menu lateral + área de conteúdo
   =================================================================== */
.app-gestao{display:flex;min-height:100vh}
.lado{width:var(--lado-largura);flex:none;background:var(--bg-alt);border-right:1px solid var(--borda);display:flex;flex-direction:column;
  padding:14px 0 12px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:60}
.lado .marca{display:block;padding:2px 0 12px;margin:0 14px 8px;border-bottom:1px solid var(--gold-dark);cursor:pointer;text-decoration:none}
.lado .empresa-atual{margin:0 14px 10px;padding:8px 10px;text-align:center;font-size:.68rem;color:var(--mudo);background:var(--cartao);border:1px solid var(--borda);border-radius:8px}
.lado .empresa-atual b{display:block;color:var(--gold-texto);font-size:.8rem;letter-spacing:.03em}
.lado nav{flex:1}
.lado .grupo-menu{margin:6px 0 2px;padding:0 18px;font-size:.62rem;color:var(--apagado);text-transform:uppercase;letter-spacing:.1em}
.lado .item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 18px;font-size:.83rem;color:var(--mudo);background:none;border:0;
  border-left:3px solid transparent;cursor:pointer;font-family:inherit;text-align:left;user-select:none;text-decoration:none}
.lado .item:hover{background:var(--cartao-hover);color:var(--texto)}
.lado .item.ativo{background:var(--cartao-hover);color:var(--gold-texto);border-left-color:var(--gold)}   /* K.16: no claro o dourado sumia no creme (--gold-texto: 4,5:1+) */
.lado .item .ico{width:18px;height:18px;flex:none;opacity:.9}
.lado .item .selo{margin-left:auto}
.lado .item.breve{opacity:.55;cursor:not-allowed}
/* K.16 (aprovada pelo dono): "Hoje" com os fixados; os grupos recolhidos (cabecalho com nome, quantidade e seta); o alfinete */
.lado .cab-menu{display:flex;align-items:center;gap:8px;width:100%;margin-top:4px;padding:9px 14px 9px 18px;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:.66rem;color:var(--mudo);text-transform:uppercase;letter-spacing:.1em;text-align:left;min-height:40px}
.lado .cab-menu:hover{color:var(--texto);background:var(--cartao)}
.lado .cab-menu .ico{width:12px;height:12px;margin-left:auto;transition:transform .15s;opacity:.7;flex:none}
.lado .cab-menu[aria-expanded="true"]{color:var(--texto)}
.lado .cab-menu[aria-expanded="true"] .ico{transform:rotate(90deg)}
.lado .cab-menu .qtd{font-size:.62rem;color:var(--apagado);letter-spacing:0}
.lado .cab-menu.tem-ativo{color:var(--gold-texto)}
.lado .sub-menu[hidden]{display:none}
.lado .sub-menu .item{padding-left:26px}
.lado .linha-menu{position:relative}
.lado .linha-menu .item{padding-right:40px}
.lado .fixar{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:6px;color:var(--apagado);opacity:.45;cursor:pointer}
.lado .fixar .ico{width:15px;height:15px}
.lado .linha-menu:hover .fixar{opacity:1}
.lado .fixar:hover{color:var(--gold-2);background:var(--cartao)}
.lado .fixar.on{color:var(--gold);opacity:1}
[data-tema="claro"] .lado .fixar.on{color:var(--gold-texto)}
@media (pointer:coarse){ .lado .fixar{width:44px;height:44px;right:2px;opacity:.7} .lado .linha-menu .item{padding-right:48px;min-height:44px} .lado .cab-menu{min-height:48px} }
.lado .rodape-lado{padding:10px 14px 0;border-top:1px solid var(--borda);margin-top:8px;display:flex;flex-direction:column;gap:6px}
.lado .usuario{display:flex;align-items:center;gap:8px;font-size:var(--fs-2)}
.lado .usuario .avatar{width:30px;height:30px;border-radius:50%;background:var(--gold-dark);color:#1a1408;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;flex:none}
.lado .usuario b{display:block;font-size:.78rem;line-height:1.2}
.lado .usuario small{display:block;font-size:.64rem}

.area{flex:1;min-width:0;display:flex;flex-direction:column}
.area > .topo{height:var(--topo-altura);display:flex;align-items:center;gap:var(--e-3);padding:0 var(--e-5);border-bottom:1px solid var(--borda);
  background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(6px);position:sticky;top:0;z-index:50}
.area > .topo .titulo{font-family:var(--serif);font-weight:500;font-size:var(--fs-4);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area > .topo .busca-global{width:260px}
.area > .conteudo{flex:1;min-width:0}
.btn-modo{background:var(--gold);color:#1a1408;border-color:var(--gold);font-weight:600}
.btn-modo:hover{background:var(--gold-2);border-color:var(--gold-2)}
.btn-menu{display:none}
.faixa-sub{background:var(--cartao-2)}   /* a linha de subtitulo dentro de tabela ("Bordas" na tabela de precos das pizzas) */
.lado .fechar-gaveta{display:none}

/* hubs: cartões grandes com imagem, usados no dashboard e nas páginas-índice */
.hubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--e-3)}
.hub{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-3);background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-3);
  cursor:pointer;text-decoration:none;color:inherit;transition:border-color .15s,transform .08s}
.hub:hover{border-color:var(--gold-dark);transform:translateY(-1px)}
.hub.breve{opacity:.55;cursor:not-allowed}
.hub .img-tile{width:52px;height:52px}   /* 3.1: a mesma moldura dos indicadores, em escala */
.hub b{display:block;font-size:var(--fs-3)}
.hub small{display:block;line-height:1.3}

@media (max-width:900px){
  .lado{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .18s;box-shadow:10px 0 40px var(--sombra-cor)}
  .lado.aberto{transform:none}
  .btn-menu{display:inline-flex}
  .area > .topo .busca-global{display:none}
}

/* editor de combo (ficha do produto) */
.combo-etapa{border:1px solid var(--borda);border-radius:var(--r-2);padding:10px;margin:8px 0;background:var(--cartao)}
.combo-opcoes{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.combo-op{display:flex;align-items:center;gap:8px;padding:4px 6px;border:1px solid var(--borda);border-radius:var(--r-2)}
.sub-cabeca{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:12px 0 4px}

/* reajuste em massa (Gestão → Pizzas → 5) */
.reaj-barra{padding:10px 12px;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao)}
.campo.destaque{border-color:var(--gold);box-shadow:0 0 0 2px rgba(191,155,74,.18)}

/* ===== links e QR (Gestão → Links e QR) ===== */
.link-qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e-3);align-items:start}
.qr-caixa{background:#fff;padding:8px;border-radius:8px;line-height:0}
.qr-lado{display:flex;flex-direction:column;gap:6px;min-width:0}
.qr-acoes{display:flex;gap:6px;flex-wrap:wrap}
.link-qr code{word-break:break-all}
@media (max-width:760px){ .link-qr{grid-template-columns:1fr} }
/* 1.66: no celular o titulo da Gestao cabe — o mapa de atalhos sai no toque e o "Operacao" fica so com o icone */
@media (pointer:coarse){ .area > .topo [data-acao="mapa"]{display:none} }
@media (max-width:560px){
  .area > .topo .btn-modo{font-size:0;gap:0;padding:0 10px;min-width:48px}
  .area > .topo .btn-modo .ico{font-size:initial}
}
/* K.2c: a escala da equipe — grade semana x pessoa; toque >= 48 px; estado com icone + palavra */
.escala-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.escala-barra .btn{min-height:48px}
.escala-periodo{font-size:var(--fs-4);min-width:120px;text-align:center}
.escala-turnos{display:inline-flex;gap:4px;margin-left:auto}
.escala-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 12px}
.escala-grade{display:grid;gap:4px;overflow-x:auto;padding-bottom:4px}
.escala-lin{display:grid;grid-template-columns:minmax(120px,1.4fr) repeat(7,minmax(64px,1fr));gap:4px;align-items:stretch}
.escala-dia{text-align:center;font-size:var(--fs-2);color:var(--mudo);padding:4px 0;text-transform:capitalize}
.escala-dia.hoje{color:var(--gold-texto);font-weight:700}
.escala-nome{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 4px}
.escala-nome b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.escala-cel{min-height:52px;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao);color:var(--texto);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;font-size:var(--fs-2);cursor:pointer;padding:2px}
.escala-cel.ok{border-color:var(--ok);background:var(--ok-fundo);color:var(--ok-texto)}
.escala-cel.erro{border-color:var(--erro);background:var(--erro-fundo);color:var(--erro-texto)}
.escala-cel.aviso{border-color:var(--aviso);background:var(--aviso-fundo);color:var(--aviso-texto)}
.escala-cel.info{border-color:var(--info);background:var(--info-fundo);color:var(--info-texto)}
.escala-cel.futuro{opacity:.45;cursor:default}
.escala-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.escala-op{min-height:56px;justify-content:flex-start}
.escala-rodape{margin-top:12px;font-size:var(--fs-2)}
/* K.2d-1: o fechamento do rateio (a previa) */
.rateio .rolagem-x{overflow-x:auto}
.rateio .aviso-caixa.erro{border-color:var(--erro);background:var(--erro-fundo)}
.rateio [data-previa]{margin:4px 0 12px}
.rateio-bolo td.num,.rateio-pessoas .num{text-align:right;white-space:nowrap}
.rateio-bolo tr.total td{border-top:1px solid var(--borda-forte);font-size:var(--fs-4)}
.rateio-pessoas td small{display:block}
.rateio-confere{display:flex;align-items:center;gap:6px;font-weight:600}
.rateio-confere.ok{color:var(--ok-texto)}
.rateio-confere.erro{color:var(--erro-texto)}
.rateio .aviso-caixa.rateio-aprovado{border-color:var(--ok);background:var(--ok-fundo)}
.rateio-ajustes{margin:6px 0 0;padding-left:18px}
.btn.pequeno.rateio-ajustar{min-height:44px}   /* K.6 (B8): a classe propria perdia para .btn.pequeno (32 px) */
@media (pointer:coarse){ .btn.pequeno.rateio-ajustar{min-height:48px} }
.rateio-sem-marca{margin-top:6px;color:var(--aviso-texto)}
/* F.3: o painel fiscal — o quadro "vai na nota" da ficha do produto e a lista do contador */
.trib-efetiva{grid-column:1/-1;margin-top:var(--e-2);padding:var(--e-3);border:1px solid var(--borda-forte);border-radius:var(--r-2);background:var(--cartao)}
.trib-titulo{display:flex;flex-wrap:wrap;gap:var(--e-2);align-items:center;margin-bottom:var(--e-2)}
.trib-valores{display:flex;flex-wrap:wrap;gap:var(--e-4)}
.trib-valores span{display:flex;flex-direction:column;min-width:64px}
.trib-valores small{font-size:var(--fs-1);color:var(--mudo);text-transform:uppercase;letter-spacing:.04em}
.trib-valores b{font-size:var(--fs-4);font-variant-numeric:tabular-nums}
.trib-ncm{margin-top:var(--e-2)}
.trib-avisos{margin:var(--e-2) 0 0;padding-left:18px;font-size:var(--fs-2);color:var(--aviso-texto)}
.trib-avisos li+li{margin-top:2px}
.trib-efetiva .ajuda{margin-top:var(--e-2)}
.trib-pers{color:var(--aviso-texto)}
.painel-fiscal .filtros{flex-wrap:wrap;gap:var(--e-2);align-items:center}
.painel-fiscal .filtros .espaco{flex:1}
.painel-fiscal input.marca{width:22px;height:22px;cursor:pointer}
@media (pointer:coarse){ .painel-fiscal input.marca{width:28px;height:28px} }
.painel-fiscal .trib-avisos{max-width:360px}
/* F.5: as tabelas oficiais vigiadas (IBPT e paginas) */
.painel-fiscal [data-tabelas] .lista-simples{list-style:none;margin:var(--e-2) 0 0;padding:0;display:grid;gap:var(--e-2)}
.painel-fiscal [data-tabelas] .lista-simples li{line-height:1.6;overflow-wrap:anywhere}
@media (pointer:coarse){.painel-fiscal [data-conferir]{min-height:44px}}

/* ===== K.17 (aprovada pelo dono, 29/09): o Inicio estilo BI — tema do sistema, sans com numeros tabulares, icones de linha de uma
   cor, dourado so em destaque, verde/vermelho so em variacao e alerta, grade de 12 colunas ===== */
.pagina.bi{font-family:var(--sans);font-variant-numeric:tabular-nums;max-width:1480px}
.bi .ico{width:16px;height:16px;flex:none}
.bi-titulo{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bi-titulo h1{font-family:var(--sans);font-size:1.45rem;font-weight:600;margin:0}
.bi-titulo .sub{color:var(--mudo);font-size:.88rem;margin-top:2px}
.bi-atual{display:inline-flex;align-items:center;gap:6px;color:var(--mudo);font-size:.82rem}
.bi-atual i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.bi-filtros{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:8px 12px}
.bi-seg{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--bg-alt)}
.bi-seg button{border:0;background:none;color:var(--mudo);font:inherit;font-size:.9rem;padding:7px 14px;border-radius:6px;cursor:pointer;min-height:36px}
.bi-seg button[aria-pressed="true"]{background:var(--cartao-hover);color:var(--gold-texto);font-weight:600}
.bi-seg button:focus-visible,.bi-bloco:focus-visible{outline:2px solid var(--gold-texto);outline-offset:2px}
.bi-sel{display:inline-flex;align-items:center;gap:6px;color:var(--mudo);font-size:.9rem}
.bi-sel .campo{min-height:36px;padding-top:4px;padding-bottom:4px;width:auto;min-width:130px}
.bi-comparando{margin-left:auto;color:var(--mudo);font-size:.8rem}
.bi-pend{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bi-pend a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--borda);background:var(--aviso-fundo);color:var(--texto);font-size:.82rem;text-decoration:none}
.bi-pend a .ico{color:var(--aviso-texto);width:14px;height:14px}
.bi-pend a u{color:var(--gold-texto);text-decoration:none;font-weight:600}
.bi-sec{margin:18px 0 8px;font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mudo)}
.bi-grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.bi-grade>.c2{grid-column:span 2}.bi-grade>.c3{grid-column:span 3}.bi-grade>.c4{grid-column:span 4}.bi-grade>.c8{grid-column:span 8}
.bi-bloco{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:14px 16px;cursor:pointer;min-width:0;transition:border-color .15s}
.bi-bloco:hover{border-color:var(--borda-forte)}
.bi-kpi-rot{display:flex;align-items:center;gap:6px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mudo)}
.bi-kpi-rot .ico{width:14px;height:14px}
.bi-num{font-size:1.75rem;font-weight:600;line-height:1.15;margin:6px 0 2px;color:var(--texto);white-space:nowrap}
.bi-num small{font-size:.85rem;font-weight:400;color:var(--mudo)}
.bi-kpi-sub,.bi-duplo small{font-size:.8rem;color:var(--mudo)}
.bi-duplo small{display:block;white-space:nowrap;font-size:.76rem}
.bi-duplo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bi-duplo .bi-num{font-size:1.45rem}
.bi-var{font-weight:600;color:var(--mudo)}.bi-var.sobe{color:var(--ok-texto)}.bi-var.desce{color:var(--erro-texto)}
.bi-mini{display:block;width:100%;height:34px;margin-top:8px}
.bi-mini .traco{fill:none;stroke:var(--gold);stroke-width:1.6;vector-effect:non-scaling-stroke}
.bi-mini .area{fill:var(--gold);opacity:.14}
.bi-cab{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.bi-cab h3{margin:0;font-family:var(--sans);font-size:1rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--texto)}
.bi-cab>.ico{color:var(--mudo);width:18px;height:18px}
.bi-cab-dir{margin-left:auto;font-size:.8rem;color:var(--mudo);display:inline-flex;align-items:center;gap:6px;text-align:right}
.bi-leg-barra{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--gold)}
.bi-leg-linha{display:inline-block;width:14px;border-top:2px dashed var(--mudo);margin-left:8px}
.bi-barras{display:block;width:100%;height:auto}
.bi-barras .barra{fill:var(--gold)}.bi-barras .barra.agora{fill:var(--gold-dark);opacity:.55}
.bi-barras .grade{stroke:var(--borda);stroke-width:1}
.bi-barras .eixo{fill:var(--mudo);font-size:11px;font-family:var(--sans)}.bi-barras .eixo.agora{fill:var(--gold-texto)}
.bi-barras .media{fill:none;stroke:var(--mudo);stroke-width:1.5;stroke-dasharray:4 4}
.bi-barras .media-ponto{fill:var(--mudo)}
.bi-canal{margin:12px 0}
.bi-canal .num{color:var(--mudo);font-size:.88rem}
.bi-trilho{height:6px;border-radius:3px;background:var(--cartao-hover);margin-top:6px;overflow:hidden}
.bi-trilho i{display:block;height:100%;border-radius:3px;background:var(--apagado)}
.bi-canal.primeiro .bi-trilho i,.bi-mv.primeiro .bi-trilho i{background:var(--gold)}
.bi-ests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.bi-est b{display:block;font-size:1.4rem;font-weight:600;white-space:nowrap}
.bi-est b.erro{color:var(--erro-texto)}
.bi-est small{color:var(--mudo);font-size:.78rem}
.bi-vivo-pe{border-top:1px solid var(--borda);margin-top:12px;padding-top:10px;font-size:.85rem}
.bi-selo{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:600}
.bi-selo .ico{width:13px;height:13px}
.bi-selo.verde{color:var(--ok-texto);background:var(--ok-fundo)}.bi-selo.ambar{color:var(--aviso-texto);background:var(--aviso-fundo)}.bi-selo.vermelho{color:var(--erro-texto);background:var(--erro-fundo)}
.bi-ok{color:var(--ok-texto)}.bi-alerta{color:var(--erro-texto)}
.bi-mv{margin:9px 0}.bi-mv small{color:var(--mudo)}
.bi-linha{padding:7px 0;border-bottom:1px solid var(--borda);gap:8px}
.bi-linha:last-child{border-bottom:0}
.bi-linha span small{display:block;color:var(--mudo);font-size:.75rem}
.bi .num.erro{color:var(--erro-texto)}.bi .num.aviso{color:var(--aviso-texto)}
.bi-caixa{margin-top:10px;background:var(--cartao-2);border-radius:8px;padding:8px 12px;font-size:.85rem;display:flex;flex-direction:column;gap:4px;color:var(--mudo)}
.bi-caixa b{color:var(--texto)}
.bi-pe{margin-top:10px;padding-top:8px;border-top:1px solid var(--borda);color:var(--mudo);font-size:.78rem}
.bi-vazio{color:var(--mudo);font-size:.85rem;margin:8px 0}
.bi-dica{color:var(--mudo);font-size:.8rem;margin-top:16px}
/* revisao K.17 (design B1): no tablet (761-1200) os numeros se cobriam — o Ticket (2 numeros) e a Ocupacao ficam com meia linha,
   os ao vivo com meia linha (o delivery com a linha toda) e a grade preenche o buraco da 2a linha */
@media (max-width:1200px){
  .bi-grade{grid-auto-flow:row dense}
  .bi-grade>.bi-kpi.c2,.bi-grade>.bi-kpi.c3{grid-column:span 4}
  .bi-grade>.bi-kpi[data-bloco="ticket"],.bi-grade>.bi-kpi[data-bloco="ocupacao"]{grid-column:span 6}
  .bi-grade>.c8,.bi-grade>.c4[data-bloco="canais"],.bi-grade>.c4[data-bloco="delivery"]{grid-column:span 12}
  .bi-grade>.c4{grid-column:span 6}
  .bi-grade>.c3{grid-column:span 6}
}
.bi-bloco.sem-rel{cursor:default}.bi-bloco.sem-rel:hover{border-color:var(--borda)}
/* revisao K.17 (design A8, A1): 48 px no toque — o periodo, os selects e o X do relatorio */
@media (pointer:coarse){ .bi-seg button,.bi-sel .campo{min-height:48px} .modal.bi-rel .cabeca [data-fechar]{width:48px;height:48px;min-width:48px;min-height:48px} }
@media (max-width:900px){.bi-grade>.c4{grid-column:span 12}}
@media (max-width:760px){
  .bi-grade>.c2,.bi-grade>.c3,.bi-grade>.c4,.bi-grade>.c8,.bi-grade>.bi-kpi.c3{grid-column:span 12}
  .bi-grade>.bi-kpi.c2,.bi-grade>.bi-kpi[data-bloco="pessoas"],.bi-grade>.bi-kpi[data-bloco="ocupacao"]{grid-column:span 6}
  .bi-comparando{margin-left:0;width:100%}
  .bi-num{font-size:1.45rem}
  .bi-seg button{padding:7px 10px}
}
/* o relatorio de cada bloco */
.modal.bi-rel{font-variant-numeric:tabular-nums}
.bi-rel .bi-rel-sub{color:var(--mudo);font-size:.85rem;margin-left:10px;margin-right:auto;font-weight:400}
.bi-rel-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.bi-rel-resumo div{background:var(--cartao-2);border:1px solid var(--borda);border-radius:8px;padding:10px 12px;min-width:0}
.bi-rel-resumo small{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mudo)}
.bi-rel-resumo b{display:block;font-size:1.1rem;margin-top:2px;overflow-wrap:anywhere}
.bi-rel .tabela td.num,.bi-rel .tabela th.num{text-align:right}
.modal .rodape .rodape-texto{margin-right:auto;color:var(--mudo);font-size:.8rem;align-self:center}
.bi-rel .tabela-caixa{overflow-x:auto}
@media (max-width:760px){
  .modal.bi-rel .cabeca [data-fechar]{width:48px;height:48px;min-width:48px;min-height:48px}
  .bi-rel .tabela td,.bi-rel .tabela th{white-space:nowrap;padding-left:10px;padding-right:10px}
  .bi-rel-resumo{gap:8px}.bi-rel-resumo div{padding:8px 12px}
  .modal.bi-rel .rodape{flex-wrap:wrap}.modal.bi-rel .rodape .rodape-texto{width:100%}.modal.bi-rel .rodape .btn{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px;font-size:.9rem;gap:6px;white-space:nowrap}.modal.bi-rel .rodape .btn.primario{flex:1 1 100%;order:-1;min-height:48px}.modal.bi-rel .rodape .rodape-texto{order:-2}.modal.bi-rel .rodape .btn{min-height:48px}
}

/* ===================================================================
   K.29 (aprovada pelo dono 05/10/2026): a Gestao em CAIXAS TRANSPARENTES. 1a entrega: a casca (menu lateral flutuante,
   topo que gruda com desfoque) e o Inicio. Tudo preso a .app-gestao: a Operacao, o app do garcom, o totem e o cardapio nao
   herdam nada. O fundo (grade + halo do base.css) e a marca nao mudam. backdrop-filter e enfeite: sem ele (aparelho fraco)
   o @supports no fim poe fundo cheio onde ha texto por cima de conteudo que rola.
   =================================================================== */
.app-gestao{padding:16px;gap:16px;align-items:flex-start}
.app-gestao .lado{background:var(--caixa);border:1px solid var(--caixa-borda);border-radius:var(--r-caixa);box-shadow:inset 0 1px 0 var(--caixa-brilho);
  top:16px;height:calc(100vh - 32px);padding:16px 10px 12px}
.app-gestao .lado .marca{margin:0 6px 8px}
.app-gestao .lado .empresa-atual{margin:0 4px 10px;background:var(--caixa);border-color:var(--caixa-borda);border-radius:12px}
.app-gestao .lado .grupo-menu{padding:0 12px;color:var(--mudo)}
.app-gestao .lado .item,.app-gestao .lado .cab-menu{border:1px solid transparent;border-radius:12px;margin:1px 0;padding-left:12px}
.app-gestao .lado .item{min-height:44px}   /* revisao de design: 40 derrubava o toque de 44 (bloco novo, mesma especificidade, vem depois) */
.app-gestao .lado .sub-menu .item{padding-left:22px}
.app-gestao .lado .item:hover,.app-gestao .lado .cab-menu:hover{background:var(--caixa-hover);color:var(--texto)}
.app-gestao .lado .item.ativo{color:var(--gold-texto);font-weight:600;border-color:color-mix(in srgb,var(--gold) 40%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 24%,transparent),color-mix(in srgb,var(--gold) 7%,transparent))}
.app-gestao .lado .cab-menu .qtd{color:var(--mudo)}   /* decisao 1A: o --apagado dava 2,9:1 (escuro) e 2,6:1 (claro) sobre a caixa */
.app-gestao .lado .fixar:hover{background:var(--caixa-hover)}
.app-gestao .lado .rodape-lado{border-top-color:var(--caixa-borda);padding:10px 6px 0}
.app-gestao .lado .rodape-lado .linha{flex-wrap:wrap}   /* o "Sair" ficava cortado a direita (defeito antigo) */
.app-gestao .area > .topo{top:16px;margin-bottom:0;padding:0 14px;border:1px solid var(--caixa-borda);border-radius:var(--r-caixa);
  background:var(--topo-vidro);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--caixa-brilho)}

/* o Inicio (K.17) nas caixas */
.app-gestao .bi-filtros,.app-gestao .bi-bloco{background:var(--caixa);border:1px solid var(--caixa-borda);border-radius:var(--r-caixa);
  box-shadow:inset 0 1px 0 var(--caixa-brilho)}   /* sem backdrop-filter (revisao da 2a entrega: empilhamento e quadros) */
.app-gestao .bi-bloco{transition:border-color .16s ease}
.app-gestao .bi-bloco:hover{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.app-gestao .bi-seg{background:none;border:1px solid var(--caixa-borda);border-radius:12px;padding:3px}
.app-gestao .bi-seg button{border-radius:9px}
.app-gestao .bi-seg button[aria-pressed="true"]{background:var(--caixa-brilho);box-shadow:inset 0 0 0 1px var(--caixa-borda)}
.app-gestao .bi-sel .campo{border-color:var(--caixa-borda);border-radius:12px}
.app-gestao .bi-pend a{border-color:var(--caixa-borda);border-radius:12px;min-height:36px}
@media (pointer:coarse){ .app-gestao .bi-pend a{min-height:44px}
  .app-gestao .lado .rodape-lado .btn{min-height:44px}
  .app-gestao .area > .topo .btn{min-height:48px} .app-gestao .area > .topo .btn.icone{min-width:48px} }   /* o topo ja tinha 48 no toque (1.63, S34): o bloco novo nao pode baixar */   /* S119 com toque: o rodape do menu (32) e o topo (40) ficavam abaixo de 44 */
.app-gestao .bi-trilho{background:var(--caixa-borda)}
.app-gestao .bi-vivo-pe{border-top-color:var(--caixa-borda)}
.app-gestao .bi-barras .grade{stroke:var(--caixa-borda)}
.app-gestao .bi-selo.verde{background:var(--ok-fundo-caixa)}   /* sobre a caixa clara o 15% dava 4,49:1 (S108); 10% da 4,67 (token em hex: a regua le; color-mix sai como color(srgb ...)) */
.app-gestao .bi-caixa{background:none;border-radius:0;border-top:1px solid var(--caixa-borda);padding:8px 0 0}   /* o caixa dentro do bloco de pagamentos: linha, nao caixa dentro da caixa */

/* celular e maquininha (decisao 2A): o menu completo (K.16) segue na GAVETA, agora em vidro; a gaveta passa por cima do
   conteudo, entao o fundo dela e quase cheio (o texto do menu nao pode depender do desfoque) */
@media (max-width:900px){
  .app-gestao{padding:10px;gap:0}
  .app-gestao .lado{top:0;height:100vh;height:100dvh;border-radius:0 var(--r-caixa) var(--r-caixa) 0;border-left:0;
    background:var(--bg-alt);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}   /* sem color-mix (WebView antigo), fundo cheio */
  .app-gestao .lado.aberto{box-shadow:inset 0 1px 0 var(--caixa-brilho),10px 0 40px var(--sombra-cor)}   /* a sombra da gaveta que a caixa apagava */
  .app-gestao .lado .fechar-gaveta{display:inline-flex;position:absolute;top:6px;right:6px;width:48px;height:48px;min-width:48px;z-index:2}
  .app-gestao .lado .marca{margin-right:50px}
  .app-gestao .area > .topo{top:10px;margin-bottom:10px}
  .app-gestao .area > .topo .btn-modo kbd{display:none}   /* no celular o Ctrl+G virava uma pilula vazia */
}
/* decisao 3: os numeros do Inicio sem altura sobrando no celular */
@media (max-width:600px){ .app-gestao .bi-bloco{min-height:0} }
/* sem backdrop-filter: onde ha texto por cima de conteudo que rola (o topo, a gaveta), fundo cheio */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .app-gestao .area > .topo{background:var(--bg)}
  .app-gestao .lado{background:var(--bg-alt)}
}

/* ===================================================================
   K.29 (2): o CONTEUDO de toda a Gestao nas caixas, pelo componente comum (nao tela por tela). Revisao de design da (2):
   (a) as regras vao por :where(.app-gestao) — especificidade MENOR que os estados (.escala-cel.erro, .campo:focus, .campo.destaque,
   .img-opcao.atual, .chip.ok...), escritos antes: o bloco no fim apagava todos eles; (b) as caixas do CONTEUDO nao levam
   backdrop-filter — sobre a grade quase lisa ele nao aparece, cria contexto de empilhamento (o balao do "?" ficava por baixo do
   cartao seguinte, desfocado) e custa quadros na rolagem; o desfoque fica so no que FLUTUA (topo, gaveta, janelas).
   As janelas (modal, ficha) vao pela marca body.em-gestao (o app.js liga so na Gestao), com vidro DENSO (--janela-vidro).
   Os avisos mantem a cor do sentido; os botoes ficam como estao (controles).
   =================================================================== */
:where(.app-gestao) :is(.cartao,.hub,.tabela-caixa,.reaj-barra,.combo-etapa,.trib-efetiva),.app-gestao .rel-menu{   /* o .rel-menu vem do telas.css, que carrega DEPOIS: precisa de mais especificidade (nao tem estados) */
 
  background:var(--caixa);border-color:var(--caixa-borda);border-radius:var(--r-caixa);box-shadow:inset 0 1px 0 var(--caixa-brilho)}
:where(.app-gestao) .hub:hover{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
:where(.app-gestao) .cartao .tabela-caixa{border-radius:12px;box-shadow:none}   /* nao caixa de 18 px dentro de caixa de 18 px */
:where(.app-gestao) .escala-cel{background:var(--caixa);border-color:var(--caixa-borda);border-radius:12px}   /* os estados (.ok/.erro/.aviso/.info) seguem ganhando */
:where(.app-gestao) .escala-cel.ok{background:var(--ok-fundo-caixa)}   /* o ok sobre a caixa clara dava 4,45:1 (como o selo do Inicio) */
:where(.app-gestao) .tabela-caixa{overflow:auto}
:where(.app-gestao) .tabela th{background:var(--caixa-hover)}   /* o mesmo tom do rodape, como antes (cartao-2 nos dois); sem desfoque */
:where(.app-gestao) .tabela :is(td,th){border-bottom-color:var(--caixa-borda)}
:where(.app-gestao) .tabela.rel tfoot td{background:var(--caixa-hover)}
:where(.app-gestao) .tabela tbody tr:is(:hover,.selecionada),:where(.app-gestao) .arvore .no-grupo:hover,:where(.app-gestao) .rel-item:is(:hover,.ativo){background:var(--caixa-hover)}
:where(.app-gestao) .faixa-sub{background:var(--caixa-hover)}
:where(.app-gestao) .campo{border-color:var(--caixa-borda);border-radius:12px}   /* :focus e .destaque (antes) seguem ganhando */
:where(.app-gestao) .campo:is([disabled],[readonly]){background:var(--caixa-hover)}
:where(.app-gestao) .chip{background:var(--caixa-hover);border-color:var(--caixa-borda)}   /* o neutro; .ok/.erro/.ativo seguem ganhando */
:where(.app-gestao) .abas{border-bottom-color:var(--caixa-borda)}
.app-gestao .abas .aba.ativa,.app-gestao .rel-item.ativo{color:var(--gold-texto)}   /* o --gold-2 dava ~1,5:1 no claro (defeito antigo, achado nas fotos da K.29) */
:where(.app-gestao) .aviso-caixa{border-radius:12px}
/* as janelas da Gestao */
body.em-gestao :is(.modal,.ficha){background:var(--janela-vidro);border-color:var(--caixa-borda);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--caixa-brilho),0 20px 60px var(--sombra-cor)}
body.em-gestao .modal{border-radius:var(--r-caixa)}
body.em-gestao .ficha{border-radius:var(--r-caixa) 0 0 var(--r-caixa)}
@media (max-width:560px){ body.em-gestao .ficha{border-radius:0} }   /* a ficha ocupa a largura toda: canto deixaria cunha do fundo */
body.em-gestao :is(.ficha,.modal) > :is(.cabeca,.rodape){border-color:var(--caixa-borda)}
:where(body.em-gestao) :is(.ficha,.modal) :is(.cartao,.tabela-caixa,.trib-efetiva,.combo-etapa,.reaj-barra,.hub){background:var(--caixa);border-color:var(--caixa-borda);border-radius:12px}
:where(body.em-gestao) :is(.ficha,.modal) .tabela th{background:var(--janela-vidro)}
:where(body.em-gestao) :is(.ficha,.modal) .tabela td{border-bottom-color:var(--caixa-borda)}
:where(body.em-gestao) :is(.ficha,.modal) .tabela tbody tr:hover{background:var(--caixa-hover)}
:where(body.em-gestao) :is(.ficha,.modal) .campo{border-color:var(--caixa-borda);border-radius:12px}
:where(body.em-gestao) .img-opcao{background:var(--caixa-hover);border-color:var(--caixa-borda);border-radius:12px}   /* .atual segue ganhando */
body.em-gestao .img-opcao.atual{color:var(--gold-texto)}   /* o --gold-2 dava ~1,5:1 no claro */
:where(body.em-gestao) .bi-rel-resumo div{background:var(--caixa-hover);border-color:var(--caixa-borda);border-radius:12px}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body.em-gestao :is(.modal,.ficha){background:var(--bg-alt)}
}