/* Morumbi 3D — Design System V1.

   Dois arquivos, e a ordem entre eles importa:

     ds.css       os TOKENS e os COMPONENTES de toda tela: botão, campo,
                  cartão, métrica, etiqueta, tabela, gaveta, modal, alerta,
                  vazio, esqueleto, abas, paginação, a casca (lateral e topo)
     sistema.css  o que é de UMA tela: a vitrine, o quadro de produção, o
                  cadastro de produto. Vem depois, e pode ajustar um
                  componente dentro da sua tela -- nunca redefini-lo.

   Um componente escrito nos dois é o começo de dois componentes: a tela
   nova copia o de cima, a velha fica com o de baixo, e o produto deixa de
   parecer um só. `tests/test_design_system.py` reprova a regra-base de um
   componente daqui reaparecendo em sistema.css, e cor solta fora do :root.

   Cor com significado, e não com enfeite:
     primária  ação, link, navegação ativa, o que está selecionado
     sucesso   aprovado, concluído, entregue, disponível
     atenção   aguardando, estoque baixo, pendência
     perigo    erro, cancelado, perda, exclusão
     neutro    o resto
   O LARANJA da marca não é semântico: é a cor da CONVERSÃO na vitrine (o
   "Pedir pelo WhatsApp") e mora lá, em sistema.css. */

/* ================================================================ tokens */
:root{
  /* ---- cores base (Figma: Design System V1 — Foundations) */
  --primaria:#0E4FF5;
  --primaria-escura:#0A3BC0;       /* hover do botão principal */
  --primaria-fundo:#EEF3FF;        /* item ativo da lateral, selecionado */
  --primaria-borda:#C7D6FE;
  --primaria-clara:#5B8CFF;        /* o azul sobre fundo escuro (a entrada) */
  --navy:#091330;
  --fundo:#F6F8FB;
  --superficie:#FFFFFF;
  --superficie-2:#F9FAFB;          /* cabeçalho de tabela, hover de linha */
  --texto:#1A1F2B;
  --texto-2:#667085;               /* 4,97:1 no branco -- passa no AA */
  --texto-3:#98A2B3;               /* só placeholder e ícone decorativo */
  --borda:#E2E6ED;
  --borda-forte:#D0D5DD;           /* borda de campo: precisa ser vista */
  --branco:#FFFFFF;

  /* ---- semânticas. Texto >= 4,5:1 sobre o próprio fundo. */
  --sucesso:#067647;  --sucesso-fundo:#ECFDF3;  --sucesso-borda:#ABEFC6;
  --atencao:#B54708;  --atencao-fundo:#FFFAEB;  --atencao-borda:#FEDF89;
  --perigo:#B42318;   --perigo-fundo:#FEF3F2;   --perigo-borda:#FECDCA;
  --perigo-escuro:#912018;
  --info:#0E4FF5;     --info-fundo:#EEF3FF;     --info-borda:#C7D6FE;
  --neutro:#475467;   --neutro-fundo:#F2F4F7;   --neutro-borda:#E4E7EC;

  /* ---- a marca (o M): laranja é conversão, não decoração */
  --laranja:#F03000; --laranja-claro:#F08000; --laranja-escuro:#C02600;

  /* ---- tipografia */
  --fonte:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fonte-codigo:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-display:30px;   /* número grande do dashboard */
  --t-titulo:24px;    /* título da página */
  --t-secao:18px;     /* título de seção */
  --t-cartao:15px;    /* título de cartão */
  --t-corpo:14px;
  --t-legenda:12px;
  --t-rotulo:12px;    /* rótulo de campo, cabeçalho de tabela */

  /* ---- espaço: a escala inteira, e nada fora dela */
  --e4:4px; --e8:8px; --e12:12px; --e16:16px; --e20:20px;
  --e24:24px; --e32:32px; --e40:40px; --e48:48px; --e64:64px;

  /* ---- raio */
  --r-p:6px; --r-m:8px; --r-g:12px; --r-xg:16px; --r-pilula:999px;

  /* ---- borda e sombra: borda antes de fundo, fundo antes de sombra */
  --borda-padrao:1px solid var(--borda);
  --sombra-p:0 1px 2px rgba(16,24,40,.05);
  --sombra-m:0 8px 24px rgba(16,24,40,.12);    /* só o que flutua: menu, gaveta, modal */
  --sombra:var(--sombra-p);
  --anel-foco:0 0 0 3px rgba(14,79,245,.18);
  --anel-erro:0 0 0 3px rgba(180,35,24,.14);
  --brilho:rgba(255,255,255,.7);          /* o reflexo que corre no esqueleto */
  --veu:rgba(9,19,48,.40);
  --veu-forte:rgba(10,12,15,.82);        /* a lupa da foto: o fundo some */
  --sombra-barra:0 -8px 12px -8px rgba(16,24,40,.16);   /* barra de salvar que gruda */
  --sombra-texto:0 1px 3px rgba(0,0,0,.6);              /* texto branco sobre foto */
  --sobre-foto:rgba(10,12,15,.72);       /* selo escrito em cima de foto */
  --vidro:rgba(255,255,255,.92);         /* seta branca em cima de foto */
  --veu-banner:rgba(9,19,48,.62);        /* o véu que deixa ler o texto do banner */
  --ponto-claro:rgba(255,255,255,.55);   /* bolinha do carrossel, sobre foto */
  --ponto:rgba(16,24,40,.25);            /* bolinha da galeria */
  --preto:#000000;                       /* fundo do vídeo */
  --codigo-fundo:#101215; --codigo-texto:#E8ECF1;   /* comando para colar */

  /* ---- a lateral: o azul-marinho da marca (o mesmo da tela de entrar).
     Escura, ela se separa do conteúdo sem precisar de borda, e o item onde
     você está ACENDE em azul -- no branco de antes ele era um tom claro
     sobre outro tom claro. */
  --lateral-fundo:var(--navy);
  --lateral-hover:var(--palco-2);
  --lateral-linha:var(--palco-linha);
  --lateral-texto:var(--palco-suave);
  --lateral-forte:var(--palco-tinta);

  /* ---- medidas da casca e dos controles */
  --lateral:248px;
  --lateral-recolhida:72px;
  --topo:60px;
  --alvo:44px;               /* o que um dedo acerta (vale no telefone) */
  --controle:40px;           /* altura de campo e botão médio */
  --controle-p:32px;
  --controle-g:48px;
  --gaveta:440px;

  /* ---- os nomes de antes, apontando para os de agora. Sprints inteiros
     de CSS falam `--azul` e `--mesa`; renomear tudo de uma vez é a
     migração de uma vez só que o documento pede para não fazer. O nome
     velho é um apelido -- trocar o token muda os dois. */
  --azul:var(--primaria); --azul-escuro:var(--primaria-escura);
  --azul-claro:var(--primaria-clara); --azul-fundo:var(--primaria-fundo);
  --verde:var(--sucesso);   --verde-fundo:var(--sucesso-fundo);
  --ambar:var(--atencao);   --ambar-fundo:var(--atencao-fundo);
  --vermelho:var(--perigo); --vermelho-fundo:var(--perigo-fundo);
  --bancada:var(--fundo); --mesa:var(--superficie); --mesa-2:var(--superficie-2);
  --tinta:var(--texto); --tinta-2:var(--texto); --suave:var(--texto-2);
  --linha:var(--borda); --linha-forte:var(--borda-forte);
  --grafite:var(--navy);

  /* ---- o palco (a tela de entrar): o azul-marinho da marca */
  --palco:var(--navy);
  --palco-2:#101C40;
  --palco-linha:#22305A;
  --palco-tinta:#E8ECF5;
  --palco-suave:#9AA6C4;
  --palco-campo:#070F26;
  --textura-palco:rgba(255,255,255,.028);
  --recado-palco:rgba(240,48,0,.14);
  --recado-palco-aberto:rgba(217,166,70,.13);
}

/* ============================================================ fundação */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--fonte);font-size:var(--t-corpo);line-height:1.5;
  -webkit-font-smoothing:antialiased;color:var(--texto);
}
/* Números alinhados em coluna. Era IBM Plex Mono; com Inter o algarismo
   tabular faz o mesmo trabalho sem trocar de família no meio da linha. */
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
code, .codigo{font-family:var(--fonte-codigo);font-size:.92em}
:focus-visible{outline:2px solid var(--primaria);outline-offset:2px}
a{color:var(--primaria)}
[hidden]{display:none !important}

/* Só para leitor de tela. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- escala tipográfica */
.t-display{font-size:var(--t-display);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.t-titulo{font-size:var(--t-titulo);font-weight:700;line-height:1.25;letter-spacing:-.015em}
.t-secao{font-size:var(--t-secao);font-weight:600;line-height:1.35}
.t-cartao{font-size:var(--t-cartao);font-weight:600;line-height:1.4}
.t-legenda{font-size:var(--t-legenda);color:var(--texto-2)}
.nota{font-size:13px;color:var(--texto-2);margin:var(--e8) 0 0;max-width:64ch;line-height:1.5}
.fraco{color:var(--texto-2);font-size:13px;margin-left:6px}

/* Título de seção. Era rótulo em caixa alta e fonte mono; hierarquia se faz
   com peso e tamanho, e caixa alta em toda seção disputa com o conteúdo. */
h2.secao{
  font-size:var(--t-secao);font-weight:600;color:var(--texto);
  margin:var(--e32) 0 var(--e12);line-height:1.35;letter-spacing:-.005em;
}
h2.secao:first-child{margin-top:0}

/* ============================================================== botão
   Primary .botao · Secondary .botao.vazado · Ghost .botao.fantasma ·
   Danger .botao.perigo · Link .botao.link
   Tamanhos: .pequeno (32) · padrão (40) · .grande (48)
   UM primário por contexto: dois azuis cheios lado a lado não dizem qual. */
.botao{
  font:inherit;font-size:var(--t-corpo);font-weight:600;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e8);
  min-height:var(--controle);padding:0 var(--e16);
  background:var(--primaria);color:var(--branco);
  border:1px solid var(--primaria);border-radius:var(--r-m);
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.botao:hover{background:var(--primaria-escura);border-color:var(--primaria-escura)}
.botao:focus-visible{outline:none;box-shadow:var(--anel-foco),0 0 0 1px var(--primaria)}
.botao.vazado{background:var(--superficie);color:var(--texto);border-color:var(--borda-forte)}
.botao.vazado:hover{background:var(--superficie-2);border-color:var(--borda-forte);color:var(--texto)}
.botao.fantasma{background:none;border-color:transparent;color:var(--texto-2)}
.botao.fantasma:hover{background:var(--neutro-fundo);color:var(--texto)}
.botao.perigo{background:var(--perigo);border-color:var(--perigo);color:var(--branco)}
.botao.perigo:hover{background:var(--perigo-escuro);border-color:var(--perigo-escuro)}
.botao.link{background:none;border-color:transparent;color:var(--primaria);padding:0 var(--e4)}
.botao.link:hover{text-decoration:underline;background:none}
.botao.pequeno{min-height:var(--controle-p);padding:0 var(--e12);font-size:13px}
.botao.grande{min-height:var(--controle-g);padding:0 var(--e24);font-size:15px}
.botao svg{flex:none}
.botao:disabled, .botao[aria-disabled=true], .botao.travado{
  opacity:.5;cursor:not-allowed;pointer-events:none}
/* Carregando: o texto fica (a largura não pula) e uma roda gira por cima.
   Quem liga é a trava de duplo envio da casca (aria-busy). */
.botao[aria-busy=true]{position:relative;color:transparent !important;pointer-events:none}
.botao[aria-busy=true]::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--branco);border-right-color:transparent;
  animation:ds-gira .7s linear infinite;
}
.botao.vazado[aria-busy=true]::after, .botao.fantasma[aria-busy=true]::after{
  border-color:var(--primaria);border-right-color:transparent}
@keyframes ds-gira{to{transform:rotate(360deg)}}

/* Botão só de ícone: a área é de 40 (44 no telefone), o desenho de 20. */
.botao-icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--controle);height:var(--controle);flex:none;
  border-radius:var(--r-m);border:1px solid transparent;background:none;
  color:var(--texto-2);cursor:pointer;text-decoration:none;position:relative;
}
.botao-icone:hover{background:var(--neutro-fundo);color:var(--texto)}
.icone{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icone.p{width:16px;height:16px}

/* ================================================================ campo
   Default · Hover · Focus · Filled · Disabled · Error (.com-erro) · Success (.ok)
   O campo nasce ESCURO -- é o palco da tela de entrar --, e quem clareia é a
   classe do <body> (bancada e folha do cliente). Ver CLAUDE.md. */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo > *{min-width:0}
.campo label, .campo > span{font-size:13px;font-weight:500;color:var(--palco-suave)}
.campo input{
  font:inherit;font-size:16px;padding:0 var(--e12);min-height:var(--controle-g);
  border-radius:var(--r-m);background:var(--palco-campo);
  border:1px solid var(--palco-linha);color:var(--palco-tinta);
}
.campo input:focus{border-color:var(--primaria);outline:none;box-shadow:var(--anel-foco)}
body.bancada .campo > span, body.publico .campo > span{color:var(--texto)}
body.bancada .campo input, body.bancada .campo select, body.bancada .campo textarea,
body.publico .campo input, body.publico .campo select, body.publico .campo textarea{
  font:inherit;font-size:var(--t-corpo);width:100%;max-width:100%;
  min-height:var(--controle);padding:0 var(--e12);
  background:var(--superficie);color:var(--texto);
  border:1px solid var(--borda-forte);border-radius:var(--r-m);
  box-shadow:var(--sombra-p);transition:border-color .12s ease,box-shadow .12s ease;
}
body.bancada .campo textarea, body.publico .campo textarea{
  padding:var(--e8) var(--e12);line-height:1.5;resize:vertical}
body.bancada .campo input:hover, body.bancada .campo select:hover,
body.bancada .campo textarea:hover{border-color:var(--texto-3)}
body.bancada .campo input:focus, body.bancada .campo select:focus,
body.bancada .campo textarea:focus,
body.publico .campo input:focus, body.publico .campo select:focus,
body.publico .campo textarea:focus{
  border-color:var(--primaria);outline:none;box-shadow:var(--anel-foco)}
body.bancada .campo input:disabled, body.bancada .campo select:disabled,
body.bancada .campo textarea:disabled{
  background:var(--superficie-2);color:var(--texto-2);cursor:not-allowed;box-shadow:none}
body.bancada .campo input[readonly]{background:var(--superficie-2)}
::placeholder{color:var(--texto-3);opacity:1}
/* Erro e acerto não dependem só da cor: o erro traz a frase embaixo. */
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea,
body.bancada .campo.com-erro input, body.bancada .campo.com-erro select,
body.bancada .campo.com-erro textarea{border-color:var(--perigo)}
.campo.com-erro input:focus, body.bancada .campo.com-erro input:focus{
  box-shadow:var(--anel-erro)}
body.bancada .campo.ok input, body.bancada .campo.ok select{border-color:var(--sucesso)}
.recado-campo{display:block;color:var(--perigo);font-size:13px;font-weight:500;line-height:1.4}
.dica-campo{display:inline-block;color:var(--primaria);font-size:12px}

/* Select com a seta desenhada: a do sistema muda de sistema para sistema, e
   cada filtro parecia de um produto diferente. */
body.bancada select, body.publico .campo select, body.publico .peneira select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
  padding-right:34px !important;
}
body.bancada input[type=checkbox], body.bancada input[type=radio]{
  accent-color:var(--primaria);width:16px;height:16px}

.formulario{display:flex;flex-direction:column;gap:var(--e16)}
.linha{display:flex;gap:var(--e16);flex-wrap:wrap}
/* `flex-wrap` sozinho não basta: um campo com largura própria maior que a
   tela não quebra, ele transborda. `min-width:0` deixa encolher, e o `min()`
   dá um piso que nunca passa da largura disponível. */
.linha > .campo{flex:1 1 auto;min-width:min(130px,100%)}
.linha > .campo.cresce{flex:1 1 220px;min-width:min(220px,100%)}
.acoes{display:flex;gap:var(--e8);align-items:center;flex-wrap:wrap;margin-top:var(--e4)}
.acoes form{margin:0}

/* ---- busca: o campo com a lupa desenhada dentro */
.busca{position:relative;display:block;flex:1 1 280px;min-width:0}
.busca input[type=search]{
  padding-left:38px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center;background-size:16px;
}

/* ---- barra de filtros (FilterBar): busca + selects + datas + limpar, uma
   linha que quebra. Os controles dela têm a MESMA cara do campo de
   formulário -- eram dois desenhos de caixa de texto na mesma tela. */
.peneira{display:flex;flex-wrap:wrap;gap:var(--e8);align-items:center;margin:0 0 var(--e16)}
.peneira .busca{flex:0 1 360px;margin:0;min-width:0}
.peneira label{margin:0}
.peneira input[type=search], .peneira input[type=date], .peneira select,
.busca-global input[type=search]{
  font:inherit;font-size:var(--t-corpo);min-height:var(--controle);padding:0 var(--e12);
  background-color:var(--superficie);color:var(--texto);
  border:1px solid var(--borda-forte);border-radius:var(--r-m);box-shadow:var(--sombra-p);
}
.peneira input[type=search], .busca-global input[type=search]{width:100%}
.peneira input:focus, .peneira select:focus, .busca-global input:focus{
  outline:none;border-color:var(--primaria);box-shadow:var(--anel-foco)}
.peneira .limpar{color:var(--primaria);font-size:13px;font-weight:500;text-decoration:none;
  display:inline-flex;align-items:center}
.peneira .limpar:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:var(--e8);margin:0 0 var(--e16)}
.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--e12);
  border:1px solid var(--borda-forte);border-radius:var(--r-pilula);
  background:var(--superficie);color:var(--texto);font-size:13px;font-weight:500;
  text-decoration:none;cursor:pointer;
}
.chip:hover{border-color:var(--primaria);color:var(--primaria)}
.chip.aqui{background:var(--primaria-fundo);border-color:var(--primaria-borda);color:var(--primaria)}

/* =============================================================== cartão
   Default .cartao · Interactive a.cartao/.cartao.interativo ·
   Metric .indicador · Warning/Success/Danger .cartao.atencao/.bem/.mal */
.cartao{
  background:var(--superficie);border:var(--borda-padrao);border-radius:var(--r-g);
  padding:var(--e20) var(--e24);
}
a.cartao, .cartao.interativo{color:inherit;text-decoration:none;
  transition:border-color .12s ease,box-shadow .12s ease}
a.cartao:hover, .cartao.interativo:hover{border-color:var(--borda-forte);box-shadow:var(--sombra-p)}
.cartao.atencao{background:var(--atencao-fundo);border-color:var(--atencao-borda)}
.cartao.bem{background:var(--sucesso-fundo);border-color:var(--sucesso-borda)}
.cartao.mal{background:var(--perigo-fundo);border-color:var(--perigo-borda)}
.titulo-cartao{
  font-size:var(--t-cartao);font-weight:600;color:var(--texto);margin:0 0 var(--e12);
  line-height:1.4;
}
.titulo-cartao + *{margin-top:0}
.formulario .titulo-cartao{margin-top:var(--e24)}
.formulario > .titulo-cartao:first-child{margin-top:0}
.cabeca-cartao{display:flex;align-items:center;justify-content:space-between;gap:var(--e12);
  margin:0 0 var(--e16)}
.cabeca-cartao .titulo-cartao{margin:0}
.cabeca-cartao a{font-size:13px;font-weight:500;text-decoration:none}
.cabeca-cartao a:hover{text-decoration:underline}

/* ---- métrica: o número que se clica para ver a lista que ele conta */
.indicador{
  display:flex;flex-direction:column;gap:var(--e4);padding:var(--e20);
  background:var(--superficie);border:var(--borda-padrao);border-radius:var(--r-g);
  text-decoration:none;color:inherit;min-width:0;
  transition:border-color .12s ease,box-shadow .12s ease;
}
a.indicador:hover{border-color:var(--borda-forte);box-shadow:var(--sombra-p)}
.indicador.aqui{border-color:var(--primaria);box-shadow:0 0 0 1px var(--primaria)}
.indicador .titulo{font-size:13px;font-weight:500;color:var(--texto-2);
  display:flex;align-items:center;gap:var(--e8)}
.indicador .titulo .icone{width:18px;height:18px;color:var(--texto-3)}
.indicador .numero{font-size:28px;line-height:1.2;font-weight:700;color:var(--texto);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.indicador .detalhe{font-size:var(--t-legenda);color:var(--texto-2)}
.indicador.azul .numero{color:var(--primaria)}
.indicador.bem .numero{color:var(--sucesso)}
.indicador.atencao .numero{color:var(--atencao)}
.indicador.mal .numero{color:var(--perigo)}

/* Os números de cima de toda lista. Colunas que se ajeitam sozinhas. */
.placar-produtos{
  display:grid;gap:var(--e16);margin-bottom:var(--e24);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.placar-produtos > *{min-width:0}

/* ============================================================ etiqueta
   StatusBadge: Neutral · Info · Success · Warning · Danger.
   A bolinha à esquerda é da cor; o SIGNIFICADO está na palavra -- quem não
   distingue verde de vermelho lê "Entregue" e "Cancelado". */
.etiqueta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-legenda);font-weight:500;line-height:1.5;
  padding:1px 8px 1px 7px;border-radius:var(--r-pilula);white-space:nowrap;
  background:var(--neutro-fundo);color:var(--neutro);border:1px solid var(--neutro-borda);
}
.etiqueta::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.etiqueta.neutra, .etiqueta.cinza{background:var(--neutro-fundo);color:var(--neutro);border-color:var(--neutro-borda)}
.etiqueta.info, .etiqueta.azul{background:var(--info-fundo);color:var(--info);border-color:var(--info-borda)}
.etiqueta.sucesso, .etiqueta.verde, .etiqueta.bem{background:var(--sucesso-fundo);color:var(--sucesso);border-color:var(--sucesso-borda)}
.etiqueta.atencao, .etiqueta.ambar, .etiqueta.hoje{background:var(--atencao-fundo);color:var(--atencao);border-color:var(--atencao-borda)}
.etiqueta.perigo, .etiqueta.vermelha, .etiqueta.atrasado, .etiqueta.mal{background:var(--perigo-fundo);color:var(--perigo);border-color:var(--perigo-borda)}

/* ============================================================== tabela
   Cabeçalho discreto, linha de 52 px, borda só entre linhas, número à
   direita. No telefone a linha vira cartão (sistema.css, desde o U3). */
.cartao-tabela{padding:0;overflow:hidden}
.cartao-tabela .rolagem{margin:0}
.rolagem{overflow-x:auto;margin:-4px}
table.tabela, table.lista{border-collapse:collapse;width:100%;font-size:var(--t-corpo)}
table.tabela{min-width:560px}
table.tabela th, table.lista th{
  font-size:var(--t-rotulo);font-weight:500;color:var(--texto-2);text-align:left;
  padding:var(--e12) var(--e16);background:var(--superficie-2);
  border-bottom:var(--borda-padrao);white-space:nowrap;
}
table.tabela td, table.lista td{
  padding:var(--e12) var(--e16);border-bottom:var(--borda-padrao);vertical-align:middle;
}
table.tabela tbody tr:last-child td, table.lista tbody tr:last-child td{border-bottom:none}
table.tabela tbody tr:hover td{background:var(--superficie-2)}
table.tabela tfoot td{border-top:var(--borda-padrao);border-bottom:none;color:var(--texto-2);
  font-size:13px;background:var(--superficie)}
table.tabela .num, table.lista .num{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
table.tabela a{color:var(--texto);font-weight:500;text-decoration:none}
table.tabela a:hover{color:var(--primaria);text-decoration:underline}
table.tabela .forte{font-weight:600}
tr.inativo td{opacity:.6}

/* ---- ordenar pelo cabeçalho */
/* A seta só aparece na coluna que está ordenando -- uma seta em cada
   cabeçalho vira um campo de setas, e nenhuma delas diz nada. */
th a.ordenar{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px;
  font:inherit}
th a.ordenar:hover{color:var(--texto)}
th a.ordenar .seta{visibility:hidden;font-size:11px}
th a.ordenar:hover .seta, th a.ordenar.ativa .seta{visibility:visible}
th a.ordenar.ativa{color:var(--primaria)}
.tabela th[aria-sort]{box-shadow:inset 0 -2px 0 var(--primaria)}

/* ---- paginação */
.paginas{display:flex;flex-wrap:wrap;gap:var(--e4);align-items:center;justify-content:flex-end;
  margin:var(--e16) 0 var(--e4)}
.paginas a{
  min-width:36px;height:36px;padding:0 var(--e12);border-radius:var(--r-m);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--texto-2);font-size:13px;font-weight:500;
  border:1px solid transparent;
}
.paginas a:hover{background:var(--neutro-fundo);color:var(--texto)}
.paginas a.aqui{background:var(--primaria-fundo);color:var(--primaria);border-color:var(--primaria-borda)}
.paginas a.travado{opacity:.4;pointer-events:none}

/* ---- progresso */
.andamento{display:inline-flex;align-items:center;gap:var(--e8);min-width:0}
.andamento-trilho{
  display:inline-block;width:80px;height:6px;border-radius:var(--r-pilula);
  background:var(--neutro-fundo);overflow:hidden;flex:none;
}
.andamento-trilho > span{display:block;height:100%;background:var(--primaria);border-radius:var(--r-pilula)}
.andamento.completo .andamento-trilho > span{background:var(--sucesso)}
.andamento .mono{font-size:13px;color:var(--texto-2)}

/* ================================================================ abas */
.abas{display:flex;gap:var(--e4);font-size:var(--t-corpo);border-bottom:var(--borda-padrao);
  overflow-x:auto;max-width:100%;position:relative}
.abas a{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  color:var(--texto-2);text-decoration:none;font-weight:500;
  padding:var(--e8) var(--e12) 10px;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.abas a:hover{color:var(--texto)}
.abas a.aqui{color:var(--primaria);border-bottom-color:var(--primaria);font-weight:600}
.abas .conta{
  font-size:11.5px;font-weight:600;min-width:20px;padding:0 6px;border-radius:var(--r-pilula);
  background:var(--neutro-fundo);color:var(--texto-2);text-align:center;line-height:18px;
}
.abas a.aqui .conta{background:var(--primaria-fundo);color:var(--primaria)}

.abas-painel{display:flex;gap:var(--e4);border-bottom:var(--borda-padrao);margin-bottom:var(--e16);
  overflow-x:auto}
.abas-painel button{
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
  background:none;border:none;padding:10px var(--e8);color:var(--texto-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.abas-painel button:hover{color:var(--texto)}
.abas-painel button.aqui{color:var(--primaria);border-bottom-color:var(--primaria);font-weight:600}

/* ============================================================== alerta
   Info · Success · Warning · Error. Ícone + título opcional + mensagem +
   ação opcional. Fundo claro e borda, sem faixa berrante. */
.avisos{display:flex;flex-direction:column;gap:var(--e8);margin-bottom:var(--e16)}
/* O texto do aviso mistura frase e <b>: flex partiria a frase em colunas.
   O ícone vai posicionado, e o texto corre normal. */
.aviso, .recado-acao{
  display:block;position:relative;
  padding:var(--e12) var(--e16) var(--e12) 44px;border-radius:var(--r-m);
  font-size:var(--t-corpo);line-height:1.5;
  border:1px solid var(--info-borda);background:var(--info-fundo);color:var(--texto);
  margin:0 0 var(--e16);
}
.avisos .aviso{margin:0}
.aviso::before, .recado-acao::before{
  content:"";position:absolute;left:var(--e16);top:14px;width:18px;height:18px;
  background:var(--info);
  -webkit-mask:var(--icone-aviso) center/contain no-repeat;mask:var(--icone-aviso) center/contain no-repeat;
}
.aviso b, .recado-acao b{font-weight:600}
.aviso.mal{background:var(--perigo-fundo);border-color:var(--perigo-borda)}
.aviso.mal::before{background:var(--perigo)}
.aviso.atencao{background:var(--atencao-fundo);border-color:var(--atencao-borda)}
.aviso.atencao::before{background:var(--atencao)}
.aviso.bem, .recado-acao.bem{background:var(--sucesso-fundo);border-color:var(--sucesso-borda)}
.aviso.bem::before, .recado-acao.bem::before{background:var(--sucesso);
  -webkit-mask-image:var(--icone-ok);mask-image:var(--icone-ok)}
a.aviso{text-decoration:none;color:var(--texto)}
a.aviso:hover{text-decoration:underline}
:root{
  --icone-aviso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --icone-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4 12 14.01l-3-3'/%3E%3C/svg%3E");
}

/* =========================================================== tela vazia
   Banco vazio · busca sem resultado · erro · sem permissão. O recado tem
   uma SAÍDA (um botão), e não só o fato. */
.cartao-vazio, .vazio-ds{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e8);
  padding:var(--e48) var(--e24);
}
.cartao-vazio::before{
  content:"";width:48px;height:48px;border-radius:50%;margin-bottom:var(--e8);
  background:var(--neutro-fundo) var(--icone-vazio) center/22px no-repeat;
}
.cartao-vazio.sem-resultado::before{background-image:var(--icone-lupa)}
.cartao-vazio.erro::before{background-color:var(--perigo-fundo)}
.cartao-vazio.sem-permissao::before{background-image:var(--icone-cadeado)}
.cartao-vazio b{font-size:var(--t-cartao);font-weight:600;color:var(--texto)}
.cartao-vazio span, .cartao-vazio p{color:var(--texto-2);max-width:52ch;margin:0}
/* A saída de uma tela vazia é um botão, e não uma palavra sublinhada no meio
   da frase: link em prosa tem a altura da linha. */
.cartao-vazio .botao{margin-top:var(--e8)}
:root{
  --icone-vazio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
  --icone-lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --icone-cadeado:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* ============================================================ esqueleto
   Nada de tela branca enquanto carrega: a forma do que vem, pulsando. */
.esqueleto{
  display:block;border-radius:var(--r-p);background:var(--neutro-fundo);
  background-image:linear-gradient(90deg,transparent,var(--brilho),transparent);
  background-size:200px 100%;background-repeat:no-repeat;
  animation:ds-brilho 1.2s ease-in-out infinite;height:14px;margin:0 0 var(--e8);
}
.esqueleto.titulo{height:22px;width:60%;margin-bottom:var(--e16)}
.esqueleto.bloco{height:88px;border-radius:var(--r-g)}
.esqueleto.curto{width:40%}
@keyframes ds-brilho{from{background-position:-200px 0}to{background-position:calc(100% + 200px) 0}}
.carregando{color:var(--texto-2);font-size:var(--t-corpo);padding:var(--e8) 0}

/* ============================================================== gaveta
   Novo cliente, detalhe do cliente, novo pedido, detalhe do pedido e do
   produto: a MESMA gaveta. Cabeçalho que fica, conteúdo que rola, rodapé
   de ações que gruda quando o formulário é comprido. */
.painel-lateral, .painel-produto{
  position:fixed;top:0;right:0;bottom:0;width:min(var(--gaveta),100%);z-index:60;
  background:var(--superficie);border-left:var(--borda-padrao);
  box-shadow:var(--sombra-m);overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--e24) var(--e24);
}
.veu-painel{
  position:fixed;inset:0;z-index:55;border:none;padding:0;background:var(--veu);cursor:pointer;
}
.topo-painel{
  display:flex;align-items:flex-start;gap:var(--e12);
  position:sticky;top:0;z-index:2;background:var(--superficie);
  margin:0 calc(-1 * var(--e24)) var(--e16);padding:var(--e20) var(--e24) var(--e16);
  border-bottom:var(--borda-padrao);
}
.topo-painel > div{flex:1 1 auto;min-width:0}
.topo-painel h3{margin:0;font-size:var(--t-secao);font-weight:600;line-height:1.3}
.topo-painel p{margin:2px 0 0;font-size:var(--t-legenda)}
.fechar-painel{
  width:36px;height:36px;flex:none;border-radius:var(--r-m);cursor:pointer;
  background:none;border:1px solid transparent;color:var(--texto-2);font-size:20px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.fechar-painel:hover{background:var(--neutro-fundo);color:var(--texto)}
.rodape-gaveta{
  position:sticky;bottom:calc(-1 * var(--e24));z-index:2;background:var(--superficie);
  margin:var(--e16) calc(-1 * var(--e24)) calc(-1 * var(--e24));
  padding:var(--e16) var(--e24);border-top:var(--borda-padrao);
}
.formulario-gaveta{display:flex;flex-direction:column;gap:var(--e16)}
.formulario-gaveta .campo{margin:0}

.numeros-painel{display:grid;grid-template-columns:1fr 1fr;gap:var(--e16);margin:0 0 var(--e16)}
.numeros-painel > div{min-width:0}
.numeros-painel dt{font-size:var(--t-legenda);color:var(--texto-2);margin:0}
.numeros-painel dd{margin:2px 0 0;font-size:var(--t-cartao);font-weight:600;font-variant-numeric:tabular-nums}
.numeros-painel dd.forte{font-size:20px;color:var(--texto)}
.numeros-painel dd.prejuizo, .numeros-painel dd.mal{color:var(--perigo)}
.numeros-painel dd.atencao{color:var(--atencao)}
.numeros-painel dd.bem{color:var(--sucesso)}
.numeros-painel .somado{grid-column:1 / -1;border-top:var(--borda-padrao);padding-top:var(--e12)}

/* ================================================================ modal
   Confirmação, exclusão, alerta. Fluxo com etapas é gaveta ou página. */
dialog.modal{
  width:min(440px,calc(100vw - 32px));border:var(--borda-padrao);border-radius:var(--r-xg);
  padding:var(--e24);background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-m);
}
dialog.modal::backdrop{background:var(--veu)}
.modal h3{margin:0 0 var(--e8);font-size:var(--t-secao);font-weight:600}
.modal p{margin:0 0 var(--e24);color:var(--texto-2)}
.modal .acoes{justify-content:flex-end;margin:0}
.modal.perigo h3::before{
  content:"";display:block;width:40px;height:40px;border-radius:50%;margin-bottom:var(--e16);
  background:var(--perigo-fundo) var(--icone-alerta) center/20px no-repeat;
}
:root{
  --icone-alerta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

/* ======================================================= menu de ações ⋮ */
.menu-acoes{position:relative;display:inline-block}
.menu-acoes > summary{
  list-style:none;cursor:pointer;width:32px;height:32px;border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--texto-2);
}
.menu-acoes > summary::-webkit-details-marker{display:none}
.menu-acoes > summary:hover{background:var(--neutro-fundo);color:var(--texto)}
.gaveta-acoes{
  position:absolute;right:0;top:36px;z-index:30;min-width:200px;
  display:flex;flex-direction:column;padding:var(--e4);
  background:var(--superficie);border:var(--borda-padrao);border-radius:var(--r-m);
  box-shadow:var(--sombra-m);
}
.gaveta-acoes a, .gaveta-acoes button{
  font:inherit;font-size:var(--t-corpo);text-align:left;text-decoration:none;
  color:var(--texto);background:none;border:none;cursor:pointer;
  padding:var(--e8) 10px;border-radius:var(--r-p);width:100%;
}
.gaveta-acoes a:hover, .gaveta-acoes button:hover{background:var(--neutro-fundo)}
.gaveta-acoes button.perigo{color:var(--perigo)}
.gaveta-acoes button.perigo:hover{background:var(--perigo-fundo)}
.gaveta-acoes form{margin:0}

/* ============================================================ avatar */
.avatar{
  width:32px;height:32px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--primaria-fundo);color:var(--primaria);font-weight:600;font-size:13px;
}
.avatar.grande{width:44px;height:44px;font-size:17px}

/* ======================================================= cabeçalho da página
   Trilha · Título · Descrição · Ações. Toda tela da casa abre assim. */
.cabecalho-pagina, .cabecalho-produtos{
  display:flex;flex-wrap:wrap;gap:var(--e12) var(--e24);align-items:flex-end;
  justify-content:space-between;margin-bottom:var(--e24);
}
.cabecalho-pagina > div:first-child, .cabecalho-produtos > div:first-child{min-width:0}
.cabecalho-pagina h1, .cabecalho-pagina h2.secao,
.cabecalho-produtos h2.secao, .cabecalho-produtos h1{
  margin:0;font-size:var(--t-titulo);font-weight:700;letter-spacing:-.015em;line-height:1.25;
}
.cabecalho-pagina .nota, .cabecalho-produtos .nota{margin:var(--e4) 0 0;font-size:var(--t-corpo)}
.trilha{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--texto-2);
  margin:0 0 var(--e8)}
.trilha a{color:var(--texto-2);text-decoration:none}
.trilha a:hover{color:var(--primaria);text-decoration:underline}
.acoes-cabecalho{display:flex;gap:var(--e8);flex-wrap:wrap;align-items:center}
.acoes-cabecalho form{margin:0}
/* Cabeçalho de seção dentro da página (título + link/ação à direita). */
.cabecalho-lista{display:flex;align-items:center;gap:var(--e16);flex-wrap:wrap;
  margin:var(--e32) 0 var(--e12)}
.cabecalho-lista h2.secao{margin:0;flex:1 1 auto}

/* ================================================================ casca
   Lateral fixa no computador, gaveta no telefone; topo com busca global e
   o usuário. A navegação é SECUNDÁRIA: fundo branco, texto discreto, e o
   azul só no item onde você está. */
body.bancada{background:var(--fundo);color:var(--texto);padding-left:var(--lateral)}
.pagina{max-width:1200px;margin:0 auto;padding:var(--e32) var(--e32) var(--e64)}
.pagina.larga{max-width:1400px}   /* o quadro de produção: cinco colunas */
.pagina.estreita{max-width:760px}

.pular{
  position:absolute;left:-9999px;top:0;z-index:70;
  background:var(--primaria);color:var(--branco);padding:var(--e12) var(--e16);
  border-radius:0 0 var(--r-m) 0;font-weight:600;
}
.pular:focus{left:0}

.lateral{
  position:fixed;top:0;left:0;bottom:0;width:var(--lateral);z-index:20;
  background:var(--lateral-fundo);color:var(--lateral-texto);
  display:flex;flex-direction:column;gap:2px;padding:var(--e16) var(--e12) var(--e12);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
}
.lateral .logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--branco);
  font-weight:700;letter-spacing:-.02em;font-size:17px;line-height:1;
  padding:var(--e4) var(--e8) var(--e20);
}
.lateral .logo img{height:28px;width:auto;display:block}
.logo .tres{color:var(--laranja-escuro)}
.logo .de{color:var(--primaria)}
.lateral .logo .tres{color:var(--laranja-claro)}
.lateral .logo .de{color:var(--primaria-clara)}
.item-solo, .lateral .itens a{
  display:flex;align-items:center;gap:10px;color:var(--lateral-texto);text-decoration:none;
  font:inherit;font-size:var(--t-corpo);font-weight:500;padding:0 10px;border-radius:var(--r-m);
  min-height:40px;
}
.item-solo{margin:0 0 2px}
.item-solo .icone, .lateral .itens a .icone{color:currentColor}
.item-solo:hover, .lateral .itens a:hover{background:var(--lateral-hover);color:var(--branco)}
.item-solo.aqui, .lateral .itens a.aqui{background:var(--primaria);color:var(--branco);font-weight:600}
.item-solo[aria-disabled=true]{opacity:.5;pointer-events:none}
.grupo{border:none;margin-top:var(--e12)}
.grupo > summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e8);
  list-style:none;cursor:pointer;user-select:none;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lateral-texto);padding:0 10px;border-radius:var(--r-m);min-height:32px;
}
.grupo > summary::-webkit-details-marker{display:none}
.grupo > summary:hover{color:var(--branco);background:var(--lateral-hover)}
.grupo .seta{transition:transform .15s ease;flex:none}
.grupo[open] > summary .seta{transform:rotate(180deg)}
.grupo .itens{display:flex;flex-direction:column;gap:2px;padding:2px 0 var(--e4)}
/* O pé da lateral: ver a loja, recolher e (no telefone) quem está usando. */
.pe-lateral{margin-top:auto;padding-top:var(--e12);border-top:1px solid var(--lateral-linha);
  display:flex;flex-direction:column;gap:2px}
button.item-solo{width:100%;border:0;background:none;cursor:pointer;text-align:left}
.item-solo .quando-recolhido{display:none}
.quem-sai{
  padding:var(--e12) var(--e4) 0;margin-top:var(--e8);border-top:1px solid var(--lateral-linha);
  display:flex;align-items:center;gap:10px;
}
.quem-sai form{margin:0 0 0 auto}
.quem{font-size:13px;color:var(--lateral-forte);font-weight:500;display:flex;flex-direction:column;min-width:0}
.perfil-tag{font-size:var(--t-legenda);color:var(--texto-2);font-weight:400}
.quem .perfil-tag{color:var(--lateral-texto)}
.lateral .botao.vazado{background:transparent;border-color:var(--lateral-linha);color:var(--lateral-forte)}
.lateral .botao.vazado:hover{background:var(--lateral-hover);color:var(--branco)}

/* ---- a lateral RECOLHIDA (só computador): os ícones, e o nome de cada
   um no `title` (posto pelo script). O rótulo some da tela e fica para o
   leitor de tela. */
@media (min-width:1024px){
  body.bancada.lateral-recolhida{padding-left:var(--lateral-recolhida)}
  body.lateral-recolhida .lateral{width:var(--lateral-recolhida);padding-left:var(--e12);
    padding-right:var(--e12)}
  body.lateral-recolhida .lateral .rotulo{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  body.lateral-recolhida .lateral .logo{justify-content:center;padding-left:0;padding-right:0}
  body.lateral-recolhida .item-solo, body.lateral-recolhida .lateral .itens a{justify-content:center;padding:0}
  body.lateral-recolhida .grupo{border-top:1px solid var(--lateral-linha);padding-top:var(--e8)}
  body.lateral-recolhida .grupo > summary{display:none}
  body.lateral-recolhida .item-solo .quando-aberto{display:none}
  body.lateral-recolhida .item-solo .quando-recolhido{display:block}
}

/* ---- topo: onde estou, busca, "+ Novo", avisos e a conta. */
.barra-topo{
  display:flex;align-items:center;gap:var(--e16);
  position:sticky;top:0;z-index:15;height:var(--topo);
  background:var(--superficie);border-bottom:var(--borda-padrao);padding:0 var(--e32);
}
.barra-topo .abrir{
  display:none;align-items:center;gap:var(--e8);font:inherit;font-size:var(--t-corpo);
  font-weight:600;background:none;border:1px solid var(--borda-forte);color:var(--texto);
  padding:0 var(--e12);min-height:var(--controle);border-radius:var(--r-m);cursor:pointer;
}
.barra-topo .abrir:hover{background:var(--superficie-2)}
.barra-topo .logo{
  display:none;align-items:center;gap:var(--e8);text-decoration:none;color:var(--texto);
  font-weight:700;letter-spacing:-.02em;font-size:16px;line-height:1;white-space:nowrap;
}
.barra-topo .logo img{height:26px;width:auto;display:block}
/* "Onde estou": o grupo em cinza e a tela em negrito. Sem link -- o grupo
   não é uma tela, e um link que só abre o menu enganaria. */
.onde{display:flex;align-items:center;gap:var(--e8);min-width:0;flex:0 1 auto;font-size:13px;
  white-space:nowrap}
.onde-grupo{color:var(--texto-2)}
.onde-sep{color:var(--texto-3)}
.onde b{color:var(--texto);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.busca-global{flex:0 1 400px;min-width:0;margin:0 0 0 var(--e8);position:relative}
body.bancada .busca-global input[type=search]{background-color:var(--superficie-2);box-shadow:none;
  padding-right:40px}
.tecla-busca{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;
  font:inherit;font-size:11px;font-weight:600;color:var(--texto-2);background:var(--superficie);
  border:1px solid var(--borda-forte);border-radius:var(--r-p);padding:1px 7px;line-height:16px}
.busca-global input:focus + .tecla-busca{display:none}
.barra-topo .ferramentas{display:flex;align-items:center;gap:var(--e8);margin-left:auto}
.contador{
  position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-pilula);background:var(--perigo);color:var(--branco);
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
}
/* Os menus do topo são <details>: abrem pelo teclado sem script. Fechado,
   o painel SOME por regra declarada -- a do navegador não alcança filho
   posicionado (a lição da gaveta "Filtrar" da loja). */
.menu-topo{position:relative}
.menu-topo > summary{list-style:none;cursor:pointer}
.menu-topo > summary::-webkit-details-marker{display:none}
.menu-topo:not([open]) > .painel-menu{display:none}
.painel-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:232px;
  display:flex;flex-direction:column;gap:2px;padding:6px;
  background:var(--superficie);border:var(--borda-padrao);border-radius:var(--r-g);box-shadow:var(--sombra-m);
}
.painel-menu a, .painel-menu button{
  display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:var(--r-m);
  color:var(--texto);text-decoration:none;font:inherit;font-size:var(--t-corpo);font-weight:500;
  background:none;border:0;width:100%;text-align:left;cursor:pointer;
}
.painel-menu a .icone, .painel-menu button .icone{color:var(--texto-2)}
.painel-menu a:hover, .painel-menu button:hover{background:var(--superficie-2)}
.painel-menu form{margin:4px 0 0;padding-top:4px;border-top:var(--borda-padrao)}
.titulo-menu{margin:4px 10px 6px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-2)}
.menu-avisos .painel-menu{min-width:300px}
.menu-novo > summary{gap:6px}
.usuario-topo{display:flex;align-items:center;gap:var(--e8);font-size:13px;color:var(--texto);
  font-weight:500;padding:4px 8px 4px 4px;border-radius:var(--r-pilula);min-height:40px}
.usuario-topo:hover, .menu-usuario[open] > .usuario-topo{background:var(--superficie-2)}
.quem-topo{display:flex;flex-direction:column;line-height:1.15}
.quem-topo b{font-weight:600}
.quem-topo .perfil-tag{font-size:11px}
.veu{display:none}

/* ======================================================== responsivo
   Três faixas, e uma regra para cada:
     telefone  < 768   tabela vira cartão, grade vira 1–2 colunas
     tablet    768–1023 menu em gaveta, alvo de 44 px
     computador >= 1024 lateral fixa
   Os números estão escritos por extenso: variável CSS não entra em
   @media. Mudou aqui, muda em sistema.css junto -- há teste. */
@media (max-width:1023px){
  body.bancada{padding-left:0}
  .barra-topo{padding:0 var(--e16)}
  .barra-topo .abrir, .barra-topo .logo{display:flex}
  .busca-global, .onde{display:none}
  .recolher{display:none}
  .lateral{
    transform:translateX(-100%);transition:transform .18s ease;
    width:min(84vw,300px);z-index:40;
  }
  .lateral .logo{display:none}
  body.com-gaveta .lateral{transform:none;box-shadow:var(--sombra-m)}
  .veu{display:block;position:fixed;inset:0;z-index:35;border:none;padding:0;
    background:var(--veu);cursor:pointer}
  .pagina{padding:var(--e24) var(--e16) var(--e48)}

  /* Alvo de toque: 44 px, só onde há dedo. */
  .botao, .botao-icone, .barra-topo .abrir{min-height:var(--alvo)}
  .botao-icone{width:var(--alvo);height:var(--alvo)}
  .botao.pequeno{min-height:var(--alvo)}
  .item-solo, .lateral .itens a, .grupo > summary{min-height:var(--alvo)}
  .painel-menu a, .painel-menu button{min-height:var(--alvo)}
  body.bancada .campo input, body.bancada .campo select,
  body.publico .campo input, body.publico .campo select{min-height:var(--alvo);font-size:16px}
  .indicador{min-height:var(--alvo)}
  .paginas a{min-width:var(--alvo);height:var(--alvo)}
  .menu-acoes > summary{width:var(--alvo);height:var(--alvo)}
  .gaveta-acoes a, .gaveta-acoes button{min-height:var(--alvo);display:flex;align-items:center}
  .abas a, .abas-painel button{min-height:var(--alvo)}
  .fechar-painel{width:var(--alvo);height:var(--alvo)}
  .chip{min-height:var(--alvo)}
  .cabeca-cartao a{min-height:var(--alvo);display:inline-flex;align-items:center}
  /* A barra de filtros inteira, e não tela por tela: Produtos e Clientes
     tinham a regra, a prancha mostrou que o componente não tinha. */
  /* Os seletores são os MESMOS da regra-base: `.peneira input` perdia para
     `.peneira input[type=date]` por especificidade, e a data ficava em 40. */
  .peneira input[type=search], .peneira input[type=date], .peneira select,
  .peneira .limpar, .peneira .botao, .busca-global input[type=search]{min-height:var(--alvo)}
}
@media (max-width:767px){
  /* No telefone o botão do menu é só o ícone (com o nome para o leitor de
     tela): com a palavra, a marca em uma linha e a lupa e o sino, o topo
     passava 26 px da tela de 360. */
  .barra-topo{gap:var(--e8)}
  .barra-topo .abrir{width:var(--alvo);padding:0;justify-content:center}
  .texto-menu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
  .placar-produtos{grid-template-columns:repeat(2,1fr);gap:var(--e12)}
  .indicador{padding:var(--e12) var(--e16)}
  .indicador .numero{font-size:22px}
  .cabecalho-pagina, .cabecalho-produtos{align-items:flex-start}
  .cabecalho-pagina h1, .cabecalho-pagina h2.secao,
  .cabecalho-produtos h2.secao{font-size:22px}
  .painel-lateral, .painel-produto{width:100%;border-left:none}
  .cartao{padding:var(--e16)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ========================================================= casca: detalhes
   O que só existe numa das faixas. Declarado por último: empata em
   especificidade com as regras de cima, e empate decide pela ordem. */
.so-gaveta{display:none !important}
.quem-sai{display:none}
@media (max-width:1023px){
  .so-gaveta{display:inline-flex !important}
  .so-computador{display:none !important}
  .quem-sai{display:flex}
  .usuario-topo{display:none}
}

/* ---- a busca do topo e os resultados dela */
.resultado-busca{margin-bottom:var(--e16);padding:var(--e16) var(--e20)}
.lista-resultados{list-style:none;margin:0;padding:0}
.lista-resultados li{display:flex;align-items:center;justify-content:space-between;gap:var(--e12);
  border-top:var(--borda-padrao)}
.lista-resultados li:first-child{border-top:none}
.lista-resultados a{display:flex;flex-direction:column;gap:2px;padding:10px 0;min-height:var(--alvo);
  justify-content:center;text-decoration:none;color:var(--texto);min-width:0}
.lista-resultados a:hover b{color:var(--primaria)}
.lista-resultados .fraco{margin:0}
.esqueleto-grupo{padding-top:var(--e8)}

/* ---- a prancha do Design System */
.ds-grade{display:grid;gap:var(--e16);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  margin-bottom:var(--e16)}
.ds-grade > *{min-width:0}
.ds-cor{display:flex;flex-direction:column;gap:2px;font-size:13px}
.ds-amostra{display:block;height:56px;border-radius:var(--r-m);border:var(--borda-padrao);
  margin-bottom:var(--e8)}
.ds-tipos p{margin:0 0 var(--e8)}
.ds-linha{display:flex;flex-wrap:wrap;gap:var(--e12);align-items:center;margin-bottom:var(--e16)}
.ds-espacos, .ds-raios{display:flex;flex-wrap:wrap;gap:var(--e16);align-items:flex-end;
  font-size:var(--t-legenda);color:var(--texto-2)}
.ds-raios{margin-top:var(--e24)}
.ds-espacos span, .ds-raios span{display:flex;flex-direction:column;align-items:center;gap:6px}
.ds-espacos i{display:block;background:var(--primaria-fundo);border:1px solid var(--primaria-borda)}
.ds-raios i{display:block;width:56px;height:40px;background:var(--primaria-fundo);
  border:1px solid var(--primaria-borda)}
.ds-icones{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--e16)}
.ds-icones span{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--texto)}
.ds-icones small{font-size:11px;color:var(--texto-2)}