/* ============================================================
   PORTAL TIBATRON — estilo
   ------------------------------------------------------------
   Tema ESCURO, tirado do tibatron.com.br em 27/07/2026 — as cores
   foram copiadas variável por variável do CSS do site, não do olho.

   AS QUATRO CORES DA MARCA
     PRETO    #0A0611  o fundo de tudo
     ROXO     #B45FE0  navegação, marca, o que está ativo
     AMARELO  #FFD100  atenção e destaque — pouco, senão perde força
     VERDE    #25D366  o que deu certo, e WhatsApp

   Fontes: Archivo (título) · Inter (texto) · IBM Plex Mono (número)

   REGRA DE OURO: cor não entra chumbada no CSS. Tudo sai de token
   daqui. Foi assim que deu para virar o portal do claro para o
   escuro sem caçar 167 hexadecimais espalhados.

   No escuro o papel dos roxos inverte: no claro o roxo forte era o
   de destaque; aqui quem destaca é o CLARO, porque roxo escuro
   sobre fundo escuro não se lê.
   ============================================================ */

:root{
  /* marca — no escuro, --roxo é o que aparece, não o mais escuro */
  --roxo:#B45FE0;
  --roxo-escuro:#8B2FC9;
  --roxo-medio:#C77FEA;
  --roxo-claro:#D9A6FF;
  --roxo-fundo:#6A0DAD;        /* o roxo do INPI, para preenchimento */
  --roxo-veu:rgba(139,47,201,.16);   /* site: --arc-soft */
  --lavanda:rgba(180,95,224,.15);

  --amarelo:#FFD100;                 /* site: --spark */
  --amarelo-veu:rgba(255,209,0,.13);
  --amarelo-tinta:#FFE566;

  --breu:#2B0546;
  --breu-2:#1C0330;

  /* superfícies — os valores exatos do site */
  --fundo:#0A0611;             /* site: --void  */
  --papel:#140C20;             /* site: --steel */
  --papel-2:#1B0F2C;           /* site: --plate */
  --papel-3:#2C1B42;           /* site: --edge  */
  --linha:#2C1B42;             /* site: --edge  */
  --linha-forte:#3A2456;

  /* texto — os três tons do site */
  --tinta:#F1EAF8;             /* site: --ink   */
  --tinta-2:#B199C7;           /* site: --ink-2 */
  --tinta-3:#7A6491;           /* site: --ink-3 */

  /* sinal — no escuro o fundo pálido vira véu translúcido */
  --verde:#25D366;             /* site: --wa, o verde do WhatsApp */
  --verde-claro:rgba(37,211,102,.16);
  --verde-tinta:#7BE9A4;
  --ambar:#F59E0B;
  --ambar-claro:rgba(245,158,11,.16);
  --ambar-tinta:#FCD34D;
  --vermelho:#F87171;
  --vermelho-claro:rgba(248,113,113,.16);
  --vermelho-tinta:#FCA5A5;
  /* --azul e --azul-claro sairam em 28/07/2026. Azul nao entra no
     portal: a marca tem quatro cores. Token disponivel e convite a
     usar de novo sem pensar. */

  --r:14px;
  --r-p:10px;
  --sombra:0 1px 2px rgba(0,0,0,.30), 0 6px 20px rgba(0,0,0,.34);
  --sombra-alta:0 10px 40px rgba(0,0,0,.52);
  --lateral-l:246px;
  --barra-a:62px;
  --transicao:.22s cubic-bezier(.22,.68,.28,1);

  --branco:#FFFFFF;   /* so para texto sobre a barra escura */
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--fundo);
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* título com a fonte de display do site */
h1,h2,h3,h4,.botao{
  font-family:'Archivo','Inter',system-ui,sans-serif;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
input,select,textarea{border:0;background:none}
svg{display:block}
.oculto{display:none !important}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;font-variant-ligatures:none}

:focus{outline:none}
:focus-visible{outline:3px solid var(--roxo-claro);outline-offset:2px;border-radius:8px}

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

/* ============================================================
   ENTRADA
   Fundo = mesa da máquina: grade de coordenadas + feixe passando.
   ============================================================ */
.entrada{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:24px;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 80% -20%, var(--roxo-fundo) 0%, transparent 62%),
    radial-gradient(900px 600px at -10% 120%, var(--roxo-escuro) 0%, transparent 55%),
    linear-gradient(160deg,#1C0330 0%,#2B0546 45%,var(--roxo-escuro) 100%);
}
.entrada-grade{
  position:absolute;inset:-2px;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(180,95,224,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,95,224,.16) 1px, transparent 1px),
    linear-gradient(rgba(180,95,224,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,95,224,.07) 1px, transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
  animation:desliza-grade 32s linear infinite;
}
@keyframes desliza-grade{to{background-position:120px 120px,120px 120px,24px 24px,24px 24px}}

.entrada-feixe{
  position:absolute;left:0;right:0;height:2px;top:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--roxo-claro) 18%,var(--papel) 50%,var(--roxo-claro) 82%,transparent);
  box-shadow:0 0 22px 4px rgba(180,95,224,.55);
  opacity:0;
  animation:passa-feixe 7.5s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes passa-feixe{
  0%{top:8%;opacity:0}
  8%{opacity:.85}
  50%{opacity:.85}
  62%{top:92%;opacity:0}
  100%{top:92%;opacity:0}
}

.entrada-caixa{
  position:relative;width:100%;max-width:392px;
  animation:sobe .55s cubic-bezier(.2,.75,.3,1) both;
}
@keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.entrada-logo{height:38px;width:auto;margin-bottom:14px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.3))}

/* usado só se o logo do site não carregar */
.marca-escrita{
  font-weight:900;letter-spacing:.17em;color:var(--branco);font-size:19px;line-height:1;
}
.marca-escrita.grande{font-size:31px;margin-bottom:14px}
.entrada-linha{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--roxo-claro);margin-bottom:26px;
}

/* O cartão da entrada ficou BRANCO quando o portal virou escuro — era o
   último resto do tema claro, e logo na primeira tela que alguém vê. */
.cartao-entrada{
  background:rgba(23,14,36,.94);
  backdrop-filter:blur(12px);
  border:1px solid var(--linha-forte);
  border-radius:18px;padding:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(180,95,224,.16);
}

.entrada-rodape{
  margin-top:20px;text-align:center;font-size:11px;color:rgba(255,255,255,.42);
  letter-spacing:.03em;
}

/* ---------- campos ---------- */
.campo{margin-bottom:15px}
.campo label{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-2);margin-bottom:7px;
}
.campo-caixa{
  display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--linha);border-radius:var(--r-p);
  background:var(--papel-2);padding:0 13px;
  transition:border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.campo-caixa:focus-within{
  border-color:var(--roxo);background:var(--papel);
  box-shadow:0 0 0 4px rgba(180,95,224,.18);
}
.campo-icone{color:var(--tinta-3);flex:0 0 auto;display:flex}
.campo-caixa:focus-within .campo-icone{color:var(--roxo)}
.campo-caixa input,.campo-caixa select,.campo-caixa textarea{
  flex:1;min-width:0;padding:12px 0;font-size:15px;
}
.campo-caixa input::placeholder{color:var(--tinta-3)}
.campo-caixa.grande input{font-size:19px;font-weight:700;letter-spacing:.02em;padding:15px 0}
.campo-dica{font-size:11.5px;color:var(--tinta-3);margin-top:6px;line-height:1.45}

.linha-campos{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.linha-campos.tres{grid-template-columns:2fr 1fr 1fr}
.col-cheia{grid-column:1/-1}

/* ---------- botões ---------- */
.botao{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:var(--r-p);
  background:var(--roxo);color:var(--papel);font-weight:700;font-size:14.5px;
  letter-spacing:.01em;overflow:hidden;
  transition:background var(--transicao), transform .12s, box-shadow var(--transicao);
  box-shadow:0 2px 0 var(--roxo-escuro), 0 6px 18px rgba(106,13,173,.22);
}
.botao:hover{background:var(--roxo-medio)}
.botao:active{transform:translateY(2px);box-shadow:0 0 0 var(--roxo-escuro), 0 3px 10px rgba(106,13,173,.2)}
.botao[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.botao-cheio{width:100%}
.botao-grande{padding:15px 22px;font-size:15.5px}
.botao-icone{display:flex}

.botao-claro{
  background:var(--papel);color:var(--roxo);border:1.5px solid var(--linha);
  box-shadow:0 1px 0 var(--linha-forte);
}
.botao-claro:hover{background:var(--lavanda);border-color:var(--roxo-claro)}
.botao-fantasma{background:transparent;color:var(--tinta-2);box-shadow:none;padding:10px 14px}
.botao-fantasma:hover{background:var(--lavanda);color:var(--roxo)}
.botao-verde{background:var(--verde);box-shadow:0 2px 0 var(--verde-tinta), 0 6px 18px rgba(22,163,74,.24)}
.botao-verde:hover{background:var(--verde)}

/* ---------- alertas ---------- */
.alerta{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r-p);font-size:13.5px;line-height:1.5;margin-bottom:15px;
}
.alerta span[data-icone]{flex:0 0 auto;margin-top:1px}
.alerta-erro{background:var(--vermelho-claro);border:1px solid var(--vermelho-tinta);color:var(--vermelho-tinta)}
.alerta-ok{background:var(--verde-claro);border:1px solid var(--verde-tinta);color:var(--verde-tinta)}
.alerta-aviso{background:var(--ambar-claro);border:1px solid var(--ambar-tinta);color:var(--ambar-tinta)}
.alerta-info{background:var(--lavanda);border:1px solid var(--roxo-escuro);color:var(--roxo-claro)}

/* ============================================================
   PORTAL
   ============================================================ */
.portal{display:none}
.portal.ligado{display:block}

/* ---------- barra superior ---------- */
.barra{
  position:fixed;top:0;left:0;right:0;height:var(--barra-a);z-index:60;
  display:flex;align-items:center;gap:14px;padding:0 18px;
  background:linear-gradient(96deg,var(--breu-2) 0%,var(--breu) 42%,var(--roxo-escuro) 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.2), 0 4px 20px rgba(43,5,70,.18);
}
.barra::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--roxo-claro),var(--roxo-medio),var(--roxo-claro));
  opacity:.55;
}
.barra-menu{display:none;color:var(--branco);padding:8px;border-radius:9px}
.barra-menu:hover{background:rgba(255,255,255,.12)}
.barra-logo{height:26px;width:auto}
.barra-divisor{width:1px;height:22px;background:rgba(255,255,255,.2)}
.barra-titulo{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--roxo-claro);
}
.barra-direita{margin-left:auto;display:flex;align-items:center;gap:12px}
.barra-pessoa{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.barra-nome{color:var(--branco);font-size:13.5px;font-weight:700}
.barra-setor{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--roxo-claro);
}
.barra-sair{
  color:var(--roxo-claro);padding:9px;border-radius:9px;border:1px solid rgba(255,255,255,.18);
  transition:background var(--transicao),color var(--transicao);
}
.barra-sair:hover{background:rgba(255,255,255,.14);color:var(--branco)}

/* ---------- lateral ---------- */
.lateral{
  position:fixed;top:var(--barra-a);bottom:0;left:0;width:var(--lateral-l);z-index:50;
  background:var(--papel);border-right:1px solid var(--linha);
  padding:16px 12px 28px;overflow-y:auto;
}
.lateral-grupo{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
  padding:0 12px;margin:20px 0 8px;
}
.lateral-grupo:first-child{margin-top:2px}

.lateral-item{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 12px;border-radius:var(--r-p);text-align:left;
  font-size:14px;font-weight:600;color:var(--tinta);
  transition:background var(--transicao), color var(--transicao);
}
.lateral-item::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:0 3px 3px 0;background:var(--roxo-claro);
  transition:height var(--transicao);
}
.lateral-item:hover{background:var(--lavanda);color:var(--roxo-claro)}
.lateral-item .ic{color:var(--tinta-3);flex:0 0 auto;display:flex;transition:color var(--transicao)}
.lateral-item:hover .ic{color:var(--roxo)}
.lateral-item.aceso{background:var(--roxo);color:var(--papel);box-shadow:0 4px 14px rgba(106,13,173,.28)}
.lateral-item.aceso .ic{color:var(--papel)}
.lateral-item.aceso::before{height:22px}

/* ---------- submenu do setor ----------
   Lista as ferramentas do setor logo abaixo dele. Fechado por padrão;
   abre só o do setor em que a pessoa está. */
.lateral-sub{display:none;margin:2px 0 6px 13px;padding-left:11px;
             border-left:1px solid var(--linha)}
.lateral-sub.aberto{display:block;animation:abre-sub .2s ease both}
@keyframes abre-sub{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.lateral-subitem{
  display:flex;align-items:center;gap:9px;width:100%;min-height:40px;
  padding:7px 10px;border-radius:8px;text-align:left;
  font-size:12.5px;font-weight:600;color:var(--tinta-2);
  transition:background var(--transicao),color var(--transicao);
}
.lateral-subitem:hover{background:var(--lavanda);color:var(--tinta)}
.lateral-subitem .ic{color:var(--tinta-3);flex:0 0 auto;display:flex}
.lateral-subitem:hover .ic{color:var(--roxo)}
.lateral-subitem .nm{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lateral-subitem .led{flex:0 0 auto;width:6px;height:6px}
.lateral-subitem .led::after{display:none}
.lateral-subitem.aceso{background:var(--roxo);color:var(--papel)}
.lateral-subitem.aceso .ic{color:var(--papel)}
/* ============================================================
   O TERCEIRO NÍVEL — as filas dentro de Ordens de Serviço
   ------------------------------------------------------------
   Pedido do Alisson, 03/08/2026: "técnico, subpasta, ordem de
   serviço, subpasta, separação, pronto para envio e instalação".

   Recuo e linha à esquerda, o mesmo desenho do nível de cima — a
   hierarquia se lê sem precisar de rótulo. Fica SEMPRE visível
   enquanto o setor está aberto: esconder até clicar na pasta
   custaria um toque a mais para chegar na Separação, que é a tela
   onde o galpão passa o dia.

   O alvo de toque continua em 40px. Recuar não é encolher — no
   celular, item de menu com 32px de altura vira erro de dedo.
   ============================================================ */
.lateral-neto{margin:1px 0 4px 12px;padding-left:10px;border-left:1px solid var(--linha)}
.lateral-subitem.neto{font-size:12px;font-weight:600;color:var(--tinta-3)}
.lateral-subitem.neto:hover{color:var(--tinta-2)}
.lateral-subitem.neto.aceso{color:var(--papel)}

.lateral-conta{
  margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  font-weight:700;color:var(--tinta-3);
}
.lateral-item.aceso .lateral-conta{color:rgba(255,255,255,.75)}

.veu{
  position:fixed;inset:0;z-index:45;background:rgba(28,3,48,.5);
  opacity:0;pointer-events:none;transition:opacity var(--transicao);
}
.veu.aparece{opacity:1;pointer-events:auto}

/* ---------- área ---------- */
.area{
  margin-left:var(--lateral-l);
  padding:calc(var(--barra-a) + 30px) 34px 70px;
  /* era 1240px e sobrava meia tela vazia em monitor grande.
     Texto corrido continua limitado por max-width nos próprios
     parágrafos — quem ganha largura é tabela, grade e sistema embutido. */
  max-width:1560px;
  animation:entra-area .3s ease both;
}
/* sistema embutido usa a tela toda: o app de dentro tem o próprio
   ponto de quebra e precisa de largura para não virar uma coluna só */
.area:has(.moldura){max-width:none}
@keyframes entra-area{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- cabeçalho de tela ---------- */
.trilha{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--roxo-medio);
}
.trilha .sep{color:var(--tinta-2)}
.topo-tela{margin-bottom:30px}
.topo-tela h1{font-size:31px;font-weight:900;letter-spacing:-.025em;line-height:1.12}
.topo-tela p{margin-top:9px;color:var(--tinta-2);font-size:14.5px;line-height:1.6;max-width:66ch}
.topo-tela .acoes{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- seção ---------- */
.secao{margin-bottom:40px}
.secao-topo{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.secao-topo .marca-ic{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--lavanda);color:var(--roxo);flex:0 0 auto;
}
.secao-topo h2{font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.secao-topo .risco{flex:1;height:1px;background:var(--linha)}
.secao-topo .qtd{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--tinta-3)}

/* ============================================================
   TECLAS DE MÓDULO
   Cada módulo é uma tecla de painel: bisel, LED e varredura
   de laser passando quando o mouse encosta.
   ============================================================ */
.teclas{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:15px}

.tecla{
  position:relative;display:block;width:100%;text-align:left;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
  padding:19px;overflow:hidden;
  box-shadow:0 1px 0 var(--linha-forte);
  transition:transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
  animation:pipoca .42s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes pipoca{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* varredura */
.tecla::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;left:-140px;
  background:linear-gradient(100deg,transparent,rgba(180,95,224,.16),rgba(255,255,255,.5),rgba(180,95,224,.16),transparent);
  transform:skewX(-16deg);pointer-events:none;
}
.tecla.viva:hover{
  transform:translateY(-3px);
  border-color:var(--roxo-claro);
  box-shadow:0 1px 0 var(--linha-forte), var(--sombra-alta);
}
.tecla.viva:hover::after{animation:varre .85s ease-out}
@keyframes varre{to{left:118%}}
.tecla.viva:active{transform:translateY(0);box-shadow:0 1px 0 var(--linha-forte)}
.tecla.morta{opacity:.68;cursor:default}

.tecla-topo{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.tecla-ic{
  display:grid;place-items:center;width:42px;height:42px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(155deg,var(--lavanda),var(--lavanda));
  color:var(--roxo);border:1px solid var(--linha-forte);
  transition:background var(--transicao), color var(--transicao), transform var(--transicao);
}
.tecla.viva:hover .tecla-ic{
  background:linear-gradient(155deg,var(--roxo),var(--roxo-escuro));
  color:var(--branco);transform:scale(1.05) rotate(-3deg);
}
.tecla-cod{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--roxo-medio);background:var(--lavanda);padding:4px 8px;border-radius:6px;
}
.led{width:9px;height:9px;border-radius:50%;margin-left:auto;flex:0 0 auto;position:relative}
.led::after{content:"";position:absolute;inset:-4px;border-radius:50%;opacity:.22}
.led.ativo{background:var(--verde)}
.led.ativo::after{background:var(--verde);animation:pulsa 2.4s ease-in-out infinite}
.led.a_clonar{background:var(--ambar)}
.led.a_clonar::after{background:var(--ambar)}
.led.planejado{background:var(--linha-forte)}
.led.planejado::after{background:var(--linha-forte)}
.led.falhou{background:var(--vermelho)}
.led.falhou::after{background:var(--vermelho);animation:pulsa 1.1s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:.18;transform:scale(1)}50%{opacity:.42;transform:scale(1.25)}}

.tecla h3{font-size:16px;font-weight:800;letter-spacing:-.012em;margin-bottom:6px}
.tecla p{font-size:13px;color:var(--tinta-2);line-height:1.52}
.tecla-base{
  margin-top:15px;padding-top:12px;border-top:1px dashed var(--linha);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.situacao{font-size:11px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;gap:5px}
.situacao.ativo{color:var(--verde)}
.situacao.a_clonar{color:var(--ambar)}
.situacao.planejado{color:var(--tinta-3)}
.situacao.falhou{color:var(--vermelho)}
.responsavel{font-size:11px;color:var(--tinta-3);font-weight:600}

/* ---------- painéis ---------- */
.painel{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sombra);margin-bottom:22px;overflow:hidden;
}
.painel-topo{
  display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--linha);background:var(--papel-2);
}
.painel-topo h2{font-size:15px;font-weight:800}
.painel-topo .qtd{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--tinta-3)}
.painel-corpo{padding:22px}

/* ---------- passos ---------- */
.passos{
  display:flex;align-items:center;gap:0;padding:18px 20px;
  border-bottom:1px solid var(--linha);background:var(--papel-2);overflow-x:auto;
}
.passo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.passo-bola{
  display:grid;place-items:center;width:29px;height:29px;border-radius:50%;
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;
  background:var(--fundo);color:var(--tinta-3);border:1.5px solid var(--linha);
  transition:all var(--transicao);
}
.passo-nome{font-size:12.5px;font-weight:700;color:var(--tinta-3);white-space:nowrap}
.passo-liga{width:34px;height:2px;background:var(--linha);margin:0 12px;flex:0 0 auto;border-radius:2px}
.passo.agora .passo-bola{background:var(--roxo);color:var(--papel);border-color:var(--roxo);box-shadow:0 0 0 4px rgba(106,13,173,.14)}
.passo.agora .passo-nome{color:var(--roxo)}
.passo.pronto .passo-bola{background:var(--verde);color:var(--papel);border-color:var(--verde)}
.passo.pronto .passo-nome{color:var(--tinta)}

/* ---------- tabelas ---------- */
table{width:100%;border-collapse:collapse}
th{
  text-align:left;padding:11px 20px;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);background:var(--papel-2);border-bottom:1px solid var(--linha);
}
td{padding:14px 20px;font-size:14px;border-bottom:1px solid var(--papel-2)}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--transicao)}
tbody tr:hover{background:var(--papel-2)}
.etiqueta{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px;background:var(--lavanda);color:var(--roxo);
}
.etiqueta.verde{background:var(--verde-claro);color:var(--verde-tinta)}
.etiqueta.cinza{background:var(--papel-2);color:var(--tinta-2)}

/* ---------- etapas ---------- */
.etapa{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 20px;border-bottom:1px solid var(--papel-2)}
.etapa:last-child{border-bottom:0}
.etapa-num{font-family:'IBM Plex Mono',monospace;font-size:23px;font-weight:700;color:var(--tinta-2);line-height:1}
.etapa.feita .etapa-num{color:var(--verde)}
.etapa.agora .etapa-num{color:var(--roxo)}
.etapa-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.etapa-topo h3{font-size:15.5px;font-weight:800}
.etapa .desc{font-size:13.5px;color:var(--tinta-2);line-height:1.55;margin-bottom:13px}
.selo{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:20px}
.selo.feita{background:var(--verde-claro);color:var(--verde-tinta)}
.selo.agora{background:var(--roxo);color:var(--papel)}
.selo.fila{background:var(--papel-2);color:var(--tinta-2)}
.itens{list-style:none;display:grid;gap:8px}
.itens li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45}
.caixinha{
  flex:0 0 auto;width:17px;height:17px;border-radius:5px;border:1.5px solid var(--linha-forte);
  margin-top:1px;display:grid;place-items:center;color:var(--papel);
}
.itens li.ok .caixinha{background:var(--verde);border-color:var(--verde)}
.itens li.ok>span:last-child{color:var(--tinta-2)}
.quem{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--roxo);padding-top:2px}

/* ---------- vazio / carregando ---------- */
.vazio{display:grid;place-items:center;text-align:center;padding:56px 24px}
.vazio-ic{
  display:grid;place-items:center;width:60px;height:60px;border-radius:16px;margin:0 auto 16px;
  background:var(--lavanda);color:var(--roxo-medio);
}
.vazio h3{font-size:17px;font-weight:800;margin-bottom:8px}
.vazio p{font-size:14px;color:var(--tinta-2);line-height:1.6;max-width:46ch;margin:0 auto}
.vazio .acoes{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.girando{animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.barra-carga{height:3px;background:var(--linha);border-radius:3px;overflow:hidden;position:relative}
.barra-carga::after{
  content:"";position:absolute;top:0;bottom:0;width:35%;border-radius:3px;
  background:linear-gradient(90deg,var(--roxo-claro),var(--roxo));
  animation:corre 1.1s ease-in-out infinite;
}
@keyframes corre{0%{left:-35%}100%{left:100%}}

/* ---------- moldura de iframe ---------- */
/* SEM JANELA DENTRO DE JANELA.
   A ferramenta embutida nao tem moldura: ela ocupa toda a area
   util abaixo do cabecalho e ao lado do menu. Sem borda, sem
   cartao, sem segunda barra de rolagem. */
.moldura{
  background:var(--fundo);border:0;border-radius:var(--r);
  overflow:hidden;box-shadow:none;
  height:calc(100vh - var(--barra-a) - 118px);min-height:520px;
}
.moldura iframe{width:100%;height:100%;border:0;display:block;background:var(--fundo)}
.area:has(.moldura){max-width:none;padding-bottom:20px}

@media (max-width:960px){
  .moldura{height:calc(100vh - var(--barra-a) - 190px);min-height:440px;border-radius:var(--r-p)}
}

/* ---------- ficha de dados (revisão) ---------- */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;background:var(--linha)}
.ficha-item{background:var(--papel);padding:13px 16px}
.ficha-item dt{
  font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:4px;
}
.ficha-item dd{font-size:14px;font-weight:600;line-height:1.4;word-break:break-word}
.ficha-item dd.vazia{color:var(--tinta-3);font-weight:500;font-style:italic}

/* ---------- avisos flutuantes ---------- */
.avisos{position:fixed;right:18px;bottom:18px;z-index:300;display:grid;gap:10px;max-width:340px}
.aviso{
  display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-p);
  background:var(--papel);border:1px solid var(--linha);box-shadow:var(--sombra-alta);
  font-size:13.5px;line-height:1.45;animation:entra-aviso .3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes entra-aviso{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.aviso.saindo{animation:sai-aviso .25s ease forwards}
@keyframes sai-aviso{to{opacity:0;transform:translateX(24px)}}
.aviso .ic{flex:0 0 auto;margin-top:1px}
.aviso.ok .ic{color:var(--verde)}
.aviso.erro .ic{color:var(--vermelho)}
.aviso.info .ic{color:var(--roxo)}

/* ---------- rodapé mobile ---------- */
.rodape-mob{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--papel);border-top:1px solid var(--linha);
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 20px rgba(43,5,70,.07);
}
.rodape-mob .fila{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.rodape-mob .fila::-webkit-scrollbar{display:none}
.rodape-mob button{
  /* Cinco itens em 360px dão 72px cada. Com min-width:72px fixo o rótulo
     'Diretoria' estourava e o item saía da tela — e item fora da tela
     ninguém descobre. Agora dividem o espaço e o texto corta com
     reticências: texto cortado se vê, item sumido não. */
  flex:1 1 0;min-width:0;display:grid;justify-items:center;gap:4px;
  padding:7px 4px;border-radius:10px;font-size:9.5px;font-weight:700;color:var(--tinta-3);
  transition:background var(--transicao),color var(--transicao);
}
.rodape-mob button>span:last-child{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rodape-mob button.aceso{color:var(--roxo);background:var(--lavanda)}

/* ============================================================
   TELAS PEQUENAS
   ============================================================ */
@media (max-width:960px){
  .barra-menu{display:flex}
  .barra-titulo,.barra-divisor{display:none}
  .lateral{
    transform:translateX(-100%);transition:transform var(--transicao);
    box-shadow:var(--sombra-alta);
  }
  .lateral.aberta{transform:none}
  .area{margin-left:0;padding:calc(var(--barra-a) + 22px) 16px 104px}
  .rodape-mob{display:block}
  .topo-tela h1{font-size:25px}
  .teclas{grid-template-columns:1fr}
  .linha-campos,.linha-campos.tres{grid-template-columns:1fr}
  .moldura{height:calc(100vh - 250px)}
  .etapa{grid-template-columns:38px 1fr;gap:13px;padding:18px 14px}
  .etapa-num{font-size:19px}
  .painel-corpo{padding:16px}
  table{display:block;overflow-x:auto;white-space:nowrap}
  .avisos{left:14px;right:14px;bottom:86px;max-width:none}
  .barra-pessoa{display:none}
}

/* ============================================================
   TELA DE ACESSOS
   ============================================================ */
.dois-lados{display:grid;grid-template-columns:296px 1fr;gap:18px;align-items:start}

.lista-pessoas{padding:8px}
.ficha-pessoa{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 12px;border-radius:var(--r-p);margin-bottom:2px;
  transition:background var(--transicao);
}
.ficha-pessoa:hover{background:var(--lavanda)}
.ficha-pessoa.escolhida{background:var(--roxo);color:var(--papel)}
.ficha-pessoa .inicial{
  display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(155deg,var(--lavanda),var(--linha-forte));color:var(--roxo);
  font-weight:900;font-size:15px;
}
.ficha-pessoa.escolhida .inicial{background:rgba(23,14,36,.28);color:var(--branco)}
.ficha-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ficha-txt strong{font-size:14px;font-weight:700}
.ficha-txt span{font-size:11.5px;color:var(--tinta-3)}
.ficha-pessoa.escolhida .ficha-txt span{color:rgba(255,255,255,.72)}

.bloco-setor{margin-bottom:22px}
.bloco-setor:last-child{margin-bottom:0}
.bloco-setor-topo{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
  padding-bottom:9px;border-bottom:1px solid var(--linha);
}
.bloco-setor-topo h3{font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.bloco-setor-topo .qtd{
  margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-weight:700;color:var(--tinta-3);
}
.mini{
  font-size:11px;font-weight:700;color:var(--roxo);padding:5px 10px;
  border-radius:7px;border:1px solid var(--linha);background:var(--papel);white-space:nowrap;
}
.mini:hover{background:var(--lavanda);border-color:var(--roxo-claro)}

/* ------------------------------------------------------------
   GRADE DAS FERRAMENTAS POR SETOR (tela de Acessos)
   ------------------------------------------------------------
   Cada setor espalha as suas ferramentas pela largura. Quantas
   colunas cabem quem decide e o auto-fill, pelo espaco real do
   painel — nao ha numero de colunas chumbado, entao a mesma
   regra serve para o celular deitado e para o monitor.

   min-width:0 no filho e obrigatorio: filho de grid se recusa a
   encolher abaixo do proprio conteudo, e o nome comprido de
   ferramenta empurrava a coluna para fora do painel.
   ------------------------------------------------------------ */
.grade-chaves{
  display:grid;gap:2px 14px;
  grid-template-columns:repeat(auto-fill,minmax(262px,1fr));
  min-width:0;
}
.grade-chaves > *{min-width:0}

/* O interruptor é um <button role="switch"> ocupando a linha inteira,
   não um quadradinho de 42px dentro de um <label> inerte. Por isso o
   reset de botão aqui: sem ele o navegador põe fundo cinza, borda e a
   fonte dele — nada disso é da casa. A linha toda ser o alvo é o que
   faz clicar no nome da ferramenta funcionar. */
.chave-linha{
  display:flex;align-items:center;gap:13px;padding:10px 4px;cursor:pointer;
  border-radius:9px;transition:background var(--transicao);
  width:100%;min-height:44px;text-align:left;
  background:none;border:0;font:inherit;color:inherit;
}
.chave-linha:hover:not(:disabled){background:var(--papel-2)}
.chave-linha.travada,
.chave-linha:disabled{opacity:.55;cursor:default}

/* Quem chega de teclado precisa VER onde está. O <span> antigo não
   recebia foco nenhum, então este estado simplesmente não existia. */
.chave-linha:focus-visible{
  outline:2px solid var(--roxo);outline-offset:2px;background:var(--papel-2);
}

.chave{
  flex:0 0 auto;width:42px;height:24px;border-radius:14px;background:var(--linha-forte);
  padding:3px;display:flex;transition:background var(--transicao);
}
.chave .bolinha{
  width:18px;height:18px;border-radius:50%;background:var(--papel);
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:transform var(--transicao);
}
.chave.on{background:var(--roxo)}
.chave.on .bolinha{transform:translateX(18px)}

.chave-txt{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.chave-txt strong{font-size:14px;font-weight:600}
.chave-txt .mono{font-size:10.5px;color:var(--tinta-3);font-weight:700;letter-spacing:.06em}

.chip-ponte{
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:20px;background:var(--ambar-claro);color:var(--ambar-tinta);white-space:nowrap;
}
.tecla-topo .chip-ponte{margin-left:2px}

.saida{
  width:100%;padding:13px;border:1.5px solid var(--linha);border-radius:var(--r-p);
  background:var(--papel-2);font-family:'IBM Plex Mono',monospace;font-size:12px;
  line-height:1.6;resize:vertical;color:var(--tinta);
}
.saida:focus{outline:none;border-color:var(--roxo);background:var(--papel)}

@media (max-width:960px){
  .dois-lados{grid-template-columns:1fr}
  .chave-linha{padding:12px 4px}
}

/* ============================================================
   MÓDULO MÁQUINAS PRONTAS
   ============================================================ */
.abas{
  display:flex;gap:4px;padding:12px 14px;border-bottom:1px solid var(--linha);
  background:var(--papel-2);overflow-x:auto;scrollbar-width:none;
}
.abas::-webkit-scrollbar{display:none}
.aba{
  display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;
  font-size:13px;font-weight:700;color:var(--tinta-2);white-space:nowrap;flex:0 0 auto;
  transition:background var(--transicao),color var(--transicao);
}
.aba:hover{background:var(--lavanda);color:var(--roxo)}
.aba.aceso{background:var(--roxo);color:var(--papel)}
.aba-num{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;
  background:rgba(0,0,0,.07);padding:2px 6px;border-radius:20px;
}
.aba.aceso .aba-num{background:rgba(255,255,255,.24)}

.maqs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;padding:18px;
}
.maq{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);padding:17px;
  box-shadow:0 1px 0 var(--linha-forte);
  animation:pipoca .4s cubic-bezier(.2,.8,.3,1) both;
}
.maq-topo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.maq-ic{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:var(--lavanda);color:var(--roxo);
}
.maq-id{font-size:12px;font-weight:700;color:var(--tinta-2);letter-spacing:.06em}
.etiqueta-estado{
  margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:20px;white-space:nowrap;
}
.etiqueta-estado.verde{background:var(--verde-claro);color:var(--verde-tinta)}
.etiqueta-estado.ambar{background:var(--ambar-claro);color:var(--ambar-tinta)}
.etiqueta-estado.cinza{background:var(--papel-2);color:var(--tinta-2)}
.etiqueta-estado.roxo{background:var(--lavanda);color:var(--roxo-claro)}

.maq h3{font-size:15px;font-weight:800;letter-spacing:-.01em;margin-bottom:13px;line-height:1.3}

.maq-dados{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}
.maq-dados dt{
  font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:2px;
}
.maq-dados dd{font-size:13.5px;font-weight:600}

.maq-cliente{
  display:flex;align-items:center;gap:7px;margin-top:13px;padding:9px 11px;
  background:var(--lavanda);border-radius:9px;font-size:13px;font-weight:700;color:var(--roxo-claro);
}
.maq-obs{
  margin-top:10px;font-size:12.5px;color:var(--tinta-2);line-height:1.45;
  padding-left:11px;border-left:2px solid var(--linha);
}
.maq-acoes{margin-top:15px;display:flex;flex-direction:column;gap:8px}
.maq-acoes .botao{width:100%;font-size:13.5px;padding:11px 16px}

.rodape-modulo{
  margin-top:14px;font-size:12px;color:var(--tinta-3);line-height:1.55;padding:0 4px;
}

@media (max-width:960px){
  .maqs{grid-template-columns:1fr;padding:14px}
}

/* select dentro do campo-caixa */
.campo-caixa select{
  flex:1;min-width:0;padding:12px 0;font-size:15px;background:transparent;
  border:0;appearance:none;-webkit-appearance:none;cursor:pointer;
}
.campo-caixa select:disabled{opacity:.6;cursor:not-allowed}

/* ---------- a lista que o seletor abre ----------
   O balão de opções NÃO é desenhado pela página: quem desenha é o sistema
   operacional. Ele nascia branco e herdava só a cor CLARA do texto — e as
   opções sumiam no branco. Só dava para ler a linha destacada.

   Conserto em duas partes, porque uma sozinha não resolve em todo navegador:
   1. color-scheme:dark avisa o sistema que o controle é escuro (Chrome/Edge)
   2. pintar option/optgroup na mão cobre Firefox e Windows antigo         */
select{color-scheme:dark}
select option,
select optgroup{
  background-color:var(--papel-2);
  color:var(--tinta);
}
select option:checked,
select option:hover{
  background-color:var(--roxo-fundo);
  color:#fff;
}
/* opção-guia ("Escolha...") fica apagada, mas ainda legível */
select option[value=""]{color:var(--tinta-3)}

/* ============================================================
   MÓDULO COTAÇÃO DE FRETE
   ============================================================ */
.volume{
  background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r-p);
  padding:13px 14px;margin-bottom:10px;
}
.volume-topo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.volume-num{
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--roxo-medio);
}
.volume-topo .mini{margin-left:auto;color:var(--vermelho);border-color:var(--vermelho-tinta)}
.volume-topo .mini:hover{background:var(--vermelho-claro)}
.volume-campos{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.volume-campos label{
  display:block;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:4px;
}
.volume-campos input{
  width:100%;padding:9px 10px;border:1.5px solid var(--linha);border-radius:8px;
  background:var(--papel);font-size:14px;font-family:'IBM Plex Mono',monospace;text-align:center;
}
.volume-campos input:focus{outline:none;border-color:var(--roxo);box-shadow:0 0 0 3px rgba(106,13,173,.1)}

.dupla{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opcao{
  padding:13px 12px;border-radius:var(--r-p);border:1.5px solid var(--linha);
  background:var(--papel);font-weight:700;font-size:14px;color:var(--tinta-2);
  transition:all var(--transicao);
}
.opcao:hover{border-color:var(--roxo-claro);background:var(--lavanda)}
.opcao.aceso{background:var(--roxo);border-color:var(--roxo);color:var(--papel);box-shadow:0 3px 12px rgba(106,13,173,.25)}

.resumo-pedido{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  background:var(--linha);border-radius:var(--r);overflow:hidden;margin-bottom:16px;
  border:1px solid var(--linha);
}
.resumo-pedido>div{background:var(--papel);padding:13px 16px}
.resumo-pedido dt{
  font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:4px;
}
.resumo-pedido dd{font-size:15px;font-weight:700}

.fretes{display:grid;gap:12px;margin-bottom:20px}
.frete{
  position:relative;background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
  padding:18px;box-shadow:0 1px 0 var(--linha-forte);
  animation:pipoca .4s cubic-bezier(.2,.8,.3,1) both;
}
.frete.melhor{border-color:var(--verde);border-width:2px;box-shadow:0 4px 20px rgba(22,163,74,.14)}
.fita{
  position:absolute;top:-1px;right:16px;background:var(--verde);color:var(--papel);
  font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 11px;border-radius:0 0 8px 8px;
}
.frete-topo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.frete-nome{font-size:17px;font-weight:800;letter-spacing:-.01em}
.frete-valor{
  margin-left:auto;font-size:23px;font-weight:900;letter-spacing:-.03em;color:var(--roxo);
  font-variant-numeric:tabular-nums;
}
.frete.melhor .frete-valor{color:var(--verde)}
.frete-linhas{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;
  color:var(--tinta-2);font-weight:600;
}
.frete-linhas>span{display:inline-flex;align-items:center;gap:5px}
.frete-coleta{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;
  padding:4px 9px;border-radius:20px;background:var(--verde-claro);color:var(--verde-tinta);
}
.frete-coleta.levar{background:var(--ambar-claro);color:var(--ambar-tinta)}
.frete-prot{
  margin-top:10px;font-size:11px;color:var(--tinta-3);
  padding-top:9px;border-top:1px dashed var(--linha);
}
.frete-aviso{
  display:flex;gap:8px;align-items:flex-start;margin-top:11px;padding:10px 12px;
  background:var(--ambar-claro);border:1px solid var(--ambar-tinta);border-radius:9px;
  font-size:12.5px;line-height:1.45;color:var(--ambar-tinta);
}
.frete-aviso svg{flex:0 0 auto;margin-top:1px}

.recusas{display:grid;gap:8px}
.recusas>div{
  display:flex;gap:12px;align-items:baseline;padding:10px 12px;
  background:var(--papel-2);border-radius:9px;font-size:13px;
}
.recusas strong{flex:0 0 110px;font-weight:700}
.recusas span{color:var(--tinta-3);line-height:1.4}

.previa{
  background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r-p);
  padding:14px 16px;font-size:13px;line-height:1.6;white-space:pre-wrap;
  max-height:220px;overflow-y:auto;color:var(--tinta-2);
}

@media (max-width:960px){
  .volume-campos{grid-template-columns:repeat(3,1fr)}
  .frete-valor{margin-left:0;width:100%}
  .recusas strong{flex:0 0 auto}
}

/* --- blocos didáticos do formulário --- */
.etapa-form{
  border:1px solid var(--linha);border-radius:var(--r);padding:18px;margin-bottom:16px;
  background:var(--papel-2);
}
.etapa-form-topo{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}
.etapa-form-topo h2{font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.etapa-form-topo p{font-size:12.5px;color:var(--tinta-2);line-height:1.5;margin-top:3px;max-width:62ch}

.opcional{
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;background:var(--papel-2);color:var(--tinta-2);margin-left:6px;
}

.origem-fixa{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--lavanda);border:1px solid var(--roxo-escuro);border-radius:var(--r-p);
}
.origem-ic{
  display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
  background:var(--papel);color:var(--roxo);flex:0 0 auto;
}
.origem-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.origem-txt strong{font-size:14px;font-weight:700;color:var(--roxo-claro)}
.origem-txt .mono{font-size:11.5px;color:var(--roxo-medio);font-weight:600}
.origem-fixa .mini{margin-left:auto}

.link{
  color:var(--roxo);font-size:12px;font-weight:700;text-decoration:underline;
  text-underline-offset:2px;padding:0;
}
.link:hover{color:var(--roxo-claro)}

.volume-nome{
  font-size:11.5px;font-weight:700;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;
}

/* --- catálogo de produtos --- */
.catalogo{
  border:1.5px solid var(--roxo-claro);border-radius:var(--r);padding:15px;
  margin-bottom:14px;background:var(--papel);
  animation:pipoca .3s cubic-bezier(.2,.8,.3,1) both;
}
.catalogo-topo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.catalogo-topo h3{font-size:13px;font-weight:800;letter-spacing:.06em}
.catalogo-topo .mini{margin-left:auto}
.catalogo-busca{display:flex;gap:8px;align-items:stretch;margin-bottom:12px}
.catalogo-busca .campo-caixa{flex:1;min-width:0}
.catalogo-busca .botao{flex:0 0 auto;padding:0 18px}

/* ---- abas do catálogo: Favoritos x Todos do Bling ---- */
.cat-abas{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:12px;
  background:var(--fundo);border:1px solid var(--linha);border-radius:10px;padding:3px;
}
.cat-aba{
  min-width:0;min-height:40px;padding:0 10px;border:0;border-radius:8px;background:none;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--tinta-2);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all var(--transicao);
}
.cat-aba.aceso{background:var(--papel);color:var(--roxo);box-shadow:0 1px 3px rgba(0,0,0,.10)}

.cat-lista{display:grid;gap:6px;max-height:300px;overflow-y:auto;padding-right:4px}
.cat-vazio{font-size:12.5px;color:var(--tinta-2);line-height:1.5;padding:14px 2px;margin:0}
.cat-conta{
  font-size:11px;color:var(--tinta-3);letter-spacing:.08em;
  margin:-6px 0 10px;padding:0 2px;
}

.cat-item{
  display:flex;align-items:stretch;gap:6px;
  border:1px solid var(--linha);border-radius:9px;background:var(--papel);overflow:hidden;
}
.cat-item:hover{border-color:var(--roxo-claro)}

/* alvo de toque de 40px: dedo não é ponteiro */
.cat-estrela{
  flex:0 0 auto;width:42px;min-height:44px;border:0;background:none;cursor:pointer;
  font-size:17px;line-height:1;color:var(--linha);transition:color var(--transicao);
}
.cat-estrela.on{color:var(--ambar)}
.cat-estrela:disabled{opacity:.5;cursor:default}

.cat-usar{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  text-align:left;padding:9px 12px 9px 0;border:0;background:none;font:inherit;cursor:pointer;
}
.cat-nome{
  font-size:13px;font-weight:600;color:var(--tinta);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cat-meta{
  font-size:11px;color:var(--tinta-2);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.catalogo-lista{
  display:grid;gap:6px;margin-top:12px;max-height:270px;overflow-y:auto;padding-right:4px;
}
.prod{
  display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;
  padding:11px 13px;border-radius:9px;border:1px solid var(--linha);background:var(--papel);
  transition:all var(--transicao);
}
.prod:hover{border-color:var(--roxo-claro);background:var(--lavanda)}
.prod-nome{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.prod-nome .fav{color:var(--ambar)}
.prod-med{font-size:11px;color:var(--tinta-3);font-weight:600}

/* ============================================================
   REFINO GERAL — acabamento de site profissional
   Só ajusta acabamento. Nenhuma regra acima foi removida.
   ============================================================ */
:root{
  --sombra-fina:0 1px 2px rgba(43,5,70,.04);
  --sombra-cartao:0 1px 2px rgba(43,5,70,.04), 0 4px 16px rgba(43,5,70,.05);
  --sombra-flutua:0 12px 34px rgba(43,5,70,.11), 0 2px 6px rgba(43,5,70,.05);
  --anel:0 0 0 4px rgba(106,13,173,.11);
}

/* fundo com profundidade, em vez de cinza chapado */
body{
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(180,95,224,.09), transparent 60%),
    radial-gradient(760px 420px at -6% 8%, rgba(106,13,173,.06), transparent 58%),
    var(--fundo);
  background-attachment:fixed;
}

/* número sempre alinhado em coluna */
.mono,.frete-valor,.cot-preco,.resumo-pedido dd,.volume-campos input{font-variant-numeric:tabular-nums}

/* barra superior em vidro */
.barra{backdrop-filter:saturate(140%) blur(10px)}
.barra::after{height:1px;opacity:.7}

/* painéis mais secos e mais firmes */
.painel{box-shadow:var(--sombra);border-color:var(--papel-2)}
.painel-topo{
  padding:14px 20px;background:linear-gradient(180deg,var(--papel-2),var(--papel-2));
}
.painel-topo h2{
  font-size:11.5px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-2);
}
.tecla{box-shadow:var(--sombra)}
.tecla.viva:hover{box-shadow:var(--sombra-alta)}

/* foco visível sem gritar */
:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}

/* ANEL DUPLO — o campo estava sendo contornado duas vezes: a .campo-caixa
   desenhava o anel dela e o <input> de dentro desenhava o dele por cima.
   Quem manda é a caixa; o campo de dentro cala a boca. */
.campo-caixa :focus-visible{outline:none}

/* barra de rolagem discreta
   ATENÇÃO: as duas linhas abaixo pintam a MESMA barra, em navegadores
   diferentes. Estavam com cores diferentes — o Firefox usava --tinta-2
   (#B199C7, quase branco) e o Chrome usava --linha-forte (escuro). Dava
   uma faixa clara na direita só em alguns navegadores. Agora batem. */
*{scrollbar-width:thin;scrollbar-color:var(--linha-forte) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--roxo-claro);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   FAIXA "SEM LOGIN"
   Estado temporário tem de doer de tão visível, senão fica ligado.
   ============================================================ */
.faixa-aberta{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:5px 11px;border-radius:20px;
  background:rgba(217,119,6,.18);border:1px solid rgba(252,211,77,.6);
  color:var(--ambar-tinta);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.faixa-aberta .ponto{
  width:7px;height:7px;border-radius:50%;background:var(--ambar-tinta);flex:0 0 auto;
  animation:pisca-aberta 1.6s ease-in-out infinite;
}
@keyframes pisca-aberta{0%,100%{opacity:1}50%{opacity:.25}}

@media (max-width:600px){
  .faixa-aberta{padding:4px 8px;font-size:9px;letter-spacing:.08em}
}

/* ============================================================
   FAIXA "VENDO COMO" — a saida da simulacao
   ------------------------------------------------------------
   Mesma ideia da faixa de cima: estado temporario que precisa
   doer de tao visivel. A diferenca e que esta CLICA — ela nao so
   avisa, ela e o caminho de volta.

   Roxo, e nao ambar, porque ambar ja e o "sem login". Duas faixas
   da mesma cor no mesmo cabecalho vira uma coisa so aos olhos.
   ============================================================ */
.faixa-provando{
  display:inline-flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;
  padding:6px 12px;border-radius:20px;cursor:pointer;
  background:rgba(180,95,224,.16);border:1px solid var(--roxo);
  color:var(--roxo-claro);font-family:inherit;font-size:11px;font-weight:600;
  line-height:1.2;text-align:left;
  transition:background .15s ease,border-color .15s ease;
}
.faixa-provando:hover,.faixa-provando:focus-visible{
  background:rgba(180,95,224,.3);border-color:var(--roxo-claro);
}
.faixa-provando b{color:var(--tinta);font-weight:800}
/* O texto encolhe antes de empurrar o nome de quem esta logado para
   fora da barra — no celular sobra o icone e o comeco da frase. */
.faixa-provando > span:last-child{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.faixa-provando svg{flex:0 0 auto;width:15px;height:15px}

@media (max-width:600px){
  .faixa-provando{padding:5px 9px;font-size:10px;gap:6px}
}

/* ============================================================
   CABEÇALHO ÚNICO E QUADRO DA FERRAMENTA
   ------------------------------------------------------------
   Um software só, não uma janela dentro da outra.

   Antes a tela empilhava quatro títulos: trilha, h1, cabeçalho
   do quadro e o título da própria ferramenta dentro do iframe.
   Agora: trilha fina, um título, uma linha. A ferramenta ocupa
   toda a área útil abaixo do cabeçalho e ao lado do menu.
   ============================================================ */
.cabeca{margin-bottom:14px}
.cabeca-linha{display:flex;align-items:flex-start;gap:13px}
.cabeca-ic{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(155deg,var(--roxo-veu),rgba(139,47,201,.07));
  color:var(--roxo);border:1px solid var(--linha-forte);margin-top:2px;
}
.cabeca-txt{min-width:0;flex:1}
.cabeca-txt h1{
  font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  background:linear-gradient(96deg,var(--tinta) 30%,var(--roxo) 96%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.cabeca-txt p{
  font-size:13px;color:var(--tinta-2);line-height:1.5;margin-top:3px;max-width:78ch;
}

/* ferramenta nativa: cartão, porque ela desenha o próprio conteúdo */
.quadro{
  position:relative;background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden;
}
.quadro #caixa-modulo{padding:20px}
.quadro #caixa-modulo>.painel:last-child{margin-bottom:0}

/* ferramenta embutida: SEM moldura. Ela É a tela.
   Nada de borda, sombra ou respiro em volta — cada pixel gasto
   aqui é pixel a menos para a ferramenta. */
.quadro-cheio{
  background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;
}
.quadro-cheio #caixa-modulo{padding:0}

@media (max-width:960px){
  .cabeca-txt h1{font-size:20px}
  .cabeca-txt p{font-size:12.5px}
  .cabeca-ic{width:34px;height:34px}
  .quadro #caixa-modulo{padding:14px}
}

/* ============================================================
   MÓDULO LOG-01 · CENTRAL DE COTAÇÕES
   Duas colunas: monta à esquerda, compara à direita.
   ============================================================ */
/* PAINEL HORIZONTAL — ver o maximo sem rolar.
   O formulario encolhe para o minimo que ainda cabe, e o comparativo
   fica com o resto da tela. Em monitor largo o formulario nao cresce
   junto: espaco extra vai todo para as transportadoras. */
.cot-grade{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:1500px){ .cot-grade{grid-template-columns:380px minmax(0,1fr)} }
.cot-col-dir{position:sticky;top:calc(var(--barra-a) + 20px)}

.cot-secao{border-top:1px solid var(--linha);padding:16px 0 4px;margin-top:4px}
.cot-secao:first-child{border-top:0;padding-top:0}
.cot-rot{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--roxo-medio);
}
.cot-rot .pt{width:5px;height:5px;border-radius:50%;background:var(--roxo-claro);flex:0 0 auto}
.cot-rot .risco{flex:1;height:1px;background:var(--linha)}

/* faixa de modo */
.cot-modo{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r-p);
  font-size:12px;font-weight:700;margin-bottom:16px;
}
.cot-modo.real{background:var(--verde-claro);color:var(--verde-tinta);border:1px solid var(--verde-tinta)}
.cot-modo.demo{background:var(--ambar-claro);color:var(--ambar-tinta);border:1px solid var(--ambar-tinta)}
.cot-modo .mini{margin-left:auto}

/* volumes compactos */
.cot-vol{
  display:grid;grid-template-columns:repeat(4,1fr) 30px;gap:7px;align-items:end;
  background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r-p);
  padding:11px;margin-bottom:8px;
}
.cot-vol label{
  display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:4px;
}
.cot-vol input{
  width:100%;padding:8px 6px;border:1.5px solid var(--linha);border-radius:7px;background:var(--papel);
  font-size:13.5px;font-family:'IBM Plex Mono',monospace;text-align:center;
}
.cot-vol input:focus{outline:none;border-color:var(--roxo);box-shadow:0 0 0 3px rgba(106,13,173,.1)}
.cot-vol .tirar{
  height:34px;border-radius:7px;color:var(--tinta-3);display:grid;place-items:center;
  border:1px solid transparent;transition:all var(--transicao);
}
.cot-vol .tirar:hover{color:var(--vermelho);background:var(--vermelho-claro);border-color:var(--vermelho-tinta)}
.cot-vol-topo{
  grid-column:1/-1;display:flex;align-items:center;gap:8px;
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--roxo-medio);
}
.cot-vol-topo .nome{color:var(--tinta-2);letter-spacing:0;text-transform:none;font-size:11px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cot-somas{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 2px}
.cot-soma{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
  background:var(--lavanda);color:var(--roxo-claro);font-size:11px;font-weight:800;
}

/* ---------- coluna da direita ---------- */
.cot-vazio{
  display:grid;place-items:center;text-align:center;padding:60px 26px;
  border:1.5px dashed var(--linha-forte);border-radius:var(--r);background:var(--papel-2);
}
.cot-vazio-ic{
  display:grid;place-items:center;width:58px;height:58px;border-radius:16px;margin-bottom:15px;
  background:var(--lavanda);color:var(--roxo-medio);
}
.cot-vazio h3{font-size:15px;font-weight:800;margin-bottom:7px}
.cot-vazio p{font-size:13px;color:var(--tinta-2);line-height:1.6;max-width:38ch}

/* TRANSPORTADORAS LADO A LADO.
   Antes era uma lista vertical: com sete opcoes, o vendedor rolava para
   comparar as duas pontas. Agora entram em cartoes numa grade que se
   ajusta a largura — quanto maior a tela, mais transportadora visivel
   de uma vez, sem rolagem. */
.cot-cards{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  align-items:start;
}
.cot-cards .cot-grupo{grid-column:1/-1}
.cot-card{
  position:relative;display:grid;grid-template-columns:24px 1fr;gap:11px;align-items:start;
  background:var(--papel);border:1.5px solid var(--linha);border-radius:var(--r);padding:15px 16px;
  cursor:pointer;text-align:left;width:100%;
  transition:border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
  animation:pipoca .34s cubic-bezier(.2,.8,.3,1) both;
}
.cot-card:hover{border-color:var(--roxo-claro);box-shadow:var(--sombra)}
.cot-card.marcada{border-color:var(--roxo);background:var(--papel-2);box-shadow:0 0 0 3px rgba(106,13,173,.07)}

.cot-check{
  width:22px;height:22px;border-radius:7px;border:2px solid var(--linha-forte);
  display:grid;place-items:center;color:var(--papel);margin-top:1px;flex:0 0 auto;
  transition:all var(--transicao);
}
.cot-card.marcada .cot-check{background:var(--roxo);border-color:var(--roxo)}

.cot-card-meio{min-width:0}
.cot-nome{font-size:15.5px;font-weight:800;letter-spacing:-.01em;display:block;margin-bottom:3px}
.cot-serv{font-size:11.5px;color:var(--tinta-3);font-weight:600;display:block}
.cot-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.cot-badge{
  display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:20px;white-space:nowrap;
}
.cot-badge.barato{background:var(--verde-claro);color:var(--verde-tinta)}
/* Era azul. Azul nao existe na marca da Tibatron: sao quatro cores,
   preto, roxo, amarelo e verde. Uso o veu + roxo medio para nao colidir
   com .coleta (lavanda + roxo-claro) nem com .melhor (lavanda + roxo). */
.cot-badge.rapido{background:var(--roxo-veu);color:var(--roxo-medio)}
.cot-badge.estim{background:var(--ambar-claro);color:var(--ambar-tinta)}
.cot-badge.coleta{background:var(--lavanda);color:var(--roxo-claro)}
.cot-badge.levar{background:var(--papel-2);color:var(--tinta-2)}
/* acrescimo que a Tibatron soma em cima do preco da transportadora.
   So aparece para quem cota — nunca vai na mensagem do cliente. */
.cot-badge.ajuste{background:var(--ambar-claro);color:var(--ambar-tinta)}

.cot-card-dir{
  grid-column:2/-1;text-align:left;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--linha);
}
.cot-preco{font-size:21px;font-weight:900;letter-spacing:-.03em;color:var(--roxo);line-height:1.1}
.cot-card.barato-real .cot-preco{color:var(--verde)}
.cot-prazo{
  margin-top:4px;font-size:12px;font-weight:700;color:var(--tinta-2);
  display:flex;align-items:center;gap:5px;
}
.cot-prazo-conta{display:block;margin-top:2px;font-size:10px;color:var(--tinta-3);font-weight:600}

.cot-prot{
  grid-column:2/-1;margin-top:10px;padding-top:9px;border-top:1px dashed var(--linha);
  font-size:10.5px;color:var(--tinta-3);
}
.cot-aviso{
  grid-column:2/-1;display:flex;gap:7px;align-items:flex-start;margin-top:10px;padding:9px 11px;
  background:var(--ambar-claro);border:1px solid var(--ambar-tinta);border-radius:8px;
  font-size:12px;line-height:1.45;color:var(--ambar-tinta);
}
.cot-aviso svg{flex:0 0 auto;margin-top:1px}

.cot-barra-sel{
  display:flex;align-items:center;gap:10px;padding:11px 14px;margin-bottom:12px;
  background:var(--lavanda);border:1px solid var(--roxo-escuro);border-radius:var(--r-p);
  font-size:12.5px;font-weight:700;color:var(--roxo-claro);
}
.cot-barra-sel .mini{margin-left:auto}

.cot-msg{
  background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r-p);
  padding:14px 16px;font-size:12.5px;line-height:1.62;white-space:pre-wrap;
  max-height:260px;overflow-y:auto;color:var(--tinta-2);
}
.cot-acoes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.cot-acoes .cheia{grid-column:1/-1}
.botao-zap{background:var(--verde);box-shadow:0 2px 0 var(--verde-tinta), 0 6px 18px rgba(31,168,85,.22)}
.botao-zap:hover{background:var(--verde)}

/* ---------- aba de ajustes ---------- */
.cot-aj-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:10px}
.cot-aj-linha{
  display:flex;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--linha);border-radius:var(--r-p);background:var(--papel);
}
.cot-aj-linha .txt{min-width:0;flex:1}
.cot-aj-linha .txt strong{display:block;font-size:13.5px;font-weight:700}
.cot-aj-linha .txt span{font-size:11px;color:var(--tinta-3);font-weight:600}
.cot-aj-dias{
  width:66px;flex:0 0 auto;padding:9px 8px;border:1.5px solid var(--linha);border-radius:8px;
  background:var(--papel-2);font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;text-align:center;
}
.cot-aj-dias:focus{outline:none;border-color:var(--roxo);background:var(--papel);box-shadow:0 0 0 3px rgba(106,13,173,.1)}
.cot-aj-linha.off{opacity:.5}

.cot-servs{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:6px}
.cot-serv-linha{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--linha);background:var(--papel);cursor:pointer;font-size:12.5px;font-weight:600;
  transition:background var(--transicao),border-color var(--transicao);
}
.cot-serv-linha:hover{background:var(--papel-2);border-color:var(--roxo-claro)}
.cot-serv-linha .cot-check{width:19px;height:19px;border-radius:6px;margin:0}
.cot-serv-linha.on .cot-check{background:var(--roxo);border-color:var(--roxo)}

.cot-ref{width:100%;border-collapse:collapse;font-size:12.5px}
.cot-ref th{padding:9px 12px;font-size:9px;letter-spacing:.13em}
.cot-ref td{padding:10px 12px;font-size:12.5px}
.cot-ref .cep{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--roxo)}

/* ============================================================
   COMPARATIVO — resumo, controles e agrupamento
   ============================================================ */
/* flex, não grid: na última linha os blocos crescem e preenchem.
   Com grid sobrava célula vazia quando o número de blocos mudava. */
.cot-resumo{
  display:flex;flex-wrap:wrap;gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:var(--r);
  overflow:hidden;margin-bottom:12px;
}
.cot-resumo-bloco{
  flex:1 1 130px;min-width:0;
  background:var(--papel);padding:12px 14px;display:flex;flex-direction:column;gap:4px;
}
.cot-resumo-bloco .rot{
  font-size:8.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);
}
.cot-resumo-bloco strong{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.cot-resumo-bloco strong em{font-style:normal;font-weight:600;color:var(--tinta-3);font-size:12px}
.cot-resumo-bloco.destaque{background:linear-gradient(160deg,var(--verde-claro),var(--verde-claro))}
.cot-resumo-bloco.destaque .rot{color:var(--verde-tinta)}
.cot-resumo-bloco.destaque strong{color:var(--verde-tinta)}

.cot-controles{
  display:grid;gap:9px;padding:13px 14px;margin-bottom:12px;
  background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r);
}
.cot-ctrl-linha{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.cot-ctrl-rot{
  flex:0 0 58px;font-size:9px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);
}

/* seletor segmentado */
.seg{
  display:inline-flex;background:var(--papel-2);border-radius:10px;padding:3px;gap:2px;
  border:1px solid var(--linha);
}
.seg-op{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;
  font-size:12.5px;font-weight:700;color:var(--tinta-2);white-space:nowrap;
  transition:background var(--transicao),color var(--transicao),box-shadow var(--transicao),transform .1s;
}
.seg-op svg{opacity:.65;transition:opacity var(--transicao)}
/* era branco 60% no tema claro; no escuro o realce é um véu roxo */
.seg-op:hover{color:var(--roxo-claro);background:var(--lavanda)}
.seg-op:active{transform:scale(.96)}
.seg-op.aceso{
  background:var(--papel);color:var(--roxo);
  box-shadow:0 1px 3px rgba(43,5,70,.13), 0 0 0 1px rgba(106,13,173,.12);
}
.seg-op.aceso svg{opacity:1}

/* pílulas de filtro */
.cot-pilulas{display:flex;gap:7px;flex-wrap:wrap}
.pilula{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:20px;
  border:1.5px solid var(--linha);background:var(--papel);color:var(--tinta-2);
  font-size:12px;font-weight:700;white-space:nowrap;
  transition:all var(--transicao);
}
.pilula svg{opacity:.55;transition:opacity var(--transicao)}
.pilula:hover{border-color:var(--roxo-claro);background:var(--lavanda);color:var(--roxo-claro)}
.pilula:active{transform:scale(.96)}
.pilula.aceso{
  background:var(--roxo);border-color:var(--roxo);color:var(--papel);
  box-shadow:0 3px 12px rgba(106,13,173,.26);
}
.pilula.aceso svg{opacity:1}

/* cabeçalho de grupo */
.cot-grupo{
  display:flex;align-items:center;gap:9px;padding:14px 2px 4px;
}
.cot-grupo:first-child{padding-top:2px}
.cot-grupo-ic{
  display:grid;place-items:center;width:22px;height:22px;border-radius:6px;
  background:var(--lavanda);color:var(--roxo);flex:0 0 auto;
}
.cot-grupo-nome{
  font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);
}
.cot-grupo-risco{flex:1;height:1px;background:var(--linha)}
.cot-grupo-qtd{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;color:var(--tinta-3);
}

/* diferença para a mais barata */
.cot-dif{
  display:block;margin-top:3px;font-size:11px;font-weight:700;color:var(--ambar);
  font-variant-numeric:tabular-nums;
}
.cot-dif em{font-style:normal;opacity:.72}

.cot-badge.melhor{background:var(--lavanda);color:var(--roxo)}
.cot-badge svg{opacity:.8}

.cot-sel-ic{display:flex;flex:0 0 auto}
.cot-sel-nota{
  display:block;font-style:normal;font-size:11px;font-weight:600;
  color:var(--roxo-medio);opacity:.85;margin-top:1px;
}

@media (max-width:1100px){
  .cot-grade{grid-template-columns:1fr}
  .cot-col-dir{position:static}
}
@media (max-width:600px){
  .cot-ctrl-rot{flex:0 0 100%}
  .seg{width:100%}
  .seg-op{flex:1;justify-content:center;padding:8px 6px;font-size:11.5px}
  .seg-op svg{display:none}
  .cot-resumo{grid-template-columns:1fr 1fr}
}

/* ============================================================
   BOTÕES E SELETORES — acabamento e reação ao toque
   ============================================================ */

/* brilho que atravessa o botão cheio no hover */
.botao::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;left:-110px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.botao:hover::after{animation:brilho-botao .7s ease-out}
@keyframes brilho-botao{to{left:130%}}
.botao[disabled]::after{display:none}
.botao[disabled]{filter:saturate(.5)}

.botao{background-image:linear-gradient(180deg,rgba(255,255,255,.13),transparent)}
.botao svg{transition:transform var(--transicao)}
.botao:hover svg{transform:translateX(1px)}
.botao-claro:hover svg{transform:none}

/* CIF / FOB e afins */
.opcao{position:relative;overflow:hidden}
.opcao:active{transform:scale(.97)}
.opcao.aceso::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--roxo-claro),var(--papel),var(--roxo-claro));opacity:.55;
}

/* marca de seleção que "estala" ao ligar */
.cot-card.marcada .cot-check svg{animation:estala-check .26s cubic-bezier(.2,1.5,.4,1) both}
@keyframes estala-check{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.cot-card:active{transform:scale(.995)}

/* chave liga/desliga com mais vida */
.chave{position:relative;box-shadow:inset 0 1px 3px rgba(43,5,70,.14)}
.chave.on{box-shadow:inset 0 1px 3px rgba(43,5,70,.2), 0 0 0 3px rgba(106,13,173,.1)}
.chave .bolinha{transition:transform var(--transicao), box-shadow var(--transicao)}

/* botão pequeno */
.mini{transition:all var(--transicao)}
.mini:active{transform:scale(.95)}

/* linha de serviço do Melhor Envio */
.cot-serv-linha:active{transform:scale(.98)}
.cot-serv-linha.on{border-color:var(--roxo-claro);background:var(--papel-2)}

@media (prefers-reduced-motion:reduce){
  .botao:hover::after{animation:none}
}

/* ============================================================
   min-width:0 — a regra que mais quebra layout em silêncio
   ------------------------------------------------------------
   Filho de grid e de flex tem min-width:auto por padrão: ele se
   recusa a encolher abaixo do próprio conteúdo. O conteúdo então
   estoura o contêiner e, se o contêiner tiver overflow:hidden,
   some sem rolagem, sem erro e sem aviso. Foi assim que o quadro
   ficou com 433px de conteúdo dentro de 326px de tela.
   ============================================================ */
.cot-grade>*,
.cot-col-dir,
.dois-lados>*,
.linha-campos>*,
.quadro>#caixa-modulo,
.cot-resumo-bloco,
.cot-ctrl-linha,
.seg,
.cot-card-meio,
.campo,
.campo-caixa,
.cot-vol>div,
.dupla>*,
.catalogo-busca>*,
.painel-corpo,
.cot-aj-linha,
.cot-serv-linha,
.cc-pessoas>*,
.cc-papeis>*,
.cc-cep>*,
.cc-acoes>*,
.dir-datas>*,
.dir-kpis>*,
.dir-vends>*,
.dir-vend-topo>*,
.prod{
  min-width:0;
}

/* select tem largura mínima própria, do texto da opção mais longa.
   Sem isto ele empurra a linha inteira para fora da tela. */
.campo-caixa select{width:100%;text-overflow:ellipsis}

/* ============================================================
   ALVO DE TOQUE — 40px de altura, no mínimo
   Medido por teste-responsivo.js, que reprova abaixo disso.
   Dedo não é ponteiro: alvo curto vira toque errado.
   ============================================================ */
.botao,
.aba,
.seg-op,
.pilula,
.opcao,
.prod,
.cot-serv-linha,
.lateral-item,
.ficha-pessoa{
  min-height:40px;
}
.botao,.aba,.seg-op,.pilula{align-items:center}

.barra-menu,.barra-sair{min-width:40px;min-height:40px;display:grid;place-items:center}

/* a fila de abas cresce junto, senão a aba acesa descola do quadro */
.seg-op{padding-top:0;padding-bottom:0}
.pilula{padding-top:0;padding-bottom:0}
.aba{padding-top:0;padding-bottom:0}

/* no celular o dedo é mais grosso: 44px, recomendação da Apple e do Google */
@media (max-width:960px){
  .botao,.seg-op,.pilula,.opcao,.aba,
  .cot-serv-linha,.lateral-item{min-height:44px}
  .campo-caixa input,.campo-caixa select{min-height:44px}
  .cot-vol input{min-height:42px}
  .cot-aj-dias{min-height:42px}
  .mini{min-height:36px;padding-left:12px;padding-right:12px}
}
@media (max-width:960px){
  .cot-vol{grid-template-columns:repeat(2,1fr) 30px}
  .cot-card{grid-template-columns:24px 1fr}
  .cot-card-dir{grid-column:2/-1;text-align:left;margin-top:8px}
  .cot-prazo{justify-content:flex-start}
  .cot-acoes{grid-template-columns:1fr}
}

/* ============================================================
   CAMADA TECNOLÓGICA — o mesmo clima do tibatron.com.br
   Grade de coordenadas ao fundo, brilho de neon no que está
   ativo, e o amarelo aparecendo onde vale olhar.
   Tudo por token: nenhuma cor chumbada aqui.
   ============================================================ */

/* grade de máquina ao fundo, como a do site atrás do laser */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.34;
  mask-image:radial-gradient(1100px 700px at 78% -6%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(1100px 700px at 78% -6%, #000 0%, transparent 72%);
}
/* Levanta o conteúdo acima da grade do body::before.
   A .entrada FICA DE FORA de propósito: ela é position:fixed;inset:0
   e, ao virar relative aqui, deixava de ocupar a tela — o cartão ia
   parar colado na esquerda com uma faixa preta embaixo. Ela já tem
   z-index:200, então nunca precisou desta regra.
   O defeito passou meses sem aparecer porque o login estava desligado
   e a tela de entrada nunca era desenhada. */
.portal{position:relative;z-index:1}

/* título com o degradê do site: branco virando roxo virando amarelo */
.topo-tela h1{
  background:linear-gradient(96deg,var(--tinta) 18%,var(--roxo) 62%,var(--amarelo) 104%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* trilha: o separador vira traço de código, e o último pedaço acende */
.trilha .sep{color:var(--roxo-escuro)}
.trilha span:last-child{color:var(--amarelo)}

/* código da ferramenta em amarelo — é etiqueta de máquina, não enfeite */
.quadro-cod,.tecla-cod{
  color:var(--amarelo);background:var(--amarelo-veu);
  border:1px solid rgba(255,209,0,.22);
}

/* o que está ativo na lateral ganha brilho, como o neon do site */
.lateral-item.aceso{
  box-shadow:0 0 0 1px rgba(180,95,224,.45), 0 6px 22px rgba(139,47,201,.36);
}
.lateral-subitem.aceso{
  box-shadow:0 0 0 1px rgba(180,95,224,.34), 0 4px 16px rgba(139,47,201,.28);
}

/* LED de situação com halo — luz de painel, não bolinha chapada */
.led.ativo{box-shadow:0 0 8px 1px rgba(37,211,102,.75)}
.led.a_clonar{box-shadow:0 0 8px 1px rgba(255,209,0,.65)}
.led.falhou{box-shadow:0 0 8px 1px rgba(248,113,113,.7)}

/* rótulo mono em amarelo: é a marca de "medida" do site */
.cot-rot,.secao-topo h2{color:var(--amarelo)}
.cot-rot .pt{background:var(--amarelo);box-shadow:0 0 7px 1px rgba(255,209,0,.6)}

/* botão principal com fio de luz em cima, como painel de máquina */
.botao:not(.botao-claro):not(.botao-fantasma)::before{
  content:"";position:absolute;left:12px;right:12px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}

/* verde do WhatsApp igual ao do site */
.botao-zap{background:var(--verde);color:#04210F}
.botao-zap:hover{background:var(--verde-tinta)}

/* a marca do mais barato usa o verde da marca */
.cot-badge.barato{background:var(--verde-claro);color:var(--verde-tinta)}
.cot-card.barato-real{border-color:rgba(37,211,102,.45)}
.cot-card.barato-real .cot-preco{color:var(--verde-tinta)}

/* faixa de economia: verde do site, não verde genérico */
.cot-resumo-bloco.destaque{
  background:linear-gradient(160deg,rgba(37,211,102,.13),rgba(37,211,102,.05));
}
.cot-resumo-bloco.destaque .rot{color:var(--verde)}
.cot-resumo-bloco.destaque strong{color:var(--verde-tinta)}

@media (prefers-reduced-motion:reduce){
  body::before{opacity:.2}
}

/* ---- tela de Recursos ---- */
.chave-linha.chave-geral{
  background:var(--amarelo-veu);border:1px solid rgba(255,209,0,.28);
  border-radius:var(--r-p);padding:12px;margin-bottom:10px;
}
.rec-desc{
  display:block;font-size:12px;color:var(--tinta-2);line-height:1.5;
  margin-top:3px;max-width:64ch;
}
.chave-txt .rec-desc + .mono{display:block;margin-top:4px;opacity:.7}
.rec-detalhe{color:var(--tinta-3);font-size:11px;max-width:38ch}
.rec-vazio{color:var(--tinta-3);text-align:center;padding:18px}

/* ============================================================
   TELA DE MENSAGENS
   ------------------------------------------------------------
   Cada texto que o sistema manda sozinho vira um cartão com
   duas abas: Visualização (como o cliente lê no WhatsApp) e
   Código (o texto cru, para editar).

   O botão Salvar mora no TOPO de propósito: com mensagem longa
   e tela de celular, um botão no pé fica fora da vista e parece
   que não dá para salvar.
   ============================================================ */
.etiqueta.amarela{background:var(--ambar-claro);color:var(--ambar-tinta)}

/* ---- filtro por grupo ----
   Quebra a linha em vez de rolar de lado: fila que rola esconde
   o último grupo e ninguém procura o que não aparece. */
.msg-filtros{
  display:flex;gap:7px;flex-wrap:wrap;min-width:0;
  margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--linha);
}
.msg-filtro{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1px solid var(--linha-forte);color:var(--tinta-2);
  border-radius:9px;padding:9px 13px;font-size:12.5px;font-family:inherit;
  cursor:pointer;min-height:40px;text-align:left;
}
.msg-filtro:hover{border-color:var(--roxo);color:var(--roxo)}
.msg-filtro.on{background:var(--roxo-veu);border-color:var(--roxo);color:var(--roxo)}
.msg-filtro .nm{line-height:1.25}
.msg-filtro .qt{
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:11px;color:var(--tinta-3);
}
.msg-filtro.on .qt{color:var(--roxo)}
/* amarelo marca o que foi mexido — é o que ele procura primeiro */
.msg-filtro .ed{
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:10.5px;font-weight:700;
  background:var(--ambar-claro);color:var(--ambar-tinta);
  border-radius:5px;padding:1px 5px;
}

.msg-grupo{
  font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-3);margin:20px 0 9px;padding-top:14px;
  border-top:1px solid var(--linha);
}
.msg-grupo:first-child{margin-top:0;padding-top:0;border-top:0}

.msg-item{
  border:1px solid var(--linha);border-radius:var(--r);
  background:var(--papel-2);padding:13px 15px;margin-bottom:10px;min-width:0;
}
.msg-item.aberta{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(180,95,224,.12)}

.msg-topo{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;flex-wrap:wrap;min-width:0;
}
.msg-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.msg-id strong{font-size:14px;color:var(--tinta)}
.msg-id .mono{font-size:10.5px;color:var(--tinta-3)}

.msg-acoes{display:flex;gap:7px;flex-wrap:wrap}
.botao-mini{
  background:transparent;border:1px solid var(--linha-forte);color:var(--tinta-2);
  border-radius:8px;padding:9px 13px;font-size:12px;font-family:inherit;
  cursor:pointer;min-height:40px;white-space:nowrap;
}
.botao-mini:hover{border-color:var(--roxo);color:var(--roxo)}
.botao.botao-mini-forte{padding:9px 15px;font-size:12px;min-height:40px;box-shadow:none}

.msg-onde{font-size:11.5px;color:var(--tinta-2);margin:7px 0 0;line-height:1.5;max-width:70ch}
.msg-nota{
  display:flex;gap:7px;align-items:flex-start;
  font-size:11.5px;color:var(--ambar);margin:7px 0 0;line-height:1.5;max-width:70ch;
}
.msg-nota svg{flex:none;margin-top:2px}

.msg-previa{
  margin:10px 0 0;padding:11px 13px;border-radius:var(--r-p);
  background:var(--fundo);border:1px solid var(--linha);
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:11.5px;line-height:1.65;color:var(--tinta-2);
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;min-width:0;
}

.msg-editor{margin-top:12px;min-width:0}
.msg-abas{display:flex;gap:6px;margin-bottom:11px;flex-wrap:wrap}
.msg-aba{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid var(--linha-forte);color:var(--tinta-2);
  border-radius:9px;padding:10px 15px;font-size:12.5px;font-family:inherit;
  cursor:pointer;min-height:42px;
}
.msg-aba.on{background:var(--roxo-veu);border-color:var(--roxo);color:var(--roxo)}

/* o balão imita a conversa: é onde o texto vai parar de verdade */
.msg-zap{
  background:var(--fundo);border:1px solid var(--linha);border-radius:var(--r);
  padding:16px;min-width:0;
}
.msg-balao{
  background:#144D37;color:#EAF7EF;border-radius:12px 12px 12px 3px;
  padding:11px 14px;font-size:13.5px;line-height:1.55;
  max-width:min(420px,100%);word-break:break-word;
}
.msg-balao strong{font-weight:700;color:#fff}
.msg-balao em{font-style:italic;opacity:.92}
.msg-balao code{
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:12.5px;background:rgba(0,0,0,.22);padding:1px 5px;border-radius:4px;
}

.msg-editor textarea{
  width:100%;min-height:220px;resize:vertical;
  background:var(--fundo);color:var(--tinta);
  border:1px solid var(--linha-forte);border-radius:var(--r-p);
  padding:12px 13px;font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:12.5px;line-height:1.7;
}
.msg-editor textarea:focus{
  outline:none;border-color:var(--roxo);box-shadow:0 0 0 3px rgba(180,95,224,.18);
}
.msg-vars{font-size:11.5px;color:var(--tinta-3);margin:0 0 9px;line-height:1.55}
.msg-vars code{
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:11.5px;color:var(--roxo);background:var(--roxo-veu);
  padding:1px 5px;border-radius:4px;
}
.msg-pe{display:flex;justify-content:flex-end;align-items:center;margin-top:9px}
.msg-conta{font-size:11px;color:var(--tinta-3)}
.msg-conta.longa{color:var(--ambar)}

@media (max-width:620px){
  .msg-topo{flex-direction:column;gap:9px}
  .msg-acoes{width:100%}
  .msg-acoes .botao-mini,.msg-acoes .botao{flex:1 1 auto;justify-content:center}
  .msg-aba{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   RECURSOS · ORDEM DAS FERRAMENTAS
   ------------------------------------------------------------
   Seta manda, arrastar entra por cima. No celular o dedo só tem
   a seta — por isso ela nunca some e nunca fica menor que 40px.
   ============================================================ */
.ord-setor{margin-bottom:20px}
.ord-setor:last-of-type{margin-bottom:6px}
.ord-setor-topo{
  display:flex;align-items:center;gap:9px;margin-bottom:9px;
  padding-bottom:8px;border-bottom:1px solid var(--linha);
}
.ord-setor-topo h3{font-size:11.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}

.ord-fila{display:flex;flex-direction:column;gap:6px;min-width:0}
.ord-item{
  display:flex;align-items:center;gap:11px;min-width:0;
  border:1px solid var(--linha);border-radius:10px;
  background:var(--papel-2);padding:9px 11px;cursor:grab;
}
.ord-item.arrastando{opacity:.4}
.ord-item.alvo{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(180,95,224,.16)}

.ord-num{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--roxo-veu);color:var(--roxo);
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;
}
.ord-ic{flex:0 0 auto;color:var(--tinta-3);display:flex}
.ord-nome{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;flex:1}
.ord-nome strong{font-size:13.5px;color:var(--tinta)}
.ord-nome .mono{font-size:10.5px;color:var(--tinta-3)}

.ord-setas{display:flex;gap:5px;flex:0 0 auto}
.ord-seta{
  width:40px;height:40px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linha-forte);background:var(--papel);color:var(--tinta-2);
  cursor:pointer;
}
.ord-seta:hover:not([disabled]){border-color:var(--roxo);color:var(--roxo)}
.ord-seta[disabled]{opacity:.3;cursor:not-allowed}
/* a mesma seta serve para os dois lados: uma gira meia volta */
.ord-seta.baixo svg{transform:rotate(180deg)}

.ord-pe{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ============================================================
   RECURSOS · CUSTOS DA LOCOMOÇÃO
   ============================================================ */
.cst-grade{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  min-width:0;
}
.cst-grade > *{min-width:0}
.cst-campo label{
  display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-2);margin-bottom:6px;
}
.cst-caixa{
  display:flex;align-items:center;
  border:1px solid var(--linha-forte);border-radius:var(--r-p);
  background:var(--fundo);overflow:hidden;
}
.cst-caixa:focus-within{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(180,95,224,.18)}
.cst-prefixo{
  flex:0 0 auto;padding:0 11px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;color:var(--tinta-3);border-right:1px solid var(--linha);
  align-self:stretch;display:flex;align-items:center;
}
.cst-caixa input{
  flex:1;min-width:0;min-height:44px;border:0;background:transparent;color:var(--tinta);
  padding:0 12px;font-family:'IBM Plex Mono',monospace;font-size:14px;
}
.cst-caixa input:focus{outline:none}

/* ============================================================
   RECURSOS · META DE VENDAS, O ANO INTEIRO
   ------------------------------------------------------------
   Doze campos por vez e uma barra para trocar de ano. A barra
   quebra linha de propósito: no celular o resumo desce sozinho
   para baixo das setas, em vez de espremer o ano.
   ============================================================ */
.meta-ano{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;min-width:0;
}
.meta-seta{
  width:40px;height:40px;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linha-forte);background:var(--fundo);color:var(--tinta-2);
  cursor:pointer;
}
.meta-seta:hover:not([disabled]){border-color:var(--roxo);color:var(--roxo)}
.meta-seta[disabled]{opacity:.3;cursor:not-allowed}
.meta-ano-num{
  font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:700;
  color:var(--tinta);min-width:62px;text-align:center;
}
.meta-ano-total{font-size:11.5px;color:var(--tinta-3);margin-left:auto;min-width:0}
@media (max-width:560px){
  .meta-ano-total{margin-left:0;width:100%}
}

/* ============================================================
   ORDENS DE SERVIÇO
   ============================================================ */
.os-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.os-fraco{color:var(--tinta-3);font-size:11.5px}

.os-numeros{
  display:grid;gap:10px;margin-bottom:16px;min-width:0;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
}
/* Os números são BOTÃO: cada um filtra a lista de baixo. Antes eram
   enfeite — diziam quantas havia e o técnico caçava quais eram. */
.os-num{
  border:1px solid var(--linha);border-radius:var(--r);background:var(--papel-2);
  padding:14px 15px;display:flex;flex-direction:column;gap:3px;min-width:0;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:background var(--transicao),border-color var(--transicao),transform var(--transicao);
}
.os-num:hover{background:var(--papel-3);transform:translateY(-1px)}
.os-num.aceso{background:var(--lavanda);border-color:var(--roxo) !important;
              box-shadow:0 0 0 1px var(--roxo) inset}
.os-num strong{font-size:26px;font-weight:900;line-height:1}
.os-num span{font-size:11px;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.06em}

/* ---------- tela de entrada: os dois caminhos ----------
   Google em cima para o dono, e-mail e senha embaixo para a equipe.
   A linha do "ou" existe para ninguém tentar os dois ao mesmo tempo. */
/* Botao do Google e uma <a>, entao precisa apagar o sublinhado que o
   navegador poe em link — sem isso parece texto clicavel, nao botao.
   E o fundo tem que ser NEUTRO: roxo aqui competiria com o "Entrar"
   da equipe, e as duas portas pareceriam a mesma coisa. */
.botao-google,
a.botao{text-decoration:none}

.botao-google{
  background:var(--papel-2) !important;
  background-image:none !important;
  color:var(--tinta);
  border:1px solid var(--linha-forte);
  box-shadow:none;
}
.botao-google:hover{
  background:var(--papel-3) !important;border-color:var(--roxo);
}
.botao-google:active{transform:translateY(1px)}
.botao-google svg{flex:0 0 auto}

.entrada-dica{
  font-size:11px;color:var(--tinta-3);text-align:center;
  margin:10px 0 0;line-height:1.45;
}
/* o formulário do cartão de entrada respira: os campos vinham colados
   no "ou" e a tela parecia empilhada às pressas */
.cartao-entrada .campo{margin-bottom:14px}
.cartao-entrada .campo:last-of-type{margin-bottom:18px}

.entrada-ou{
  display:flex;align-items:center;gap:12px;margin:18px 0;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);
}
.entrada-ou::before,.entrada-ou::after{
  content:"";flex:1;height:1px;background:var(--linha);
}

/* ---------- registro de erros ----------
   Lista corrida, o mais novo em cima. Vermelho só na tarja do tipo:
   a tela inteira vermelha faria parecer que o portal está pegando fogo
   quando muitas vezes é um aviso de rede que já se resolveu. */
.reg-lista{display:grid;max-height:66vh;overflow-y:auto}
.reg-item{
  padding:12px 16px;border-bottom:1px solid var(--linha);min-width:0;
}
.reg-item:last-child{border-bottom:0}
.reg-topo{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.reg-tipo{
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;
  background:var(--ambar-claro);color:var(--ambar-tinta);
}
.reg-item.erro .reg-tipo{background:var(--vermelho-claro);color:var(--vermelho-tinta)}
.reg-item.rede .reg-tipo{background:var(--roxo-veu);color:var(--roxo-medio)}
.reg-hora,.reg-onde{font-size:10.5px;color:var(--tinta-3)}
.reg-onde{margin-left:auto}
.reg-msg{font-size:13px;color:var(--tinta);line-height:1.5;word-break:break-word}
.reg-det{
  font-size:11px;color:var(--tinta-3);margin-top:4px;
  word-break:break-all;line-height:1.45;
}

/* ---------- aviso de versão nova ---------- */
.aviso-versao{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--papel-2);border:1px solid var(--roxo);
  border-radius:var(--r);padding:13px 15px;box-shadow:var(--sombra-alta);
}
.aviso-versao strong{display:block;font-size:13.5px;color:var(--tinta)}
.aviso-versao p{margin:3px 0 0;font-size:12px;color:var(--tinta-2);line-height:1.45}
.aviso-versao .botao{flex:0 0 auto}

/* ---------- apagar OS ----------
   Vermelho só aqui: é a única ação do módulo que não tem volta.
   A confirmação fica NA PÁGINA, não em caixa do navegador — no celular
   a caixa aparece longe do dedo e a pessoa confirma no automático. */
.botao-perigo{
  background:var(--vermelho-claro);color:var(--vermelho-tinta);
  border:1px solid var(--vermelho);
}
.botao-perigo:hover{background:var(--vermelho);color:#0A0611}

.os-confirma{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;
  padding:11px 14px;border-radius:var(--r);
  background:var(--vermelho-claro);border:1px solid var(--vermelho);
}
.os-confirma>span{
  flex:1;min-width:200px;font-size:13px;line-height:1.45;color:var(--vermelho-tinta);
}
.os-confirma strong{color:var(--tinta)}

/* ---------- abas das três etapas da OS ----------
   Entre a montagem e a instalação passam DIAS. Quem instala abria a
   ficha e tinha que rolar tudo que já foi feito para achar o que falta.
   Agora cada etapa é uma aba, e a ficha abre na etapa em que a máquina
   está. Cada aba diz o estado antes do clique. */
.os-abas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;min-width:0;
}
.os-aba{
  display:flex;align-items:center;gap:10px;min-width:0;min-height:56px;
  padding:11px 13px;border-radius:var(--r);text-align:left;font:inherit;cursor:pointer;
  border:1px solid var(--linha);background:var(--papel-2);color:var(--tinta-2);
  transition:all var(--transicao);
}
.os-aba:hover{background:var(--papel-3)}
.os-aba-bola{
  flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-size:12px;font-weight:900;background:var(--linha-forte);color:var(--tinta-2);
}
.os-aba-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.os-aba-txt strong{font-size:13px;font-weight:700;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-aba-txt span{font-size:10.5px;color:var(--tinta-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.os-aba.pronta .os-aba-bola{background:var(--verde);color:#0A0611}
.os-aba.agora  .os-aba-bola{background:var(--roxo);color:#0A0611}
.os-aba.espera{opacity:.62}

.os-aba.aceso{
  background:var(--lavanda);border-color:var(--roxo);
  box-shadow:0 0 0 1px var(--roxo) inset;opacity:1;
}
.os-aba.aceso .os-aba-txt strong{color:var(--tinta)}

@media (max-width:700px){
  /* no celular a etapa vira fileira: três colunas cortam o nome */
  .os-abas{grid-template-columns:1fr}
  .os-aba{min-height:52px}
}

.os-selo{
  display:inline-block;border:1px solid;border-radius:999px;
  padding:3px 11px;font-size:11px;font-weight:700;white-space:nowrap;
}
.os-tipo{
  display:inline-block;border:1px solid;border-radius:999px;
  padding:3px 11px;font-size:11px;font-weight:700;white-space:nowrap;
}

.os-tabela{width:100%;min-width:620px;border-collapse:collapse;font-size:12.5px}
.os-tabela th{
  text-align:left;padding:9px 12px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta-3);border-bottom:1px solid var(--linha);
}
.os-tabela td{padding:11px 12px;border-bottom:1px solid var(--linha)}
.os-tabela tr:last-child td{border-bottom:0}

/* capa da ficha */
.os-capa{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;min-width:0}
.os-capa-txt{min-width:0;flex:1 1 240px}
.os-capa-txt h2{font-size:21px;margin:4px 0 8px}
.os-capa-tempo{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}

.os-passo{display:flex;align-items:center;gap:9px;min-width:0}
.os-bola{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;color:#0A0611;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;
}
.os-passo-txt{display:flex;flex-direction:column;min-width:0}
.os-passo-txt strong{font-size:12.5px}
.os-passo-txt span{font-size:11px;color:var(--tinta-3)}

.os-dormindo{opacity:.55}
.os-sub{
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-3);margin:20px 0 9px;padding-top:14px;border-top:1px solid var(--linha);
}

/* pares de campo lado a lado, uma coluna no celular */
.os-par{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));min-width:0}
.os-par > *{min-width:0}

.os-lidos{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));min-width:0}
.os-lidos > *{min-width:0}
.os-lido{
  background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r-p);
  padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-width:0;
}
.os-lido span{font-size:10px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.06em}
.os-lido strong{font-size:13px;word-break:break-word}

/* etiqueta: verde quando libera, âmbar dizendo o que falta */
.os-etiqueta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-radius:var(--r);padding:13px 15px;margin-top:16px;min-width:0;
}
.os-etiqueta div{display:flex;flex-direction:column;gap:3px;min-width:0}
.os-etiqueta strong{font-size:13.5px}
.os-etiqueta span{font-size:11.5px;line-height:1.5}
.os-etiqueta.ok{border:1px solid var(--verde);background:var(--verde-veu)}
.os-etiqueta.ok strong{color:var(--verde-tinta)}
.os-etiqueta.falta{border:1px solid var(--ambar);background:var(--ambar-claro)}
.os-etiqueta.falta strong{color:var(--ambar-tinta)}
.os-etiqueta.falta span{color:var(--tinta-2)}

/* provas do alinhamento */
.os-provas{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));min-width:0}
.os-prova{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  border:1.5px dashed var(--linha-forte);border-radius:var(--r);
  padding:15px 11px;cursor:pointer;min-width:0;min-height:110px;justify-content:center;
}
.os-prova:hover{border-color:var(--roxo)}
.os-prova.tem{border-style:solid;border-color:var(--verde);background:var(--verde-veu)}
.os-prova-ic{color:var(--tinta-3);display:flex}
.os-prova.tem .os-prova-ic{color:var(--verde)}
.os-prova strong{font-size:12.5px}
.os-prova-st{font-size:10.5px;color:var(--tinta-3);word-break:break-word;line-height:1.4}

/* ============================================================
   PROGRAMAS DAS MÁQUINAS — o cadastro, em Recursos
   ------------------------------------------------------------
   Cadastrar mudou de lugar em 03/08/2026: saiu da aba Software e
   veio para cá, junto dos ajustes que só o dono mexe. Na aba ficou
   só o que a equipe faz dez vezes por dia — digitar o número e
   mandar.
   ============================================================ */
.sw-adm-linha{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-width:0;
  padding:10px 0;border-bottom:1px solid var(--linha);
}
.sw-adm-linha:last-of-type{border-bottom:0}
.sw-adm-txt{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:0}
.sw-adm-txt strong{font-size:13.5px;word-break:break-word}
.sw-adm-txt span{font-size:11.5px;color:var(--tinta-3)}
.sw-adm-bots{display:flex;gap:6px;flex:0 0 auto}
.sw-adm-bots .botao{min-height:40px;font-size:12px}
.sw-adm-form{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha-forte);min-width:0;
}
.sw-vias{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0;margin-top:4px}
.sw-via{position:relative;min-height:44px;cursor:pointer}
.sw-via input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sw-anexado{
  display:flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--verde-tinta);word-break:break-word;min-width:0;
}
@media(max-width:560px){
  .sw-adm-linha{flex-direction:column;align-items:stretch}
  .sw-adm-txt{flex:0 0 auto}
  .sw-adm-bots .botao{flex:1}
}

/* ============================================================
   PARTE 2 DA SEPARAÇÃO — as provas, com as três vias
   ------------------------------------------------------------
   Uma LISTA vertical, não a grade de cartões acima: cada prova
   carrega dois botões e um campo de texto, e isso não cabe num
   quadrado de 158px. No celular, que é onde o técnico está, a
   grade deixava os botões com 70px de largura.

   Alvo de toque de 44px nos dois botões — dedo não é ponteiro, e
   estas duas vias são o caminho principal da tela.
   ============================================================ */
.os-provas-lista{display:flex;flex-direction:column;gap:10px;min-width:0}
.os-prova-item{
  display:flex;flex-direction:column;gap:9px;min-width:0;
  border:1.5px dashed var(--linha-forte);border-radius:var(--r);padding:13px;
}
.os-prova-item.os-prova-ok{border-style:solid;border-color:var(--verde);background:var(--verde-claro)}
.os-prova-item.os-prova-subindo{border-color:var(--roxo);opacity:.75}
.os-prova-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.os-prova-txt strong{font-size:13px}
.os-prova-dica{font-size:11.5px;color:var(--tinta-3);line-height:1.4}
.os-prova-item.os-prova-ok .os-prova-dica{color:var(--verde-tinta)}

.os-prova-vias{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
/* O <input type=file> vive dentro do <label> e fica invisível: quem
   recebe o toque é o botão inteiro, com a nossa aparência. Sem isto o
   alvo seria o retângulo cinza do sistema, de uns 20px de altura. */
.os-prova-via{position:relative;flex:1 1 auto;min-width:0;min-height:44px;justify-content:center;cursor:pointer}
.os-prova-via input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.os-prova-via input[type=file]:disabled{cursor:progress}
/* O "Ver" não cresce: ele é conferência, não o trabalho. Com o mesmo
   peso dos outros dois ele parecia a ação principal do bloco já
   registrado — e a ação principal ali é seguir para a próxima prova. */
.os-prova-vias > a.os-prova-via{flex:0 0 auto}

.os-prova-status{font-size:11.5px;color:var(--tinta-3);line-height:1.45;margin:0;word-break:break-word}
.os-prova-status:empty{display:none}
.os-prova-status.os-prova-ok-txt a{color:var(--verde-tinta)}
.os-prova-status.os-prova-erro{color:var(--ambar-tinta)}

.os-arquivos{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));margin-top:12px;min-width:0}
.os-arq{
  display:flex;justify-content:space-between;gap:8px;min-width:0;
  border:1px solid var(--linha);border-radius:var(--r-p);padding:8px 11px;font-size:11.5px;
}
.os-arq span{color:var(--tinta-3)}
.os-arq.tem{border-color:var(--verde)}
.os-arq a{color:var(--verde-tinta)}

.etiqueta.verde{background:var(--verde-veu);color:var(--verde-tinta)}

@media (max-width:620px){
  .os-acoes .botao{flex:1 1 auto;justify-content:center}
  .os-capa-tempo{width:100%;flex-direction:column;gap:9px}
}

/* puxar do contrato: convite, nunca obrigação */
.os-doc{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;
  border:1px solid var(--linha-forte);border-radius:var(--r);
  background:var(--papel-2);padding:13px 15px;margin-bottom:18px;
}
.os-doc > svg{flex:none;color:var(--tinta-3)}
.os-doc > div:not(.os-doc-busca){display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 220px}
.os-doc strong{font-size:13px}
.os-doc span{font-size:11.5px;color:var(--tinta-2);line-height:1.5}
/* O <select> cresce ate a maior opcao: "M&I ELECTRIC BRAZIL SISTEMAS E
   SERVICOS EM ENERGIA LTDA · pedido 8862" empurrava 629px dentro de 232px
   de tela, e o painel cortava em silencio. min-width:0 e o que permite ao
   filho de flex encolher abaixo do proprio conteudo. */
.os-doc-busca{display:flex;gap:8px;flex:1 1 240px;min-width:0}
.os-doc-busca select{
  flex:1;min-width:0;max-width:100%;min-height:40px;
  background:var(--fundo);color:var(--tinta);
  border:1px solid var(--linha-forte);border-radius:var(--r-p);
  padding:0 11px;font-size:12.5px;
}
.os-doc-busca select:focus{outline:none;border-color:var(--roxo)}
.os-doc-busca input{
  width:150px;min-height:40px;background:var(--fundo);color:var(--tinta);
  border:1px solid var(--linha-forte);border-radius:var(--r-p);padding:0 11px;font-size:12.5px;
}
.os-doc-busca input:focus{outline:none;border-color:var(--roxo)}
.os-doc.ok{border-color:var(--verde);background:var(--verde-veu)}
.os-doc.ok > svg{color:var(--verde)}
.os-doc.ok strong{color:var(--verde-tinta)}

@media (max-width:620px){
  .os-doc-busca{width:100%}
  .os-doc-busca input{flex:1;width:auto}
}

/* ============================================================
   ORDENS DE SERVIÇO NO CELULAR
   ------------------------------------------------------------
   O técnico usa celular quase sempre — de pé, com uma mão na
   máquina, às vezes de luva. O computador fica como está; tudo
   abaixo só vale de 620px para baixo.

   As três decisões que mudam o dia dele:

   1. ETAPA PRONTA RECOLHE. Rolar três etapas concluídas para
      chegar na que interessa é o atrito que faz voltar ao papel.
   2. BOTÃO PRINCIPAL GRUDADO EMBAIXO, na zona do polegar. O
      formulário da separação é longo; o botão no fim da rolagem
      obrigava a percorrer tudo de novo só para salvar.
   3. ALVO DE 52px. 40px serve para dedo; 52 serve para dedo com
      luva, que é a realidade do galpão.
   ============================================================ */
.os-dobra{display:none}

@media (max-width:620px){

  /* ---- etapa concluída recolhe ---- */
  .os-etapa .painel-topo.os-clicavel{cursor:pointer;user-select:none}
  .os-etapa .os-dobra{
    display:flex;margin-left:6px;color:var(--tinta-3);
    transition:transform var(--transicao);
  }
  .os-etapa.os-fechada .painel-corpo{display:none}
  .os-etapa.os-fechada .os-dobra{transform:rotate(180deg)}
  .os-etapa.os-fechada .painel-topo{border-bottom:0}
  /* alvo generoso: o cabeçalho inteiro é o botão de abrir */
  .os-etapa .painel-topo.os-clicavel{min-height:56px}

  /* ---- ação principal na zona do polegar ----
     ARMADILHA: position:sticky nao funciona dentro de overflow:hidden,
     e .painel tem — para cortar os cantos arredondados. No celular o
     painel da etapa libera o corte; o que poderia vazar (tabela) ja rola
     dentro da propria caixa. */
  /* .quadro corta com overflow:hidden, e isso cria caixa de rolagem nos
     DOIS eixos — matando o sticky do botao. overflow-x:clip corta na
     horizontal sem criar caixa nenhuma, entao o corte continua valendo
     e o botao volta a grudar. */
  .quadro{overflow-x:clip;overflow-y:visible}
  .os-liberta{overflow-x:clip;overflow-y:visible}

  .os-liberta .painel-corpo .os-acao-fixa{
    position:sticky;
    /* 62px da barra de baixo do portal + respiro; senão o botão
       fica escondido atrás dela e parece que sumiu */
    bottom:calc(66px + env(safe-area-inset-bottom, 0px));
    z-index:6;margin:20px -16px -16px;padding:12px 16px;
    background:var(--papel);border-top:1px solid var(--linha-forte);
    box-shadow:0 -8px 20px rgba(10,6,17,.55);
  }
  .os-liberta .painel-corpo .os-acao-fixa .botao{
    flex:1;justify-content:center;min-height:52px;font-size:15px;
  }

  /* ---- navegação do painel em grade, não em fila ---- */
  .os-acoes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .os-acoes .botao{min-height:52px;justify-content:center;font-size:13.5px;padding:0 12px}
  .os-acoes .botao:first-child{grid-column:1 / -1}

  /* ---- números: dois por linha, sem virar tira fina ---- */
  .os-numeros{grid-template-columns:1fr 1fr;gap:8px}
  .os-num{padding:12px 13px}
  .os-num strong{font-size:23px}

  /* ---- campo de digitar: 16px impede o zoom automático do iPhone ---- */
  .os-etapa input,.os-etapa select,.os-doc-busca select,.os-doc-busca input{
    font-size:16px;min-height:50px;
  }
  .campo-caixa input,.campo-caixa select{min-height:50px}

  /* ---- chave de marcar: linha inteira clicável e alta ---- */
  .os-etapa .chave-linha{min-height:52px;padding:12px 6px}
  .os-etapa .grade-chaves{grid-template-columns:1fr;gap:4px}

  /* ---- provas do alinhamento: duas por linha, alvo grande ---- */
  .os-provas{grid-template-columns:1fr 1fr;gap:9px}
  .os-prova{min-height:118px;padding:14px 9px}

  /* ---- capa da ficha: o essencial primeiro ---- */
  .os-capa-txt h2{font-size:19px}
  .os-passo{gap:8px}

  /* ---- pares de campo viram um por linha ---- */
  .os-par{grid-template-columns:1fr}

  /* ---- etiqueta: botão cheio, é ação de galpão ---- */
  .os-etiqueta{flex-direction:column;align-items:stretch;gap:11px}
  .os-etiqueta .botao{justify-content:center;min-height:52px}
}

/* ============================================================
   TEC-03 ETIQUETAS — a aba de imprimir a qualquer hora
   ------------------------------------------------------------
   Cartão, não tabela: o galpão usa esta tela no celular, com a
   caixa na frente, e o que ele procura são dois números — o do
   pedido e o da série. Os dois em mono e grandes.
   ============================================================ */
.etq-topo{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.etq-topo .botao{min-height:44px}
.etq-lista{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px}
.etq-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--linha);border-radius:var(--r-p);
  background:var(--papel-2);padding:11px 13px;min-width:0;flex-wrap:wrap;
}
.etq-item .botao{flex:0 0 auto;min-height:44px}
.etq-falta{opacity:.7;border-style:dashed}
.etq-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 220px}
.etq-linha1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.etq-linha1 strong{font-size:15px;color:var(--tinta)}
.etq-os{font-size:11.5px;color:var(--tinta-3)}
.etq-maq{font-size:13px;color:var(--tinta-2);word-break:break-word}
.etq-apoio{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--tinta-3)}
.etq-pendente{font-size:11.5px;color:var(--ambar-tinta)}
.etq-botoes{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap}

@media (max-width:620px){
  .etq-item{flex-direction:column;align-items:stretch}
  .etq-item .botao{width:100%;justify-content:center;min-height:48px}
  .etq-botoes{width:100%;flex-direction:column}
  .etq-lista{padding:10px}
}

/* ============================================================
   ÍNDICES DA ORDEM DE SERVIÇO — o painel do dono
   ------------------------------------------------------------
   Cartão em grade que vira DUAS colunas no celular, não uma: são
   cinco números curtos, e uma coluna só empurraria "Concluídas"
   para longe do primeiro olhar. Por isso não reusa .dir-kpis, que
   é minmax(190px) porque lá o valor é R$ 1.234.567,89.
   ============================================================ */
.os-ind-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:10px;margin-bottom:16px;min-width:0;
}
.os-ind-kpis>*{min-width:0}
.os-ind-rosca{display:flex;flex-wrap:wrap;align-items:center;gap:18px;min-width:0}
.os-ind-rosca>*{min-width:0;flex:1 1 190px}

.os-ind-periodo{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.os-aba-per{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--linha);border-radius:999px;background:var(--papel-2);
  color:var(--tinta-2);font:inherit;font-size:13.5px;cursor:pointer;
}
.os-aba-per:hover{border-color:var(--roxo-escuro);color:var(--tinta)}
.os-aba-per.on{border-color:var(--roxo);background:var(--roxo-veu);color:var(--roxo-claro)}

/* TEC-02 Máquinas Prontas — as três abas são as situações reais da
   máquina, não uma máquina de estados paralela. */
.mq-abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.mq-aba{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;
  border:1px solid var(--linha);border-radius:999px;background:var(--papel-2);
  color:var(--tinta-2);font:inherit;font-size:13.5px;cursor:pointer;
}
.mq-aba:hover{border-color:var(--roxo-escuro);color:var(--tinta)}
.mq-aba.on{border-color:var(--roxo);background:var(--roxo-veu);color:var(--roxo-claro)}
.mq-aba-num{font-family:var(--mono);font-size:11.5px;opacity:.8}
.mq-pedidos{display:flex;flex-direction:column;gap:8px;margin:2px 0 10px;padding-left:12px;
  border-left:3px solid var(--roxo-escuro)}

/* pedidos aguardando separação, direto no painel */
.os-pedidos{display:flex;flex-direction:column;gap:8px;min-width:0}
.os-pedido{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--linha);border-radius:var(--r-p);
  background:var(--papel-2);padding:11px 13px;min-width:0;flex-wrap:wrap;
}
.os-pedido-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px}
.os-pedido-txt strong{font-size:13.5px;word-break:break-word}
.os-pedido-txt .mono{font-size:11px;color:var(--tinta-3)}
.os-pedido .botao{flex:0 0 auto;min-height:44px}

/* Pedido que já virou ordem: continua na lista, recuado. Some seria
   pior — o técnico acharia que o Bling parou de responder. */
.os-pedido-feito{opacity:.62;border-style:dashed}

@media (max-width:620px){
  .os-pedido{flex-direction:column;align-items:stretch}
  .os-pedido .botao{width:100%;justify-content:center;min-height:52px}
}

/* a máquina do pedido: é o que o técnico precisa, no lugar do valor */
.os-pedido-maq{
  font-size:12px;color:var(--tinta-2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}

/* ============================================================
   MÓDULO COM-01 · CADASTRO DE CLIENTE
   ------------------------------------------------------------
   Nasceu da fusão do Cadastro de Cliente com o Cadastro de
   Empresas, que era um iframe de tema próprio. Aqui não há tema
   próprio: só as peças que o portal já tem.

   Tudo que é fila de botão vira coluna no celular. O Alisson e as
   vendedoras cadastram cliente do telefone, no cliente, na feira —
   duas colunas de 180px não servem para dedo.
   ============================================================ */

/* seletor Pessoa Jurídica / Pessoa Física — a escolha que manda na tela */
.cc-pessoas{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
.cc-pessoas .botao{width:100%}

/* Cliente / Fornecedor / Transportadora */
.cc-rotulo{
  font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--roxo-medio);margin-bottom:9px;
}
.cc-papeis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cc-papeis .botao{width:100%;padding-left:12px;padding-right:12px}

/* CEP e o botão de buscar andam juntos: buscar CEP com o campo
   longe do botão é um vai-e-vem que ninguém faz no celular. */
.cc-cep{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.cc-cep .campo{margin:0}

.cc-check{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  font-size:14px;color:var(--tinta);cursor:pointer;
}
.cc-check input{width:18px;height:18px;accent-color:var(--roxo);flex:none}

.cc-acoes{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.cc-acoes #cc-gravar{flex:1;min-width:220px}

/* as inscrições, quando a empresa tem mais de uma ativa */
.cc-ie-opcoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cc-ie-opcoes .botao{font-family:var(--mono, inherit)}

@media (max-width:640px){
  /* Duas colunas viram uma. O nome do tipo de pessoa é comprido
     ("Pessoa Jurídica — CNPJ") e em 360px não cabe lado a lado. */
  .cc-pessoas{grid-template-columns:1fr}
  .cc-papeis{grid-template-columns:1fr}
  .cc-cep{grid-template-columns:1fr}
  .cc-cep .botao{width:100%}
  .cc-acoes{flex-direction:column}
  .cc-acoes .botao{width:100%}
  .cc-acoes #cc-gravar{min-width:0}
}

/* ============================================================
   DIR-01 · VISÃO GERAL BLING
   ------------------------------------------------------------
   Tela de número, e número se lê em mono. Amarelo aqui é
   tempero: marca o valor que decide, não o cartão inteiro.
   Espalhado, a tela vira semáforo e nada se destaca.
   ============================================================ */

/* o seletor de período ocupa a largura toda e rola dentro de si */
.dir-seg{width:100%;overflow-x:auto}
.dir-seg .seg-op{flex:1 1 auto;white-space:nowrap}

.dir-datas{
  display:grid;grid-template-columns:1fr 1fr auto;gap:12px;
  align-items:end;margin-top:16px;
}
.dir-datas .campo{margin-bottom:0}

.dir-periodo-rot{
  font-size:12.5px;font-weight:700;color:var(--tinta-3);
  letter-spacing:.04em;margin:18px 0 12px;
}

/* ---------- os indicadores ---------- */
.dir-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:13px;margin-bottom:18px;
}
.dir-kpi{
  background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r);padding:17px 18px;box-shadow:var(--sombra);
  min-width:0;
}
.dir-kpi-rot{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:9px;
}
.dir-kpi-val{
  font-size:22px;font-weight:700;color:var(--amarelo);
  line-height:1.15;word-break:break-word;
}
.dir-kpi-val.dir-verde{color:var(--verde-tinta)}
.dir-kpi-val.dir-vermelho{color:var(--vermelho-tinta)}
.dir-kpi-apoio{font-size:11.5px;color:var(--tinta-3);margin-top:7px;line-height:1.4}

/* ---------- a idade do dado e o botão de atualizar ----------
   Anda junto com o número, não num canto: dado guardado que aparece
   sem dizer de quando é vira decisão sobre o passado achando que é
   o presente. */
.dir-atualizar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:16px;
  padding:11px 14px;border:1px solid var(--linha);
  border-radius:var(--r-p);background:var(--papel);
}
.dir-atualizar-quando{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--tinta-3);
}
.dir-atualizar .botao{min-height:38px;padding:8px 14px;font-size:12.5px}

/* ---------- a meta de vendas ----------
   Amarelo é tempero: marca o valor que decide — a meta e o
   percentual. A barra é roxa porque é preenchimento, não aviso.
   Batida, vira verde: é o que deu certo. */
.dir-meta{margin-bottom:18px}
.dir-meta-topo{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px;
}
.dir-meta-rot{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);
}
.dir-meta-alvo{font-size:19px;font-weight:700;color:var(--amarelo)}

.dir-meta-barra{
  height:12px;border-radius:20px;background:var(--papel-2);
  border:1px solid var(--linha);overflow:hidden;
}
.dir-meta-barra > span{
  display:block;height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--roxo-medio),var(--roxo));
  transition:width var(--transicao);
}
.dir-meta-barra.batida > span{background:var(--verde)}

.dir-meta-linha{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:11px;font-size:13px;color:var(--tinta-2);
}
.dir-meta-pc{font-size:17px;font-weight:700;color:var(--amarelo)}
.dir-meta-pc.dir-verde{color:var(--verde-tinta)}
.dir-meta-falta{margin-top:4px;font-size:12.5px;color:var(--tinta-3)}
.dir-meta-falta .dir-verde{color:var(--verde-tinta);font-weight:600}
.dir-meta-vazia .dir-meta-rot{display:block}

@media (max-width:520px){
  .dir-meta-alvo{font-size:17px}
  .dir-meta-pc{font-size:15px}
}

/* ---------- participação por vendedor ---------- */
.dir-vends{display:grid;gap:17px}
.dir-vend{min-width:0}
.dir-vend-topo{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.dir-vend-nome{font-size:14px;font-weight:700;color:var(--tinta);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dir-vend-pct{margin-left:auto;font-size:13px;font-weight:700;color:var(--roxo);flex:0 0 auto}

/* Selo de canal: garantia, troca, bonificação. Não é gente, e a
   tela precisa dizer — senão entra na leitura de comissão como se
   fosse vendedor. Amarelo porque é rótulo do que vale olhar, e
   flex:0 0 auto para não ser espremido pelo nome comprido. */
.dir-vend-selo{
  flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  color:var(--amarelo);background:rgba(255,209,0,.12);
  border:1px solid rgba(255,209,0,.3);
}

.dir-vend-barra{
  height:9px;background:var(--papel-2);border-radius:6px;overflow:hidden;
}
.dir-vend-barra i{
  display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--roxo-fundo),var(--roxo));
  transition:width var(--transicao);
}
/* o que sobra não é vendedor: não disputa a atenção com quem é */
.dir-vend-resto .dir-vend-barra i{background:var(--linha-forte)}
.dir-vend-resto .dir-vend-nome,
.dir-vend-resto .dir-vend-pct{color:var(--tinta-3)}

.dir-vend-base{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;
  margin-top:7px;font-size:11.5px;color:var(--tinta-3);
}

/* Cadastros do Bling que não venderam no período. Nota, não barra. */
.dir-semvenda{
  margin-top:15px;padding-top:13px;border-top:1px solid var(--linha);
  font-size:11.5px;color:var(--tinta-3);line-height:1.5;
}

/* ============================================================
   O FILTRO POR ESTADO DO PEDIDO
   ------------------------------------------------------------
   Regra do Alisson, 30/07/2026: ao abrir, o painel conta só o
   pedido Atendido; o resto ele marca à mão.

   É cartão-botão, não caixa de seleção. Duas razões, as duas de
   celular: o alvo de toque tem de ser o bloco inteiro, e o valor
   de cada estado precisa aparecer junto — é olhando quanto tem
   parado em cada um que ele decide o que marcar.
   ============================================================ */
.dir-estados-topo{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center;
}
.dir-estados-lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));
  gap:10px;
}
.dir-estado{
  display:grid;grid-template-columns:auto 1fr;gap:3px 10px;
  align-items:center;text-align:left;
  padding:11px 13px;min-height:56px;
  /* filho de grid tem min-width:auto e se recusa a encolher abaixo
     do conteúdo. Sem isto, nome comprido de situação empurra a
     coluna e o corpo da página rola de lado no celular. */
  min-width:0;
  background:var(--papel);border:1.5px solid var(--linha);
  border-radius:var(--r-p);color:var(--tinta-2);
  transition:border-color var(--transicao),background var(--transicao),
             color var(--transicao),transform .1s;
}
.dir-estado:hover{border-color:var(--roxo-medio)}
.dir-estado:active{transform:scale(.985)}
.dir-estado.aceso{
  border-color:var(--roxo);background:var(--lavanda);color:var(--tinta);
}
.dir-estado-marca{
  grid-row:1 / span 2;
  width:20px;height:20px;border-radius:6px;flex:0 0 auto;
  border:1.5px solid var(--linha-forte);
  display:flex;align-items:center;justify-content:center;
  /* o "ok" existe sempre, e some pela cor: assim o cartão não muda
     de largura ao ser marcado, e o dedo não erra o alvo seguinte */
  color:transparent;
}
.dir-estado.aceso .dir-estado-marca{
  background:var(--roxo);border-color:var(--roxo);color:var(--branco);
}
.dir-estado-nome{
  font-size:13px;font-weight:700;line-height:1.25;
  min-width:0;overflow-wrap:anywhere;
}
.dir-estado-base{
  display:flex;gap:9px;flex-wrap:wrap;align-items:baseline;
  min-width:0;font-size:11.5px;color:var(--tinta-3);
}
.dir-estado-val{font-size:12.5px}
/* Amarelo é tempero: só o valor do que está marcado. */
.dir-estado.aceso .dir-estado-val{color:var(--amarelo);font-weight:700}

/* Estado que o Bling ainda não nomeou. O número é o que temos —
   fica em mono para não se passar por nome. */
.dir-estado-sem-nome .dir-estado-nome{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;
}

/* Aviso de que o nome não veio, e por quê. */
.dir-estados-nota{
  margin-top:13px;padding-top:12px;border-top:1px solid var(--linha);
  font-size:11.5px;color:var(--tinta-3);line-height:1.5;
}

/* O selo que diz, ao lado do total, que aquele número é recorte. */
.dir-recorte{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;
  background:var(--lavanda);color:var(--roxo-claro);
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

/* ============================================================
   OS GRÁFICOS — o CSS que nunca existiu
   ------------------------------------------------------------
   Descoberto em 30/07/2026, olhando a foto do responsivo. O
   `core/graficos.js` desenhava barras, rosca, trilho, legenda e
   cartão desde que nasceu, e **nenhuma** das classes `.gr-*`
   tinha uma linha de estilo em lugar nenhum do projeto.

   O resultado na tela do Alisson: a legenda saía como lista de
   marcadores do navegador, com "RecebidoR$ 383.586,82" grudado,
   e a barra do trilho não aparecia. Em DIR-05, DIR-06 e DIR-07.

   POR QUE NENHUM TESTE PEGOU: eles perguntavam se o elemento
   existe no HTML — `!!q('.gr-trilho')` — e ele existia. Existir
   no DOM e ter forma na tela são coisas diferentes. Só apareceu
   quando alguém abriu a foto.

   AS CORES DE SÉRIE, MEDIDAS EM 30/07/2026 com o validador de
   paleta (OKLab ΔE ×100, sobre a superfície #140C20), no par que
   o trilho de fato usa — verde #25D366 e roxo médio #C77FEA:

     separação em deuteranopia .... ΔE 21,1   (alvo ≥ 8)
     separação em tritanopia ...... ΔE 21,7
     separação em visão normal .... ΔE 36,8   (mínimo 15)
     contraste contra o fundo ..... passa nas duas

   A faixa de luminosidade reprova contra a paleta de referência
   da ferramenta, e fica assim mesmo: estas são as cores da marca,
   copiadas do tibatron.com.br e registradas no INPI. Trocá-las
   para agradar a uma faixa genérica sairia da identidade — e a
   regra que importa, a de separação, passa com folga.

   E vale a regra do topo do graficos.js: **cor nunca carrega a
   identidade sozinha**. Toda cor aqui anda com o nome escrito ao
   lado, então quem não distingue os tons continua lendo.
   ============================================================ */

/* ---------- barras horizontais: "quanto cada um puxou" ---------- */
.gr-barras{display:flex;flex-direction:column;gap:14px}
/* min-width:0 porque o nome usa reticências, e reticências só
   funcionam se TODOS os pais puderem encolher. Filho de flex se
   recusa a ir abaixo do próprio conteúdo sem isto — a armadilha
   que já custou uma aba sumida no celular, no CLAUDE.md. */
.gr-barra{min-width:0}
.gr-barra-topo{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.gr-barra-nome{
  font-size:13px;font-weight:700;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
/* O valor não encolhe: é o número que a barra existe para mostrar.
   Quem cede espaço é o nome, que tem reticências. */
.gr-barra-val{margin-left:auto;flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--tinta)}
.gr-selo{
  flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:20px;
  background:var(--lavanda);color:var(--roxo-claro);
}
.gr-trilha{height:9px;border-radius:20px;background:var(--papel-2);overflow:hidden}
/* Ponta arredondada, presa na base: a barra cresce da esquerda e o
   fim dela é o dado. Sem o min-width, valor pequeno some. */
.gr-trilha>i{
  display:block;height:100%;min-width:3px;border-radius:20px;
  background:var(--roxo);transition:width var(--transicao);
}
.gr-barra-apoio{margin-top:5px;font-size:11.5px;color:var(--tinta-3)}

/* ---------- trilho empilhado: "quanto já andou" ---------- */
.gr-trilho-caixa{display:flex;flex-direction:column;gap:12px}
.gr-trilho{
  display:flex;height:14px;border-radius:20px;overflow:hidden;
  background:var(--papel-2);
}
/* 2px de superfície entre os pedaços. Sem a folga, dois tons
   parecidos viram uma mancha só e some a divisão. */
.gr-pedaco{display:block;height:100%}
.gr-pedaco + .gr-pedaco{box-shadow:-2px 0 0 0 var(--papel)}

/* ---------- legenda: obrigatória a partir de duas séries ---------- */
/* `max-width:100%` SEGURA A LEGENDA DENTRO DA ROSCA.
   A `.gr-rosca-caixa` é flex em coluna com `align-items:center`, e
   center não estica nem limita o filho: a lista tomava a largura do
   CONTEÚDO. Com um cliente de nome longo ela chegou a 465px dentro de
   294px e empurrou o painel inteiro para 396px numa tela de 326px.
   Medido em 03/08/2026, quando a rosca entrou no painel da vendedora. */
.gr-legenda{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  list-style:none;margin:0;padding:0;
  max-width:100%;min-width:0;
}
.gr-legenda li{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.gr-ponto{
  flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  /* anel da cor do fundo: encosta em outro ponto e continua
     dando para ver onde um acaba e o outro começa */
  box-shadow:0 0 0 2px var(--papel);
}
/* O TEXTO USA TOKEN DE TEXTO, NUNCA A COR DA SÉRIE. Rótulo
   pintado da cor do dado fica ilegível no tom claro e vira
   decoração no escuro; quem carrega a identidade é o ponto. */
/* `min-width:0` NÃO É ENFEITE AQUI. O nome é filho de flex, e filho
   de flex nasce com `min-width:auto`: ele se recusa a encolher abaixo
   do próprio texto, e as reticências ao lado nunca chegam a agir.
   Com "M&I ELECTRIC BRAZIL SISTEMAS E SERVICOS EM ENERGIA LTDA" numa
   legenda de 326px, a linha empurrava o painel para 396px.
   Medido em 03/08/2026, quando a rosca entrou no painel da vendedora. */
.gr-leg-nome{font-size:12px;color:var(--tinta-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-leg-val{font-size:12px;font-weight:700;color:var(--tinta)}

/* ------------------------------------------------------------
   COLUNA — categoria de nome curto, no espaço de uma faixa
   ------------------------------------------------------------
   Regra do Alisson, 30/07/2026: o vocabulário é pizza, rosca,
   coluna, linha e barra — e só. Gráfico que a pessoa precisa
   aprender a ler é gráfico que ela não lê.

   Barra deitada e coluna em pé mostram a mesma coisa; o que decide
   é o RÓTULO. "MG" cabe embaixo de uma coluna; "Máquina de Corte
   Laser Co2 - 6040 - Bancada" não cabe. Dez UFs em coluna ocupam
   200px de altura onde dez barras deitadas ocupariam 550px.

   Quem rola é a FAIXA, nunca a página: com muitos estados as
   colunas mantêm a largura mínima e a faixa desliza. Regra da casa
   para conteúdo largo.
   ------------------------------------------------------------ */
.gr-col-caixa{display:flex;flex-direction:column;gap:14px}
.gr-col{
  display:flex;align-items:flex-end;gap:8px;
  overflow-x:auto;padding-bottom:2px;
}
/* TETO DE LARGURA. Sem ele, duas colunas dividiam a tela em duas
   faixas de 500px — e coluna de 500px de largura por 130px de
   altura não é coluna, é retângulo deitado. Com o teto elas ficam
   com proporção de coluna e a faixa começa pela esquerda. */
.gr-col-item{
  flex:1 1 0;min-width:46px;max-width:132px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
/* O valor fica EM CIMA da coluna, não dentro: dentro ele sumiria
   nas colunas baixas, que são justamente as que precisam do
   número para serem lidas. */
.gr-col-valor{
  font-size:10.5px;font-weight:700;color:var(--tinta);
  white-space:nowrap;line-height:1;
}
.gr-col-trilha{
  width:100%;height:132px;display:flex;align-items:flex-end;
  background:linear-gradient(var(--papel-2),var(--papel-2)) bottom/100% 1px no-repeat;
}
.gr-col-barra{
  width:100%;border-radius:6px 6px 0 0;overflow:hidden;
  background:var(--roxo);
  display:flex;flex-direction:column-reverse;
  transition:height var(--transicao);
}
/* Empilhada: cada parte com a folga de 1px da superfície entre
   ela e a de baixo, senão dois tons parecidos viram um só. */
.gr-col-parte{display:block;width:100%}
.gr-col-parte + .gr-col-parte{box-shadow:0 1px 0 0 var(--papel)}
.gr-col-nome{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;color:var(--tinta-2);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.gr-col-apoio{font-size:10px;color:var(--tinta-3);white-space:nowrap}

/* ---------- cascata: "de onde saiu este número" ---------- */
.gr-cascata{display:flex;flex-direction:column;gap:13px}
.gr-casc-passo{min-width:0}
.gr-casc-topo{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.gr-casc-nome{
  font-size:12.5px;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.gr-casc-val{margin-left:auto;flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--tinta)}
.gr-casc-trilha{height:11px;border-radius:20px;background:var(--papel-2);position:relative}
.gr-casc-trilha>i{
  display:block;height:100%;border-radius:20px;
  transition:width var(--transicao),margin-left var(--transicao);
}
/* O SINAL JÁ ESTÁ NO TEXTO (− e +), e a posição da barra no trilho
   diz o resto. A cor é a terceira pista, não a primeira: verde e
   amarelo dão ΔE 6,9 em protanopia, medido em 30/07/2026. */
.gr-casc-firme>.gr-casc-trilha>i{background:var(--roxo)}
.gr-casc-desce>.gr-casc-trilha>i{background:var(--amarelo)}
.gr-casc-sobe >.gr-casc-trilha>i{background:var(--verde)}
/* O total de chegada é o que o olho procura: fica em amarelo no
   texto e um pouco mais alto que os passos do meio. */
.gr-casc-passo:last-child .gr-casc-nome{font-weight:800;color:var(--tinta)}
.gr-casc-passo:last-child .gr-casc-val{color:var(--amarelo);font-size:14px}
.gr-casc-passo:last-child .gr-casc-trilha{height:14px}

/* ---------- linha: como foi ao longo do mês ---------- */
.gr-linha-caixa{display:flex;flex-direction:column;gap:8px}
/* preserveAspectRatio="none" no SVG: a altura é fixa e a largura
   estica. Um mês de 31 dias e outro de 28 têm a mesma altura, então
   dá para comparar os dois de relance. */
.gr-linha{width:100%;height:76px;display:block;overflow:visible}
.gr-linha-area{fill:var(--roxo-veu);stroke:none}
/* vector-effect mantém o traço com 1,6px reais mesmo com o viewBox
   esticado — sem ele a linha engorda em tela larga e some em tela
   estreita. */
.gr-linha-traco{
  fill:none;stroke:var(--roxo);stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
}
.gr-linha-ponto{fill:var(--amarelo);stroke:var(--papel);stroke-width:1;vector-effect:non-scaling-stroke}
.gr-linha-pes{
  display:flex;align-items:baseline;gap:10px;
  font-size:11px;color:var(--tinta-3);
}
.gr-linha-pes>span:last-child{margin-left:auto;text-align:right}
.gr-linha-pico{
  flex:1 1 auto;text-align:center;font-weight:700;color:var(--amarelo);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}

/* ---------- rosca ---------- */
.gr-rosca-caixa{display:flex;flex-direction:column;align-items:center;gap:14px}
.gr-rosca{width:100%;max-width:190px;height:auto}
/* A folga de 2px entre fatias é feita no dasharray, dentro do
   graficos.js — aqui só se garante que a ponta seja reta, senão o
   arredondamento do navegador come essa folga e duas fatias de tom
   parecido voltam a virar uma mancha só. */
.gr-arco{stroke-linecap:butt}
.gr-rosca-val{font-size:19px;font-weight:700;fill:var(--tinta)}
.gr-rosca-rot{font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;fill:var(--tinta-3)}

/* ---------- cartão de número: quando gráfico nenhum ajuda ---------- */
.gr-cartao{
  padding:15px 17px;background:var(--papel-2);border:1px solid var(--linha);
  border-radius:var(--r-p);
}
.gr-cartao-rot{font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:7px}
.gr-cartao-val{font-size:21px;font-weight:800;color:var(--tinta);line-height:1.15}
.gr-cartao-apoio{margin-top:6px;font-size:11.5px;color:var(--tinta-3)}
/* 'bom' e 'ruim' andam sempre com texto de apoio: verde e vermelho
   dão ΔE 4,3 em deuteranopia, então a cor não pode ser o único
   aviso. Está escrito no topo do graficos.js. */
.gr-cartao-val.gr-bom{color:var(--verde-tinta)}
.gr-cartao-val.gr-ruim{color:var(--vermelho-tinta)}

/* ---------- rodapé: de onde veio cada número ---------- */
.dir-rodape{
  display:flex;flex-direction:column;gap:5px;margin-top:18px;
  padding:14px 16px;background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r-p);font-size:11.5px;color:var(--tinta-3);line-height:1.5;
}
.dir-fonte{display:block;margin-top:5px;font-size:11.5px;opacity:.85}

/* ---------- DIR-04 · lista de clientes ---------- */
.dir-cli-busca{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;
}
.dir-cli-busca .campo{margin-bottom:0;min-width:0}
.dir-cli-nome{font-weight:700;color:var(--tinta)}

/* Campo em branco no cadastro é INFORMAÇÃO, não falha de tela.
   Fica legível e apagado — travessão mudo faria parecer coluna
   quebrada, e negrito faria parecer erro. */
.dir-cli-falta{color:var(--tinta-3);font-style:italic;font-size:13px}

.dir-cli-nav{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:16px;flex-wrap:wrap;
}
.dir-cli-pag{font-size:12.5px;font-weight:700;color:var(--tinta-3)}
/* Botão desligado continua ocupando o lugar: fila de navegação
   que muda de largura a cada página faz o dedo errar o alvo. */
.dir-cli-nav .botao[disabled]{opacity:.4;pointer-events:none;box-shadow:none}

/* ---------- DIR-02 · a tela de Vendas ---------- */
/* Os filtros numa fila só, acima dos gráficos: quem vai explorar o
   número precisa ver todos os cortes disponíveis de uma vez, não
   descobrir um por um. auto-fit para eles se reorganizarem sozinhos
   conforme a largura, sem uma media query por combinação. */
.vd-filtros{
  display:grid;gap:14px 18px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
/* min-width:0 em filho de grid, sempre: sem isto o seletor se recusa
   a encolher abaixo do próprio conteúdo e empurra a página de lado.
   É a armadilha que já custou uma aba sumida no celular. */
.vd-filtros>*{min-width:0}
.vd-filtro{margin-bottom:0}
.vd-filtro>label{
  display:block;margin-bottom:7px;
  font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);
}
/* A busca é a que mais precisa de espaço: nome de cliente e SKU são
   longos. Ela ocupa a linha inteira quando sobra largura. */
.vd-busca{grid-column:1/-1}
/* ------------------------------------------------------------
   O SELETOR QUEBRA LINHA EM VEZ DE ESCREVER POR CIMA
   ------------------------------------------------------------
   .seg-op tem white-space:nowrap. Com flex:1 numa coluna estreita,
   as quatro opções de Região ficavam do mesmo tamanho e o texto
   vazava para fora do botão — "Todo lugaSão PaulFora de SSem
   estado", tudo escrito por cima.

   Nada disso rolava de lado nem "vazava" pela régua do teste
   responsivo: os botões cabiam, o texto é que não. Apareceu na
   FOTO, que é para isso que ela existe.

   flex:1 1 auto deixa cada botão pedir a largura do próprio texto,
   e flex-wrap manda para a linha de baixo o que não couber.
   ------------------------------------------------------------ */
.vd-filtro .seg{width:100%;flex-wrap:wrap}
.vd-filtro .seg-op{flex:1 1 auto;justify-content:center;min-width:0}

/* ------------------------------------------------------------
   O QUE O GRÁFICO NÃO CONTA, EM UMA LINHA DE TEXTO
   ------------------------------------------------------------
   A pizza mostra proporção mas não diz quem é 2º e quem é 3º de
   relance — o olho não tira isso de ângulo. O treemap mostra
   tamanho mas não mostra quantidade de unidades.

   Em vez de um segundo gráfico para cada limitação, uma fila de
   texto embaixo. Ocupa 20px e resolve as duas.
   ------------------------------------------------------------ */
.vd-rank{
  display:flex;flex-wrap:wrap;gap:6px 16px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--linha);
  font-size:11.5px;color:var(--tinta-2);
}
.vd-rank-item{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.vd-rank-item b{color:var(--tinta-3);font-size:10px;font-weight:800}
.vd-rank-item .mono{color:var(--tinta);font-weight:700}

/* ------------------------------------------------------------
   NCM — código, nome, unidades e valor numa linha só
   ------------------------------------------------------------
   Não é barra e não é tabela com cabeçalho: é uma fila densa, que
   é o que cabe quando o código já é a informação e o nome é só
   contexto. Oito NCMs ocupam o que três barras ocupavam.
   ------------------------------------------------------------ */
.vd-ncm-lista{display:flex;flex-direction:column}
.vd-ncm-linha{
  display:grid;gap:4px 12px;align-items:baseline;
  grid-template-columns:auto 1fr auto auto;
  padding:9px 0;border-bottom:1px solid var(--papel-2);
}
.vd-ncm-linha:last-child{border-bottom:0}
.vd-ncm-cod{font-size:12.5px;font-weight:700;color:var(--roxo-claro)}
.vd-ncm-nome{
  font-size:12px;color:var(--tinta-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vd-ncm-un{font-size:11.5px;color:var(--tinta-3);white-space:nowrap}
.vd-ncm-val{font-size:12.5px;font-weight:700;color:var(--tinta);white-space:nowrap}

/* Dentro de SP e fora de SP: dois blocos com a mesma forma, para o
   olho comparar sem reaprender a ler. */
.vd-grupo{padding:16px 0;border-top:1px solid var(--linha)}
.vd-grupo:first-child{padding-top:0;border-top:0}
.vd-grupo-topo{display:flex;align-items:baseline;gap:12px;margin-bottom:3px}
.vd-grupo-rot{font-size:13.5px;font-weight:800;color:var(--tinta)}
.vd-grupo-val{margin-left:auto;font-size:15px;font-weight:800;color:var(--amarelo)}
.vd-grupo-apoio{margin-bottom:12px;font-size:11.5px;color:var(--tinta-3)}

/* ============================================================
   DIR-09 · NOTAS FISCAIS
   ------------------------------------------------------------
   Pedido do Alisson, 31/07/2026: "organize os botões de filtro
   entrada saída e comparação e quero algo mais fácil de
   visualizar".

   A ideia toda: o seletor deixa de ser rótulo e passa a ser o
   painel. Cada botão carrega o número do seu lado, então os três
   valores aparecem juntos e o clique serve para ver o detalhe —
   não para descobrir quanto é.
   ============================================================ */
.nf-modo{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
/* min-width:0 em filho de grid, sempre. É a armadilha do projeto:
   sem isto o botão se recusa a encolher abaixo do próprio texto e
   empurra a página de lado no celular. */
.nf-modo>*{min-width:0}

.nf-cmd{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:13px 14px;min-height:40px;min-width:0;
  background:var(--papel-2);border:1px solid var(--linha);border-radius:12px;
  cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s;
}
.nf-cmd:hover{border-color:var(--linha-forte)}
.nf-cmd:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}

/* ACESO É BORDA E FUNDO, NÃO SÓ COR DE TEXTO. O estado precisa
   sobreviver ao print em preto e branco e a quem não distingue
   tom — por isso o anel de dentro entra junto. */
.nf-cmd.aceso{
  background:var(--papel-3);border-color:var(--roxo);
  box-shadow:inset 0 0 0 1px var(--roxo);
}

.nf-cmd-rot{
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-3);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nf-cmd.aceso .nf-cmd-rot{color:var(--roxo-claro)}
.nf-cmd-val{
  font-size:17px;font-weight:800;color:var(--tinta);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nf-cmd-apoio{
  font-size:11px;color:var(--tinta-3);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* As três cores dizem o que cada lado é, e vêm SEMPRE com o nome
   escrito ao lado — cor sozinha não carrega informação aqui. */
.nf-cmd-saida .nf-cmd-val{color:var(--amarelo)}
.nf-cmd-entrada .nf-cmd-val{color:var(--roxo-claro)}
.nf-cmd-saldo .nf-cmd-val{color:var(--tinta)}

/* ---------- a fila de situações, e a busca ao lado ---------- */
.nf-linha-filtro{
  display:grid;gap:12px 16px;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(210px,300px);
}
.nf-linha-filtro>*{min-width:0}
.nf-busca{margin-bottom:0}

.nf-sits{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.nf-sit{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:8px 12px;min-height:40px;
  background:var(--papel-2);border:1px solid var(--linha);border-radius:999px;
  cursor:pointer;color:var(--tinta-2);
}
.nf-sit:hover{border-color:var(--linha-forte)}
.nf-sit:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}
.nf-sit.aceso{background:var(--papel-3);border-color:var(--roxo);color:var(--tinta)}
/* A marca só aparece no aceso. Ela é a segunda codificação do
   estado, junto da borda — nunca a cor sozinha. */
.nf-sit-marca{display:none;color:var(--verde);line-height:0}
.nf-sit.aceso .nf-sit-marca{display:inline-flex}
.nf-sit-nome{font-size:12.5px;font-weight:700;white-space:nowrap}
.nf-sit-val{font-size:12px;color:var(--tinta-3);white-space:nowrap}
.nf-sit.aceso .nf-sit-val{color:var(--amarelo)}
.nf-sit-qtd{
  font-size:11px;font-weight:800;color:var(--tinta-3);
  background:var(--papel);border-radius:999px;padding:1px 7px;
}

.nf-atalhos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* O aviso fiscal fica no topo e NÃO em rodapé — é o que impede o
   número de ser lido como faturamento. Só o espaçamento é ajustado
   aqui; o texto não encolhe. */
.nf-aviso{margin-bottom:14px}

/* ---------- DIR-05 · a tabela de títulos a receber ---------- */
.rec-filtro{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:end;
}
.rec-filtro .campo{margin-bottom:0;min-width:0}
/* O seletor é filho de grid, e filho de grid não encolhe abaixo do
   próprio conteúdo sem isto. Já custou uma aba sumida no celular —
   está no CLAUDE.md. */
.rec-filtro>*{min-width:0}

/* Dinheiro alinhado à direita: é assim que a coluna vira uma
   régua e o olho compara ordem de grandeza sem ler cada número. */
.rec-num{text-align:right}
/* Número não quebra linha. "R$ 38.241,46" partido em "R$ 38.241," e
   "46" deixa de ser um número e vira duas coisas — e a coluna para
   de funcionar como régua. Quem cede espaço é o nome do cliente,
   que tem onde quebrar. */
.rec-tabela .mono{white-space:nowrap}
/* O rodapé da tabela é da tabela, não da tela: encostado nela e
   sem a margem que separa os painéis. */
.rec-tabela + .dir-rodape{
  margin:0;border:0;border-top:1px solid var(--linha);border-radius:0;
}
.rec-tabela + .dir-rodape span{font-weight:700}

/* ============================================================
   360px — duas colunas viram uma
   O rótulo "Valor de pedidos" com R$ 1.234.567,89 embaixo não
   cabe em meia tela de celular pequeno.
   ============================================================ */
@media (max-width:640px){
  .dir-datas{grid-template-columns:1fr}
  .dir-datas .botao{width:100%}
  .dir-kpis{grid-template-columns:1fr}
  .dir-kpi-val{font-size:20px}
  .dir-vend-base{flex-direction:column;gap:3px}
  /* Um estado por linha. Dois cartões lado a lado em 360px cortam
     "Preparação de Máquina" no meio, e o nome do estado é
     justamente o que ele precisa ler para decidir. */
  .dir-estados-lista{grid-template-columns:1fr}
  /* Todos / Só atendido dividem a linha: alvo de dedo, não de
     ponteiro. */
  .dir-estados-topo .botao{flex:1 1 0;min-width:0}
  /* O botão Buscar desce e ocupa a largura toda: alvo de dedo,
     não de ponteiro. */
  .dir-cli-busca{grid-template-columns:1fr}
  .dir-cli-busca .botao{width:100%}
  /* Anterior e Próxima dividem a linha em partes iguais, com o
     número da página acima — assim nenhum dos dois encolhe
     abaixo do alvo de toque. */
  .dir-cli-nav{gap:10px}
  .dir-cli-nav .botao{flex:1 1 0;min-width:0}
  .dir-cli-pag{order:-1;width:100%;text-align:center}

  /* ------------------------------------------------------------
     A TABELA VIRA FICHA NO CELULAR
     ------------------------------------------------------------
     A regra geral de tabela em tela pequena é
     display:block + overflow-x:auto + nowrap. Ela impede o CORPO
     de rolar de lado, que é o defeito grave, e por isso o teste
     media tudo verde.

     Só que na FOTO de 360px o documento não aparecia: a coluna
     existia à direita, atrás de uma rolagem lateral dentro da
     tabela que ninguém adivinha que está lá. E documento é como
     se identifica um cliente — informação de decisão não pode
     depender de descobrir um gesto.

     Então aqui cada linha vira ficha empilhada: nome em cima,
     documento embaixo, nada escondido e nada rolando.
     ------------------------------------------------------------ */
  .dir-cli-tabela{display:block;overflow-x:visible;white-space:normal}
  .dir-cli-tabela thead{display:none}
  .dir-cli-tabela tbody,
  .dir-cli-tabela tr,
  .dir-cli-tabela td{display:block;white-space:normal}
  .dir-cli-tabela tr{padding:13px 16px;border-bottom:1px solid var(--papel-2)}
  .dir-cli-tabela tr:last-child{border-bottom:0}
  .dir-cli-tabela td{padding:0;border:0}
  .dir-cli-tabela td + td{margin-top:5px}
  /* Razão social de empresa é comprida e não tem espaço onde
     quebrar com jeito. Sem isto ela estoura a ficha. */
  .dir-cli-nome{overflow-wrap:anywhere}

  /* ------------------------------------------------------------
     DIR-05 · O TÍTULO VIRA FICHA, COM O RÓTULO JUNTO
     ------------------------------------------------------------
     Mesma razão da tabela de clientes: rolagem lateral dentro da
     tabela esconde coluna atrás de um gesto que ninguém adivinha,
     e aqui o que ficaria escondido é o VALOR — a última coluna.

     A diferença é que são cinco campos, não três. Empilhados sem
     rótulo viram cinco linhas soltas onde não se sabe qual é o
     vencimento e qual é a emissão. Por isso cada célula carrega o
     data-rot e o desenha à frente do dado.
     ------------------------------------------------------------ */
  .rec-tabela{display:block;overflow-x:visible;white-space:normal}
  .rec-tabela thead{display:none}
  .rec-tabela tbody,
  .rec-tabela tr,
  .rec-tabela td{display:block;white-space:normal}
  .rec-tabela tr{padding:13px 16px;border-bottom:1px solid var(--papel-2)}
  .rec-tabela tr:last-child{border-bottom:0}
  .rec-tabela td{padding:0;border:0;display:flex;gap:10px;align-items:baseline}
  .rec-tabela td + td{margin-top:6px}
  .rec-tabela td::before{
    content:attr(data-rot);flex:0 0 84px;
    font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--tinta-3);
  }
  \* A PRIMEIRA COLUNA É O TÍTULO DA FICHA: fica em cima, inteira e
     sem rótulo — o que ela carrega já se identifica sozinho.

     São três nomes porque são três tabelas com o mesmo desenho e
     assuntos diferentes: "Cliente" nos títulos a receber, "Nome" em
     quem aparece nas notas (que pode ser fornecedor, não só
     cliente) e "NCM" no saldo do DIR-09. Marcar a célula de NCM
     como "Cliente" só para pegar carona neste CSS funcionaria na
     tela e mentiria no HTML — e é o tipo de acoplamento escondido
     que quebra quando alguém renomeia a coluna. */
  .rec-tabela td[data-rot="Cliente"],
  .rec-tabela td[data-rot="Nome"],
  .rec-tabela td[data-rot="NCM"]{display:block}
  .rec-tabela td[data-rot="Cliente"]::before,
  .rec-tabela td[data-rot="Nome"]::before,
  .rec-tabela td[data-rot="NCM"]::before{content:none}
  /* Alinhar o valor à direita só faz sentido em coluna. Na ficha
     ele segue o rótulo, como os outros. */
  .rec-num{text-align:left}

  /* ------------------------------------------------------------
     A LISTA DE ORDENS DE SERVIÇO, MESMO PADRÃO
     ------------------------------------------------------------
     Ela tinha min-width:620px dentro de uma caixa com rolagem
     lateral. Em 360px isso escondia justamente as duas últimas
     colunas — Situação e o botão Abrir —, atrás de um gesto que
     ninguém adivinha que existe. E o galpão usa esta tela no
     celular.

     O botão Abrir fica de fora do padrão: célula sem rótulo e
     largura toda, porque é a ação da ficha.
     ------------------------------------------------------------ */
  .os-tabela{display:block;overflow-x:visible;white-space:normal;min-width:0}
  .os-tabela thead{display:none}
  .os-tabela tbody,
  .os-tabela tr,
  .os-tabela td{display:block;white-space:normal}
  .os-tabela tr{padding:13px 16px;border-bottom:1px solid var(--papel-2)}
  .os-tabela tr:last-child{border-bottom:0}
  .os-tabela td{padding:0;border:0;display:flex;gap:10px;align-items:baseline}
  .os-tabela td + td{margin-top:7px}
  .os-tabela td::before{
    content:attr(data-rot);flex:0 0 74px;
    font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--tinta-3);
  }
  /* O número da OS é o título da ficha: em cima, inteiro, sem rótulo */
  .os-tabela td[data-rot="OS"]{display:block;white-space:normal}
  .os-tabela td[data-rot="OS"]::before{content:none}
  .os-tabela td[data-rot=""]::before{content:none;flex:0}
  .os-tabela td[data-rot=""] .botao-mini{width:100%;min-height:44px}

  /* Seletor de tipo e busca em linhas separadas: lado a lado em
     360px o campo de busca fica menor que a palavra "Buscar". */
  .rec-filtro{grid-template-columns:1fr}

  /* A rosca não passa de meia tela: acima disso ela empurra a
     legenda, que é onde estão os números, para fora do primeiro
     olhar. */
  .gr-rosca{max-width:160px}

  /* O NCM vira duas linhas: código e valor em cima, nome e
     unidades embaixo. Quatro colunas em 360px cortam o nome em
     três letras. */
  /* ------------------------------------------------------------
     DIR-09 no celular
     ------------------------------------------------------------
     Os três botões CONTINUAM em três colunas. Virá-los em pilha
     resolveria a largura e custaria o que eles têm de melhor:
     saída, entrada e diferença lado a lado, comparáveis de
     relance. O que cede é o tamanho da letra e o respiro.
     ------------------------------------------------------------ */
  .nf-cmd{padding:10px 8px}
  .nf-cmd-rot{font-size:9px;letter-spacing:.04em}
  .nf-cmd-val{font-size:13.5px}
  .nf-cmd-apoio{font-size:9.5px}
  /* A busca desce para baixo dos chips: lado a lado em 360px ela
     fica menor que a palavra "Buscar". */
  .nf-linha-filtro{grid-template-columns:1fr}
  .nf-atalhos .botao{flex:1 1 100%}

  .vd-ncm-linha{grid-template-columns:auto 1fr;row-gap:2px}
  .vd-ncm-cod{grid-column:1;grid-row:1}
  .vd-ncm-val{grid-column:2;grid-row:1;text-align:right}
  .vd-ncm-nome{grid-column:1/-1;grid-row:2;white-space:normal;overflow-wrap:anywhere}
  .vd-ncm-un{grid-column:1/-1;grid-row:3}

  /* ------------------------------------------------------------
     O NOME DA BARRA GANHA A LINHA INTEIRA
     ------------------------------------------------------------
     No monitor, nome e valor cabem lado a lado. Em 360px o nome
     encolhia até virar reticências — "Máqui…", "L…" — e o nome da
     máquina é justamente a informação do gráfico. Um gráfico de
     produtos onde não dá para ler o produto não é gráfico.

     Nada disso reprovava na medição: não rolava de lado, não
     vazava, o alvo de toque estava bom. Apareceu na foto.

     Agora o nome ocupa a primeira linha e quebra à vontade; selo e
     valor descem para a segunda, um em cada ponta.
     ------------------------------------------------------------ */
  .gr-barra-topo{flex-wrap:wrap;row-gap:4px}
  .gr-barra-nome{
    flex:1 1 100%;white-space:normal;overflow:visible;
    overflow-wrap:anywhere;line-height:1.35;
  }
}

/* ============================================================
   DIR-08 · COMPRAS — as três áreas
   ------------------------------------------------------------
   Fornecedores | Catálogo | Pedido.

   DUAS DECISÕES QUE VIERAM DA FOTO, NÃO DA MEDIÇÃO
   (30/07/2026 — as duas passaram verde no teste-responsivo.js
   antes de alguém olhar a tela)

   1. O CATÁLOGO NÃO É <table>.
      Era. No celular virava cartão com display:block nas linhas,
      e não funcionou: medido no Chromium em 360px, a <tr> ficou
      com 26px de largura enquanto o conteúdo pedia 545. Elemento
      de tabela com display trocado faz o navegador montar caixas
      anônimas, e a largura declarada deixa de valer. A descrição
      saía pela direita e o campo de quantidade sumia junto.
      Lista com grid não tem esse problema: o mesmo HTML vira seis
      colunas no monitor e cartão empilhado no celular.

   2. PREÇO NÃO PODE FICAR ATRÁS DE ROLAGEM.
      A primeira versão obedecia a regra ao pé da letra — o corpo
      da página não rolava, quem rolava era a tabela. Só que em
      360px sobrava CÓDIGO e DESCRIÇÃO na tela e o PREÇO ficava
      fora do campo de visão. O CLAUDE.md é explícito: texto
      auxiliar pode sumir, informação de decisão nunca.

   E a de sempre: min-width:0 em filho de grid. Sem isso a coluna
   do meio, com o catálogo dentro, empurra a página inteira.
   ============================================================ */

.cmp{ display:flex; flex-direction:column; gap:12px; min-width:0; }

.cmp-grade{
  display:grid; gap:12px; align-items:start; min-width:0;
  grid-template-columns:minmax(0,236px) minmax(0,1fr) minmax(0,296px);
}
.cmp-grade > *{ min-width:0; }

.cmp-lado, .cmp-centro{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--r); padding:12px; min-width:0;
}

.cmp-cabeca{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }

/* Quem desenha a moldura do input neste projeto é `.campo-caixa`.
   `.campo` sozinho é o GRUPO (rótulo + caixa) e não pinta nada —
   usá-lo no <input> deixava campo invisível: existia, media 88px
   e ninguém via. Pego na foto, não na medição.

   O min-height:44px também é conserto: align-items:center tira o
   esticamento do flex, e sem ele a caixa fica com a altura do
   texto — 20px, metade do alvo mínimo de toque. */
.cmp-busca{ flex:1 1 150px; min-width:0; min-height:44px; }
.cmp-cabeca .botao{ min-height:44px; }

/* ---- lista de fornecedores ---- */
.cmp-forn{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;
           max-height:60vh; overflow-y:auto; }
/* Uma coluna, e o selo vai para a linha de baixo.
   Com o selo ao lado, "Potencial Laser" virava "Potenci..." — o
   nome do fornecedor e o selo de estado disputavam 236px e quem
   perdeu foi o nome, que e justamente o que identifica a linha.
   Visto na foto com o catalogo real. */
.cmp-forn-item{
  width:100%; min-height:44px; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:minmax(0,1fr); gap:4px; align-items:start;
  justify-items:start;
  background:var(--papel-2); border:1px solid var(--linha); border-radius:var(--r-p);
  padding:8px 10px; color:var(--tinta); font:inherit; transition:var(--transicao);
}
.cmp-forn-item:hover{ border-color:var(--roxo); }
.cmp-forn-item.aberto{ border-color:var(--roxo); background:var(--lavanda); }

/* overflow-wrap:anywhere continua, porque sem ele nome sem espaço
   estoura a coluna. Mas sozinho ele quebrava
   DISTRIBUIDORA-DE-COMPONENTES-OPTOELETRONICOS-LTDA letra a letra,
   e o cartão virava um paredão de sete linhas. */
.cmp-forn-nome{
  font-weight:600; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.cmp-forn-meta{ font-size:.78rem; color:var(--tinta-3);
                font-family:"IBM Plex Mono",monospace; }

.cmp-selo{ font-size:.7rem; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.cmp-selo-ok{ background:var(--verde-claro); color:var(--verde-tinta); }
.cmp-selo-erro{ background:var(--vermelho-claro); color:var(--vermelho-tinta); }
.cmp-selo-atencao{ background:var(--amarelo-veu); color:var(--amarelo-tinta); }
.cmp-selo-info{ background:var(--roxo-veu); color:var(--roxo-claro); }
.cmp-selo-apagado{ background:var(--papel-3); color:var(--tinta-3); }
/* Por qual empresa o pedido saiu. Roxo, o mesmo do selo de
   informação — não é "deu certo" nem "deu errado", é de quem é. */
.cmp-selo-empresa{ background:var(--roxo-veu); color:var(--roxo-claro);
                   font-weight:600; letter-spacing:.02em; }

/* Os dois botões de emitir, um por empresa. Lado a lado no monitor,
   um sobre o outro no celular — e cada um ocupando a largura toda
   lá, porque botão de meia linha que cria pedido de verdade no ERP
   é alvo pequeno demais para o dedo. */
.cmp-acoes-empresa{ display:flex; flex-wrap:wrap; gap:8px; }
.cmp-acoes-empresa .botao{ flex:1 1 180px; min-width:0; }

/* O botão da empresa que ainda não tem vínculo. Ele APARECE — some
   se lê como "não foi feito", e desligado se lê como "falta um
   passo", que é a verdade. O motivo vai dentro do próprio botão,
   porque nota embaixo já provou que passa batido. */
.cmp-acoes-empresa .cmp-sem-vinculo{
  background:var(--papel-3); color:var(--tinta-3);
  border:1px dashed var(--linha); box-shadow:none;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  line-height:1.2;
}
.cmp-botao-por-que{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--amarelo); font-weight:600;
}
@media (max-width:480px){
  .cmp-acoes-empresa{ flex-direction:column; }
  .cmp-acoes-empresa .botao{ flex:1 1 auto; width:100%; }
}

/* ---- catálogo ---- */
.cmp-itens{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;
            max-height:62vh; overflow-y:auto; min-width:0; }
/* Cinco colunas em ~480px de coluna do meio é apertado, e a conta
   não fecha por dedução — foi medida na foto duas vezes:
     6 colunas → descrição com 120px, quebrando no meio da palavra
     piso de 140px na descrição → "Somar" e o preço cortados

   O que fecha: gap menor, piso de 110px na descrição e o campo de
   quantidade em 64px. Some 60+110+25+85+140 = 420, mais 32 de
   vão = 452, dentro dos ~480 disponíveis. */
.cmp-item{
  display:grid; align-items:center; gap:4px 8px; min-width:0;
  grid-template-columns:auto minmax(110px,1fr) auto auto auto;
  padding:8px 4px; border-bottom:1px solid var(--linha);
}
.cmp-item > *{ min-width:0; }
.cmp-cabecalho{ color:var(--tinta-3); font-size:.72rem; text-transform:uppercase;
                letter-spacing:.05em; border-bottom:1px solid var(--linha-forte); }
.cmp-cod{ font-family:"IBM Plex Mono",monospace; color:var(--amarelo); white-space:nowrap; }
.cmp-num{ text-align:right; font-family:"IBM Plex Mono",monospace; white-space:nowrap; }
.cmp-un{ color:var(--tinta-3); white-space:nowrap; }
.cmp-fino{ color:var(--tinta-3); }
.cmp-desc{ overflow-wrap:anywhere; }
.cmp-sub{ display:block; font-size:.75rem; color:var(--tinta-3); }
.cmp-sem{ opacity:.62; }
.cmp-acao{ display:flex; gap:6px; align-items:center; justify-content:flex-end; }
.cmp-qtd{ width:64px; min-height:40px; padding:0 7px; flex:0 0 auto; }
.cmp-qtd input{ text-align:right; padding:8px 0; font-size:14px; }
.cmp-add{ min-height:40px; white-space:nowrap; padding:0 12px; flex:0 0 auto; }
.cmp-check{ display:inline-flex; align-items:center; gap:6px; min-height:40px;
            color:var(--tinta-2); font-size:.85rem; white-space:nowrap; }

/* ---- pedido ---- */
.cmp-ped{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px;
          max-height:44vh; overflow-y:auto; }
.cmp-ped-item{
  display:grid; grid-template-columns:1fr auto; gap:2px 8px;
  background:var(--papel-2); border:1px solid var(--linha);
  border-radius:var(--r-p); padding:8px 10px;
}
.cmp-ped-desc{ font-weight:600; overflow-wrap:anywhere; }
.cmp-ped-tot{ font-family:"IBM Plex Mono",monospace; text-align:right; white-space:nowrap; }
.cmp-ped-qtd{ grid-column:1/-1; font-size:.78rem; color:var(--tinta-3);
              font-family:"IBM Plex Mono",monospace; }
.cmp-ped-aviso{ grid-column:1/-1; font-size:.75rem; color:var(--amarelo-tinta); }
.cmp-ped-item .botao-mini{ grid-column:1/-1; justify-self:start; min-height:32px; }
/* edição de preço, admin — linha própria, não dentro do resumo "qtd
   × preço": o campo precisa dos 40px de alvo de toque da casa, e a
   linha de resumo é fina de propósito (.78rem). */
.cmp-ped-preco-linha{ grid-column:1/-1; display:flex; align-items:center; gap:8px;
                       font-size:.78rem; color:var(--tinta-3); }
.cmp-preco-edit{ width:112px; min-height:40px; padding:0 8px; }
.cmp-preco-edit input{ text-align:right; font-size:.85rem; }

/* ---- gráficos da aba Histórico ---- */
.cmp-graf-bloco{ margin:0 0 16px; }
.cmp-graf-titulo{ font-size:.85rem; font-weight:700; color:var(--tinta-2); margin:0 0 8px; }

/* ---- comparador de preço ---- */
.cmp-comparar-add{ min-height:40px; white-space:nowrap; }
.cmp-comparar-add.ativo{ background:var(--verde); border-color:var(--verde); color:#06210F; }
.cmp-cmp{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px;
          max-height:44vh; overflow-y:auto; }
.cmp-cmp-item{
  display:grid; grid-template-columns:1fr auto; gap:2px 8px;
  background:var(--papel-2); border:1px solid var(--linha);
  border-radius:var(--r-p); padding:8px 10px;
}
.cmp-cmp-barato{ border-color:var(--verde); }
.cmp-cmp-desc{ font-weight:600; overflow-wrap:anywhere; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cmp-cmp-forn{ grid-column:1/-1; font-size:.78rem; color:var(--tinta-3); }
.cmp-cmp-preco{ font-family:"IBM Plex Mono",monospace; text-align:right; white-space:nowrap; }
.cmp-cmp-tirar{ grid-column:1/-1; justify-self:start; min-height:32px; }

.cmp-somas{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin:0 0 10px; }
.cmp-somas dt{ color:var(--tinta-2); }
.cmp-somas dd{ margin:0; text-align:right; font-family:"IBM Plex Mono",monospace; }
.cmp-somas .cmp-total{ font-weight:700; color:var(--tinta); font-size:1.05rem;
                       border-top:1px solid var(--linha); padding-top:6px; margin-top:2px; }

.cmp-acoes{ display:flex; gap:8px; flex-wrap:wrap; }
.cmp-acoes .botao{ min-height:44px; flex:1 1 auto; }

.cmp-nota{ font-size:.78rem; color:var(--tinta-3); margin:6px 0 0; }
.cmp-alerta{ color:var(--amarelo-tinta); }
.cmp-vazio-lado{ color:var(--tinta-3); font-size:.88rem; padding:14px 4px; text-align:center; }

/* ---- o seletor só existe no celular ---- */
.cmp-abas{ display:none; gap:6px; }
.cmp-aba{
  flex:1 1 0; min-height:44px; min-width:0; cursor:pointer;
  background:var(--papel-2); border:1px solid var(--linha); border-radius:var(--r-p);
  color:var(--tinta-2); font:inherit; font-size:.85rem; padding:0 6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmp-aba.ativa{ border-color:var(--roxo); background:var(--lavanda); color:var(--tinta); }

/* ---- abaixo de 900px: uma área por vez ---- */
@media (max-width:900px){
  .cmp-abas{ display:flex; }
  .cmp-grade{ grid-template-columns:minmax(0,1fr); }
  /* display:none e não visibility: área escondida que continua
     ocupando caixa continua empurrando a largura da página. */
  .cmp[data-painel="fornecedores"] .cmp-p-catalogo,
  .cmp[data-painel="fornecedores"] .cmp-p-pedido,
  .cmp[data-painel="catalogo"] .cmp-p-fornecedores,
  .cmp[data-painel="catalogo"] .cmp-p-pedido,
  .cmp[data-painel="pedido"] .cmp-p-fornecedores,
  .cmp[data-painel="pedido"] .cmp-p-catalogo{ display:none; }
  .cmp-forn, .cmp-ped{ max-height:none; }
}

/* ---- abaixo de 700px: cada item vira cartão ---- */
@media (max-width:700px){
  .cmp-cabecalho{ display:none; }
  .cmp-itens{ gap:8px; max-height:none; }
  .cmp-item{
    grid-template-columns:minmax(0,1fr); gap:3px;
    background:var(--papel-2); border:1px solid var(--linha);
    border-radius:var(--r-p); padding:10px 12px;
  }
  /* O nome de cada campo sai do data-rot que a tela escreve — sem
     ele o cartão é uma pilha de números sem dizer qual é qual. */
  .cmp-item > span[data-rot]{ display:flex; justify-content:space-between;
                              align-items:baseline; gap:10px; }
  .cmp-item > span[data-rot]::before{
    content:attr(data-rot); color:var(--tinta-3); font-size:.75rem;
    text-transform:uppercase; letter-spacing:.04em; flex:0 0 auto;
  }
  /* A descrição é o assunto do cartão: rótulo roubaria metade da
     largura dela. */
  .cmp-item > span.cmp-desc{ display:block; font-weight:600; margin-bottom:2px; }
  .cmp-item > span.cmp-desc::before{ content:none; }
  .cmp-preco{ font-size:1.05rem; color:var(--amarelo); }
  .cmp-acao{ flex-wrap:wrap; margin-top:6px; }
  .cmp-acao::before{ margin-right:auto; }
  .cmp-qtd{ width:88px; }
}

/* ---- conferência de colunas antes de ativar ---- */
.cmp-conf h3{ margin:0 0 6px; font-size:1.05rem; }
.cmp-conf-linha{ grid-template-columns:minmax(0,1fr) auto; background:var(--papel-2);
                 border:1px solid var(--linha); border-radius:var(--r-p);
                 padding:8px 10px; margin-bottom:6px; }
.cmp-perigo{ border-color:var(--vermelho); color:var(--vermelho-tinta); }

/* ---- categoria vinda do fornecedor ---- */
.cmp-grupo{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:10px 6px 4px; margin-top:6px;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--roxo-claro); border-bottom:1px solid var(--linha-forte);
}
.cmp-grupo-sem{ color:var(--tinta-3); }
.cmp-grupo-n{ font-family:'IBM Plex Mono',monospace; color:var(--tinta-3); }

/* ---- o WhatsApp do fornecedor ---- */
.cmp-zap{ margin:0 0 10px; }
.cmp-zap .campo-caixa{ min-height:44px; }

/* ---- cadastro do fornecedor ---- */
.cmp-form h3{ margin:0 0 12px; font-size:1.05rem; }
.cmp-campo{ margin-bottom:12px; }
.cmp-campo label{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--tinta-2); margin-bottom:6px;
}
.cmp-campo .campo-caixa{ min-height:44px; }
.cmp-ok-linha{ color:var(--verde-tinta); }
.cmp-cand{ margin:12px 0; padding-top:10px; border-top:1px solid var(--linha); }
.cmp-cand-item{ cursor:pointer; }

/* ---- filtro por categoria do fornecedor ---- */
.cmp-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.cmp-chip{
  min-height:34px; cursor:pointer; font:inherit; font-size:.78rem;
  background:var(--papel-2); border:1px solid var(--linha); border-radius:999px;
  color:var(--tinta-2); padding:0 11px; display:inline-flex; align-items:center; gap:6px;
  transition:var(--transicao);
}
.cmp-chip:hover{ border-color:var(--roxo); }
.cmp-chip.ativo{ border-color:var(--roxo); background:var(--lavanda); color:var(--tinta); }
.cmp-chip-n{ font-family:'IBM Plex Mono',monospace; color:var(--tinta-3); font-size:.72rem; }
.cmp-chip.ativo .cmp-chip-n{ color:var(--roxo-claro); }

/* O campo de quantidade ficou sozinho na coluna: sem o botao ao
   lado, ele pode respirar. */
.cmp-acao .cmp-qtd{ width:84px; }

/* ---- o vínculo com o Bling é um botão, não um campo ---- */
.cmp-vinculo{
  width:100%; min-height:56px; cursor:pointer; text-align:left; font:inherit;
  display:grid; gap:2px; padding:9px 12px;
  background:var(--papel-2); border:1.5px dashed var(--linha-forte);
  border-radius:var(--r-p); color:var(--tinta); transition:var(--transicao);
}
.cmp-vinculo:hover{ border-color:var(--roxo); background:var(--papel); }
.cmp-vinculo.ligado{ border-style:solid; border-color:var(--verde); }
.cmp-vinculo.carregando{ opacity:.6; }
.cmp-vinculo-nome{ font-weight:600; overflow-wrap:anywhere; }
.cmp-vinculo-meta{ font-size:.75rem; color:var(--tinta-3);
                   font-family:'IBM Plex Mono',monospace; overflow-wrap:anywhere; }
.cmp-vinculo.ligado .cmp-vinculo-meta{ color:var(--verde-tinta); }
.cmp-cand .cmp-forn{ max-height:44vh; }

/* ---- confirmar envio ao Bling ---- */
.cmp-conf-bling{ margin-top:10px; padding-top:10px; border-top:1px solid var(--linha); }
.cmp-conf-bling h3{ margin:0 0 8px; font-size:.95rem; }

/* ---- histórico de pedidos ---- */
.cmp-hist-campo{ display:flex; flex-direction:column; gap:4px; font-size:.72rem;
                 color:var(--tinta-3); text-transform:uppercase; letter-spacing:.05em; }
.cmp-hist-campo input, .cmp-hist-campo select{ min-height:40px; padding:0 8px; background:var(--papel-2);
                       border:1px solid var(--linha); border-radius:var(--r-p);
                       color:var(--tinta); font:inherit; max-width:220px; }
.cmp-hist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cmp-hist-item{
  background:var(--papel-2); border:1px solid var(--linha); border-radius:var(--r-p);
  padding:10px 12px;
}
.cmp-hist-cancelado{ opacity:.68; }
.cmp-hist-topo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:4px; }
.cmp-hist-data{ font-family:'IBM Plex Mono',monospace; color:var(--tinta-3); font-size:.78rem; }
.cmp-hist-forn{ font-weight:600; flex:1 1 auto; }
.cmp-hist-corpo{ display:flex; flex-wrap:wrap; gap:14px; color:var(--tinta-2); font-size:.85rem; }
.cmp-hist-corpo .cmp-num{ font-family:'IBM Plex Mono',monospace; color:var(--tinta); margin-left:auto; }

/* ============================================================
   O PROCEDIMENTO DE INSTALAÇÃO
   ------------------------------------------------------------
   A tela que o técnico usa de pé, na casa do cliente, quase sempre
   no celular. Tudo aqui é decidido por isso:

     · alvo de toque de 44px, não 24 — dedo não é ponteiro;
     · uma coluna, sempre. Em 360px não existe segunda coluna que
       não vire rolagem de lado;
     · `min-width:0` nos filhos de flex, que é a armadilha que já
       cortou conteúdo em silêncio no comparativo de compras.

   Cor só por token. O amarelo é tempero: marca o obrigatório e o
   aviso de segurança, e nada mais.
   ============================================================ */

.inst-ficha{ display:flex; flex-direction:column; gap:10px; }

/* ---- a barra do topo: quanto falta ---- */
.inst-barra{
  position:sticky; top:0; z-index:2;
  background:var(--papel); padding:10px 0 8px;
  border-bottom:1px solid var(--linha); margin-bottom:4px;
}
.inst-barra-trilho{
  height:8px; border-radius:999px; background:var(--papel-3); overflow:hidden;
}
.inst-barra-cheia{
  height:100%; border-radius:999px; background:var(--roxo);
  transition:width .25s ease;
}
.inst-barra-txt{ margin:7px 0 0; font-size:.85rem; color:var(--tinta-2); }
.inst-barra-txt strong{ color:var(--verde-tinta); }

/* ---- o que só se lê ---- */
.inst-secao{
  margin:14px 0 2px; font-family:'Archivo',sans-serif; font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--roxo);
}
.inst-secao:first-child{ margin-top:4px; }
.inst-ajuda{ display:block; margin:3px 0 0; font-size:.82rem; color:var(--tinta-3); }
.inst-texto{
  padding:10px 12px; border-radius:var(--r);
  background:var(--papel-2); color:var(--tinta-2); font-size:.9rem;
}
.inst-texto p{ margin:0; }

.inst-aviso{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 13px; border-radius:var(--r);
  background:var(--amarelo-veu); border:1px solid var(--amarelo);
  color:var(--tinta);
}
.inst-aviso > div{ min-width:0; }
.inst-aviso strong{ color:var(--amarelo); }
.inst-aviso p{ margin:3px 0 0; font-size:.85rem; color:var(--tinta-2); }
.inst-aviso [data-icone]{ color:var(--amarelo); flex:0 0 auto; }

/* ---- um passo ---- */
.inst-passo{
  padding:10px 12px; border-radius:var(--r);
  background:var(--papel-2); border:1px solid var(--linha);
  transition:border-color .2s ease, background .2s ease;
}
.inst-passo.inst-ok{ border-color:var(--verde); background:var(--verde-claro); }
.inst-passo.inst-aceso{ border-color:var(--amarelo); }

.inst-linha{
  display:flex; align-items:flex-start; gap:11px;
  min-height:44px; cursor:pointer;
}
.inst-linha .chave{ flex:0 0 auto; margin-top:2px; }
.inst-titulo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.inst-titulo strong{ font-weight:600; line-height:1.35; }

.inst-selo{
  align-self:flex-start; font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--amarelo);
}
.inst-ok .inst-selo{ color:var(--verde-tinta); }

.inst-corpo{ margin:9px 0 0 0; min-width:0; }

/* ---- medida e tempo: número grande, unidade ao lado ---- */
.inst-medida{ display:flex; align-items:center; gap:8px; }
.inst-medida input{ min-width:0; flex:1 1 auto; font-size:1.05rem; }
.inst-unidade{
  flex:0 0 auto; font-family:'IBM Plex Mono',monospace;
  color:var(--tinta-3); font-size:.86rem;
}

/* ---- escolher: botões, nunca lista suspensa ---- */
.inst-opcoes{ display:flex; flex-wrap:wrap; gap:8px; }
.inst-opcao{ min-height:42px; }
.inst-opcao.inst-opcao-on{
  border-color:var(--roxo); background:var(--lavanda); color:var(--tinta);
}

/* ---- o que falta para fechar ---- */
.inst-faltam{
  margin-top:6px; padding:11px 13px; border-radius:var(--r);
  background:var(--amarelo-veu); border:1px solid var(--amarelo);
  font-size:.87rem;
}
.inst-faltam strong{ color:var(--amarelo); }
.inst-faltam ul{ margin:6px 0 0; padding-left:18px; color:var(--tinta-2); }
.inst-faltam li{ margin:3px 0; }
.inst-faltam a{ color:var(--tinta); text-decoration:underline; }

@media (max-width:520px){
  /* No celular a barra ocupa a largura toda e o texto vai para baixo:
     lado a lado, o "faltam 3 passos" era cortado sem aviso. */
  .inst-opcao{ flex:1 1 140px; justify-content:center; }
}

/* ============================================================
   DIR-10 · RELATÓRIOS E FECHAMENTOS
   ------------------------------------------------------------
   Tudo por token, nada de hexadecimal solto — foi assim que o
   portal inteiro virou do claro para o escuro sem caçar 167
   cores espalhadas.
   ============================================================ */

/* ---- navegação entre períodos ---- */
.fec-nav{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px;
  align-items:center;
}
.fec-nav>*{ min-width:0; }
.fec-nav .botao{ white-space:nowrap; }
.fec-nav-rot{ text-align:center; min-width:0; }
.fec-nav-rot strong{ display:block; font-size:1rem; color:var(--tinta); }
.fec-nav-rot span{
  display:block; margin-top:3px; font-size:.78rem; color:var(--tinta-3);
  font-family:var(--mono,inherit);
}

/* ---- o que ficou sem número ---- */
.fec-vazios{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--linha);
}
.fec-vazios h4{
  margin:0 0 8px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3);
}
.fec-vazios p{ margin:0 0 7px; font-size:.85rem; color:var(--tinta-2); line-height:1.5; }
.fec-vazios strong{ color:var(--tinta); }

/* ---- a conferência ----
   Bloco, não tabela: seis colunas de texto longo virariam rolagem
   horizontal em 360px, e a casa não aceita o corpo rolando de lado.
   Em bloco, cada item cabe inteiro na tela do celular. */
.fec-conf{
  margin-bottom:12px; padding:13px 15px; border-radius:var(--r);
  background:var(--papel-2); border:1px solid var(--linha);
  border-left-width:4px;
}
.fec-conf:last-child{ margin-bottom:0; }
.fec-conf-topo{ display:flex; align-items:center; gap:9px; }
.fec-conf-topo strong{ font-size:.93rem; color:var(--tinta); min-width:0; }
.fec-bolha{
  flex:0 0 auto; width:10px; height:10px; border-radius:50%;
  background:var(--tinta-3);
}
.fec-conf p{ margin:7px 0 0; font-size:.85rem; color:var(--tinta-2); line-height:1.55; }
.fec-conf .fec-acao{ color:var(--tinta-3); font-size:.8rem; }
.fec-conf-num{
  margin-top:7px; font-size:.8rem; color:var(--tinta-2);
  font-family:var(--mono,inherit); overflow-x:auto;
}
.fec-conf-num strong{ color:var(--tinta); }

.fec-verde{ border-left-color:var(--verde); }
.fec-verde .fec-bolha{ background:var(--verde); }
.fec-amarelo{ border-left-color:var(--ambar); }
.fec-amarelo .fec-bolha{ background:var(--ambar); }
.fec-vermelho{ border-left-color:var(--vermelho); }
.fec-vermelho .fec-bolha{ background:var(--vermelho); }

@media (max-width:520px){
  /* Duas colunas viram uma. "Anterior" e "Próximo" lado a lado com
     o rótulo do mês no meio não cabem em 360px — o nome do período
     é informação de decisão e não pode ser o que encolhe. */
  .fec-nav{ grid-template-columns:1fr 1fr; }
  .fec-nav-rot{ grid-column:1 / -1; order:-1; }
  .fec-nav .botao{ width:100%; }
}

/* ---- DIR-10 · o bloco de cada gráfico ----
   O SVG e as barras vêm do core/graficos.js, com CSS próprio. Aqui
   é só a moldura: título em cima, fonte e limitação embaixo.

   A FONTE FICA COLADA NO DESENHO, não no rodapé da tela. Gráfico
   convence mais rápido que tabela — se a limitação estiver a três
   rolagens de distância, a leitura errada já aconteceu. */
.fec-gr{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--linha);
}
.fec-gr:first-child{ margin-top:0; padding-top:0; border-top:0; }
.fec-gr h4{
  margin:0 0 12px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2);
}
.fec-gr-fonte{
  margin:10px 0 0; font-size:.75rem; color:var(--tinta-3);
}
.fec-gr-nota{
  margin:5px 0 0; font-size:.78rem; color:var(--tinta-3); line-height:1.5;
}
/* Visão sem gráfico não fica em branco: fica explicada. */
.fec-gr-vazio{
  padding:14px 15px; border-radius:var(--r); border:1px dashed var(--linha-forte);
  background:var(--papel-2); margin-top:18px;
}
.fec-gr-vazio h4{ margin-bottom:6px; }

/* ============================================================
   VEN-01 · CALCULADORA CPF
   ------------------------------------------------------------
   Dois preços por máquina, sempre — Lucro Presumido e Simples
   Nacional lado a lado, pedido do Alisson em 07/08/2026.

   A grade dos preços é `auto-fit` com mínimo de 132px: no monitor
   os dois ficam lado a lado, no celular um embaixo do outro,
   sozinhos, sem media query para manter. Regime novo entra sem
   mexer aqui.
   ============================================================ */
.vcp-abas{ display:flex; gap:6px; margin-bottom:14px; }
.vcp-aba{
  flex:1 1 0; min-width:0; min-height:42px; cursor:pointer; font:inherit;
  font-size:.85rem; font-weight:600; border-radius:var(--r);
  background:var(--papel-2); border:1px solid var(--linha); color:var(--tinta-2);
  padding:0 12px; transition:var(--transicao);
}
.vcp-aba:hover{ border-color:var(--roxo); }
.vcp-aba.ativa{ border-color:var(--roxo); background:var(--lavanda); color:var(--tinta); }

/* Cliente e estado. Duas colunas no monitor, uma no celular — e o
   `min-width:0` é obrigatório: filho de grid não encolhe abaixo do
   próprio conteúdo, e um <select> com "Distrito Federal (DF)"
   dentro estoura a coluna sem ele. */
.vcp-config{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vcp-campo{ min-width:0; }
.vcp-campo label{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tinta-3); font-weight:700; margin-bottom:5px;
}
.vcp-campo select{
  width:100%; min-width:0; min-height:42px; font:inherit;
  background:transparent; border:0; color:var(--tinta); padding:0 10px;
}
@media (max-width:560px){ .vcp-config{ grid-template-columns:1fr; } }

.vcp-filtros{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }

.vcp-ordem{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 14px; }
.vcp-ordem-rot{ font-size:.75rem; color:var(--tinta-3); margin-right:2px; }

.vcp-lista{ list-style:none; display:grid; gap:8px; }
.vcp-item{ min-width:0; }
.vcp-item-bt{
  width:100%; text-align:left; cursor:pointer; font:inherit;
  background:var(--papel-2); border:1px solid var(--linha); border-radius:var(--r);
  padding:12px 14px; display:grid; gap:8px; transition:var(--transicao);
}
.vcp-item-bt:hover{ border-color:var(--roxo); }
.vcp-item.escolhida .vcp-item-bt{ border-color:var(--roxo); background:var(--lavanda); }
.vcp-item-topo{ display:flex; align-items:flex-start; gap:10px; }
.vcp-nome{ flex:1; min-width:0; font-weight:600; overflow-wrap:anywhere; }
.vcp-check{ flex-shrink:0; color:var(--tinta-3); display:grid; place-items:center; }
.vcp-item.escolhida .vcp-check{ color:var(--verde); }
.vcp-tags{ display:flex; flex-wrap:wrap; gap:5px; }

.vcp-precos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:8px; }
.vcp-preco{
  display:grid; gap:2px; padding:8px 10px; border-radius:8px;
  background:var(--papel); border:1px solid var(--linha);
}
.vcp-preco-rot{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tinta-3); font-weight:700;
}
.vcp-preco-num{
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.05rem;
  color:var(--verde); overflow-wrap:anywhere;
}
/* Regime sem alíquota definida NÃO mostra número. Amarelo é aviso,
   e "—" com o motivo ao lado é mais honesto que um preço inventado. */
.vcp-preco-sem{ border-style:dashed; }
.vcp-preco-erro{ font-size:.72rem; color:var(--amarelo); line-height:1.35; }

/* ---- o orçamento montado ---- */
.vcp-nota{ list-style:none; display:grid; gap:8px; margin-bottom:12px; }
.vcp-nota-item{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:var(--papel-2); border:1px solid var(--linha); border-radius:var(--r);
  padding:12px 14px;
}
.vcp-nota-info{ flex:1 1 220px; min-width:0; }
.vcp-nota-sub{
  display:block; margin-top:3px; font-size:.75rem; color:var(--tinta-3);
  font-family:'IBM Plex Mono',monospace; overflow-wrap:anywhere;
}
.vcp-nota-precos{ display:flex; flex-wrap:wrap; gap:10px; }
.vcp-nota-preco{
  display:grid; gap:1px; font-family:'IBM Plex Mono',monospace;
  font-weight:700; color:var(--verde); font-size:.9rem;
}
.vcp-nota-preco.vcp-preco-sem{ color:var(--tinta-3); }

.vcp-totais{ display:grid; gap:6px; }
.vcp-total-linha{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-top:8px; border-top:1px solid var(--linha);
}
.vcp-total-linha strong{
  font-family:'IBM Plex Mono',monospace; font-size:1.15rem; color:var(--verde);
}

/* ---- a grade das 27 alíquotas, em Recursos ---- */
.imp-grade{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; }
.imp-uf{ display:grid; gap:3px; min-width:0; }
.imp-uf span{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--tinta-3); font-weight:700;
}
.imp-uf input{
  width:100%; min-width:0; min-height:40px; font:inherit; text-align:center;
  background:var(--papel-2); border:1px solid var(--linha); border-radius:8px;
  color:var(--tinta); padding:0 6px;
}
.imp-uf input:focus{ outline:0; border-color:var(--roxo); }
.divisor-rot{
  display:flex; align-items:center; gap:10px; margin:20px 0 8px;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-3); font-weight:700;
}
.divisor-rot::after{ content:""; flex:1; height:1px; background:var(--linha); }

/* ============================================================
   VEN-02 · CALCULADORA CNPJ
   ------------------------------------------------------------
   Veio de um HTML de fundo #0f1115 com laranja #ff8a1f — duas
   cores que não existem na marca. A conversão foi por token, como
   manda a regra de 27/07/2026: nenhum hexadecimal novo entrou.

   A tela reusa quase tudo da Calculadora CPF (as abas, os
   cartões, os totais). O que é próprio daqui são as linhas de
   marcar acessório e o quadro do texto pronto.
   ============================================================ */
.vcn{ min-width:0; }

/* O filtro de categoria é o alvo mais tocado desta tela no celular, e
   o `.cmp-chip` nasceu com 34px — abaixo dos 40px que a casa exige.
   Subir o token compartilhado mexeria em toda tela que usa chip; aqui
   sobe só onde foi medido. O teste responsivo reprovava em 360, 390 e
   768px, e é ele que segura este número. */
.vcn .cmp-chip{ min-height:40px; }

.vcn-aviso{ display:flex; gap:10px; align-items:flex-start; }
.vcn-aviso-ic{ flex-shrink:0; color:var(--amarelo); display:grid; place-items:center; }
.vcn-aviso p{ font-size:.86rem; line-height:1.5; }

/* O bloco de pagamento fica sempre visível na lista: é o texto que
   a equipe cola dez vezes por dia, e enterrá-lo dentro da ficha
   obrigaria a abrir uma máquina para copiar condição de cartão. */
.vcn-pag .vcn-texto{ max-height:none; }

/* O texto pronto. `pre-wrap` porque a mensagem é para o WhatsApp e
   quebra de linha é conteúdo; `overflow-x:auto` porque quem rola de
   lado é este quadro, nunca a página. */
.vcn-texto{
  font-family:'IBM Plex Mono',monospace; font-size:.8rem; line-height:1.65;
  white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:auto;
  background:var(--fundo); border:1px solid var(--linha); border-radius:var(--r-p);
  padding:12px 14px; color:var(--tinta-2); max-height:340px; overflow-y:auto;
  min-width:0;
}

.vcn-linha{ display:block; font-size:.84rem; line-height:1.45; color:var(--tinta-2); }
.vcn-linha + .vcn-linha{ margin-top:4px; }
.vcn-incl{ color:var(--verde-tinta); }

.vcn-voltar{ margin-bottom:14px; min-height:44px; }

.vcn-opc{ display:grid; gap:6px; }
.vcn-opc-linha{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-height:46px; padding:8px 12px; cursor:pointer;
  background:var(--papel-2); border:1px solid var(--linha); border-radius:var(--r-p);
  transition:var(--transicao);
}
.vcn-opc-linha:hover{ border-color:var(--roxo); }
.vcn-opc-linha.travada{ cursor:not-allowed; opacity:.6; }
.vcn-opc-linha.travada:hover{ border-color:var(--linha); }
.vcn-opc-linha input{ width:18px; height:18px; flex-shrink:0; accent-color:var(--roxo); }
.vcn-opc-nome{ flex:1 1 180px; min-width:0; font-size:.88rem; overflow-wrap:anywhere; }
.vcn-opc-nome .cmp-nota{ display:inline; margin:0; }
/* Dinheiro é VERDE no portal inteiro, e aqui não é exceção. O amarelo
   fica para o que ACRESCENTA custo — o acessório que sobe o total. A
   regra da casa é que amarelo é tempero: espalhado por toda linha de
   preço, ele deixa de marcar coisa nenhuma. */
.vcn-opc-preco{
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.86rem;
  color:var(--verde); white-space:nowrap;
}
.vcn-opc-preco.vcn-mais{ color:var(--amarelo-tinta); }
.vcn-consultar{ color:var(--tinta-3); font-weight:600; }
.vcn-menos{ color:var(--verde); }

/* O preço de cada modelo, quando há mais de um marcado. O
   "c/ desconto" vai embaixo, e não ao lado: ao lado ele estoura a
   linha no celular e o número do preço some. */
.vcn-com-desc{
  display:block; font-family:'Inter',system-ui,sans-serif; font-weight:600;
  font-size:.74rem; color:var(--verde-tinta); margin-top:2px;
}
.vcp-total-linha strong{ text-align:right; }

/* ============================================================
   RECURSOS · TABELA DE PREÇOS DA CALCULADORA CNPJ
   ------------------------------------------------------------
   Trinta e sete produtos, dois preços cada. A linha inteira cabe
   numa faixa só no monitor e vira empilhada no celular — sem
   tabela, porque tabela de dois campos editáveis rola de lado e
   a regra da casa é que a página nunca role.
   ============================================================ */
.pc-linha{
  border:1px solid var(--linha); border-radius:var(--r-p);
  background:var(--papel-2); padding:12px 14px; margin-bottom:8px; min-width:0;
}
.pc-linha.aberta{ border-color:var(--roxo); }
.pc-cab{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.pc-ident{
  flex:1 1 220px; min-width:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:6px;
}
.pc-ident strong{ flex:1 1 100%; font-size:.9rem; overflow-wrap:anywhere; }
.pc-bt-msg{ flex-shrink:0; min-height:40px; }

.pc-precos{
  display:grid; gap:10px; margin-top:10px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.pc-precos > *{ min-width:0; }
.pc-campo-largo{ grid-column:1 / -1; }
.pc-marca{
  font-size:9.5px; letter-spacing:.06em; color:var(--ambar-tinta);
  background:var(--ambar-claro); padding:1px 6px; border-radius:999px;
}

.pc-msg{ margin-top:12px; padding-top:12px; border-top:1px solid var(--linha); }
.pc-msg label{
  display:block; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-2); margin-bottom:6px;
}
.pc-area{
  width:100%; min-width:0; resize:vertical; font:inherit;
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; line-height:1.6;
  background:var(--fundo); color:var(--tinta);
  border:1px solid var(--linha-forte); border-radius:var(--r-p); padding:10px 12px;
}
.pc-area:focus{ outline:0; border-color:var(--roxo); }