/* =====================================================================
   IMPERIUM — Folha de estilo partilhada
   Usada por login.html, registo.html e admin.html.
   Base extraída do "Caixa Imperium.html" para manter identidade idêntica.
   ===================================================================== */
:root{
  color-scheme: dark;
  /* Tipografia da marca: Montserrat em todo o lado (títulos a bold/extra-bold). */
  --fonte-titulo:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fonte-corpo:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Marca — monocromático: #000000 · #2B2B2B · #808080 · #FFFFFF */
  --preto:#000000; --grafite:#141414; --carvao:#1E1E1E; --carvao2:#2B2B2B;
  --linha:#3A3A3A; --linha2:#4D4D4D;
  --ouro:#FFFFFF; --ouro-claro:#FFFFFF; --ouro-fundo:#2B2B2B;
  --texto:#FFFFFF; --texto2:#B3B3B3; --texto3:#808080;
  /* Séries — escala de cinzentos com degraus bem separados */
  --s1:#FFFFFF; --s2:#8F8F8F; --s3:#D0D0D0; --s4:#5E5E5E;
  --s5:#AFAFAF; --s6:#3D3D3D; --s7:#EAEAEA; --s8:#707070;
  /* Estado (vermelho reservado a alertas, como na identidade Imperium) */
  --bom:#FFFFFF; --aviso:#B3B3B3; --grave:#808080; --critico:#D03B3B;
  /* Semáforo do stock — única exceção ao monocromático, pedida pelo dono:
     verde (em stock), amarelo (restam poucos), vermelho (falta de stock).
     Não usar estas cores fora do controlo de stock. */
  --stock-ok:#3FA95A; --stock-pouco:#E0A42B; --stock-falta:#D03B3B;
  /* Chrome de gráfico */
  --grid:#2B2B2B; --eixo:#4D4D4D; --mudo:#808080;

  /* ---------------------------------------------------------------
     ESCALA (30/07/2026) — pedido do dono: "harmonize todo o layout,
     pode usar a proporção áurea". Os degraus são a série de Fibonacci
     (3·5·8·13·21·34·55), cuja razão entre degraus tende para φ ≈ 1,618.
     Vantagem prática sobre uma escala arbitrária: qualquer valor novo
     tem um degrau óbvio a que pertencer, e por isso o ecrã inteiro
     respira ao mesmo ritmo sem ser preciso decidir caso a caso.

     Como usar:
       e1/e2  detalhe dentro de um elemento (ícone ao texto, pílulas)
       e3     espaço entre irmãos próximos (chips, botões de uma linha)
       e4     ritmo geral: entre blocos, entre campos, títulos ao corpo
       e5     respiração interna de um cartão ou pop-up
       e6/e7  separações de secção inteira
     Onde um valor herdado já estava a um pixel do degrau (14→13, 18→21)
     passou para o degrau: a diferença não se vê, a coerência sim. */
  --e1:3px; --e2:5px; --e3:8px; --e4:13px; --e5:21px; --e6:34px; --e7:55px;
  /* Raios pela mesma série, para os cantos acompanharem as distâncias. */
  --raio-xs:5px; --raio-sm:8px; --raio:13px; --raio-lg:21px;
  /* Tipos: degraus separados o suficiente para a hierarquia se ver de
     relance, sem saltos que partam a leitura de um parágrafo. */
  --t-micro:10px; --t-mini:11px; --t-peq:13px; --t-base:14px;
  --t-md:16px; --t-lg:21px; --t-xl:26px;
  --sombra:0 2px 8px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow-x:hidden}
body{
  font-family:var(--fonte-corpo);
  background:var(--preto);color:var(--texto);line-height:1.5;font-size:15px;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}

/* ---------- Acessibilidade e Foco (WCAG 2.2) ---------- */
:focus-visible{
  outline:2px solid var(--ouro);
  outline-offset:2px;
}
*:focus:not(:focus-visible){
  outline:none;
}

/* ---------- Scrollbars personalizados ---------- */
::-webkit-scrollbar{
  width:6px;
  height:6px;
}
::-webkit-scrollbar-track{
  background:var(--preto);
}
::-webkit-scrollbar-thumb{
  background:var(--linha2);
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--texto3);
}

/* ---------- Cabeçalho ---------- */
/* Cabeçalho + navegação colam como UM só bloco (sem faixa a passar no meio). */
.topo{position:sticky;top:0;z-index:50}
header{
  background:rgba(0,0,0,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}
/* Grid de 3 colunas: título à esquerda, símbolo sempre centrado ao meio do
   cabeçalho (independente da largura do título ou do bloco da direita), e
   nome/hora + Sair à direita — sem alterar a altura/padding do cabeçalho.
   Fio fino + fundo translúcido em vez da faixa grossa a branco: mais sóbrio,
   pedido do dono depois de ver o cabeçalho do UDECK como referência. */
.hd{max-width:1240px;margin:0 auto;padding:14px 22px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.hd-esq{min-width:0;justify-self:start}
.hd-dir{min-width:0;justify-self:end;display:flex;align-items:center;gap:14px}
.logo{
  width:40px;height:40px;flex:0 0 40px;border:2px solid var(--ouro);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--ouro);font-size:15px;letter-spacing:.5px
}
/* Logo horizontal (wordmark). Fora do cabeçalho desde 29/07/2026 — ver a nota
   do símbolo, a seguir —, mas continua disponível para outros ecrãs. */
.logo-h{height:30px;display:flex;align-items:center;justify-content:center;justify-self:center}
.logo-h svg{height:100%;width:auto;display:block}
/* Símbolo isolado (monograma "Simbolo Branco0") — a peça central do cabeçalho,
   por pedido do dono a 29/07/2026 ("Instruções 3"). O tamanho é o do bloco
   mais alto da direita (nome + data, ~32px), por isso o cabeçalho fica com a
   MESMA altura de antes: é o texto da direita que a manda, não o símbolo.
   Este desenho quase enche o viewBox de 1080, ao contrário do anterior, por
   isso não precisa de scale() nem de recorte para parecer cheio. */
.logo-sim{
  width:32px;height:32px;flex:0 0 32px;
  display:flex;align-items:center;justify-content:center;justify-self:center
}
.logo-sim svg{width:100%;height:100%;display:block}
.hd h1{font-family:var(--fonte-titulo);font-size:17px;font-weight:600;letter-spacing:.2px;line-height:1.2}
.hd .sub{font-size:10.5px;color:var(--texto2);letter-spacing:2px;text-transform:uppercase}
.hd .agora{font-size:11px;color:var(--texto2);text-align:right;line-height:1.35}
.hd .agora b{color:var(--ouro-claro);display:block;font-size:13px}
.hd .sair{
  background:var(--carvao2);color:var(--texto);border:1px solid var(--linha2);
  border-radius:9px;padding:8px 13px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap
}
.hd .sair:hover{border-color:var(--texto3)}

/* ---------- Navegação ---------- */
nav{
  position:relative;
  background:var(--preto);
  border-bottom:1px solid var(--linha);overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none
}
/* Sem scroll-behavior:smooth de propósito: com ele, trazer a aba escolhida
   para o ecrã fica dependente de uma animação que nem todos os ambientes
   correm, e a barra ficava parada no sítio errado. O deslize com o dedo é
   nativo e não é afetado por isto. */
nav::-webkit-scrollbar{display:none}
/* A navegação desliza suavemente sem máscaras que cortem os botões ativos */
.navin{max-width:1240px;margin:0 auto;display:flex;gap:3px;padding:0 10px}
/* Onde a barra pode ter de deslizar, o invólucro cresce com as abas — sem isso
   o padding da direita desaparecia no fim do deslize e a última aba ficava
   colada ao bordo. Acima disto mantém-se centrado nos 1240px do resto. */
@media(max-width:1260px){.navin{width:max-content;min-width:100%}}
/* Aba selecionada: fundo branco e letra preta (pedido do dono, 27/07/2026) —
   a mesma regra vale para todos os botões de escolha do sistema (.aba, .chip,
   .periodo button). */
.navb{
  flex:0 0 auto;padding:10px 11px;margin:6px 0;background:none;border:none;cursor:pointer;
  color:var(--texto2);font-size:13px;font-weight:600;letter-spacing:.3px;border-radius:9px;
  white-space:nowrap;transition:background .15s,color .15s
}
.navb:hover{color:var(--texto);background:var(--carvao)}
.navb.on{background:#FFFFFF;color:#000000}
/* Contador de avisos na aba (ex.: produtos em rutura de stock). */
.navb .badge{
  display:inline-block;min-width:18px;padding:0 5px;margin-left:7px;border-radius:999px;
  background:var(--stock-falta);color:#fff;font-size:10px;font-weight:800;line-height:18px;
  text-align:center;vertical-align:1px
}
.navb.on .badge{background:#000000;color:#FFFFFF}
/* Ponto de estado da gravação, junto ao rótulo "Dados" (pedido do dono,
   28/07/2026): verde tudo guardado, amarelo gravado aqui mas com pendência ou
   falha num destino remoto, vermelho falhou a gravar neste navegador. Também
   reutilizado, maior, no cartão "Estado da gravação" em Dados. */
.pt-sinc{
  display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:7px;
  vertical-align:2px;background:var(--texto3)
}
.pt-sinc.ok{background:var(--stock-ok)}
.pt-sinc.aviso,.pt-sinc.aguarda{background:var(--stock-pouco)}
.pt-sinc.erro{background:var(--stock-falta);animation:pulsa-sinc 1.4s ease-in-out infinite}
@keyframes pulsa-sinc{0%,100%{opacity:1}50%{opacity:.35}}
/* Barra de estado da gravação, a toda a largura no topo de Dados. */
.sinc-barra{padding:14px 18px}
.sinc-barra-in{display:flex;align-items:center;gap:12px}
.sinc-barra-in #sinc-dot2{width:11px;height:11px;flex:0 0 11px;margin:0}
.sinc-barra-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sinc-barra-tx b{font-size:13px;font-weight:700}
.sinc-barra-tx span{font-size:12px;color:var(--texto2);line-height:1.4}
@media(max-width:560px){
  .sinc-barra-in{flex-wrap:wrap}
  .sinc-barra-tx{flex-basis:100%;order:1}
  .sinc-barra-in button{order:2;margin-left:23px}
}

main{max-width:1240px;margin:0 auto;padding:var(--e5) var(--e4) 90px}
.view{display:none}
.view.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Blocos base ---------- */
.card{background:var(--grafite);border:1px solid var(--linha);border-radius:var(--raio);padding:var(--e5);max-width:100%;box-sizing:border-box;min-width:0}
.card+.card{margin-top:var(--e4)}
.card>h2,.secao{
  font-family:var(--fonte-titulo);font-size:var(--t-peq);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ouro-claro);margin-bottom:var(--e4);display:flex;align-items:center;gap:var(--e3)
}
.secao .n{
  width:20px;height:20px;flex:0 0 20px;background:var(--ouro);color:#000;border-radius:50%;
  font-size:var(--t-mini);font-weight:800;display:flex;align-items:center;justify-content:center
}
.secao .dir{margin-left:auto;font-size:var(--t-mini);font-weight:500;letter-spacing:0;color:var(--texto2);text-transform:none}
/* Divisória dentro de um card que agrupa vários blocos de ações — mais
   discreta que .secao, para não competir com o título da própria caixa. */
.sub-secao{
  font-size:var(--t-mini);font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--texto2);margin-bottom:var(--e3);padding-bottom:6px;border-bottom:1px solid var(--linha)
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4)}
@media(max-width:1100px){.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
/* Dentro de uma grelha os cartões são células, não irmãos empilhados: a margem
   de .card+.card empurrava-os para baixo e desalinhava as colunas. */
.grid2>.card+.card,.grid3>.card+.card,.dupla>div>.card:first-child{margin-top:0}
/* Cartões lado a lado acabam à mesma altura e o conteúdo começa em cima.
   O min-width:0 é essencial: sem ele uma célula da grelha nunca encolhe abaixo
   do conteúdo, e as tabelas (min-width:640px) empurravam o cartão para fora
   do ecrã em vez de deixarem o .tab-wrap fazer scroll. */
.grid2>.card,.grid3>.card{display:flex;flex-direction:column;min-width:0}
.grid2>*,.grid3>*,.dupla>*{min-width:0}
.grid2>.card>.nota:last-child,.grid3>.card>.nota:last-child{margin-top:auto}
/* Respiro entre blocos empilhados dentro de uma vista (.card, .grid2, .grid3,
   .kpis, .filtros, .abas...). ".card+.card" só cobria cartão-após-cartão: uma
   .grid2 encostada a um .card antes ou depois dela (muito comum — Dashboard,
   Comissões, Dados) ficava com 0px de vão, tudo amontoado. Esta regra cobre
   QUALQUER par de blocos irmãos diretos de uma vista, sem ter de enumerar
   cada combinação. Margens de blocos normais colapsam (fica o maior valor),
   por isso não soma com o margin-bottom:16px do .kpis nem dobra o gap onde
   ".card+.card" já se aplicava — o resultado é sempre um único respiro. */
.view>*+*{margin-top:var(--e4)}

/* ---------- Campos ---------- */
label.lab{display:block;font-size:var(--t-mini);color:var(--texto2);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:var(--e2);font-weight:600}
/* Dois campos lado a lado (.linha-campos) ficavam com as caixas
   desalinhadas sempre que um rótulo é mais comprido do que o outro — ex.:
   "Preço de compra (€ por unidade)" quebra em duas linhas, "Fornecedor
   (opcional)" cabe numa só, e a caixa do primeiro ficava mais abaixo.
   Reservar sempre a altura de 2 linhas no rótulo mantém as caixas dos dois
   campos na mesma linha. Só aqui — um campo sozinho fora de .linha-campos
   não precisa desta reserva e ficaria só com um espaço a mais por baixo do
   rótulo. */
.linha-campos label.lab{min-height:3em}
.inp,select.inp,textarea.inp{
  width:100%;max-width:100%;box-sizing:border-box;min-width:0;min-height:42px;padding:10px var(--e4);background:var(--preto);border:1px solid var(--linha2);
  border-radius:var(--raio-sm);outline:none;transition:border-color .15s;
  -webkit-appearance:none;appearance:none
}
input[type="date"].inp, input[type="time"].inp, input[type="datetime-local"].inp{
  -webkit-appearance:none;appearance:none;
  max-width:100%;box-sizing:border-box;min-width:0;
}
input[type="date"]::-webkit-date-and-time-value{
  text-align:center;
  line-height:1.4
}
.inp:focus{border-color:var(--ouro)}
select.inp{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--texto2) 50%),linear-gradient(135deg,var(--texto2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.campo{margin-bottom:var(--e4);max-width:100%;min-width:0}
.linha-campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);max-width:100%;min-width:0}
/* Um campo logo a seguir a uma linha de dois: sem isto o rótulo de baixo
   encostava-se às caixas de cima (visto na Caixa, com "O cliente consumiu"). */
.linha-campos+.campo{margin-top:var(--e4)}

/* ---------- Botões ---------- */
.btn{
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:10px var(--e5);background:var(--ouro);color:#000;border:none;border-radius:var(--raio-sm);
  font-weight:700;font-size:var(--t-base);letter-spacing:.4px;cursor:pointer;transition:filter .15s, transform .1s;
  text-decoration:none
}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.grande{min-height:46px;padding:var(--e4) var(--e5);font-size:var(--t-md)}
.btn.sec{background:var(--carvao2);color:var(--texto);border:1px solid var(--linha2)}
.btn.perigo{background:var(--critico);color:#fff}
.btn.mini{min-height:36px;padding:6px var(--e4);font-size:12px;border-radius:var(--raio-xs);font-weight:600}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- Chips / seletores ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--e3)}
.chip{
  padding:8px var(--e4);background:var(--carvao);border:1px solid var(--linha2);border-radius:999px;
  font-size:var(--t-peq);cursor:pointer;transition:all .15s;font-weight:500;min-height:36px;display:inline-flex;align-items:center
}
.chip:hover{border-color:var(--texto3)}
.chip.on{background:var(--ouro);border-color:var(--ouro);color:#000;font-weight:700}
.chip .pt{font-size:var(--t-mini);opacity:.75;margin-left:var(--e2)}

.abas{display:flex;gap:var(--e3);margin-bottom:var(--e4)}
.aba{
  flex:1;padding:10px 10px;text-align:center;background:var(--carvao);
  border:1px solid var(--linha2);border-radius:var(--raio-sm);cursor:pointer;
  font-weight:600;font-size:var(--t-base);transition:all .15s;min-height:40px;display:inline-flex;align-items:center;justify-content:center
}
.aba.on{background:#FFFFFF;border-color:#FFFFFF;color:#000000;font-weight:700}

/* ---------- Catálogo de itens (registo) ---------- */
.busca{position:relative;margin-bottom:12px}
.busca .inp{padding-left:38px}
.busca svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5;pointer-events:none}
.itens{max-height:340px;overflow-y:auto;border:1px solid var(--linha);border-radius:11px;background:var(--preto)}
.item{
  display:flex;align-items:center;gap:12px;padding:11px 13px;cursor:pointer;
  border-bottom:1px solid var(--carvao);transition:background .12s;min-height:44px
}
.item:last-child{border-bottom:none}
.item:hover{background:var(--carvao)}
.item.on{background:var(--ouro-fundo)}
.item .nome{flex:1;font-size:13.5px;line-height:1.3}
.item .tag{font-size:10px;color:var(--texto3);text-transform:uppercase;letter-spacing:.8px}
.item .preco{font-weight:700;font-size:13.5px;color:var(--ouro-claro);white-space:nowrap}
.item .box{
  width:20px;height:20px;flex:0 0 20px;border:2px solid var(--linha2);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#000;font-weight:800
}
.item.on .box{background:var(--ouro);border-color:var(--ouro)}

/* ---------- Permissões de um cargo (Equipa → Cargos) ---------- */
.perm{
  display:flex;align-items:flex-start;gap:var(--e4);padding:10px var(--e4);cursor:pointer;
  background:var(--preto);border:1px solid var(--linha);border-radius:var(--raio-sm);min-height:44px
}
.perm:hover{border-color:var(--linha2)}
.perm input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--ouro);cursor:pointer}
.perm b{display:block;font-size:var(--t-peq);font-weight:600;line-height:1.3}
.perm small{display:block;font-size:var(--t-mini);color:var(--texto3);margin-top:2px}

/* ---------- Catálogo: secções e itens arrastáveis ---------- */
/* Cabeçalho de secção (categoria) — arrasta para trocar a ordem das secções. */
.ct-cab{
  display:flex;align-items:center;gap:10px;padding:var(--e4);margin:var(--e5) 0 var(--e3);
  background:var(--carvao);border:1px solid var(--linha);border-radius:var(--raio-sm);
  font-family:var(--fonte-titulo);font-size:12px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--ouro-claro)
}
#ct-lista > .ct-cab:first-child{margin-top:0}
.ct-cab .ct-cont{
  flex:1;font-size:10.5px;font-weight:500;letter-spacing:.3px;
  text-transform:none;color:var(--texto3)
}
/* Item do catálogo — indentado sob a sua secção, como no quadro de reservas.
   A indentação (e5) é a mesma medida do padding do cartão: a lista alinha com
   a margem interna do bloco em vez de ficar a meio caminho de nada. */
.ct-item{
  display:flex;align-items:center;gap:var(--e4);padding:10px var(--e4);margin:0 0 var(--e2) var(--e5);
  background:var(--preto);border:1px solid var(--linha);
  border-left:3px solid var(--linha2);border-radius:var(--raio-sm);font-size:var(--t-peq)
}
.ct-item:hover{border-color:var(--linha2)}
.ct-item .ct-nome{flex:1;min-width:0}
.ct-item .ct-nome b{display:block;line-height:1.3}
.ct-item .ct-sub{font-size:var(--t-mini);color:var(--texto3);margin-top:2px}
.pega{color:var(--texto3);font-size:15px;flex:0 0 auto;line-height:1;user-select:none}

/* ---------- Carrinho ---------- */
.carrinho{border:1px solid var(--linha);border-radius:11px;overflow:hidden}
.cl{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--carvao);font-size:13px;min-height:48px}
.cl:last-child{border-bottom:none}
.cl .n{flex:1;line-height:1.3}
.cl .v{font-weight:700;color:var(--ouro-claro);white-space:nowrap}
.qtd{display:flex;align-items:center;gap:0;border:1px solid var(--linha2);border-radius:8px;overflow:hidden}
.qtd button{width:34px;height:34px;background:var(--carvao);border:none;cursor:pointer;font-size:16px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.qtd button:hover{background:var(--carvao2)}
.qtd span{min-width:32px;text-align:center;font-weight:700;font-size:13px}
.xrem{background:none;border:none;color:var(--critico);opacity:.6;cursor:pointer;font-size:12px;font-weight:600;line-height:1;padding:2px 4px;min-width:auto;min-height:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s ease;margin-left:4px}
.xrem:hover{opacity:1;background:rgba(208,59,59,.15)}
.vazio{padding:26px 14px;text-align:center;color:var(--texto3);font-size:13px}
/* Marca de campo obrigatório na etiqueta (30/07/2026: cliente e consumíveis
   passaram a ser de preenchimento obrigatório na Caixa). Um asterisco e mais
   nada — a etiqueta em cápsula que aqui esteve gritava mais do que o próprio
   rótulo e desalinhava a linha. */
.obrig{color:var(--ouro-claro);font-weight:700;margin-left:3px}

/* ---------- Resumo / totais ---------- */
.resumo{background:var(--preto);border:1px solid var(--linha);border-radius:var(--raio);padding:var(--e4);margin-top:var(--e4)}
.rl{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e4);padding:var(--e2) 0;font-size:var(--t-peq)}
.rl span:first-child{color:var(--texto2)}
.rl.total{border-top:1px solid var(--linha);margin-top:var(--e3);padding-top:var(--e4);font-size:var(--t-md);font-weight:700}
.rl.total span:first-child{color:var(--texto);font-size:var(--t-peq);text-transform:uppercase;letter-spacing:1px}
.rl.total span:last-child{color:var(--ouro-claro)}
.rl .neg{color:var(--grave)}
.rl .pos{color:var(--bom)}
/* Lucro por venda em destaque (pedido do dono, 29/07/2026): é a linha que
   decide se o preço presta, e estava a passar despercebida no meio das
   deduções. Ganha caixa própria, barra lateral e número grande. */
.lucro-dest{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:10px;padding:10px 14px;border-radius:10px;
  background:var(--carvao);border:1px solid var(--linha2);border-left:4px solid var(--bom)
}
.lucro-dest.neg{border-left-color:var(--grave)}
.lucro-dest .rot{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--texto)}
.lucro-dest .val{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--bom);font-variant-numeric:tabular-nums}
.lucro-dest.neg .val{color:var(--grave)}
.lucro-dest .sub{display:block;font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--texto3);margin-top:2px}
@media(max-width:520px){.lucro-dest .val{font-size:22px}}

/* ---------- KPIs ---------- */
/* Os KPIs são cartões dentro da mesma grelha do resto: mesmo raio, mesmo
   ritmo interno (e4 de padding, e2/e3 entre as três alturas de texto). */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:var(--e4);margin-bottom:var(--e4)}
.kpi{background:var(--grafite);border:1px solid var(--linha);border-radius:var(--raio);padding:var(--e4)}
.kpi .lab{font-size:var(--t-micro);color:var(--texto2);text-transform:uppercase;letter-spacing:1.1px;margin-bottom:var(--e2);font-weight:600}
.kpi .val{font-size:var(--t-lg);font-weight:700;letter-spacing:-.3px;line-height:1.15}
.kpi .sub{font-size:var(--t-mini);color:var(--texto3);margin-top:var(--e1)}
.kpi.ouro{border-color:var(--ouro);background:linear-gradient(180deg,#2B2B2B,#141414)}
.kpi.ouro .val{color:var(--ouro-claro)}
.kpi .val.bom{color:var(--bom)} .kpi .val.mau{color:var(--critico)}
/* custo previsto (comissões, mercadoria) — cinzento: não é alerta */
.kpi .val.custo{color:var(--texto2)}

/* ---------- Gráficos ---------- */
.chart{width:100%;display:block;overflow:visible}
.chart text{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.tick{fill:var(--mudo);font-size:10px}
.gline{stroke:var(--grid);stroke-width:1}
.baseline{stroke:var(--eixo);stroke-width:1}
.legenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:var(--texto2)}
.legenda i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
.chart-wrap{overflow-x:auto}
.tooltip{
  position:fixed;pointer-events:none;z-index:200;background:#000;border:1px solid var(--linha2);
  border-radius:9px;padding:9px 11px;font-size:12px;box-shadow:var(--sombra);opacity:0;transition:opacity .1s;
  max-width:230px
}
.tooltip.on{opacity:1}
.tooltip .tt{font-weight:700;margin-bottom:5px;color:var(--ouro-claro)}
.tooltip .tr{display:flex;justify-content:space-between;gap:14px;padding:1px 0}
.tooltip .tr span:last-child{font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Barras horizontais ----------
   Engrossadas a 30/07/2026 a pedido do dono: a 9px o preenchimento quase não se
   distinguia do trilho num ecrã com brilho baixo. A 20px lê-se a olho, e o
   trilho ganha contorno para se ver onde acaba a barra mesmo a 0%. */
.hbar{margin-bottom:var(--e4)}
.hbar .top{display:flex;justify-content:space-between;gap:var(--e4);font-size:var(--t-peq);margin-bottom:var(--e2)}
.hbar .top b{font-weight:600}
.hbar .top .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.trilho{
  height:var(--e4);background:var(--carvao);border:1px solid var(--linha2);
  border-radius:999px;overflow:hidden
}
/* min-width: uma fatia mínima marca presença — sem isto, 0,3% desaparecia e a
   linha parecia não ter barra nenhuma. */
.preench{height:100%;min-width:var(--e1);border-radius:999px;transition:width .4s ease}
/* A legenda por baixo da barra é texto solto, não uma .nota: com a caixa e a
   barra dourada da .nota, cinco barras seguidas viravam cinco caixas empilhadas
   e a barra — que é o que interessa ver — desaparecia no meio delas. */
.hbar .nota{
  background:none;border:none;border-radius:0;padding:0;margin-top:var(--e2);
  font-size:var(--t-mini);color:var(--texto3);line-height:1.4
}
/* Barra empilhada que resume a cascata acima das .hbar (dashboard e despesas). */
.pilha{
  display:flex;height:var(--e5);border-radius:999px;overflow:hidden;gap:2px;margin-bottom:var(--e5);
  border:1px solid var(--linha2)
}

/* ---------- Tabelas ---------- */
.tab-wrap{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio)}
table{width:100%;border-collapse:collapse;font-size:var(--t-peq);min-width:640px}
th{
  text-align:left;padding:var(--e4);background:var(--carvao);color:var(--texto2);
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:1px;font-weight:700;white-space:nowrap;
  position:sticky;top:0;z-index:2
}
td{padding:10px var(--e4);border-top:1px solid var(--carvao);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.025)}
/* O "€" anda sempre colado ao número (o eur() usa espaço inquebrável) e a
   célula não parte a meio: sem o nowrap, "15,00 €" caía para duas linhas em
   colunas estreitas. */
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Célula com duas alturas de informação (nome + login, cargo + estado). Serve
   para juntar colunas e a tabela caber no ecrã sem scroll lateral. */
.cel2{line-height:1.3}
.cel2 small{display:block;font-size:10.5px;color:var(--texto3);font-weight:500;margin-top:3px}
tbody tr.tot td{background:var(--carvao);font-weight:700;border-top:2px solid var(--linha2)}
/* Linha de título de secção dentro de uma tabela (Insumos, 30/07/2026): o
   catálogo agrupa com .ct-cab, mas ali a lista é de <div>; aqui tem de ser uma
   <tr> para as colunas continuarem alinhadas por baixo. */
tbody tr.sec-tr td{background:var(--carvao);border-top:2px solid var(--linha2);padding:9px 12px}
tbody tr.sec-tr:hover td{background:var(--carvao)}
/* O flex vive num <div> dentro da célula: pô-lo na própria <td> tirava-a do
   layout da tabela e a linha deixava de ocupar a largura toda. */
.sec-in{display:flex;align-items:center;gap:10px}
.sec-in b{font-size:12px;letter-spacing:1.1px;text-transform:uppercase}
.sec-in .sec-cont{color:var(--texto3);font-size:11.5px;flex:1}
tbody tr.sec-vazia td{color:var(--texto3);font-size:12px;text-align:center;padding:12px}
/* Coluna da pega: estreita, sem hipótese de empurrar o resto. */
td.pega-cel{width:26px;padding-left:12px;padding-right:0}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.4px;white-space:nowrap}
.pill.serv{background:#FFFFFF;color:#000}
.pill.prod{background:rgba(255,255,255,.16);color:#FFFFFF;box-shadow:inset 0 0 0 1px var(--linha2)}
.pill.ok{background:#FFFFFF;color:#000}
.pill.pend{background:transparent;color:var(--texto2);box-shadow:inset 0 0 0 1px var(--linha2)}

/* Indicadores e Badges em Tema Escuro */
.badge-presenca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--carvao2, #212124);
  color: var(--texto, #f1f5f9);
  border: 1px solid var(--linha2, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.badge-presenca.clicavel {
  cursor: pointer;
}
.badge-presenca.clicavel:hover {
  background: var(--carvao, #2a2a2e);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.badge-cargo {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.badge-cargo.admin {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.dot-2d {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-2d.online { background-color: #10b981; box-shadow: 0 0 5px rgba(16, 185, 129, 0.5); }
.dot-2d.inativo { background-color: #f59e0b; box-shadow: 0 0 5px rgba(245, 158, 11, 0.5); }
.dot-2d.offline { background-color: #64748b; }
.dot-2d.expirada { background-color: #ef4444; box-shadow: 0 0 5px rgba(239, 68, 68, 0.5); }
.dot-2d.pendente { background-color: #3b82f6; box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
/* faturação */
.pill.fat{background:#FFFFFF;color:#000}
.pill.nfat{background:transparent;color:var(--texto2);box-shadow:inset 0 0 0 1px var(--linha2)}
/* Pílula clicável: descrições longas e listas deixam de esmagar a coluna —
   mostram um resumo e abrem o detalhe num pop-up. */
.pill.link{
  background:var(--carvao2);color:var(--texto);box-shadow:inset 0 0 0 1px var(--linha2);
  border:none;font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
  padding:6px 11px;max-width:100%;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.pill.link:hover{background:#FFFFFF;color:#000000;box-shadow:none}
.pill.link .qt{opacity:.65;font-weight:700;margin-left:5px}
/* Semáforo do stock — verde / amarelo / vermelho, como pedido. */
.pill.st-ok{background:var(--stock-ok);color:#04240F}
.pill.st-pouco{background:var(--stock-pouco);color:#2A1D00}
.pill.st-falta{background:var(--stock-falta);color:#FFFFFF}
.pill.st-nd{background:transparent;color:var(--texto3);box-shadow:inset 0 0 0 1px var(--linha2)}

/* ---------- Filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;margin-bottom:var(--e4)}
.filtros .inp{width:auto;min-width:132px;padding:var(--e3) var(--e4);font-size:var(--t-peq)}
.filtros select.inp{padding-right:34px}
.periodo{display:flex;gap:var(--e2);background:var(--carvao);padding:var(--e2);border-radius:var(--raio);flex-wrap:wrap}
.periodo button{
  padding:var(--e3) var(--e4);background:none;border:none;border-radius:var(--raio-sm);cursor:pointer;
  font-size:var(--t-peq);color:var(--texto2);font-weight:600;white-space:nowrap
}
.periodo button.on{background:var(--ouro);color:#000}

/* ---------- Avisos / toast ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);
  background:#FFFFFF;color:#000;padding:13px 22px;border-radius:11px;font-weight:700;font-size:14px;
  z-index:300;box-shadow:var(--sombra);transition:transform .3s cubic-bezier(.2,.8,.2,1);max-width:90vw;text-align:center
}
#toast.on{transform:translateX(-50%) translateY(0)}
#toast.erro{background:var(--critico);color:#fff}
#toast.aviso{background:var(--carvao2);color:#FFFFFF;box-shadow:var(--sombra),inset 0 0 0 1px var(--linha2)}
#nv-aviso{
  position:fixed;right:16px;bottom:26px;display:none;cursor:pointer;
  background:#FFFFFF;color:#000;padding:11px 18px;border-radius:11px;font-weight:700;font-size:13px;
  z-index:290;box-shadow:var(--sombra)
}
#nv-aviso.on{display:block}
/* Nota: bloco de explicação com barra à esquerda. É deliberadamente pesado —
   serve para parar o olho —, por isso só se usa uma vez por contexto. */
.nota{
  background:var(--carvao);border-left:3px solid var(--ouro);border-radius:0 var(--raio-sm) var(--raio-sm) 0;
  padding:var(--e4);font-size:var(--t-peq);color:var(--texto2);line-height:1.55
}
.nota b{color:var(--texto)}

/* ---------- Modal ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:150;display:none;
  align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)
}
.overlay.on{display:flex}
/* A calculadora tem overlay próprio (z-index acima) para poder abrir por cima
   de um formulário já aberto sem lhe apagar o que está escrito. */
.overlay.calc-over{z-index:180}
.overlay.calc-over .modal{max-width:360px}
.modal{
  background:var(--grafite);border:1px solid var(--linha2);border-radius:var(--raio-lg);
  padding:var(--e5);max-width:520px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--sombra)
}
.modal.largo, .modal.modal-largo {
  max-width: 860px;
}
.modal h3{font-size:var(--t-md);margin-bottom:var(--e4);color:var(--ouro-claro);letter-spacing:.3px}
.modal .acoes{display:flex;gap:var(--e3);margin-top:var(--e5)}
.modal .acoes .btn{flex:1}

/* ---------- Barra fixa de gravação (mobile) ---------- */
.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:linear-gradient(180deg,rgba(0,0,0,.85),var(--preto) 40%);
  border-top:1px solid var(--linha);padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:none
}
.barra-fixa.on{display:block}
.barra-fixa .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:13px}
.barra-fixa .tot{flex:1;line-height:1.2}
.barra-fixa .tot small{display:block;font-size:10px;color:var(--texto2);text-transform:uppercase;letter-spacing:1px}
.barra-fixa .tot b{font-size:21px;color:var(--ouro-claro);font-variant-numeric:tabular-nums}
.barra-fixa .btn{flex:0 0 auto;padding:14px 26px}

.dupla{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start}
@media(max-width:920px){.dupla{grid-template-columns:1fr}}
/* Caixa/Registo: as duas colunas terminam à mesma altura. A lista de itens
   estica-se para acompanhar a comanda em vez de deixar um vazio por baixo. */
.dupla.caixa{align-items:stretch}
.dupla.caixa>div{display:flex;flex-direction:column;min-width:0}
.dupla.caixa .card-itens{flex:1;display:flex;flex-direction:column;min-height:0}
/* A lista é posicionada em absoluto dentro do invólucro: assim o seu conteúdo
   não conta para a altura da linha da grelha (senão esticava tudo até caber o
   catálogo inteiro) e, ao mesmo tempo, preenche todo o espaço que sobra —
   sem zona morta por baixo. Quem manda na altura é a coluna da comanda. */
.dupla.caixa .itens-wrap{flex:1;position:relative;min-height:320px}
/* Precificador: as duas colunas alinham-se perfeitamente na grelha */
.dupla.precos{align-items:stretch;gap:16px}
.dupla.precos>div{display:flex;flex-direction:column;min-width:0}
.dupla.precos>div:first-child>.card{flex:1;display:flex;flex-direction:column}
.dupla.precos>div:last-child>.card:last-child{flex:1;display:flex;flex-direction:column}
.dupla.precos>div>.card+.card{margin-top:14px;display:flex;flex-direction:column}
#pr-fichas{flex:1;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;padding-right:2px}
#pr-fichas>.vazio{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 0;font-size:12px}
/* Cópias automáticas (em Dados): a grid2 estica o cartão até à altura do
   vizinho na mesma linha (Repositório online, tipicamente mais alto por ter
   mais campos). Em vez de deixar essa sobra como espaço morto no fundo do
   cartão, a lista de 5 cópias distribui-se por toda a altura disponível. */
.card-cresce{display:flex;flex-direction:column}
#cp-lista{flex:1;display:flex;flex-direction:column;justify-content:space-between}
#cp-lista>.vazio{flex:1;display:flex;align-items:center;justify-content:center;padding:0}
.dupla.caixa .itens-wrap .itens{position:absolute;inset:0;max-height:none}
@media(max-width:920px){
  .dupla.caixa .itens-wrap{position:static;min-height:0}
  .dupla.caixa .itens-wrap .itens{position:static;max-height:60vh;min-height:260px}
}
.mini-lista{font-size:12.5px}
.mini-lista .ml{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--carvao)}
.mini-lista .ml:last-child{border-bottom:none}
.mini-lista .ml b{font-weight:600}
.mini-lista .ml .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* =====================================================================
   NOVO — Ecrã de login (login.html)
   ===================================================================== */
.login-wrap{
  position:relative;overflow:hidden;
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  padding:32px 18px calc(32px + env(safe-area-inset-bottom));
  background:var(--preto);
}
/* Halo por cima do cartão: dá profundidade ao ecrã sem lhe pôr cor nenhuma. */
.login-wrap::before{
  content:"";position:absolute;inset:auto auto 100% 50%;width:900px;height:900px;
  transform:translate(-50%,58%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 62%)
}
.login-card{
  position:relative;width:100%;max-width:410px;background:var(--grafite);border:1px solid var(--linha);
  border-radius:20px;padding:38px 32px 32px;box-shadow:var(--sombra);
}
.login-sim{width:86px;height:86px;margin:0 auto 12px}
.login-sim svg{width:100%;height:100%;display:block}
.login-titulo{font-family:var(--fonte-titulo);text-align:center;font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--texto);margin-bottom:4px}
.login-sub{text-align:center;font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--texto3);margin-bottom:28px}
/* Os campos e o botão respiram por igual, em vez de cada um trazer a sua margem. */
.login-campos{display:flex;flex-direction:column;gap:17px}
.login-campos .campo{margin-bottom:0}
.login-campos .btn{margin-top:5px}
/* Erro à frente de quem escreve, dentro do cartão — não num aviso no fundo. */
.login-erro{
  margin:0;padding:11px 13px;border-radius:10px;font-size:12.5px;line-height:1.5;
  background:rgba(208,59,59,.14);border:1px solid rgba(208,59,59,.4);color:#FF9DA0
}
.login-esqueci{text-align:center;margin-top:16px}
.login-esqueci button{
  background:none;border:none;color:var(--texto2);font-size:12px;font-weight:600;
  cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:3px
}
.login-esqueci button:hover{color:var(--texto)}
.login-dica{
  margin:20px 0 0;padding-top:17px;border-top:1px solid var(--linha);
  text-align:center;font-size:12px;line-height:1.65;color:var(--texto2)
}
.login-dica b{color:var(--texto);font-weight:700}
.login-marca{
  position:relative;margin:0;color:var(--texto3);font-size:11px;letter-spacing:1.4px;text-transform:uppercase
}
.login-sec-lab{font-size:11px;color:var(--texto2);text-transform:uppercase;letter-spacing:1.2px;font-weight:600;margin:0 0 10px}
.login-colabs{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.login-colab{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 15px;background:var(--carvao);border:1px solid var(--linha2);border-radius:12px;
  cursor:pointer;transition:all .15s;font-weight:600
}
.login-colab:hover{border-color:var(--texto3)}
.login-colab.on{background:#FFFFFF;border-color:#FFFFFF;color:#000000}
.login-colab.on .av{background:#000000;border-color:#000000;color:#FFFFFF}
.login-colab.on .meta small{color:#3A3A3A}
.login-colab .av{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--carvao2);
  border:1px solid var(--linha2);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:var(--ouro-claro)
}
.login-colab .meta{flex:1;line-height:1.25}
.login-colab .meta small{display:block;font-size:11px;font-weight:500;color:var(--texto3)}
.login-sep{display:flex;align-items:center;gap:12px;color:var(--texto3);font-size:11px;
  letter-spacing:2px;text-transform:uppercase;margin:22px 0 18px}
.login-sep::before,.login-sep::after{content:"";flex:1;height:1px;background:var(--linha)}
.login-rodape{text-align:center;font-size:11px;color:var(--texto3);margin-top:22px;line-height:1.6}

/* =====================================================================
   NOVO — Revelação de comissão em estilo "gaming" (registo.html)
   ===================================================================== */
.gz{
  position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:20px;background:radial-gradient(900px 500px at 50% 20%, rgba(255,255,255,.08), rgba(0,0,0,.94) 60%);
  backdrop-filter:blur(5px)
}
.gz.on{display:flex;animation:gzfade .25s ease}
@keyframes gzfade{from{opacity:0}to{opacity:1}}
.gz-card{
  width:100%;max-width:440px;text-align:center;background:linear-gradient(180deg,#1b1b1b,#0a0a0a);
  border:1px solid var(--ouro);border-radius:22px;padding:34px 26px 28px;box-shadow:0 0 60px rgba(255,255,255,.12)
}
.gz-selo{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--texto2);margin-bottom:6px}
.gz-msg{font-family:var(--fonte-titulo);font-size:22px;font-weight:700;letter-spacing:.3px;margin-bottom:22px}
.gz-valor{
  font-family:var(--fonte-titulo);font-size:52px;font-weight:700;letter-spacing:-1px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  animation:gzpop .5s cubic-bezier(.2,1.3,.4,1) both
}
@keyframes gzpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.gz-valor small{display:block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--texto2);margin-top:10px}
.gz-linhas{margin:22px 0 6px;text-align:left}
.gz-linhas .rl{padding:6px 0}
.gz-barra{height:18px;background:var(--carvao);border:1px solid var(--linha2);border-radius:10px;overflow:hidden;margin:16px 0 6px}
.gz-barra i{display:block;height:100%;background:var(--ouro);border-radius:9px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.gz-meta{font-size:12px;color:var(--texto2)}
.gz-card .btn{margin-top:22px}
/* confetes simples (barras que caem) */
.gz-conf{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.gz-conf i{position:absolute;top:-14px;width:7px;height:14px;border-radius:2px;opacity:.9;animation:gzcai linear forwards}
@keyframes gzcai{to{transform:translateY(105vh) rotate(540deg);opacity:0}}

/* =====================================================================
   NOVO — Campo com calculadora (fecho de caixa)
   Cada valor em euros tem, à direita, um botão que abre a calculadora:
   somam-se as parcelas (70 + 25 + 55) e o total preenche o campo.
   ===================================================================== */
.com-calc{display:flex;gap:8px;align-items:stretch;max-width:100%;min-width:0;box-sizing:border-box}
.com-calc .inp{flex:1;min-width:0}
.btn-calc{
  flex:0 0 48px;background:var(--carvao2);border:1px solid var(--linha2);border-radius:10px;
  cursor:pointer;color:var(--texto);display:flex;align-items:center;justify-content:center;transition:all .15s
}
.btn-calc:hover{border-color:var(--ouro);background:var(--linha)}
.btn-calc svg{width:20px;height:20px;display:block}

.calc-visor{background:var(--preto);border:1px solid var(--linha);border-radius:12px;padding:14px;margin-bottom:12px}
.calc-parcelas{font-size:11.5px;color:var(--texto3);min-height:17px;line-height:1.4;word-break:break-word}
.calc-atual{font-size:31px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;line-height:1.25;letter-spacing:-.5px}
.calc-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--linha);margin-top:10px;padding-top:9px;
  font-size:11px;color:var(--texto2);text-transform:uppercase;letter-spacing:1px;font-weight:600
}
.calc-total b{font-size:18px;color:var(--texto);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.calc-sug{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.calc-teclas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.calc-teclas button{
  padding:15px 0;background:var(--carvao);border:1px solid var(--linha2);border-radius:11px;
  font-size:18px;font-weight:700;cursor:pointer;color:var(--texto);transition:all .12s
}
.calc-teclas button:hover{border-color:var(--texto3);background:var(--carvao2)}
.calc-teclas button:active{transform:translateY(1px)}
.calc-teclas button.acao{background:var(--carvao2);font-size:15px}
.calc-teclas button.usar{background:#FFFFFF;color:#000000;border-color:#FFFFFF;font-size:14px;grid-column:span 2}

/* =====================================================================
   NOVO — Fecho de caixa: grelha de meios de pagamento
   ===================================================================== */
.fc-meios{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.fc-bal{background:var(--preto);border:1px solid var(--linha);border-radius:11px;padding:14px;margin-top:14px}
.fc-bal .rl.total{font-size:16px}

/* =====================================================================
   NOVO (29/07/2026) — Contagem de notas e moedas
   A folha CONTAGEM CAIXA do dono, dentro do sistema: uma linha por valor,
   quantas há, quanto dá. Três colunas fixas (valor | quantidade | total)
   para os números alinharem em coluna e a leitura ser vertical.
   ===================================================================== */
/* Prefixo "cnt-" e não "ct-": o Catálogo já usava .ct-cab para o cabeçalho de
   categoria, e como este bloco vem depois no ficheiro sobrepunha-se a ele — o
   cabeçalho da categoria virava uma grelha de 3 colunas e o botão Renomear
   caía para uma linha inteira. Namespace próprio, colisão resolvida. */
.contagem{background:var(--preto);border:1px solid var(--linha);border-radius:11px;overflow:hidden}
.cnt-cab,.cnt-lin,.cnt-tot{
  display:grid;grid-template-columns:1fr 80px 86px;gap:var(--e3);align-items:center;
  padding:var(--e1) var(--e4)
}
.cnt-cab{
  font-size:var(--t-micro);letter-spacing:1px;text-transform:uppercase;color:var(--texto3);
  border-bottom:1px solid var(--linha);padding-top:var(--e3);padding-bottom:var(--e3);
  white-space:nowrap
}
.cnt-lin+.cnt-lin{border-top:1px solid rgba(255,255,255,.045)}
/* Duas colunas de denominações (30/07/2026): o pop-up de contagem tinha de
   caber no ecrã sem scroll. A linha vertical entre colunas é o único separador
   — cada coluna leva o seu cabeçalho para os números não ficarem órfãos. */
.cnt-grelha{display:grid;grid-template-columns:1fr 1fr}
.cnt-grelha .cnt-col+.cnt-col{border-left:1px solid var(--linha)}
/* Em ecrã estreito volta a ser uma coluna só: aí a segunda metade continua a
   lista e o cabeçalho repetido só estorvaria. */
@media(max-width:620px){
  .cnt-grelha{grid-template-columns:1fr}
  .cnt-grelha .cnt-col+.cnt-col{border-left:none;border-top:1px solid rgba(255,255,255,.045)}
  .cnt-grelha .cnt-col+.cnt-col .cnt-cab{display:none}
}
.cnt-den{font-weight:600;font-variant-numeric:tabular-nums}
/* O campo da quantidade é o único sítio onde se escreve: fica mais compacto
   que um .inp normal para as onze linhas caberem sem scroll interminável. */
.inp.cnt-qtd{padding:var(--e2) 10px;text-align:right;font-size:var(--t-base)}
.cnt-val{color:var(--texto2);font-variant-numeric:tabular-nums}
.cnt-tot{
  background:var(--carvao);border-top:1px solid var(--linha2);
  font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--texto2)
}
.cnt-tot b{font-size:17px;color:var(--texto);letter-spacing:0;text-transform:none;
  font-variant-numeric:tabular-nums}
.contagem .r{text-align:right}
/* Painel da contagem dentro do fecho: encostado aos meios de pagamento. */
.fc-contagem{margin-top:14px}
/* Um modal que traga a grelha da contagem é mais largo — duas colunas a 520px
   deixavam os campos estreitos de mais para se escrever à vontade — e sobe a
   92vh: é o pop-up mais alto do sistema e o objetivo era contar sem rolar. */
.modal:has(.contagem){max-width:680px;max-height:92vh}
.modal:has(.contagem) h3{margin-bottom:var(--e4)}
.modal:has(.contagem) .acoes{margin-top:var(--e4)}

/* =====================================================================
   NOVO (29/07/2026) — Pop-up de confirmação
   Substitui o confirm() do navegador nas ações decisivas. O botão de
   avançar é VERMELHO (.btn.perigo), por pedido expresso do dono: a branco
   com letra preta era igual ao "Gravar" e levava a carregar sem ler.
   ===================================================================== */
.overlay.conf-over{z-index:200}          /* acima do modal E da calculadora */
.overlay.conf-over .modal{max-width:420px}
.conf-txt{color:var(--texto2);font-size:13.5px;line-height:1.65}
.conf-acoes .btn.perigo{font-weight:700}

/* =====================================================================
   NOVO (29/07/2026) — Dobras: blocos que abrem e fecham
   Queixa do dono: "a aba de precificação ficou muito complicada". Eram 26
   campos todos à vista ao mesmo tempo, e quatro deles repetidos entre a
   ficha e as regras da casa — sem se saber qual mandava. Nada saiu da
   conta: o que muda é que só fica à vista o que se mexe em cada preço, e
   o resto vive numa dobra que mostra, fechada, o resumo do que aplica.
   Feito com <details> nativo: sem estado em JS, funciona sem scripts.
   ===================================================================== */
.dobra{border:1px solid var(--linha);border-radius:11px;background:var(--preto);margin-top:14px}
.dobra>summary{
  display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;
  font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--texto2)
}
.dobra>summary::-webkit-details-marker{display:none}   /* seta do Safari */
.dobra>summary:hover{color:var(--texto)}
/* O resumo do que está lá dentro: é o que evita ter de abrir para conferir. */
.dobra>summary .tt{flex:0 0 auto}
.dobra>summary .res{
  flex:1;min-width:0;text-align:right;font-size:11px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--texto3)
}
.dobra>summary::after{                                  /* chevron */
  content:"";flex:0 0 auto;width:6px;height:6px;margin-left:2px;
  border-right:2px solid var(--texto3);border-bottom:2px solid var(--texto3);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s
}
.dobra[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.dobra[open]>summary{border-bottom:1px solid var(--linha);color:var(--texto)}
.dobra-in{padding:14px}
.dobra-in>:last-child{margin-bottom:0}
/* Grupo de campos dentro de uma dobra, com o seu próprio título. */
.dobra-gr+.dobra-gr{margin-top:18px;padding-top:16px;border-top:1px solid var(--linha)}
.dobra-gr>h4{
  font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--texto);margin-bottom:4px
}
.dobra-gr>h4+.nota{margin-top:0;margin-bottom:12px}

/* =====================================================================
   NOVO (29/07/2026) — Precificador: o número de gestão em primeiro
   Quanto tem de entrar por hora de cadeira ocupada é o número que decide
   se os preços da casa chegam, e estava enterrado no fim da página por
   baixo de treze campos. Passa a abrir a aba.
   ===================================================================== */
.pr-alvo{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:11px}
.pr-alvo:empty{display:none}
.pr-alvo .c{background:var(--grafite);border:1px solid var(--linha);border-radius:12px;padding:13px 15px}
.pr-alvo .c.destaque{background:var(--carvao);border-color:var(--linha2)}
.pr-alvo .c .lab{font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--texto2)}
.pr-alvo .c .v{font-size:21px;font-weight:800;letter-spacing:-.5px;margin-top:5px;font-variant-numeric:tabular-nums}
.pr-alvo .c .s{font-size:11px;color:var(--texto3);margin-top:3px;line-height:1.4}
/* Aviso a toda a largura da tira (margem inalcançável, cadeira abaixo do custo). */
.pr-alvo .aviso{
  grid-column:1/-1;background:var(--grafite);border:1px solid var(--linha);border-left:3px solid var(--stock-pouco);
  border-radius:12px;padding:12px 15px;font-size:12.5px;color:var(--texto2);line-height:1.6
}
.pr-alvo .aviso.grave{border-left-color:var(--critico)}

/* Pedido do dono, 29/07/2026: "quero que me sugira qual preço cobrar de forma
   clara — cobra X, para ter lucro tem que cobrar Y". A recomendação passa a
   estar escrita por palavras, não só em números numa grelha. */
.pr-diz{
  background:var(--carvao);border:1px solid var(--linha2);border-left:4px solid var(--ouro);
  border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.55;color:var(--texto2)
}
.pr-diz b{color:var(--texto);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-diz.perde{border-left-color:var(--critico)}
.pr-diz.perde b.mau{color:var(--critico)}
.pr-diz .falta{color:var(--stock-pouco)}
.pr-diz p+p{margin-top:6px}
/* Indicador de saúde do preço praticado — pedido de 30/07/2026. O emoji já
   traz a cor sozinho (não conta para a regra de "poucas cores" do resto do
   sistema); o fio à esquerda do cartão reforça com as MESMAS cores do
   semáforo de stock, que já é a única exceção ao monocromático. */
.pr-selo{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.3px;text-transform:uppercase;margin-bottom:6px;color:var(--texto)}
.pr-selo .e{font-size:14px}
.pr-diz.excelente{border-left-color:var(--stock-ok)}
.pr-diz.atencao{border-left-color:var(--stock-pouco)}

/* Mínimo · conta exata · preço de hoje, debaixo do preço grande. */
.pr-nums{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);
  border:1px solid var(--linha);border-radius:10px;overflow:hidden
}
/* Impacto mensal sem preço atual para comparar: só duas células, não três. */
.pr-nums.c2{grid-template-columns:repeat(2,1fr)}
.pr-nums>div{background:var(--preto);padding:8px 6px;text-align:center;min-width:0}
.pr-nums .l{font-size:9px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--texto2)}
.pr-nums .v{font-size:14.5px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

/* =====================================================================
   TELEMÓVEL
   O sistema foi desenhado no portátil da loja. Num telemóvel o que parte
   primeiro é o cabeçalho, os pares de campos lado a lado e — sobretudo — as
   tabelas de dez colunas. Trata-se de tudo aqui, sem mexer no HTML das vistas.
   ===================================================================== */

/* ---- Tablet e telemóvel deitado ---- */
@media(max-width:760px){
  main{padding:14px 12px 96px}
  .card{padding:15px;border-radius:12px}
  .card+.card{margin-top:12px}
  .hd{padding:10px 12px;gap:10px}
  .hd-esq{min-width:0;overflow:hidden}
  .hd h1{font-size:14px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd .agora{font-size:10px}
  .hd .agora b{font-size:12px}
  .logo-h{height:26px}
  .navin{padding:0 8px}
  .navb{padding:9px 12px;font-size:12.5px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:9px}
  .kpi{padding:12px 13px}
  .kpi .val{font-size:20px}
  .linha-campos{grid-template-columns:1fr;gap:var(--e3)}
  .linha-campos label.lab{min-height:auto}
  .filtros .inp{flex:1 1 150px;min-width:0}
  .periodo{width:100%}
}

/* ---- Telemóvel ---- */
@media(max-width:560px){
  /* O Safari faz zoom sozinho quando um campo tem letra abaixo de 16px. Como o
     zoom manual voltou a ser permitido (é preciso para espreitar uma tabela),
     os campos passam a 16px para não haver saltos ao tocar neles. */
  .inp,select.inp,textarea.inp{font-size:16px}
  /* Os filtros estavam a 15px e eram precisamente os únicos campos que ainda
     faziam o Safari dar zoom ao toque — a regra de cima resolvia o problema e
     esta desfazia-o logo a seguir. Ficam também nos 16px; como já quebram
     linha sozinhos (flex:1 1 150px), não se perde nada em largura. */
  .filtros .inp{font-size:16px;padding:10px 12px;width:100%}

  /* Cabeçalho: o nome e a data comiam metade da largura. O wordmark encolhe
     com o resto — o título do painel fica, porque é o que distingue o painel
     de gestão do painel do colaborador. */
  .hd{gap:8px}
  .hd-esq{min-width:0;overflow:hidden}
  .hd h1{font-size:11.5px;line-height:1.15;letter-spacing:.3px}
  .hd .agora{display:none}
  .hd .sair{padding:8px 11px;font-size:11.5px}
  .logo-h{height:23px}

  .secao{font-size:12px;letter-spacing:1.1px;flex-wrap:wrap}
  .linha-campos{grid-template-columns:1fr;gap:var(--e3)}
  .linha-campos label.lab{min-height:auto}
  .abas{gap:6px}
  .aba{padding:12px 6px;font-size:13px}
  .chip{padding:9px 12px;font-size:12.5px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi .val{font-size:19px}
  /* Alvos de toque: estes botões ficavam com 31px de altura, e no telemóvel
     usam-se de pé e com uma mão só. 38px é o mínimo confortável sem ter de
     redesenhar as barras onde eles vivem. */
  .btn.mini{padding:8px 12px;min-height:38px}
  .periodo button,.filtros .btn,.filtros button{min-height:38px}
  .fc-meios{grid-template-columns:1fr}
  /* Dobras: o resumo do que está fechado não cabe ao lado do título — passa
     para baixo dele, a toda a largura, em vez de ser cortado. */
  .dobra>summary{flex-wrap:wrap;padding:13px 13px;min-height:44px}
  .dobra>summary .tt{flex:1 1 auto}
  .dobra>summary .res{flex-basis:100%;text-align:left;order:3;margin-top:4px}
  .dobra-in{padding:13px}
  .pr-alvo .c .v{font-size:19px}
  /* Mínimo · exata · hoje: mantêm-se as três colunas, é a comparação que
     dá sentido ao número. Só encolhe a letra. */
  .pr-nums .l{font-size:9px;letter-spacing:.6px}
  .pr-nums .v{font-size:14px}
  /* Contagem: as colunas encolhem mas mantêm-se as três — em cartão perdia-se
     a leitura vertical, que é o que torna a contagem rápida. */
  .cnt-cab,.cnt-lin,.cnt-tot{grid-template-columns:1fr 84px 92px;gap:8px;padding:8px 10px}
  .cnt-cab{font-size:9.5px;letter-spacing:.9px}
  .inp.cnt-qtd{font-size:16px;padding:8px}   /* 16px: evita o zoom do Safari */
  .cnt-tot b{font-size:16px}

  /* ---- Tabelas: cada linha passa a um cartão "rótulo: valor" ----
     O rótulo vem do data-r que o núcleo copia do cabeçalho da coluna.
     Utiliza flexbox para alinhar o rótulo à esquerda e o valor à direita sem
     risco de sobreposição de texto ou quebra de linha com botões. */
  .tab-wrap{overflow-x:visible;border:none;border-radius:0}
  table{min-width:0;display:block;font-size:13px}
  thead{display:none}
  tbody{display:block}
  tbody tr{
    display:block;background:var(--preto);border:1px solid var(--linha);
    border-radius:11px;padding:6px 14px;margin-bottom:10px
  }
  tbody tr:last-child{margin-bottom:0}
  tr:hover td{background:none}
  tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    text-align:right;border:none;border-top:1px solid var(--carvao);padding:9px 0;
    word-break:break-word
  }
  tbody td .btn, tbody td button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
  }
  tbody tr td:first-child{border-top:none}
  tbody td[data-r]::before{
    content:attr(data-r);flex:0 0 auto;max-width:48%;text-align:left;
    font-size:10px;text-transform:uppercase;letter-spacing:.7px;
    color:var(--texto3);font-weight:700;line-height:1.3;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis
  }
  td.r,th.r{white-space:normal}
  .cel2 small{text-align:right}
  .pill.link{max-width:100%;white-space:normal}
  /* Totais (e outras linhas com colspan): um bloco só, sem rótulos. */
  tbody tr.tot,tbody tr.linha-larga{background:var(--carvao);border-color:var(--linha2)}
  tbody tr.tot td,tbody tr.linha-larga td{padding:5px 0;text-align:left}
  tbody tr.tot td.r,tbody tr.linha-larga td.r{text-align:right}
  /* Célula vazia (coluna de ações da linha de total) não ocupa espaço. */
  tbody td:empty{display:none}
  /* Títulos de secção dentro da tabela: em cartão passam a ser a faixa que
     separa os grupos. A pega desaparece — arrastar com o dedo numa tabela
     transformada em cartões não funciona de forma fiável. */
  tbody tr.sec-tr{background:var(--carvao);border-color:var(--linha2);padding:2px 13px}
  tbody tr.sec-tr td{padding:6px 0}
  tbody tr.sec-vazia{display:none}
  td.pega-cel{display:none}
  .vazio{padding:20px 10px}

  /* ---- Pop-ups sobem do fundo, como uma folha ---- */
  .overlay{padding:0;align-items:flex-end}
  .modal{
    max-width:none;width:100%;max-height:92dvh;border-radius:18px 18px 0 0;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));
    box-sizing:border-box
  }
  .overlay.calc-over .modal{max-width:none}
  .modal .acoes{flex-wrap:wrap}
  .modal .acoes .btn{flex:1 1 132px}

  /* ---- Restantes blocos ---- */
  .calc-atual{font-size:26px}
  .calc-teclas button{padding:13px 0;font-size:17px}
  .barra-fixa .tot b{font-size:18px}
  .barra-fixa .btn{padding:13px 20px}
  .gz-card{padding:26px 18px 22px}
  .gz-msg{font-size:18px}
  .gz-valor{font-size:40px}
  .login-card{padding:26px 20px}
  .login-sim{width:78px;height:78px}
  #toast{left:12px;right:12px;bottom:16px;max-width:none;transform:translateY(90px)}
  #toast.on{transform:translateY(0)}
  #nv-aviso{right:12px;left:12px;text-align:center}
}

/* ---- Telemóvel pequeno (iPhone SE e afins) ---- */
@media(max-width:380px){
  .kpis{grid-template-columns:1fr}
  .hd h1{font-size:11.5px}
  .logo-h{height:20px}
  .aba{font-size:12.5px}
  tbody td[data-r]::before{max-width:52%;font-size:9.5px}
}

/* =====================================================================
   IMPERIUM — Interface sugerida (Cargos e Permissões)
   ===================================================================== */
.sumario {
  background: var(--carvao);
  border: 1px dashed var(--linha2);
  border-radius: var(--raio-sm);
  padding: var(--e4);
  margin-top: var(--e3);
  margin-bottom: var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.sumario-t {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto3);
  font-weight: 700;
}
.sumario ul {
  padding-left: var(--e4);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13.5px;
  color: var(--texto2);
}
.sumario li {
  line-height: 1.4;
}

.toggles {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-top: var(--e4);
  margin-bottom: var(--e4);
}
.tog {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.tog-sw {
  width: 36px;
  height: 20px;
  border-radius: 99px;
  flex-shrink: 0;
  position: relative;
  background: var(--linha2);
  border: 1px solid var(--linha2);
  transition: background 0.2s, border-color 0.2s;
  margin-top: 2px;
}
.tog-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 99px;
  background: var(--texto);
  transition: transform 0.2s, background 0.2s;
}
.tog input[type="checkbox"] {
  display: none;
}
.tog input[type="checkbox"]:checked + .tog-sw {
  background: var(--ouro);
  border-color: var(--ouro);
}
.tog input[type="checkbox"]:checked + .tog-sw::after {
  transform: translateX(16px);
  background: var(--preto);
}
.tog-info {
  display: flex;
  flex-direction: column;
}
.tog-info b {
  font-weight: 600;
  color: var(--texto);
}
.tog-info small {
  display: block;
  color: var(--texto3);
  font-size: 12px;
  line-height: 1.35;
}