:root{
  color-scheme:light;
  
  --texto:#0D1E37; --secundario:#4A5468; --apagado:#657188;
  --fundo:#F7F8FA; --superficie:#FFFFFF;
  --sobre-acao:#FFFFFF;
  --borda-cartao:#DEE3EB; --borda-campo:#C3CCD8; --borda-fina:#EEF1F5;
  
  --acao:#193F77; --marinho:#0D1E37; --alerta:#DC2626; --sucesso:#15803D; --atencao:#946200; --ia-sinal:#2563EB;
  --acao-fundo:#F0F4FA; --acao-fraco:#DCE5F1;
  --marinho-bg:#0D1E37;
  
  --ink:#0D1E37; --acento:#4DD5FF; --acento-texto:#0A7FA8; --acento-fundo:#ECFAFF;
  /* 18/10: o menu lateral é marinho nos dois temas — as cores dele viram tokens (eram 22 hexadecimais em menu.mjs) */
  --lado-fundo:#0D1E37; --lado-texto:#B4C5DE; --lado-rotulo:#7E97C0; --lado-ativo:#4DD5FF; --lado-linha:rgba(255,255,255,.08);
  --lado-linha2:rgba(255,255,255,.10); --lado-hover:rgba(255,255,255,.06); --lado-aqui:rgba(77,213,255,.12); --veu:rgba(13,30,55,.6); --raio-folha:16px;
  /* 19/10 (dono: "cria o token tipo --texto-sobre-marinho e troca nos dois lugares, a tira de etapas e o negocio.js"): o texto
     e as linhas sobre o fundo marinho (--marinho-bg, marinho nos dois temas), em degraus do branco — forte, médio, secundário,
     apagado; as linhas, fina, borda e a marca do que já foi feito. Eram color-mix escritos em negocio.js e hex na tira da instalação. */
  --texto-sobre-marinho:#FFFFFF; --texto-sobre-marinho-2:color-mix(in srgb,#FFFFFF 78%,transparent);
  --texto-sobre-marinho-3:color-mix(in srgb,#FFFFFF 62%,transparent); --texto-sobre-marinho-4:color-mix(in srgb,#FFFFFF 48%,transparent);
  --linha-sobre-marinho:rgba(255,255,255,.22); --linha-sobre-marinho-2:rgba(255,255,255,.35); --linha-sobre-marinho-3:rgba(255,255,255,.5);
  --sucesso-sinal:#16A34A;
  --estrela:#D99A00;   /* 21/10 (viso-294): a ★ dos favoritos — no menu (fundo ink) e na barra de cima */
  --anel-foco:0 0 0 3px rgba(77,213,255,.45);
  
  --raio:6px; --raio-p:6px; --raio-chip:999px;
  
  --alvo:38px;
  
  --alvo-campo:56px; --alvo-campo-g:64px; --t-relogio:40px;
  
  --ledge:56px;
  
  
  --t1:11px; --t2:12px; --t3:12px; --t4:12.5px; --t5:13px; --t6:15px; --t7:18px;
  --tcampo:16px;   /* 27/09: o piso do campo de digitar no telefone (abaixo disso o Safari do iPhone dá zoom) */
  
  --info-fundo:#EEF4FF; --info-borda:#CFE0FF; --info-texto:#1A3D7C;
  --ok-fundo:#EEF8F0; --ok-borda:#BFE3C8; --ok-texto:#14682B;
  --cuidado-fundo:#FFF8E6; --cuidado-borda:#F0D9A0; --cuidado-texto:#7A5A10;
  --erro-fundo:#FDECEC; --erro-borda:#F3C9C8; --erro-texto:#8F1D1B;
  --ia-fundo:#F6F2FE; --ia-borda:#E2D6FB; --ia-texto:#5B3FA8;
  --branco:#FFFFFF; --acao-hover:#15325E; --sombra:0 8px 24px rgba(13,30,55,.12);
  --g1:#193F77; --g2:#4F74B5; --g3:#9DB6DE; --g-resto:#C9D1DC;
  --camp-1:#2F6FD0; --camp-2:#E0662F; --camp-3:#1A9E6E; --camp-4:#8A5CD0; --camp-5:#C99700; --camp-6:#D1457A; --camp-7:#2A9DB2; --camp-8:#6B7D32; --camp-9:#A0522D; --camp-10:#5C6BC0;   /* 21/10: uma cor por campanha no Tráfego pago (marketing-trafego-painel.mjs) — pedido da Marina */
  --eng-1:#2F6FD0; --eng-2:#E0662F; --eng-3:#1A9E6E; --eng-4:#8A5CD0; --eng-5:#B08600;   /* 04/11 (Enrico): as 5 categorias da engenharia no gráfico de pizza do custo (fichas.mjs), na ordem Folha, Eixo, Ferragens, Automação, Kits; as mesmas nos dois temas — validadas (faixa de luminosidade, daltonismo, contraste ≥ 3:1) em claro e escuro */   /* 16/10: os tres azuis dos graficos (forte, medio, claro) + o resto; validados p/ daltonismo (docs/PADRAO-VISUAL.md item 9) */
  --fonte:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  /* A RÉGUA DE PESOS (dono, 26/09: "tem muitas em negrito que acabam poluindo e não dando ênfase no que realmente
     importa"): 700 SÓ para o que identifica — nome do cliente, título da tela, o KPI grande. 600 para título de
     bloco, rótulo em caixa alta, botão primário e a aba/segmento ligado. 500 para número, valor, data, contador,
     chip, pastilha, botão secundário e item de menu. 400 para o resto. A cor carrega o alarme, não o peso:
     data vencida é vermelha em 500, não 700. Nada em 800. */
}

:root[data-tema="escuro"]{
  color-scheme:dark;
  --estrela:#F5C04A;
  
  --texto:#E7ECF3; --secundario:#A9B6C9; --apagado:#8593A8;
  --fundo:#0B1420; --superficie:#18222F;
  --borda-cartao:#28323F; --borda-campo:#3A4552; --borda-fina:#1E2732;
  --acao:#B4C5DE; --marinho:#DCE5F1; --alerta:#F87171; --sucesso:#4ADE80; --atencao:#FBBF24; --ia-sinal:#60A5FA;
  --acao-fundo:#16233D; --acao-fraco:#274475;
  --marinho-bg:#22344F;
  --ink:#0D1E37; --acento:#7EDEFF; --acento-texto:#7EDEFF; --acento-fundo:#0F2A38;
  --sucesso-sinal:#4ADE80;
  --info-fundo:#16233d; --info-borda:#274475; --info-texto:#a9c6ff;
  --ok-fundo:#14281b; --ok-borda:#2c5738; --ok-texto:#86e0a0;
  --cuidado-fundo:#2e2611; --cuidado-borda:#5c4a1e; --cuidado-texto:#eccb6e;
  --erro-fundo:#331717; --erro-borda:#6b2b2a; --erro-texto:#ff9d9a;
  --ia-fundo:#241a3a; --ia-borda:#43356b; --ia-texto:#c9b6f5;
  --branco:#FFFFFF; --acao-hover:#C9D6E8; --sombra:0 8px 24px rgba(0,0,0,.5);
  --g1:#C9DAFF; --g2:#7FA6EC; --g3:#3A63A8; --g-resto:#3A4552;
  --camp-1:#6A9CF0; --camp-2:#F0875A; --camp-3:#45C890; --camp-4:#AE8AEE; --camp-5:#E3B935; --camp-6:#EA77A0; --camp-7:#55C4D6; --camp-8:#A0B55A; --camp-9:#D08A5E; --camp-10:#8E9AE6;
  --eng-1:#2F6FD0; --eng-2:#E0662F; --eng-3:#1A9E6E; --eng-4:#8A5CD0; --eng-5:#B08600;
  --sobre-acao:#0B1420;}
@media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){
  color-scheme:dark;
  --estrela:#F5C04A;
  
  --texto:#E7ECF3; --secundario:#A9B6C9; --apagado:#8593A8;
  --fundo:#0B1420; --superficie:#18222F;
  --borda-cartao:#28323F; --borda-campo:#3A4552; --borda-fina:#1E2732;
  --acao:#B4C5DE; --marinho:#DCE5F1; --alerta:#F87171; --sucesso:#4ADE80; --atencao:#FBBF24; --ia-sinal:#60A5FA;
  --acao-fundo:#16233D; --acao-fraco:#274475;
  --marinho-bg:#22344F;
  --ink:#0D1E37; --acento:#7EDEFF; --acento-texto:#7EDEFF; --acento-fundo:#0F2A38;
  --sucesso-sinal:#4ADE80;
  --info-fundo:#16233d; --info-borda:#274475; --info-texto:#a9c6ff;
  --ok-fundo:#14281b; --ok-borda:#2c5738; --ok-texto:#86e0a0;
  --cuidado-fundo:#2e2611; --cuidado-borda:#5c4a1e; --cuidado-texto:#eccb6e;
  --erro-fundo:#331717; --erro-borda:#6b2b2a; --erro-texto:#ff9d9a;
  --ia-fundo:#241a3a; --ia-borda:#43356b; --ia-texto:#c9b6f5;
  --branco:#FFFFFF; --acao-hover:#C9D6E8; --sombra:0 8px 24px rgba(0,0,0,.5);
  --g1:#C9DAFF; --g2:#7FA6EC; --g3:#3A63A8; --g-resto:#3A4552;
  --camp-1:#6A9CF0; --camp-2:#F0875A; --camp-3:#45C890; --camp-4:#AE8AEE; --camp-5:#E3B935; --camp-6:#EA77A0; --camp-7:#55C4D6; --camp-8:#A0B55A; --camp-9:#D08A5E; --camp-10:#8E9AE6;
  --eng-1:#2F6FD0; --eng-2:#E0662F; --eng-3:#1A9E6E; --eng-4:#8A5CD0; --eng-5:#B08600;
  --sobre-acao:#0B1420;} }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{font:var(--t3)/1.5 var(--fonte);margin:0;background:var(--fundo);color:var(--texto);-webkit-text-size-adjust:100%}
a{color:var(--acao);text-decoration:none} a:hover{text-decoration:underline}
/* =================================================================================================
   ⚠️⚠️ 30/08 (Fatia 3) — O ANEL DE FOCO, PARA TODO CONTROLE. O handoff exige (§7): "foco visivel
   sempre; ring ciano 3px; nao remover outline sem substituto".

   Medido antes: o produto tem ~445 elementos clicaveis distintos e **treze declaracoes** de foco
   proprio. O resto dependia do desenho padrao do navegador — que existe, mas muda de forma por
   navegador e some sobre fundo escuro.

   ⚠️⚠️ A FORMA CONSERVADORA, E A ESCOLHA E DELIBERADA. Existe uma maneira "limpa" de fazer isto:
   outline:none + box-shadow:anel. Ela DESLIGA o anel do navegador em centenas de elementos e
   passa a depender do anel novo pintar em todos — e se ele nao pintar num canto qualquer (um
   elemento com overflow:hidden no pai, um background que cobre a sombra), aquele controle fica
   SEM foco nenhum, e o produto vai de "anel em todo lugar" para "anel em lugar nenhum" sem aviso.
   Aqui eu **acrescento** a sombra e **nao toco no outline**: no pior caso a pessoa ve os dois, que e
   feio e acessivel — e feio-e-acessivel ganha de bonito-e-invisivel.
   ⚠️ Medido: ZERO ocorrencias de outline:none no produto hoje. Ninguem apagou o anel do navegador,
   entao nao ha estrago a remendar — so falta acrescentar.

   ⚠️ :focus-visible e nao :focus: o segundo pinta tambem no clique de mouse, e um anel que
   aparece a cada clique ensina a pessoa a ignora-lo — que e como um sinal de acessibilidade morre.
   ⚠️ O anel e o CIANO da marca (--anel-foco), o unico papel em que o handoff manda usa-lo sobre
   claro: ele reprova como texto (1,71 sobre branco) e serve como anel, que nao carrega leitura.
   ================================================================================================= */
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  box-shadow:var(--anel-foco); border-radius:var(--raio-p);
}
/* ⚠️ pastilha e cartao mantem o proprio canto ao focar — o border-radius acima e so para quem nao
   tem nenhum, e sobrescreve-lo aqui deixaria um anel quadrado em volta de uma pastilha redonda. */
/* =================================================================================================
   ⚠️⚠️ 30/08 (Fatia 3) — O DEDO. A regua da casa e do handoff (§7) e a mesma: **alvo >= 44px no
   celular**. Medido num iPhone de 390px, cinco telas: 103 alvos abaixo disso.

   Os culpados, em ordem (classe -> quantos, menor altura):
     summary  35x, menor 19px  <- o pior, e o mais grave: <details> E O MECANISMO DE TODA A
                                 INTERFACE deste produto (colapso sem JavaScript). Um resumo de 19px
                                 e a coisa que a pessoa mais toca, com o menor alvo da tela.
     .mdb     12x, menor 15px  <- o alternador de modo (Foco/Quadro/Lista/Calendario)
     .lnk      8x, menor 32px · .sgb 7x, 30px · .bt 3x, 38px

   ⚠️ SO NO PONTEIRO GROSSO (pointer:coarse). Na mesa, 38px e o que o handoff pede e o que a casa ja
   pratica em 18 lugares — crescer tudo para 44px na mesa engordaria toda tela de lista sem motivo.
   ⚠️ min-height + align-items:center, e nao padding: padding empurraria o texto e quebraria o
   alinhamento de quem ja esta certo; altura minima cresce a AREA sem mover o conteudo.

   ⚠️⚠️ O QUE NAO ENTRA AQUI, E POR QUE: input apareceu 11x com 20px, mas sao os radios INVISIVEIS
   dentro das pastilhas de escolha (opacity:0, 1px) — ali o alvo real e a etiqueta, que ja tem 44.
   Crescer o input escondido nao daria alvo nenhum e ainda poderia vazar por cima do vizinho.
   ⚠️ E .opo/.cli (o titulo e o cliente no cartao do quadro, 16-18px) TAMBEM ficam de fora: eles
   sao texto dentro de um cartao, e engorda-los estouraria a promessa de tres linhas. O conserto certo
   deles e outro — o cartao inteiro virar alvo, como ja acontece no cartao de tarefa. Fica registrado.
   ================================================================================================= */
@media (pointer:coarse),(hover:none){
  :root{--alvo:44px}
  
  summary,.mdb,.sgb,.lnk,.bt,.acao,.lk{display:inline-flex;align-items:center;min-height:var(--alvo)}
  summary{display:flex}
}
.chip:focus-visible,.selo:focus-visible,.pil:focus-visible,
[class*="fvo"]:focus-visible,[class*="fvc"]:focus-visible{border-radius:var(--raio-chip)}
.top{background:var(--superficie);border-bottom:1px solid var(--borda-cartao);padding:5px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:0;z-index:5;min-height:var(--ledge);box-sizing:border-box}
/* =================================================================================================
   ⚠️⚠️ TODA ÂNCORA DO PRODUTO CAIA ATRÁS DO CABEÇALHO — 29/08, dono: *"quando clicamos nos atalhos de
   navegacao embaixo a pagina nao para no ponto certo... para cortando o quadro"*.

   .top é position:sticky (a linha acima). O navegador rola a âncora até o TOPO DA JANELA, que é
   justamente onde o cabeçalho está grudado — então ele come os primeiros ~96px do bloco, e o que a
   pessoa vê é o meio de um quadro cujo título ficou escondido.

   ⚠️ scroll-padding-top NO CONTAINER DE ROLAGEM, e não scroll-margin-top em cada alvo. Já havia um
   remendo por alvo em negocio.js (scroll-margin no proprio #checklist) e ele consertava UMA das oito
   ⚠️ E ESTE COMENTARIO NAO ESCREVE A REGRA ANTIGA POR EXTENSO DE PROPOSITO: ele vira comentario CSS
   na pagina servida, e a sonda p29 confere que a regra antiga NAO esta la — escreve-la aqui faria a
   sonda achar o meu comentario e reprovar. Ja medi string no lugar da coisa 4 vezes neste projeto.
   âncoras — as outras sete continuaram quebradas, porque conserto por alvo só conserta o alvo que
   alguém lembrou. Aqui é uma linha e vale para toda âncora que existir de agora em diante.
   ⚠️ E OS DOIS NÃO PODEM CONVIVER: eles SOMAM. Com os dois, o #checklist pararia 192px abaixo — por
   isso o remendo antigo foi removido junto (ver negocio.js).
   ⚠️ 104px = os ~96px medidos do cabeçalho + 8px de respiro, para o título não encostar na borda.
   ================================================================================================= */
html{scroll-padding-top:calc(var(--ledge) + 8px)}
@media (max-width:759px){
  /* o cabeçalho é mais baixo no telefone (padding menor, menos coisa na linha da meta) */
}
/* 07/10, dono: "podemos retirar o VISO.CRM e deixar o logo maior" — o logotipo já diz VISO; a palavra ao lado
   era repetição. viso-topo.png é o viso.png SEM a margem branca (as letras ocupavam metade da altura do arquivo), em 2×+
   para tela retina. No celular fica em 18 px: lá a fileira tem 355 px para dividir com o nome e as ações. */
.top img.logo{height:26px;width:auto;display:block}
/* 09/10, dono: "pode remover esse logo aqui, e puxar toda a linha para a esquerda (mantendo o alinhamento)". Desde 08/10 a
   barra lateral abre com o ícone + VISO.CRM (menu.mjs, .slogo) e o logotipo do topo virou repetição. Só na MESA com barra
   lateral: no celular a barra é gaveta escondida e o topo é o único lugar da marca; sem barra (data-lado=sem, senha
   provisória) ele também fica. A busca encosta no recuo de 14 px do .top, o mesmo do .wrap: alinhada com o conteúdo. */
@media (min-width:760px){ :root:not([data-lado=sem]) .top .marca{display:none} :root:not([data-lado=sem]) .tbusca{margin-left:0} }
/* =================================================================================================
   A BUSCA GLOBAL DO TOPO — 30/08. Handoff §4 pede 320px; aqui ela ESTICA ate 380 e encolhe ate 180,
   porque a fileira do topo carrega a fita do espelho, o nome e quatro botoes, e um numero fixo faria
   um dos dois quebrar linha em telas de 1100-1280 (a faixa do notebook, onde o time trabalha).
   ⚠️ flex:1 1 180px com max-width e o que faz ela ceder ANTES de qualquer outra coisa do topo:
   ela e a unica peca dali que continua util com metade da largura.
   ================================================================================================= */
.tbusca{flex:1 1 180px;max-width:380px;min-width:0;margin:0 4px}
.tbusca input{width:100%;min-height:var(--alvo);padding:6px 11px;box-sizing:border-box;
  border:1px solid var(--borda-campo);border-radius:var(--raio-p);background:var(--superficie);
  color:var(--texto);font:400 var(--t3) var(--fonte)}
.tbusca input::placeholder{color:var(--apagado)}
.tbusca input:focus-visible{border-color:var(--acento);box-shadow:var(--anel-foco);outline:none}
/* ⚠️ SO NA MESA: num telefone de 390px um campo de 320px nao cabe ao lado da marca, e a barra do
   polegar JA tem "Buscar" — que continua sendo o caminho do celular. */
@media (max-width:759px){ .tbusca{display:none} }
/* 27/09 — AS ABAS QUE NÃO CABEM DIZEM QUE CONTINUAM (dono: versão única do celular; "Pr…" e "Observa…" cortados
   sem aviso). Sombra de rolagem só com CSS: a camada 'local' (cor do fundo) cobre a sombra 'scroll' quando a
   faixa está no começo ou no fim; no meio, a sombra aparece do lado que ainda tem aba. Vale para a ficha, a tela
   da proposta e o montador. */
:root :is(.nabas,.pmabas){
  background:
    linear-gradient(to right, var(--fundo) 40%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--fundo) 40%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.22), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.22), transparent) right center / 12px 100% no-repeat scroll;
  -webkit-overflow-scrolling:touch}
/* 27/09 — no telefone todo campo tem 16 px: abaixo disso o Safari do iPhone dá ZOOM na página ao tocar no campo e não
   desfaz (medido no montador: três campos de 12-13 px). Só em tela de toque; a mesa segue com a régua --t*. */
@media (max-width:759px){ input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:var(--tcampo)!important} }   /* !important de propósito: cada tela tem a sua regra de campo, mais específica, e o zoom do iPhone não negocia */
/* 27/09 — NENHUMA TABELA EMPURRA A TELA PARA O LADO no telefone. As listas da ficha (.nlist: tarefas, desenhos, O.P.,
   outras oportunidades) viram cartões — a primeira célula em cima, o resto embrulhando embaixo. Qualquer outra tabela
   larga rola DENTRO dela mesma (rede de segurança); a página nunca. Medido: a aba Desenhos tinha 402 px em 390. */
@media (max-width:759px){
  table.nlist,table.nlist tbody{display:block;width:100%}
  table.nlist thead{display:none}
  table.nlist tr{display:flex;flex-wrap:wrap;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--borda-cartao)}
  table.nlist td{display:block;border:0;padding:0;text-align:left}
  table.nlist td:first-child{flex:1 1 100%}
  .wrap table:not(.nlist):not(.opfila):not(.dtab):not(.opst){display:block;max-width:100%;overflow-x:auto}
}
/* 27/09 — versão única do celular: a lupa no lugar do campo; tema/e-mail/senha/sair no pé do Menu */
.tlupa{display:none}
.sconta{display:none}
@media (max-width:759px){
  .top a.tlupa{display:inline-flex;margin-left:auto}
  .top a.tlupa~.carimbo{margin-left:6px}
  .top nav.acoes{display:none}
  .side .sconta{display:flex;flex-direction:column;gap:2px;margin:10px 8px 18px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
  .side .sconta form{margin:0}
  .side .sconta button.sitem{width:100%;background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:#B4C5DE}   /* a cor do item da gaveta (paleta literal da barra lateral, p90) */
  .side .scontaeu{margin:8px 12px 0;font-size:var(--t1);color:rgba(255,255,255,.6)}
}
.marca{display:flex;align-items:center;flex:0 0 auto}
/* ATENCAO — position:relative + z-index:1 NAO E ENFEITE, e a linha de baixo tambem nao. Ver o bloco
   longo no fim deste CSS (max-height:480px), que explica o defeito medido: o selo transbordava POR
   CIMA do menu no celular deitado e comia o toque em 12 de 12 combinacoes. O conserto de verdade e o
   min-width do selo; esta linha e o CINTO: no dia em que qualquer outro elemento desta barra
   transbordar, quem recebe o toque continua sendo o menu, que e navegacao, e nao um rotulo. */
nav.nav{display:flex;align-items:center;gap:2px;font-size:var(--t3);position:relative;z-index:1}
nav.nav a{display:inline-flex;align-items:center;justify-content:center;padding:7px 9px;border-radius:6px;color:var(--secundario);font-weight:500;white-space:nowrap}
nav.nav a:hover{background:var(--fundo);color:var(--acao);text-decoration:none}
nav.nav a.aqui{color:var(--marinho);background:var(--fundo)}
nav.acoes{display:flex;align-items:center;gap:6px;flex:0 0 auto} nav.acoes form{margin:0;display:flex}
.ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--borda-cartao);border-radius:6px;background:var(--superficie);color:var(--secundario);cursor:pointer}
.ic:hover{background:var(--fundo);color:var(--acao);border-color:var(--borda-campo);text-decoration:none}
.ic.sair:hover{color:var(--alerta);border-color:var(--erro-borda)} .ic svg{width:17px;height:17px;display:block}
.eu{flex:1 1 0;display:flex;flex-direction:column;line-height:1.25;font-size:var(--t2);color:var(--secundario);min-width:0;text-align:right}
.eu b{font-size:var(--t3);color:var(--texto);font-weight:500}
/* ⚠️ O TOPO NO CELULAR — medido em 187px antes do primeiro dado, com 11 alvos. Sai só o redundante:
   o "VISO.CRM" ao lado do próprio logotipo, o nome do perfil, e a quebra do nome em duas linhas (que
   era o que fazia a barra crescer). NÃO sai nada que só exista aqui: nome, tema, senha e sair moram
   só no topo — o menu lateral tem apenas navegação. */
@media (max-width:759px){
  .top{padding:4px 10px;gap:7px}
  .top img.logo{height:18px}
  .eu{flex-direction:row;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden}
  .eu b{text-overflow:ellipsis;overflow:hidden}
  .eu>span{display:none}
  .top nav.acoes{gap:2px}
}
/* ATENCAO — ELE E UMA FILEIRA DO '.top' AGORA, nao uma faixa propria (ver o bloco longo na casca).
   'flex:1 0 100%' o poe na linha que sobra da barra; o fundo cinza, a borda de baixo e o padding
   lateral sairam porque a barra ja os tem — eram justamente os pixels que a faixa separada cobrava.
   ATENCAO — 'order:9' garante que ele fica DEPOIS dos botoes de conta mesmo se alguem reordenar o HTML:
   a informacao e status, e status nao disputa a primeira linha com identidade e navegacao. */
.carimbo{position:relative;margin-left:auto;font-size:var(--t2);color:var(--secundario)}
.carimbo>summary.carimbores{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:2px 10px;
  border:1px solid var(--borda-campo);border-radius:var(--raio-chip);background:var(--superficie);white-space:nowrap;font-size:var(--t2)}
.carimbo>summary.carimbores::-webkit-details-marker{display:none}
.carimbo>summary.carimbores:hover,.carimbo[open]>summary.carimbores{border-color:var(--acao);color:var(--acao)}
.carimbo .mttri{color:var(--texto);font-weight:600}
.carimbo .mtres{color:var(--texto);font-weight:600}
.carimbo .mtseta{font-style:normal;font-size:var(--t1);opacity:.7}
.carimbocorpo{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:min(760px,calc(100vw - 28px));max-width:calc(100vw - 28px);
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio-p);box-shadow:var(--sombra);padding:10px 12px;
  display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;line-height:1.35}
/* no celular o chip é só o percentual (a linha da busca não tem 220px sobrando): o trimestre e o ritmo estão no painel */
@media (pointer:coarse),(hover:none){ .carimbo>summary.carimbores{min-height:44px} }
@media (max-width:640px){ .carimbo .mtrit,.carimbo .mttri{display:none} .carimbo>summary.carimbores{padding:2px 8px;gap:3px} .top .eu{display:none}
  /* o painel ancorado a direita do chip sairia pela esquerda da tela: no celular ele ocupa a largura toda, abaixo da linha da busca */
  .carimbocorpo{position:fixed;left:10px;right:10px;top:calc(var(--ledge) + 4px);min-width:0;max-width:none} }
.carimbo b{color:var(--texto);font-weight:500}
.carimbo .mtopo{margin-left:10px;padding-left:10px;border-left:1px solid var(--borda-cartao)}
.carimbo .mtopo .mtsep{opacity:.45;margin:0 2px}
.carimbo .mtopo .mtok{color:var(--sucesso)}
.carimbo .mtopo .mtat{color:var(--cuidado-texto)}
.carimbo .mtopo .mtesc{opacity:.6}
@media (max-width:760px){ .carimbo .mtopo{margin-left:0;padding-left:0;border-left:0;display:block} }
.carimbo .cuidado{color:var(--cuidado-texto);background:var(--cuidado-fundo);border:1px solid var(--cuidado-borda);border-radius:6px;padding:1px 6px}
.wrap{padding:14px;max-width:1400px}
.card{background:var(--superficie);border:1px solid var(--borda-cartao);border-radius:var(--raio);padding:14px;margin-bottom:14px}
/* 17/10 (dono: "por que a aba Propostas tem essa margem diferente das demais?"): toda LISTA do menu na mesma moldura — cartão
   branco com 14 px por dentro. Propostas, Tarefas e Pedidos desenhavam direto no fundo cinza; Oportunidades usava 10 px.
   18/10 (dono: "deixa tudo padrão, com a margem"): 14 também com o painel aberto. Fora do painel e só na mesa. */
@media (min-width:760px){
  .wrap:not(.pnwrap):not(.nuwrap)>:is(.pp.qpage,.tks,.agwrap,.rkwrap,.mkt,.mkh,.opwrap,.par,.bpg,.qpage,.mtwrap,.slawrap,.txpwrap,.lv,.vz){background:var(--superficie);border:1px solid var(--borda-cartao);border-radius:var(--raio);padding:14px;margin-bottom:14px;box-sizing:border-box}
  .wrap:not(.pnwrap)>.agwrap>.agh{padding-left:0;padding-right:0}
  /* dentro da moldura, o bloco que já era cartão vira seção: só a linha fina em volta, sem o segundo fundo */
  .wrap:not(.pnwrap):not(.nuwrap)>:is(.rkwrap,.mkt,.mkh,.opwrap,.par,.bpg,.qpage,.mtwrap,.slawrap,.txpwrap) .card{background:transparent;border-color:var(--borda-fina);box-shadow:none}   /* o título de Pedidos alinha com o das outras listas */
}
table{width:100%;border-collapse:collapse;font-size:var(--t3)}
th{text-align:left;font-size:var(--t2);font-weight:600;text-transform:uppercase;color:var(--secundario);border-bottom:1px solid var(--borda-cartao);padding:7px 8px}
/* 16/10 (régua de pesos, padrão visual item 1): o que o navegador dá de graça em negrito e grande — b/strong 700, h1 24 px, h2 18 px —
   desce para a régua; quem precisa de outro valor tem regra própria e continua mandando (especificidade maior) */
b,strong{font-weight:600}
small{font-size:var(--t1)}   /* 17/10: o 'smaller' do navegador dava 10 px (e 9,2 px aninhado), fora da escala */
h1{font-size:var(--t7);font-weight:700;line-height:1.25}
h2{font-size:var(--t6);font-weight:600;line-height:1.3}
td{padding:7px 8px;border-bottom:1px solid var(--borda-fina)} tr:hover td{background:var(--acao-fundo)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.kpi{display:flex;gap:10px;flex-wrap:wrap} .kpi div{background:var(--superficie);border:1px solid var(--borda-cartao);border-radius:var(--raio);padding:11px 14px;flex:1 1 150px}
.kpi b{display:block;font-size:var(--t7);font-weight:700} .kpi span{font-size:var(--t2);color:var(--secundario)}
input,select,textarea{font-size:var(--t5);padding:9px 10px;border:1px solid var(--borda-campo);border-radius:var(--raio-p);background:var(--superficie);color:var(--texto);max-width:100%}
input:focus,select:focus{outline:2px solid var(--info-borda);outline-offset:0;border-color:var(--acao)}
/* ==========================================================================================
   LAY-01 da revisão (06/09, aprovada) — A FOLHA DE COMPONENTES. Contado antes: o mesmo botão definido
   16 vezes em 10 arquivos, .lnb copiado "byte a byte" em três telas, .pil em três, a gramática do
   cabeçalho (.cab*) em duas. Uma régua, um lugar: QUATRO famílias de botão e nada mais —
     .b-primario   cheio azul (o desfecho que a empresa persegue; .btb.ganhar é a variante verde)
     .b-secundario contorno azul (o gesto do fluxo)
     .b-discreto   contorno neutro (o que sempre existe e não pode gritar: Detalhes, + oportunidade)
     .b-perigo     contorno vermelho (o que a empresa REGISTRA, não persegue)
   — mais UM campo (input/select/textarea, logo abaixo) e UMA pastilha (.pil).
   Os nomes antigos migraram tela a tela (06/09): .btb, .lnb (hoje só tamanho de tabela), .acao, .pri e
   .criar a. Sobram os sistemas locais compostos (.bt.pri de tarefas/emissao, .vbneg.pri) e o .btn dos formularios.
   Sem crase neste bloco. */
.b-primario,.b-secundario,.b-discreto,.b-perigo{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--alvo,36px);padding:9px 14px;border:1px solid var(--borda-campo);border-radius:var(--raio-p);
  background:var(--superficie);color:var(--texto);font:500 var(--t4) var(--fonte);text-decoration:none;cursor:pointer;
  white-space:nowrap;text-align:center;line-height:1.25}
.b-primario{background:var(--acao);border-color:var(--acao);color:var(--sobre-acao)}
.b-primario{font-weight:600}
.b-primario:hover{filter:brightness(1.08)}
.b-primario.ganhar{background:var(--sucesso);border-color:var(--sucesso);color:var(--branco);font-weight:600}
.b-secundario{color:var(--acao);border-color:var(--acao)}
.b-secundario:hover{background:var(--acao);border-color:var(--acao);color:var(--sobre-acao)}
.b-discreto:hover{background:var(--fundo);border-color:var(--marinho)}
.b-perigo{color:var(--alerta);border-color:var(--borda-campo)}
.b-perigo:hover{background:var(--alerta);border-color:var(--alerta);color:var(--branco)}
/* a variante de tabela: mesma família, menor — "Detalhes ›" em 113 linhas não pode ter 44px na mesa */
.lnb{padding:6px 8px;font-size:var(--t2)}  /* 06/09: .lnb é só TAMANHO (variante de tabela); a família vem do b-* ao lado; det1 é só o marcador do cartão do celular */
.lnb.sol{color:var(--marinho)}
/* 17/10 (dono: "precisamos ter cuidado e usar os botões padrão definidos"): A RÉGUA DE ALTURAS da mesa (mouse), uma só:
   controle (botão, seletor, campo, segmento) 32 px · botão dentro de linha/cartão 28 px · botão-ícone 24 px ·
   chip de filtro 26 px. No dedo tudo continua com 44 px (regra de ponteiro grosso logo abaixo). docs/PADRAO-VISUAL.md */
@media (hover:hover) and (pointer:fine){
  .b-primario,.b-secundario,.b-discreto,.b-perigo{min-height:32px;padding:5px 12px;font-size:var(--t4)}
  :is(td,.pd-linha,.tf,.qcd,.ct,article.pvc,.mk-cartao,.cd) :is(.b-primario,.b-secundario,.b-discreto,.b-perigo){min-height:28px;padding:3px 10px;font-size:var(--t2)}
  .seg>.sgb,.seg>a.sgb,.seg>span.sgb{min-height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;box-sizing:border-box;font-size:var(--t2)}
  .wrap a.pil,.pcols2 .pcol,.cabchips .pil{min-height:26px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;box-sizing:border-box;font-size:var(--t2);line-height:1}
  .wrap select,.wrap input[type=search],.wrap input[type=text]:not(.nota){min-height:32px}
  :root .wrap .cabtopo .cabdir :is(.b-primario,.b-secundario,.b-discreto,.b-perigo),:root .wrap .cabtopo .pnest>a:is(.b-discreto,.b-secundario){height:32px;min-height:32px;box-sizing:border-box;padding-top:0;padding-bottom:0}
  :root .wrap .seg>.sgb,:root .wrap .seg>a.sgb,:root .wrap .seg>span.sgb{height:32px;min-height:32px;padding-top:0;padding-bottom:0}
  :root .wrap :is(td,.colc,article,.cd,.mk-cartao,.tf) :is(.b-primario,.b-secundario,.b-discreto,.b-perigo){height:28px;min-height:28px;box-sizing:border-box;padding-top:0;padding-bottom:0}
  :root .wrap :is(td,.colc,article,.cd,.mk-cartao,.tf) :is(input[type=date],input[type=time],select){min-height:28px;height:28px;padding-top:0;padding-bottom:0}
}
@media (pointer:coarse),(hover:none){
  .b-primario,.b-secundario,.b-discreto,.b-perigo{min-height:44px}
  .lnb{padding:11px 9px}
}
/* A PASTILHA (era a de estilo.mjs, a versão com apelidos de cor; a da ficha tinha os mesmos verdes em hex) */
.pil{display:inline-flex;align-items:center;gap:4px;font-size:var(--t2);padding:3px 9px;border-radius:var(--raio-chip);line-height:1.4;
  background:var(--fundo);border:1px solid var(--borda-cartao);color:var(--secundario)}
.pil b{color:var(--texto);font-weight:500}
.pil em{font-style:normal;color:var(--apagado)}
.pil.dinheiro{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-texto);
  font-size:var(--t5);font-weight:600;padding:4px 12px}
.pil.dinheiro em{font-style:normal;font-size:var(--t2);font-weight:400}
.pil.semvalor{background:var(--cuidado-fundo);border-color:var(--cuidado-borda);color:var(--cuidado-texto)}
.pil.situacao{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto);font-weight:500}
.pil.situacao b{color:var(--erro-texto);font-weight:600}
/* as três temperaturas (eram de cliente.mjs; promovidas em 10/09 com a tela 7) e a pastilha de MARGEM
   (.pil.mg — só nasce no HTML de quem tem negociacao_abrir; a cor é por faixa: faixaMargem) */
.pil.bom{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-texto)}
.pil.frio{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto)}
.pil.morno{background:var(--cuidado-fundo);border-color:var(--cuidado-borda);color:var(--cuidado-texto)}
.pil.mg{font-weight:500;font-variant-numeric:tabular-nums}
.pil.mg.ok{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-texto)}
.pil.mg.cuidado{background:var(--cuidado-fundo);border-color:var(--cuidado-borda);color:var(--cuidado-texto)}
.pil.mg.mau{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto)}
.pil.mg b,.pil.mg.ok b,.pil.mg.cuidado b,.pil.mg.mau b{color:inherit}
.cabval b.mg.ok{color:var(--ok-texto)} .cabval b.mg.cuidado{color:var(--cuidado-texto)} .cabval b.mg.mau{color:var(--erro-texto)}
/* ==========================================================================================
   A GRAMÁTICA DAS LISTAS (07/09) — recortes à esquerda (.lsrecdet/.lsrec*), o <details> que no celular
   os recolhe (.lsdet), a caixa de seleção (.selb), a barra de lote (.lsbar), os chips dos filtros ativos
   (.fchips) e a ordenação em links (.ordl), o rodapé (.lsfim). Nasceu na lista de Oportunidades (06/09)
   e a de Clientes usa a MESMA — por isso mora aqui. O que é de uma lista só fica na folha dela. */
/* o grude fica no <details> (o item da grade), não no <nav> dentro dele — dentro do details não há altura para grudar (regressão do Lote 1, pega em 07/09) */
.lsrecdet{position:sticky;top:calc(var(--ledge) + 12px);align-self:start;max-height:calc(100vh - var(--ledge) - 24px);overflow-y:auto}
.lsrecrot{margin:0 0 6px;font:600 var(--t1) var(--fonte);letter-spacing:.07em;color:var(--secundario)}
.lsrecl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.lsrecit{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--raio-p);
  font:500 var(--t4) var(--fonte);color:var(--texto);text-decoration:none;min-height:34px}
.lsrecit span{flex:1 1 auto;min-width:0}
.lsrecit b{font:500 var(--t3) var(--fonte);color:var(--secundario);font-variant-numeric:tabular-nums}
.lsrecit:hover{background:var(--fundo);color:var(--acao)}
/* o recorte ATIVO e marcado com moldura, nao so com cor: cor sozinha some para quem nao a distingue */
.lsrecit.on{border:1px solid var(--acao);color:var(--acao);font-weight:600}
.lsrecit.on b{color:var(--acao)}
.lsrecit.urg b{color:var(--alerta)}
.lsrecsub{padding-left:10px}
.lsrecsub .lsrecit{font-size:var(--t3);color:var(--secundario);min-height:30px}
.lsrecpe{margin:12px 0 0;font:400 var(--t1)/1.5 var(--fonte);color:var(--secundario);
  padding-top:9px;border-top:1px solid var(--borda-fina)}
/* NAV-02 — o <details> dos recortes e dos filtros: na MESA ele nem aparece (sem marcador, sempre
   aberto, sem borda); no CELULAR vira uma linha de 44px que resume o que está ativo. */
.lsdet>summary.lsdetsum{list-style:none;display:none}
.lsdet>summary::-webkit-details-marker{display:none}
.lsdet::details-content{content-visibility:visible}
@media(max-width:980px){
  .lsdet>summary.lsdetsum{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;margin:0 0 8px;
    border:1px solid var(--borda-campo);border-radius:var(--raio-p);background:var(--superficie);
    font:600 var(--t4) var(--fonte);color:var(--texto);cursor:pointer}
  .lsdet>summary.lsdetsum::after{content:'▾';margin-left:auto;color:var(--secundario)}
  .lsdet[open]>summary.lsdetsum::after{content:'▴'}
  .lsdet:not([open])::details-content{content-visibility:hidden}
  .selb{width:44px;height:44px} .selb input{width:20px;height:20px}
  /* no celular a barra mora no FIM da lista e só gruda no pé quando há seleção (.tem, posto pelo script):
     pegajosa sempre, ela cobria os primeiros cartões — medido: um toque na 1ª caixa caía no "todas" dela */
  .lsbar{position:static;order:99;margin:8px 0 0}
  .lsbar.tem{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom))}
  .lsbar .selres{flex-basis:100%}
  .fchips .ordr{margin-left:0;flex-basis:100%}
        .lsrecdet,.lsrec{position:static;max-height:none;overflow:visible}
  .lsrecl{flex-direction:row;flex-wrap:wrap;gap:5px}
  .lsrecit{border:1px solid var(--borda-campo);min-height:36px}
  .lsrecsub{padding-left:0}
}
@media (pointer:coarse){ .lsrecit{min-height:44px} }
/* nota 7 — a caixa de seleção: 28px no ponteiro, 44 no dedo; a caixa nativa é o controle (zero desenho novo) */
.selb{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;cursor:pointer}
.selb input{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--acao)}
/* a BARRA DE SELEÇÃO — pegajosa no topo da lista; só ganha cor quando há seleção (classe .tem, do script) */
.lsbar{position:sticky;top:calc(var(--ledge) + 6px);z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:8px 12px;margin:0 0 8px;border:1px solid var(--borda-cartao);border-radius:var(--raio-p);background:var(--superficie)}
.lsbar.tem{border-color:var(--acao);box-shadow:var(--sombra)}
.lsbar .seltudo{display:inline-flex;align-items:center;gap:6px;font:500 var(--t2) var(--fonte);color:var(--secundario);cursor:pointer}
.lsbar .selres{margin:0;flex:1 1 220px;font:500 var(--t3) var(--fonte);color:var(--secundario)}
.lsbar.tem .selres{color:var(--texto)}
.lsbar .selacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lsbar .selacts select{min-height:var(--alvo);font-size:var(--t3);max-width:260px}
@media (hover:hover) and (pointer:fine){ .lsbar .selacts :is(button,select,a.b-secundario,a.b-discreto){min-height:32px;padding:4px 10px;font-size:var(--t2)} }   /* 16/10: a barra de lote com controles de 32 px na mesa (padrão, item 5) */
/* revisao 19/09 — os icones desenhados que substituem os emoji (icones.mjs) e a nota dobrada "como esta lista conta" */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
.ico.bolinha{width:.7em;height:.7em;border-radius:50%;background:currentColor;vertical-align:-.05em}
.bolinha.verde{color:var(--sucesso)} .bolinha.amarelo{color:var(--cuidado-texto)} .bolinha.vermelho{color:var(--erro-texto)} .bolinha.cinza{color:var(--apagado)}
.qnotas{margin:6px 0 0} .qnotas summary{cursor:pointer;font-size:var(--t2);color:var(--secundario);padding:4px 0}
.qnotas>p.note{margin-top:4px}
/* nota 4 — chips dos filtros ativos e a ordenação como links */
.fchips{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 8px;font-size:var(--t2);color:var(--secundario)}
.fchips .fchr,.fchips .ordr{font-weight:500;margin-right:2px}
.fchips .ordr{margin-left:auto}
.fchip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--acao);border-radius:var(--raio-chip);
  color:var(--acao);background:var(--acao-fundo);text-decoration:none;font-weight:600}
.fchip b{font-weight:600}
.fchip:hover{background:var(--acao);color:var(--sobre-acao)}
.ordl{padding:3px 8px;border-radius:var(--raio-chip);color:var(--secundario);text-decoration:none;font-weight:500}
.ordl:hover{color:var(--acao)}
.ordl.on{background:var(--acao-fraco);color:var(--marinho)}
/* nota 6 — o rodapé encadeia a fila */
.lsfim{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 0;font-size:var(--t3);color:var(--secundario)}
/* as setas de página do rodapé (era cópia local em clientes.mjs; 09/09 subiu para cá com a tela 6) */
.lsfim .pgl{min-width:36px;padding:6px 10px}
.lsfim .pgl.off{opacity:.4;pointer-events:none}
/* ==========================================================================================
   A PRIMEIRA COLUNA RECOLHÍVEL (11/09) — cookie viso.col → :root[data-col=fechada] (POST /coluna,
   molde do menu). Sete colunas 1, três classes (.lsrecdet .fesq .cknav), cinco grades; em TODAS a
   coluna é o :first-child e o miolo o :nth-child(2) — por isso UMA regra dupla basta e nenhum
   grid-template-columns é tocado (o miolo passa a cobrir trilha 1 + gap + trilha 2; a direita fica
   na trilha 3). ⚠️ grid-column:1/3 numa grade de UMA trilha cria trilha implícita e quebra —
   e as grades viram multi-coluna em pontos DIFERENTES (lscols/clcols 981, qgrid 1100, fkgrid 1180,
   cockpit 1181). Por isso três blocos, aqui, e não uma cópia em cada folha. Abaixo de 981 manda o
   <details> do celular; este atributo não existe lá.
   ⚠️ Limite honesto: a 1180 px EXATOS .fkgrid já é 3 colunas (min-width:1180) e a regra só age a partir
   de 1181 — 1 px em que a preferência não se aplica no Foco/Fila. Não vale um quarto bloco.
   ⚠️ REGRA PARA O FUTURO: coluna 1 nova = uma das três classes + primeiro filho de uma das cinco grades;
   se não couber, a regra cresce AQUI.
   ⚠️⚠️ A EXCEÇÃO MEDIDA (11/09): a 7b (documento da proposta, emissao.mjs) É .cockpit.ckdoc, mas troca de
   forma pela largura do CONTAINER (@container 1361/1157), não da janela — a 1440 com o menu aberto o container
   tem 1172 px, a .ckdoc está em DUAS trilhas com o índice em fileira, e o grid-column:1/3 do miolo tomava a
   trilha da decisão: a coluna Emitir/verificação caía 578 px para baixo do iframe; a 1280 nascia a trilha
   implícita de 0 px. Por isso .cockpit:not(.ckdoc) aqui, e o recolhimento da 7b mora na folha DELA, escrito
   nos @container dela (esconde o índice em qualquer forma; só estende o miolo quando há três trilhas).
   ========================================================================================== */
/* ⚠️ 11/09 (D20): a grade .qgrid era a do QUADRO DO FUNIL, que morreu — saiu daqui e das ROTAS da p96 (a faixa
   1100–1180 passou a ser medida na lista, .lscols, cuja regra é a de 981–1180). Seis colunas 1, quatro grades. */
/* ⚠️⚠️ 12/09 — RECOLHIDA, A COLUNA 1 VIRA UM TRILHO DE 44 px (dono: "fica reduzido como o menu"), em vez de sumir e o
   miolo se estender por grid-column. O que muda é a PRIMEIRA TRILHA de cada grade (44px) e os filhos da coluna somem
   menos o botão (.colbt), que vira o "expandir". Os pontos de largura são os mesmos de antes. */
@media(min-width:1181px){
  :root[data-col=fechada]:not([data-pn]) :is(.lscols,.clcols,.fkgrid,.cockpit:not(.ckdoc))>:is(.lsrecdet,.fesq,.cknav)>*:not(.colbt){display:none}
  :root[data-col=fechada]:not([data-pn]) :is(.lscols,.clcols,.fkgrid,.cockpit:not(.ckdoc))>:is(.lsrecdet,.fesq,.cknav){width:44px;min-width:0;padding:0;border-color:transparent;background:none;overflow:visible}
  :root[data-col=fechada]:not([data-pn]) .lscols{grid-template-columns:44px minmax(0,1fr)}
  :root[data-col=fechada]:not([data-pn]) .clcols{grid-template-columns:44px minmax(0,1fr) 296px}
  :root[data-col=fechada]:not([data-pn]) .fkgrid{grid-template-columns:44px minmax(0,1fr) 300px}
  :root[data-col=fechada]:not([data-pn]) .cockpit:not(.ckdoc):not(.ckmont){grid-template-columns:44px minmax(0,1fr) 320px}
}
@media(min-width:981px) and (max-width:1180px){
  :root[data-col=fechada]:not([data-pn]) :is(.lscols,.clcols)>.lsrecdet>*:not(.colbt){display:none}
  :root[data-col=fechada]:not([data-pn]) :is(.lscols,.clcols)>.lsrecdet{width:44px;min-width:0;padding:0;border-color:transparent;background:none}
  :root[data-col=fechada]:not([data-pn]) :is(.lscols,.clcols){grid-template-columns:44px minmax(0,1fr)}
}
/* o botão: no PÉ da coluna, como o "Recolher" do menu; recolhido, só o ícone, centrado no trilho */
.colbt{display:flex;margin:12px 0 0;padding-top:8px;border-top:1px solid var(--borda-fina)}
.colbtb{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:6px 8px;border-radius:var(--raio-p);color:var(--secundario);font:600 var(--t2) var(--fonte);cursor:pointer;min-height:36px}
.colbtb:hover{background:var(--fundo);color:var(--texto)} .colbtb svg{width:18px;height:18px;flex:none}
:root[data-col=fechada] .colbt{margin:0;padding:0;border:0;justify-content:center} :root[data-col=fechada] .colbtb{width:36px;padding:6px 0;justify-content:center}
/* o botão só existe onde a regra age: no celular manda o <details>; em .fkgrid/.cockpit abaixo de 1181 a
   coluna já virou fileira de chips (esconder tiraria as filas) */
@media(max-width:1180px){ .colbt[data-grade=fkgrid],.colbt[data-grade=cockpit]{display:none} }
@media(max-width:980px){ .colbt{display:none} }
/* O CONTROLE SEGMENTADO (.seg/.sgb) — 09/09, tela 6. Havia cinco cópias locais (três em emissao.mjs, que
   morreram com o painel antigo, e as de tarefas.mjs, qualificadas por .tks); o painel novo usa ESTA, e a
   sexta cópia não nasce. Primário = contorno que enche (a direção minimalista de 24/08). */
.seg{display:inline-flex;border:1px solid var(--borda-campo);border-radius:var(--raio-p);overflow:hidden}
.sgb{display:inline-flex;align-items:center;padding:8px 14px;font:500 var(--t3) var(--fonte);color:var(--secundario);text-decoration:none;min-height:var(--alvo)}
.sgb+.sgb{border-left:1px solid var(--borda-fina)}
.sgb.on{background:var(--acao);color:var(--sobre-acao)}
/* ==========================================================================================
   A GRAMÁTICA DO CABEÇALHO-COCKPIT (06/09) — morava em negocio.js E em oportunidades.mjs, cópia a cópia.
   LAY-02 da revisão: sobrancelha e subtítulo na MESMA linha do título (a esquerda e a direita), não
   em três linhas — medido: 73px de cabeçalho na lista antes do primeiro dado. .cabesq é uma fileira
   que embrulha: título, sobrancelha, o que mais a tela puser (na ficha: carteira e "nomear o card"),
   e .cabsub encostado à direita. No celular volta a empilhar. */
.cabtopo{display:flex;align-items:flex-start;gap:14px}
.cabesq{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.cabesq h1,.cabesq .tt{margin:0}
.cabolho{margin:0;font:600 var(--t1)/1.4 var(--fonte);letter-spacing:.06em;text-transform:uppercase;color:var(--secundario)}
.cabolho b{color:var(--texto);font-weight:600}
.cabsub{margin:0 0 0 auto;font:400 var(--t3) var(--fonte);color:var(--secundario)}
.cabsub b{color:var(--texto)}
.cabdir{flex:none;display:flex;align-items:center;gap:9px}
.cabval{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.cabval span{font:600 var(--t1) var(--fonte);letter-spacing:.06em;color:var(--secundario)}
.cabval b{font:700 var(--t6) var(--fonte);font-variant-numeric:tabular-nums;white-space:nowrap}
/* O ... é um details nativo: menu sem uma linha de JavaScript. O painel é absoluto para não
   empurrar a tela ao abrir — menu que muda a altura da página faz o dedo errar o alvo. */
.cabmais{position:relative}
.cabmais>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;min-height:38px;border:1px solid var(--borda-campo);border-radius:var(--raio-p);
  font:700 var(--t5)/1 var(--fonte);color:var(--secundario);background:var(--superficie);letter-spacing:1px}
.cabmais>summary::-webkit-details-marker{display:none}
.cabmais>summary::marker{content:''}
.cabmais>summary:hover,.cabmais[open]>summary{border-color:var(--acao);color:var(--acao)}
.cabmenu{position:absolute;right:0;top:calc(100% + 5px);z-index:30;min-width:216px;
  display:flex;flex-direction:column;gap:2px;padding:5px;background:var(--superficie);
  border:1px solid var(--borda);border-radius:var(--raio-p);box-shadow:var(--sombra)}
.cabmenu .mnit,.cabmenu .btsem{display:block;padding:9px 10px;border-radius:var(--raio-p);
  font:500 var(--t3) var(--fonte);color:var(--texto);text-decoration:none;white-space:normal}
.cabmenu .mnit:hover{background:var(--fundo);color:var(--acao)}
.cabmenu form.mnf{margin:0;display:block} .cabmenu button.mnit{width:100%;text-align:left;background:none;border:0;cursor:pointer;box-shadow:none}
.cabmenu button.mnit[aria-pressed=true]{color:var(--acao)}
.cabmenu .mnit.mau:hover{background:var(--erro-fundo);color:var(--erro-texto)}
.cabmenu .btsem{color:var(--secundario);font-weight:400;cursor:default}
.cabchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;align-items:center}
.cabchips .pil.etapa{border-color:var(--acao);color:var(--acao)}
.cabchips .pil.mau{border-color:var(--erro-borda);color:var(--erro-texto);text-decoration:none}
@media (pointer:coarse){ .cabmais>summary{min-width:44px;min-height:44px} .cabmenu .mnit{min-height:44px} }
/* 10/09 (tela 7, medido a 390 iPhone): chip-link do cabeçalho e a saída da caixa de contexto são alvos de dedo */
@media (pointer:coarse){ .cabchips a.pil{min-height:44px} .cknavout{min-height:44px;display:flex;align-items:center} }
/* No celular a decisão vai para BAIXO do nome, em linha própria: espremer valor + botão + menu ao
   lado de um nome de empresa em 375px produz três alvos de 24px, e o alvo desta casa é 44. */
@media(max-width:620px){
  .cabtopo{flex-direction:column;gap:8px}
  .cabesq{gap:2px 10px}
  .cabsub{margin-left:0;flex-basis:100%}
  .cabdir{width:100%;justify-content:space-between;flex-wrap:wrap}
  .cabmenu{right:auto;left:0}
}
.btn{background:var(--superficie);color:var(--acao);border:1.5px solid var(--acao);border-radius:var(--raio-p);padding:11px 16px;font-size:var(--t4);font-weight:600;cursor:pointer;min-height:44px}
.btn:active{transform:translateY(1px)}
.note{font-size:var(--t2);color:var(--apagado);margin-top:10px}
.tag{display:inline-block;font-size:var(--t2);padding:2px 7px;border-radius:6px;background:var(--fundo);border:1px solid var(--borda-cartao);color:var(--secundario)}
.vazio{color:var(--apagado);padding:18px 8px;text-align:center}
.rolar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.aviso{border-radius:var(--raio-p);padding:10px 12px;font-size:var(--t3);margin:0 0 12px;overflow-wrap:anywhere;word-break:break-word}
/* ============================================================================================
   O COCKPIT EM TRES COLUNAS (06/09; global em 07/09, ficha do negocio E do cliente) — indice | assunto | decisao.
   ZERO JAVASCRIPT: o indice sao ancoras e as colunas grudam com position:sticky.
   ⚠️ SEM scroll-margin-top nos alvos: a casca ja tem scroll-padding-top no html (app.js), e os
   dois SOMAM — com os dois, a ancora parava 76px ABAIXO do bloco, com o fim do bloco anterior a
   vista ("para num lugar estranho", dono, 06/09). Uma regra, um lugar.
   ============================================================================================ */
.cockpit{display:grid;grid-template-columns:186px minmax(0,1fr) 320px;gap:18px;align-items:start}
/* 25/09: o montador (.ckmont) não tem mais a coluna do índice — as seções são abas no miolo (proposta.js) */
/* 25/09 (2ª): a coluna de decisão também saiu — o montador é uma coluna só, a proposta ocupando o espaço */
.cockpit.ckmont{grid-template-columns:minmax(0,1fr)}
.ckmeio{min-width:0;display:flex;flex-direction:column}
.cknav,.ckdir{position:sticky;top:calc(var(--ledge) + 12px);align-self:start}
.cknavrot,.ckdirrot{margin:0 0 7px;font:600 var(--t1) var(--fonte);letter-spacing:.07em;color:var(--secundario)}
.cknavl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.cknavl :is(a,label){display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--raio-p);
  font:500 var(--t3) var(--fonte);color:var(--texto);text-decoration:none;min-height:32px}
.cknavl :is(a,label):hover{background:var(--fundo);color:var(--acao)}
.cknavl :is(a,label) b{margin-left:auto;font:500 var(--t2) var(--fonte);color:var(--secundario);font-variant-numeric:tabular-nums}
/* o índice de ESTADO por bloco (10/09, tela 7a): a bolinha do Foco (.ffila i, tarefas.mjs) na gramática
   do cockpit — .on = preenchido, .mau = vermelho (o bloco pede atenção antes de emitir) */
.cknavl :is(a,label) i{width:10px;height:10px;border:1.5px solid var(--borda-campo);border-radius:50%;flex:none}
.cknavl :is(a,label).on i{background:var(--acao);border-color:var(--acao)}
.cknavl :is(a,label).mau i{border-color:var(--erro-texto);background:var(--erro-texto)}
.cknavl :is(a,label).mau b{color:var(--erro-texto)}
/* a caixa de contexto sob o índice (10/09, 7a e 7b): resumo em 186px, com quebra por caractere —
   formulário não cabe aqui, e o de verdade fica no meio, ancorado */
.cknavcx{margin-top:10px;padding:9px 10px;border:1px solid var(--borda-cartao);border-radius:var(--raio-p);
  font:400 var(--t2)/1.45 var(--fonte);color:var(--secundario);overflow-wrap:anywhere}
.cknavcx p{margin:0 0 2px}.cknavcx b{color:var(--texto)}
.cknavcxr{font:600 var(--t1) var(--fonte);letter-spacing:.07em;color:var(--secundario);margin:0 0 4px}
/* a VERIFICAÇÃO (10/09, 7a-15/7b-7): a mesma régua nos dois lados, o mesmo vocabulário de bolinha */
.verif{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.verif li{display:flex;align-items:flex-start;gap:8px;font:400 var(--t3)/1.4 var(--fonte);color:var(--texto)}
.verif li i{width:10px;height:10px;border-radius:50%;flex:none;margin-top:5px;border:1.5px solid var(--borda-campo)}
.verif li.vfok i{background:var(--ok-texto);border-color:var(--ok-texto)}
.verif li.vfav i{background:var(--cuidado-texto);border-color:var(--cuidado-texto)}
.verif li.vftr i{background:var(--erro-texto);border-color:var(--erro-texto)}
.verif li.vftr{color:var(--erro-texto);font-weight:500}
.verif li.vfav{color:var(--cuidado-texto)}
.verif li a{color:inherit}
/* a barra fixa do EDITOR (10/09; era local em proposta.js desde 19/08): quem digita precisa da saída à
   vista. Abaixo de 980px sobe acima da barra de navegação do app — a mesma régua de .lsbar.tem */
.barra{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;
  margin:12px 0 0;padding:10px 14px;background:var(--superficie);border:1px solid var(--borda-cartao);
  border-radius:var(--raio);box-shadow:var(--sombra)}
.barra .b-perigo{margin-right:auto}
@media(max-width:980px){ .barra{bottom:calc(64px + env(safe-area-inset-bottom))} }
.cknavout{display:block;margin-top:10px;padding:9px 10px;border:1px dashed var(--borda-campo);
  border-radius:var(--raio-p);font:400 var(--t2)/1.45 var(--fonte);color:var(--secundario);text-decoration:none}
.cknavout:hover{border-color:var(--acao);color:var(--acao)}
.ckdir{display:flex;flex-direction:column;gap:10px}
.ckdir .bl{margin:0}
.ckia .b-secundario{margin-top:6px}
/* ⚠️ A coluna direita gruda, mas se ela for MAIS ALTA que a janela o sticky trava e o fim dela fica
   inalcancavel. Teto de altura com rolagem propria resolve sem tirar o grude. */
.cknav,.ckdir{max-height:calc(100vh - 24px);overflow-y:auto}
.ckfila{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;
  margin:16px 0 0;padding:11px 13px;border-top:1px solid var(--borda);background:var(--fundo-suave);
  border-radius:var(--raio-p)}
.ckfilart{font:400 var(--t3) var(--fonte);color:var(--secundario)}
.ckfilabt{display:flex;gap:8px;align-items:center}
/* ⚠️ ATE 1180px a decisao vira a PRIMEIRA coisa da pagina (order:-1), e nao a ultima: no celular
   quem abre um negocio quer saber o que fazer, e rolar ate o fim para achar isso e o defeito que
   esta coluna existe para consertar. O indice vira uma fileira de atalhos no topo. */
/* .cktopo: a coluna fora da grade (celular, NAV-04) — nem sticky nem rolagem propria */
.ckdir.cktopo{position:static;max-height:none;overflow:visible;margin:0 0 12px}
@media(max-width:1180px){
  .cockpit{grid-template-columns:1fr}
  .cknav,.ckdir{position:static;max-height:none;overflow:visible}
  .ckdir{order:-1}
  .cknav{order:-2}
  .cknavl{flex-direction:row;flex-wrap:wrap;gap:5px}
  .cknavl :is(a,label){border:1px solid var(--borda-campo);min-height:36px}
  .cknavout{display:inline-block;margin-top:8px}
}
@media (pointer:coarse){ .cknavl :is(a,label){min-height:44px} }
/* 16/10/2026 (docs/PADRAO-VISUAL.md, item 7, escolha do dono): o aviso volta a ser CAIXA COLORIDA inteira, na cor da familia.
   cuidado = pendencia, info = informacao, erro = erro ou bloqueio de verdade, ok = deu certo. Sem familia: caixa neutra. */
.aviso{background:var(--superficie);border:1px solid var(--borda-cartao)}
.aviso.info{background:var(--info-fundo);border-color:var(--info-borda);color:var(--info-texto)}
.aviso.ok{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-texto)}
.aviso.cuidado{background:var(--cuidado-fundo);border-color:var(--cuidado-borda);color:var(--cuidado-texto)}
.aviso.erro{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto)}
.aviso b{font-weight:600}
/* PECAS DO PADRAO (16/10, docs/PADRAO-VISUAL.md): funcoes em estilo.mjs, prefixo pd- */
.pd-cab{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px;margin:0 0 12px}
.pd-cab-t{flex:1 1 260px;min-width:0}
.pd-cab h1{font-size:var(--t7);font-weight:700;line-height:1.25;margin:0;color:var(--texto)}
@media (min-width:760px){ .pd-cab h1{min-height:32px;display:flex;align-items:center;gap:6px} }   /* 18/10: o título na mesma altura das outras telas (a linha do cabeçalho tem 32 px, a dos botões) */
.pd-cab-a{margin:2px 0 0;font-size:var(--t2);color:var(--secundario)}
.pd-cab-d{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
/* 19/10 (Bruno: "alguns ? descentralizados no círculo"): o "?" herdava o letter-spacing dos cabeçalhos em caixa alta (.bl>h2) e
   a altura de linha do texto em volta — a letra saía do centro. Zera o espaçamento e a linha tem a altura de dentro do círculo (16 px). */
.pd-ajuda{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--borda-campo);font-size:var(--t1);font-weight:500;line-height:16px;letter-spacing:0;text-indent:0;text-transform:none;font-style:normal;color:var(--secundario);vertical-align:middle;cursor:pointer;margin-left:4px}
/* 19/10 (dono: "abre no toque — um toque abre, e tocar fora fecha"): o texto do "?" num balão que abre com o foco (o toque dá
   o foco; tocar fora tira) — sem JavaScript. No celular o balão sai embaixo, na largura da tela; o alvo do toque vai a 44 px. */
.pd-ajuda:focus{outline:none;border-color:var(--acao);color:var(--acao)}
.pd-ajuda:focus-visible{box-shadow:var(--anel-foco)}
.pd-ajuda:focus::after{content:attr(aria-label);position:absolute;z-index:60;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(320px,80vw);padding:8px 12px;border:1px solid var(--borda-cartao);border-radius:var(--raio-p);background:var(--superficie);color:var(--texto);box-shadow:var(--sombra);font:400 var(--t2)/1.45 var(--fonte);text-align:left;text-transform:none;letter-spacing:normal;white-space:normal;pointer-events:none}
@media (max-width:760px){.pd-ajuda:focus::after{position:fixed;left:16px;right:16px;top:auto;bottom:16px;transform:none;width:auto;max-width:none}}
@media (pointer:coarse){.pd-ajuda::before{content:'';position:absolute;inset:-13px}}
.pd-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0 0 12px}
.pd-num-c{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border:1px solid var(--borda-cartao);border-radius:var(--raio);background:var(--superficie);color:var(--texto);text-decoration:none;min-width:0}
.pd-num-c b{font-size:var(--t6);font-weight:500;line-height:1.25;font-variant-numeric:tabular-nums}
.pd-num-c span{font-size:var(--t1);color:var(--secundario)}
a.pd-num-c:hover{border-color:var(--acao);background:var(--acao-fundo)}
.pd-num-c.alvo{border-color:var(--acao)} .pd-num-c.alvo b{color:var(--acao)}
.pd-num-c.tom-erro b{color:var(--erro-texto)} .pd-num-c.tom-cuidado b{color:var(--cuidado-texto)} .pd-num-c.tom-apagado b,.pd-num-c.tom-apagado span{color:var(--secundario)} .pd-num-c.tom-apagado{opacity:.7}
.pd-acoes{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.pd-acoes form{margin:0;display:inline-flex}
.pd-ic{display:inline-grid;place-items:center;width:24px;height:24px;min-height:0;padding:0;border:1px solid var(--borda-cartao);border-radius:var(--raio-p);background:var(--superficie);color:var(--secundario);font:500 var(--t2) var(--fonte);line-height:1;text-decoration:none;cursor:pointer}
.pd-ic:hover{border-color:var(--acao);color:var(--acao)}
.pd-ic.pri{color:var(--ok-texto);border-color:var(--ok-borda)}
.pd-ic .ico{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){
  .pd-acoes{opacity:0}
  tr:hover .pd-acoes,.pd-linha:hover .pd-acoes,.pd-acoes:focus-within{opacity:1}
}
@media (pointer:coarse),(hover:none){ .pd-ic{width:44px;height:44px;font-size:var(--t5)} }
/* 19/10 (dono): a ação da linha é o botão no fim, como em /propostas — compacto na mesa (32), 44 no dedo; o ··· do lado,
   com o menu da casa (.cabmais/.cabmenu) abrindo para a esquerda. A célula não corta o menu aberto. */
.pd-acfim{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end;white-space:nowrap;vertical-align:middle}
.pd-acfim form{margin:0;display:inline-flex}
.pd-acfim :is(.b-primario,.b-secundario,.b-discreto,.b-perigo){min-height:32px;padding:4px 10px;font-size:var(--t2);white-space:nowrap}
.pd-acfim .pd-acmais>summary{min-height:32px;min-width:32px;padding:0 8px}
td:has(.pd-acmais),.pd-linha:has(.pd-acmais){overflow:visible}
@media (pointer:coarse),(hover:none){ .pd-acfim :is(.b-primario,.b-secundario,.b-discreto,.b-perigo){min-height:44px} .pd-acfim .pd-acmais>summary{min-height:44px;min-width:44px} }
/* o ··· fica na ponta direita da linha: o menu abre para a esquerda, também no celular (onde o .cabmenu do cabeçalho abre
   para a direita), e não passa da largura da tela */
.pd-acfim .pd-acmais .cabmenu{right:0;left:auto;max-width:calc(100vw - 32px)}
/* 19/10 (revisão do Roberto, #74): no celular o ··· aberto vira folha FIXA no pé da tela (como o balão do "?") — assim a
   tabela não precisa desligar a rolagem lateral para o menu aparecer (a :has(... details[open]){overflow:visible} fazia ela
   "pular"; agora só vale na mesa) */
@media (max-width:760px){ .pd-acfim .pd-acmais[open]>.cabmenu{position:fixed;left:16px;right:16px;bottom:16px;top:auto;max-width:none;z-index:60} }
/* com a barra do polegar (menu.mjs .bxbar), a folha e o balão do "?" sobem acima dela — a mesma conta do padding da .wrap */
@media (max-width:760px){ :root:has(.bxbar) .pd-acfim .pd-acmais[open]>.cabmenu,:root:has(.bxbar) .pd-ajuda:focus::after{bottom:calc(84px + env(safe-area-inset-bottom))} }
.pd-linha{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;min-height:32px;padding:0 8px;border-bottom:1px solid var(--borda-fina)}
.pd-linha:hover{background:var(--acao-fundo)}
.pd-vazio{text-align:center;color:var(--secundario);font-size:var(--t4);padding:18px 8px}
.pd-vazio b{display:block;color:var(--texto);font-weight:600;margin-bottom:3px}
.pd-vazio p{margin:0 auto;max-width:60ch}
.pd-vazio>div{margin-top:10px}
.pd-abas{display:flex;gap:2px;border-bottom:2px solid var(--borda-cartao);margin:0 0 12px;flex-wrap:wrap}
.pd-abas :is(a,label){display:inline-flex;align-items:center;gap:6px;padding:8px 12px;margin-bottom:-2px;border-bottom:2px solid transparent;color:var(--secundario);font:600 var(--t3) var(--fonte);text-decoration:none;min-height:var(--alvo)}
.pd-abas :is(a,label) em{font-style:normal;font-weight:500;font-variant-numeric:tabular-nums}
.pd-abas label{cursor:pointer}
.pd-abas a.on{color:var(--texto);border-bottom-color:var(--texto)}
.pd-abasr>input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.pd-painel{display:none}
.pd-abasr>input:nth-of-type(1):checked~.pd-painel:nth-of-type(1){display:block} .pd-abasr>input:nth-of-type(1):checked~.pd-abas label:nth-of-type(1){color:var(--texto);border-bottom-color:var(--texto)} .pd-abasr>input:nth-of-type(1):focus-visible~.pd-abas label:nth-of-type(1){box-shadow:var(--anel-foco)}
.pd-abasr>input:nth-of-type(2):checked~.pd-painel:nth-of-type(2){display:block} .pd-abasr>input:nth-of-type(2):checked~.pd-abas label:nth-of-type(2){color:var(--texto);border-bottom-color:var(--texto)} .pd-abasr>input:nth-of-type(2):focus-visible~.pd-abas label:nth-of-type(2){box-shadow:var(--anel-foco)}
.pd-abasr>input:nth-of-type(3):checked~.pd-painel:nth-of-type(3){display:block} .pd-abasr>input:nth-of-type(3):checked~.pd-abas label:nth-of-type(3){color:var(--texto);border-bottom-color:var(--texto)} .pd-abasr>input:nth-of-type(3):focus-visible~.pd-abas label:nth-of-type(3){box-shadow:var(--anel-foco)}
.pd-abasr>input:nth-of-type(4):checked~.pd-painel:nth-of-type(4){display:block} .pd-abasr>input:nth-of-type(4):checked~.pd-abas label:nth-of-type(4){color:var(--texto);border-bottom-color:var(--texto)} .pd-abasr>input:nth-of-type(4):focus-visible~.pd-abas label:nth-of-type(4){box-shadow:var(--anel-foco)}
.pd-abasr>input:nth-of-type(5):checked~.pd-painel:nth-of-type(5){display:block} .pd-abasr>input:nth-of-type(5):checked~.pd-abas label:nth-of-type(5){color:var(--texto);border-bottom-color:var(--texto)} .pd-abasr>input:nth-of-type(5):focus-visible~.pd-abas label:nth-of-type(5){box-shadow:var(--anel-foco)}
.pd-abasr>input:nth-of-type(6):checked~.pd-painel:nth-of-type(6){display:block} .pd-abasr>input:nth-of-type(6):checked~.pd-abas label:nth-of-type(6){color:var(--texto);border-bottom-color:var(--texto)} .pd-abasr>input:nth-of-type(6):focus-visible~.pd-abas label:nth-of-type(6){box-shadow:var(--anel-foco)}
.pd-acoes:has(details[open]){opacity:1}
/* 18/10 · a lista do celular (estilo.mjs listaCelular, item 10 do padrão): cartão de duas linhas, tocar abre, arrastar
   para a esquerda mostra as ações. Sem o script (.js-arr), as ações ficam numa linha embaixo do cartão. */
.pd-arrs{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.pd-arr{position:relative;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--borda-cartao);border-radius:var(--raio);background:var(--superficie)}
.pd-arr-fr{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:60px;box-sizing:border-box;padding:10px 30px 10px 14px;background:var(--superficie);color:var(--texto);text-decoration:none;transition:transform .2s ease;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.pd-arr.venc .pd-arr-fr{box-shadow:inset 3px 0 0 var(--erro-texto)}
.pd-arr.arrasta .pd-arr-fr{transition:none}
a.pd-arr-fr:hover,a.pd-arr-fr:focus{text-decoration:none}
a.pd-arr-fr:active{background:var(--acao-fundo)}
.pd-arr-fr>i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:var(--t6);color:var(--apagado)}
.pd-arr-l1{display:flex;align-items:baseline;gap:8px;min-width:0}
.pd-arr-l1 b{flex:1;min-width:0;font-size:var(--t5);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-arr-dir{flex:0 0 auto;font-size:var(--t3);font-weight:500;color:var(--secundario);white-space:nowrap;font-variant-numeric:tabular-nums}
.pd-arr-l2{min-width:0;font-size:var(--t3);color:var(--secundario);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-arr .at{color:var(--erro-texto);font-weight:600}
.pd-arr-ac{order:2;display:flex;gap:6px;padding:0 14px 10px}
.pd-arr-ac form{margin:0;display:flex}
.pd-arr-ac [data-abre]{display:none}
.pd-arr-dt{order:3;border-top:1px solid var(--borda-fina)}
.pd-arr-dt>summary{display:flex;align-items:center;min-height:44px;padding:0 14px;color:var(--acao);font-size:var(--t4);font-weight:500;cursor:pointer}
.pd-arr-pn{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 14px 12px}
.pd-arr-pn form{margin:0;display:flex;gap:6px;align-items:center}
.js-arr .pd-arr[data-arr] .pd-arr-ac{position:absolute;top:0;right:0;height:60px;padding:0;gap:0;z-index:0}
.js-arr .pd-arr-ac [data-abre]{display:flex}
.js-arr .pd-arr-ac .pd-arr-b{height:100%;min-height:0;min-width:92px;margin:0;border:0!important;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:var(--t4);font-weight:600;text-decoration:none;background:var(--acao)!important;color:var(--sobre-acao)!important;cursor:pointer}
.js-arr .pd-arr-ac .pd-arr-b.ok{background:var(--sucesso)!important;color:var(--superficie)!important}
.js-arr .pd-arr-ac>.pd-arr-b:not(:first-child),.js-arr .pd-arr-ac>form:not(:first-child) .pd-arr-b{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--sobre-acao) 35%,transparent)}
.js-arr .pd-arr-dt>summary{display:none}
.js-arr .pd-arr-dt:not([open]){display:none}
.js-arr .pd-arr-dt[open] .pd-arr-pn{padding-top:12px}
.pd-fil{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.pd-fil>input[type=search],.pd-fil>input[type=text]{flex:1 1 200px;min-width:0}
.pd-fil-t,.pd-fil-r{display:none}
.pd-fil-c{display:contents}
.pd-fil select,.pd-fil input{min-height:32px;padding:5px 8px;font-size:var(--t3)}
.pd-gsv{display:block;width:100%;height:auto;overflow:visible}
.pd-gsv rect{stroke:var(--superficie);stroke-width:1}
.pd-g1{fill:var(--g1);background:var(--g1)} .pd-g2{fill:var(--g2);background:var(--g2)} .pd-g3{fill:var(--g3);background:var(--g3)} .pd-gresto{fill:var(--g-resto);background:var(--g-resto)}
.pd-gtrilho{fill:var(--borda-fina)}
.pd-galvo{stroke:var(--texto);stroke-width:2}
.pd-gt{fill:var(--secundario);font:var(--t1) var(--fonte)}
.pd-ggrade line{stroke:var(--borda-fina);stroke-width:1}
.pd-gleg{display:flex;flex-wrap:wrap;gap:10px;font-size:var(--t1);color:var(--secundario);margin-top:4px}
.pd-gleg span{display:inline-flex;align-items:center;gap:5px} .pd-gleg i{width:10px;height:10px;border-radius:2px;display:inline-block}
.pd-gnota{margin:4px 0 0;font-size:var(--t1);color:var(--secundario)}
.pd-meta,.pd-serie{margin:0;max-width:560px}
@media (hover:hover) and (pointer:fine){ td>input[type=checkbox],td>label>input[type=checkbox]{min-height:0} }
.pd-meta figcaption{display:flex;justify-content:space-between;gap:10px;font-size:var(--t2);color:var(--secundario);margin-bottom:2px}
.pd-meta figcaption b{font-weight:500;color:var(--texto);font-variant-numeric:tabular-nums}
.pd-barrinhas{max-width:160px;margin:4px 0}
@media (max-width:760px){
  .pd-cab-d{margin-left:0;flex:1 1 100%} .pd-cab-d>*{flex:1 1 0}
  .pd-num{grid-template-columns:1fr 1fr}
  .pd-abas{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;border:1px solid var(--borda-campo);border-radius:var(--raio-p);overflow:hidden}
  .pd-abas :is(a,label){flex-direction:column;gap:0;justify-content:center;margin:0;border:0;border-left:1px solid var(--borda-campo);background:var(--superficie);min-height:44px;padding:6px 4px;font-size:var(--t2);text-align:center}
  .pd-abas :is(a,label):first-child{border-left:0}
  .pd-abas a.on{background:var(--acao);color:var(--sobre-acao)}
  .pd-abasr>input:nth-of-type(1):checked~.pd-abas label:nth-of-type(1){background:var(--acao);color:var(--sobre-acao)}
  .pd-abasr>input:nth-of-type(2):checked~.pd-abas label:nth-of-type(2){background:var(--acao);color:var(--sobre-acao)}
  .pd-abasr>input:nth-of-type(3):checked~.pd-abas label:nth-of-type(3){background:var(--acao);color:var(--sobre-acao)}
  .pd-abasr>input:nth-of-type(4):checked~.pd-abas label:nth-of-type(4){background:var(--acao);color:var(--sobre-acao)}
  .pd-abasr>input:nth-of-type(5):checked~.pd-abas label:nth-of-type(5){background:var(--acao);color:var(--sobre-acao)}
  .pd-abasr>input:nth-of-type(6):checked~.pd-abas label:nth-of-type(6){background:var(--acao);color:var(--sobre-acao)}
  .pd-abas :is(a,label) em{font-size:var(--t1)}
  .pd-fil{flex-direction:column;align-items:stretch}
  .pd-fil>input[type=search],.pd-fil>input[type=text]{flex:0 0 auto}
  .pd-fil-r{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--borda-cartao);border-radius:var(--raio-p);background:var(--superficie);font-weight:600;font-size:var(--t3);cursor:pointer}
  .pd-fil-r em{font-style:normal;font-weight:500;color:var(--secundario);font-size:var(--t2)}
  .pd-fil-c{display:none}
  .pd-fil-t:checked~.pd-fil-c{display:flex;flex-direction:column;gap:6px}
  .pd-fil select,.pd-fil input{min-height:44px;width:100%}
  .pd-gmeio{display:none}
  .pd-gt{font-size:var(--t6)}
}
.note{color:var(--secundario)}
.vazio{color:var(--secundario)}
input,select{min-height:44px;min-width:0}

/* -------------------------------------------------------------------------------------------------
   ATENCAO — TAMANHO DE ALVO SE DECIDE PELO DEDO, NAO PELA LARGURA DA JANELA (13/08/2026, rodada 3).
   (sem crases aqui dentro: isto vive num template literal, e crase fecha a string — armadilha nº 2
   deste projeto, que acabou de custar mais um deploy abortado enquanto eu escrevia este bloco)
   Todo o conserto de alvo da rodada 2 morava dentro do @media (max-width:640px) — e o formato
   celular-deitado (812x375), que o aparato passou a fotografar nesta rodada, mostrou o preco disso
   na hora: o MESMO iPhone, virado de lado, tem 812 px de largura, cai fora da faixa e recebe
   tratamento de desktop. Medido no relato oficial, nos quatro perfis: menor alvo de 15 px na lista
   de oportunidades, 16 px no 404 e no /sair, 30,8 px na barra de navegacao.
   E literalmente o mesmo defeito de classe que matou o vw da barra de aceite em documento.mjs, um
   arquivo adiante: regra por faixa de largura casa onde voce nao espera.
   A pergunta certa nao e "a janela e estreita?" e sim "quem aponta e um dedo?". pointer:coarse
   responde isso, e hover:none cobre o aparelho que mente sobre o ponteiro.
   O QUE FICA NA FAIXA DE LARGURA, e fica certo: a virada de TABELA EM CARTAO. Aquilo e sobre caber,
   nao sobre tocar — com 812 px a tabela cabe e o cartao seria desperdicio de tela.
   ------------------------------------------------------------------------------------------------- */
a.toque{min-height:24px;display:inline-flex;align-items:center}
a.abre{color:var(--marinho);font-weight:600;display:inline-flex;align-items:center;gap:5px;min-height:26px}
a.abre:hover{color:var(--acao)}
a.abre i{font-style:normal;color:var(--acao);font-weight:400}
/* ⚠️⚠️ CAMPO DE DATA/HORA NÃO PODE ESTOURAR A TELA. O Safari do iPhone dá a eles uma largura
   MÍNIMA INTRÍNSECA e não os deixa encolher; o Chromium deixa — então um layout que cabe no
   emulador rola de lado no aparelho de verdade, com o conteúdo cortado à esquerda. São 15 campos
   assim em 4 arquivos; a regra mora aqui para que o próximo já nasça certo. */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{
  min-width:0;max-width:100%;box-sizing:border-box}

@media (pointer:coarse),(hover:none){
  nav.nav a{min-height:44px;min-width:44px}
  .ic{width:44px;height:44px} .ic svg{width:20px;height:20px}
  input,select{font-size:var(--t5)}
  a.toque{min-height:44px}
  a.abre{min-height:44px;min-width:44px;justify-content:flex-start}
  .rolar table a.toque{min-width:44px}
  table.opo td.prop a{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
}
@media (max-width:640px){
  .wrap{padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))} .card{padding:11px;border-radius:var(--raio)}
  /* ATENCAO — row-gap pequeno e column-gap normal: o gap de 8px declarado acima valia para os DOIS
     eixos, entao cada fileira nova da barra custava 8 px de brinde. No celular a barra tem duas
     fileiras de proposito; a distancia entre elas ja e dada pelo traco fino do nav.
     (e NAO ha crase neste comentario: ele vive dentro de um template literal, e crase fecha a
     string — armadilha no 1 deste projeto, que acabou de abortar mais um deploy, o quarto, escrito
     por mim no comentario ao lado do que avisa sobre ela) */
  .top{padding:5px 10px;column-gap:8px;row-gap:2px;padding-left:calc(10px + env(safe-area-inset-left))}
  /* ATENCAO — padding ZERO: o carimbo virou fileira do '.top' em 17/08 e herda o padding da barra.
     Manter os 4px/10px daqui somaria recuo dentro de recuo e o texto sairia desalinhado do resto da
     barra — o defeito visivel de mover um bloco sem varrer as regras que o enderecavam. */
  /* 07/09: o carimbo virou chip (regras acima, valem nos dois formatos) — a fileira de largura inteira do celular saiu */
  .kpi div{flex:1 1 100%} .kpi b{font-size:var(--t6)}
  /* nav vai para a SEGUNDA fileira (order), com os tres destinos em rotulo de texto e SEM icone:
     o Dash mediu que somar icone ao rotulo dobrava a altura do menu no celular (117 -> 285 px).
     Aqui nao ha icone nenhum no nav para esconder — os dois unicos icones da casca sao os botoes
     de conta, que sao so-icone nos tres formatos e portanto nao somam altura a nada. */
  nav.nav{order:9;width:100%;margin-left:0;gap:0;justify-content:space-between;border-top:1px solid var(--borda-fina);padding-top:1px}
  /* as regras de ALVO que moravam aqui subiram para o bloco pointer:coarse (ver o comentario acima).
     Deixa-las duplicadas nos dois lugares e como as duas passam a divergir. */
  .card form label{flex-wrap:wrap} .card form label>span{width:auto!important;flex:1 1 100%}

  table.opo thead{display:none}
  table.opo,table.opo tbody,table.opo tr,table.opo td{display:block;width:auto}
  table.opo tr{border:1px solid var(--borda-cartao);border-radius:var(--raio-p);padding:9px 11px;margin:0 0 9px;background:var(--superficie)}
  table.opo tr:hover td{background:none}
  table.opo td{border:0;padding:1px 0;text-align:left}
  table.opo td.num{text-align:left}
  table.opo td:empty{display:none}
  table.opo td[data-r]::before{content:attr(data-r);color:var(--secundario);font-size:var(--t2);
    text-transform:uppercase;letter-spacing:.02em;margin-right:6px}
  table.opo td.cli{font-size:var(--t5);font-weight:700;color:var(--marinho);word-break:break-word;margin-bottom:2px}
  table.opo td.cli::before{content:none}
  table.opo td.val{font-size:var(--t5);font-weight:500;margin-top:2px}
  table.opo td.chip{display:inline-block;margin:2px 10px 0 0;font-size:var(--t2);color:var(--secundario)}
  table.opo td.prop{display:inline-block;margin-right:10px}
  /* NAV-02 / LAY-03 da revisão (06/09, aprovadas) — O CARTÃO DE TRÊS LINHAS. É SÓ DA LISTA (table.opo.lst): a folha
     genérica acima serve as outras tabelas da casa (clientes, cliente, propostas, emissão…) e continua
     como estava. Esta reescreve por cima, propriedade a propriedade, para a lista: a folha anterior fazia cada célula um bloco de 100% e repetia os SEIS rótulos
     das colunas em cada linha — o cabeçalho da tabela copiado 113 vezes, 270–300px por cartão, zero
     oportunidades na primeira dobra a 390px. Agora a linha é um flex que EMBRULHA em três fileiras:
       1. cliente (nome + etapa · rep, uma linha cada, com reticência)   [marcas à direita]
       2. próx. tarefa · há N d · valor · proposta rN · score
       3. só aparece quando há gesto além de Detalhes (raro) — Detalhes some: o nome já abre a ficha.
     Rótulo nenhum: nenhum dos seis números precisa de um. A ordem é a do desenho (order), não a do DOM. */
    table.opo.lst tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:3px;
    border:1px solid var(--borda-cartao);border-radius:var(--raio-p);padding:8px 11px;margin:0 0 6px;background:var(--superficie)}
  table.opo.lst tr:hover td{background:none}
  table.opo.lst td{display:block;border:0;padding:0;text-align:left;width:auto;white-space:nowrap}
  table.opo.lst td:empty{display:none}
  table.opo.lst td[data-r]::before{content:none}
  /* o cliente ocupa a linha INTEIRA menos as marcas (2 alvos de 40px + folga): com flex-basis 0 a
     data e o "há N d" subiam para a linha do nome e o nome encolhia a 90px — medido a 390px. */
  /* 176px = score (24) + caixa de seleção e duas marcas (114) + folgas — medido a 390px com a caixa (nota 7) */
  table.opo.lst td.cli{order:1;flex:1 0 calc(100% - 176px);min-width:0;white-space:normal;margin:0;font-size:inherit;font-weight:400}
  /* o SCORE sobe para a linha 1, entre o nome e as marcas: é o sinal mais forte da linha e era o único
     item que não cabia na fileira de números (medido: 11 de 20 cartões quebravam só por ele). */
  table.opo.lst td.num.chip:not(.dds){order:2;flex:none;margin-left:auto}
  /* o <a> cobre nome + etapa·rep (33px) e ganha 6px de padding por lado com margem negativa: alvo de
     45px (p51, dedo) sem acrescentar um pixel ao cartão. */
  table.opo.lst td.cli{position:relative}
  table.opo.lst td.cli a.abre{display:block;padding:6px 0;margin:-6px 0;min-height:0;color:var(--marinho)}
  /* NAV-08: o "cliente ›" no pé da célula, alvo de 44px pelo mesmo padding negativo; a etapa cede o canto */
  table.opo.lst td.cli .clisub{padding-right:66px}
  table.opo.lst td.cli .clilnk{position:absolute;right:0;bottom:-14px;padding:16px 8px;font:500 var(--t1) var(--fonte);color:var(--acao);text-decoration:none}
  table.opo.lst td.cli .nome{display:block;font-size:var(--t4);font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.opo.lst td.cli a i{display:none}
  table.opo.lst td.cli .clisub{display:block;font-size:var(--t2);line-height:1.3;color:var(--secundario);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.opo.lst td.mk{order:3;flex:none;margin:0}
  /* margin:0 — a genérica dá 2px 10px aos chips e 2px ao valor; somados ao gap, estouravam a fileira. */
  table.opo.lst td.chip,table.opo.lst td.dds,table.opo.lst td.val,table.opo.lst td.prop{order:4;flex:none;margin:0;font-size:var(--t2);color:var(--secundario)}
  table.opo.lst td.dds::before{content:'há ';color:var(--secundario);text-transform:none;letter-spacing:0;margin:0;font-size:var(--t2)}
  table.opo.lst td.dds b::after{content:' d'}
  table.opo.lst td.val{font-size:var(--t3);font-weight:500;color:var(--texto)}
  table.opo.lst td.prop .propsub{display:inline;margin-left:3px;font-size:var(--t1)}
  table.opo.lst td.prop .propsub:empty{display:none}
  table.opo.lst td.prop .propsub::before{content:'· '}
  /* o link da proposta (#25567) abre OUTRO destino que o cartão; alvo de 44 pelo mesmo padding negativo. */
  table.opo.lst td.prop a{display:inline-flex;align-items:center;min-height:0;min-width:44px;padding:14px 0;margin:-14px 0}
  table.opo.lst td.det{order:5;flex:none;margin-left:auto}
  table.opo.lst td.det .det1{display:none}
  table.opo.lst td.det .dact:not(:has(:not(.det1))){display:none}
}

/* -------------------------------------------------------------------------------------------------
   TELA BAIXA (celular DEITADO) — a reprovacao que ninguem tinha visto, rodada 2 dos pedacos 2+3.
   (sem crases neste comentario: ele vive num template literal, e crase fecha a string — armadilha
   no 1 deste projeto, QUATRO deploys derrubados, duas delas no comentario que avisa sobre ela)

   A regua do master e MOLDURA <= 20% da primeira dobra. Deitado, o iPhone tem 375 px de ALTURA, e
   entao 20% sao 75 px. Medido antes: casca de 81 px = 21,6% — a LISTA reprovava sem que nenhum
   criterio anterior enxergasse, porque a lista nao tem nem trilha de volta nem declaracao de
   ausencia: os 81 px sao a casca inteira, sozinha.
   Os 81 px eram 55 de barra (44 do alvo de toque + 5+5 de padding + borda) + 26 de carimbo.
   O que este bloco corta e SO ESPACO EM BRANCO: padding da barra 5 -> 2, padding do carimbo 3 -> 1.
   O alvo de 44 px NAO e tocado (seria trocar uma reprovacao por outra) e a fonte NAO e reduzida
   (o master avisou que percentual sozinho se manipula encolhendo fonte, e o piso agora e 12 px).
   Resultado medido: 49 + 20 = 69 px = 18,4% da dobra deitada.

   ⚠️ A REGRA E POR max-height, NAO por faixa de largura nem por orientation. Faixa de largura e a
   armadilha no 5 do projeto (tres aparicoes: o mesmo iPhone deitado tem 812 px e cai no tratamento
   de desktop). E orientation:landscape pegaria tambem o tablet deitado, que tem 768 px de altura e
   nao tem problema nenhum de dobra. Quem manda aqui e a ALTURA disponivel, que e a grandeza que a
   regua mede.
   ------------------------------------------------------------------------------------------------- */
@media (max-height:480px){
  /* ATENCAO — o padding-left com env() e REPETIDO aqui de proposito: declarar padding de atalho
     zera o padding-left que o bloco de celular define com safe-area-inset-left, e um celular
     PEQUENO deitado (568x320) casa nos dois blocos ao mesmo tempo. Sem esta linha, o notch comeria
     o botao de voltar exatamente no formato que este bloco existe para consertar. */
  .top{padding:2px 14px;padding-left:calc(14px + env(safe-area-inset-left))}
  /* ATENCAO — padding ZERO, mesma razao da regra irma acima: o carimbo e fileira do '.top' desde 17/08
     e a barra ja aplica o recuo, inclusive o env(safe-area-inset-left) do iPhone. */
  .carimbo{padding:0}
  /* ATENCAO — O SELO DEITA EM UMA LINHA, e isto e margem de seguranca medida, nao enfeite.
     Em pe o selo tem duas linhas empilhadas (nome / perfil + recorte) e o recorte mais longo que o
     app produz — "vê só a carteira Gustavo Morette" e "sem carteira cadastrada — nao ve negocio
     nenhum" — quebra em tres linhas: 3 x 15 px = 45 px, que passa dos 44 px do alvo de toque e faz
     a barra crescer. Medido: 49 px de barra com selo curto, 50,6 px com o longo, e a QUARTA linha
     levaria a 79 px — acima dos 75 px que os 20% de 375 permitem. Deitado ha 812 px de largura
     sobrando, entao as duas partes cabem lado a lado e a fileira volta a ser uma.
     ⚠️ O TEXTO NAO E TRUNCADO E A FONTE NAO E REDUZIDA. O recorte do selo e o que responde "esta
     sessao e de um gerente ou de um representante com escopo furado?", e um recorte cortado ao meio
     responde a pergunta errada — e por isso que ele nunca ganha ellipsis. */
  .eu{flex-direction:row;align-items:baseline;gap:6px;text-align:right;justify-content:flex-end}
  /* ATENCAO — ESTA LINHA E O CONSERTO DE UMA REGRESSAO QUE EU MESMO CRIEI NESTA PECA, e ela esta
     aqui com o numero que a paga.
     O quarto destino do menu ("meu dia") custa ZERO px em pe e no desktop — medido por remocao do
     proprio elemento no DOM renderizado (gauntlet/p4-custo-nav.mjs): 104,6 -> 104,6 e 43,8 -> 43,8.
     DEITADO ele custava, porque nesta faixa o nav NAO vai para fileira propria (isso e regra de
     max-width:640px, e o iPhone deitado tem 812 px de largura): os quatro rotulos comiam 355 px da
     unica fileira e empurravam o SELO para mais uma linha. Medido: barra de 49 -> 65 px na lista e
     de 50 -> 80 px na ficha.
     O QUE ESTA LINHA FAZ, e o que ela NAO faz: ela impede a QUEBRA DE LINHA do recorte, e nada
     mais. Nao ha overflow:hidden, nao ha text-overflow, nao ha ellipsis, nao ha fonte menor — a
     proibicao escrita seis linhas acima continua valendo inteira, e ela e sobre TRUNCAR. Conferido
     no renderizado, nos dois tamanhos de celular deitado (812x375 e 568x320): scrollWidth do selo
     igual ao clientWidth em todas as telas, ou seja o texto CABE em uma linha e nao vaza nada.
     Resultado, com o quarto destino ja incluido: lista 84,2 -> 68,2 px (22,4% -> 18,2% da dobra) e
     ficha 99,2 -> 68,2 px (26,5% -> 18,2%). Os dois ficam abaixo do que estavam ANTES desta peca
     (68,2 e 69,2), entao o destino novo sai de graca nos tres formatos. */
  /* ------------------------------------------------------------------------------------------------
     ATENCAO — O white-space:nowrap QUE MORAVA AQUI FOI REMOVIDO, e ele e a CAUSA da divida P4-02.
     (e NAO ha crase em lugar nenhum deste comentario: ele vive num template literal, e crase fecha a
     string — armadilha no 1 do projeto, que acabou de abortar o QUINTO deploy, este escrito por mim
     dentro do bloco que conserta a casca)
     O comentario logo acima dizia, com razao, que ele nao truncava nada e so impedia a quebra de
     linha do recorte. O que ninguem mediu na epoca: com .eu{flex:1 1 0;min-width:0} na regra base,
     impedir a quebra de linha nao encolhe o selo — faz o texto VAZAR para fora da caixa, para a
     esquerda, por cima do nav. E como o selo vem depois do nav no DOM, era ELE quem recebia o toque.
     Medido por mim no renderizado (gauntlet/p5-barra.mjs), 12 combinacoes, nome curto e longo:
       ANTES  — 4 de 12 com algum item de menu MORTO (o item que morre muda com o nome:
                "emitidas", "montar proposta" e "oportunidades" aparecem em combinacoes diferentes)
       DEPOIS — 0 de 12.
     E o preco, medido no mesmo instante nas mesmas 12: desktop e celular em pe NAO mudam nada
     (43,8 e 104,6-135,3 px, identicos ao byte). Deitado a barra vai de 49 para 50 px com nome curto
     e de 67,5 para 80 px com nome longo — a pior combinacao passa de 18,0% para 21,3% da dobra
     deitada. Barra 12 px mais alta contra um menu que nao navega nao e escolha dificil: menu que nao
     navega e controle que MENTE, e a regua da casa diz que botao que nao cumpre e pior que ausente.
     ⚠️ A PROIBICAO DE TRUNCAR CONTINUA INTEIRA: nao ha overflow:hidden, nao ha text-overflow, nao ha
     ellipsis e nao ha fonte menor. O recorte quebra linha DENTRO do selo, que e o que a versao em pe
     ja fazia — conferido no renderizado: scrollWidth igual ao clientWidth em 12 de 12.
     ------------------------------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------------------------------
     ATENCAO — ESTA LINHA PAGA A DIVIDA P4-02, E ELA E O UNICO DEFEITO DE SEGURANCA DE USO QUE A PECA
     4 deixou na casca: o selo transbordava por cima do menu no celular DEITADO e comia o toque. O
     master mediu 12 de 12 combinacoes com ALGUM item do menu morto, e QUAL item morria mudava com o
     tamanho do nome da pessoa — que e a razao de o defeito ter atravessado uma rodada se dizendo
     consertado (foi medido com um nome so).

     A MECANICA, e ela e inteiramente explicada pelas tres linhas acima deste bloco:
       .eu tem flex:1 1 0 e min-width:0 (regra base), ou seja ele PODE encolher abaixo do conteudo;
       .eu>span tem white-space:nowrap (a linha logo acima), ou seja o conteudo NAO encolhe.
     Caixa menor que conteudo com overflow visible = o texto VAZA. Como .eu tem text-align:right e
     justify-content:flex-end, ele vaza PARA A ESQUERDA, exatamente por cima do nav — e como .eu vem
     DEPOIS do nav no DOM, e ele quem recebe o toque naquela area.

     O QUE ESTA LINHA FAZ: devolve o minimo automatico do item flex (min-content). Com ele, .eu nao
     cabe menor que o proprio texto, e o .top (que ja tem flex-wrap:wrap) manda o selo para a segunda
     fileira em vez de deixa-lo vazar. Sobreposicao impossivel por construcao, e nao por z-index.

     O QUE ELA NAO FAZ, e a proibicao escrita 20 linhas acima continua valendo inteira: NAO ha
     overflow:hidden, NAO ha text-overflow, NAO ha ellipsis e NAO ha fonte menor. O recorte do selo
     ("ve so a carteira X" contra "ve a empresa toda") continua legivel por inteiro — ele responde se
     a sessao e de um gerente ou de um representante com escopo furado, e um recorte cortado ao meio
     responde a pergunta errada.

     O QUE ELA CUSTA, DECLARADO: no pior caso (nome longo + recorte longo) a barra volta a ter duas
     fileiras no deitado, e a moldura sobe. Preferir a barra mais alta ao menu morto nao e escolha de
     gosto: um menu que nao navega e um controle que MENTE, e a regua desta casa diz que botao que
     nao cumpre e pior que botao ausente. Os numeros medidos estao no relato desta peca.
     ------------------------------------------------------------------------------------------------ */
  .eu{min-width:auto}
}



.side{position:fixed;top:0;left:0;bottom:0;width:240px;z-index:7;box-sizing:border-box;
  background:var(--lado-fundo);border-right:1px solid var(--lado-linha);
  overflow-y:auto;overscroll-behavior:contain;padding:12px 8px 16px;display:flex;flex-direction:column;gap:2px}
.snav{display:flex;flex-direction:column;gap:2px}
.side .slogo{display:flex;align-items:center;gap:10px;min-height:var(--alvo);padding:4px 10px 10px;margin-bottom:4px;text-decoration:none;
  color:var(--branco);font-weight:700;font-size:var(--t4);letter-spacing:.02em;border-bottom:1px solid var(--lado-linha);white-space:nowrap;overflow:hidden}
.side .slogo img{width:28px;height:28px;flex:0 0 28px;border-radius:var(--raio-p)} .side .slogo:hover{color:var(--lado-ativo)}
.sgrp{margin-top:12px} .sgrp:first-child{margin-top:2px}
.sgrp.spes{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--lado-linha)}

.sgrp h2{font-size:var(--t1);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lado-rotulo);
  margin:0 0 4px;padding:0 10px;white-space:nowrap;overflow:hidden}

details.sgrp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  min-height:var(--alvo);padding:0 10px;border-radius:var(--raio-p);
  font-size:var(--t1);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lado-rotulo);
  white-space:nowrap;overflow:hidden}
details.sgrp>summary::-webkit-details-marker{display:none}
.ssub{margin:0;font-size:var(--t1);font-weight:600;color:var(--lado-rotulo);padding:10px 12px 2px;white-space:nowrap;overflow:hidden}
details.sgrp>summary:hover{background:var(--lado-hover);color:var(--lado-texto)}
details.sgrp>summary::after{content:'▸';margin-left:auto;font-size:var(--t1);letter-spacing:0;
  transition:transform .12s cubic-bezier(.2,0,0,1)}
details.sgrp[open]>summary::after{content:'▾'}



.sitem{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--raio-p);color:var(--lado-texto);
  font-weight:500;font-size:var(--t3);text-decoration:none;white-space:nowrap;min-height:var(--alvo);
  overflow:hidden;border-left:2px solid transparent;transition:background .12s cubic-bezier(.2,0,0,1),color .12s cubic-bezier(.2,0,0,1)}
.sitem svg{width:20px;height:20px;flex:0 0 20px;color:currentColor;opacity:.85}
.sitem:hover{background:var(--lado-hover);color:var(--branco);text-decoration:none}
.sitem:hover svg{opacity:1}

.sitem.aqui{background:var(--lado-aqui);color:var(--branco);border-left-color:var(--lado-ativo)}
.sitem.aqui svg{color:var(--lado-ativo);opacity:1}
.sitem:focus-visible{box-shadow:var(--anel-foco)}

.scol{margin:auto 0 0} .scol button{display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;padding:9px 12px;
  border:0;background:none;border-radius:var(--raio-p);color:var(--lado-rotulo);font:600 var(--t3) var(--fonte);cursor:pointer;min-height:var(--alvo)}
.scol button:hover{background:var(--lado-hover);color:var(--lado-texto)}
.scol svg{width:20px;height:20px;flex:0 0 20px}
.burger,.ladobackdrop,.ladochk{display:none}

:root{--larg-menu:240px}
.top,.wrap{margin-left:var(--larg-menu)}

@media (min-width:760px){
  :root[data-lado=fechado] .side{width:64px}
  :root[data-lado=fechado] .sitem span,:root[data-lado=fechado] .sgrp h2,:root[data-lado=fechado] .scol span{display:none}
  :root[data-lado=fechado] .slogo span{display:none} :root[data-lado=fechado] .slogo{justify-content:center;padding-left:0;padding-right:0}
  :root[data-lado=fechado] .sitem,:root[data-lado=fechado] .scol button{justify-content:center;gap:0;padding-left:0;padding-right:0}
  
  :root[data-lado=fechado] .sgrp+.sgrp{border-top:1px solid var(--lado-linha2);margin-top:6px;padding-top:6px}
  :root[data-lado=fechado] .sitem svg{width:22px;height:22px;flex-basis:22px;opacity:.95}
  :root[data-lado=fechado]{--larg-menu:64px}
  :root[data-lado=fechado] .top,:root[data-lado=fechado] .wrap{margin-left:var(--larg-menu)}
}
:root[data-lado=sem]{--larg-menu:0px}
:root[data-lado=sem] .top,:root[data-lado=sem] .wrap{margin-left:var(--larg-menu)}

@media (max-width:759px){
  .side{transform:translateX(-100%);width:250px;box-shadow:var(--sombra);
    transition:transform .2s cubic-bezier(.2,0,0,1)}
  .ladochk:checked ~ .side{transform:translateX(0)}
  .ladochk:checked ~ .ladobackdrop{display:block;position:fixed;inset:0;background:var(--veu);z-index:6}
  
  :root{--larg-menu:0px}
  .top,.wrap{margin-left:var(--larg-menu)}
  /* ⚠️ 25/08 (auditoria): "Recolher" só existe no desktop (data-lado, @media min-width:760px). No
     celular ele gravava cookie e recarregava sem mudar nada — e deixava o desktop recolhido na próxima
     sessão. Some no mobile. */
  .scol{display:none}
  /* ⚠️ 27/08 — o ☰ SOME no celular: a barra de baixo tem "Menu" e abre a MESMA gaveta (o mesmo
     checkbox). Dois controles para o mesmo lugar na mesma tela, e este ficava no canto mais longe
     do polegar. Ele continua no HTML e continua válido — só não é pintado onde há a barra. */
  .burger{display:none}
}
@media (prefers-reduced-motion:reduce){ .side{transition:none} }
@media (pointer:coarse),(hover:none){ .sitem,.scol button{min-height:44px} }

.bxbar{display:none}
@media (max-width:759px){
  
  .bxbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:6;background:var(--superficie);border-top:1px solid var(--borda-cartao);
    padding-bottom:env(safe-area-inset-bottom)}
  .bxi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:54px;padding:7px 2px 8px;text-decoration:none;color:var(--secundario);
    font-size:var(--t1);font-weight:700;letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .bxi svg{width:21px;height:21px}
  .bxi.on{color:var(--acao)}
  .bxi:focus-visible{outline:2px solid var(--acao);outline-offset:-2px}
  /* ⚠️ o respiro embaixo do conteúdo: sem ele a última linha da lista mora atrás da barra */
  .wrap{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media (max-width:759px) and (display-mode:standalone){ .bxi{min-height:58px} }
.maischk,.bxfolha{display:none}
@media (max-width:759px){
  
  .bxbar.novo{align-items:end;min-height:64px;box-shadow:var(--sombra)}
  .bxbar.novo .bxi{min-height:64px;padding:9px 2px 10px;font-size:var(--t1);font-weight:600;color:var(--apagado)}
  .bxbar.novo .bxi.on{color:var(--acao)}
  .bxbar.novo .bxi svg{width:22px;height:22px}
  .bxbar.novo .bxmais{justify-content:flex-start;padding-top:0}
  .bxcirc{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-top:-22px;border-radius:50%;
    background:var(--acao);color:var(--sobre-acao);border:4px solid var(--superficie);box-shadow:var(--sombra)}
  .bxbar.novo .bxcirc svg{width:24px;height:24px}
  .maischk:checked~.bxfolha{display:block}
  .bxfolha{position:fixed;inset:0;z-index:30}
  .bxfundo{position:absolute;inset:0;background:var(--veu);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}
  .bxpainel{position:absolute;left:0;right:0;bottom:0;background:var(--superficie);border-radius:var(--raio-folha) var(--raio-folha) 0 0;
    padding:8px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
  .bxalca{width:40px;height:4px;border-radius:var(--raio-chip);background:var(--borda-cartao);margin:0 auto 4px}
  .bxtit{margin:0 0 2px;font-size:var(--t1);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--secundario)}
  .bxac{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 14px;border:1px solid var(--borda-cartao);
    border-radius:var(--raio-chip);text-decoration:none;color:var(--texto)}
  .bxac b{display:block;font-size:var(--t6)}
  .bxac small{display:block;font-size:var(--t2);color:var(--secundario);font-weight:400}
  .bxaci{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--raio-p);background:var(--fundo);color:var(--acao);flex:none}
  .bxaci svg{width:20px;height:20px}
  .bxac.destaque{min-height:64px;background:var(--acento);border-color:var(--acento);color:var(--ink)}
  .bxac.destaque small{color:var(--ink);opacity:.75}
  .bxac.destaque .bxaci{background:var(--ink);color:var(--acento)}
  .bxcanc{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:var(--t6);font-weight:600;color:var(--secundario);cursor:pointer}
  :root:has(.bxbar.novo) .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  
  :root:has(.cnform) .wrap{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  :root:has(.cnform) .wrap :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select){min-height:48px}
  :root:has(.cnform) .wrap :is(button.btn,button.tb.ok)[type=submit]:not([formaction]){position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:4;
    width:100%!important;max-width:none!important;min-height:52px;border-radius:var(--raio-p);border-color:var(--acao);background:var(--acao);color:var(--sobre-acao);
    font-size:var(--t6);font-weight:700;box-shadow:var(--sombra)}
  
  :root:has(.bxbar.novo) .dacp input{min-height:52px;font-size:var(--t7);font-weight:700;text-align:center}
}

/* ⚠️ o número da navegação: pequeno, vermelho, e só existe quando é maior que zero */
.sitem .sbadge{margin-left:auto;background:var(--alerta);color:var(--branco);border-radius:var(--raio-chip);
  min-width:19px;padding:0 6px;font-size:var(--t1);font-weight:700;line-height:19px;text-align:center;
  font-variant-numeric:tabular-nums}
.sitem .sbadge.ia{background:var(--ia-texto)}   /* 16/10: em mensagens o número é da IA (respostas que pedem ação) — roxo, como na tela */
.sitem .sbadge.nl{background:var(--lado-ativo);color:var(--lado-fundo)}   /* 28/10: Mensagens — não lidas; o --acao da barra de baixo é navy e sumiria na lateral navy: o ciano de destaque dela */
.sitem .sbadge.nl+.sbadge.ia{margin-left:4px}
:root[data-lado=fechado] .sitem .sbadge.nl+.sbadge.ia{display:none}   /* recolhida cabe um número só: o das não lidas */
:root[data-lado=fechado] .sitem .sbadge{position:absolute;top:4px;right:4px;margin:0;
  min-width:16px;padding:0 4px;font-size:var(--t1);line-height:16px}
:root[data-lado=fechado] .sitem{position:relative}
.bxi .bxpt{position:absolute;top:4px;left:50%;margin-left:4px;background:var(--alerta);color:var(--branco);
  border-radius:var(--raio-p);min-width:16px;padding:0 4px;font-size:var(--t1);font-weight:700;line-height:16px;
  text-align:center;font-variant-numeric:tabular-nums}
.bxi .bxpt.azul{background:var(--acao);color:var(--sobre-acao)}   /* 17/10: Mensagens — não lidas, não atraso */
.bxi{position:relative}
/* as famílias info/ok/cuidado/erro/ia moram em TOKENS (app.js, LAY-05 06/09) — valem em toda tela. */

/* 21/09 (dono, vendo no ar): "diminui a largura da lista para ficar maior o que tem mais informação".
   O painel leva ~58% do que sobra depois da barra lateral — a lista vira UMA coluna de cartões, como a
   lista de mensagens do Outlook; a ficha, que é onde se lê e se decide, fica com a parte maior. */
/* ⚠️⚠️ 23/09 (dono, olhando Tarefas com o painel: "gostei desse recorte... nem precisamos mais recolher... só
   diminuir um pouco mais na largura... deixar todos os demais nesse padrão"). A LISTA TEM LARGURA FIXA (~480 px)
   e o painel leva o resto, com ou sem recortes; o "Recolher" das colunas some com o painel ligado (ver .colbt
   abaixo e o :not([data-pn]) das regras de coluna recolhida). Piso do painel: 420 px. */
:root{--pnw:max(420px,calc(100vw - var(--larg-menu) - 520px))}
/* 21/09 (dono): "menor ainda, metade disso — e se eu expandir os recortes, a lista pode ficar do tamanho
   de agora". A coluna dos recortes RECOLHIDA (data-col=fechada, lembrado por aparelho, vale em todas as
   pastas) é o sinal: a lista encolhe para ~metade e o painel leva ~3/4 do que sobra. Recortes abertos = 58%. */
/* ⚠️ PISO DA LISTA, não teto do painel: em 1720 px a proporção deixava a lista com 250 px e os cartões de
   320 px passavam por baixo da moldura. A lista nunca fica com menos de ~400 px (recortes recolhidos) /
   ~640 px (abertos); o painel leva o resto. Medido com Playwright a 1440/1720/2000. */
/* 21/09 (dono): o quadro de Propostas ao lado do painel "precisa ser organizado na vertical, não na
   horizontal (dificulta a navegação)" — com o painel ligado as colunas EMPILHAM e a rolagem lateral morre;
   cada coluna cresce até o próprio conteúdo (a rolagem interna de 100vh-250 deixa de fazer sentido). */
:root[data-pn] .funq{flex-direction:column;overflow-x:visible;overflow-y:visible;gap:12px;scroll-snap-type:none}
:root[data-pn] .funq .col{flex:0 0 auto;width:100%}
:root[data-pn] .funq .colc{max-height:none}
:root[data-pn] .funq{align-items:stretch}
/* ao lado do painel toda grade de cartões vira UMA coluna: o piso de 320/260/240 px por cartão não cabe */
:root[data-pn] .cts,:root[data-pn] .cxgrid,:root[data-pn] .pgrid,:root[data-pn] .tks .tcols,:root[data-pn] .pcols{grid-template-columns:1fr}
:root[data-pn] .wrap{padding-right:calc(var(--pnw) + 40px);max-width:none}
/* 21/09 (dono: "um campo invadir"): ao lado do painel a fileira única de filtros NÃO pode ser nowrap —
   ela passava por baixo da moldura. Com o painel ela embrulha e os campos encolhem até 100%. */
:root[data-pn] .cmeio .fdash{flex-wrap:wrap}
:root[data-pn] .cmeio .fdash .fbusca,:root[data-pn] .cmeio .fdash select{max-width:100%}
:root[data-pn] .lsmeio.cmeio>.lsdetq{flex:1 1 100%}
:root[data-pn] .card,:root[data-pn] .lscols{min-width:0;max-width:100%}
/* 21/09: ao lado do painel o cabeçalho da lista (título + números + botões) empilha como no celular
   (regra de @media max-width:759px da folha global) — em 320–480 px ele não cabe numa linha e vazava. */
:root[data-pn] .cabtopo,:root[data-pn] .cabtopo.ctopo{flex-direction:column;align-items:stretch;gap:8px}
/* Propostas: o .ctopo centrava os filhos (align-items:center) e, empilhado, o título nascia no meio da coluna */
/* Clientes ao lado do painel: a tabela de 8 colunas em 350 px quebrava os cabeçalhos letra a letra — ficam
   seleção, cliente, oportunidades e próx. tarefa; representante, sem contato e últ. interação saem da vista
   (continuam na tela inteira e na ficha) */
:root[data-pn] table.clt :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(5)){display:none}
:root[data-pn] table.clt th:nth-child(2),:root[data-pn] table.clt td:nth-child(2){width:auto}
:root[data-pn] .cabesq{gap:2px 10px}
:root[data-pn] .cabsub{margin-left:0;flex-basis:100%;white-space:normal}
:root[data-pn] .cabdir{width:100%;justify-content:flex-start;gap:6px;flex-wrap:wrap}   /* 21/09 (dono: "botões perdidos" em Clientes): alinhados à esquerda, nunca espalhados */
:root[data-pn] .wrap img,:root[data-pn] .wrap table{max-width:100%}
/* 21/09 (dono: "a seta dos recortes recolhida ainda ocupa muito espaço — uma coluna larga em branco"): ao lado
   do painel o trilho de 44 px deixa de ser COLUNA e vira uma FAIXA fina acima da lista, com o mesmo botão de
   expandir à esquerda. Custa 36 px de altura em vez de ~120 px de largura numa lista de 400. */
@media(min-width:981px){
  :root[data-pn][data-col=fechada] :is(.lscols,.clcols,.fkgrid,.cockpit:not(.ckdoc)){grid-template-columns:minmax(0,1fr)}
  :root[data-pn][data-col=fechada] :is(.lscols,.clcols,.fkgrid,.cockpit:not(.ckdoc))>:is(.lsrecdet,.fesq,.cknav){width:auto}
  :root[data-pn][data-col=fechada] .colbt{justify-content:flex-start}
}
/* ao lado do painel as grades de TRÊS trilhas (clientes, Foco, ficha do cliente) viram uma só, em qualquer largura
   de janela: a media query mede a JANELA, e a janela é larga — é a coluna da lista que é estreita */
:root[data-pn] :is(.clcols,.fkgrid,.lscols,.cockpit:not(.ckdoc)){grid-template-columns:minmax(0,1fr)}
/* 23/09: sem o "Recolher" ao lado do painel, a coluna dos recortes das Oportunidades vai para CIMA da lista (a gaveta
   "Recortes ▾" que já existia), nunca ao lado — em 480 px ela espremia os cartões até "APETITO ...". */
:root[data-pn] :is(.lsrecdet,.fesq,.cknav){width:auto;position:static;max-height:none}
:root[data-pn] :is(.fesq,.fdir){position:static;max-height:none;overflow:visible}
/* 23/09 (dono: "deixar esse item 'suas filas' em uma linha, pode remover o título... e definir como o padrão quando
   temos o painel ligado"): as filas do Foco viram UMA faixa de pílulas curtas, sem o rótulo "SUAS FILAS". O rótulo
   longo continua no title e na tela inteira; aqui vale o curto (.ffc). Se não couber, a faixa rola de lado. */
:root[data-pn] .fesq>.fkrot:first-child{display:none}
:root[data-pn] .ffilas{flex-direction:row;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 0 8px}
:root[data-pn] .ffila{flex:none;border:1px solid var(--borda-campo);min-height:28px;padding:3px 9px;gap:5px;border-radius:999px;font-size:var(--t2);white-space:nowrap}
:root[data-pn] .ffila i{display:none} :root[data-pn] .ffila b{margin-left:2px}
:root[data-pn] .ffila.on{background:var(--acao);border-color:var(--acao);color:var(--sobre-acao)} :root[data-pn] .ffila.on b{color:var(--sobre-acao)}
:root[data-pn] .ffila.mau:not(.on) b{color:var(--erro-texto)}
.ffila .ffc{display:none} :root[data-pn] .ffila .ffl{display:none} :root[data-pn] .ffila .ffc{display:inline}
:root[data-pn] .fkord{flex-direction:row;flex-wrap:wrap;gap:6px}
:root[data-pn] .fdir{order:3}
:root[data-pn] .tks .modos{max-width:100%;overflow-x:auto}
/* 21/09 (dono: no Foco "se eu clicar no quadro ele já abre a oportunidade... ficou ótimo... podemos colocar isso
   também em Oportunidades e em Propostas"): ao lado do painel o CARTÃO INTEIRO é o alvo do link da oportunidade
   (o ::after do link cobre o cartão; os outros links e botões do cartão ficam por cima, clicáveis). */
:root[data-pn] .ct,:root[data-pn] .qcd{position:relative}
:root[data-pn] .ct a.abre::after,:root[data-pn] .qcd a.qopo::after{content:'';position:absolute;inset:0}
:root[data-pn] .ct :is(a,button,form,details):not(.abre),:root[data-pn] .qcd :is(a,button,form,details):not(.qopo){position:relative;z-index:1}
:root[data-pn] .ct:hover,:root[data-pn] .qcd:hover{border-color:var(--acao)}
/* ==========================================================================================================
   21/09 (dono: "consegue reduzir pela metade (ou menos) a altura desses cartões? tem muita info aqui desnecessária,
   que vai abrir com a oportunidade"). Ao lado do painel o cartão é uma LINHA de leitura, como a lista de mensagens
   do Outlook: duas linhas de texto, o essencial à direita, o resto está a um clique no painel.
   ========================================================================================================== */
/* Oportunidades (.ct): nome + valor · etapa/rep/score + próxima tarefa. Dias, proposta e últ. revisão saem. */
:root[data-pn] .ct{padding:6px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome valor" "tags prox";gap:1px 8px;align-items:center}
:root[data-pn] .ct a.abre{grid-area:nome;display:block;font-size:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
:root[data-pn] .ct .ctv{grid-area:valor;margin:0;font-size:var(--t3);white-space:nowrap}
:root[data-pn] .ct .ctt{grid-area:tags;margin:0;gap:4px;flex-wrap:nowrap;overflow:hidden;min-width:0}
:root[data-pn] .ct .ctt .tag{padding:0 6px;font-size:var(--t1);line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
:root[data-pn] .ct .ctt .tag:nth-child(2),:root[data-pn] .ct .ctt .tag:nth-child(3),:root[data-pn] .ct .ctt .tag:nth-child(4),:root[data-pn] .ct .ctt .tag:nth-child(5){display:none}
:root[data-pn] .ct .ctt .tag:nth-child(1){max-width:none;flex:1 1 auto}
:root[data-pn] .ct .ctt .tag:nth-child(6){flex:none}
:root[data-pn] .ct .ctp{grid-area:prox;margin:0;font-size:var(--t1);white-space:nowrap;text-align:right}
/* 25/09 (dono: "os blocos da oportunidade também conseguimos deixar em uma linha, ocupando os espaços das laterais"):
   ao lado do painel o cartão vira UMA linha — nome · etapa/score · próxima tarefa · valor — e a lista encosta. */
:root[data-pn] .cts{gap:4px}
/* 25/09 (2ª, dono: "por que ainda tem esse espaço aqui? não conseguimos deixar como o de propostas?"): a lista tinha DOIS
   quadros aninhados (a página .card > .lscols > .lsmeio > .card da lista), cada um com borda e 14 px de cada lado — o de
   Propostas tem um só. O de dentro vira transparente; o de fora encolhe o respiro. */
:root[data-pn] .lsmeio>.card{padding:0;border:0;background:none;box-shadow:none;margin:0}
:root[data-pn] .wrap>.card:has(.lscols){padding:14px}
/* "também quero reduzir esse head, tem muito espaço": título + contagem + botões numa fileira que embrulha, os blocos
   com menos margem, e Filtrar + Selecionar lado a lado (a base de 640 px do Filtrar o jogava sozinho numa linha). */
:root[data-pn] .card>.cabtopo{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 4px}
:root[data-pn] .card>.cabtopo .cabesq{flex:1 1 auto;align-items:baseline}
:root[data-pn] .card>.cabtopo .cabsub{flex-basis:auto;margin:0;font-size:var(--t2)}
:root[data-pn] .lscols{margin-top:4px}
:root[data-pn] .lsmeio>#lsfildet{flex:1 1 180px}
:root[data-pn] .lsmeio>.acoes2{align-self:center}
:root[data-pn] .lsdet>summary{min-height:30px;padding-top:4px;padding-bottom:4px}
:root[data-pn] .caixa.ffunil{margin:0 0 4px}
:root[data-pn] .ct{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"nome tags prox valor";gap:0 8px;padding:4px 8px;min-height:34px}
:root[data-pn] .ct .ctt{max-width:128px}
:root[data-pn] .ct .ctt .tag:nth-child(1){max-width:96px}   /* o nome da empresa é o que mais importa; a etapa inteira fica no title */
:root[data-pn] .ct .ctt .tag:nth-child(6){font-size:0;padding:0;border:0;background:none}   /* o score vira só o número */
:root[data-pn] .ct .ctt .tag:nth-child(6)>.sc{font-size:var(--t1)}
:root[data-pn] .ct .ctv{text-align:right;min-width:86px}
/* 25/09: a linha escolhida pelas setas do teclado (ou pelo clique) — como a mensagem aberta no Outlook */
:root[data-pn] .pnsel{border-color:var(--acao)!important;background:var(--info-fundo)!important;box-shadow:inset 3px 0 0 var(--acao)}
/* Tarefas (.tf.fk): atraso | título + cliente (uma linha cada, cortadas) | Concluir/Reagendar pequenos à direita */
:root[data-pn] .tf.fk{grid-template-columns:44px minmax(0,1fr) auto;padding:6px 10px;gap:0 8px;align-items:center}
:root[data-pn] .tf.fk .fkac{grid-column:auto;justify-content:flex-end;gap:4px;flex-wrap:nowrap}
:root[data-pn] .tf.fk .fkac :is(button,summary,a){min-height:28px;padding:2px 8px;font-size:var(--t1)}
:root[data-pn] .tf.fk .fkl1{flex-wrap:nowrap;gap:0;min-width:0}
:root[data-pn] .tf.fk .fkl1 .pil{display:none}
:root[data-pn] .tf.fk .fkl1 .tit{flex:1 1 auto;font-size:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:root[data-pn] .tf.fk .fkl2{margin-top:0;font-size:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-pn] .tf.fk .fkat b{font-size:var(--t4)} :root[data-pn] .tf.fk .fkat span{font-size:var(--t1)}
/* Propostas (.qcd): cliente + valor/dias à esquerda, o botão e "oportunidade ›" empilhados à direita */
:root[data-pn] .qcd{padding:6px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;align-items:center}
:root[data-pn] .qcd .l1{grid-column:1;flex-wrap:nowrap;overflow:hidden}
:root[data-pn] .qcd .l1 b.cli{font-size:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:root[data-pn] .qcd .l2{grid-column:1;flex-wrap:nowrap;overflow:hidden}
:root[data-pn] .qcd .acts{grid-column:2;grid-row:1/3;margin:0;flex-direction:column;align-items:flex-end;gap:2px}
:root[data-pn] .qcd .acts :is(.b-primario,.b-secundario){min-height:28px;padding:2px 10px;font-size:var(--t1)}
:root[data-pn] .qcd .acts .qopo{font-size:var(--t1)}
/* ==========================================================================================================
   ⚠️⚠️ 25/09 — O PADRÃO ÚNICO DAS CAIXAS DAS LISTAS ao lado do painel (dono: "deixa agora todas as caixas no mesmo padrão
   dessa de oportunidades... remove a etapa... vamos usar o padrão de cores das propostas, mais minimalista, com menos
   cores... é importante estarem todos padronizados"). Oportunidades (.ct), Propostas (.qcd), Tarefas (.tf.fk) e Pedidos
   de venda (article.pvc) viram A MESMA LINHA:
     · ~36 px, fundo da superfície, borda cinza, faixa da esquerda cinza (a de Propostas);
     · a faixa fica vermelho-claro (--erro-borda) SÓ no que pede atenção: oportunidade sem tarefa/atrasada, proposta acima
       da meta de dias, tarefa vencida, pedido com fiscal faltando;
     · nome em negrito com ›, o resto neutro em cinza (etiquetas cinza, o score vira número cinza), valor em negrito;
     · o único vermelho de TEXTO é a data vencida e os dias acima da meta.
   O que sai da caixa (etapa, representante, funil, proposta) está no painel, a um clique — e nos títulos (title).
   ========================================================================================================== */
:root[data-pn] :is(.ct,.qcd,.tf.fk,article.pvc){background:var(--superficie);border:1px solid var(--borda-cartao);border-left:3px solid var(--borda-cartao);
  border-radius:var(--raio-p);padding:4px 10px;min-height:36px;box-sizing:border-box;align-items:center;box-shadow:none}
:root[data-pn] :is(.ct.pede,.qcd.sla,.tf.fk.venc,article.pvc.falta){border-left-color:var(--erro-borda)}
:root[data-pn] :is(.ct a.abre,.qcd .l1 b.cli,.tf.fk .fkl1 .tit,article.pvc .agcab a.pvcli){font:600 var(--t3) var(--fonte);color:var(--texto)}   /* 16/10: régua — nome na linha da lista é 600 */
:root[data-pn] :is(.ct .ctt .tag,.qcd .l2 :is(.pil,.chip)){background:var(--fundo);border:1px solid var(--borda-cartao);color:var(--secundario);font-size:var(--t1)}
/* Oportunidades: sem a etapa; o score em cinza */
:root[data-pn] .ct .ctt .tag:nth-child(1){display:none}
:root[data-pn] .ct .sc{background:var(--fundo)!important;color:var(--texto)!important;border:1px solid var(--borda-cartao);font-weight:500}
:root[data-pn] .ct .ctt{max-width:none}
:root[data-pn] .ct .ctt .tag:nth-child(6){max-width:none;overflow:visible}   /* a regra dos 46% cortava o score quando a etapa saiu */
/* 25/09 (3ª, dono: "os das propostas ficaram perfeitos, consegue deixar os demais iguais?"): a caixa de Oportunidades na
   ORDEM e na FORMA da de Propostas — nome › · valor · pílulas (score, próxima tarefa); a data vira pílula, e a vencida (ou
   "sem tarefa") é a pílula vermelho-claro do "dias" das Propostas (.pil.idade.mau). */
/* 25/09 (4ª, dono: "sou detalhista... o nome e os demais elementos centralizados (alinhados), e o score por último para não
   ficar desalinhado na vertical entre os cards"): tudo no MEIO da linha, e colunas de LARGURA FIXA — valor, data e score
   ficam na mesma vertical de um cartão para o outro, seja qual for o tamanho do valor. */
:root[data-pn] .ct{grid-template-areas:"nome valor prox tags";grid-template-columns:minmax(0,1fr) 108px 76px 28px;align-items:center}
:root[data-pn] .ct>*{align-self:center}
:root[data-pn] .ct a.abre{line-height:1.3}
:root[data-pn] .ct .ctv{min-width:0;font-weight:500;text-align:right}
:root[data-pn] .ct .ctp{text-align:center} :root[data-pn] .ct .ctp>span{min-width:62px;text-align:center;box-sizing:border-box}
:root[data-pn] .ct .ctt{justify-content:flex-end}
:root[data-pn] .ct .ctp>span{display:inline-block;padding:1px 7px;border-radius:var(--raio-chip);border:1px solid var(--borda-cartao);
  background:var(--fundo);color:var(--secundario);font-size:var(--t1);line-height:1.5;font-variant-numeric:tabular-nums}
:root[data-pn] .ct .ctp>span.pa{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto);font-weight:500}
:root[data-pn] .ct .ctp>span.ph{color:var(--texto);font-weight:500}
/* O CABEÇALHO DA LISTA (dono: "pode eliminar essas opções, retirando esses 3 pontos, e coloca Em aberto · Ganhas ·
   Perdidas · Excluídas na mesma linha do + oportunidade"): o ··· da lista sai (só o da lista — o das fichas é o mesmo
   componente e fica); o .cabtopo vira display:contents para o título ocupar uma linha e "+ oportunidade" + estados a
   seguinte, lado a lado. */
:root[data-pn] .card:has(>.lscols)>.cabtopo .cabmais{display:none}
:root[data-pn] .card:has(>.lscols){display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
:root[data-pn] .card:has(>.lscols)>*{flex:1 1 100%;min-width:0}
:root[data-pn] .card:has(>.lscols)>.cabtopo{display:contents}
:root[data-pn] .card:has(>.lscols)>.cabtopo>.cabesq{flex:1 1 100%}
:root[data-pn] .card:has(>.lscols)>.cabtopo>.cabdir{flex:0 1 auto;width:auto;max-width:100%;flex-wrap:wrap;margin:0;align-self:center}   /* 05/10: com Lista|Quadro, Minhas tarefas e Ordenar a fileira passou da coluna e o '+ oportunidade' sumia à direita — agora quebra linha */
:root[data-pn] .card:has(>.lscols)>.lsestado{flex:1 1 200px;width:auto;margin:0;order:3}
:root[data-pn] .card:has(>.lscols)>*{order:4} :root[data-pn] .card:has(>.lscols)>.cabtopo>.cabesq{order:1} :root[data-pn] .card:has(>.lscols)>.cabtopo>.cabdir{order:2}
/* 05/10 (dono: "resolve essa área"): estados e "+ oportunidade" dividem UMA linha; os botões vêm na seguinte */
:root[data-pn] .card:has(>.lscols)>.cabtopo>.pnest{order:1;flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
:root[data-pn] .pnest>.qseg{order:0}
/* 05/10 (dono: "alinha os quadros"): todos os controles do cabeçalho com a MESMA altura (32 px) e a fileira de botões
   ocupando a largura inteira — a borda direita fecha com o "+ oportunidade", com Pendências e com Filtros */
/* 16/10 (padrão visual, item 1): esticar a fileira só com o painel ABERTO (a lista vira coluna estreita); fechado, as ações ficam compactas à direita */
:root[data-pnab] .card:has(>.lscols)>.cabtopo>.cabdir{flex:1 1 100%;width:100%;flex-wrap:nowrap;gap:6px}
:root[data-pnab] .card:has(>.lscols)>.cabtopo>.cabdir>*{flex:1 1 auto;min-width:0}
:root[data-pnab] .card:has(>.lscols)>.cabtopo>.cabdir>.ordbt>summary{width:100%}
:root[data-pn] .card:has(>.lscols)>.cabtopo :is(.cabdir>a,.cabdir>.ordbt>summary,.pnest>a:is(.b-discreto,.b-secundario),.qseg .sgb){height:32px;min-height:0;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:var(--t2);white-space:nowrap}
:root[data-pn] .card:has(>.lscols)>.cabtopo .qseg{display:inline-flex;align-items:stretch}
/* 25/09 (5ª, dono: "não precisamos mais desse botão Trabalhar a fila"): sai do cabeçalho da lista (o rodapé "trabalhar" fica) */
:root[data-pn] .cabdir .trfila{display:none}
:root[data-pn] .vmodos{display:none}   /* os ícones de modo de ver: com o painel a lista é sempre a das caixas */
/* "quando eu abro o filtrar fica ilegível": ao lado do painel os campos do Filtrar embrulham em duas colunas legíveis, a busca
   ocupa a linha inteira, e aberto o Filtrar toma a largura toda (o Selecionar desce) */
:root[data-pn] .lsmeio>#lsfildet[open]{flex:1 1 100%}
:root[data-pnab] .fdash{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
:root[data-pnab] .fdash>*{flex:1 1 140px;min-width:0;max-width:100%}
:root[data-pnab] .fdash .fbusca{flex:1 1 100%}
:root[data-pn] .fdash :is(button,.b-secundario,.b-primario,a.lk){flex:0 0 auto}
/* 16/10: as regras acima passaram de [data-pn] para [data-pnab] (só com o painel aberto). O copiador da CSS_ESTREITO
   repetia as de [data-pn] no celular; estas são a mesma coisa, escrita à mão, para o telefone não mudar. */
@media (max-width:759px){
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo>.cabdir{flex:1 1 100%;width:100%;flex-wrap:nowrap;gap:6px}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo>.cabdir>*{flex:1 1 auto;min-width:0}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo>.cabdir>.ordbt>summary{width:100%}
:root:not([data-pn]) .fdash{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
:root:not([data-pn]) .fdash>*{flex:1 1 140px;min-width:0;max-width:100%}
:root:not([data-pn]) .fdash .fbusca{flex:1 1 100%}
}
/* 18/10 (padrão, item 10 — conferido com CELULAR=1): no celular os botões do cabeçalho da lista são alvo de dedo (44), não os 32 da mesa */
/*   (com o [data-pn]/:not e o .wrap na frente: a cópia da CSS_ESTREITO para o celular repete a regra dos 32 DEPOIS desta, e só
     ganha quem tem mais força) */
@media (max-width:759px){ :is(:root[data-pn],:root:not([data-pn])) .wrap .card:has(>.lscols)>.cabtopo :is(.cabdir>a,.cabdir>.ordbt>summary,.pnest>a:is(.b-discreto,.b-secundario),.qseg .sgb){height:var(--alvo)} }
:root[data-pn] .fdash select,:root[data-pn] .fdash input{width:100%;min-width:0;box-sizing:border-box}
/* PROPOSTAS no padrão do cabeçalho de Oportunidades: título + total numa linha; "Nova proposta" e os recortes (funil,
   Minhas/Da equipe) na seguinte. Quadro/Fila/Tabela saem ("não vou deixar outras opções de visualização") — o quadro é a vista. */
:root[data-pn] .pp .cabtopo.ctopo{gap:4px 8px;margin:0 0 6px}
:root[data-pn] .pp .ctopo [role=group][aria-label=vista]{display:none}   /* Quadro/Fila/Tabela (sem redefinir .qseg — a p71 guarda a definição única) */
:root[data-pn] .pp .ctopo .cabesq{flex:1 1 100%;order:1}
:root[data-pn] .pp .ctopo .cabdir{order:2;margin:0;width:auto;flex:0 0 auto}
:root[data-pn] .pp .ctopo .ppchips{order:3;flex:1 1 auto;gap:4px}
:root[data-pn] .pp .ctopo .ppchips .pil{padding:1px 8px;font-size:var(--t1)}
:root[data-pn] .pp .ctopo .tt{font-size:var(--t7)}
/* Propostas: a mesma linha — cliente › · número/valor/dias · o botão; "oportunidade ›" continua sendo o link do cartão
   inteiro (o ::after cobre a caixa), só não ocupa mais uma linha */
:root[data-pn] .qcd{grid-template-columns:minmax(0,1fr) auto auto;gap:0 8px}
:root[data-pn] .qcd .l1{grid-column:1;grid-row:1} :root[data-pn] .qcd .l2{grid-column:2;grid-row:1;gap:4px}
:root[data-pn] .qcd .l1 b.cli::after{content:' ›';color:var(--secundario);font-weight:400}
:root[data-pn] .qcd .acts{grid-column:3;grid-row:1;flex-direction:row;align-items:center;gap:6px}
:root[data-pn] .qcd .acts .qopo{font-size:0}
:root[data-pn] .qcd .l2 .chip.val{color:var(--texto);font-weight:500;background:none;border:0}
/* Tarefas: o atraso compacto à esquerda, título · cliente na mesma linha */
:root[data-pn] .tf.fk{grid-template-columns:auto minmax(0,1fr) auto}
:root[data-pn] .tf.fk .fkat{flex-direction:row;gap:3px;align-items:baseline;min-width:36px}
:root[data-pn] .tf.fk .fkat b{font-size:var(--t3)} :root[data-pn] .tf.fk .fkat b:not(.at){color:var(--secundario)}
:root[data-pn] .tf.fk .corpo{display:flex;align-items:baseline;gap:8px;min-width:0}
:root[data-pn] .tf.fk .fkl1{flex:1 1 auto;min-width:0} :root[data-pn] .tf.fk .fkl2{flex:0 1 45%;min-width:0;margin:0;color:var(--secundario)}
/* Pedidos de venda: # · cliente · valor | a situação (ERP/fiscal/produção) pequena; funil, proposta e representante saem */
/* 25/09 (5ª): # · cliente › · valor | UMA etiqueta de situação (.pvst, a que mais importa); as três fileiras saem da caixa */
:root[data-pn] article.pvc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px}
:root[data-pn] article.pvc :is(.agtags,.agck){display:none}
:root[data-pn] article.pvc .agcab{grid-column:1;grid-row:1;align-items:center;gap:8px}
:root[data-pn] article.pvc .agcab a:first-child{flex:none;font-weight:500;color:var(--secundario)}
:root[data-pn] article.pvc .agcab a.pvcli{flex:1 1 auto;min-width:0}
:root[data-pn] article.pvc .agcab a.pvcli::after{content:' ›';color:var(--secundario);font-weight:400}
:root[data-pn] article.pvc .agcab .v{font-size:var(--t3);font-weight:500}
:root[data-pn] article.pvc .pvst{display:inline-block;grid-column:2;grid-row:1;padding:1px 8px;border-radius:var(--raio-chip);border:1px solid var(--borda-cartao);
  background:var(--fundo);color:var(--secundario);font-size:var(--t1);line-height:1.5;white-space:nowrap}
:root[data-pn] article.pvc .pvst.mau{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto);font-weight:500}
:root[data-pn] article.pvc .pvst.ok{color:var(--ok-texto)}
/* o cabeçalho de Pedidos no padrão: título + números numa linha, a busca, e os três grupos pequenos */
:root[data-pn] .agwrap>.agh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 6px}
:root[data-pn] .agwrap>.agh h1{font-size:var(--t7);margin:0}   /* 17/10: título da página 18 px */ :root[data-pn] .agwrap>.agh .cont{font-size:var(--t2)}
:root[data-pn] .agfiltros{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
:root[data-pn] .agfiltros input[type=search]{flex:1 1 100%;min-height:32px}
:root[data-pn] .agfiltros .fgrp .fbt{padding:3px 9px;font-size:var(--t1);min-height:28px}
/* as MARCAS DO FECHAMENTO no cartão (recorte "Pendências de fechamento"): uma linha só, embaixo — ponto + palavra (verde
   feito, vermelho não, cinza sem resposta), e "gerar pedido" pequeno à direita, na cor de ação */
:root[data-pn] .ct>.fchm{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:10px;align-items:center;margin:3px 0 1px;overflow:hidden;min-width:0}
:root[data-pn] .ct .fchm .ck{border:0;background:none;padding:0;color:var(--secundario);font-size:var(--t1);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
:root[data-pn] .ct .fchm .ck::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--borda-campo);flex:none}
:root[data-pn] .ct .fchm .ck.sim::before{background:var(--sucesso)}
:root[data-pn] .ct .fchm .ck.nao{color:var(--erro-texto)} :root[data-pn] .ct .fchm .ck.nao::before{background:var(--erro-texto)}
:root[data-pn] .ct .fchm .ger{margin-left:auto;background:var(--acao);color:var(--sobre-acao);font-size:var(--t1);padding:2px 10px;position:relative;z-index:1}
/* 25/09 (4ª): as caixas das PENDÊNCIAS DO FUNIL (.ffunil .cxc — direcionar / pronto para assumir / parado no hold) no mesmo
   padrão: uma linha — nome › · cliente/valor em cinza · há Nd (pílula; vermelho-claro acima do prazo) · o botão. A
   etiqueta ("direcionar", "parado no hold") sai: o título do grupo já diz. O "assumir" que é SEU mantém o formulário
   (próxima ação + data) na linha de baixo — é obrigatório e não cabe em uma linha. */
:root[data-pn] .ffunil .cxc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 62px auto;grid-template-areas:"obj meta dias acts";
  align-items:center;gap:0 8px;background:var(--superficie);border:1px solid var(--borda-cartao);border-left:3px solid var(--borda-cartao);
  border-radius:var(--raio-p);padding:4px 10px;min-height:36px;box-shadow:none}
:root[data-pn] .ffunil .cxc:has(.cxdias.bad){border-left-color:var(--erro-borda)}
:root[data-pn] .ffunil .cxc>.cxh{display:contents}
:root[data-pn] .ffunil .cxc .cxtag{display:none}
:root[data-pn] .ffunil .cxc .cxdias{grid-area:dias;justify-self:center;padding:1px 7px;border-radius:var(--raio-chip);border:1px solid var(--borda-cartao);
  background:var(--fundo);color:var(--secundario);font-size:var(--t1);line-height:1.5;white-space:nowrap}
:root[data-pn] .ffunil .cxc .cxdias.bad{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto);font-weight:500}
:root[data-pn] .ffunil .cxc .cxobj{grid-area:obj;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-pn] .ffunil .cxc .cxobj a.lk{font:700 var(--t3) var(--fonte);color:var(--texto);text-decoration:none}
:root[data-pn] .ffunil .cxc .cxobj a.lk::after{content:' ›';color:var(--secundario);font-weight:400}
:root[data-pn] .ffunil .cxc .cxmeta{grid-area:meta;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t1)}
:root[data-pn] .ffunil .cxc .cxacts{grid-area:acts;margin:0}
:root[data-pn] .ffunil .cxc .cxacts .bt{min-height:28px;padding:2px 10px;font-size:var(--t1)}
:root[data-pn] .ffunil .cxc>.cxassumir{grid-column:1/-1;margin:4px 0 2px}
:root[data-pn] .ffunil .cxc.deoutro{background:var(--superficie)}
:root[data-pn] .ffunil .cxbody{padding:4px 10px 10px} :root[data-pn] .ffunil .cxbody>*+*{margin-top:4px}
/* ==========================================================================================================
   21/09 (dono: "agora compactar ao máximo esse pedaço" — o CABEÇALHO das três pastas). Título menor, sem
   sobrancelha, segmentos e botões pequenos, filtros dentro do <details> "Filtrar" (a forma do celular, que a
   folha global só mostra abaixo de 980 px de JANELA — aqui a coluna é estreita numa janela larga).
   ========================================================================================================== */
:root[data-pn] .card>.ident h1.tt,:root[data-pn] .ident h1.tt,:root[data-pn] .fk3 h1,:root[data-pn] .pp h1.tt{font-size:var(--t7);margin:0}   /* 16/10: título da página 18 px (padrão, item 1) */
.ident.cabcock h1.tt{font-size:var(--t7);margin:0}   /* 17/10: idem nas telas sem o painel (ficha do pedido) */
:root[data-pn] .wrap .cabolho,:root[data-pn] .cxped{display:none}
:root[data-pn] .cabtopo{gap:4px} :root[data-pn] .cabesq{gap:2px 8px}
:root[data-pn] .seg .sgb,:root[data-pn] .ctopo .qseg .sgb{padding:3px 9px;font-size:var(--t2);min-height:0}
:root[data-pn] .cabdir :is(a,button,summary){min-height:30px;padding:3px 9px;font-size:var(--t2)}
:root[data-pn] .cabchips{gap:4px;flex-wrap:wrap;overflow:visible}
:root[data-pn] .cabchips .pil{padding:0 7px;font-size:var(--t1);white-space:nowrap}
:root[data-pn] .lsestado{margin:4px 0 0;gap:6px 10px}
:root[data-pn] .caixa{margin:0 0 6px} :root[data-pn] .caixah,:root[data-pn] .agh{min-height:32px;padding:5px 10px;font-size:var(--t2)}
:root[data-pn] .fk3 .ident{margin:0 0 6px} :root[data-pn] .fk3 .fktot{font-size:var(--t2)}
:root[data-pn] .tks .modos{display:none}   /* 21/09 (dono): ao lado do painel só existe o Foco */
/* 21/09 (dono: "o botão Executar fila também não precisa — da forma como estamos trabalhando acabamos fazendo isso") */
:root[data-pn] .tks a[href^="/tarefas/executar"],:root[data-pn] .tks .ffim{display:none}
/* Clientes no mesmo padrão das demais: linha de leitura — sem caixa de lote, sem "prévia ›" (o painel É a prévia),
   oportunidades numa linha, células rasas; a linha inteira já abre o cliente (a.abre::after da folha da tela) */
:root[data-pn] table.clt :is(th,td):nth-child(1){display:none}
:root[data-pn] table.clt td{padding:5px 6px}
:root[data-pn] table.clt th{font-size:var(--t1);padding:4px 6px;white-space:nowrap}
:root[data-pn] table.clt td.cli .prev{display:none}
:root[data-pn] table.clt td.cli a.abre .nome{font-size:var(--t2)}
:root[data-pn] table.clt td.cli .sub{max-width:100%;display:block}
:root[data-pn] table.clt td.opo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t1)}
:root[data-pn] table.clt td.opo .oposub{display:none}   /* ganhas/perdidas abrem com o cliente */
:root[data-pn] table.clt td.opo .pil,:root[data-pn] table.clt td.prox .pil{padding:0 6px;font-size:var(--t1)}
:root[data-pn] table.clt td.prox{font-size:var(--t1)}
:root[data-pn] table.clt td.prox :is(a,button){min-height:26px;padding:1px 7px;font-size:var(--t1)}
/* …e a linha vira o CARTÃO DE DUAS LINHAS que a tela já tem para o celular (clientes.mjs, @media 980): nome+CNPJ em
   cima, oportunidades e próximo passo embaixo — em 330 px as três colunas da tabela cortavam os pills pela metade */
:root[data-pn] table.clt thead{display:none}
:root[data-pn] table.clt,:root[data-pn] table.clt tbody{display:block;width:auto}
:root[data-pn] table.clt tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px;padding:6px 10px;margin:0 0 4px;
  border:1px solid var(--borda-cartao);border-radius:var(--raio-p);background:var(--superficie)}
:root[data-pn] table.clt td{display:block;padding:0;border:0;white-space:nowrap;width:auto}
:root[data-pn] table.clt td.cli{order:1;flex:1 0 100%;min-width:0;white-space:normal}
:root[data-pn] table.clt td.cli .sub{display:inline-block;max-width:100%}
:root[data-pn] table.clt td.opo{order:3;flex:0 1 auto;overflow:visible}
:root[data-pn] table.clt td.opo:has(> .ap){display:none}
:root[data-pn] table.clt td.prox{order:5;margin-left:auto;flex:0 1 auto;min-width:0}
:root[data-pn] table.opo.clt td[data-r]::before{content:none}
:root[data-pn] table.clt :is(th,td):nth-child(2){width:auto}
:root[data-pn] .acb.selbt{min-height:28px;padding:2px 8px;font-size:var(--t1)}
:root[data-pn] .lsdet>summary.lsdetsum{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;margin:0 0 6px;
  border:1px solid var(--borda-campo);border-radius:var(--raio-p);background:var(--superficie);font:600 var(--t2) var(--fonte);color:var(--texto);cursor:pointer}
:root[data-pn] .lsdet>summary.lsdetsum::after{content:'▾';margin-left:auto;color:var(--secundario)}
:root[data-pn] .lsdet[open]>summary.lsdetsum::after{content:'▴'}
:root[data-pn] .lsdet:not([open])::details-content{content-visibility:hidden}
:root[data-pn] .fchips{margin:0 0 4px;font-size:var(--t1)} :root[data-pn] .ordl{padding:1px 6px}
:root[data-pn] .colbt{display:none}
/* 21/09 (dono: "o de tarefas ficou horrível"): o cartão do Foco é uma grade de 3 trilhas (atraso | texto | ações) e, em
   400 px, a trilha das ações (Concluir + Reagendar, ~220 px) deixava o título com 4 letras por linha. Ao lado do painel
   ele usa a forma do CELULAR (regra de @media max-width:759px em tarefas.mjs): ações numa fileira própria embaixo. */
/* (a forma do celular do cartão do Foco, que ficava aqui, foi substituída pela LINHA compacta mais abaixo) */
.pndir{position:fixed;top:calc(var(--ledge) + 8px);right:8px;bottom:8px;width:var(--pnw);z-index:6;min-width:0}
.pnfr{width:100%;height:100%;border:1px solid var(--borda-cartao);border-radius:var(--raio);background:var(--superficie);display:block}
.tpnf,.tnovf{display:contents}
/* 21/09 (dono: "não vi esse botão") — o interruptor tem RÓTULO e borda: só ícone cinza, sem caixa, ao lado da
   busca, passou despercebido no primeiro uso. É um botão secundário da casa, e aceso vira primário. */
.tpn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--alvo);padding:0 12px;
  border:1px solid var(--borda-campo);border-radius:var(--raio-p);background:var(--superficie);color:var(--texto);
  font:600 var(--t3) var(--fonte);flex:none;cursor:pointer;white-space:nowrap}
.tpn svg{width:18px;height:18px;color:var(--secundario)}
.tpn:hover{color:var(--acao);border-color:var(--acao)} .tpn:hover svg{color:var(--acao)}
.tpn.on{background:var(--acao);border-color:var(--acao);color:var(--sobre-acao)} .tpn.on svg{color:var(--sobre-acao)}
@media (max-width:1100px){ .tpn span{display:none} .tpn{padding:0;width:var(--alvo)} }
.mkon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--secundario)}
.mkon svg{width:16px;height:16px}
.mkon.ww{color:var(--alerta)}
@media (max-width:759px){ .tpn{display:none} }

@media (max-width:759px){
:root:not([data-pn]) .funq{flex-direction:column;overflow-x:visible;overflow-y:visible;gap:12px;scroll-snap-type:none}
:root:not([data-pn]) .funq .col{flex:0 0 auto;width:100%}
:root:not([data-pn]) .funq .colc{max-height:none}
:root:not([data-pn]) .funq{align-items:stretch}
:root:not([data-pn]) .cts,:root:not([data-pn]) .cxgrid,:root:not([data-pn]) .pgrid,:root:not([data-pn]) .tks .tcols,:root:not([data-pn]) .pcols{grid-template-columns:1fr}
:root:not([data-pn]) .cmeio .fdash{flex-wrap:wrap}
:root:not([data-pn]) .cmeio .fdash .fbusca,:root:not([data-pn]) .cmeio .fdash select{max-width:100%}
:root:not([data-pn]) .lsmeio.cmeio>.lsdetq{flex:1 1 100%}
:root:not([data-pn]) .card,:root:not([data-pn]) .lscols{min-width:0;max-width:100%}
:root:not([data-pn]) .cabtopo,:root:not([data-pn]) .cabtopo.ctopo{flex-direction:column;align-items:stretch;gap:8px}
:root:not([data-pn]) table.clt :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(5)){display:none}
:root:not([data-pn]) table.clt th:nth-child(2),:root:not([data-pn]) table.clt td:nth-child(2){width:auto}
:root:not([data-pn]) .cabesq{gap:2px 10px}
:root:not([data-pn]) .cabsub{margin-left:0;flex-basis:100%;white-space:normal}
:root:not([data-pn]) .cabdir{width:100%;justify-content:flex-start;gap:6px;flex-wrap:wrap}
:root:not([data-pn]) .wrap img,:root:not([data-pn]) .wrap table{max-width:100%}
:root:not([data-pn]) :is(.clcols,.fkgrid,.lscols,.cockpit:not(.ckdoc)){grid-template-columns:minmax(0,1fr)}
:root:not([data-pn]) :is(.lsrecdet,.fesq,.cknav){width:auto;position:static;max-height:none}
:root:not([data-pn]) :is(.fesq,.fdir){position:static;max-height:none;overflow:visible}
:root:not([data-pn]) .fesq>.fkrot:first-child{display:none}
:root:not([data-pn]) .ffilas{flex-direction:row;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 0 8px}
:root:not([data-pn]) .ffila{flex:none;border:1px solid var(--borda-campo);min-height:28px;padding:3px 9px;gap:5px;border-radius:999px;font-size:var(--t2);white-space:nowrap}
:root:not([data-pn]) .ffila i{display:none}
:root:not([data-pn]) .ffila b{margin-left:2px}
:root:not([data-pn]) .ffila.on{background:var(--acao);border-color:var(--acao);color:var(--sobre-acao)}
:root:not([data-pn]) .ffila.on b{color:var(--sobre-acao)}
:root:not([data-pn]) .ffila.mau:not(.on) b{color:var(--erro-texto)}
:root:not([data-pn]) .ffila .ffl{display:none}
:root:not([data-pn]) .ffila .ffc{display:inline}
:root:not([data-pn]) .fkord{flex-direction:row;flex-wrap:wrap;gap:6px}
:root:not([data-pn]) .fdir{order:3}
:root:not([data-pn]) .tks .modos{max-width:100%;overflow-x:auto}
:root:not([data-pn]) .ct,:root:not([data-pn]) .qcd{position:relative}
:root:not([data-pn]) .ct a.abre::after,:root:not([data-pn]) .qcd a.qopo::after{content:'';position:absolute;inset:0}
:root:not([data-pn]) .ct :is(a,button,form,details):not(.abre),:root:not([data-pn]) .qcd :is(a,button,form,details):not(.qopo){position:relative;z-index:1}
:root:not([data-pn]) .ct:hover,:root:not([data-pn]) .qcd:hover{border-color:var(--acao)}
:root:not([data-pn]) .ct{padding:6px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome valor" "tags prox";gap:1px 8px;align-items:center}
:root:not([data-pn]) .ct a.abre{grid-area:nome;display:block;font-size:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
:root:not([data-pn]) .ct .ctv{grid-area:valor;margin:0;font-size:var(--t3);white-space:nowrap}
:root:not([data-pn]) .ct .ctt{grid-area:tags;margin:0;gap:4px;flex-wrap:nowrap;overflow:hidden;min-width:0}
:root:not([data-pn]) .ct .ctt .tag{padding:0 6px;font-size:var(--t1);line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
:root:not([data-pn]) .ct .ctt .tag:nth-child(2),:root:not([data-pn]) .ct .ctt .tag:nth-child(3),:root:not([data-pn]) .ct .ctt .tag:nth-child(4),:root:not([data-pn]) .ct .ctt .tag:nth-child(5){display:none}
:root:not([data-pn]) .ct .ctt .tag:nth-child(1){max-width:none;flex:1 1 auto}
:root:not([data-pn]) .ct .ctt .tag:nth-child(6){flex:none}
:root:not([data-pn]) .ct .ctp{grid-area:prox;margin:0;font-size:var(--t1);white-space:nowrap;text-align:right}
:root:not([data-pn]) .cts{gap:4px}
:root:not([data-pn]) .lsmeio>.card{padding:0;border:0;background:none;box-shadow:none;margin:0}
:root:not([data-pn]) .wrap>.card:has(.lscols){padding:14px}
:root:not([data-pn]) .card>.cabtopo{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 4px}
:root:not([data-pn]) .card>.cabtopo .cabesq{flex:1 1 auto;align-items:baseline}
:root:not([data-pn]) .card>.cabtopo .cabsub{flex-basis:auto;margin:0;font-size:var(--t2)}
:root:not([data-pn]) .lscols{margin-top:4px}
:root:not([data-pn]) .lsmeio>#lsfildet{flex:1 1 180px}
:root:not([data-pn]) .lsmeio>.acoes2{align-self:center}
:root:not([data-pn]) .lsdet>summary{min-height:30px;padding-top:4px;padding-bottom:4px}
:root:not([data-pn]) .caixa.ffunil{margin:0 0 4px}
:root:not([data-pn]) .ct{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"nome tags prox valor";gap:0 8px;padding:4px 8px;min-height:34px}
:root:not([data-pn]) .ct .ctt{max-width:128px}
:root:not([data-pn]) .ct .ctt .tag:nth-child(1){max-width:96px}
:root:not([data-pn]) .ct .ctt .tag:nth-child(6){font-size:0;padding:0;border:0;background:none}
:root:not([data-pn]) .ct .ctt .tag:nth-child(6)>.sc{font-size:var(--t1)}
:root:not([data-pn]) .ct .ctv{text-align:right;min-width:86px}
:root:not([data-pn]) .pnsel{border-color:var(--acao)!important;background:var(--info-fundo)!important;box-shadow:inset 3px 0 0 var(--acao)}
:root:not([data-pn]) .tf.fk{grid-template-columns:44px minmax(0,1fr) auto;padding:6px 10px;gap:0 8px;align-items:center}
:root:not([data-pn]) .tf.fk .fkac{grid-column:auto;justify-content:flex-end;gap:4px;flex-wrap:nowrap}
:root:not([data-pn]) .tf.fk .fkac :is(button,summary,a){min-height:28px;padding:2px 8px;font-size:var(--t1)}
:root:not([data-pn]) .tf.fk .fkl1{flex-wrap:nowrap;gap:0;min-width:0}
:root:not([data-pn]) .tf.fk .fkl1 .pil{display:none}
:root:not([data-pn]) .tf.fk .fkl1 .tit{flex:1 1 auto;font-size:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:root:not([data-pn]) .tf.fk .fkl2{margin-top:0;font-size:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root:not([data-pn]) .tf.fk .fkat b{font-size:var(--t4)}
:root:not([data-pn]) .tf.fk .fkat span{font-size:var(--t1)}
:root:not([data-pn]) .qcd{padding:6px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;align-items:center}
:root:not([data-pn]) .qcd .l1{grid-column:1;flex-wrap:nowrap;overflow:hidden}
:root:not([data-pn]) .qcd .l1 b.cli{font-size:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:root:not([data-pn]) .qcd .l2{grid-column:1;flex-wrap:nowrap;overflow:hidden}
:root:not([data-pn]) .qcd .acts{grid-column:2;grid-row:1/3;margin:0;flex-direction:column;align-items:flex-end;gap:2px}
:root:not([data-pn]) .qcd .acts :is(.b-primario,.b-secundario){min-height:28px;padding:2px 10px;font-size:var(--t1)}
:root:not([data-pn]) .qcd .acts .qopo{font-size:var(--t1)}
:root:not([data-pn]) :is(.ct,.qcd,.tf.fk,article.pvc){background:var(--superficie);border:1px solid var(--borda-cartao);border-left:3px solid var(--borda-cartao);
  border-radius:var(--raio-p);padding:4px 10px;min-height:36px;box-sizing:border-box;align-items:center;box-shadow:none}
:root:not([data-pn]) :is(.ct.pede,.qcd.sla,.tf.fk.venc,article.pvc.falta){border-left-color:var(--erro-borda)}
:root:not([data-pn]) :is(.ct a.abre,.qcd .l1 b.cli,.tf.fk .fkl1 .tit,article.pvc .agcab a.pvcli){font:600 var(--t3) var(--fonte);color:var(--texto)}
:root:not([data-pn]) :is(.ct .ctt .tag,.qcd .l2 :is(.pil,.chip)){background:var(--fundo);border:1px solid var(--borda-cartao);color:var(--secundario);font-size:var(--t1)}
:root:not([data-pn]) .ct .ctt .tag:nth-child(1){display:none}
:root:not([data-pn]) .ct .sc{background:var(--fundo)!important;color:var(--texto)!important;border:1px solid var(--borda-cartao);font-weight:500}
:root:not([data-pn]) .ct .ctt{max-width:none}
:root:not([data-pn]) .ct .ctt .tag:nth-child(6){max-width:none;overflow:visible}
:root:not([data-pn]) .ct{grid-template-areas:"nome valor prox tags";grid-template-columns:minmax(0,1fr) 108px 76px 28px;align-items:center}
:root:not([data-pn]) .ct>*{align-self:center}
:root:not([data-pn]) .ct a.abre{line-height:1.3}
:root:not([data-pn]) .ct .ctv{min-width:0;font-weight:500;text-align:right}
:root:not([data-pn]) .ct .ctp{text-align:center}
:root:not([data-pn]) .ct .ctp>span{min-width:62px;text-align:center;box-sizing:border-box}
:root:not([data-pn]) .ct .ctt{justify-content:flex-end}
:root:not([data-pn]) .ct .ctp>span{display:inline-block;padding:1px 7px;border-radius:var(--raio-chip);border:1px solid var(--borda-cartao);
  background:var(--fundo);color:var(--secundario);font-size:var(--t1);line-height:1.5;font-variant-numeric:tabular-nums}
:root:not([data-pn]) .ct .ctp>span.pa{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto);font-weight:500}
:root:not([data-pn]) .ct .ctp>span.ph{color:var(--texto);font-weight:500}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo .cabmais{display:none}
:root:not([data-pn]) .card:has(>.lscols){display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
:root:not([data-pn]) .card:has(>.lscols)>*{flex:1 1 100%;min-width:0}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo{display:contents}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo>.cabesq{flex:1 1 100%}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo>.cabdir{flex:0 1 auto;width:auto;max-width:100%;flex-wrap:wrap;margin:0;align-self:center}
:root:not([data-pn]) .card:has(>.lscols)>.lsestado{flex:1 1 200px;width:auto;margin:0;order:3}
:root:not([data-pn]) .card:has(>.lscols)>*{order:4}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo>.cabesq{order:1}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo>.cabdir{order:2}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo>.pnest{order:1;flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
:root:not([data-pn]) .pnest>.qseg{order:0}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo :is(.cabdir>a,.cabdir>.ordbt>summary,.pnest>a:is(.b-discreto,.b-secundario),.qseg .sgb){height:32px;min-height:0;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:var(--t2);white-space:nowrap}
:root:not([data-pn]) .card:has(>.lscols)>.cabtopo .qseg{display:inline-flex;align-items:stretch}
:root:not([data-pn]) .cabdir .trfila{display:none}
:root:not([data-pn]) .vmodos{display:none}
:root:not([data-pn]) .lsmeio>#lsfildet[open]{flex:1 1 100%}
:root:not([data-pn]) .fdash :is(button,.b-secundario,.b-primario,a.lk){flex:0 0 auto}
:root:not([data-pn]) .fdash select,:root:not([data-pn]) .fdash input{width:100%;min-width:0;box-sizing:border-box}
:root:not([data-pn]) .pp .cabtopo.ctopo{gap:4px 8px;margin:0 0 6px}
:root:not([data-pn]) .pp .ctopo [role=group][aria-label=vista]{display:none}
:root:not([data-pn]) .pp .ctopo .cabesq{flex:1 1 100%;order:1}
:root:not([data-pn]) .pp .ctopo .cabdir{order:2;margin:0;width:auto;flex:0 0 auto}
:root:not([data-pn]) .pp .ctopo .ppchips{order:3;flex:1 1 auto;gap:4px}
:root:not([data-pn]) .pp .ctopo .ppchips .pil{padding:1px 8px;font-size:var(--t1)}
:root:not([data-pn]) .pp .ctopo .tt{font-size:var(--t7)}
:root:not([data-pn]) .qcd{grid-template-columns:minmax(0,1fr) auto auto;gap:0 8px}
:root:not([data-pn]) .qcd .l1{grid-column:1;grid-row:1}
:root:not([data-pn]) .qcd .l2{grid-column:2;grid-row:1;gap:4px}
:root:not([data-pn]) .qcd .l1 b.cli::after{content:' ›';color:var(--secundario);font-weight:400}
:root:not([data-pn]) .qcd .acts{grid-column:3;grid-row:1;flex-direction:row;align-items:center;gap:6px}
:root:not([data-pn]) .qcd .acts .qopo{font-size:0}
:root:not([data-pn]) .qcd .l2 .chip.val{color:var(--texto);font-weight:500;background:none;border:0}
:root:not([data-pn]) .tf.fk{grid-template-columns:auto minmax(0,1fr) auto}
:root:not([data-pn]) .tf.fk .fkat{flex-direction:row;gap:3px;align-items:baseline;min-width:36px}
:root:not([data-pn]) .tf.fk .fkat b{font-size:var(--t3)}
:root:not([data-pn]) .tf.fk .fkat b:not(.at){color:var(--secundario)}
:root:not([data-pn]) .tf.fk .corpo{display:flex;align-items:baseline;gap:8px;min-width:0}
:root:not([data-pn]) .tf.fk .fkl1{flex:1 1 auto;min-width:0}
:root:not([data-pn]) .tf.fk .fkl2{flex:0 1 45%;min-width:0;margin:0;color:var(--secundario)}
:root:not([data-pn]) article.pvc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px}
:root:not([data-pn]) article.pvc :is(.agtags,.agck){display:none}
:root:not([data-pn]) article.pvc .agcab{grid-column:1;grid-row:1;align-items:center;gap:8px}
:root:not([data-pn]) article.pvc .agcab a:first-child{flex:none;font-weight:500;color:var(--secundario)}
:root:not([data-pn]) article.pvc .agcab a.pvcli{flex:1 1 auto;min-width:0}
:root:not([data-pn]) article.pvc .agcab a.pvcli::after{content:' ›';color:var(--secundario);font-weight:400}
:root:not([data-pn]) article.pvc .agcab .v{font-size:var(--t3);font-weight:500}
:root:not([data-pn]) article.pvc .pvst{display:inline-block;grid-column:2;grid-row:1;padding:1px 8px;border-radius:var(--raio-chip);border:1px solid var(--borda-cartao);
  background:var(--fundo);color:var(--secundario);font-size:var(--t1);line-height:1.5;white-space:nowrap}
:root:not([data-pn]) article.pvc .pvst.mau{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto);font-weight:500}
:root:not([data-pn]) article.pvc .pvst.ok{color:var(--ok-texto)}
:root:not([data-pn]) .agwrap>.agh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 6px}
:root:not([data-pn]) .agwrap>.agh h1{font-size:var(--t7);margin:0}
:root:not([data-pn]) .agwrap>.agh .cont{font-size:var(--t2)}
:root:not([data-pn]) .agfiltros{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
:root:not([data-pn]) .agfiltros input[type=search]{flex:1 1 100%;min-height:32px}
:root:not([data-pn]) .agfiltros .fgrp .fbt{padding:3px 9px;font-size:var(--t1);min-height:28px}
:root:not([data-pn]) .ct>.fchm{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:10px;align-items:center;margin:3px 0 1px;overflow:hidden;min-width:0}
:root:not([data-pn]) .ct .fchm .ck{border:0;background:none;padding:0;color:var(--secundario);font-size:var(--t1);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
:root:not([data-pn]) .ct .fchm .ck::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--borda-campo);flex:none}
:root:not([data-pn]) .ct .fchm .ck.sim::before{background:var(--sucesso)}
:root:not([data-pn]) .ct .fchm .ck.nao{color:var(--erro-texto)}
:root:not([data-pn]) .ct .fchm .ck.nao::before{background:var(--erro-texto)}
:root:not([data-pn]) .ct .fchm .ger{margin-left:auto;background:var(--acao);color:var(--sobre-acao);font-size:var(--t1);padding:2px 10px;position:relative;z-index:1}
:root:not([data-pn]) .ffunil .cxc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 62px auto;grid-template-areas:"obj meta dias acts";
  align-items:center;gap:0 8px;background:var(--superficie);border:1px solid var(--borda-cartao);border-left:3px solid var(--borda-cartao);
  border-radius:var(--raio-p);padding:4px 10px;min-height:36px;box-shadow:none}
:root:not([data-pn]) .ffunil .cxc:has(.cxdias.bad){border-left-color:var(--erro-borda)}
:root:not([data-pn]) .ffunil .cxc>.cxh{display:contents}
:root:not([data-pn]) .ffunil .cxc .cxtag{display:none}
:root:not([data-pn]) .ffunil .cxc .cxdias{grid-area:dias;justify-self:center;padding:1px 7px;border-radius:var(--raio-chip);border:1px solid var(--borda-cartao);
  background:var(--fundo);color:var(--secundario);font-size:var(--t1);line-height:1.5;white-space:nowrap}
:root:not([data-pn]) .ffunil .cxc .cxdias.bad{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto);font-weight:500}
:root:not([data-pn]) .ffunil .cxc .cxobj{grid-area:obj;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root:not([data-pn]) .ffunil .cxc .cxobj a.lk{font:700 var(--t3) var(--fonte);color:var(--texto);text-decoration:none}
:root:not([data-pn]) .ffunil .cxc .cxobj a.lk::after{content:' ›';color:var(--secundario);font-weight:400}
:root:not([data-pn]) .ffunil .cxc .cxmeta{grid-area:meta;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t1)}
:root:not([data-pn]) .ffunil .cxc .cxacts{grid-area:acts;margin:0}
:root:not([data-pn]) .ffunil .cxc .cxacts .bt{min-height:28px;padding:2px 10px;font-size:var(--t1)}
:root:not([data-pn]) .ffunil .cxc>.cxassumir{grid-column:1/-1;margin:4px 0 2px}
:root:not([data-pn]) .ffunil .cxc.deoutro{background:var(--superficie)}
:root:not([data-pn]) .ffunil .cxbody{padding:4px 10px 10px}
:root:not([data-pn]) .ffunil .cxbody>*+*{margin-top:4px}
:root:not([data-pn]) .card>.ident h1.tt,:root:not([data-pn]) .ident h1.tt,:root:not([data-pn]) .fk3 h1,:root:not([data-pn]) .pp h1.tt{font-size:var(--t7);margin:0}
:root:not([data-pn]) .wrap .cabolho,:root:not([data-pn]) .cxped{display:none}
:root:not([data-pn]) .cabtopo{gap:4px}
:root:not([data-pn]) .cabesq{gap:2px 8px}
:root:not([data-pn]) .seg .sgb,:root:not([data-pn]) .ctopo .qseg .sgb{padding:3px 9px;font-size:var(--t2);min-height:0}
:root:not([data-pn]) .cabdir :is(a,button,summary){min-height:30px;padding:3px 9px;font-size:var(--t2)}
:root:not([data-pn]) .cabchips{gap:4px;flex-wrap:wrap;overflow:visible}
:root:not([data-pn]) .cabchips .pil{padding:0 7px;font-size:var(--t1);white-space:nowrap}
:root:not([data-pn]) .lsestado{margin:4px 0 0;gap:6px 10px}
:root:not([data-pn]) .caixa{margin:0 0 6px}
:root:not([data-pn]) .caixah,:root:not([data-pn]) .agh{min-height:32px;padding:5px 10px;font-size:var(--t2)}
:root:not([data-pn]) .fk3 .ident{margin:0 0 6px}
:root:not([data-pn]) .fk3 .fktot{font-size:var(--t2)}
:root:not([data-pn]) .tks .modos{display:none}
:root:not([data-pn]) .tks a[href^="/tarefas/executar"],:root:not([data-pn]) .tks .ffim{display:none}
:root:not([data-pn]) table.clt :is(th,td):nth-child(1){display:none}
:root:not([data-pn]) table.clt td{padding:5px 6px}
:root:not([data-pn]) table.clt th{font-size:var(--t1);padding:4px 6px;white-space:nowrap}
:root:not([data-pn]) table.clt td.cli .prev{display:none}
:root:not([data-pn]) table.clt td.cli a.abre .nome{font-size:var(--t2)}
:root:not([data-pn]) table.clt td.cli .sub{max-width:100%;display:block}
:root:not([data-pn]) table.clt td.opo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t1)}
:root:not([data-pn]) table.clt td.opo .oposub{display:none}
:root:not([data-pn]) table.clt td.opo .pil,:root:not([data-pn]) table.clt td.prox .pil{padding:0 6px;font-size:var(--t1)}
:root:not([data-pn]) table.clt td.prox{font-size:var(--t1)}
:root:not([data-pn]) table.clt td.prox :is(a,button){min-height:26px;padding:1px 7px;font-size:var(--t1)}
:root:not([data-pn]) table.clt thead{display:none}
:root:not([data-pn]) table.clt,:root:not([data-pn]) table.clt tbody{display:block;width:auto}
:root:not([data-pn]) table.clt tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px;padding:6px 10px;margin:0 0 4px;
  border:1px solid var(--borda-cartao);border-radius:var(--raio-p);background:var(--superficie)}
:root:not([data-pn]) table.clt td{display:block;padding:0;border:0;white-space:nowrap;width:auto}
:root:not([data-pn]) table.clt td.cli{order:1;flex:1 0 100%;min-width:0;white-space:normal}
:root:not([data-pn]) table.clt td.cli .sub{display:inline-block;max-width:100%}
:root:not([data-pn]) table.clt td.opo{order:3;flex:0 1 auto;overflow:visible}
:root:not([data-pn]) table.clt td.opo:has(> .ap){display:none}
:root:not([data-pn]) table.clt td.prox{order:5;margin-left:auto;flex:0 1 auto;min-width:0}
:root:not([data-pn]) table.opo.clt td[data-r]::before{content:none}
:root:not([data-pn]) table.clt :is(th,td):nth-child(2){width:auto}
:root:not([data-pn]) .acb.selbt{min-height:28px;padding:2px 8px;font-size:var(--t1)}
:root:not([data-pn]) .lsdet>summary.lsdetsum{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;margin:0 0 6px;
  border:1px solid var(--borda-campo);border-radius:var(--raio-p);background:var(--superficie);font:600 var(--t2) var(--fonte);color:var(--texto);cursor:pointer}
:root:not([data-pn]) .lsdet>summary.lsdetsum::after{content:'▾';margin-left:auto;color:var(--secundario)}
:root:not([data-pn]) .lsdet[open]>summary.lsdetsum::after{content:'▴'}
:root:not([data-pn]) .lsdet:not([open])::details-content{content-visibility:hidden}
:root:not([data-pn]) .fchips{margin:0 0 4px;font-size:var(--t1)}
:root:not([data-pn]) .ordl{padding:1px 6px}
:root:not([data-pn]) .ct{grid-template-areas:"nome valor" "prox tags";grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:8px 12px;min-height:52px}
:root:not([data-pn]) .ct a.abre{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0}   /* o cartão inteiro é o alvo (::after) — o link não precisa dos 44 px */
:root:not([data-pn]) .ct .ctp{text-align:left}
:root:not([data-pn]) .ct .ctv{min-width:0}
:root:not([data-pn]) :is(.qcd,.tf.fk,article.pvc){min-height:48px;padding:8px 12px}
:root:not([data-pn]) .qcd .l1{flex-wrap:wrap} :root:not([data-pn]) .qcd .l1 b.cli{white-space:normal;overflow:visible;flex:1 1 100%;overflow-wrap:anywhere}
/* o cartão de proposta EMBRULHA no telefone: nome e números ocupam o que sobra (piso de 170 px) e os botões vão para a direita
   quando cabem, ou descem para a linha de baixo quando não — na grade de duas trilhas um botão largo espremia o nome a ~0 px */
:root:not([data-pn]) .qcd{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;text-align:left}   /* ⚠️ row: o .cd do quadro é coluna, e em coluna o flex-basis de 170 px virava ALTURA (cartão de 280 px, foto do dono 28/09) */
:root:not([data-pn]) .qcd :is(.l1,.l2){flex:1 1 170px;min-width:0}
:root:not([data-pn]) .qcd .acts{flex:0 0 auto;margin-left:auto;flex-direction:row;flex-wrap:wrap;justify-content:flex-end}   /* no telefone o nome do cliente quebra linha em vez de ser cortado (p93) */
:root:not([data-pn]) :is(button,.b-primario,.b-secundario,.b-discreto,.cabmais>summary,a.pil,a.pxchip,.ffila,.agh,.lsdet>summary,.sgb,.tf.fk .fkac :is(button,summary,a),.qcd .acts :is(.b-primario,.b-secundario)){min-height:44px;box-sizing:border-box}   /* o piso do dedo (p51): as regras copiadas do painel eram de mouse (28-32 px) */
/* ⚠️ 28/09 (revisão da jornada 1): a TAREFA também embrulha no telefone. Com Concluir + Reagendar de 44 px à direita
   sobravam ~100 px e o título virava "Conferi…" — o representante não lia o que tinha de fazer. Agora: atraso | título
   (até 2 linhas) e cliente; os botões descem para a linha de baixo, alinhados à direita. */
:root:not([data-pn]) .tf.fk{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"at corpo" "ac ac";align-items:start}
:root:not([data-pn]) .tf.fk .fkat{grid-area:at} :root:not([data-pn]) .tf.fk .corpo{grid-area:corpo;display:block}
:root:not([data-pn]) .tf.fk .fkac{grid-area:ac;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
:root:not([data-pn]) .tf.fk .fkl1 .tit{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:root:not([data-pn]) .tf.fk .fkl2{white-space:normal;flex:none;overflow:visible}
}

@media (min-width:760px){
:root[data-pn]:not([data-pnab]) .pndir{display:none}
:root[data-pn]:not([data-pnab]) .wrap{padding-right:14px;max-width:none}
/* a linha da oportunidade com a largura toda: volta a mostrar etapa, rep, dias e proposta */
:root[data-pn]:not([data-pnab]) .ct .ctt{max-width:none}
:root[data-pn]:not([data-pnab]) .ct .ctt .tag:nth-child(n){display:inline-block;max-width:none;flex:none}
:root[data-pn]:not([data-pnab]) .ct .ctt .tag:nth-child(1){max-width:260px}
:root[data-pn]:not([data-pnab]) .ct .ctt .tag:nth-child(6){font-size:var(--t1);padding:0 6px}
/* 16/10 (padrão visual, itens 3 e 6): CLIENTES com a largura toda volta a ser a TABELA de 7 colunas, em linhas baixas — o
   cartão de duas linhas é para a coluna estreita ao lado do painel aberto (e para o celular, que tem a cópia própria) */
:root[data-pn]:not([data-pnab]) .wrap table.clt{display:table;width:100%;table-layout:fixed}
:root[data-pn]:not([data-pnab]) .wrap table.clt thead{display:table-header-group}
:root[data-pn]:not([data-pnab]) .wrap table.clt tbody{display:table-row-group}
:root[data-pn]:not([data-pnab]) .wrap table.clt tr{display:table-row;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
:root[data-pn]:not([data-pnab]) .wrap table.clt tbody tr:hover td{background:var(--acao-fundo)}
:root[data-pn]:not([data-pnab]) .wrap table.clt :is(th,td){display:table-cell;padding:5px 8px;border-bottom:1px solid var(--borda-fina);white-space:normal;vertical-align:middle}
:root[data-pn]:not([data-pnab]) .wrap table.clt th{font-size:var(--t1);white-space:nowrap}
:root[data-pn]:not([data-pnab]) .wrap table.clt th:nth-child(2),:root[data-pn]:not([data-pnab]) .wrap table.clt td:nth-child(2){width:32%}
:root[data-pn]:not([data-pnab]) .wrap table.clt td.cli a.abre{display:flex;align-items:baseline;gap:8px;min-width:0;max-width:100%;min-height:0;color:var(--acao)}
:root[data-pn]:not([data-pnab]) .wrap table.clt td.cli a.abre .nome{display:block;flex:0 1 auto;min-width:0;font-size:var(--t3)}
:root[data-pn]:not([data-pnab]) .wrap table.clt td.cli .sub{display:block;flex:0 0 auto;max-width:none}
:root[data-pn]:not([data-pnab]) .wrap table.clt td.opo .oposub{display:inline;margin-left:6px}
:root[data-pn]:not([data-pnab]) .wrap table.clt :is(td.ult,td.opo){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-pn]:not([data-pnab]) .wrap table.clt td.ult :is(.ultt,.ultd){display:inline}
/* 16/10 (padrão visual, item 1, dono: "não deveria ser em uma linha só?"): o cabeçalho de Oportunidades com a largura toda —
   linha 1: título e contagem à esquerda, Ordenar · Minhas tarefas · Quadro · Selecionar · + oportunidade à direita;
   linha 2: os estados, como abas da lista. Ao lado do painel aberto continua o desenho da coluna estreita. */
:root[data-pn]:not([data-pnab]) .wrap .card:has(>.lscols)>*{order:6}
:root[data-pn]:not([data-pnab]) .wrap .card:has(>.lscols)>.lsestado{order:5}
:root[data-pn]:not([data-pnab]) .wrap .card:has(>.lscols)>.cabtopo>.cabesq{order:1;flex:1 1 auto;width:auto}
:root[data-pn]:not([data-pnab]) .wrap .card:has(>.lscols)>.cabtopo>.cabdir{order:2;flex:0 0 auto;flex-wrap:nowrap;margin-left:auto}
:root[data-pn]:not([data-pnab]) .wrap .card:has(>.lscols)>.cabtopo>.pnest{display:contents}
:root[data-pn]:not([data-pnab]) .wrap .card:has(>.lscols)>.cabtopo>.pnest>a:is(.b-discreto,.b-secundario){order:3;flex:0 0 auto}
:root[data-pn]:not([data-pnab]) .wrap .card:has(>.lscols)>.cabtopo>.pnest::before{content:'';order:4;flex:1 0 100%;height:0}
:root[data-pn]:not([data-pnab]) .wrap .card:has(>.lscols)>.cabtopo>.pnest>.qseg{order:4;flex:0 0 auto}
/* 16/10 (padrão visual, item 1): PROPOSTAS com a largura toda — título e total à esquerda, Nova proposta à direita na
   mesma linha; os recortes (funil, minhas/da equipe) descem para a linha de baixo */
/* 16/10: o cabeçalho de página volta a ser LINHA com o painel fechado (a regra de coluna é para a coluna estreita) */
:root[data-pn]:not([data-pnab]) .wrap .cabtopo{flex-direction:row;flex-wrap:wrap;align-items:center}
:root[data-pn]:not([data-pnab]) .wrap .cabtopo>.cabesq{flex:1 1 0;width:auto;min-width:min(280px,100%)}
:root[data-pn]:not([data-pnab]) .wrap .cabtopo>.cabdir{flex:0 0 auto;width:auto;margin-left:auto}
:root[data-pn]:not([data-pnab]) .wrap .pp .ctopo .cabesq{flex:1 1 0;width:auto;min-width:0;order:1}
:root[data-pn]:not([data-pnab]) .wrap .pp .ctopo .cabdir{order:2;margin-left:auto}
:root[data-pn]:not([data-pnab]) .wrap .pp .ctopo .ppchips{order:3;flex:1 1 100%}
}

table.dashtb{width:100%;border-collapse:collapse;font-size:var(--t2);table-layout:fixed}
table.dashtb td{overflow:hidden;text-overflow:ellipsis}
table.dashtb .dmk{width:58px} table.dashtb:has(.selcx) .dmk{width:84px} table.dashtb th:nth-child(2){width:21%} table.dashtb .dc-rep{width:11%} table.dashtb .dc-et{width:15%}
table.dashtb .dc-dias{width:84px} table.dashtb .dc-prop{width:9%} table.dashtb .dval{width:118px} table.dashtb .dc-rev{width:44px}
table.dashtb .dc-urev{width:74px} table.dashtb .dprox{width:96px} table.dashtb .dsc{width:64px}
:root[data-pnab] table.dashtb th:nth-child(2){width:auto}
table.dashtb th{position:sticky;top:0;background:var(--superficie);z-index:2;text-align:left;font:600 var(--t1) var(--fonte);text-transform:uppercase;letter-spacing:.04em;color:var(--secundario);padding:8px 8px;border-bottom:1px solid var(--borda-cartao);white-space:nowrap}
table.dashtb th.num,table.dashtb td.num{text-align:right}
table.dashtb th a.dord{color:inherit;text-decoration:none} table.dashtb th a.dord.on{color:var(--acao)}
table.dashtb td{padding:5px 8px;border-bottom:1px solid var(--borda-fina);vertical-align:middle}
table.dashtb tbody tr:hover{background:var(--acao-fundo)}
table.dashtb td.dcli a.abre{font-weight:600;color:var(--acao);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){ table.dashtb td.dcli a.abre{min-height:0;line-height:1.4} }   /* 16/10: o piso de toque deixava o nome no alto da linha */
table.dashtb td.dcli .fchm{display:flex;gap:6px;margin-top:2px;font-size:var(--t1)}
table.dashtb td.dc-et{white-space:nowrap}
table.dashtb td.dc-rep{white-space:nowrap}
table.dashtb td.dc-dias b{font-weight:500} table.dashtb td.dc-dias small{display:none}   /* 16/10: linha de 32 px (padrão, item 3); o tempo no estágio vai para a dica da célula */
table.dashtb td.dc-prop{white-space:nowrap}
table.dashtb td.dval{white-space:nowrap;font-weight:500}
table.dashtb .rv1{color:var(--alerta)} table.dashtb .rv2{color:var(--erro-texto)}
table.dashtb td.dmk{white-space:nowrap;width:1%}
.mkb2{background:none;border:0;padding:2px;cursor:pointer;color:var(--borda-campo);display:inline-flex;vertical-align:middle}
.mkb2 svg{width:16px;height:16px} .mkb2:hover{color:var(--secundario)} .mkb2.on{color:var(--alerta)} .mkb2.ww.on{color:var(--erro-texto)}
:root[data-pnab] table.dashtb :is(.dc-rep,.dc-et,.dc-dias,.dc-prop,.dc-rev,.dc-urev){display:none}
.mkf{display:none}
/* 01/10 — Tarefas ao lado do painel: a tarefa em cima, o cliente/oportunidade embaixo (era uma linha cortada nos dois) */
:root[data-pnab] .tf.fk .corpo{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden}
:root[data-pnab] .tf.fk .fkl1{min-width:0;overflow:hidden}
:root[data-pn] .tf.fk .fkac{position:relative;z-index:1}
:root[data-pnab] .tf.fk .fkl1 .tit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-pnab] .tf.fk .fkl2{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--secundario);font-size:var(--t1);margin:0}
:root[data-pnab] .tf.fk{min-height:48px;align-items:center}
/* na lista inteira, o cliente ganha a coluna do meio (a tarefa à esquerda, o vínculo à direita, alinhados) */
:root[data-pn]:not([data-pnab]) .tf.fk .corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 16px;align-items:center;min-width:0;overflow:hidden}
:root[data-pn]:not([data-pnab]) .tf.fk .fkl2{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.dashtb .dsub{display:none}
/* 01/10 — Pedidos de venda / Aprovação financeira na mesma régua (aguardando.mjs) */
table.pvtb .pvn{width:110px} table.pvtb th.pvcl{width:24%} table.pvtb .pvv{width:120px} table.pvtb .pvsit{width:170px}
table.pvtb td.pvcl a.abre{font-weight:600;color:var(--acao);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.pvtb td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-pnab] table.dashtb .dc-x{display:none}
/* 01/10 — Propostas em tabela (painel-propostas.mjs): as etapas da proposta viram pílulas que filtram */
.pcols2{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 10px;align-items:center}
.pcols2 .pcol{text-decoration:none;color:var(--texto);border:1px solid var(--borda-campo);background:var(--superficie);padding:2px 9px;border-radius:999px;font-size:var(--t2)}
.pcols2 .pcol b{margin-left:4px} .pcols2 .pcol.on{background:var(--acao);color:var(--sobre-acao);border-color:var(--acao)} .pcols2 .pcol.on b{color:var(--sobre-acao)}
table.pptb .ppcoln{width:170px} table.pptb .ppnum{width:90px} table.pptb th.ppcli{width:calc(100% - 956px)} table.pptb .ppdias{width:64px}
table.pptb td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.pptb td.ppcli a.abre{font-weight:600;color:var(--acao);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis}
table.pptb .ppdias.mau{color:var(--erro-texto);font-weight:600}
/* 10/10 (dono): o link da oportunidade mora embaixo do cliente (a coluna saiu); "a assumir" em cinza; as pílulas de quem monta */
table.pptb td.ppcli .ppopo{display:block;font-size:var(--t1);color:var(--secundario);overflow:hidden;text-overflow:ellipsis} table.pptb td.ppcli .ppopo a{color:var(--secundario)}
:root[data-pnab] table.pptb td.ppcli .ppopo{display:none}
table.pptb .ppaa{color:var(--secundario);font-style:italic}
/* 10/10 (dono: "em telas menores vai ficar encavalado?"): as colunas de gente têm duas linhas (a de baixo pequena, cinza);
   a Situação, abaixo de 1300 px, desce para a linha da oportunidade e a coluna some */
table.pptb .ppcom{width:170px} table.pptb .ppquem{width:150px} table.pptb .ppsit{width:120px}
table.pptb td.ppcom>*,table.pptb td.ppquem>*{display:block;overflow:hidden;text-overflow:ellipsis}
table.pptb td.ppcom small,table.pptb td.ppquem small{font-size:var(--t1);color:var(--secundario)}
table.pptb .ppsitin{display:none}
table.pptb .ppval{width:96px} table.pptb .ppmarg{width:96px}
.pcols2.ppqms{margin-top:-4px;align-items:center} .pcols2 .ppqmrot{font-size:var(--t1);color:var(--secundario);text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
table.pptb .pcolt{font-size:var(--t1)}
/* 05/10 — a ação da linha (Assumir / Marcar enviada / Confirmar recebimento / Editar…): botão compacto, à direita, sem cortar */
table.pptb .ppac{width:170px;text-align:right} table.pptb th.ppnum{width:90px}   /* 05/10: a regra geral 'th:nth-child(2){21%}' do dashtb caía no Nº (380 px) e a ação, com 1% em layout fixo, saía da tela */ table.pptb td.ppac form{display:inline;margin:0}
table.pptb td.ppac :is(.b-primario,.b-secundario),:root:not([data-pn]) table.pptb td.ppac :is(.b-primario,.b-secundario){padding:4px 10px;min-height:0;font-size:var(--t2);white-space:nowrap}
table.pptb tbody.ppgrp tr.ppgh th{background:var(--fundo);text-align:left;padding:10px 8px 6px;border-bottom:2px solid var(--acao);font:600 var(--t2) var(--fonte);text-transform:none;letter-spacing:0;color:var(--texto);position:static}
table.pptb tbody.ppgrp tr.ppgh th b{margin-left:6px;color:var(--acao)} table.pptb tbody.ppgrp tr.ppgh th em{font-style:normal;color:var(--secundario);font-weight:400}
/* até 1500 px (o notebook de 1366 apertava o cliente com a Situação). Medido em 1200 px (área de 932 px): 676 px fixos deixam ~256 px ao cliente; a Ação fica em 170 (o "Confirmar recebimento" tem 157) */
@media (max-width:1500px){table.pptb .ppsit{width:0;padding:0;border-left:0;border-right:0;visibility:hidden;overflow:hidden} table.pptb .ppsitin{display:inline}   /* width:0 — no layout fixo a coluna escondida guardava os 120 px */
  table.pptb th.ppcli{width:calc(100% - 716px)} table.pptb th.ppnum{width:84px}   /* 16/10: o cliente leva EXATAMENTE a sobra (84+120+110+48+88+96+170); 100% estourava a tela e auto deixava buraco */ table.pptb .ppcom{width:120px} table.pptb .ppquem{width:110px}
  table.pptb .ppdias{width:48px} table.pptb .ppval{width:88px} table.pptb .ppmarg{width:96px}}
table.pptb.agrup .ppcoln{width:0;padding:0;visibility:hidden;overflow:hidden}   /* 16/10: largura zero em vez de display:none — a célula que some desloca o colspan do título da etapa e deixa coluna fantasma à direita */
:root[data-pnab] table.pptb .ppcoln,:root[data-pnab] table.pptb .ppnum{display:none}
/* 01/10: a faixa do grupo atravessa as colunas escondidas — com layout fixo elas guardavam largura e o cliente virava "LANG…" */
:root[data-pnab] table.pptb{table-layout:auto} :root[data-pnab] table.pptb th.ppcli,:root[data-pnab] table.pptb td.ppcli{width:100%;max-width:0}
:root[data-pnab] table.pptb td.ppcli a.abre{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
:root[data-pnab] table.pvtb .pvv,:root[data-pnab] table.pvtb .pvsit{display:none}
:root[data-pnab] table.pvtb th.pvcl{width:auto}
:root form.agfiltros.pvfaixa{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
:root form.agfiltros.pvfaixa>*{width:auto!important;flex:0 1 auto!important}
:root form.agfiltros.pvfaixa input[type=search]{flex:0 1 280px!important;width:280px!important}
:root form.agfiltros.pvfaixa select{max-width:220px}
:root[data-pnab] form.agfiltros.pvfaixa input[type=search]{flex:1 1 100%!important;width:100%!important}
.pvsitt{display:inline-block;padding:1px 8px;border-radius:999px;font-size:var(--t1);font-weight:500;background:var(--fundo);border:1px solid var(--borda-fina);color:var(--texto)}
.pvsitt.mau{color:var(--erro-texto);border-color:var(--erro-texto)} .pvsitt.ok{color:var(--ok-texto);border-color:var(--ok-texto)}
/* 01/10 (dono: "arruma esse layout... o que fizermos aqui iremos replicar para as outras"): o cabeçalho numa linha */
.cabtopo.dtopo{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px}
.cabtopo.dtopo .cabesq{display:flex;align-items:baseline;gap:10px;flex:0 1 auto}
.cabtopo.dtopo .cabsub{margin:0}
.cabtopo.dtopo .qseg{order:2}
.cabtopo.dtopo .cabdir{order:3;margin-left:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
.dmeio .lhfil{margin:0 0 6px}
.dmeio .lhfil>summary.lhfils{display:none}
:root .dmeio .lhfil{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
:root .dmeio .lhfil[open]::details-content{display:contents}
/* 16/10 (padrão visual, item 5): UMA linha — a busca leva o dobro, os seletores dividem o resto (encolhem com reticências),
   Mais filtros fecha a linha; o Filtrar some porque trocar um seletor já filtra (Enter na busca também) */
:root .dmeio .lhfil form.fdash{display:flex!important;flex-direction:row!important;flex-wrap:nowrap;gap:6px;align-items:center;flex:1 1 0;min-width:0;width:auto!important;margin:0}
:root .dmeio .lhfil form.fdash>*{width:auto!important;min-width:0}
:root .dmeio .lhfil form.fdash .fbusca{flex:2 1 0!important;min-width:150px}
:root .dmeio .lhfil form.fdash select{flex:1 1 0!important;max-width:none!important;min-width:96px;text-overflow:ellipsis}
:root .dmeio .lhfil .lsav{display:inline-block;margin:0;flex:0 0 auto}
:root .dmeio .lhfil .lsav>summary{min-height:32px;padding:0 10px;white-space:nowrap}
:root .dmeio .lhfil .lsav>summary .lsavres{display:none}
@media (max-width:1100px){ :root .dmeio .lhfil form.fdash{flex-wrap:wrap} :root .dmeio .lhfil form.fdash select{flex:1 1 130px!important} }
:root .dmeio .lhfil .fchips{flex:1 1 100%}
.dmeio .lhfil .fchips:empty{display:none}
/* ao lado do painel: os filtros recolhem num resumo (o script do painel tira o open) e a linha vira nome + etapa */
:root[data-pnab] .dmeio .lhfil>summary.lhfils{display:block;cursor:pointer;padding:6px 10px;border:1px solid var(--borda-campo);border-radius:var(--raio-p);font-size:var(--t2);background:var(--superficie)}
:root[data-pnab] .dmeio .lhfil{display:block}
:root[data-pnab] .dmeio .lhfil form.fdash .fbusca{flex:1 1 100%!important;width:100%!important}
:root[data-pnab] .dmeio .lhfil form.fdash select{flex:1 1 45%!important;max-width:none!important}
:root[data-pnab] .cabtopo.dtopo .cabdir{margin-left:0}
:root[data-pnab] table.dashtb .dsub{display:block;color:var(--secundario);font-size:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-pnab] table.dashtb td.dcli a.abre{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
:root[data-pnab] table.dashtb .dmk{width:30px} :root[data-pnab] table.dashtb .mkb2:not(.on){display:none} :root[data-pnab] table.dashtb .mkb2.on{display:block}
:root[data-pnab] table.dashtb .dval{width:112px} :root[data-pnab] table.dashtb .dprox{width:76px} :root[data-pnab] table.dashtb .dsc{width:44px}
:root[data-pnab] table.dashtb td.dprox{white-space:nowrap}   /* 16/10: "sem tarefa" quebrava em duas linhas e o valor saía cortado na coluna estreita */
:root[data-pnab] table.dashtb td{padding:6px 6px}


.iaesp{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:var(--raio);background:var(--acao);color:var(--sobre-acao);box-shadow:0 6px 24px rgba(0,0,0,.25);font-size:var(--t3)}
.iaesp span{opacity:.85;font-size:var(--t2)}
.iaesp i{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;animation:iagira .8s linear infinite;flex:none}
@keyframes iagira{to{transform:rotate(360deg)}}
@media (max-width:759px){ .iaesp{left:12px;right:12px;transform:none;bottom:84px;flex-wrap:wrap} }
.flemb{margin:0 0 8px;padding:6px 12px;border-radius:var(--raio-p);background:var(--info-fundo);color:var(--texto);font-size:var(--t2)}
.flemb a{font-weight:600;color:var(--acao)}
.tbusca{position:relative}
.trec{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;padding:4px;
  background:var(--superficie);border:1px solid var(--borda-cartao);border-radius:var(--raio-p);box-shadow:var(--sombra)}
.tbusca:focus-within .trec,.trec:hover{display:block}
.tbusca:has(input:not(:placeholder-shown)) .trec{display:none}
.trc{padding:6px 10px 4px;font-size:var(--t1);color:var(--apagado)}
.trl{display:block;padding:7px 10px;border-radius:var(--raio-p);color:var(--texto);text-decoration:none;line-height:1.3}
.trl:hover,.trl:focus-visible{background:var(--fundo);outline:none}
.trt{display:block;font-weight:600;font-size:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trm{display:block;font-size:var(--t1);color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 21/10 (viso-294) — favoritos: bloco no alto da barra lateral (cores da barra, escura nos dois temas) */
.sfav{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--lado-linha)}
.sfavh{display:flex;align-items:center;gap:6px;min-height:var(--alvo);padding:0 6px 0 10px;font-size:var(--t1);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lado-rotulo);white-space:nowrap;overflow:hidden}
.sfave{color:var(--estrela);letter-spacing:0}
.sfavorg{margin-left:auto;font-size:var(--t1);font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--lado-rotulo);
  text-decoration:none;padding:4px 6px;border-radius:var(--raio-p)}
.sfavorg:hover{background:var(--lado-hover);color:var(--branco);text-decoration:none}
.sfavv{margin:0 10px 4px;padding:8px 10px;border:1px dashed var(--lado-linha2);border-radius:var(--raio-p);color:var(--lado-rotulo);
  font-size:var(--t1);line-height:1.45;white-space:normal}
.sfi span{overflow:hidden;text-overflow:ellipsis}
:root[data-lado=fechado] .sfav .sfi{position:relative}
:root[data-lado=fechado] .sfav .sfi::after{content:'';position:absolute;right:8px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--estrela)}
/* barra de cima (nunca quebra linha — o .top é a régua de 56 px): ESTREITA (padrão, celular incluído) = um botão ☆▾ com
   "Favoritar esta tela" e a lista dentro; ≥1050 px úteis = ☆ solta + 1 atalho + "+N"; ≥1300 px = 3 atalhos */
.top{container:topo/inline-size}
.tfav{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto}
.tfavf{margin:0} .tfavf.fora{display:none}
.top .tfstar.ic{width:32px;height:32px;color:var(--apagado)} .top .tfstar.ic svg{width:18px;height:18px}
.top .tfstar.ic:hover{color:var(--acao)} .top .tfstar.ic.on{color:var(--estrela);border-color:var(--cuidado-borda);background:var(--cuidado-fundo)}
.tfch{display:flex;gap:6px;min-width:0}
.tfa{display:none;align-items:center;gap:5px;max-width:160px;min-width:0;padding:3px 10px;border:1px solid var(--borda-cartao);
  border-radius:var(--raio-chip);font-size:var(--t2);font-weight:500;color:var(--acao);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfa:hover{background:var(--acao-fundo);text-decoration:none}
.tfa.aqui{background:var(--acao-fraco);border-color:var(--acao-fraco)}
.tfe{color:var(--estrela)}
.tfmais{position:relative;flex:0 0 auto}
.tfmais>summary{list-style:none;cursor:pointer;display:flex;align-items:center;height:32px;padding:0 4px;border:1px solid var(--borda-cartao);
  border-radius:var(--raio-p);background:var(--superficie);color:var(--apagado);font-size:var(--t2);font-weight:500;white-space:nowrap}
.tfmais>summary::-webkit-details-marker{display:none}
.tfmais>summary:hover{border-color:var(--acao);color:var(--acao)}
.tfmais.on>summary{color:var(--estrela);border-color:var(--cuidado-borda);background:var(--cuidado-fundo)}
.tfmais .m0{display:inline-flex;align-items:center;gap:1px} .tfmais .m0 svg{width:18px;height:18px} .m0s{font-size:var(--t1)}
.tfmais .m1,.tfmais .m3{display:none}
@media (pointer:coarse),(hover:none){ .top .tfstar.ic{width:44px;height:44px} .tfmais>summary{height:44px;padding:0 8px} }
.tfml{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:240px;max-width:320px;padding:4px;display:flex;flex-direction:column;
  background:var(--superficie);border:1px solid var(--borda-cartao);border-radius:var(--raio-p);box-shadow:var(--sombra)}
.tfml a{display:flex;gap:6px;padding:7px 10px;border-radius:var(--raio-p);font-size:var(--t2);color:var(--texto);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfml a:hover{background:var(--acao-fundo);text-decoration:none}
.tfml a.aqui{font-weight:600}
.tfml .tforg{color:var(--secundario);border-top:1px solid var(--borda-fina);margin-top:2px}
.tfml .tffav{display:flex;align-items:center;gap:6px;width:100%;justify-content:flex-start;margin-bottom:2px}
.tfml .tffav svg{width:16px;height:16px;color:var(--estrela)}
.tfvz{margin:4px 10px 6px;font-size:var(--t1);color:var(--apagado)}
@container topo (min-width:1050px){
  .tfavf.fora{display:block} .tfavf.dentro{display:none}
  .tfa.i1{display:inline-flex}
  .tfmais>summary,.tfmais.on>summary{height:auto;padding:3px 10px;border:1px dashed var(--borda-campo);border-radius:var(--raio-chip);background:none;color:var(--secundario)}
  .tfmais .m0{display:none} .tfmais .m1{display:inline}
  .tfml a.i1{display:none} .tfmais.n0,.tfmais.n1{display:none}
}
@container topo (min-width:1300px){
  .tfa.i2,.tfa.i3{display:inline-flex}
  .tfmais .m1{display:none} .tfmais .m3{display:inline}
  .tfml a.i2,.tfml a.i3{display:none} .tfmais.n2,.tfmais.n3{display:none}
}
@media (max-width:759px){ .tfch{display:none!important} }


:root{--cor-marinho:var(--marinho);--cor-grafite:#1E2228;--cor-carvao:#111214;--cor-royal:#143A7B;--cor-petroleo:#0C3A3D;--cor-floresta:#143823;--cor-vinho:#4A1427;--cor-ameixa:#2D1B4C;--cor-terra:#3A2719;
--lado-ok:#7CE8A6;--lado-cuidado:#FFC24D;--topo-campo:rgba(255,255,255,.12);
--pg-texto:var(--texto);--pg-secundario:var(--secundario);--pg-apagado:var(--apagado);--pg-borda-cartao:var(--borda-cartao);
--pg-borda-campo:var(--borda-campo);--pg-superficie:var(--superficie);--pg-fundo:var(--fundo);--pg-acao:var(--acao);
--pg-acao-fundo:var(--acao-fundo);--pg-sobre-acao:var(--sobre-acao);--pg-sucesso:var(--sucesso);--pg-cuidado-texto:var(--cuidado-texto)}
:root[data-cor=grafite]{--lado-fundo:#1E2228;--lado-texto:#C3C9D2;--lado-rotulo:#8E97A4;--lado-ativo:#4DD5FF;--lado-aqui:color-mix(in srgb,#4DD5FF 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#4DD5FF 45%,transparent)}
:root[data-cor=carvao]{--lado-fundo:#111214;--lado-texto:#C2C4C8;--lado-rotulo:#8A8D93;--lado-ativo:#FFC24D;--lado-aqui:color-mix(in srgb,#FFC24D 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#FFC24D 45%,transparent)}
:root[data-cor=royal]{--lado-fundo:#143A7B;--lado-texto:#C6D5F1;--lado-rotulo:#9AB2DE;--lado-ativo:#7FE6FF;--lado-aqui:color-mix(in srgb,#7FE6FF 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#7FE6FF 45%,transparent)}
:root[data-cor=petroleo]{--lado-fundo:#0C3A3D;--lado-texto:#B3D5D3;--lado-rotulo:#80B0AD;--lado-ativo:#5EEAD4;--lado-aqui:color-mix(in srgb,#5EEAD4 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#5EEAD4 45%,transparent)}
:root[data-cor=floresta]{--lado-fundo:#143823;--lado-texto:#B6D6C1;--lado-rotulo:#84AE93;--lado-ativo:#7CE8A6;--lado-aqui:color-mix(in srgb,#7CE8A6 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#7CE8A6 45%,transparent)}
:root[data-cor=vinho]{--lado-fundo:#4A1427;--lado-texto:#E5C2CE;--lado-rotulo:#C690A3;--lado-ativo:#FFB4C9;--lado-aqui:color-mix(in srgb,#FFB4C9 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#FFB4C9 45%,transparent)}
:root[data-cor=ameixa]{--lado-fundo:#2D1B4C;--lado-texto:#CEC3E6;--lado-rotulo:#A393C9;--lado-ativo:#C9B8FF;--lado-aqui:color-mix(in srgb,#C9B8FF 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#C9B8FF 45%,transparent)}
:root[data-cor=terra]{--lado-fundo:#3A2719;--lado-texto:#E1CDBB;--lado-rotulo:#B79D86;--lado-ativo:#FFC27D;--lado-aqui:color-mix(in srgb,#FFC27D 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#FFC27D 45%,transparent)}
:root[data-cor=vercomo]{--lado-fundo:#6A320C;--lado-texto:#F3D5BF;--lado-rotulo:#E0AE8A;--lado-ativo:#FFB868;--lado-aqui:color-mix(in srgb,#FFB868 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#FFB868 45%,transparent)}
:root[data-cor=ensaio]{--lado-fundo:#6B1414;--lado-texto:#F4CACA;--lado-rotulo:#DE9494;--lado-ativo:#FFB0B0;--lado-aqui:color-mix(in srgb,#FFB0B0 12%,transparent);--anel-foco:0 0 0 3px color-mix(in srgb,#FFB0B0 45%,transparent)}
@media (min-width:760px){
:root:not([data-lado=sem]) .top{background:var(--lado-fundo);border-bottom-color:var(--lado-linha);
  --texto:var(--branco);--secundario:var(--lado-texto);--apagado:var(--lado-rotulo);--borda-cartao:var(--linha-sobre-marinho);
  --borda-campo:var(--linha-sobre-marinho);--superficie:var(--topo-campo);--fundo:var(--lado-hover);--acao:var(--lado-ativo);
  --acao-fundo:var(--lado-hover);--sobre-acao:var(--lado-fundo);--sucesso:var(--lado-ok);--cuidado-texto:var(--lado-cuidado)}
:root:not([data-lado=sem]) .top :is(.trec,.tfml,.carimbocorpo,.tapcorpo,.carimbo .cuidado){--texto:var(--pg-texto);--secundario:var(--pg-secundario);
  --apagado:var(--pg-apagado);--borda-cartao:var(--pg-borda-cartao);--borda-campo:var(--pg-borda-campo);--superficie:var(--pg-superficie);
  --fundo:var(--pg-fundo);--acao:var(--pg-acao);--acao-fundo:var(--pg-acao-fundo);--sobre-acao:var(--pg-sobre-acao);
  --sucesso:var(--pg-sucesso);--cuidado-texto:var(--pg-cuidado-texto)}
}
.tapar{position:relative;display:flex}
.tapar>summary{list-style:none}
.tapar>summary::-webkit-details-marker{display:none}
.tapar[open]>summary.ic{border-color:var(--acao);color:var(--texto)}
.tapcorpo{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:280px;box-sizing:border-box;padding:12px 14px 14px;
  display:flex;flex-direction:column;gap:6px;background:var(--superficie);color:var(--texto);border:1px solid var(--borda-cartao);
  border-radius:var(--raio);box-shadow:var(--sombra);text-align:left}
.tapcorpo form{margin:0}
.aptit{margin:0 0 2px;font-size:var(--t5);font-weight:600;color:var(--texto)}
.aprot{margin:6px 0 0;font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--apagado)}
.apseg{display:flex;gap:6px}
.apseg .b-discreto{flex:1 1 0;min-height:32px;padding:0 6px;font-size:var(--t2)}
.apseg .b-discreto[aria-pressed=true]{background:var(--acao-fundo);border-color:var(--acao);color:var(--texto);font-weight:600}
.apcores{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tapar .tapcorpo .apcor{position:relative;width:100%;min-height:0;height:auto;aspect-ratio:1;padding:0;border-radius:50%;border:2px solid var(--superficie);
  box-shadow:0 0 0 1px var(--borda-cartao)}
.tapar .tapcorpo .apcor:hover{box-shadow:0 0 0 2px var(--secundario)}
.tapar .tapcorpo .apcor[aria-pressed=true]{box-shadow:0 0 0 2px var(--texto)}
.tapar .tapcorpo .apcor[aria-pressed=true]::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:var(--branco);font-size:var(--t5);font-weight:600}
.tapar .tapcorpo .apc-marinho{background:var(--cor-marinho)}
.tapar .tapcorpo .apc-grafite{background:var(--cor-grafite)}
.tapar .tapcorpo .apc-carvao{background:var(--cor-carvao)}
.tapar .tapcorpo .apc-royal{background:var(--cor-royal)}
.tapar .tapcorpo .apc-petroleo{background:var(--cor-petroleo)}
.tapar .tapcorpo .apc-floresta{background:var(--cor-floresta)}
.tapar .tapcorpo .apc-vinho{background:var(--cor-vinho)}
.tapar .tapcorpo .apc-ameixa{background:var(--cor-ameixa)}
.tapar .tapcorpo .apc-terra{background:var(--cor-terra)}
.apnota{margin:4px 0 0;font-size:var(--t1);line-height:1.4;color:var(--apagado)}
.sapar{display:block}
.sapar>summary.sitem{cursor:pointer}
.sapar .aptit{display:none}
.tapar .tapcorpo :is(.apcor,.apseg .b-discreto){min-width:0}
.sapar .apcores{gap:6px}
.sapar .apseg{gap:4px}
.tapar.sapar .apseg .b-discreto{padding:0 4px;font-size:var(--t1)}
.sapar .tapcorpo{position:static;width:auto;margin:2px 0 8px;padding:10px;background:var(--lado-hover);border:1px solid var(--lado-linha);
  box-shadow:none;--texto:var(--branco);--secundario:var(--lado-texto);--apagado:var(--lado-rotulo);--borda-cartao:var(--lado-linha2);
  --superficie:var(--lado-fundo);--acao:var(--lado-ativo);--acao-fundo:var(--lado-aqui);--fundo:var(--lado-hover)}
.sapar .apseg .b-discreto{background:transparent;color:var(--lado-texto);border-color:var(--lado-linha2)}
.sapar .apseg .b-discreto[aria-pressed=true]{background:var(--lado-aqui);color:var(--branco);border-color:var(--lado-ativo)}