/* ============================================================================
   Mach Pedidos — Mach Máquinas

   Direção: produto de trabalho diário. Superfícies claras sobre um cinza frio,
   quase sem moldura — a separação vem de espaço e de uma sombra baixa, não de
   borda. A cor da marca aparece onde há decisão: o item ativo do menu, o
   número que espera por ela, a etapa atual do processo, o botão principal.

   Regras da casa:
   - Texto que precisa ser lido passa em WCAG AA (4.5:1).
   - Cor nunca é o único sinal: sempre acompanha texto ou forma.
   - --sinal (vermelho) é orçamento escasso: só o que passou do aceitável.
   - Verde Mach (--accent) é identidade, não estado: nunca carrega leitura.
   - Pontos de quebra usados: 1180, 980, 860, 640, 420.
   ========================================================================= */

:root {
  /* ---- superfícies ---- */
  --ground:     #F4F6F9;
  --surface:    #FFFFFF;
  --surface-2:  #F8F9FB;
  --surface-3:  #EFF2F6;
  --elevada:    #FFFFFF;

  /* ---- tinta ---- */
  --ink:        #0F1C2E;
  --ink-2:      #475467;   /* 7.6:1 no branco */
  --ink-3:      #667085;   /* 4.9:1 no branco, 4.6:1 no --ground */
  --ink-4:      #98A2B3;   /* só decorativo e placeholder */

  /* ---- marca ---- */
  --azul-vivo:      #1A7CFF;   /* azul "padrão" dela: tags, PIND, números e invoices (17/09/2026) */
  --primaria:       #1162AA;   /* azul Mach — 6.26:1 nos dois sentidos */
  --primaria-tinta: #1162AA;
  --primaria-2:     #0C5192;   /* hover */
  --primaria-soft:  #EBF3FB;
  --primaria-borda: #C9DDF0;
  --primaria-anel:  rgba(17, 98, 170, .20);
  --marinho:        #032F66;   /* azul escuro Mach */
  --secundaria:     #1162AA;

  --accent:      #5FCF0D;      /* verde Mach */
  --accent-2:    #3F9A06;
  --accent-soft: #EEFBE3;

  /* ---- estado (texto >= 4.5:1 sobre o próprio fundo suave) ---- */
  --ok:    #067647;  --ok-soft:   #ECFDF3;  --ok-borda:   #ABEFC6;
  --warn:  #B54708;  --warn-soft: #FFFAEB;  --warn-borda: #FEDF89;
  --crit:  #D92D20;  --crit-soft: #FEF3F2;  --crit-borda: #FECDCA;
  --sinal: #D92D20;  --sinal-forte: #B42318; --sinal-soft: #FEF3F2;
  --sobre: #FFFFFF;

  /* ---- traços ---- */
  --linha:       #EAECF0;
  --linha-forte: #D0D5DD;
  --contorno:    rgba(16, 24, 40, .06);

  /* ---- "de quem" — cada pessoa, uma cor ---- */
  --p1: #1162AA; --p1-soft: #EBF3FB;
  --p2: #C0320E; --p2-soft: #FFE7E0;
  --p3: #0B7556; --p3-soft: #DEF7EC;
  --p4: #976108; --p4-soft: #FFF1D6;
  --p5: #A6238E; --p5-soft: #FBE3F7;

  /* ---- barra lateral ---- */
  --barra:       #032F66;
  --barra-2:     #032F66;
  --barra-ink:   #FFFFFF;
  --barra-ink-2: rgba(255, 255, 255, .68);
  --barra-ink-3: rgba(255, 255, 255, .44);
  --barra-linha: rgba(255, 255, 255, .09);
  --barra-luz:   #FFFFFF;

  /* ---- tipografia ---- */
  --face-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --face-corpo:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Números, códigos e datas na mesma família, com algarismos tabulares
     ligados no body — é o que mantém coluna de número alinhada. */
  --face-mono:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --face-copia:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-micro:   .6875rem;   /* 11 */
  --t-mini:    .75rem;     /* 12 */
  --t-peq:     .8125rem;   /* 13 */
  --t-base:    .875rem;    /* 14 */
  --t-med:     1rem;       /* 16 */
  --t-gr:      1.25rem;    /* 20 */
  --t-xg:      1.625rem;   /* 26 */
  --t-hero:    2.25rem;    /* 36 */
  --t-display: 2.75rem;    /* 44 */

  /* ---- espaço ---- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;  --e5: 20px;
  --e6: 24px; --e7: 32px; --e8: 40px; --e9: 48px;  --e10: 64px;

  /* ---- forma ---- */
  --raio-xs: 6px;
  --raio-sm: 10px;
  --raio:    14px;
  --raio-lg: 20px;

  --sombra-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra:    0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sombra-md: 0 12px 24px -8px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --sombra-lg: 0 32px 64px -16px rgba(16, 24, 40, .26);
  --anel:      0 0 0 3px var(--primaria-anel);

  /* ---- movimento ---- */
  --rapido: .14s cubic-bezier(.2, 0, 0, 1);
  --medio:  .22s cubic-bezier(.2, 0, 0, 1);

  /* ---- camadas ---- */
  --z-topo:    20;
  --z-abas:    40;
  --z-overlay: 60;

  --lateral: 248px;
  --toque:   44px;
}

/* ============================ base ======================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-corpo);
  font-size: var(--t-base);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--face-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-xg); line-height: 1.15; letter-spacing: -.025em; }
h2 { font-size: var(--t-med); }
h3 { font-size: var(--t-base); }

p { margin: 0; text-wrap: pretty; }
strong { font-weight: 600; }

a { color: var(--primaria-tinta); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  border-radius: var(--raio-xs);
}
.barra-lateral :focus-visible,
.abas :focus-visible { outline-color: var(--barra-luz); }

.mono, .num, .cod { font-family: var(--face-mono); font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }

.rotulo {
  display: block;
  font-size: var(--t-mini);
  font-weight: 500;
  color: var(--ink-3);
}

.sub   { color: var(--ink-3); font-size: var(--t-base); }
.fraco { color: var(--ink-3); font-size: var(--t-mini); }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.so-leitor:focus {
  position: fixed; top: var(--e3); left: var(--e3); z-index: 100;
  width: auto; height: auto; margin: 0; clip: auto;
  padding: var(--e2) var(--e3); background: var(--primaria); color: var(--sobre);
  border-radius: var(--raio-sm);
}

.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* O atributo `hidden` tem que esconder de verdade. Sem isto, qualquer regra
   de display (ex.: `label { display: flex }` dos formulários) passava por cima
   e o elemento "escondido" aparecia — foi assim que a escolha de Modelo da
   PIND 00101 apareceu em todo item (11/09/2026). */
[hidden] { display: none !important; }

@keyframes surge {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* ============================ esqueleto ================================== */
.app {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.barra-lateral {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--e7);
  padding: var(--e5) var(--e3) var(--e4);
  overflow-y: auto;
  background: var(--barra);
  color: var(--barra-ink);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.marca {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: var(--e2) var(--e3) 0;
  color: var(--barra-ink);
  border-radius: var(--raio-sm);
}
.marca:hover { text-decoration: none; }
.logo-mach { display: block; width: 116px; height: auto; flex: none; }
.marca .nome {
  font-size: var(--t-peq); font-weight: 400; line-height: 1.2; letter-spacing: .01em;
  color: #fff;
}

.nav-lateral { display: flex; flex-direction: column; gap: var(--e6); }
.grupo-nav { display: flex; flex-direction: column; gap: 2px; }
.titulo-grupo {
  padding: 0 var(--e3) var(--e2);
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--barra-ink-3);
}

.barra-lateral nav a {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 38px; padding: 0 var(--e3);
  border-radius: var(--raio-sm);
  color: var(--barra-ink-2);
  font-size: var(--t-base); font-weight: 500;
  transition: background var(--rapido), color var(--rapido);
}
.barra-lateral nav a .ico { flex: none; transition: color var(--rapido); }
.barra-lateral nav a .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-lateral nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.barra-lateral nav a.ativo { background: rgba(255, 255, 255, .11); color: #fff; }
.barra-lateral nav a.ativo .ico { color: var(--accent); }

.barra-lateral nav .cont {
  flex: none; min-width: 22px; height: 20px; padding: 0 7px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: var(--t-micro); font-weight: 600;
}
.barra-lateral nav .cont.chama { background: var(--sinal); }

.rodape-lateral {
  margin-top: auto;
  padding-top: var(--e3);
  border-top: 1px solid var(--barra-linha);
}

/* quem está logado + Sair: rodapé da barra lateral no computador, topo no celular */
.usuario-lateral {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e2) 0;
  color: var(--barra-ink); font-size: var(--t-peq);
}
.usuario-lateral .avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: var(--t-peq); font-weight: 600;
}
.usuario-lateral strong {
  flex: 1; min-width: 0; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.botao-sair {
  font: inherit; font-size: var(--t-mini); font-weight: 500;
  color: var(--barra-ink-2); background: transparent;
  border: 1px solid var(--barra-linha); border-radius: 8px;
  padding: 4px 10px; cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.botao-sair:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.usuario-topo { display: none; }

/* Modos (Gestor / Fiscal / Financeiro): o menu só mostra o que é do modo */
body[data-modo="isabele"] [data-modos]:not([data-modos~="isabele"]),
body[data-modo="gestor"] [data-modos]:not([data-modos~="gestor"]),
body[data-modo="fiscal"] [data-modos]:not([data-modos~="fiscal"]),
body[data-modo="financeiro"] [data-modos]:not([data-modos~="financeiro"]),
body[data-modo="interno"] [data-modos]:not([data-modos~="interno"]) { display: none !important; }

/* Fora do Gestor é só leitura (18/09/2026): some tudo que grava, e o que se
   edita clicando vira texto comum. O servidor recusa a gravação de qualquer jeito. */
.so-leitura main form[method="post" i]:not(.no-form),
.so-leitura main [onclick*="trocar("],
.so-leitura main a[href$="/novo"], .so-leitura main a[href*="/novo?"],
.so-leitura main a[href$="/invoice"] { display: none !important; }
.so-leitura main .no-form button { pointer-events: none; cursor: default; }
.so-leitura main .editavel { cursor: default; pointer-events: none; }
.so-leitura main .editavel:hover { background: none; }

.seletor-modo {
  display: flex; align-items: center; gap: var(--e2);
  padding: 0 var(--e2) var(--e3);
  color: var(--barra-ink-3); font-size: var(--t-mini);
}
.seletor-modo .rotulo-modo {
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.seletor-modo select {
  flex: 1; min-width: 0; min-height: 0;
  font: inherit; font-size: var(--t-peq); font-weight: 500;
  color: var(--barra-ink); background-color: rgba(255, 255, 255, .08);
  border: 1px solid var(--barra-linha); border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
}
.seletor-modo select:hover { background-color: rgba(255, 255, 255, .12); }
.seletor-modo option { color: #111; background: #fff; }
.seletor-modo.no-topo { display: none; }
/* Só o Gestor - Isabele troca de modo; os outros entram no tipo deles (22/09/2026). */
body:not(.troca-modo) .seletor-modo { display: none !important; }

.area { display: flex; flex-direction: column; min-width: 0; }

.conteudo {
  width: 100%; max-width: 1320px; min-width: 0;
  padding: var(--e8) var(--e8) var(--e10);
}

.abas { display: none; }

/* ============================ cabeçalho de página ========================= */
.topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e5);
  margin-bottom: var(--e7);
}
.topo .titulo-bloco { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.topo .sub { max-width: 68ch; }

.migalha {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--e3);
  font-size: var(--t-peq); color: var(--ink-3);
}
.migalha a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.migalha a:hover { color: var(--ink); text-decoration: none; }
.migalha .ico { color: var(--ink-4); }

/* ============================ abas de seção (segmentado) ================= */
.abas-secao {
  display: inline-flex; gap: 2px;
  margin-bottom: var(--e6); padding: 3px;
  background: var(--surface-3); border-radius: var(--raio-sm);
}
.abas-secao a {
  display: inline-flex; align-items: center; gap: var(--e2);
  height: 34px; padding: 0 var(--e4);
  border-radius: 8px;
  font-size: var(--t-peq); font-weight: 500; color: var(--ink-2);
  transition: background var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.abas-secao a:hover { color: var(--ink); text-decoration: none; }
.abas-secao a.ativa { background: var(--surface); color: var(--ink); box-shadow: var(--sombra); }
.abas-secao .contador {
  min-width: 20px; height: 18px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--warn-soft); color: var(--warn);
  font-size: var(--t-micro); font-weight: 600;
}

/* ============================ cartões ==================================== */
.cartao {
  background: var(--surface);
  border: 1px solid var(--contorno);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao > header,
.acordeon > summary {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e3);
  padding: var(--e4) var(--e5);
}
.cartao > header h2,
.acordeon > summary h2 { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-med); }
.cartao > header h2 .ico { color: var(--ink-3); }
.cartao > .corpo { padding: var(--e5); }
.cartao > header + .corpo { padding-top: var(--e1); }
.cartao > footer { padding: var(--e3) var(--e5); border-top: 1px solid var(--linha); }
.corpo > table td:first-child { padding-left: 0; }
.corpo > table td:last-child { padding-right: 0; }

/* Cartão que também é <details> — a coluna direita do pedido. O resumo mora
   no <summary>, então continua visível mesmo fechado. */
.acordeon > summary {
  cursor: pointer; list-style: none;
  border-radius: var(--raio);
  transition: background var(--rapido);
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary:hover { background: var(--surface-2); }
.acordeon[open] > summary { border-radius: var(--raio) var(--raio) 0 0; }
.acordeon[open] > :not(summary) { animation: surge var(--medio) both; }

.chevron {
  width: 8px; height: 8px; flex: none; margin: 0 4px;
  border-right: 1.75px solid var(--ink-3); border-bottom: 1.75px solid var(--ink-3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--medio), border-color var(--rapido);
}
details[open] > summary .chevron { transform: translateY(2px) rotate(-135deg); }

.grade { display: grid; gap: var(--e4); }
.grade > * { min-width: 0; }
.grade.duas   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.tres   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade.pedido { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: var(--e5); align-items: start; }
.grade.pedido.uma-coluna { grid-template-columns: minmax(0, 1fr); }  /* modo Financeiro, sem o Processo */
/* Sem rolagem para o lado nas tabelas do pedido (pedido dela, 17/09/2026):
   espaçamento mais justo, cabeçalho e texto quebram linha, e o formulário que
   abre dentro da linha usa colunas mais estreitas para caber. */
.grade.pedido .rolagem { overflow-x: visible; }
.grade.pedido table { table-layout: auto; }
.grade.pedido th, .grade.pedido td { padding-left: 8px; padding-right: 8px; }
.grade.pedido th:first-child, .grade.pedido td:first-child { padding-left: var(--e4); }
.grade.pedido th:last-child, .grade.pedido td:last-child { padding-right: var(--e4); }
.grade.pedido thead th { white-space: normal; }
.grade.pedido td { overflow-wrap: anywhere; }
/* Nome do item quebra em até 2 linhas (21/09/2026): em linha só, a descrição
   longa dos itens sem código empurrava a tabela para fora do card. */
.grade.pedido td .corta {
  white-space: normal; display: -webkit-box !important;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.grade.pedido td .campos { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.grade.pedido td input, .grade.pedido td select { min-width: 0; width: 100%; }

/* ============================ métrica ==================================== */
.metrica { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e5); }
.metrica .selo-metrica {
  width: 34px; height: 34px; flex: none; margin-bottom: var(--e2);
  display: grid; place-items: center;
  border-radius: var(--raio-sm);
  background: var(--tom-soft, var(--surface-2)); color: var(--tom, var(--ink-2));
}
.metrica .rotulo { font-size: var(--t-peq); color: var(--ink-2); }
.metrica .valor {
  margin-top: var(--e2);
  font-size: var(--t-hero); font-weight: 600;
  line-height: 1.05; letter-spacing: -.035em;
  color: var(--ink);
}
.metrica .valor.alerta { color: var(--sinal); }
.metrica .valor.morno  { color: var(--warn); }
.metrica .valor.bom    { color: var(--ok); }
.metrica .nota { font-size: var(--t-peq); color: var(--ink-3); }
a.metrica { color: inherit; transition: box-shadow var(--medio), transform var(--medio); }
a.metrica:hover { text-decoration: none; box-shadow: var(--sombra-md); transform: translateY(-1px); }

/* ============================ selos de estado ============================ */
.pilula {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 6px;
  font-size: var(--t-mini); font-weight: 500; line-height: 1;
  white-space: nowrap;
}
.pilula.ok      { background: var(--ok-soft);      color: var(--ok);          border-color: var(--ok-borda); }
.pilula.atencao { background: var(--warn-soft);    color: var(--warn);        border-color: var(--warn-borda); }
.pilula.critico { background: var(--crit-soft);    color: var(--sinal-forte); border-color: var(--crit-borda); }
.pilula.neutra  { background: var(--surface-2);    color: var(--ink-2);       border-color: var(--linha); }
.pilula.info    { background: var(--primaria-soft); color: var(--primaria);   border-color: var(--primaria-borda); }
.pilula.sinal   { background: var(--sinal-soft);   color: var(--sinal-forte); border-color: var(--crit-borda); }
.pilula .ponto  { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }

.quem {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px 0 3px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--t-mini); font-weight: 500;
  white-space: nowrap; vertical-align: middle;
}
.quem .inicial {
  width: 18px; height: 18px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primaria); color: #fff;
  font-size: .625rem; font-weight: 600;
}
.quem.esperando { background: var(--crit-soft); border-color: var(--crit-borda); color: var(--sinal-forte); }
.quem.esperando .inicial { background: var(--sinal); }

.progresso {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-mini); font-weight: 500; color: var(--ink-3);
}
.trilha {
  flex: 1; min-width: 64px; height: 6px;
  border-radius: 999px; background: var(--linha); overflow: hidden;
}
.trilha > i { display: block; height: 100%; border-radius: 999px; background: var(--primaria); }
.trilha.atrasado > i { background: var(--sinal); }
.trilha.pronto > i   { background: var(--accent-2); }

/* ============================ tabelas ==================================== */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-base); }
thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px var(--e4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-mini); font-weight: 500; color: var(--ink-3);
  text-align: left; white-space: nowrap;
}
td { padding: 14px var(--e4); border-bottom: 1px solid var(--linha); vertical-align: middle; }
th:first-child, td:first-child { padding-left: var(--e5); }
th:last-child,  td:last-child  { padding-right: var(--e5); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--rapido); }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; }
tfoot td { border-top: 1px solid var(--linha); border-bottom: 0; font-weight: 600; }

tr.linha-link { cursor: pointer; }
tr.linha-link:hover .ref-link { text-decoration: underline; text-underline-offset: 3px; }
.ref-link { font-weight: 600; color: var(--azul-vivo); }

/* ============================ fotos do catálogo ========================== */
.miniatura {
  display: block; flex: none;
  border-radius: 8px; border: 1px solid var(--linha);
  background: var(--surface-2); object-fit: cover;
}
.miniatura-vazia { display: grid; place-items: center; color: var(--ink-4); }

.galeria-fotos { display: flex; flex-wrap: wrap; gap: var(--e3); }
.foto-item {
  position: relative; width: 112px; height: 112px;
  border-radius: var(--raio-sm); overflow: hidden;
  border: 1px solid var(--linha);
}
.foto-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-item form { position: absolute; top: 4px; right: 4px; }
.foto-item .botao.icone { background: rgba(15, 28, 46, .6); color: #fff; }
.foto-item .botao.icone:hover { background: var(--crit); color: #fff; }

/* ============================ formulários ================================ */
input, select, textarea {
  width: 100%; min-height: 40px;
  padding: 8px 12px;
  font-family: var(--face-corpo); font-size: var(--t-base); color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--linha-forte); border-radius: 7px; /* era 10px; ela pediu menos arredondado (17/09/2026) */
  box-shadow: var(--sombra-xs);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:hover, select:hover, textarea:hover { border-color: #B3BDCA; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primaria); box-shadow: var(--anel);
}
input[type="search"] { -webkit-appearance: none; appearance: none; }
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; min-height: 0; padding: 0; flex: none;
  box-shadow: none; accent-color: var(--primaria);
}
input[type="file"] { padding: 6px; font-size: var(--t-peq); cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 6px 12px;
  font: inherit; font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--linha-forte); border-radius: 8px;
  cursor: pointer;
}
textarea { min-height: 80px; line-height: 1.55; resize: vertical; }

label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--t-peq); font-weight: 500; color: var(--ink-2);
}
label.deitado { flex-direction: row; align-items: center; gap: var(--e2); }

.campos { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Overlay do item: área do pedido e área do catálogo bem separadas (17/09/2026). */
.bloco-overlay { border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--e4) var(--e5); }
.bloco-overlay + .bloco-overlay { margin-top: var(--e4); }
.bloco-overlay.bloco-pedido { background: var(--primaria-soft); border-color: var(--primaria-borda); }
.bloco-overlay.bloco-catalogo { background: var(--surface); }
.bloco-titulo {
  display: flex; align-items: center; gap: var(--e2);
  margin: 0 0 var(--e3); padding-bottom: var(--e3);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-base); font-weight: 600; color: var(--ink);
}
.bloco-pedido .bloco-titulo { color: var(--primaria); border-bottom-color: var(--primaria-borda); }
.bloco-titulo .ico { flex: none; }

/* Área de soltar arquivo (overlay Anexar invoice, 16/09/2026). */
.zona-arquivo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 200px; padding: var(--e6);
  border: 2px dashed var(--linha-forte); border-radius: var(--raio);
  background: var(--surface-2); color: var(--ink-2); text-align: center;
  cursor: pointer; transition: border-color var(--rapido), background var(--rapido);
}
.zona-arquivo:hover, .zona-arquivo.arrastando { border-color: #1A7CFF; background: var(--primaria-soft); color: var(--primaria); }
.zona-arquivo.enviando { pointer-events: none; opacity: .7; }
.anexo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); padding: var(--e2) 0; }
.anexo input[type="file"] {
  flex: 1; min-width: 160px;
  border-style: dashed; background: var(--surface-2); box-shadow: none;
}

/* barra de filtros */
.caixa-filtros { margin-bottom: var(--e5); }
.caixa-filtros > summary { display: none; }
.caixa-filtros > summary::-webkit-details-marker { display: none; }
.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3);
  padding: var(--e4) var(--e5);
}
.filtros label { flex: 1 1 140px; min-width: 0; }
.filtros label:has(input[type="search"]) { flex: 2.4 1 280px; }
.filtros .filtro-datas { flex: 2 1 280px; }
.par-datas { display: flex; align-items: center; gap: var(--e2); }
.par-datas input { flex: 1; min-width: 0; }
.filtros .botao { flex: 0 0 auto; }

/* ============================ botões ===================================== */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 40px; padding: 0 18px;
  font-family: var(--face-corpo); font-size: var(--t-base); font-weight: 500; line-height: 1;
  color: var(--ink); white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--linha-forte); border-radius: 7px; /* era 10px; ela pediu menos arredondado (17/09/2026) */
  box-shadow: var(--sombra-xs);
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido),
              box-shadow var(--rapido), transform var(--rapido);
}
.botao:hover { background: var(--surface-2); text-decoration: none; }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: none; border-color: var(--primaria); box-shadow: var(--anel); }
.botao .ico { flex: none; }

.botao.primario {
  background: var(--primaria); border-color: var(--primaria); color: #fff;
  box-shadow: 0 1px 2px rgba(3, 47, 102, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.botao.primario:hover { background: var(--primaria-2); border-color: var(--primaria-2); }
.botao.primario:focus-visible { box-shadow: var(--anel); }

.botao.acao { background: var(--sinal); border-color: var(--sinal); color: #fff; }
.botao.acao:hover { background: var(--sinal-forte); border-color: var(--sinal-forte); }

.botao.fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.botao.fantasma:hover { background: rgba(16, 24, 40, .05); color: var(--ink); }

.botao.perigo { color: var(--crit); }
.botao.perigo:hover { background: var(--crit-soft); border-color: var(--crit-borda); color: var(--sinal-forte); }

.botao.mini { min-height: 34px; padding: 0 14px; font-size: var(--t-peq); border-radius: 6px; }
.botao.icone { width: 36px; min-height: 36px; padding: 0; }
.botao.icone.mini { width: 30px; min-height: 30px; }

.botao.primario.inverso { background: #fff; border-color: #fff; color: var(--marinho); }
.botao.primario.inverso:hover { background: var(--primaria-soft); }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }

/* ============================ avisos ===================================== */
.aviso {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--warn-borda); border-radius: var(--raio-sm);
  background: var(--warn-soft); color: #93370D;
  font-size: var(--t-base);
}
.aviso .ico { flex: none; margin-top: 2px; }
.aviso.bom  { background: var(--ok-soft);       color: #085D3A; border-color: var(--ok-borda); }
.aviso.ruim { background: var(--crit-soft);     color: #912018; border-color: var(--crit-borda); }
.aviso.info { background: var(--primaria-soft); color: #0B4A85; border-color: var(--primaria-borda); }
.aviso .quem { margin-left: 4px; }

.vazio {
  padding: var(--e9) var(--e5);
  text-align: center; color: var(--ink-3); font-size: var(--t-base);
}
.vazio strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: var(--t-med); font-weight: 600; }

.saida {
  padding: var(--e4);
  font-family: var(--face-copia); font-size: var(--t-mini); line-height: 1.65;
  color: var(--ink); white-space: pre-wrap; overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--linha); border-radius: var(--raio-sm);
}

/* ============================ pedido ===================================== */
/* Cabeçalho do pedido num card azul do menu, texto branco (16/09/2026). */
.cabecalho-pedido {
  align-items: flex-end;
  padding: var(--e6) var(--e7);
  border-radius: var(--raio);
  background: var(--barra); color: var(--barra-ink);
}
.cabecalho-pedido h1 { color: #fff; }
.cabecalho-pedido .sub { color: rgba(255, 255, 255, .88); font-weight: 600; }

/* Valor que vira campo ao clicar (página do pedido, 16/09/2026). */
.editavel {
  display: inline-block; max-width: 100%;
  margin: -2px -6px; padding: 2px 6px;
  border-radius: var(--raio-xs); cursor: text;
  transition: background var(--rapido);
}
.editavel:hover, .editavel:focus-visible { background: var(--primaria-soft); outline: none; }
.editavel.editavel-bloco { display: block; min-height: 1.6em; }  /* Observação: clica em qualquer ponto da linha */
.cabecalho-pedido .editavel:hover,
.cabecalho-pedido .editavel:focus-visible { background: rgba(255, 255, 255, .12); }
.form-editavel { display: inline; }
.form-editavel input, .form-editavel select { min-width: 160px; font: inherit; color: var(--ink); }
.ref-titulo .form-editavel input { min-width: 280px; }
.cabecalho-pedido .progresso { color: var(--accent); font-weight: 600; }
.cabecalho-pedido .trilha { background: rgba(255, 255, 255, .18); }
.cabecalho-pedido .trilha > i { background: var(--accent); }
.acoes-cabecalho { display: flex; align-items: center; gap: var(--e2); }
.acoes-cabecalho form { display: contents; }
.botao.lixo-cabecalho { color: #fff; width: 36px; min-height: 36px; }
.botao.lixo-cabecalho .ico { stroke-width: 2.4; }
.botao.lixo-cabecalho:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ref-titulo { letter-spacing: -.02em; }
.estado-pedido { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e2); }
.estado-pedido .progresso { width: 220px; }

/* ============================ régua ====================================== */
.regua { display: flex; flex-direction: column; padding-bottom: var(--e3); }

.regua .fase {
  padding: var(--e5) var(--e5) var(--e2) 56px;
  font-size: var(--t-mini); font-weight: 600; color: var(--ink-3);
}
.regua .fase:first-child { padding-top: var(--e2); }

.marco {
  position: relative;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start; gap: var(--e3);
  padding: 10px var(--e5);
}
.marco::before {
  content: ''; position: absolute;
  left: calc(var(--e5) + 15px); top: 0; bottom: 0; width: 2px;
  background: var(--linha);
}
.marco.feito::before { background: var(--accent); opacity: .3; }
.marco.atual    { background: linear-gradient(90deg, var(--primaria-soft), transparent 75%); }
.marco.atrasado { background: linear-gradient(90deg, var(--crit-soft), transparent 75%); }

.marco .no {
  position: relative; z-index: 1;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--linha-forte); color: var(--ink-3);
  font-size: var(--t-mini); font-weight: 600;
}
/* Círculos no verde das bolinhas da página Etapas (pedido dela, 16/09/2026). */
.marco.feito .no    { background: var(--accent);   border-color: var(--accent);   color: #fff; }
.marco.atual .no    { background: #1A7CFF;         border-color: #1A7CFF;         color: #fff;
                      box-shadow: 0 0 0 4px rgba(26, 124, 255, .22); }
.marco .no-form { display: contents; }
button.no { padding: 0; font-family: inherit; cursor: pointer; transition: transform var(--rapido), box-shadow var(--rapido); }
button.no:hover { transform: scale(1.08); border-color: var(--accent); }
.marco.atrasado .no { background: var(--crit);     border-color: var(--crit);     color: #fff;
                      box-shadow: 0 0 0 4px var(--crit-borda); }

.marco .texto { min-width: 0; padding-top: 6px; }
.marco .lado { padding-top: 2px; }
.marco .texto .t { font-size: var(--t-base); line-height: 1.4; color: var(--ink); }
.marco.feito .texto .t { color: var(--ink); }
.marco .no-check .ico { stroke-width: 3; }
/* Sem NCM / falta: o amarelo vivo da tag "Em preparação" do Status, mesmo
   formato de tag (pedido dela, 16/09/2026). */
.tag-amarela {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 12px;
  border-radius: 6px;
  background: #FFC107; color: var(--marinho);
  font-size: var(--t-mini); font-weight: 600; white-space: nowrap;
}
/* FINIMP na parcela: igual à tag "Sem NCM" (17/09/2026). */
.tag-finimp {
  display: inline-flex; align-items: center;
  height: 24px; margin-top: 4px; padding: 0 12px;
  border-radius: 6px;
  background: #FFC107; color: var(--marinho);
  font-size: var(--t-mini); font-weight: 600; white-space: nowrap;
}
/* Responsável da etapa em aberto: sem inicial, sem vermelho — o azul vivo da
   tag "A caminho" do Status (pedido dela, 16/09/2026). */
.tag-quem {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 12px;
  border-radius: 6px;
  background: #fff; color: #1A7CFF; border: 1px solid #1A7CFF;
  font-size: var(--t-mini); font-weight: 600; white-space: nowrap;
}
.marco.atual .texto .t, .marco.atrasado .texto .t { font-weight: 600; }
.marco.futuro .texto .t { color: var(--ink); }
.marco .texto .m {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 3px; font-size: var(--t-mini); color: var(--ink-3);
}
.marco .lado { display: flex; align-items: center; gap: var(--e2); }
.marco .lado .data { font-size: var(--t-peq); color: var(--ink-2); }
.marco .lado .desfazer { opacity: 0; transition: opacity var(--rapido); }
.marco:hover .lado .desfazer,
.marco .lado .desfazer:focus-within { opacity: 1; }
.marco .extra { grid-column: 2 / -1; margin-top: var(--e2); }

/* ============================ overlay ==================================== */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: none; align-items: center; justify-content: center;
  padding: var(--e5);
  background: rgba(15, 28, 46, .42);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.overlay[data-aberto="1"] { display: flex; animation: aparece var(--medio) both; }
.overlay[data-aberto="1"] > .painel { animation: sobe var(--medio) both; }
.overlay > .painel {
  width: min(800px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}
.overlay > .painel > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4);
  padding: var(--e5) var(--e6);
  border-bottom: 1px solid var(--linha);
}
.overlay > .painel > header .sub { margin-top: 2px; font-size: var(--t-peq); }
.overlay > .painel > .corpo { padding: var(--e6); overflow-y: auto; }

/* ============================ listas ===================================== */
.lista-linhas { display: flex; flex-direction: column; overflow: hidden; }
.lista-linhas > a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--linha);
  color: inherit;
  transition: background var(--rapido);
}
.lista-linhas > a:last-child { border-bottom: 0; }
.lista-linhas > a:hover { background: var(--surface-2); text-decoration: none; }
.lista-linhas .esq { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-linhas .esq .titulo { font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.lista-linhas .esq .sub { font-size: var(--t-peq); }
.lista-linhas .dir { display: flex; align-items: center; gap: var(--e3); flex: none; }

/* lista em cartões (celular) */
.lista-cartoes { display: none; flex-direction: column; gap: var(--e2); }
.item-cartao {
  display: block; padding: var(--e4);
  background: var(--surface);
  border: 1px solid var(--contorno); border-radius: var(--raio);
  box-shadow: var(--sombra);
  color: inherit;
}
.item-cartao:hover { text-decoration: none; box-shadow: var(--sombra-md); }
.item-cartao .linha1 {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  margin-bottom: 4px;
}
.item-cartao .linha2 { margin-bottom: var(--e2); font-size: var(--t-peq); color: var(--ink-2); }
.item-cartao .linha3 {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  font-size: var(--t-mini); color: var(--ink-3);
}

/* ============================ tarefas: mapa ============================== */
/* A régua como uma trilha: cada etapa é uma parada — o número na trilha e o
   card embaixo —, na ordem de leitura. A linha pontilhada passa por cima do
   fundo e por baixo dos cards, ligando os números; no fim de cada fileira ela
   volta pelo vão entre as fileiras. Quatro colunas em tela larga, três no
   notebook, duas no tablet, uma no celular. */
.topo-tarefas h1 { font-weight: 500; letter-spacing: -.03em; }

.mapa {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e9) var(--e6);
  padding: var(--e2) var(--e7) var(--e5);
}
.mapa-trilha {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
/* Pontilhado cinza claro, igual em toda a trilha (pedido dela, 15/09/2026 —
   as cores por fase ela testou e trocou pelo cinza). Pontinho fino. O
   caminho continua separado por fase no script, só não muda de cor. */
.mapa-trilha path {
  fill: none;
  stroke: var(--linha-forte);
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 0 9;
  animation: caminhar 1.8s linear infinite, aparece .6s .3s both;
}
/* Anda dois pontinhos (18px) por volta — o script em painel.js conta com isso. */
@keyframes caminhar { to { stroke-dashoffset: -18; } }

.parada {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--e3);
  min-width: 0;
}

/* Bolinhas todas verde Mach, número branco e aura cinza claro (pedido dela,
   15/09/2026 — aura na cor da fase e aura verde ela não quis). Pintada
   sempre, com ou sem pedido — quem diz se a etapa tem trabalho é o card. */
.parada-no {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: var(--t-peq); font-weight: 600;
  box-shadow: 0 0 0 5px #E6E8EC,
              0 6px 14px -6px rgba(15, 28, 46, .22);
  transition: transform var(--medio);
  animation: aparece .4s both;
  animation-delay: calc(var(--i) * 30ms);
}
.parada:hover .parada-no { transform: scale(1.06); }

.parada-cartao {
  width: 100%;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 28, 46, .04), 0 8px 24px -12px rgba(15, 28, 46, .14);
  transition: box-shadow .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1);
  animation: pousa .5s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i) * 30ms);
}
.parada-cartao:hover,
.parada-cartao[open] {
  box-shadow: 0 1px 2px rgba(15, 28, 46, .04), 0 18px 40px -16px rgba(15, 28, 46, .22);
}
.parada-cartao:hover { transform: translateY(-2px); }
/* Todos os cards com a mesma cara de ativo (pedido dela, 15/09/2026) — o que
   separa etapa com pedido de etapa vazia é o número azul (vazia fica sem
   número, não "0") e o título com mais peso. */
@keyframes pousa {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.parada-cartao > summary {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 76px;
  padding: var(--e4) var(--e4) var(--e4) 18px;
  border-radius: 18px;
  list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.parada-cartao > summary::-webkit-details-marker { display: none; }
.parada-cartao > summary:focus-visible { outline: 2px solid var(--primaria); outline-offset: 3px; }

.parada-titulo {
  flex: 1; min-width: 0;
  font-size: .9375rem; font-weight: 400; line-height: 1.35; letter-spacing: -.01em;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.parada.tem .parada-titulo { font-weight: 600; }

/* Número do marco na coluna Etapa atual da lista de Pedidos (16/09/2026):
   a mesma bolinha verde da página Etapas, em tamanho de linha de tabela. */
.etapa-atual { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.etapa-num {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px #E6E8EC;
}
/* Pedido concluído na coluna Etapa atual: tag toda arredondada, no verde das
   bolinhas de etapa (pedido dela, 16/09/2026). */
.tag-concluido {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 12px;
  border-radius: 6px;
  background: var(--accent); color: #fff;
  font-size: var(--t-mini); font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.parada-qtd {
  flex: none;
  font-size: var(--t-gr); font-weight: 700; letter-spacing: -.02em;
  color: var(--azul-vivo);
}

.parada-seta {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; margin-right: -4px;
  border-radius: 50%;
  color: var(--azul-vivo);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), background var(--rapido);
}
.parada-seta .ico { stroke-width: 2.25; }
.parada-cartao > summary:hover .parada-seta { background: var(--primaria-soft); }
.parada-cartao[open] .parada-seta { transform: rotate(180deg); }

.parada-corpo {
  margin: 0 var(--e4); padding: var(--e1) 0 var(--e3);
  border-top: 1px solid var(--linha);
  animation: surge var(--medio) both;
}
.grupo-forn { padding: var(--e2) 0 var(--e1); }
.grupo-forn + .grupo-forn { border-top: 1px solid var(--linha); }
.nome-fornecedor {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2);
  padding: 4px 0;
  font-size: var(--t-mini); font-weight: 500; color: var(--ink-3);
}
.nome-fornecedor .qtd { color: var(--ink-4); }
.linha-pedido {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  padding: 5px 0;
  color: inherit;
}
.linha-pedido:hover { text-decoration: none; }
.linha-pedido:hover .ref { text-decoration: underline; text-underline-offset: 3px; }
.linha-pedido .ref {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-peq); color: var(--azul-vivo);
}
.linha-pedido .quando { flex: none; font-size: var(--t-mini); color: var(--ink-3); }

.nota-vazia { padding: 0 var(--e5) var(--e5); font-size: var(--t-peq); color: var(--ink-3); }
.parada-corpo .nota-vazia { padding: var(--e3) 0 var(--e1); }

@media (max-width: 1359px) {
  .mapa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e9) var(--e4); }
}
@media (max-width: 639px) {
  .mapa { grid-template-columns: 1fr; gap: var(--e3); padding: 0; }
  .parada {
    display: grid; grid-template-columns: 36px minmax(0, 1fr);
    align-items: start; column-gap: var(--e3);
  }
  .parada-no { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-trilha path { animation: none; }
}

/* ============================ solicitações =============================== */
.passos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e6); }
.passo {
  display: inline-flex; align-items: center; gap: var(--e2);
  height: 34px; padding: 0 var(--e4) 0 6px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--surface);
  font-size: var(--t-peq); font-weight: 500; color: var(--ink-3);
}
.passo b {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  font-size: var(--t-micro); font-weight: 600;
}
.passo.atual { border-color: var(--primaria-borda); background: var(--primaria-soft); color: var(--primaria); }
.passo.atual b { background: var(--primaria); color: #fff; }
.passo.feito { border-color: var(--ok-borda); background: var(--ok-soft); color: var(--ok); }
.passo.feito b { background: var(--ok); color: #fff; }

/* tabela "quem é cada fornecedor" — a linha que explica é a que se escolhe */
.tabela-forn { padding: 0 var(--e2) var(--e2); }
.cabecalho-forn, .linha-forn {
  display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) auto;
  align-items: center; gap: var(--e4);
}
.cabecalho-forn { padding: var(--e2) var(--e3); font-size: var(--t-mini); font-weight: 500; color: var(--ink-3); }
.linha-forn {
  position: relative;
  padding: var(--e3);
  border: 1px solid transparent; border-radius: var(--raio-sm);
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido);
}
.linha-forn:hover { background: var(--surface-2); }
.linha-forn.escolhida, .linha-forn:has(input:checked) {
  background: var(--primaria-soft); border-color: var(--primaria);
}
/* O rádio some de vista mas continua no layout: um input `display:none` não
   pode receber foco, e aí o navegador se recusa a enviar o formulário sem
   conseguir mostrar o "Selecione uma das opções" — trava calada. */
.linha-forn input[type="radio"],
.opcao-modal input[type="radio"] {
  position: absolute; top: 50%; left: var(--e3); margin: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.linha-forn:has(input:focus-visible),
.opcao-modal:has(input:focus-visible) { outline: 2px solid var(--primaria); outline-offset: 2px; }
.nome-forn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nome-forn strong { font-size: var(--t-base); color: var(--ink); }
.maqs { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.chip-maq {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--t-mini); font-weight: 500; white-space: nowrap;
}
.linha-forn:has(input:checked) .chip-maq { background: var(--surface); border-color: var(--primaria-borda); }
.conta-forn { font-size: var(--t-mini); color: var(--ink-3); white-space: nowrap; }

/* modal de embarque */
.escolha-modal { display: flex; flex-wrap: wrap; gap: var(--e3); padding: var(--e2) 0; }
.opcao-modal {
  position: relative;
  display: flex; flex-direction: row; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e5);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
  background: var(--surface); color: var(--ink);
  font-size: var(--t-base); font-weight: 500;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido);
}
.opcao-modal:hover { background: var(--surface-2); }
.opcao-modal:has(input:checked) { background: var(--primaria-soft); border-color: var(--primaria); color: var(--primaria); }

/* Enquanto nenhum fornecedor está marcado, o botão avisa que ainda falta algo
   em vez de parecer clicável e não fazer nada. */
.linha-avancar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.dica-escolha {
  display: none; align-items: center; gap: 6px;
  font-size: var(--t-peq); font-weight: 500; color: var(--ink-3);
}
.dica-escolha .ico { color: var(--warn); }
form:not(:has(.tabela-forn input:checked)) .dica-escolha { display: inline-flex; }
form:not(:has(.tabela-forn input:checked)) .linha-avancar .botao.primario { opacity: .55; }

/* carrinho: catálogo à esquerda, resumo grudado à direita */
.grade-carrinho {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: start; gap: var(--e5);
}
.coluna-catalogo { min-width: 0; }
.coluna-resumo { position: sticky; top: var(--e5); min-width: 0; }

.busca-itens {
  display: flex; flex-direction: row; align-items: center; gap: var(--e2);
  padding: 0 var(--e3);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
  background: var(--surface); box-shadow: var(--sombra-xs);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.busca-itens .ico { flex: none; color: var(--ink-3); }
.busca-itens input { border: 0; background: none; box-shadow: none; padding-left: 0; }
.busca-itens input:focus { box-shadow: none; }
.busca-itens:focus-within { border-color: var(--primaria); box-shadow: var(--anel); }

.chips-maquina { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e3); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 var(--e3);
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: var(--t-peq); font-weight: 500;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.chip:hover { border-color: var(--linha-forte); }
.chip .n { font-size: var(--t-mini); color: var(--ink-3); }
.chip.ativo { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.ativo .n { color: rgba(255, 255, 255, .7); }

.alternar-orfas { margin-top: var(--e3); color: var(--ink-3); font-weight: 400; cursor: pointer; }
.alternar-orfas input { flex: 0 0 auto; }

.grade-itens { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.item-pedido {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e3);
  min-width: 0; padding: var(--e4);
  background: var(--surface);
  border: 1px solid var(--contorno); border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.item-pedido.escolhido { border-color: var(--primaria); box-shadow: var(--anel); }
.cabeca-item { display: flex; align-items: flex-start; gap: var(--e3); min-width: 0; }
.info-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.info-item .cod { font-size: var(--t-peq); font-weight: 600; color: var(--primaria); }
/* Algumas peças têm descrição de parágrafo inteiro; sem limite, um card fica
   400px mais alto que o vizinho e a grade vira escada. O texto completo fica
   no `title`. */
.info-item .nome {
  font-size: var(--t-base); line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.info-item .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px; }

.passo-qtd { display: flex; align-items: center; gap: var(--e2); }
.passo-qtd .qtd { width: 64px; min-height: 34px; padding: 4px; text-align: center; font-weight: 600; }
.passo-qtd .botao.icone.mini {
  flex: 0 0 auto; width: 34px; height: 34px; min-height: 34px; padding: 0;
  font-size: var(--t-med); line-height: 1;
}

.resumo-pedido .corpo { display: flex; flex-direction: column; gap: var(--e3); }
.lista-resumo {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
}
.lista-resumo li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2);
  padding-bottom: 6px; border-bottom: 1px solid var(--linha);
  font-size: var(--t-peq);
}
.lista-resumo li:last-child { padding-bottom: 0; border-bottom: 0; }
.nome-resumo { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }

/* pares rótulo/valor */
.pares { display: grid; gap: var(--e4); margin: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pares dt, .pares-novo dt, .pares-compra dt {
  margin-bottom: 2px; font-size: var(--t-mini); font-weight: 500; color: var(--ink-3);
}
.pares dd { margin: 0; font-size: var(--t-base); color: var(--ink); }

/* ============================ fila de códigos ============================ */
.linha-pendente {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--linha);
}
.linha-pendente:last-child { border-bottom: 0; }
.info-pendente { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; min-width: 0; }
.info-pendente .desc { font-size: var(--t-base); color: var(--ink); }
.meta-pendente {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2);
  font-size: var(--t-mini); color: var(--ink-3);
}
.acao-pendente { display: flex; align-items: center; gap: var(--e2); flex: none; }
.acao-pendente input { width: 140px; min-height: 36px; }

/* ============================ novos pedidos ============================== */
/* Fila de aprovação. Cada cartão mostra o pedido inteiro, porque é isso que
   ela confere antes de deixar entrar. */
.grupo-novos { margin-bottom: var(--e8); }
.grupo-novos > h2,
.dia-atualizacao > h2 { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.grupo-novos > h2 .contagem,
.dia-atualizacao > h2 .contagem {
  min-width: 22px; height: 20px; padding: 0 7px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2);
  font-size: var(--t-mini); font-weight: 600; letter-spacing: 0;
}

.pedido-novo {
  margin-bottom: var(--e4); overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--contorno); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.pedido-novo > header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e4);
  padding: var(--e5);
}
.cabeca-novo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cabeca-novo h3 { font-size: var(--t-gr); letter-spacing: -.02em; }
.sub-novo { font-size: var(--t-peq); color: var(--ink-3); }
.etiqueta-origem {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--t-mini); font-weight: 500;
}
.etiqueta-origem.solicitacao { background: var(--primaria-soft); color: var(--primaria); border-color: var(--primaria-borda); }
.etiqueta-origem.email       { background: var(--warn-soft);     color: var(--warn);     border-color: var(--warn-borda); }
.valor-novo { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.valor-novo .mono { font-size: var(--t-gr); font-weight: 600; letter-spacing: -.02em; }

.pares-novo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e3) var(--e5);
  margin: 0; padding: 0 var(--e5) var(--e5);
}
.pares-novo dd { margin: 0; font-size: var(--t-base); color: var(--ink); }

.itens-novo { border-top: 1px solid var(--linha); }
.rotulo-itens { display: block; padding: var(--e3) var(--e5); font-size: var(--t-peq); font-weight: 500; color: var(--ink-2); }
.itens-novo table { width: 100%; }
.itens-novo td { padding: 6px var(--e2); border-bottom: 0; font-size: var(--t-peq); vertical-align: baseline; }
.itens-novo td:first-child { padding-left: var(--e5); }
.itens-novo td:last-child { padding-right: var(--e5); color: var(--ink); }
.itens-novo tbody tr:hover { background: transparent; }
.itens-novo table + .fraco { padding: 0 var(--e5) var(--e3); }
.qtd-item { width: 3em; text-align: right; font-weight: 600; color: var(--primaria); }
.cod-item { width: 9em; color: var(--ink-3); }

details.itens-novo > summary.rotulo-itens {
  display: flex; align-items: center; gap: var(--e2);
  list-style: none; cursor: pointer;
}
details.itens-novo > summary.rotulo-itens::-webkit-details-marker { display: none; }
details.itens-novo > summary.rotulo-itens::after {
  content: ''; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--medio);
}
details.itens-novo[open] > summary.rotulo-itens::after { transform: translateY(1px) rotate(-135deg); }

.pedido-novo > footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--linha);
  background: var(--surface-2);
}
.pedido-novo > footer .acoes-dir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2); }

/* Pedido de compra dentro do cartão — é o que ela copia para o Nomus, então
   prioriza leitura de número: alinhado à direita, total destacado. */
.pedido-compra { border-top: 1px solid var(--linha); }
.pedido-compra > summary {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e5);
  font-size: var(--t-peq); font-weight: 500; color: var(--primaria);
  list-style: none; cursor: pointer;
}
.pedido-compra > summary::-webkit-details-marker { display: none; }
.pedido-compra > summary .ico { transition: transform var(--medio); }
.pedido-compra[open] > summary .ico { transform: rotate(90deg); }

.pares-compra {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e3) var(--e5);
  margin: 0; padding: var(--e1) var(--e5) var(--e4);
}
.pares-compra.datas { padding-top: var(--e4); border-top: 1px dashed var(--linha); }
.pares-compra dd { margin: 0; font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.pares-compra dd .fraco { margin-left: 4px; font-weight: 400; }

.tabela-compra th, .tabela-parcelas th {
  position: static;
  padding: 8px var(--e3);
  background: var(--surface-2);
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  font-size: var(--t-mini); font-weight: 500; color: var(--ink-3);
  text-align: left; white-space: nowrap;
}
.tabela-compra th.num, .tabela-parcelas th.num { text-align: right; }
.tabela-compra td, .tabela-parcelas td {
  padding: 8px var(--e3);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-peq); color: var(--ink);
}
.tabela-compra th:first-child, .tabela-compra td:first-child,
.tabela-parcelas th:first-child, .tabela-parcelas td:first-child { padding-left: var(--e5); }
.tabela-compra th:last-child, .tabela-compra td:last-child,
.tabela-parcelas th:last-child, .tabela-parcelas td:last-child { padding-right: var(--e5); }
/* Frete e impostos não vêm da invoice: são calculados, e isso precisa ficar claro. */
.linha-calculada td { background: var(--primaria-soft); color: var(--ink-2); font-style: italic; }
.linha-total td { background: var(--surface); border-top: 1px solid var(--linha-forte); border-bottom: 0; font-weight: 600; }
.tabela-parcelas { margin-top: var(--e4); }

/* Aprovar já leva o nº do Nomus: o campo fica colado no botão, opcional. */
.form-aprovar { display: flex; align-items: flex-end; gap: var(--e2); }
.form-aprovar .campo-pc { display: grid; gap: 4px; }
.form-aprovar .campo-pc span { font-size: var(--t-mini); font-weight: 500; color: var(--ink-3); }
.form-aprovar .campo-pc input { width: 13ch; min-height: 38px; }

/* ============================ atualizações =============================== */
/* Histórico: um dia por bloco, e colunas fixas — qual pedido, que etapa, quem
   fez. Colunas fixas porque a leitura aqui é vertical, comparando linhas. */
.dia-atualizacao { margin-bottom: var(--e6); }
.dia-atualizacao > h2 { font-size: var(--t-peq); color: var(--ink-2); }
.dia-atualizacao > .cartao { overflow: hidden; }

.linha-atualizacao {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto auto;
  align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--linha);
  color: inherit;
  transition: background var(--rapido);
}
.linha-atualizacao:last-child { border-bottom: 0; }
.linha-atualizacao:hover { background: var(--surface-2); text-decoration: none; }
.col-pedido { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.col-pedido .ref {
  font-size: var(--t-peq); font-weight: 600; color: var(--primaria);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-pedido .forn { font-size: var(--t-mini); color: var(--ink-3); }
.col-etapa { display: flex; align-items: flex-start; gap: var(--e2); min-width: 0; font-size: var(--t-peq); color: var(--ink); }
.num-etapa {
  flex: none; width: 24px; height: 20px;
  display: inline-grid; place-items: center;
  border-radius: 6px; background: var(--surface-3); color: var(--ink-2);
  font-size: var(--t-micro); font-weight: 600;
}
.col-quem { flex: none; }
.autor, .selo-tipo {
  display: inline-flex; align-items: center; flex: none;
  height: 24px; padding: 0 12px;
  border: 1px solid var(--linha); border-radius: 6px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--t-mini); font-weight: 500; white-space: nowrap;
}
.selo-tipo { height: 22px; padding: 0 10px; font-size: var(--t-micro); }
.autor.pessoa, .selo-tipo.criacao { background: var(--primaria-soft); color: var(--primaria); border-color: var(--primaria-borda); }
.autor.ia, .selo-tipo.parcela     { background: var(--ok-soft);       color: var(--ok);       border-color: var(--ok-borda); }
.autor.auto, .autor.sistema,
.selo-tipo.embarque               { background: var(--warn-soft);     color: var(--warn);     border-color: var(--warn-borda); }

.texto-etapa { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.porque { font-size: var(--t-mini); line-height: 1.4; color: var(--ink-3); }
.col-data { flex: none; min-width: 0; }
.data-fato { font-size: var(--t-mini); font-weight: 500; color: var(--ink-3); white-space: nowrap; }

/* ============================ situação atual ============================= */
/* Protagonistas: item, quantidade e data. Cada estágio tem sua cor — amarelo
   (fabricando), laranja (pronta), azul (navegando), verde (no porto) — e ela só
   pinta ponto, borda e número; o nome do estágio vem sempre escrito. */
:root {
  --est-preparacao: #E5B100;
  --est-pronta:     #F07C1A;
  --est-caminho:    var(--primaria);
  --est-porto:      var(--ok);
}
/* Amarelo e laranja somem como TEXTO no branco: os números usam um tom mais
   fundo da mesma cor (4.5:1+). */
.est-preparacao { --est: var(--est-preparacao); --est-tinta: #8A6D00; --est-vivo: #FFC107; --est-vivo-sobre: var(--marinho); }
.est-pronta     { --est: var(--est-pronta);     --est-tinta: #B4540A; --est-vivo: #FF7A00; }
.est-caminho    { --est: var(--est-caminho);    --est-vivo: #1A7CFF; }
.est-porto      { --est: var(--est-porto);      --est-vivo: #2DBE3C; }

/* 1. o fluxo: quatro estágios em sequência */
.pan-fluxo {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4);
  margin: 0 0 var(--e5); padding: 0; list-style: none;
}
.pan-estagio {
  position: relative;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--e4);
  background: var(--surface);
  border: 1px solid var(--contorno); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
/* O nome do estágio é a mesma tag da tabela "O que está vindo" (pedido dela,
   15/09/2026); sem seta entre os cards e sem a contagem de pedidos. */
/* Cards compactos, sem a dica (pedido dela, 15/09/2026): máquinas numa linha,
   peças na de baixo. */
.pan-estagio-nome { align-self: flex-start; margin-bottom: var(--e2); }
.pan-estagio-qtd {
  display: flex; align-items: baseline; gap: 4px;
  font-size: var(--t-peq); color: var(--ink); white-space: nowrap;
}
/* Número do tamanho do texto, em preto (pedido dela, 15/09/2026). */
.pan-estagio-qtd strong { font-size: 15px; font-weight: 600; color: var(--ink); }

/* blocos */
.pan-bloco {
  min-width: 0; margin-bottom: var(--e5);
  padding: var(--e5) var(--e6) var(--e6);
  background: var(--surface);
  border: 1px solid var(--contorno); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.pan-bloco-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e2) var(--e5);
  margin-bottom: var(--e4);
}
/* Busca pelo nome da máquina no topo de "O que está vindo". */
.pan-bloco-topo.com-busca { align-items: center; }
.pan-busca { width: min(280px, 100%); }
.pan-busca input { height: 36px; }
.pan-busca-vazia { padding: var(--e4) 0 var(--e2); }
/* 2. resumo por modelo — máquina | onde está | total */
.pan-modelos { width: 100%; border-collapse: collapse; }
.pan-modelos thead th {
  position: static;
  padding: 0 var(--e3) var(--e2) 0;
  background: none; border-bottom: 1px solid var(--linha);
  font-size: var(--t-mini); font-weight: 500; color: var(--ink-3); text-align: left;
}
.pan-modelos thead th.num { text-align: right; padding-right: 0; }
.pan-modelos tbody th, .pan-modelos td {
  padding: var(--e3) var(--e3) var(--e3) 0;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}
.pan-modelos tbody tr:last-child > * { border-bottom: 0; }
.pan-modelos tbody tr:hover { background: transparent; }
.pan-modelo-nome { width: 34%; text-align: left; font-size: var(--t-base); font-weight: 500; }
/* O flex vai numa caixa DENTRO da célula: flex na própria <td> tira ela do
   modo tabela, e a linha de baixo dessa coluna saía desalinhada das outras. */
.pan-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.pan-modelo-total {
  padding-right: 0 !important; text-align: right; white-space: nowrap;
  font-size: var(--t-gr); font-weight: 600; letter-spacing: -.02em;
}
/* o selo: nome do estágio escrito + número, com a cor como reforço */
/* Tag do estágio em cor viva, fundo cheio (pedido dela, 15/09/2026 — pastel
   não) — as mesmas cores vivas do pontilhado da página Etapas. Texto branco;
   no amarelo, azul-marinho Mach (branco no amarelo ficou ilegível e tons
   mais fundos ela também não quis). */
.pan-selo {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 12px;
  border: 0; border-radius: 6px;
  background: var(--est-vivo, var(--est));
  color: var(--est-vivo-sobre, #fff);
  font-size: var(--t-mini); white-space: nowrap;
}
.pan-selo-nome { font-weight: 600; }
.pan-selo strong { font-size: var(--t-peq); font-weight: 600; }
.pan-pecas > * { border-top: 1px dashed var(--linha-forte); padding-top: var(--e3) !important; }

/* 3. linhas do tempo, lado a lado */
.pan-trilhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--e5); }
.pan-tempo { position: relative; margin: 0; padding: 0; list-style: none; }
.pan-tempo::before {
  content: ''; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px;
  background: var(--linha);
}
.pan-no { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--e4); padding: var(--e3) 0; }
.pan-data {
  position: relative; z-index: 1; align-self: start;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0;
  background: var(--surface);
  border: 1.5px solid var(--est); border-radius: var(--raio-sm);
}
.pan-data .dia { font-size: var(--t-gr); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.pan-data .mes { margin-top: 2px; font-size: var(--t-micro); font-weight: 500; color: var(--ink-3); }
/* previsão (ainda não é data certa): borda tracejada */
.pan-no.est-preparacao .pan-data { border-style: dashed; }
.pan-status { margin-bottom: 2px; font-size: var(--t-mini); font-weight: 600; color: var(--est-tinta, var(--est)); }
/* De onde vem a data (22/09/2026): ETA do navio (real) ou prazo médio (esperada). */
.pan-estimativa {
  margin-left: var(--e2);
  padding: 1px 8px;
  border: 1px solid var(--linha-forte); border-radius: 999px;
  color: var(--ink-3); font-size: var(--t-micro); font-weight: 500; letter-spacing: .02em;
  white-space: nowrap;
}
.pan-estimativa.real { border-color: var(--est); color: var(--est-tinta, var(--est)); }
.pan-quando { font-size: var(--t-peq); color: var(--ink-3); }
.pan-itens { margin: 6px 0 0; padding: 0; list-style: none; }
/* cada linha é um botão que abre o pedido — com cara de texto, não de botão */
.pan-item {
  display: block; width: 100%;
  margin-left: -8px; padding: 4px 8px;
  font: inherit; font-size: var(--t-base); font-weight: 500; line-height: 1.4;
  color: var(--ink); text-align: left;
  background: none; border: 0; border-radius: 8px;
  cursor: pointer;
  transition: background var(--rapido);
}
.pan-item:hover { background: var(--surface-2); }
.pan-item:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
.pan-item-texto { font-weight: 400; color: var(--ink-2); }
.pan-itens .qtd { display: inline-block; min-width: 2.6ch; font-weight: 600; color: var(--est-tinta, var(--est)); }
.pan-itens .pan-item-pecas { font-weight: 400; color: var(--ink-2); }
/* o marcador de hoje corta o trilho */
.pan-hoje { position: relative; display: flex; align-items: center; gap: var(--e2); margin: var(--e2) 0; }
.pan-hoje::after { content: ''; flex: 1; height: 1.5px; background: var(--sinal); opacity: .4; }
/* título do mês na linha do tempo — o fundo cobre o trilho atrás do nome */
.pan-mes { position: relative; z-index: 1; padding: var(--e5) 0 var(--e1); }
.pan-tempo > .pan-mes:first-child { padding-top: 0; }
.pan-mes span {
  display: inline-block; padding: 2px var(--e2) 2px 0;
  background: var(--surface);
  font-size: var(--t-med); font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.pan-hoje span {
  position: relative; z-index: 1; margin-left: 4px; padding: 2px 10px;
  font-size: var(--t-micro); font-weight: 600; color: var(--sinal);
  background: var(--surface); border: 1px solid var(--crit-borda); border-radius: 999px;
}
.pan-rodape { max-width: 80ch; margin: 0 0 var(--e6); font-size: var(--t-peq); color: var(--ink-3); }

/* ============================ login ====================================== */
.pagina-login {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--e5);
  background: var(--marinho);
}
.login-caixa {
  width: 100%; max-width: 400px;
  padding: var(--e8) var(--e7) var(--e7);
  background: var(--surface);
  border-radius: var(--raio-lg);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .45);
}
.login-marca { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e7); }
.login-marca .selo {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--marinho); color: #fff;
  font-size: var(--t-peq); font-weight: 700;
}
.login-marca strong { display: block; font-size: var(--t-med); font-weight: 600; }
.login-marca span span { font-size: var(--t-peq); color: var(--ink-3); }
.login-caixa h1 { margin-bottom: var(--e5); }
.login-form { display: grid; gap: var(--e4); }
.login-form label { display: grid; gap: 6px; }
.login-form .botao { width: 100%; min-height: var(--toque); margin-top: var(--e2); }
.login-erro { margin-bottom: var(--e4); }

/* ============================ responsivo ================================= */
@media (max-width: 1180px) {
  .grade.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade.duas   { grid-template-columns: 1fr; }
  .grade.pedido { grid-template-columns: 1fr; }
  .conteudo { padding-left: var(--e7); padding-right: var(--e7); }
}

@media (max-width: 1100px) {
  .pan-fluxo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pan-trilhas { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .grade-carrinho { grid-template-columns: 1fr; }
  .coluna-resumo { position: static; order: -1; }
  .cabecalho-forn { display: none; }
  .linha-forn { grid-template-columns: 1fr; gap: var(--e2); }
}

@media (max-width: 860px) {
  :root { --t-base: .9375rem; }

  .app { grid-template-columns: 1fr; }

  .barra-lateral {
    position: sticky; top: 0; z-index: var(--z-topo);
    height: auto; flex-direction: row; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e4);
    overflow: visible;
  }
  .nav-lateral, .rodape-lateral { display: none; }
  .marca { flex-direction: row; align-items: center; gap: var(--e3); padding: 0; }
  .logo-mach { width: 88px; }
  .marca .nome { font-size: var(--t-mini); }
  .seletor-modo.no-topo { display: flex; margin-left: auto; padding: 0; }
  .seletor-modo.no-topo .rotulo-modo { display: none; }
  .seletor-modo.no-topo select { font-size: 14px; min-height: 0; padding: 4px 8px; }
  .usuario-topo {
    display: flex; align-items: center; gap: var(--e2);
    color: var(--barra-ink); font-size: var(--t-peq);
  }

  .conteudo { padding: var(--e4) var(--e4) 104px; }

  .abas {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-abas);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--barra);
    border-top: 1px solid var(--barra-linha);
  }
  .abas a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 8px 2px;
    color: var(--barra-ink-3); font-size: .625rem; font-weight: 500; text-align: center; line-height: 1.15;
  }
  .abas a:hover { text-decoration: none; }
  .abas a.ativo { color: #fff; }
  .abas a.ativo .ico { color: var(--accent); }
  .abas .cont {
    position: absolute; top: 5px; left: 50%; margin-left: 6px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--sinal); color: #fff;
    font-size: .625rem; font-weight: 600;
  }

  h1 { font-size: 1.375rem; }
  .topo { align-items: flex-start; margin-bottom: var(--e5); }

  .metrica .valor { font-size: var(--t-xg); }

  .grade.duas, .grade.tres, .grade.quatro { grid-template-columns: 1fr; }

  .so-desktop { display: none !important; }
  .lista-cartoes { display: flex; }

  .botao { min-height: var(--toque); padding: 0 var(--e4); }
  .botao.mini { min-height: 38px; }
  .botao.icone, .botao.icone.mini { width: var(--toque); min-height: var(--toque); }
  input, select, textarea { min-height: var(--toque); font-size: 16px; }
  .barra-lateral nav a { min-height: var(--toque); }

  .marco .lado .desfazer { opacity: 1; }
  .estado-pedido { align-items: flex-start; }


  .overlay { padding: 0; align-items: flex-end; }
  .overlay > .painel {
    width: 100%; max-height: 92vh;
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  }

  .caixa-filtros > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
    min-height: var(--toque); padding: var(--e3) var(--e4);
    font-size: var(--t-base); font-weight: 600; color: var(--ink);
    list-style: none; cursor: pointer;
  }
  .caixa-filtros > summary::after {
    content: ''; width: 8px; height: 8px; flex: none; margin-right: 4px;
    border-right: 1.75px solid var(--ink-3); border-bottom: 1.75px solid var(--ink-3);
    transform: rotate(45deg); transition: transform var(--medio);
  }
  .caixa-filtros[open] > summary::after { transform: rotate(-135deg); }
  .caixa-filtros[open] > summary { border-bottom: 1px solid var(--linha); }
  .filtros .botao { flex: 1 1 100%; }
}

@media (max-width: 760px) {
  .linha-atualizacao { grid-template-columns: minmax(0, 1fr) auto; }
  .col-etapa { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  /* no celular os estágios ficam em 2 colunas: empilhados, empurravam o
     conteúdo para fora da primeira tela */
  .pan-fluxo { gap: var(--e2); }
  .pan-estagio { padding: var(--e3); }
  /* o nome ocupa a linha de cima e os selos descem para baixo dele */
  .pan-modelos thead { display: none; }
  .pan-modelos tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .pan-modelos tbody th { width: auto; padding-bottom: 2px; border-bottom: 0; }
  .pan-modelos .pan-modelo-total { grid-row: 1 / span 2; grid-column: 2; border-bottom: 1px solid var(--linha); }
  .pan-modelos .pan-modelo-estagios { grid-column: 1; }
  .pan-bloco { padding: var(--e4); }
}

@media (max-width: 420px) {
  .conteudo { padding: var(--e4) var(--e3) 104px; }
  .regua .fase { padding-left: var(--e5); }
  .marco { grid-template-columns: 24px minmax(0, 1fr); }
  .marco .lado { grid-column: 2; justify-content: flex-start; margin-top: var(--e1); }
}

/* ============================ movimento / impressão ====================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .barra-lateral, .abas, .acoes, .botao { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .cartao { box-shadow: none; break-inside: avoid; }
}