/* ===== Vilpack Aurora — design system =====
   Contrato: docs/DESIGN_SISTEMA.md (§3 tokens, §4 casca, §5 componentes). Âmbar do logo = ação; tinta obsidiana; vidro e curvas.
   Os NOMES de variáveis e de classes públicas abaixo são usados pelos CSS de módulo e por centenas de testes: só a aparência muda.
   As cores de SITUAÇÃO do pedido (.sit-*) são decisão do dono e vivem em pedidos.css. Nada é carregado da rede: fonte e ícones são locais.
   Componentes: .card .kpi .btn .campo .chip .seg .badge .tabela .abas .drawer .modal .toast .vazio .skeleton .barra .aviso
   Movimento: tudo é desligado por prefers-reduced-motion (ver o fim do arquivo). */
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url("../vendor/inter/inter-latin-wght-normal.woff2") format("woff2")}
:root{
  /* marca */
  --ambar:#F5A200;--ambar-2:#FFB62E;--ambar-esc:#B97800;--ambar-fundo:#FFF6E0;
  --ambar-linha:#F1D18A;--ambar-tinta:#7A5200;--ambar-sel:#FFF1CC;--ambar-hover:#FFFBF0;
  /* tinta */
  --preto:#0E1018;--grafite:#161922;--grafite-2:#222634;--cinza-700:#444A5A;--cinza-500:#5F6679;--cinza-300:#D3D6DF;--cinza-200:#E6E8EE;--cinza-100:#F3F4F8;
  /* tela */
  --fundo:#F2F3F8;--branco:#FFFFFF;--superficie-2:#FAFAFD;--linha:#E7E9F0;
  /* aurora: apoio de gráficos e destaques, nunca para status */
  --indigo:#5B5BF0;--indigo-fundo:#EEEEFE;--ciano:#18B7C9;--violeta:#8B5CF6;
  /* status (os -tinta são para TEXTO sobre o fundo tonal: AA) */
  --verde:#16A05B;--verde-fundo:#E3F6EC;--verde-linha:#A6DBBD;--verde-tinta:#0F7A43;
  --vermelho:#D13B33;--vermelho-fundo:#FDEBEA;--vermelho-linha:#EAB5B1;--vermelho-tinta:#A32018;
  --azul:#2563EB;--azul-fundo:#E8F0FE;--azul-linha:#BCD3F5;--azul-tinta:#1D4ED8;--amarelo-fundo:#FFF3C4;--amarelo-forte:#FFE9A0;
  --vermelho-hover:#FBDDD9;--indigo-linha:#D9D9FB;--indigo-tinta:#4338CA;
  /* botão de ENVIO (.btn-sucesso): texto branco sobre --verde-tinta (5,4:1) e --verde-esc (7,8:1), nunca sobre --verde (3,4:1: não passa de AA) */
  --verde-esc:#0B5F35;--brilho-verde:0 2px 6px rgba(15,122,67,.3);
  /* botão primário âmbar (docs/DESIGN_SISTEMA.md §11.16): rótulo (8,8 a 10,5:1 sobre o gradiente), borda, topo do hover e a borda de hover do botão claro */
  --ambar-texto:#1B1300;--ambar-borda:#E69500;--ambar-claro:#FFC24D;--cinza-400:#BFC4D1;
  /* forma */
  --raio-p:10px;--raio:16px;--raio-g:22px;--raio-pilula:999px;
  /* sombra: escala de ELEVAÇÃO (§11.16). SUPERFÍCIE (cartão, gaveta, lista, modal): --sombra (repouso), --sombra-2 (flutua), --sombra-3 (modal e paleta); podem ser largas.
     CONTROLE (botão, item de menu, aba, chip, segmento): --sombra-p, --realce e os --brilho: extensão de no máximo 8 px (deslocamento + desfoque). É o que cabe no vão de 8 px entre vizinhos
     e na folga de 4 px das abas e do menu, que CORTAM o que passa da borda: uma sombra maior vazava sobre o item seguinte e aparecia cortada em linha reta. Nada de cor solta fora destes tokens. */
  --sombra:0 1px 2px rgba(16,18,34,.04),0 6px 20px rgba(16,18,34,.06);
  --sombra-2:0 12px 40px rgba(16,18,34,.12);
  --sombra-3:0 24px 70px rgba(14,16,24,.35);
  --sombra-p:0 1px 3px rgba(14,16,24,.28);--anel-claro:0 0 0 2px rgba(255,255,255,.55);
  --brilho:0 2px 6px rgba(245,162,0,.32);
  /* luz do alto de um preenchido (primário, verde, item ativo do menu): é INSET, então nunca sai da peça */
  --realce:inset 0 1px 0 rgba(255,255,255,.4);
  /* halos de campo (anel largo de 4 px, sem desfoque): foco, hover da busca e erro */
  --halo:0 0 0 4px rgba(245,162,0,.14);--halo-foco:0 0 0 4px rgba(245,162,0,.35);--halo-erro:0 0 0 4px rgba(209,59,51,.16);
  /* véu de hover do botão sem fundo (fantasma e ícone) e o do estado pressionado */
  --veu:rgba(14,16,24,.06);--veu-2:rgba(14,16,24,.1);--pressionado:inset 0 0 0 999px var(--veu-2);
  /* anel de foco: 2 px de branco + 2 px de tinta escura (3:1 ou mais contra qualquer fundo claro do app: WCAG 1.4.11). Sem halo âmbar: ele passava de 4 px e o vizinho (vão de 4 px da barra compacta) o cobria */
  --anel:0 0 0 2px var(--branco),0 0 0 4px var(--preto);
  /* movimento */
  --ease:cubic-bezier(.2,.8,.2,1);--t-rapido:120ms;--t:220ms;--t-lento:420ms;
  /* tipografia e casca */
  --fonte:"Inter Variable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --side-w:224px;--side-w-min:88px;
  /* escala tipográfica (docs/DESIGN_SISTEMA.md §11.14): sete papéis; um módulo pode trocar o valor dentro do seu contêiner (ex.: Compras fixa --fs-apoio em 14px) */
  --fs-pagina:28px;--fs-valor:30px;--fs-secao:16px;--fs-sub:14px;--fs-corpo:14px;--fs-apoio:12.5px;--fs-rotulo:12px;
  /* dica (tooltip): tamanho do texto e largura máxima; o tablet pode aumentar */
  --dica-fs:14px;--dica-max:320px;
  /* anel de foco dentro de itens que cortam o que passa da borda (a lista do menu recolhe com overflow:hidden): branco por fora, tinta por dentro */
  --anel-dentro:inset 0 0 0 2px var(--branco),inset 0 0 0 4px var(--preto);
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fonte);font-size:14px;line-height:1.45;color:var(--preto);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:radial-gradient(900px 420px at 88% -140px,rgba(245,162,0,.11),transparent 70%) no-repeat,radial-gradient(760px 400px at -4% -100px,rgba(91,91,240,.10),transparent 70%) no-repeat,var(--fundo)}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em}
a{color:var(--azul)}
::selection{background:rgba(245,162,0,.28)}
button,input,select,textarea{font:inherit}
.num,.tabela td.num,.tabela th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mono{font-family:var(--mono)} .muted{color:var(--cinza-500)} .nowrap{white-space:nowrap}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ícone Lucide (sprite local): <svg class="ico"><use href="/static/vendor/lucide/sprite.svg#nome"/></svg> */
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.25em}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--preto);outline-offset:2px}
/* sobre a barra obsidiana a tinta escura sumiria: lá o foco é âmbar */
.sidebar a:focus-visible,.sidebar button:focus-visible{outline-color:var(--ambar-2)}
.pular{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:var(--raio-pilula);background:var(--preto);color:#fff;font-weight:650;text-decoration:none;transition:top var(--t) var(--ease)}
.pular:focus{top:12px}
.conteudo:focus{outline:none}

/* ---- faixa do AMBIENTE DE TESTE (docs/AMBIENTE_TESTE.md) ----
   Só existe no ambiente de teste: o modelo não a desenha no app normal (e `body.com-faixa` também só nasce lá). Altura FIXA (`--faixa-h`: uma
   linha, o que não cabe é cortado com reticências) para a barra lateral e a barra superior, que são «sticky», descontarem exatamente o espaço dela.
   Índigo (apoio, nunca status): o vermelho é da PRODUÇÃO (faturamento.css) e o âmbar é de ação. Texto branco sobre --indigo-tinta passa de 7:1. */
:root{--faixa-h:0px}
.com-faixa{--faixa-h:36px}
.faixa-teste{position:sticky;top:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:0 14px;height:var(--faixa-h);padding:0 16px;
  overflow:hidden;white-space:nowrap;background:var(--indigo-tinta);color:var(--branco);font-size:12.5px;line-height:1.2;text-align:center;
  border-bottom:1px solid var(--preto)}
.faixa-teste-tit{flex:none;font-weight:800;letter-spacing:.08em}
.faixa-teste-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:550}
.faixa-teste-aviso{flex:none;padding:2px 8px;border-radius:var(--raio-p);background:var(--amarelo-forte);color:var(--preto);font-weight:750}
.faixa-teste-link{flex:none;display:inline-flex;align-items:center;height:100%;padding:0 6px;color:var(--branco);font-weight:700;text-decoration:underline}
@media (any-hover:hover){.faixa-teste-link:hover{color:var(--amarelo-forte)}}
.faixa-teste a:focus-visible{outline:2px solid var(--branco);outline-offset:-4px}
.com-faixa .shell{min-height:calc(100vh - var(--faixa-h))}
.com-faixa .sidebar{top:calc(12px + var(--faixa-h));height:calc(100vh - 24px - var(--faixa-h))}
.com-faixa .topbar{top:var(--faixa-h)}
body.acesso.com-faixa{flex-direction:column}

/* ---- casca: barra lateral flutuante ---- */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--side-w);flex:none;margin:12px 0 12px 12px;border-radius:var(--raio-g);color:#D5D8E3;display:flex;flex-direction:column;position:sticky;top:12px;height:calc(100vh - 24px);
  overflow:hidden;z-index:30;border:1px solid rgba(255,255,255,.05);box-shadow:var(--sombra-2);
  background:radial-gradient(230px 170px at 12% 0,rgba(245,162,0,.20),transparent 72%),linear-gradient(180deg,#1A1D29 0%,var(--preto) 60%)}
.brand{display:block;padding:16px 14px 8px;color:#fff;text-decoration:none;flex:none;border-radius:var(--raio)}
/* o logo para FUNDO ESCURO (static/logo_escuro.png: letras brancas e V âmbar sobre transparente) vai DIRETO sobre o menu obsidiana, sem placa, na
   largura da área útil (224 px do menu − 2 de borda − 28 de respiro = 194 px; a altura vem da razão 1000:227). Sem texto ao lado. */
.brand-marca{display:block;position:relative}
.brand-logo{display:block;width:100%;max-width:100%;height:auto}
/* o foco do logo é um anel âmbar PARA DENTRO da área do link (a barra corta o que passa da borda) */
.sidebar .brand:focus-visible{outline:2px solid var(--ambar-2);outline-offset:-4px}
/* ---- menu em grupos (docs/DESIGN_SISTEMA.md §11.2): cada seção é um grupo expandir/recolher; a lista anima por grid-template-rows 0fr → 1fr ---- */
.nav{padding:4px 12px 8px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.nav-grupo{margin:2px 0}
.nav-grupo-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;margin:0;padding:8px 12px;border:0;border-radius:var(--raio-pilula);background:none;
  color:#B4B9CA;font:inherit;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
@media (any-hover:hover){.nav-grupo-btn:hover{background:rgba(255,255,255,.07);color:#fff}}
.nav-grupo-btn:focus-visible{outline:none;box-shadow:var(--anel-dentro)}
.nav-grupo-ico{display:grid;place-items:center;width:22px;height:22px;flex:none}
.nav-grupo-ico .ico{width:20px;height:20px}
.nav-grupo-tit{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-grupo-chev{display:grid;place-items:center;width:18px;height:18px;flex:none}
.nav-grupo-chev .ico{width:16px;height:16px}
.pronto .nav-grupo-chev{transition:transform var(--t) var(--ease)}
.nav-grupo:not(.aberto) .nav-grupo-chev{transform:rotate(-90deg)}
/* o grupo FECHADO que contém a tela atual mostra um ponto âmbar no cabeçalho */
.nav-grupo.tem-ativo:not(.aberto) .nav-grupo-tit::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--ambar);vertical-align:1px}
.nav-lista{display:grid;grid-template-rows:0fr;visibility:hidden}
.nav-grupo.aberto .nav-lista{grid-template-rows:1fr;visibility:visible}
/* sem transição na carga (a classe `pronto` entra depois do primeiro quadro); fechado, a lista sai da ordem de Tab só DEPOIS de a altura fechar */
.pronto .nav-lista{transition:grid-template-rows var(--t) var(--ease),visibility 0s linear var(--t)}
.pronto .nav-grupo.aberto .nav-lista{transition:grid-template-rows var(--t) var(--ease),visibility 0s}
/* sem padding vertical aqui: com a linha em 0fr o padding da própria caixa ainda ocuparia 6 px; o respiro vai em margem de quem fica DENTRO */
.nav-lista-int{min-height:0;overflow:hidden;padding:0 0 0 10px}
.nav-lista-int .nav-secao+.nav-item{margin-top:2px}
.nav-lista-int .nav-item:last-child{margin-bottom:4px}
/* o título da categoria é do dropdown do trilho: com o menu expandido o cabeçalho do grupo já o diz */
.nav-secao{display:none}
.nav-item{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:9px 12px;border-radius:var(--raio-pilula);color:#CDD1DE;text-decoration:none;font-weight:550;font-size:13.5px;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)}
@media (any-hover:hover){.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}}
.nav-item:active{transform:scale(.985)}
.nav-item:focus-visible{outline:none;box-shadow:var(--anel-dentro)}
.nav-item.ativo{background-color:var(--ambar);background-image:linear-gradient(135deg,var(--ambar-2),var(--ambar));color:var(--ambar-texto);font-weight:700;box-shadow:var(--realce)}
.nav-item.ativo:focus-visible{box-shadow:var(--anel-dentro)}
.nav-ico{display:grid;place-items:center;width:22px;height:22px;flex:none}
.nav-ico .ico{width:20px;height:20px}
.nav-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sessao{display:flex;align-items:center;gap:10px;margin:4px 12px 8px;padding:10px;border-radius:var(--raio);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:12.5px;flex:none}
.sessao-avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:12px;font-weight:800;font-size:14px;color:var(--ambar-texto);background:linear-gradient(135deg,var(--ambar-2),var(--ambar))}
.sessao-info{flex:1;min-width:0}
.sessao-quem{color:#F2F3F7;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sessao-acoes{display:flex;gap:14px;align-items:center;margin-top:3px}
.sessao-acoes form{margin:0}
.sessao-acoes a,.sessao .btn-link{color:var(--ambar-2);text-decoration:none;font:inherit;font-size:12.5px;font-weight:600;border:0;background:none;cursor:pointer;padding:0}
@media (any-hover:hover){.sessao-acoes a:hover,.sessao .btn-link:hover{text-decoration:underline;color:#FFD27A}}
.sidebar-rodape{display:flex;align-items:center;gap:8px;flex:none;padding:10px 12px 12px 16px;border-top:1px solid rgba(255,255,255,.06);color:#8B91A6;font-size:11.5px}
.rodape-txt{flex:1;min-width:0;line-height:1.3}
.side-colapsar{display:grid;place-items:center;width:34px;height:34px;flex:none;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#CDD1DE;cursor:pointer;transition:background-color var(--t) var(--ease),transform var(--t-lento) var(--ease)}
@media (any-hover:hover){.side-colapsar:hover{background:rgba(255,255,255,.14);color:#fff}}
.side-fundo{display:none}
/* recolhida: TRILHO com uma entrada por categoria (ícone + título curto) e as telas num dropdown à direita (position:fixed ancorado ao botão pelo JS:
   o menu rola e corta o que passa da borda). Os itens seguem no DOM; só a lista fica fora da vista até abrir. Só a partir de 821 px: no celular
   o menu é a gaveta, sempre expandida. */
@media (min-width:821px){
  .pronto .sidebar{transition:width var(--t-lento) var(--ease)}
  .side-min .sidebar{width:var(--side-w-min)}
  .side-min .brand{display:flex;justify-content:center;padding:16px 0 8px}
  /* o trilho mostra só o «V» do MESMO arquivo escuro, num tile de 44 px: a imagem de 120 px de largura fica deslocada para o V (os 28% da
     esquerda da imagem) cair no centro do tile. O recorte (clip-path) é um trapézio que segue a borda direita do V (de 28,0% da largura no alto
     a 17,0% a 70,5% da altura, com 0,4 a 0,6% de folga): fica de fora o «I» do «Vilpack» (começa em 25,7% da largura) e a linha dourada
     (a partir de 78,9% da altura). Medido no Chromium em tests/test_ui_fundacao.py */
  .side-min .brand-marca{width:44px;height:44px;overflow:hidden;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .side-min .brand-logo{position:absolute;left:5px;top:12px;width:120px;max-width:none;clip-path:polygon(0 0,28.5% 0,17.2% 73%,0 73%)}
  .side-min .rodape-txt,.side-min .sessao-quem{display:none}
  /* a barra de rolagem de 15 px roubava largura do trilho (88 px) quando a janela é baixa e a lista rola: «Visão geral» saía cortado (55 de 57 px).
     O trilho segue rolando (roda, toque, teclado); só a barra some. */
  .side-min .nav{padding-left:8px;padding-right:8px;scrollbar-width:none}
  .side-min .nav::-webkit-scrollbar{display:none}
  .side-min .nav-grupo{position:relative}
  .side-min .nav-grupo-btn{flex-direction:column;justify-content:center;gap:4px;min-height:58px;padding:8px 2px 7px;border-radius:var(--raio);
    font-size:10.5px;font-weight:650;letter-spacing:0;text-transform:none;line-height:1.15;text-align:center}
  .side-min .nav-grupo-tit{flex:none;max-width:100%}
  .side-min .nav-grupo-chev,.side-min .nav-grupo.tem-ativo:not(.aberto) .nav-grupo-tit::after{display:none}
  /* a categoria da tela atual fica realçada; a do dropdown aberto, clara */
  .side-min .nav-grupo.tem-ativo .nav-grupo-btn{background-color:var(--ambar);background-image:linear-gradient(135deg,var(--ambar-2),var(--ambar));color:var(--ambar-texto);box-shadow:var(--realce)}
  .side-min .nav-grupo.flutuando .nav-grupo-btn{background:rgba(255,255,255,.14);color:#fff}
  .side-min .nav-grupo.tem-ativo.flutuando .nav-grupo-btn{background-color:var(--ambar);background-image:linear-gradient(135deg,var(--ambar-2),var(--ambar));color:var(--ambar-texto)}
  .side-min .nav-grupo-btn:focus-visible,.side-min .nav-grupo.tem-ativo .nav-grupo-btn:focus-visible{box-shadow:var(--anel-dentro)}
  .side-min .nav-lista{display:none;position:fixed;left:104px;top:12px;z-index:70;width:max-content;min-width:216px;max-width:min(320px,calc(100vw - 120px));
    max-height:calc(100vh - 16px);overflow:auto;padding:8px;border-radius:var(--raio);border:1px solid rgba(255,255,255,.10);box-shadow:var(--sombra-2);
    background:linear-gradient(180deg,#1E2230,var(--preto));scrollbar-width:thin;visibility:visible}
  .side-min .nav-grupo.flutuando .nav-lista{display:block}
  .side-min .nav-lista-int{overflow:visible;padding:0}
  .side-min .nav-lista-int .nav-secao+.nav-item{margin-top:0}
  .side-min .nav-lista-int .nav-item:last-child{margin-bottom:0}
  .side-min .nav-secao{display:block;padding:6px 10px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A5ABBE}
  .side-min .sessao{flex-direction:column;margin-left:8px;margin-right:8px;padding:8px 4px;gap:4px}
  .side-min .sessao-info{width:100%}
  .side-min .sessao-acoes{flex-direction:column;gap:4px;align-items:center;font-size:11px}
  .side-min .sessao-acoes a,.side-min .sessao .btn-link{font-size:11px}
  .side-min .sidebar-rodape{justify-content:center;padding:10px 0 12px}
  .side-min .side-colapsar{transform:rotate(180deg)}
}

/* ---- casca: barra superior de vidro e conteúdo ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
/* A barra QUEBRA LINHA em qualquer largura: busca (220 px) + «Novo pedido» + os botões da tela somam mais que o miolo entre 821 e ~1180 px e,
   sem quebra, o título colapsava a 0 px e o botão principal saía da janela. O título guarda 260 px; o que não cabe desce para a 2ª linha. */
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 26px;position:sticky;top:0;z-index:20;
  background:rgba(242,243,248,.78);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid rgba(208,212,224,.55)}
.topbar-titulo{flex:1 1 260px;min-width:0}
.topbar h1{font-size:21px;font-weight:750;letter-spacing:-.02em}
.topbar .sub{color:var(--cinza-500);font-size:12.5px;margin-top:2px}
.trilha{display:flex;align-items:center;gap:4px;margin-bottom:3px;font-size:11.5px;font-weight:600;line-height:1.2;color:var(--cinza-500)}
.trilha .ico{width:12px;height:12px}
.topbar-ferr{display:flex;align-items:center;gap:10px;flex:none}
.topbar-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;margin-left:auto;max-width:100%}
.topbar-acoes:empty{display:none}
.busca-btn{display:inline-flex;align-items:center;gap:10px;height:40px;min-width:220px;padding:0 8px 0 14px;border:1px solid var(--cinza-300);border-radius:var(--raio-pilula);
  background:rgba(255,255,255,.75);color:var(--cinza-500);font-size:13px;cursor:pointer;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t) var(--ease)}
@media (any-hover:hover){.busca-btn:hover{background:#fff;border-color:var(--ambar);box-shadow:var(--halo)}}
.busca-btn .busca-txt{flex:1;text-align:left}
.topbar-novo .ico{color:var(--ambar-esc)}
.busca-btn kbd,.pal-rodape kbd{padding:2px 7px;border-radius:7px;border:1px solid var(--cinza-300);background:var(--cinza-100);color:var(--cinza-700);font:inherit;font-size:11.5px;font-weight:650}
.conteudo{padding:22px 26px 60px;max-width:1600px;width:100%;margin:0 auto}
.btn-icone.menu-toggle{display:none;width:40px;height:40px;padding:0;flex:none;border:1px solid var(--cinza-300);border-radius:50%;background:rgba(255,255,255,.8);color:var(--preto);place-items:center}

/* ---- cartões, grade e KPIs ---- */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);box-shadow:var(--sombra);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
a.card,.card.clicavel{display:block;color:inherit;text-decoration:none;cursor:pointer}
@media (any-hover:hover){a.card:hover,.card.clicavel:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--cinza-300)}}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 20px;border-bottom:1px solid var(--linha)}
.card-h h2{font-size:15px;font-weight:700} .card-b{padding:18px 20px}
.grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{position:relative;padding:18px 20px;overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.kpi,.card.kpi{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);box-shadow:var(--sombra)}   /* o KPI é um cartão, com ou sem a classe .card */
.kpi::before{content:"";position:absolute;top:18px;right:18px;width:10px;height:10px;border-radius:50%;background:var(--ambar);box-shadow:0 0 0 5px var(--ambar-fundo)}
.kpi::after{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:110px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,162,0,.13),transparent);pointer-events:none}
.kpi.ok::before{background:var(--verde);box-shadow:0 0 0 5px var(--verde-fundo)} .kpi.ok::after{background:radial-gradient(closest-side,rgba(22,160,91,.13),transparent)}
.kpi.alerta::before{background:var(--vermelho);box-shadow:0 0 0 5px var(--vermelho-fundo)} .kpi.alerta::after{background:radial-gradient(closest-side,rgba(209,59,51,.12),transparent)}
.kpi.info::before{background:var(--azul);box-shadow:0 0 0 5px var(--azul-fundo)} .kpi.info::after{background:radial-gradient(closest-side,rgba(37,99,235,.12),transparent)}
.kpi:has(.kpi-ico)::before{display:none}
.kpi .rot{font-size:12px;font-weight:600;color:var(--cinza-500);letter-spacing:.03em;padding-right:26px}
.kpi .val{font-size:30px;font-weight:750;letter-spacing:-.02em;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .det{font-size:12.5px;color:var(--cinza-500);margin-top:3px}
a.kpi{display:block;text-decoration:none;color:inherit}
@media (any-hover:hover){a.kpi:hover,button.kpi:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--cinza-300)}}
.kpi-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi-ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:14px;background:var(--ambar-fundo);color:var(--ambar-esc)}
.kpi-ico .ico{width:20px;height:20px}
.kpi.ok .kpi-ico{background:var(--verde-fundo);color:var(--verde-tinta)} .kpi.alerta .kpi-ico{background:var(--vermelho-fundo);color:var(--vermelho-tinta)} .kpi.info .kpi-ico{background:var(--azul-fundo);color:var(--azul-tinta)}
.tend{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--raio-pilula);font-size:11.5px;font-weight:700;background:var(--cinza-100);color:var(--cinza-700);white-space:nowrap}
.tend .ico{width:12px;height:12px}
.tend.sobe{background:var(--verde-fundo);color:var(--verde-tinta)} .tend.desce{background:var(--vermelho-fundo);color:var(--vermelho-tinta)}
.spark{display:block;width:100%;height:36px;margin-top:8px}

/* ---- botões ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--cinza-300);background:var(--branco);color:var(--preto);padding:8px 16px;line-height:20px;
  border-radius:var(--raio-pilula);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t-rapido) var(--ease)}
/* Só COR anima (§11.16). A imagem de fundo (o gradiente) e a sombra trocam na hora: o «Salvar pedido» vira primário quando o formulário muda (o JS troca a classe) e, com `transition: background`, o navegador
   cruzaria o fundo branco com o gradiente por 220 ms. (O retângulo branco da captura do dono NÃO vinha da transição: era a troca de classe NA CARGA, que o pedido.html evita entregando a classe no estado final.)
   Hover e pressionado só valem em botão ligado (`:where` não muda a especificidade); o `:hover` só vale com ponteiro que passa o mouse (`@media (any-hover:hover)`): no toque ele «pega» depois do dedo. */
@media (any-hover:hover){.btn:hover:where(:not(:disabled):not([aria-disabled=true])){background-color:var(--cinza-100);border-color:var(--cinza-400)}}
.btn:active:where(:not(:disabled):not([aria-disabled=true])){transform:translateY(1px);box-shadow:var(--pressionado)}      /* o véu escurece QUALQUER fundo (branco, verde, o claro de cada etapa) sem saber a cor dele */
.btn:focus-visible{outline:none;box-shadow:var(--anel)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primario{background-color:var(--ambar);background-image:linear-gradient(180deg,var(--ambar-2),var(--ambar));border-color:var(--ambar-borda);color:var(--ambar-texto);box-shadow:var(--realce),var(--brilho)}
@media (any-hover:hover){.btn-primario:hover:where(:not(:disabled):not([aria-disabled=true])){background-color:var(--ambar);background-image:linear-gradient(180deg,var(--ambar-claro),var(--ambar-2));border-color:var(--ambar-borda)}}
.btn-primario:active:where(:not(:disabled):not([aria-disabled=true])){background-color:var(--ambar-borda);background-image:linear-gradient(180deg,var(--ambar),var(--ambar-borda));box-shadow:var(--realce)}
.btn-primario:focus-visible{box-shadow:var(--anel),var(--brilho)}
/* variante de ENVIO (docs/CONTRATO_FATURAMENTO.md §26): verde sólido com texto branco (≥ 5,4:1). Vale SÓ para o botão que manda a NF-e ao SEFAZ
   (#ftEmitir e #ftEmitirOk); os demais primários seguem âmbar. A cor reforça o rótulo, nunca o substitui. */
.btn-sucesso{background:var(--verde-tinta);border-color:var(--verde-esc);color:var(--branco);box-shadow:var(--realce),var(--brilho-verde)}
@media (any-hover:hover){.btn-sucesso:hover{background:var(--verde-esc);border-color:var(--verde-esc)}}
.btn-sucesso:active{background:var(--verde-esc)}
.btn-sucesso:focus-visible{box-shadow:var(--anel),var(--brilho-verde)}
.btn-sucesso:disabled,.btn-sucesso[aria-disabled=true]{background:var(--verde-tinta);border-color:var(--verde-esc)}
.btn-fantasma{background:transparent;border-color:transparent;color:var(--cinza-700)} @media (any-hover:hover){.btn-fantasma:hover:where(:not(:disabled):not([aria-disabled=true])){background-color:var(--veu);border-color:transparent}}
.btn-perigo{color:var(--vermelho-tinta);border-color:var(--vermelho-linha)} @media (any-hover:hover){.btn-perigo:hover:where(:not(:disabled):not([aria-disabled=true])){background-color:var(--vermelho-fundo);border-color:var(--vermelho)}}
.btn-p{padding:4px 12px;font-size:12.5px;line-height:20px}
.btn-icone{display:inline-grid;place-items:center;border:0;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--raio-p);transition:background-color var(--t) var(--ease)}
@media (any-hover:hover){.btn-icone:hover{background:var(--veu)}}
.btn-icone:active{background:var(--veu-2)}
.btn-link{border:0;background:none;color:var(--azul);font:inherit;cursor:pointer;padding:0;text-decoration:underline}

/* ---- campos ---- */
.campo{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.campo label{font-size:12px;font-weight:650;color:var(--cinza-700)}
.campo .dica{font-size:11.5px;color:var(--cinza-500)}
input[type=text],input[type=number],input[type=search],input[type=file],input[type=password],input[type=date],select,textarea{
  font:inherit;padding:9px 12px;line-height:20px;border:1px solid var(--cinza-300);border-radius:var(--raio-p);background:var(--branco);color:var(--preto);width:100%;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t) var(--ease)}
input::placeholder,textarea::placeholder{color:var(--cinza-500)}
@media (any-hover:hover){input:hover,select:hover,textarea:hover{border-color:var(--cinza-400)}}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--preto);box-shadow:var(--halo-foco)}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--preto);outline-offset:2px}      /* caixa e rádio: contorno de tinta (o halo âmbar de 35% do campo de texto dava 1,3:1 e era o único sinal) */
input[type=checkbox],input[type=radio]{accent-color:var(--ambar-esc)}
.invalido{border-color:var(--vermelho)!important;background:var(--vermelho-fundo)}
.invalido:focus{box-shadow:var(--halo-erro)!important}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 16px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.toolbar .campo{margin:0;min-width:150px} .toolbar .grow{flex:1;min-width:220px}

/* ---- chips, segmentado e selos ---- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--raio-pilula);border:1px solid var(--cinza-300);background:var(--branco);font-size:12.5px;font-weight:600;
  cursor:pointer;text-decoration:none;color:var(--cinza-700);transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
@media (any-hover:hover){.chip:hover{border-color:var(--cinza-400);background:var(--cinza-100)}}
.chip.ativo{background:var(--preto);color:#fff;border-color:var(--preto);box-shadow:var(--sombra-p)}
.chip .n{color:var(--cinza-500);font-weight:500}
.chip.ativo .n{color:var(--cinza-300)}
.chip.zero:not(.ativo){color:var(--cinza-500)}
.seg{display:inline-flex;align-items:center;gap:2px;height:40px;padding:3px;border:1px solid var(--linha);border-radius:var(--raio-pilula);background:var(--cinza-100)}
.seg button{height:100%;padding:0 14px;border:0;border-radius:var(--raio-pilula);background:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--cinza-700);transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
@media (any-hover:hover){.seg button:hover{color:var(--preto)}}
.seg button.ativo{background:var(--preto);color:#fff;box-shadow:var(--sombra-p)}
.badge{display:inline-block;padding:3px 10px;border-radius:var(--raio-pilula);font-size:11.5px;font-weight:700;line-height:1.3;white-space:nowrap}
.b-ok{background:var(--verde-fundo);color:var(--verde-tinta)} .b-erro{background:var(--vermelho-fundo);color:var(--vermelho-tinta)}
.b-aviso{background:var(--amarelo-fundo);color:var(--ambar-tinta)} .b-info{background:var(--azul-fundo);color:var(--azul-tinta)}
.b-cinza,.b-neutro{background:var(--cinza-200);color:var(--cinza-700)}

/* ---- tabelas: o contêiner arredondado rola; o cabeçalho claro fica fixo ---- */
.tabela-wrap{overflow:auto;border:1px solid var(--linha);border-radius:var(--raio-g);background:var(--branco);box-shadow:var(--sombra)}
.tabela{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tabela th{position:sticky;top:0;z-index:2;background:var(--superficie-2);color:var(--cinza-700);text-align:left;font-weight:650;font-size:12px;padding:11px 12px;white-space:nowrap;border-bottom:1px solid var(--linha)}
.tabela th.ordenavel{cursor:pointer;user-select:none} @media (any-hover:hover){.tabela th.ordenavel:hover{background:var(--cinza-100)}}
.tabela td{padding:11px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:0}
@media (any-hover:hover){.tabela tbody tr:hover td{background:var(--ambar-hover)}}
.tabela tr.inativa td{background:var(--cinza-100);color:var(--cinza-500)}
.tabela th.grupo{background:var(--cinza-100);color:var(--cinza-700);text-align:center;font-weight:700;letter-spacing:.03em;border-bottom:1px solid var(--linha)}
.tabela td.editavel{cursor:text;color:var(--azul)} @media (any-hover:hover){.tabela td.editavel:hover{background:var(--azul-fundo)}}
.tabela td.falta{background:var(--amarelo-fundo)}
.tabela td.salvo{animation:salvo 1.2s ease}
.cel-input{width:100%;min-width:70px;padding:3px 8px;border:2px solid var(--ambar);border-radius:8px;font:inherit;text-align:right}
.paginacao{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:12px;color:var(--cinza-500);font-size:13px}
.paginacao .pags{display:flex;gap:4px}

/* ---- abas: controle segmentado em pílula ---- */
.abas{display:flex;width:fit-content;max-width:100%;gap:2px;padding:4px;margin-bottom:16px;border:1px solid var(--linha);border-radius:var(--raio-pilula);background:var(--cinza-100);overflow-x:auto}
.aba{padding:7px 16px;border:0;border-radius:var(--raio-pilula);background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--cinza-700);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
@media (any-hover:hover){.aba:hover{color:var(--preto)}}
.aba.ativo{background:var(--branco);color:var(--preto);box-shadow:var(--sombra-p)}

/* ---- gaveta e modal (overlay com vidro fosco) ---- */
.overlay{position:fixed;inset:0;z-index:50;display:none;background:rgba(14,16,24,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.overlay.aberto{display:block;animation:fade-in var(--t) var(--ease)}
.drawer{position:fixed;top:12px;right:12px;bottom:12px;width:min(560px,calc(100vw - 24px));z-index:51;display:flex;flex-direction:column;overflow:hidden;background:var(--branco);border-radius:var(--raio-g);
  box-shadow:var(--sombra-2);transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform var(--t-lento) var(--ease),visibility 0s linear var(--t-lento)}
.drawer.aberto{transform:none;visibility:visible;transition:transform var(--t-lento) var(--ease),visibility 0s}
.drawer-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--linha);background:var(--branco)}
.drawer-h h2{font-size:17px;font-weight:700}
.drawer-b{padding:18px 20px;overflow:auto;flex:1}
.drawer-f{padding:12px 20px;border-top:1px solid var(--linha);display:flex;gap:8px;justify-content:flex-end;background:var(--superficie-2)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,94vw);max-height:calc(100vh - 24px);z-index:52;display:none;background:var(--branco);border-radius:var(--raio-g);box-shadow:var(--sombra-3)}
.modal.aberto{display:block;animation:modal-in var(--t) var(--ease)}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--linha);font-weight:700;font-size:16px}
.modal-b{padding:18px 20px}
.modal-f{padding:12px 20px;display:flex;justify-content:flex-end;gap:8px;background:var(--superficie-2);border-top:1px solid var(--linha);border-radius:0 0 var(--raio-g) var(--raio-g)}

/* ---- toasts, vazio e miudezas ---- */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:99}
.toast{display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 40px));padding:10px 18px 10px 10px;border-radius:var(--raio-g);background:var(--grafite);color:#fff;line-height:1.35;
  box-shadow:var(--sombra-2);animation:toast-in .28s var(--ease) both,toast-out .3s ease-in 2.9s forwards}
.toast::before{content:"i";display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:rgba(255,255,255,.16);font-size:12px;font-weight:800}
.toast.ok::before{content:"\2713";background:var(--verde)}
.toast.erro::before{content:"!";background:var(--vermelho)}
.toast.erro{animation-delay:0s,5.7s}
.vazio{text-align:center;padding:44px 20px;color:var(--cinza-500)} .vazio.grande{padding:90px 20px}
.vazio h2{font-size:18px;color:var(--preto);margin-bottom:6px}
.vazio p{max-width:520px;margin:0 auto 16px}
.vazio .skeleton-linha{max-width:420px;margin:12px auto}
.vazio-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--ambar-fundo);color:var(--ambar-esc)}
.vazio-ico .ico{width:28px;height:28px}
.vazio-cod{font-size:72px;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,var(--ambar-2),var(--ambar-esc));-webkit-background-clip:text;background-clip:text;color:transparent}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px} .dl dt{color:var(--cinza-500)} .dl dd{margin:0;font-weight:600}
.barra{height:8px;background:var(--cinza-200);border-radius:var(--raio-pilula);overflow:hidden}
.barra>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ambar-2),var(--ambar));transition:width var(--t-lento) var(--ease)}
.aviso{padding:12px 16px;border-radius:var(--raio);background:var(--ambar-fundo);border:1px solid var(--ambar-linha);color:var(--ambar-tinta);margin-bottom:14px}
.aviso.erro{background:var(--vermelho-fundo);border-color:var(--vermelho-linha);color:var(--vermelho-tinta)}
.aviso.ok{background:var(--verde-fundo);border-color:var(--verde-linha);color:var(--verde-tinta)}
.aviso.info{background:var(--azul-fundo);border-color:var(--azul-linha);color:var(--azul-tinta)}
hr.sep{border:0;border-top:1px solid var(--linha);margin:16px 0}

/* ---- esqueleto de carga, contagem e entrada escalonada ---- */
.skeleton{display:block;border-radius:var(--raio-p);background:linear-gradient(90deg,var(--cinza-100) 0%,#fff 48%,var(--cinza-100) 100%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
.skeleton-linha{height:14px;margin:10px 0} .skeleton-linha.curta{width:55%} .skeleton-cartao{height:120px;border-radius:var(--raio-g)} .skeleton-kpi{height:104px;border-radius:var(--raio-g)}
.revelar{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.revelar.pre-revelar{opacity:0;transform:translateY(14px)}
.revelar.pre-revelar.visivel{opacity:1;transform:none}
[data-contar]{font-variant-numeric:tabular-nums}

/* ---- movimento ---- */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes entra-pagina{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes modal-in{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px)}}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes salvo{from{background:rgba(22,160,91,.28)}to{background:transparent}}
.conteudo>:not(.drawer):not(.modal):not(.overlay):not(script):not([hidden]){animation:entra-pagina .42s var(--ease) backwards}
.conteudo>:nth-child(2){animation-delay:40ms} .conteudo>:nth-child(3){animation-delay:80ms} .conteudo>:nth-child(4){animation-delay:120ms}
.conteudo>:nth-child(5){animation-delay:160ms} .conteudo>:nth-child(n+6){animation-delay:200ms}

/* ---- hierarquia, densidade e dicas (docs/DESIGN_SISTEMA.md §11.14) ----
   Só classes NOVAS: nenhuma regra acima muda, então as telas que ainda não as usam seguem idênticas (medido). Só tokens; o texto nunca fica abaixo de 12 px.
   (a) dica: .dica-pop (um só <div role="tooltip"> montado por app.js), .dica-i (botão «i»), .dica-alvo (envolve botão desligado), .dica-txt (termo explicado)
   (b) .detalhes («Mais detalhes»)  (c) .t-* e .enf-*  (d) .kpi-simples  (e) .vazio-curto  (f) .abrev  (g) .barra-acoes.compacta e .mais-acoes */
.dica-pop{position:fixed;left:0;top:0;z-index:140;box-sizing:border-box;max-width:min(var(--dica-max),calc(100vw - 16px));padding:8px 12px;border:1px solid var(--cinza-700);border-radius:var(--raio-p);
  background:var(--grafite);color:var(--branco);font-size:var(--dica-fs);font-weight:500;line-height:1.4;text-align:left;overflow-wrap:anywhere;box-shadow:var(--sombra-2);animation:dica-in var(--t-rapido) var(--ease)}
.dica-pop.rico{--dica-max:380px;padding:10px 14px}
.dica-pop b,.dica-pop strong{font-weight:700}
.dica-pop::before{content:"";position:absolute;left:var(--dica-seta,50%);width:10px;height:10px;margin-left:-5px;border-radius:2px;background:var(--grafite);transform:rotate(45deg)}
.dica-pop[data-lado=baixo]::before{top:-4px}
.dica-pop[data-lado=cima]::before{bottom:-4px}
.dica-i{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;margin-left:2px;padding:0;flex:none;border:0;border-radius:50%;background:transparent;color:var(--cinza-500);cursor:help;vertical-align:middle;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.dica-i .ico{width:16px;height:16px}
.dica-i::after{content:"";position:absolute;inset:-10px}                 /* área de toque de 44 px sem aumentar o desenho */
th .dica-i{margin-top:-5px;margin-bottom:-5px}                           /* em cabeçalho de coluna (células `vertical-align:bottom`) o botão de 24 px engordava a linha e o rótulo com «i» ficava 4 px mais alto que os vizinhos: ocupa 14 px na linha, como no .kpi-rot */
.dica-i[aria-expanded=true]{background:var(--cinza-200);color:var(--preto)}@media (any-hover:hover){.dica-i:hover{background:var(--cinza-200);color:var(--preto)}}
.dica-i:focus-visible{outline:none;box-shadow:var(--anel)}
.dica-alvo{display:inline-flex;max-width:100%}
.dica-alvo>:disabled{pointer-events:none}                              /* botão desligado não manda evento de mouse: quem recebe é o envoltório */
.dica-txt{text-decoration:underline dotted var(--cinza-500);text-underline-offset:3px;cursor:help}
body.sp{--dica-fs:18px;--dica-max:420px}                                /* tablet da separação (piso de 18 px e alvo de 48 px): só custom properties e o «i» */
body.sp .dica-i{width:48px;height:48px}
body.sp .dica-i .ico{width:24px;height:24px}
body.sp .dica-i::after{inset:0}
@keyframes dica-in{from{opacity:0;transform:translateY(var(--dica-desloc,4px))}to{opacity:1;transform:none}}

.detalhes{border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie-2)}
.detalhes>summary{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:var(--raio);list-style:none;cursor:pointer;user-select:none;
  font-size:var(--fs-sub);font-weight:650;color:var(--cinza-700);transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.detalhes>summary::-webkit-details-marker{display:none}
@media (any-hover:hover){.detalhes>summary:hover{background:var(--cinza-100);color:var(--preto)}}
.detalhes>summary:focus-visible{outline:none;box-shadow:var(--anel-dentro)}
.detalhes>summary .ico{width:16px;height:16px;margin-left:auto;transition:transform var(--t) var(--ease)}
.detalhes[open]>summary .ico{transform:rotate(180deg)}
.detalhes[open]>summary{border-bottom:1px solid var(--linha);border-radius:var(--raio) var(--raio) 0 0}
.detalhes-n{padding:1px 8px;border-radius:var(--raio-pilula);background:var(--cinza-200);color:var(--cinza-700);font-size:var(--fs-rotulo);font-weight:700}
.detalhes-corpo{padding:14px 16px;font-size:var(--fs-corpo)}
.detalhes.leve{border:0;background:none}                              /* «Saber mais»: sem caixa, no fluxo do texto */
.detalhes.leve>summary{min-height:32px;padding:4px 0;color:var(--azul-tinta)}
@media (any-hover:hover){.detalhes.leve>summary:hover{background:none;text-decoration:underline}}
.detalhes.leve>summary .ico{margin-left:0}
.detalhes.leve[open]>summary{border-bottom:0;border-radius:var(--raio)}
.detalhes.leve>.detalhes-corpo{padding:6px 0 4px}
.detalhes.leve.em-linha{display:inline-block;vertical-align:baseline}      /* «Saber mais» NA MESMA linha do aviso (aviso de uma linha + o link); aberto, vira bloco e o texto desce */
.detalhes.leve.em-linha>summary{display:inline-flex;min-height:40px;padding:0 2px;gap:4px}      /* alvo de toque de 40 px (44 no celular, abaixo): a régua do app (test_parametros_nfe mede todo summary); o aviso segue com UMA linha de texto, só que de 40 px. Módulo que quer a linha mais enxuta sobrescreve com o seu alvo (Faturamento e Compras já o fazem) */
.detalhes.leve.em-linha[open]{display:block}

.t-pagina{font-size:var(--fs-pagina);font-weight:750;letter-spacing:-.02em;line-height:1.15}
.t-secao{font-size:var(--fs-secao);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.t-sub{font-size:var(--fs-sub);font-weight:650;line-height:1.3}
.t-corpo{font-size:var(--fs-corpo);line-height:1.45}
.t-apoio{font-size:var(--fs-apoio);line-height:1.4;color:var(--cinza-500)}
.t-rotulo{font-size:var(--fs-rotulo);font-weight:650;letter-spacing:.03em;line-height:1.3;color:var(--cinza-500)}
.t-valor{font-size:var(--fs-valor);font-weight:750;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.t-valor.p{font-size:calc(var(--fs-valor) * .75)}
.enf-forte{color:var(--preto);font-weight:700}
.enf-suave{color:var(--cinza-500)}
.enf-ok{color:var(--verde-tinta)} .enf-aviso{color:var(--ambar-tinta)} .enf-erro{color:var(--vermelho-tinta)} .enf-info{color:var(--azul-tinta)}

.kpi-simples{display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px 18px;border:1px solid var(--linha);border-radius:var(--raio-g);background:var(--branco);box-shadow:var(--sombra);
  color:inherit;font:inherit;text-align:left;text-decoration:none}
a.kpi-simples,button.kpi-simples{cursor:pointer;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
@media (any-hover:hover){a.kpi-simples:hover,button.kpi-simples:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--cinza-300)}}
.kpi-simples:focus-visible{outline:none;box-shadow:var(--sombra),var(--anel)}
.kpi-rot{display:flex;align-items:center;min-width:0;font-size:var(--fs-rotulo);font-weight:650;letter-spacing:.03em;line-height:1.3;color:var(--cinza-500)}
.kpi-rot>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-rot>.dica-i{margin-top:-5px;margin-bottom:-5px}                     /* o «i» de 24 px não pode engordar a linha do rótulo: os cartões de uma grade ficam todos na mesma altura, com ou sem «i» */
.kpi-linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-width:0}
.kpi-val{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-valor);font-weight:750;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
/* o valor NUNCA vaza do cartão: a linha é um contêiner de tamanho e o corpo do valor encolhe só o quanto precisa (--nc = nº de caracteres do valor, classe c11…c22 posta pela macro/V.kpiHtml quando passa de 10;
   0,56 em por caractere cobre o pior caso medido de valor formatado em 750: 0,551 com 5 caracteres e 0,545 de 7 em diante). Sem suporte a cqw o valor fica em --fs-valor e o overflow acima corta com reticências. */
@supports (width:1cqw){.kpi-linha{container-type:inline-size}.kpi-val{font-size:min(var(--fs-valor),calc(100cqw / (var(--nc,10) * .56)))}}
.kpi-val.c11{--nc:11} .kpi-val.c12{--nc:12} .kpi-val.c13{--nc:13} .kpi-val.c14{--nc:14} .kpi-val.c15{--nc:15} .kpi-val.c16{--nc:16}
.kpi-val.c17{--nc:17} .kpi-val.c18{--nc:18} .kpi-val.c19{--nc:19} .kpi-val.c20{--nc:20} .kpi-val.c21{--nc:21} .kpi-val.c22{--nc:22}
.kpi-apoio{min-height:1.4em;font-size:var(--fs-apoio);line-height:1.4;color:var(--cinza-500)}
.kpi-simples.p .kpi-val{font-size:calc(var(--fs-valor) * .75)}                    /* ajuste manual (continua valendo): o valor em 75% fixo, sem medir o cartão */
.kpi-simples.ok .kpi-val{color:var(--verde-tinta)} .kpi-simples.alerta .kpi-val{color:var(--vermelho-tinta)}
.kpi-simples.atencao .kpi-val{color:var(--ambar-tinta)} .kpi-simples.info .kpi-val{color:var(--azul-tinta)} .kpi-simples.suave .kpi-val{color:var(--cinza-500)}
/* cartão-link COM dica: o link (.kpi-corpo) cobre o conteúdo e o «i» é irmão dele, no canto (um botão dentro de um link não existe; assim o toque no «i» abre a dica e o resto do cartão navega) */
.kpi-simples.com-link{position:relative;gap:0;padding:0;cursor:pointer;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
@media (any-hover:hover){.kpi-simples.com-link:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--cinza-300)}}
.kpi-corpo{display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px 18px;border-radius:var(--raio-g);color:inherit;text-decoration:none}
.kpi-corpo:focus-visible{outline:none;box-shadow:var(--anel-dentro)}
.kpi-simples.com-link .kpi-rot{padding-right:30px}
.kpi-simples.com-link>.dica-i{position:absolute;top:8px;right:8px;margin:0}

.vazio-curto{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:14px 16px;font-size:var(--fs-corpo);line-height:1.4;color:var(--cinza-500)}
.vazio-curto .ico{width:20px;height:20px}
.vazio-curto a,.vazio-curto .btn-link{font-weight:650}
.vazio-curto.centro{justify-content:center;text-align:center}

.abrev{display:block;max-width:var(--abrev-max,100%);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
span.abrev{display:inline-block;vertical-align:bottom}
.abrev.l2,.abrev.l3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere}
.abrev.l3{-webkit-line-clamp:3}
.abrev.c20{--abrev-max:20ch} .abrev.c28{--abrev-max:28ch} .abrev.c36{--abrev-max:36ch} .abrev.c48{--abrev-max:48ch}
td .abrev:not(.l2):not(.l3),th .abrev:not(.l2):not(.l3){max-width:var(--abrev-max,36ch)}   /* em célula (table-layout:auto) o % do max-width é ignorado e a coluna cresceria até o texto inteiro: sem cNN o teto é 36ch */

.barra-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.barra-acoes.compacta{gap:4px}
.barra-acoes.compacta .btn:not(.btn-primario):not(.btn-sucesso):not(.btn-perigo){background:transparent;border-color:transparent;color:var(--cinza-700)}
@media (any-hover:hover){.barra-acoes.compacta .btn:not(.btn-primario):not(.btn-sucesso):not(.btn-perigo):hover{background:var(--cinza-100);color:var(--preto)}}
.barra-acoes.compacta>.btn:disabled:not(.mantem){display:none}      /* `disabled` solto SOME, tenha ou não data-dica (um disabled não recebe foco nem, em Safari/Firefox, mouse: a dica dele nunca abriria; a razão vai numa linha visível, como o #selMotivo de Pedidos).
   Para ficar COM o motivo: aria-disabled="true" + data-dica, o botão dentro de .dica-alvo ou .mantem (docs/DESIGN_SISTEMA.md §11.14, item 7) */
.mais-acoes{position:relative;display:inline-block}
.mais-acoes>summary{list-style:none;cursor:pointer}
.mais-acoes>summary::-webkit-details-marker{display:none}
.mais-lista{position:fixed;left:auto;top:auto;z-index:60;display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:min(320px,calc(100vw - 24px));padding:6px;
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--branco);box-shadow:var(--sombra-2);animation:fade-in var(--t-rapido) var(--ease)}
/* A lista é FIXA na janela: nenhum contêiner com overflow (tabela, gaveta, modal) a corta. app.js (posicionarMais) a põe embaixo do botão, alinhada à direita dele (à esquerda com .esq no <details>),
   sobe se faltar espaço e a mantém a 8 px das bordas; sem JS ela cai logo abaixo do botão. Só opacidade na entrada: um transform na lista falsearia a medida da posição. */
.mais-lista .btn,.mais-lista a{justify-content:flex-start;width:100%;min-height:40px;padding:8px 12px;border-color:transparent;border-radius:var(--raio-p);background:transparent;font-weight:600}
@media (any-hover:hover){.mais-lista .btn:hover,.mais-lista a:hover{background:var(--cinza-100)}}
.mais-lista .btn-perigo{color:var(--vermelho-tinta)}

/* ---- telas estreitas ---- */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  /* fechada, a gaveta fica FORA da ordem de Tab e da árvore de acessibilidade (visibility, com atraso igual ao da saída: a animação se vê) */
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:auto;margin:0;width:min(280px,86vw);border-radius:0 var(--raio-g) var(--raio-g) 0;z-index:60;transform:translateX(-105%);
    visibility:hidden;transition:transform var(--t-lento) var(--ease),visibility 0s linear var(--t-lento)}
  .sidebar.aberto{transform:none;visibility:visible;transition:transform var(--t-lento) var(--ease),visibility 0s}
  .sessao-acoes a,.sessao .btn-link{display:inline-flex;align-items:center;min-height:40px;padding:0 4px}
  .side-colapsar{display:none}
  .side-fundo{display:block;position:fixed;inset:0;z-index:59;background:rgba(14,16,24,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility 0s linear var(--t)}
  .side-fundo.aberto{opacity:1;visibility:visible;transition:opacity var(--t) var(--ease),visibility 0s}
  .btn-icone.menu-toggle{display:inline-grid}
  .topbar{flex-wrap:wrap;gap:8px 12px;padding:10px 14px}
  .topbar-titulo{flex:1 1 0}
  .topbar-ferr{margin-left:auto}
  .topbar-novo{display:none}
  .busca-btn{min-width:0;width:40px;padding:0;justify-content:center}
  .busca-btn .busca-txt,.busca-btn kbd{display:none}
  .topbar-acoes{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end}
  .topbar-acoes:empty{display:none}
  .conteudo{padding:16px 14px 50px}
  .btn,.btn-p,.chip,.seg button,.aba{min-height:40px}
  .detalhes>summary,.mais-lista .btn,.mais-lista a{min-height:44px}
  .detalhes.leve.em-linha>summary{min-height:44px}
  .kpi-simples{padding:14px 16px} .kpi-corpo{padding:14px 16px}
  .conteudo input[type=checkbox],.conteudo input[type=radio]{width:24px;height:24px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .drawer{top:0;right:0;bottom:0;width:100vw;border-radius:0}
  .com-faixa{--faixa-h:40px}
  .com-faixa .sidebar{top:var(--faixa-h);height:auto}
  .faixa-teste-txt{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .revelar.pre-revelar{opacity:1;transform:none}
}
/* Contraste forçado (Windows «alto contraste»): o sistema TIRA box-shadow, e o anel de foco do botão é box-shadow com `outline:none`: sem isto o foco sumia (WCAG 2.4.7). */
@media (forced-colors:active){
  .btn:focus-visible,.nav-item:focus-visible,.nav-grupo-btn:focus-visible,.dica-i:focus-visible,.kpi-simples:focus-visible,.kpi-corpo:focus-visible,.detalhes>summary:focus-visible{outline:2px solid CanvasText;outline-offset:2px}
}
@media print{
  .sidebar,.side-fundo,.topbar,.toolbar,.toasts,.no-print,.dica-pop,.dica-i,.mais-acoes{display:none!important}
  .conteudo{padding:0;max-width:none}
  .conteudo>*{animation:none!important}
  body{background:#fff}
  .card,.kpi,.tabela-wrap{box-shadow:none}
}

/* valor financeiro que o perfil não vê (V.valorOculto): o «—» no lugar do número, com a dica ao passar o mouse, focar ou tocar. Nunca um zero falso. */
.valor-oculto{display:inline-block;min-width:1.4em;color:var(--cinza-500);font-weight:600;text-align:center;cursor:help;border-radius:var(--raio-p)}
.valor-oculto:focus-visible{outline:2px solid var(--preto);outline-offset:2px}