/* ============================================================
   PAINEL DE ORÇAMENTO — estilo próprio, isolado do site público.

   Não importa css/base.css nem css/componentes.css: os tokens abaixo
   são um subconjunto COPIADO de css/base.css:5-71. A home não carrega
   um byte deste arquivo.

   As fontes são as mesmas do site (/fonts/*.woff2, cache imutável de
   1 ano pelo .htaccess). São VARIÁVEIS: um arquivo por família cobre o
   eixo de peso inteiro, então o painel declara 2 @font-face em vez dos
   6 de antes — e não baixa mais 4 cópias idênticas do mesmo Inter.
   Só o subset latin, que já cobre os acentos do português.
   Se o nome dos arquivos mudar, atualize também a lista do sw.js aqui
   do lado (e suba a VERSAO), senão o painel fica sem fonte offline.
   ============================================================ */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-var-latin.woff2) format('woff2')}
/* Plus Jakarta Sans — a fonte de DISPLAY do site (os preços/títulos do site usam
   ela). Mesmo arquivo de /fonts/ compartilhado. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/jakarta-var-latin.woff2) format('woff2')}

:root{
  --azul-900:#06205a; --azul-800:#0a3d91; --azul-600:#1e5fd0; --azul-500:#3b7bea;
  --azul-100:#e8eef8; --azul-50:#f4f6fb;
  --amarelo:#ffd200;
  --tinta:#0d1526; --tinta-2:#3a4356; --tinta-3:#5e6878;
  --borda:#e6eaf2; --nuvem:#f4f6fb; --branco:#fff;
  --wa:#25d366;
  --erro:#c62828;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;

  /* escala de tipo (P1): 5 degraus perceptíveis — 11·13·16·19·22 — no lugar dos
     ~13 tamanhos soltos. Cada papel recebe um degrau; peso e tinta separam dentro. */
  --fs-eyebrow:.6875rem; --fs-meta:.8125rem; --fs-body:1rem; --fs-lead:1.1875rem; --fs-total:1.375rem;
  /* fonte de display da marca (mesma do site): usada no DINHEIRO */
  --ff-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  /* sombra "flutuante" para des-encaixotar: some a borda, fica só o respiro */
  --sombra-flat:0 1px 2px rgba(10,61,145,.04),0 12px 30px -10px rgba(10,61,145,.10);
  --fio:#eef2f8; /* fio finíssimo p/ separar sem peso */

  --r-sm:10px; --r:14px; --r-lg:18px;
  --sombra-sm:0 1px 3px rgba(10,61,145,.08);
  --sombra:0 4px 18px rgba(10,61,145,.10);
  --sombra-lg:0 -6px 28px rgba(6,32,90,.14);
  --t:.18s ease;

  --topo-h:54px;
  --barra-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
/* o fundo do root propaga pra "moldura" da página (safe-area/overscroll no
   app instalado) — segue --nuvem de cada tema, sem faixa branca embaixo. */
html{-webkit-text-size-adjust:100%;background:var(--nuvem)}
body{
  margin:0; background:var(--nuvem); color:var(--tinta);
  font:400 16px/1.45 'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* mata o zoom por toque-duplo (o vendedor toca rápido 2× e o celular dava zoom);
     o pinch continua funcionando — melhor que user-scalable=no p/ acessibilidade */
  touch-action:manipulation;
  /* a barra fixa não pode cobrir o fim da página — reserva a altura da barra
     + uma folga (--sp-6) pro último item não encostar/ficar "comido" */
  padding-bottom:calc(var(--barra-h) + env(safe-area-inset-bottom) + var(--sp-6));
}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--azul-500); outline-offset:2px; border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none !important}

.container{max-width:1280px;margin:0 auto;padding:0 var(--sp-4)}

/* ── topo ─────────────────────────────────────────────────── */
.topo{
  position:sticky;top:0;z-index:20;
  /* instalado (standalone), o app desenha sob a barra de status; reserva a
     altura dela no topo pra o cabeçalho não colar no relógio/ícones do sistema.
     No navegador o inset é 0, então nada muda. */
  height:calc(var(--topo-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:var(--branco);
  border-bottom:1px solid var(--borda);
  display:flex;align-items:center;
}
.topo .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.topo-id{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.topo-numero{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo-data{font-size:.75rem;color:var(--tinta-3)}
.topo-acoes{display:flex;gap:var(--sp-1)}
.icone-btn{
  display:grid;place-items:center;width:40px;height:40px;
  background:transparent;border:0;border-radius:var(--r-sm);color:var(--tinta-2);
}
.icone-btn:hover{background:var(--azul-50);color:var(--azul-800)}
.icone-btn[aria-current="true"]{background:var(--azul-100);color:var(--azul-800)}

/* ── superfícies e botões ─────────────────────────────────── */
.cartao{
  background:var(--branco);border:0;
  border-radius:var(--r-lg);padding:var(--sp-5);
  box-shadow:var(--sombra-flat);
}
.cartao + .cartao{margin-top:var(--sp-4)}
/* rótulo unificado (P1b): título de seção / eyebrow — UM spec só (antes eram 4:
   .secao-titulo, .r-zona-tit, .total-geral span, .barra-total span). A cor fica
   por contexto (a maioria tinta-3; no bloco azul, herda branco). */
.rotulo,.secao-titulo,.r-zona-tit,.total-geral span,.barra-total span{
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.secao-titulo{color:var(--tinta-3)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:1rem;line-height:1;
  padding:15px 22px;border:0;border-radius:var(--r-sm);
  background:var(--azul-800);color:#fff;transition:background var(--t),transform var(--t);
}
.btn:active{transform:scale(.985)}
.btn:hover{background:var(--azul-900)}
.btn-fantasma{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--borda)}
.btn-fantasma:hover{background:var(--azul-50);box-shadow:inset 0 0 0 1.5px var(--azul-500)}
.btn-bloco{width:100%}
.btn-grande{padding:17px 24px}
.btn-perigo{color:var(--erro);box-shadow:inset 0 0 0 1.5px #f2c9c9;background:transparent}
.btn-perigo:hover{background:#fdf3f3;box-shadow:inset 0 0 0 1.5px var(--erro)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ── campos ───────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:var(--sp-2)}
/* rótulo de CAMPO: sentence-case e mais leve — um tier abaixo do título de
   SEÇÃO (.secao-titulo/.r-zona-tit, que são caixa-alta espaçada). É o que separa
   "o que é este bloco" de "o que é este campo". */
.campo-rot{font-size:.78rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tinta-3)}
.campo-caixa{position:relative;display:flex;align-items:center}
/* 16px é o mínimo: abaixo disso o Safari do iPhone dá zoom ao focar */
.entrada{
  width:100%;font-size:16px;font-weight:600;font-family:inherit;color:var(--tinta);
  padding:14px var(--sp-4);border:1.5px solid var(--borda);border-radius:var(--r);
  background:var(--branco);transition:border-color var(--t),box-shadow var(--t);
}
.entrada::placeholder{color:#aab2c0;font-weight:400}
.entrada:focus{outline:none;border-color:var(--azul-500);box-shadow:0 0 0 4px var(--azul-100)}
.entrada-sufixo{padding-right:52px}
.sufixo{position:absolute;right:var(--sp-4);font-weight:700;color:var(--tinta-3);pointer-events:none;font-size:.95rem}
.prefixo + .entrada{padding-left:44px}
.prefixo{position:absolute;left:var(--sp-4);font-weight:700;color:var(--tinta-3);pointer-events:none;font-size:.95rem;z-index:1}

.entrada-destaque{font-size:28px;font-weight:800;padding:16px var(--sp-4);letter-spacing:-.01em}
/* espaço para o chip +10% e para o sufixo m² conviverem sem cobrir o número */
.entrada-destaque.entrada-sufixo{padding-right:122px}
.entrada-destaque ~ .sufixo{font-size:1.1rem}

.dica-preco{font-size:.75rem;color:var(--tinta-3);margin-top:var(--sp-1)}

/* +10% de recorte/perda: fica discreto, mas ao alcance do polegar */
.chip-perda{
  position:absolute;right:56px;
  background:var(--azul-50);color:var(--azul-800);border:1px solid var(--azul-100);
  font-size:.75rem;font-weight:700;padding:6px 10px;border-radius:999px;
}
.chip-perda:hover{background:var(--azul-100)}

/* linha "fechar em caixa" (folha): rótulo + stepper de caixa + resultado */
.f-caixas{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:-6px;padding:5px 8px 5px 12px;background:var(--azul-50);border:1px solid var(--azul-100);border-radius:var(--r-sm)}
.f-caixas-rot{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--azul-800);flex:none}
.f-caixas-ctrl{display:flex;align-items:center;gap:0}
.f-caixas .stepper-b{width:34px;height:34px;font-size:1.3rem}
.f-caixas-n{min-width:1.4em;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tinta)}
.f-caixas-sub{font-size:var(--fs-meta);color:var(--tinta-3);margin-left:6px;white-space:nowrap}

/* ── autocomplete ─────────────────────────────────────────── */
.sugestoes{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;
  background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;max-height:230px;overflow-y:auto;
}
.sugestao{
  display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;
  width:100%;padding:12px var(--sp-4);background:none;border:0;text-align:left;font-size:.95rem;
}
.sugestao:hover,.sugestao[aria-selected="true"]{background:var(--azul-50)}
.sugestao b{font-weight:600}
.sugestao span{color:var(--tinta-3);font-size:.85rem;font-weight:700;white-space:nowrap}

/* ── cliente ──────────────────────────────────────────────── */
.cliente summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-3);
}
.cliente summary::-webkit-details-marker{display:none}
.cliente-resumo{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.cliente-vazio{color:var(--tinta-3);font-size:.95rem}
.cliente-nome{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cliente-sub{font-size:var(--fs-meta);color:var(--tinta-3)}
/* ícone de usuário no header do cliente — mesmo badge azul de 30px do piso */
.cliente-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--azul-50);color:var(--azul-800)}
.cliente-ic svg{width:18px;height:18px}
.seta{transition:transform var(--t);color:var(--tinta-3);flex:none}
.cliente[open] .seta{transform:rotate(180deg)}
.cliente-campos{display:grid;gap:var(--sp-4);margin-top:var(--sp-4)}

/* ── itens ────────────────────────────────────────────────── */
.itens-cab{display:none}
/* "Pisos" DENTRO do card (padded como o rótulo do resumo), não solto no cinza */
.itens-tit{display:block;padding:var(--sp-4) var(--sp-4) 0}
.itens{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3)}

/* piso como LINHA de recibo (a folha branca vem do .itens-wrap no mobile) */
.item{position:relative;background:transparent}
.item + .item{border-top:1px solid var(--fio)}
/* corpo do card: toque abre a edição */
.item-corpo{display:block;padding:var(--sp-4);cursor:pointer;-webkit-tap-highlight-color:transparent}
.item-corpo:active{background:var(--azul-50)}
/* × sempre visível: exclui direto (1 toque + confirmação) */
.item-x{
  position:absolute;top:4px;right:4px;z-index:1;
  width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--tinta-3);cursor:pointer;
}
.item-x:hover,.item-x:active{background:#fdecec;color:var(--erro)}

/* cabeçalho do card: badge do MODO (ícone color-coded) + nome/meta.
   O nome é a âncora do olho; o m² e o R$/m² descem para a linha-meta. */
.item-cab{display:flex;align-items:flex-start;gap:var(--sp-3);padding-right:34px}
/* badge do piso: um só ícone, igual em todos os cards (uniforme, não vira bagunça) */
.item-badge{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-top:1px;background:var(--azul-50);color:var(--azul-800)}
.item-badge svg{width:18px;height:18px}
.item-info{min-width:0;flex:1}
/* nome do piso no MESMO padrão do complemento (600 · tinta-2) */
.item-nome{
  font-weight:600;font-size:var(--fs-body);line-height:1.25;color:var(--tinta-2);word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.item-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:3px;font-size:var(--fs-meta)}
.item-m2{font-weight:700;color:var(--tinta-2);white-space:nowrap}
.item-preco{color:var(--tinta-3);font-weight:600;white-space:nowrap}
/* separador "·" TRAILING (nos não-últimos): se a linha quebrar, a nova linha
   nunca começa com um "·" órfão — o ponto fica no fim da linha anterior. */
.item-m2::after,.item-preco::after{content:"·";margin-left:6px;color:#c2c9d6;font-weight:700}
/* modo (Completo/Só piso/Personalizado): rótulo discreto — o ícone do card é
   sempre o mesmo (piso), então o modo vive aqui em texto, sem poluir. */
.item-tag{color:var(--tinta-3);font-weight:600}
.item-total{text-align:right;font-weight:800;font-size:var(--fs-body);letter-spacing:-.01em;color:var(--tinta);margin-top:var(--sp-2);font-variant-numeric:tabular-nums}
.chip{
  display:inline-block;font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:999px;
  background:var(--azul-50);color:var(--azul-800);
}
.chip-piso{background:#f1f3f7;color:var(--tinta-2)}

.vazio{text-align:center;color:var(--tinta-3);padding:var(--sp-7) var(--sp-4)}
.vazio p{margin-top:var(--sp-2);font-size:.95rem}

/* ── resumo ───────────────────────────────────────────────── */
.tot-linha{display:flex;justify-content:space-between;gap:var(--sp-3);padding:7px 0;font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.mat-linha{padding:var(--sp-4) 0;border-bottom:1px solid var(--fio)}
.mat-linha:last-child{border-bottom:0}
/* card de seção: mesmo recuo do piso (16px) em todas as seções */
.card-secao{padding:var(--sp-4)}
#r-complementos > .r-zona-tit{margin-bottom:0}
/* Config: cards no mesmo recuo de 16px do padrão de seção */
#v-config .cartao{padding:var(--sp-4)}
/* switches liga/desliga (no lugar dos checkboxes crus) — texto à esq., switch à dir. */
.cfg-switch{display:flex;align-items:center;gap:var(--sp-3);cursor:pointer;font-weight:600;color:var(--tinta);font-size:.95rem;line-height:1.35}
.cfg-switch + .cfg-switch{margin-top:var(--sp-3)}
.cfg-switch-txt{margin-right:auto}
.cfg-switch > input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.cfg-slider{flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:#cfd6e0;transition:background var(--t)}
.cfg-slider::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,61,145,.3);transition:transform var(--t)}
.cfg-switch > input:checked + .cfg-slider{background:var(--azul-800)}
.cfg-switch > input:checked + .cfg-slider::after{transform:translateX(18px)}
.cfg-switch > input:focus-visible + .cfg-slider{box-shadow:0 0 0 4px var(--azul-100)}
.mat-topo{display:flex;align-items:flex-start;gap:var(--sp-3)}
/* coluna nome + preço-editável embaixo (no padrão dos pisos) */
.mat-info{display:flex;flex-direction:column;min-width:0;margin-right:auto;gap:3px}
/* ícone do tipo de complemento (saco/junta/nível/cunha) — identifica a linha */
/* ícone decorativo do complemento em tinta-2 (frio): o azul-800 fica reservado
   ao que é acionável — stepper, toggle, chips, botões (disciplina de acento, F5) */
/* chip do complemento — cor por tipo (paleta 700/100 harmônica) */
/* mesmo tamanho do badge do piso (30 / raio 9 / ícone 18) */
.mat-ic{flex:none;align-self:flex-start;margin-top:1px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.mat-ic svg{width:18px;height:18px}
.mat-ic.cor-ac2{color:#a16207;background:#f8f1d8}
.mat-ic.cor-ac3{color:#d97757;background:#f8e7dd}
.mat-ic.cor-rejunte{color:#047857;background:#e5f4ed}
.mat-ic.cor-nivelador{color:#6d28d9;background:#eee9f9}
.mat-ic.cor-cunha{color:#be123c;background:#f9e7ec}

/* Upsell nivelador/cunha — destaque no serviço completo (não entram sozinhos) */
.r-upsell{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-3)}
.r-upsell[hidden]{display:none}
.upsell-card{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border:0;border-radius:var(--r);background:var(--branco);box-shadow:inset 0 0 0 1.5px var(--fio);cursor:pointer;transition:box-shadow var(--t),transform var(--t),background var(--t)}
.upsell-card:hover{box-shadow:inset 0 0 0 1.5px var(--azul-500);background:var(--azul-50)}
.upsell-card:active{transform:scale(.98)}
.upsell-card .mat-ic{width:24px;height:24px;border-radius:7px;align-self:center;margin-top:0}
.upsell-card .mat-ic svg{width:15px;height:15px}
.upsell-nome{font-weight:700;color:var(--tinta-2);font-size:.9375rem}
/* nome de complemento: subordinado ao piso — 600 + tinta-2 (o piso é 700/tinta) */
.mat-nome{font-weight:600;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* valor = dinheiro → peso 800 (regra: 800 é exclusivo de dinheiro) + tabular */
.mat-valor{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.mat-x{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--tinta-3);cursor:pointer}
.mat-x:hover,.mat-x:active{background:#fdecec;color:var(--erro)}
.mat-x svg{width:15px;height:15px}

/* toggle AC2/AC3 na linha da argamassa — troca rápida do tipo do orçamento */
/* toggle AC2/AC3 = segmento leve numa trilha clara (sem borda dura) */
.arg-toggle{display:inline-flex;background:#eef1f6;border:0;border-radius:999px;padding:3px}
.arg-tog{border:0;background:transparent;border-radius:999px;font:inherit;font-size:var(--fs-eyebrow);font-weight:700;color:var(--tinta-3);padding:0 13px;height:32px;display:inline-flex;align-items:center;cursor:pointer}
.arg-tog[aria-pressed="true"]{background:var(--azul-800);color:#fff}
.arg-tog:not([aria-pressed="true"]):hover{background:var(--azul-50);color:var(--azul-800)}
.mat-base{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}
.mat-un{font-size:var(--fs-meta);font-weight:700;color:var(--tinta-3)}
/* preço unitário editável — meta terciária, bem discreta; o lápis abre o modal */
.mat-preco{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;font:inherit;font-size:var(--fs-meta);font-weight:600;color:var(--tinta-3);cursor:pointer;padding:2px 6px;margin-left:-6px;border-radius:var(--r-sm);white-space:nowrap}
.mat-preco svg{width:13px;height:13px;opacity:.65}
.mat-preco:hover{background:var(--azul-50);color:var(--azul-800)}
.mat-preco:hover svg{opacity:1}
.mat-meta{font-size:var(--fs-meta);color:var(--tinta-3);margin-left:auto}
/* voltar ao sugerido: ↺ compacto AO LADO da cobertura (ela não some mais) */
.mat-reset{flex:none;width:32px;height:32px;display:grid;place-items:center;font-size:1.05rem;line-height:1;color:var(--azul-800);background:var(--azul-50);border:0;border-radius:999px;margin-left:10px;cursor:pointer}
.mat-reset:hover{background:var(--azul-100)}
/* (badge "manual" removido — o ↺ ao lado da cobertura já sinaliza a qtd mexida à mão) */

/* ── resumo em ZONAS (Complementos · Ajustes · Totais) ─────────
   Cada zona é um bloco com título próprio; da 2ª em diante, uma divisória e um
   respiro maior separam do bloco anterior — é o que dá o "cada coisa no seu
   lugar" e evita o olho se perder. */
.r-zona + .r-zona{margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--fio)}
.r-zona-tit{display:block;margin-bottom:var(--sp-4);color:var(--tinta-3)}
/* após o label, a 1ª linha de total não soma o próprio padding-top (gap = 16, padrão) */
.r-zona-tit + .tot-linha{padding-top:0}
.r-ajustes .campo + .campo{margin-top:var(--sp-4)}
/* o avulso usa .mat-linha (mesma linha do derivado); no meta vai o preço unit. */

/* fila ÚNICA de chips "adicionar complemento": +AC2/+AC3 (argamassa avulsa) e
   +Nivelador/+Cunha/re-add (derivados) — tudo com o mesmo visual de pílula */
/* +AC2/+AC3 (e re-adicionar) ficam um degrau abaixo da lista de complementos:
   afastamento + uma linha suave no padrão (--fio), mostrada só quando há algo
   acima (.com-divisor). No orçamento vazio some a linha — ali é ação rápida. */
.r-addons{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.r-addons.com-divisor{padding-top:var(--sp-6);border-top:1px solid var(--fio)}

/* B6: aviso FIXO de falha ao salvar — fica no topo até um save voltar a dar certo */
.aviso-salvar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:#fdecea;color:#7a1f1a;border-bottom:2px solid var(--erro);box-shadow:0 2px 10px rgba(0,0,0,.14)}
.aviso-salvar[hidden]{display:none}
.aviso-salvar-txt{flex:1;min-width:180px;font-size:var(--fs-meta);font-weight:600;line-height:1.35}
.aviso-salvar-btn{flex:none;border:0;border-radius:999px;padding:9px 16px;background:var(--erro);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.aviso-salvar-btn:hover{filter:brightness(.94)}

/* Conflito de edição entre aparelhos. Mesma faixa fixa do aviso de gravação —
   e não um toast — porque perder a escolha por não ter olhado a tempo é
   justamente o que não pode acontecer aqui.
   Âmbar e não vermelho: nada quebrou e nada se perdeu; há uma decisão a
   tomar. Pintar de erro faria o vendedor achar que perdeu o orçamento. */
.aviso-conflito{background:#fff6e5;color:#6b4a05;border-bottom-color:#c98a00}
.aviso-conflito .aviso-salvar-btn{background:#a06c00}

/* O estado da sincronização, no cartão da configuração. Discreto por
   desenho: o vendedor não acompanha sincronização, ele precisa saber quando
   alguma coisa NÃO subiu. */
#sync-chip{font-weight:700;color:var(--tinta-2)}
#sync-chip[data-estado="offline"],
#sync-chip[data-estado="sem-pareamento"]{color:#a06c00}
#sync-chip[data-estado="erro"]{color:var(--erro)}

/* F1: legenda curta do que cada modo (Só piso / Completo / Personalizado) inclui */
.modo-dica{margin:var(--sp-2) 2px 0;min-height:1.15em;font-size:var(--fs-meta);color:var(--tinta-3);line-height:1.3}

/* F7: aviso (linha própria) quando a qtd de material fixada à mão não cobre a área */
.mat-falta{margin:6px 0 0;color:var(--erro);font-weight:700;font-size:var(--fs-meta)}

/* P3: o card "nenhum item" é tocável (abre a folha) */
.vazio-add{cursor:pointer;border-radius:var(--r);transition:background var(--t)}
.vazio-add:hover{background:var(--azul-50)}
.chip-add{min-height:38px;border:0;background:var(--azul-50);border-radius:999px;padding:9px 16px;font:inherit;font-size:var(--fs-meta);font-weight:700;color:var(--azul-800);cursor:pointer;transition:background var(--t)}
.chip-add::before{content:"+ ";font-weight:800}
.chip-add:hover{background:var(--azul-100)}
.chip-add:active{background:var(--azul-100)}

/* stepper de quantidade dos materiais */
/* stepper SEM pílula: −  N  + soltos, discretos (des-clutter) */
.stepper{display:inline-flex;align-items:center;border:0;background:transparent;flex:none;margin-left:-6px}
.stepper-b{width:38px;height:38px;border:0;background:transparent;border-radius:10px;font-size:1.35rem;font-weight:700;color:var(--azul-800);display:grid;place-items:center;line-height:1}
.stepper-b:hover{background:var(--azul-50)}
.stepper-b:active{background:var(--azul-100)}
.stepper-i{width:32px;height:38px;border:0;text-align:center;font-weight:700;font-size:16px;font-family:inherit;color:var(--tinta);background:transparent;-moz-appearance:textfield;padding:0}
.stepper-i::-webkit-outer-spin-button,.stepper-i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper-i:focus{outline:none;background:var(--azul-50)}
/* crescendo dos números: detalhe (leve) → subtotal (marco) → TOTAL (bloco azul) */
.tot-linha span:first-child{color:var(--tinta-3)}
.tot-linha strong{font-weight:600;color:var(--tinta-2)}
.tot-subtotal{border-top:1px solid var(--borda);margin-top:var(--sp-1);padding-top:11px}
.tot-subtotal span:first-child{color:var(--tinta-2);font-weight:600}
.tot-subtotal strong{font-weight:800;color:var(--tinta);font-size:var(--fs-body);font-variant-numeric:tabular-nums}
#r-desconto-linha strong{color:var(--wa);font-weight:700}
.tot-linha strong.tot-gratis{color:var(--wa)}
.total-geral{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  background:var(--azul-800);color:#fff;border-radius:var(--r);padding:16px var(--sp-4);margin-top:var(--sp-4);
  box-shadow:0 6px 18px rgba(10,61,145,.22);
}
.total-geral span{opacity:.82}
.total-geral strong{font-size:var(--fs-total);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.acoes-finais{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
/* Imprimir/Enviar PDF nos temas de render próprio (Documento/Showroom/Balcão) */
.doc-acoes{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}
.doc-acoes .btn{justify-content:center;gap:var(--sp-2)}

/* ── topo: ciclo de vida (Novo / Salvar) ── */
.topo-lifecycle{display:flex;gap:var(--sp-2);align-items:center}
.btn-topo{border:0;font:inherit;font-weight:700;font-size:.875rem;border-radius:999px;padding:8px 15px;cursor:pointer;line-height:1;transition:background var(--t),box-shadow var(--t);touch-action:manipulation}
.btn-topo-primary{background:var(--azul-800);color:#fff}
.btn-topo-primary:hover{background:var(--azul-900)}
.btn-topo-ghost{background:transparent;color:var(--azul-800);box-shadow:inset 0 0 0 1.5px var(--borda)}
.btn-topo-ghost:hover{background:var(--azul-50)}
.btn-topo[disabled]{opacity:.4;pointer-events:none}
/* identidade do orçamento (Nº + data + status) — desceu do topo pro resumo */
.r-ident{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--fs-meta);color:var(--tinta-3);
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);border-bottom:1px solid var(--fio)}
.r-ident #topo-numero{font-weight:700;color:var(--tinta-2)}
.r-status{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  background:#e6f5ec;color:#15925a;font-weight:700;font-size:var(--fs-eyebrow);
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.r-status:empty{display:none}
.r-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* histórico: filtro por status + selos (rascunho/concluído) */
.hist-filtros{display:flex;gap:7px;margin-bottom:var(--sp-4)}
.hist-chip{border:0;font:inherit;font-size:var(--fs-meta);font-weight:700;padding:7px 14px;border-radius:999px;background:#eef2f8;color:var(--tinta-3);cursor:pointer;transition:background var(--t),color var(--t)}
.hist-chip.on{background:var(--azul-800);color:#fff}
.hist-st{display:inline-block;font-size:.625rem;font-weight:700;padding:2px 7px;border-radius:999px;vertical-align:middle;white-space:nowrap}
.hist-st-ok{background:#e6f5ec;color:#15925a}
.hist-st-draft{background:#fbf1dc;color:#8a5a00}
/* folha de detalhe do histórico (só-leitura, com produtos especificados) */
.hd-meta{font-size:var(--fs-meta);color:var(--tinta-3);margin:2px 0 3px}
.hd-sub{font-size:var(--fs-meta);color:var(--tinta-3);margin:0 0 3px}
.hd-caixa{background:#f4f7fb;border-radius:var(--r);padding:2px 14px 10px;margin:12px 0 18px}
.hd-produtos{max-height:34vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.hd-grupo{font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);padding:9px 0 2px;position:sticky;top:0;background:#f4f7fb}
.hd-item{display:flex;align-items:baseline;gap:10px;padding:6px 0;font-size:var(--fs-meta)}
.hd-item-nome{color:var(--tinta-2);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-item-q{color:var(--tinta-3);white-space:nowrap;text-align:right;flex:none;min-width:54px}
.hd-item strong{color:var(--tinta-2);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;flex:none;min-width:74px}
.hd-vazio{color:var(--tinta-3);justify-content:center}
.hd-fim{border-top:1px solid var(--borda);margin:0;padding-top:8px}
.hd-linha{display:flex;justify-content:space-between;padding:4px 0;font-size:var(--fs-meta);color:var(--tinta-3);font-variant-numeric:tabular-nums}
.hd-linha strong{color:var(--tinta-2);font-weight:600}
.hd-total span,.hd-total strong{color:var(--tinta);font-weight:800;font-size:var(--fs-body)}
/* nav do topo sempre à direita (mesmo quando o Novo/Salvar some fora do orçamento) */
.topo-acoes{margin-left:auto}
.aviso-dados{font-size:.75rem;color:var(--tinta-3);text-align:center;margin-top:var(--sp-4);line-height:1.4}

/* campo de desconto (R$ ou %) */
.desc-wrap{display:flex;gap:var(--sp-2);align-items:stretch}
.desc-wrap .campo-caixa{flex:1;position:relative;display:flex;align-items:center}
/* mesmo toggle dos complementos (AC2/AC3): trilho-pílula, ativo = pílula azul.
   fonte maior que a do AC2/AC3 porque aqui convive com o input (contexto maior) */
.desc-seg{display:inline-flex;background:#eef1f6;border:0;border-radius:999px;padding:3px;flex:none}
/* toggle Entrega/Retirada: sozinho no .campo (flex-column) ele esticaria na
   largura toda; align-self:flex-start mantém compacto e à esquerda, como o R$/%.
   As duas metades ficam iguais (flex:1 + largura mínima) pra não ficar torto. */
.ent-seg{align-self:flex-start}
.ent-seg .desc-tog{flex:1;justify-content:center;min-width:96px}
.desc-tog{border:0;background:transparent;border-radius:999px;font:inherit;font-size:.95rem;font-weight:700;color:var(--tinta-3);padding:0 16px;cursor:pointer;display:inline-flex;align-items:center}
.desc-tog[aria-pressed="true"]{background:var(--azul-800);color:#fff}
.desc-tog:not([aria-pressed="true"]):hover{background:var(--azul-50);color:var(--azul-800)}
.campo-rot em{font-style:normal;font-weight:700;color:var(--wa);margin-left:6px;text-transform:none;letter-spacing:0}

/* ── barra fixa (mobile) ──────────────────────────────────── */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:25;
  background:var(--branco);border-top:1px solid var(--borda);box-shadow:var(--sombra-lg);
  padding:var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
}
.barra .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.barra-total{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.barra-total span{color:var(--tinta-3)}
.barra-total strong{font-size:var(--fs-total);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.barra .btn{flex:none;padding:15px 18px}

/* ── folha de item (bottom sheet) ─────────────────────────── */
.fundo{position:fixed;inset:0;z-index:40;background:rgba(13,21,38,.5);display:flex;align-items:flex-end}
.folha{
  background:var(--branco);width:100%;border-radius:20px 20px 0 0;
  max-height:94svh;overflow-y:auto;padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  animation:sobe .22s ease;
}
@keyframes sobe{from{transform:translateY(24px)}to{transform:none}}
.folha-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5)}
.folha-topo h2{font-size:1.1rem;font-weight:800}
.folha-campos{display:flex;flex-direction:column;gap:var(--sp-5)}

.item-total-vivo{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:var(--sp-3) 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
}
.item-total-vivo span{font-size:.8rem;font-weight:700;color:var(--tinta-3)}
.item-total-vivo strong{font-size:1.35rem;font-weight:800}

.modos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--azul-50);padding:4px;border-radius:var(--r)}
.modo{
  border:0;background:transparent;border-radius:calc(var(--r) - 4px);
  padding:12px 4px;font-size:.85rem;font-weight:700;color:var(--tinta-3);
}
.modo[aria-pressed="true"]{background:var(--branco);color:var(--azul-800);box-shadow:var(--sombra-sm)}

.extras{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-4)}
.extra{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:10px 0}
.extra + .extra{border-top:1px solid var(--borda)}
.extra label{font-weight:600;display:flex;align-items:center;gap:10px}
.extra input[type=checkbox]{width:22px;height:22px;accent-color:var(--azul-600)}
.tipos-arg{display:flex;gap:var(--sp-2)}
.tipo-arg{border:1.5px solid var(--borda);background:var(--branco);border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:700;color:var(--tinta-3)}
.tipo-arg[aria-pressed="true"]{border-color:var(--azul-500);background:var(--azul-50);color:var(--azul-800)}

/* "Adicionar e continuar" é mais longo: dar-lhe mais coluna evita a quebra
   em duas linhas, que desequilibrava a dupla. */
.folha-duplicar{display:block;width:100%;margin-top:var(--sp-4);padding:12px;border:0;background:transparent;color:var(--azul-800);font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;border-radius:var(--r-sm)}
.folha-duplicar:hover{background:var(--azul-50)}
.folha-acoes{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--sp-3);margin-top:var(--sp-5)}
/* modo EDITAR: só "Salvar" (sem "Adicionar e continuar") → largura toda, não torto */
.folha-acoes:has(#f-continuar[hidden]) #f-ok{grid-column:1 / -1}
.folha-acoes .btn{font-size:.95rem;padding-left:10px;padding-right:10px;white-space:nowrap}

/* modal de confirmação de "Novo orçamento" (usa .fundo/.folha) */
.folha-confirma{max-width:440px}
.confirma-msg{color:var(--tinta-2);font-size:.95rem;line-height:1.5;margin:0 0 var(--sp-5)}
.confirma-acoes{display:flex;flex-direction:column;gap:var(--sp-3)}

/* ── histórico e config ───────────────────────────────────── */
/* busca do histórico */
.hist-busca{display:flex;align-items:center;gap:10px;background:var(--nuvem);border:1.5px solid var(--borda);border-radius:var(--r);padding:0 14px;margin-bottom:var(--sp-2)}
.hist-busca:focus-within{border-color:var(--azul-500);box-shadow:0 0 0 4px var(--azul-100)}
.hist-busca-ic{flex:none;display:grid;place-items:center;color:var(--tinta-3)}
.hist-busca-ic svg{width:18px;height:18px}
.hist-busca-i{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;font-weight:600;color:var(--tinta);padding:13px 0;outline:none}
.hist-busca-i::placeholder{color:#aab2c0;font-weight:400}

/* grupos por recência */
.hist-grupo + .hist-grupo{margin-top:var(--sp-4)}
.hist-grupo-tit{display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);margin:var(--sp-3) 0 var(--sp-1)}

/* linha = orçamento: toque abre; cliente/total mandam; ações são ícones discretos */
.hist-linha{display:grid;grid-template-columns:1fr auto;grid-template-areas:"cliente total" "meta acoes";gap:2px var(--sp-3);align-items:center;padding:var(--sp-4) var(--sp-2);margin:0 calc(-1 * var(--sp-2));cursor:pointer;-webkit-tap-highlight-color:transparent}
.hist-grupo .hist-linha + .hist-linha{border-top:1px solid var(--fio)}
.hist-linha:active{background:var(--azul-50);border-radius:var(--r-sm)}
.hist-cliente{grid-area:cliente;font-weight:700;font-size:1rem;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-total{grid-area:total;font-weight:800;font-size:1.05rem;color:var(--tinta);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hist-meta{grid-area:meta;font-size:var(--fs-meta);color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-acoes-mini{grid-area:acoes;display:flex;gap:2px;justify-self:end}
.hist-ic{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--r-sm);color:var(--tinta-3);cursor:pointer}
.hist-ic svg{width:18px;height:18px}
.hist-ic:hover{background:var(--azul-50);color:var(--azul-800)}
.hist-ic-x:hover{background:#fdecec;color:var(--erro)}

/* backup recolhido no rodapé (histórico é pra achar, não pra admin) */
.hist-backup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.hist-backup>summary::-webkit-details-marker{display:none}
.hist-chevron{color:var(--tinta-3);flex:none;transition:transform var(--t)}
.hist-backup[open] .hist-chevron{transform:rotate(180deg)}
.hist-backup-corpo{margin-top:var(--sp-4)}
.cfg-grid{display:grid;gap:var(--sp-4);margin-top:var(--sp-4)}
.cfg-mat{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);align-items:end}

/* ── backup em .zip de PDFs (escolher período/quais) ──────── */
.zip-painel{margin-top:var(--sp-3);padding:var(--sp-4);background:var(--nuvem);border:1.5px solid var(--borda);border-radius:var(--r)}
.zip-periodo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.zip-barra{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.zip-barra .btn{flex:1;min-width:92px;padding:10px 12px;font-size:.82rem}
.zip-lista{margin-top:var(--sp-3);max-height:300px;overflow-y:auto;background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--r);padding:2px var(--sp-2)}
.zip-item{display:flex;align-items:center;gap:var(--sp-3);padding:11px var(--sp-2);border-bottom:1px solid var(--borda);cursor:pointer}
.zip-item:last-child{border-bottom:0}
.zip-item input{width:22px;height:22px;accent-color:var(--azul-600);flex:none}
.zip-item-txt{display:flex;flex-direction:column;min-width:0}
.zip-item-txt b{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zip-item-txt small{color:var(--tinta-3);font-size:.78rem}
.zip-rodape{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.zip-rodape #zip-status{text-align:center;min-height:1.1em;font-weight:600}
@media (min-width:1100px){
  .zip-rodape{flex-direction:row-reverse;align-items:center;justify-content:space-between}
  .zip-rodape .btn{flex:none;min-width:190px}
  .zip-rodape #zip-status{flex:1;text-align:left}
}

/* ── produtos do autocomplete ─────────────────────────────── */
.prod-topo{margin-top:var(--sp-4)}
.prod-acoes{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.prod-acoes .entrada{flex:1;min-width:0}
.prod-acoes .btn{flex:none}
.prod-cab{display:none}
.prod-linha .entrada{padding:11px 12px;font-size:16px}
.prod-linha .campo-caixa{position:relative;display:flex;align-items:center}
.prod-linha .prefixo{position:absolute;left:12px;font-weight:700;color:var(--tinta-3);font-size:.85rem;pointer-events:none}
.prod-linha .prefixo + .entrada{padding-left:38px;text-align:right}
.prod-linha .cel-acao{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--tinta-3);cursor:pointer}
.prod-linha .cel-acao:hover{background:#fdecec;color:var(--erro)}

/* Mobile: empilhado — nome em cima com largura cheia (não corta), preço e
   remover embaixo. Campos grandes, fáceis de tocar. */
.prod-linha{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 40px;
  grid-template-areas:"nome nome nome" "preco caixa remover";
  gap:10px var(--sp-2);align-items:center;padding:14px 0;border-bottom:1px solid var(--borda);
}
.prod-linha .pr-nome{grid-area:nome}
.prod-linha .pr-cel-preco{grid-area:preco}
.prod-linha .pr-cel-caixa{grid-area:caixa}
.prod-linha .pr-cel-caixa .entrada{width:100%}
.prod-linha .cel-acao{grid-area:remover;justify-self:end}

/* Desktop: volta a uma tabela numa linha só (nome · preço · m²/cx · remover) */
@media (min-width:1100px){
  .prod-linha{grid-template-columns:1fr 130px 120px 40px;grid-template-areas:none;gap:var(--sp-2);padding:5px 0}
  .prod-linha .pr-nome,.prod-linha .pr-cel-preco,.prod-linha .pr-cel-caixa,.prod-linha .cel-acao{grid-area:auto}
  .prod-cab{display:grid;grid-template-columns:1fr 130px 120px 40px;gap:var(--sp-2);padding:0 2px var(--sp-2);
    font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
}

/* ── toast ────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--barra-h) + 20px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  background:var(--tinta);color:#fff;font-size:.9rem;font-weight:600;
  padding:12px 18px;border-radius:999px;box-shadow:var(--sombra);
  opacity:0;transition:opacity var(--t);pointer-events:none;width:max-content;max-width:92vw;text-align:center;
}
.toast.ver{opacity:1}
.toast.erro{background:var(--erro)}
/* botão "Desfazer": só ele recebe toque (o balão em si não bloqueia a tela) */
#toast-acao{
  pointer-events:auto;flex:none;white-space:nowrap;cursor:pointer;
  background:transparent;border:0;color:#8fc2ff;font:inherit;font-weight:800;font-size:.9rem;
  padding:6px 6px;margin:-6px -2px -6px 0;border-radius:8px;
}
#toast-acao:hover{color:#fff;text-decoration:underline}
#toast-acao:active{color:#fff}

/* dica de instalação no iPhone (o Safari não tem prompt nativo) */
.dica-ios{
  display:flex;gap:var(--sp-3);align-items:center;justify-content:space-between;
  background:var(--azul-50);border:1px solid var(--azul-100);border-radius:var(--r);
  padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-4);font-size:.85rem;color:var(--azul-900);
}

/* ============================================================
   DESKTOP — painel de duas colunas, não a tela mobile esticada.
   ============================================================ */
@media (min-width:1100px){
  body{padding-bottom:var(--sp-7)}
  .barra{display:none}
  .toast{bottom:28px}

  .grade{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--sp-6);align-items:start;margin-top:var(--sp-6)}
  .col-dir{position:sticky;top:calc(var(--topo-h) + var(--sp-6))}

  /* no desktop o cartão do cliente também fica colapsável (economiza espaço);
     ao abrir, os campos ficam em 2 colunas */
  .cliente-campos{grid-template-columns:1fr 1fr}
  .cliente-campos .campo-largo{grid-column:1 / -1}

  /* GRADE navegável por teclado — cada célula é um div; ao editar ganha um
     input embutido. A mesma grade de colunas serve cabeçalho e linhas. */
  .col-esq{--cols:78px minmax(116px,1fr) 86px 150px 104px 40px}

  .itens-tit{display:none}          /* no desktop, o cabeçalho da grade cumpre o papel */
  .itens-cab{
    display:grid;align-items:center;grid-template-columns:var(--cols);
    gap:var(--sp-2);margin-top:var(--sp-6);padding:0 var(--sp-3) var(--sp-2);
    font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);
  }
  .itens-cab .dir{text-align:right}
  .itens-wrap{background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--r-lg)}
  .itens{margin-top:0}

  .linha-item,.linha-nova{
    display:grid;align-items:stretch;grid-template-columns:var(--cols);
    gap:var(--sp-2);padding:3px var(--sp-3);
  }
  .linha-item{border-bottom:1px solid var(--borda)}
  .linha-nova{background:var(--azul-50);border-radius:0 0 var(--r-lg) var(--r-lg)}

  /* célula em modo navegação: mostra o valor, sem cara de formulário */
  .cel{
    position:relative;display:flex;align-items:center;min-height:40px;
    padding:8px 10px;border:2px solid transparent;border-radius:var(--r-sm);
    font-size:.92rem;font-weight:600;color:var(--tinta);cursor:default;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cel .ph{color:#aab2c0;font-weight:400}
  .cel-area,.cel-preco{justify-content:flex-end}
  .cel-modo{color:var(--azul-800)}
  .cel-total{justify-content:flex-end;font-weight:800;color:var(--tinta)}
  .cel-acao{justify-content:center;color:var(--tinta-3)}

  /* célula ativa (foco) — destaque forte, tipo célula selecionada de planilha */
  .cel[tabindex]{cursor:pointer}
  .cel[tabindex]:hover{background:var(--azul-50)}
  .cel:focus{outline:none;border-color:var(--azul-600);background:#fff;box-shadow:0 0 0 3px var(--azul-100);z-index:1}
  /* × de excluir (só nas linhas de item; a linha em branco tem a célula vazia) */
  .cel-acao[role="button"]{cursor:pointer}
  .cel-acao[role="button"]:hover{color:var(--erro);background:#fdecec}

  /* célula em edição — o input preenche a célula; overflow:visible deixa a
     caixa de sugestões do autocomplete aparecer (a .cel normal corta com hidden) */
  .cel.editando{padding:0;border-color:var(--azul-600);background:#fff;box-shadow:0 0 0 3px var(--azul-100);z-index:20;overflow:visible}
  .cel-input{
    width:100%;min-height:40px;border:0;outline:none;background:transparent;
    /* 16px evita o zoom-ao-focar do Safari no iPad (a grade roda no iPad Pro ≥1100) */
    font:inherit;font-size:16px;font-weight:600;color:var(--tinta);padding:8px 10px;
  }
  .cel-area .cel-input,.cel-preco .cel-input{text-align:right}
  /* a caixa de sugestões precisa de largura mínima p/ o preço não cortar */
  .itens .sugestoes{min-width:260px}
  .cel-modo svg,.cel-acao svg{flex:none}

  .itens-dica{font-size:.72rem;color:var(--tinta-3);margin:10px 2px 0;text-align:center;line-height:1.7}
  .itens-dica kbd{font-family:inherit;font-size:.7rem;background:#fff;border:1px solid var(--borda);border-bottom-width:2px;border-radius:5px;padding:1px 6px;margin:0 1px;color:var(--tinta-2);font-weight:700}
  .itens-dica b{color:var(--tinta-2)}

  /* no desktop a folha vira modal centralizado */
  .fundo{align-items:center;justify-content:center;padding:var(--sp-6)}
  .folha{max-width:520px;border-radius:var(--r-lg);max-height:88vh}

  .acoes-finais{gap:var(--sp-2)}
  .cfg-grid{grid-template-columns:1fr 1fr}
  .cfg-grid .cfg-largo{grid-column:1 / -1}
}

@media (max-width:1099px){
  .grade{margin-top:var(--sp-4)}
  .col-dir{margin-top:var(--sp-4)}
  /* a tabela editável e a linha em branco são só do desktop */
  .linha-nova,.itens-cab,.itens-dica{display:none}
  /* PISOS em modo recibo: uma folha branca só, linhas separadas por fio */
  .itens-wrap{background:var(--branco);border-radius:var(--r-lg);box-shadow:var(--sombra-flat);overflow:hidden;margin-top:var(--sp-3)}
  .itens{gap:0;margin-top:0}
}

/* celular estreito: o total e o botão não podem brigar pela largura */
@media (max-width:380px){
  .barra-total strong{font-size:1.2rem}
  .barra .btn{padding:14px 14px;font-size:.92rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   TEMA "PROFISSIONAL" — inspirado em design de SaaS (tipo Stripe):
   texto azul-marinho, acento blurple, muito respiro, fios finos e
   sombras sutis. Liga com data-tema="profissional" na raiz (cfg.tema).
   Sem esse atributo, tudo continua no tema Clássico (base acima).
   ============================================================ */
:root[data-tema="profissional"],
:root[data-tema="documento"]{
  --tinta:#0a2540; --tinta-2:#425466; --tinta-3:#8792a2;
  --nuvem:#f6f9fc; --branco:#ffffff; --borda:#e3e8ee; --fio:#eaeef3;
  --azul-900:#4b43e0; --azul-800:#635bff; --azul-600:#635bff; --azul-500:#a7a2ff;
  --azul-100:#e7e6ff; --azul-50:#f5f6ff;
  --r-sm:8px; --r:9px; --r-lg:12px;
  --sombra-flat:0 0 0 1px rgba(50,50,93,.04),0 2px 5px -1px rgba(50,50,93,.08),0 1px 3px -1px rgba(0,0,0,.04);
  --sombra:0 7px 18px -6px rgba(50,50,93,.18),0 0 0 1px rgba(50,50,93,.05);
  --sombra-sm:0 0 0 1px rgba(50,50,93,.07);
}

/* header nítido; botões com o leve relevo Stripe */
[data-tema="profissional"] .topo{background:var(--branco);border-bottom:1px solid var(--borda)}
[data-tema="profissional"] .btn{border-radius:var(--r-sm);font-weight:600;box-shadow:0 1px 1px rgba(50,50,93,.11),0 1px 2px rgba(0,0,0,.08)}
[data-tema="profissional"] .btn-fantasma{box-shadow:inset 0 0 0 1px var(--borda)}
[data-tema="profissional"] .btn-topo-primary{box-shadow:0 1px 1px rgba(50,50,93,.12)}

/* rótulos de seção mais discretos (caixa-alta pequena, cinza) */
[data-tema="profissional"] .secao-titulo,
[data-tema="profissional"] .r-zona-tit,
[data-tema="profissional"] .itens-tit{color:var(--tinta-3);letter-spacing:.055em;font-size:.6875rem;font-weight:600}

/* TOTAL: sem bloco azul — linha limpa, número grande navy.
   box-shadow:none zera a sombra navy da regra base (senão fica uma
   sombra "fantasma" flutuando sob a linha transparente). */
[data-tema="profissional"] .total-geral{
  background:transparent;color:var(--tinta);border-radius:0;box-shadow:none;
  padding:var(--sp-4) 0 var(--sp-1);margin-top:var(--sp-3);border-top:1.5px solid var(--borda);
}
[data-tema="profissional"] .total-geral span{color:var(--tinta-2);font-weight:600;text-transform:none;letter-spacing:0;font-size:var(--fs-body)}
[data-tema="profissional"] .total-geral strong{font-size:1.55rem;color:var(--tinta);font-weight:700;letter-spacing:-.02em}

/* barra inferior branca e nítida */
[data-tema="profissional"] .barra{background:var(--branco);border-top:1px solid var(--borda)}

/* orçamento = documento: folha única, itens em linha de recibo (mobile) */
@media (max-width:1099px){
  [data-tema="profissional"] #v-orcamento .col-esq,
  [data-tema="profissional"] #v-orcamento .col-dir{display:contents}
  [data-tema="profissional"] #v-orcamento .grade{
    background:var(--branco);border-radius:var(--r-lg);overflow:hidden;
    box-shadow:var(--sombra-flat);margin-top:var(--sp-4);
  }
  [data-tema="profissional"] #v-orcamento .cartao,
  [data-tema="profissional"] #v-orcamento .itens-wrap{
    background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;
    padding:var(--sp-5) var(--sp-5);border-top:1px solid var(--fio);
  }
  [data-tema="profissional"] #v-orcamento #cliente{border-top:0}
  [data-tema="profissional"] #v-orcamento .itens-wrap > .itens-tit{padding:0 0 var(--sp-3)}
  [data-tema="profissional"] #v-orcamento .aviso-dados{margin:var(--sp-4) var(--sp-3) 0}

  [data-tema="profissional"] #v-orcamento .item-badge,
  [data-tema="profissional"] #v-orcamento .mat-ic{display:none}
  [data-tema="profissional"] #v-orcamento .item-corpo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);padding-right:38px}
  [data-tema="profissional"] #v-orcamento .item-cab{padding-right:0;flex:1;min-width:0}
  [data-tema="profissional"] #v-orcamento .item-total{margin-top:0;flex:none}

  [data-tema="profissional"] #v-orcamento .stepper-b{color:var(--tinta-2)}
  [data-tema="profissional"] #v-orcamento .chip-add{background:#eef1f6;color:var(--tinta-2)}
  [data-tema="profissional"] #v-orcamento .chip-add:hover{background:#e6eaf1}
}

/* ============================================================
   TEMA "DOCUMENTO" — a tela VIRA a nota (invoice WYSIWYG). Herda a
   paleta Stripe do tema profissional (acima); aqui só o layout da nota.
   ============================================================ */
[data-tema="documento"] #documento{padding-top:var(--sp-4)}
[data-tema="documento"] .doc-folha{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);box-shadow:var(--sombra-flat);overflow:hidden}

[data-tema="documento"] .doc-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-5);border-bottom:2px solid var(--tinta)}
[data-tema="documento"] .doc-loja{font-weight:800;font-size:1.15rem;color:var(--tinta);letter-spacing:-.01em}
[data-tema="documento"] .doc-cab-dir{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.35}
[data-tema="documento"] .doc-tit{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-3);font-weight:600}
[data-tema="documento"] .doc-num{font-weight:700;color:var(--tinta);font-size:1.05rem}
[data-tema="documento"] .doc-data{font-size:.75rem;color:var(--tinta-3)}
[data-tema="documento"] .doc-badge{background:var(--azul-100);color:var(--azul-900);border-radius:999px;padding:1px 8px;font-size:.68rem;font-weight:700}
[data-tema="documento"] .doc-badge.ok{background:#d7f5e3;color:#046c4e}

[data-tema="documento"] .doc-cliente{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:var(--sp-4) var(--sp-5);border:0;border-bottom:1px solid var(--fio);background:transparent;cursor:pointer;transition:background var(--t)}
[data-tema="documento"] .doc-cliente:hover{background:var(--azul-50)}
[data-tema="documento"] .doc-rot{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3);font-weight:600}
[data-tema="documento"] .doc-cliente-val{font-weight:600;color:var(--tinta-2);font-size:.95rem}

[data-tema="documento"] .doc-itens{padding:0 var(--sp-5) var(--sp-2)}
[data-tema="documento"] .doc-itens-cab{display:flex;justify-content:space-between;padding:var(--sp-3) 0 var(--sp-2);font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3);font-weight:600;border-bottom:1px solid var(--fio)}
[data-tema="documento"] .doc-linha{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);width:100%;padding:var(--sp-3) 0;border:0;border-bottom:1px solid var(--fio);background:transparent;text-align:left;cursor:pointer;transition:background var(--t)}
[data-tema="documento"] .doc-linha:hover{background:var(--azul-50)}
[data-tema="documento"] .doc-linha:last-child{border-bottom:0}
[data-tema="documento"] .doc-nome{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-weight:600;color:var(--tinta);font-size:.95rem}
[data-tema="documento"] .doc-sub{font-weight:400;color:var(--tinta-3);font-size:var(--fs-meta)}
[data-tema="documento"] .doc-val{font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
[data-tema="documento"] .doc-vazio{color:var(--tinta-3);padding:var(--sp-4) 0;font-size:.95rem}

[data-tema="documento"] .doc-adicionar{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-5) var(--sp-4)}
[data-tema="documento"] .doc-add{flex:1;padding:10px;border:1px dashed var(--borda);border-radius:var(--r-sm);background:transparent;color:var(--azul-800);font:inherit;font-weight:600;font-size:var(--fs-meta);cursor:pointer;transition:background var(--t),border-color var(--t)}
[data-tema="documento"] .doc-add:hover{background:var(--azul-50);border-color:var(--azul-500)}

[data-tema="documento"] .doc-ajustes{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--sp-3) var(--sp-5);border:0;border-top:1px solid var(--fio);background:transparent;color:var(--tinta-2);font:inherit;font-weight:600;font-size:var(--fs-meta);cursor:pointer;transition:background var(--t)}
[data-tema="documento"] .doc-ajustes:hover{background:var(--azul-50)}
[data-tema="documento"] .doc-ajustes span{color:var(--tinta-3);font-size:1.1rem}

[data-tema="documento"] .doc-totais{padding:var(--sp-4) var(--sp-5) var(--sp-5);background:#fbfcfe;border-top:1px solid var(--borda)}
[data-tema="documento"] .doc-tot{display:flex;justify-content:space-between;padding:4px 0;font-size:var(--fs-meta);color:var(--tinta-2);font-variant-numeric:tabular-nums}
[data-tema="documento"] .doc-tot strong{font-weight:600;color:var(--tinta-2)}
[data-tema="documento"] .doc-gratis strong{color:var(--wa)}
[data-tema="documento"] .doc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1.5px solid var(--tinta)}
[data-tema="documento"] .doc-total span{font-weight:700;color:var(--tinta);font-size:var(--fs-body)}
[data-tema="documento"] .doc-total strong{font-weight:800;color:var(--tinta);font-size:1.55rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* editor por toque da nota: reusa a folha (bottom-sheet); esconde títulos de
   zona redundantes (o nome já está no topo da folha) e arruma o cliente em grade */
.folha-doc #doc-ed-corpo{margin:2px 0 var(--sp-4)}
.folha-doc .r-zona-tit,.folha-doc .r-zona.r-ajustes>.r-zona-tit{display:none}
.folha-doc .cliente-campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.folha-doc .cliente-campos .campo-largo{grid-column:1 / -1}
.folha-doc .r-zona{padding:0}
.folha-doc .doc-ed-ok{margin-top:var(--sp-2)}
/* ícones dos materiais monocromáticos também no editor (Stripe limpo) */
[data-tema="documento"] .mat-ic.cor-ac2,[data-tema="documento"] .mat-ic.cor-ac3,[data-tema="documento"] .mat-ic.cor-rejunte,[data-tema="documento"] .mat-ic.cor-nivelador,[data-tema="documento"] .mat-ic.cor-cunha{color:var(--tinta-3);background:#eef1f6}

/* ============================================================
   TEMA "SHOWROOM" — premium ESCURO: carvão + acento dourado, com o
   TOTAL em destaque (hero). Editável por toque (reusa os editores).
   ============================================================ */
:root[data-tema="showroom"]{
  --tinta:#f2efe9; --tinta-2:#b4aea3; --tinta-3:#817a6f;
  --nuvem:#0d0e12; --branco:#181a20; --borda:#2b2e37; --fio:#24262e;
  --azul-900:#c8a24a; --azul-800:#d8b56f; --azul-600:#d8b56f; --azul-500:#e6cd97;
  --azul-100:#332c1c; --azul-50:#201d16;
  --wa:#4ade80; --erro:#f2787c;
  --r-sm:9px; --r:11px; --r-lg:16px;
  --sombra-flat:0 1px 2px rgba(0,0,0,.5);
  --sombra:0 14px 36px -12px rgba(0,0,0,.75);
  --sombra-sm:0 0 0 1px rgba(255,255,255,.05);
}
[data-tema="showroom"] body{background:radial-gradient(120% 55% at 50% 0%, #1a1c23 0%, #0d0e12 58%)}
/* botão primário dourado → texto escuro pra contraste; fantasma clareado */
[data-tema="showroom"] .btn,[data-tema="showroom"] .btn-topo-primary{color:#181a20;font-weight:700}
[data-tema="showroom"] .btn-fantasma,[data-tema="showroom"] .btn-topo-ghost{color:var(--tinta);box-shadow:inset 0 0 0 1px var(--borda);background:transparent}
[data-tema="showroom"] .icone-btn{color:var(--tinta-2)}
[data-tema="showroom"] .icone-btn[aria-current="true"]{background:var(--azul-100);color:var(--azul-500)}
[data-tema="showroom"] .barra-valor,[data-tema="showroom"] .barra-total strong,[data-tema="showroom"] .barra-total span{color:var(--tinta)}
/* ícones dos materiais (no editor) monocromáticos no escuro */
[data-tema="showroom"] .mat-ic.cor-ac2,[data-tema="showroom"] .mat-ic.cor-ac3,[data-tema="showroom"] .mat-ic.cor-rejunte,[data-tema="showroom"] .mat-ic.cor-nivelador,[data-tema="showroom"] .mat-ic.cor-cunha{color:var(--tinta-2);background:#2a2d36}

/* layout showroom */
[data-tema="showroom"] #documento{padding-top:var(--sp-4)}
[data-tema="showroom"] .sh-cliente{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);width:100%;padding:12px var(--sp-4);background:var(--branco);border:1px solid var(--borda);border-radius:999px;color:var(--tinta-2);font:inherit;font-weight:600;font-size:var(--fs-meta);cursor:pointer;transition:border-color var(--t)}
[data-tema="showroom"] .sh-cliente:hover{border-color:var(--azul-800)}
[data-tema="showroom"] .sh-cliente>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-tema="showroom"] .sh-cliente>span:last-child{color:var(--azul-500);font-size:1.1rem;flex:none}

[data-tema="showroom"] .sh-hero{text-align:center;padding:var(--sp-7) var(--sp-4) var(--sp-6);display:flex;flex-direction:column;gap:6px}
[data-tema="showroom"] .sh-hero-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-3);font-weight:600}
[data-tema="showroom"] .sh-hero-tot{font-size:3rem;line-height:1;font-weight:800;color:var(--azul-500);letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(216,181,111,.28)}
[data-tema="showroom"] .sh-hero-sub{font-size:var(--fs-meta);color:var(--tinta-3)}

[data-tema="showroom"] .sh-lista{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra-flat)}
[data-tema="showroom"] .sh-item{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);width:100%;padding:var(--sp-4);border:0;border-bottom:1px solid var(--fio);background:transparent;text-align:left;cursor:pointer;transition:background var(--t)}
[data-tema="showroom"] .sh-item:last-child{border-bottom:0}
[data-tema="showroom"] .sh-item:hover{background:rgba(255,255,255,.03)}
[data-tema="showroom"] .sh-item-nome{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;font-weight:600;color:var(--tinta);font-size:.98rem}
[data-tema="showroom"] .sh-item-sub{font-weight:400;color:var(--tinta-3);font-size:var(--fs-meta)}
[data-tema="showroom"] .sh-item-val{font-weight:700;color:var(--azul-500);font-variant-numeric:tabular-nums;white-space:nowrap}
[data-tema="showroom"] .sh-vazio{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--tinta-3)}

[data-tema="showroom"] .sh-add{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
[data-tema="showroom"] .sh-add button{flex:1;padding:14px;border:1px solid var(--borda);border-radius:var(--r);background:var(--branco);color:var(--azul-500);font:inherit;font-weight:700;cursor:pointer;transition:border-color var(--t),background var(--t)}
[data-tema="showroom"] .sh-add button:hover{border-color:var(--azul-800);background:rgba(216,181,111,.07)}

[data-tema="showroom"] .sh-ajustes{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);width:100%;margin-top:var(--sp-4);padding:var(--sp-4);border:1px solid var(--borda);border-radius:var(--r);background:var(--branco);color:var(--tinta-2);font:inherit;font-weight:600;font-size:var(--fs-meta);cursor:pointer;transition:border-color var(--t)}
[data-tema="showroom"] .sh-ajustes:hover{border-color:var(--azul-800)}
[data-tema="showroom"] .sh-ajustes>span:last-child{color:var(--azul-500);font-size:1.1rem;flex:none}

/* ============================================================
   TEMA "BALCÃO" — terminal de venda (PDV). Claro, quente, tátil:
   visor com o total (caixa registradora), cupom de itens e teclas
   grandes com profundidade física. Editável por toque.
   ============================================================ */
:root[data-tema="balcao"]{
  --tinta:#1e2a24; --tinta-2:#4c5a52; --tinta-3:#8a968d;
  --nuvem:#eceae3; --branco:#fbfaf6; --borda:#dcdacd; --fio:#e7e5da;
  --azul-900:#1c6045; --azul-800:#227a56; --azul-600:#238a5f; --azul-500:#3aa778;
  --azul-100:#d7ecdf; --azul-50:#eaf4ee;
  --wa:#1fa855; --erro:#c8514a;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --sombra-flat:0 1px 2px rgba(30,42,36,.05);
  --sombra:0 20px 44px -22px rgba(30,42,36,.42);
  --sombra-sm:0 1px 2px rgba(30,42,36,.06);
}
[data-tema="balcao"] body{background:linear-gradient(180deg,#f1efe8 0%, #eceae3 42%)}

/* layout balcão */
[data-tema="balcao"] #documento{padding-top:var(--sp-4)}
[data-tema="balcao"] .balcao{display:flex;flex-direction:column;gap:var(--sp-4)}

[data-tema="balcao"] .bl-cliente{display:flex;flex-direction:column;gap:2px;align-items:flex-start;width:100%;padding:11px var(--sp-4);background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);text-align:left;font:inherit;cursor:pointer;transition:border-color var(--t)}
[data-tema="balcao"] .bl-cliente:hover{border-color:var(--azul-600)}
[data-tema="balcao"] .bl-cli-rot{font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--tinta-3);font-weight:700}
[data-tema="balcao"] .bl-cli-val{font-weight:600;color:var(--tinta);font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
[data-tema="balcao"] .bl-cliente:not(.tem) .bl-cli-val{color:var(--tinta-3);font-weight:500}

/* visor: painel escuro estilo display de caixa, com o total em destaque */
[data-tema="balcao"] .bl-visor{display:flex;flex-direction:column;gap:6px;text-align:center;padding:var(--sp-6) var(--sp-4);border-radius:var(--r-lg);background:linear-gradient(180deg,#1f6a4c,#164a37);color:#eafaf1;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 32px -18px rgba(28,96,69,.6)}
[data-tema="balcao"] .bl-visor-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:#9fd9bd;font-weight:700}
[data-tema="balcao"] .bl-visor-tot{font-size:3.1rem;line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
[data-tema="balcao"] .bl-visor-sub{font-size:var(--fs-meta);color:#9fd9bd;font-variant-numeric:tabular-nums}

/* cupom: cada item é uma placa tátil */
[data-tema="balcao"] .bl-cupom{display:flex;flex-direction:column;gap:var(--sp-2)}
[data-tema="balcao"] .bl-item{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);width:100%;padding:14px var(--sp-4);background:var(--branco);border:1px solid var(--borda);border-radius:var(--r);text-align:left;font:inherit;cursor:pointer;transition:border-color var(--t),transform var(--t)}
[data-tema="balcao"] .bl-item:hover{border-color:var(--azul-600)}
[data-tema="balcao"] .bl-item:active{transform:scale(.99)}
[data-tema="balcao"] .bl-item-nome{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;font-weight:700;color:var(--tinta)}
[data-tema="balcao"] .bl-item-sub{font-weight:500;color:var(--tinta-2);font-size:var(--fs-meta)}
[data-tema="balcao"] .bl-item-val{font-weight:800;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.05rem}
[data-tema="balcao"] .bl-vazio{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--tinta-3);background:var(--branco);border:1px dashed var(--borda);border-radius:var(--r)}

/* teclas grandes com profundidade física (afundam ao tocar) */
[data-tema="balcao"] .bl-teclas{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-1)}
[data-tema="balcao"] .bl-tecla{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:var(--sp-5) var(--sp-3);border:0;border-radius:var(--r);background:var(--azul-800);color:#fff;font:inherit;font-weight:800;font-size:1.02rem;cursor:pointer;box-shadow:0 4px 0 var(--azul-900);transition:transform var(--t),box-shadow var(--t)}
[data-tema="balcao"] .bl-tecla:hover{background:var(--azul-600)}
[data-tema="balcao"] .bl-tecla:active{transform:translateY(3px);box-shadow:0 1px 0 var(--azul-900)}
[data-tema="balcao"] .bl-tecla-ic{font-size:1.35rem;line-height:1}

[data-tema="balcao"] .bl-ajustes{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);width:100%;padding:12px var(--sp-4);background:transparent;border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta-2);font:inherit;font-weight:600;font-size:var(--fs-meta);cursor:pointer;transition:border-color var(--t)}
[data-tema="balcao"] .bl-ajustes:hover{border-color:var(--azul-600)}
[data-tema="balcao"] .bl-ajustes>span:last-child{color:var(--azul-600);font-size:1.1rem;flex:none}