/* ===================================================================
   App layout — Controle de Expedicao (Barry Callebaut)
   Consome os tokens do design-system.css. Linguagem visual: burgundy +
   dourado + cream, com profundidade (elevacao), pensada para uma
   estacao de doca (glancavel, alvos grandes).
   =================================================================== */

html, body, #root { height: 100%; }
#root { min-height: 100%; }

.stack   { display: flex; flex-direction: column; }
.center  { display: flex; align-items: center; justify-content: center; }

svg { flex: none; }
.btn svg, .btn-xl svg, .sidebar-item svg, .badge svg { display: inline-block; vertical-align: middle; }

/* ---------- Botoes: variantes grandes / premium ---------- */
.btn-lg {
  padding: var(--space-4) var(--space-6); font-size: var(--text-lg); min-height: 56px;
  border-radius: var(--radius-lg); font-weight: var(--font-semibold);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.btn-lg:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary.btn-lg { background: var(--gradient-primary); box-shadow: var(--shadow-elegant); }
.btn-primary.btn-lg:hover:not(:disabled) { filter: brightness(1.06); }
.btn-lg:disabled { opacity: 0.45; }
/* REGRA GLOBAL: botao nunca quebra em 2 linhas. Se nao couber lado a lado,
   o container (flex-wrap) empilha os botoes — nunca quebra o texto. */
.btn, .btn-lg, .btn-xl { white-space: nowrap; }

/* ---------- Status: pill com indicador (bolinha) ---------- */
[class*="badge-status--"] { gap: 6px; padding: 0.2rem var(--space-3); }
[class*="badge-status--"]::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; }

/* ============================= LOGIN =============================== */
.login { min-height: 100%; display: grid; grid-template-columns: 1.05fr 1fr; }
@media (max-width: 820px) { .login { grid-template-columns: 1fr; } .login-hero { display: none; } }

.login-hero {
  background: var(--gradient-primary); color: var(--primary-foreground);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); padding: var(--space-16); text-align: center;
}
.login-hero img { width: 300px; max-width: 72%; margin-bottom: var(--space-2); }
.login-hero h1 { font-size: var(--text-4xl); }
.login-hero p { color: color-mix(in oklab, white 80%, transparent); max-width: 40ch; }

.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: var(--space-8); background: var(--background); }
.login-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--space-4); }
.login-form h2 { font-size: var(--text-2xl); }
.login-sub { color: var(--muted-foreground); margin-top: var(--space-1); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.login-erro { color: var(--destructive); font-size: var(--text-sm); font-weight: var(--font-medium); }

.login-divisor { display: flex; align-items: center; gap: var(--space-3); color: var(--muted-foreground); font-size: var(--text-xs); }
.login-divisor::before, .login-divisor::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.quick-login { display: flex; gap: var(--space-3); }
.quick-login .btn { flex: 1; }

/* ============================= PORTAL ============================= */
.portal { min-height: 100%; }

.portal-side { display: flex; flex-direction: column; gap: var(--space-4); position: fixed; inset: 0 auto 0 0; width: 264px; height: 100dvh; overflow: hidden; z-index: 20; }
.side-logo { padding: var(--space-2) var(--space-2) var(--space-3); }
.side-logo img { width: 100%; max-width: 190px; }

.side-search {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: color-mix(in oklab, black 16%, var(--sidebar));
  border: 1px solid color-mix(in oklab, white 15%, transparent);
  color: color-mix(in oklab, white 65%, transparent); font-size: var(--text-sm);
}
.side-search-input { flex: 1; min-width: 0; border: none; background: none; color: white; font: inherit; outline: none; }
.side-search-input::placeholder { color: color-mix(in oklab, white 55%, transparent); }
.wordmark { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid color-mix(in oklab, white 22%, transparent); border-radius: var(--radius-md); font-weight: var(--font-bold); letter-spacing: 0.06em; color: white; font-size: var(--text-base); }
.wordmark .sep { color: var(--gold); }

.portal-nav { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: var(--space-1); overflow-y: auto; scrollbar-width: thin; }
.side-section {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: color-mix(in oklab, white 55%, transparent);
  padding: var(--space-4) var(--space-3) var(--space-1);
}
.sidebar-item { font-size: var(--text-sm); width: 100%; background: none; border: none; text-align: left; }
.sidebar-item .si-ico { opacity: 0.9; }

.side-user { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--sidebar-border); padding: var(--space-3) var(--space-2) 0; font-size: var(--text-sm); min-width: 0; }
.side-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .email { color: color-mix(in oklab, white 65%, transparent); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--gold); color: var(--brown-dark); display: grid; place-items: center; font-weight: var(--font-bold); font-size: var(--text-sm); flex: none; }
.side-sair { margin-top: var(--space-2); }

.portal-main { display: flex; flex-direction: column; min-width: 0; margin-left: 264px; }
@media (max-width: 860px) {
  .portal-side { position: relative; inset: auto; width: 100%; height: auto; min-height: 0; overflow: visible; }
  .portal-nav { overflow: visible; }
  .portal-main { margin-left: 0; }
}
.portal-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.portal-header h1 { font-size: var(--text-2xl); }
.portal-sub { font-size: var(--text-sm); color: var(--muted-foreground); }
.portal-content { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- KPIs (portal + fluxo) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.kpi { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.kpi-ico {
  width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; flex: none;
  background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary);
}
.kpi.alerta .kpi-ico, .kpi.danger .kpi-ico { background: color-mix(in oklab, var(--destructive) 14%, transparent); color: var(--destructive); }
.kpi.gold .kpi-ico    { background: color-mix(in oklab, var(--gold) 18%, transparent); color: color-mix(in oklab, var(--gold) 62%, black); }
.kpi.success .kpi-ico { background: color-mix(in oklab, var(--success) 16%, transparent); color: var(--success); }
.kpi-val { font-size: var(--text-4xl); font-weight: var(--font-bold); line-height: 1.05; }
.kpi-rot { font-size: var(--text-xs); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; }

/* Secoes (portal) */
.secao-titulo { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-semibold); margin-top: var(--space-3); }
.secao-titulo .cnt { font-size: var(--text-sm); color: var(--muted-foreground); font-weight: var(--font-normal); }

/* Cards de carga (portal) */
/* 3 cards de carga por linha (design de referencia) — responsivo abaixo.
   align-items:start: ao abrir o acordeao, so o card aberto cresce (os vizinhos
   da linha NAO esticam junto). */
.cargas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .cargas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .cargas-grid { grid-template-columns: 1fr; } }
.carga-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); cursor: pointer; border-left: 4px solid var(--border); transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.carga-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.carga-card.st-em_conferencia { border-left-color: var(--gold); }
.carga-card.st-conferida      { border-left-color: var(--success); }
.carga-card.st-em_carregamento{ border-left-color: var(--primary); }
.carga-card.st-montada        { border-left-color: var(--muted-foreground); }
.carga-card.st-finalizada     { border-left-color: var(--border); }

.carga-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.carga-nome { font-size: var(--text-lg); font-weight: var(--font-semibold); }
.carga-rota { font-size: var(--text-sm); color: var(--muted-foreground); }
.carga-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--muted-foreground); }
.carga-meta b { color: var(--foreground); font-weight: var(--font-semibold); }
.carga-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-1); }

.progress { height: 8px; border-radius: var(--radius-full); background: var(--muted); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--gradient-primary); border-radius: inherit; transition: width var(--duration-normal) var(--ease-out); }
.progress-rot { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted-foreground); }

/* Badges de status (com bolinha, ver topo) */
.badge svg { margin-right: 4px; }
.badge-status--montada         { background: var(--muted); color: var(--muted-foreground); }
.badge-status--em_conferencia  { background: color-mix(in oklab, var(--gold) 22%, var(--card)); color: color-mix(in oklab, var(--gold) 52%, black); }
.badge-status--conferida       { background: color-mix(in oklab, var(--success) 18%, var(--card)); color: color-mix(in oklab, var(--success) 60%, black); }
.badge-status--em_carregamento { background: color-mix(in oklab, var(--primary) 14%, var(--card)); color: var(--primary); }
.badge-status--finalizada      { background: var(--muted); color: var(--muted-foreground); }

/* ============================= ESTACAO ===========================
   Tela cheia, tipografia e alvos GRANDES (doc 05). Fundo com leve
   profundidade; conteudo em superficies claras elevadas. */
.estacao {
  position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(1200px 500px at 100% -5%, color-mix(in oklab, var(--gold) 10%, transparent), transparent 60%),
    linear-gradient(178deg, color-mix(in oklab, var(--cream) 45%, white 55%) 0%, var(--cream) 40%, color-mix(in oklab, var(--cream) 88%, var(--brown-mid) 6%) 100%);
}

.estacao-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-8));
  background: var(--gradient-primary); color: var(--primary-foreground);
  border-bottom: 3px solid var(--gold); box-shadow: var(--shadow-md);
  position: relative; z-index: 3;
}
.estacao-head-left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.estacao-logo { height: 36px; flex: none; }
.estacao-header .titulo { font-size: var(--text-xl); font-weight: var(--font-semibold); line-height: 1.1; }
.estacao-header .contexto { font-size: var(--text-sm); color: color-mix(in oklab, white 80%, transparent); margin-top: 2px; }
/* Classificação da delivery (F5-02): bolinha antes do subtítulo diferencia
   "Carga fechada" de "Carga mista" de relance, além do texto. */
.estacao-header .contexto.ctx-mista::before,
.estacao-header .contexto.ctx-fechada::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full);
  margin-right: 6px; vertical-align: baseline;
}
.estacao-header .contexto.ctx-fechada::before { background: var(--gold); }
.estacao-header .contexto.ctx-mista::before { background: color-mix(in oklab, var(--gold) 40%, white); }
.estacao-head-right { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.estacao-user { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); background: color-mix(in oklab, white 14%, transparent); }
.estacao-user .avatar { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--gold); color: var(--brown-dark); display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--font-bold); }
@media (max-width: 720px) { .estacao-user .u-nome { display: none; } }

.link-sair { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 1px solid color-mix(in oklab, white 45%, transparent); color: var(--primary-foreground); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-base); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out); }
.link-sair:hover { background: color-mix(in oklab, white 14%, transparent); text-decoration: none; }

/* ---------- F3-04: indicador de bipes pendentes de envio ----------
   Vive no header burgundy, entao precisa de contraste proprio (a .badge
   padrao e cinza-claro e some no gradiente). Quatro estados, do mais grave
   ao mais calmo — o operador tem que entender de longe, sem ler:
     .is-risco    rede caiu COM bipes na fila   -> vermelho pulsante, maior
     .is-offline  rede caiu, nada na fila       -> vermelho solido, sem pulso
     .is-sync     online, drenando a fila       -> dourado, "ta indo"
     .is-ok       reconectou e a fila zerou     -> verde, some em ~4s        */
.estacao-pendentes {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  line-height: 1; white-space: nowrap;
  /* Sem transition de cor de proposito: o badge sai de [hidden] (display:none)
     e ganha a classe de estado no mesmo tick — o browser fica sem estilo
     inicial p/ interpolar e a cor congela em transparente. Alem disso, numa
     doca o estado precisa ser instantaneo; quem chama atencao e o pulso. */
}
/* bolinha de status — desenhada em CSS p/ o JS nunca precisar montar HTML */
.estacao-pendentes::before {
  content: ""; width: 9px; height: 9px; border-radius: var(--radius-full);
  background: currentColor; flex: none;
}

/* Rede caida sem fila ainda nao e' emergencia (nada em risco), mas tambem
   nao e' informativo neutro: e' problema. Vermelho solido, sem pulso. */
.estacao-pendentes.is-offline {
  background: color-mix(in oklab, var(--destructive) 85%, black);
  color: var(--destructive-foreground);
  border-color: color-mix(in oklab, white 50%, transparent);
}

.estacao-pendentes.is-sync {
  background: var(--gold);
  color: var(--brown-dark);
  border-color: color-mix(in oklab, white 35%, transparent);
}
.estacao-pendentes.is-sync::before { animation: ep-blink 1.2s steps(2, end) infinite; }

/* Unico estado em que existe trabalho que so mora no aparelho: cresce,
   pulsa e nao divide atencao com nada. */
.estacao-pendentes.is-risco {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: color-mix(in oklab, white 60%, transparent);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-5);
  animation: ep-pulse 1.6s var(--ease-out) infinite;
}
.estacao-pendentes.is-risco::before { width: 11px; height: 11px; }

/* Confirmacao de volta ao normal. "Sumir" nao e' confirmacao: na doca,
   sumiu e nunca funcionou tem exatamente a mesma aparencia. */
.estacao-pendentes.is-ok {
  background: var(--success);
  color: var(--success-foreground);
  border-color: color-mix(in oklab, white 45%, transparent);
}

@keyframes ep-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent); }
  50%      { box-shadow: 0 0 0 9px color-mix(in oklab, var(--destructive) 5%, transparent); }
}
@keyframes ep-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Faixa de rede caida no topo da viewport. O badge sozinho e' pequeno demais
   para quem confere em pe, a 2m do monitor, olhando a caixa e nao a tela —
   a faixa da o aviso na visao periferica. Classe posta pelo fila.js no <html>,
   entao vale em qualquer tela da estacao. */
html.sem-rede::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 8px; z-index: 60;
  background: var(--destructive); pointer-events: none;
  animation: ep-faixa 1.6s var(--ease-out) infinite;
}
@keyframes ep-faixa { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Linha "ultima sincronizacao" no pe do rail. Discreta de proposito: e'
   consulta, nao alarme — o alarme e' o badge. So ganha peso quando fica
   velha (sem rede), porque ai o horario vira informacao de risco. */
.sync-linha {
  display: flex; align-items: center; gap: var(--space-2); flex: none;
  margin: 0; padding: var(--space-2) 0 0;
  border-top: 1px solid var(--border);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--muted-foreground);
}
.sync-linha .sync-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full); flex: none;
  background: var(--success);
}
.sync-linha.is-nunca .sync-dot { background: var(--muted-foreground); }
.sync-linha.is-stale { color: var(--destructive); font-weight: var(--font-semibold); }
.sync-linha.is-stale .sync-dot { background: var(--destructive); }

/* Acessibilidade: quem pediu menos movimento continua vendo a cor, sem pulso. */
@media (prefers-reduced-motion: reduce) {
  .estacao-pendentes.is-risco { animation: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 40%, transparent); }
  .estacao-pendentes.is-sync::before { animation: none; }
  html.sem-rede::before { animation: none; }
}

/* ---------- Bipagem (A6/A7): 2 colunas imersivas ---------- */
.estacao-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.estacao-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--space-6); padding: clamp(var(--space-5), 3.5vw, var(--space-8)) clamp(var(--space-5), 4vw, var(--space-10)); }
@media (max-width: 920px) { .estacao-body { grid-template-columns: 1fr; overflow: auto; } }
.estacao-main { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.estacao-rail { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.estacao-rail-footer { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; flex: none; }

.scan-field { display: flex; flex-direction: column; gap: var(--space-2); }
.scan-field label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--foreground); }
.scan-input { width: 100%; min-height: 84px; font-size: var(--text-4xl); font-weight: var(--font-bold); padding: var(--space-4) var(--space-6); text-align: center; letter-spacing: 0.04em; border: 2px solid var(--input); border-radius: var(--radius-xl); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.scan-input::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); font-weight: var(--font-medium); }
.scan-input:focus-visible { outline: none; border-color: color-mix(in oklab, var(--ring) 72%, var(--input)); background: color-mix(in oklab, var(--card) 97%, var(--ring)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 10%, transparent), var(--shadow-sm); }

/* Sem transition de cor: a troca de estado (.ok/.erro) ficava presa no valor
   inicial e o painel NUNCA pintava de verde/vermelho — quebrando a regra de
   feedback <1s do doc 05. Numa doca a resposta tem que ser instantanea. */
.feedback { flex: 1; min-height: 140px; max-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; border-radius: var(--radius-2xl); background: var(--card); color: var(--muted-foreground); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.feedback .fb-ico { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1; }
.feedback .fb-msg { max-width: 92%; font-size: var(--text-2xl); font-weight: var(--font-bold); overflow-wrap: anywhere; }
.feedback.ok   { background: var(--success); color: var(--success-foreground); border-color: transparent; }
.feedback.erro { background: var(--destructive); color: var(--destructive-foreground); border-color: transparent; }
.feedback.aviso { background: var(--gold); color: var(--brown-dark); border-color: color-mix(in oklab, var(--gold) 72%, var(--brown-dark)); }
.feedback.aviso .fb-ico { display: grid; width: 1.1em; height: 1.1em; place-items: center; color: var(--gold); background: var(--brown-dark); border-radius: var(--radius-full); }

.big-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.btn-xl { flex: 1 1 240px; min-height: 88px; font-size: var(--text-xl); font-weight: var(--font-semibold); border: none; border-radius: var(--radius-xl); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); box-shadow: var(--shadow-md); transition: transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out); }
.btn-xl:hover { transform: translateY(-1px); }
.btn-xl:active { filter: brightness(0.94); transform: none; }
.btn-xl.ok   { background: var(--success); color: var(--success-foreground); }
.btn-xl.erro { background: var(--destructive); color: var(--destructive-foreground); }

/* Delivery aberta + checklist (rail) */
/* Card compacto de proposito: é contexto, nao o trabalho. Cada pixel que ele
   nao usa vira linha visivel no checklist logo abaixo. */
.delivery-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.delivery-card .dnum { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--primary); }
.delivery-card .dmeta { font-size: var(--text-sm); color: var(--muted-foreground); }
/* Fluxo sequencial: a estação abre uma delivery por vez e mostra somente o
   contexto necessário para o passo atual. */
.delivery-current { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); }
.delivery-current > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.delivery-step { color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; }
.delivery-current-number { color: var(--foreground); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; line-height: 1.15; }
.delivery-current-client { overflow: hidden; color: var(--muted-foreground); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.delivery-progress-count { flex: none; color: var(--primary); font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; }
.delivery-progress-bar { height: 7px; margin: var(--space-3) 0 var(--space-2); overflow: hidden; border-radius: var(--radius-full); background: var(--muted); }
.delivery-progress-bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gold); transition: width var(--duration-normal) var(--ease-out); }
@media (max-width: 640px) {
  .delivery-current { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
}

.rail-titulo { font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in oklab, var(--gold) 66%, var(--brown-dark)); }
/* Cabecalho do checklist: titulo + resumo numerico na mesma linha, no lugar
   dos dois cards grandes de contador — devolve altura para a lista. */
.checklist-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.checklist-resumo { font-size: var(--text-sm); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; color: var(--primary); white-space: nowrap; }
.checklist-barra { height: 8px; border-radius: var(--radius-full); background: var(--muted); overflow: hidden; flex: none; }
.checklist-barra > span { display: block; height: 100%; background: var(--gradient-primary); border-radius: inherit; transition: width var(--duration-normal) var(--ease-out); }
.checklist-barra > span.ok { background: var(--success); }

/* min-height:0 (não 120px): no modo pallet o rail hospeda os 3 passos + o
   checklist + o rodapé; se o checklist não pudesse encolher, o botão
   "Finalizar" era empurrado para fora da viewport em 1366×768 (F5-02). Com
   flex:1 + overflow:auto ele absorve a sobra e rola por dentro, e o rodapé
   (margin-top:auto) fica fixo no fim do rail. */
.checklist { display: flex; flex-direction: column; gap: var(--space-2); overflow: auto; min-height: 0; flex: 1 1 0; }
/* Estado vazio (nenhuma delivery escolhida): centralizado no rail, tom baixo
   — e' instrucao, nao conteudo. Sem ele o rail vira um retangulo em branco. */
.checklist-vazio { margin: auto; padding: var(--space-6) var(--space-4); max-width: 30ch; text-align: center; font-size: var(--text-sm); color: var(--muted-foreground); }
/* Concluidos afundam e perdem peso visual: o olho vai direto no que falta. */
.check-item.done { opacity: 0.62; }
.check-item.done:hover { opacity: 1; }
.check-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.check-item .ci-ico { grid-row: span 2; color: var(--success); }
.check-item .ci-nome { font-weight: var(--font-semibold); font-size: var(--text-sm); }
.check-item .ci-prog { font-weight: var(--font-bold); font-variant-numeric: tabular-nums; color: var(--primary); }
.check-item .ci-bar { grid-column: 2 / -1; height: 5px; border-radius: var(--radius-full); background: var(--muted); overflow: hidden; }
.check-item .ci-bar > span { display: block; height: 100%; background: var(--gradient-primary); }
.check-item.done { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); background: color-mix(in oklab, var(--success) 8%, var(--card)); }
.check-item.done .ci-prog { color: var(--success); }
.check-item.done .ci-bar > span { background: var(--success); }

/* F3-03 — fechamento A9/A10 na estação Django */
.estacao-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.estacao-stage[hidden] { display: none !important; }
.estacao-stage > .estacao-body { flex: 1; }
.f3-flow { width: 100%; max-width: none; padding-top: var(--space-6); padding-bottom: var(--space-8); }
.f3-flow > * { max-width: 1280px; }
.f3-flow-head { align-items: center; }
.f3-flow-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; }
.f3-flow-actions > div { display: flex; gap: var(--space-3); }
.f3-flow-actions > span { max-width: 52ch; color: var(--muted-foreground); font-size: var(--text-xs); text-align: right; }
.f3-summary-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.f3-summary-kpis .kpi { min-height: 108px; padding: var(--space-4) var(--space-5); border: 1px solid var(--border); box-shadow: 0 8px 24px -22px color-mix(in oklab, var(--brown-dark) 50%, transparent); }
.f3-summary-kpis .kpi-val { display: flex; align-items: baseline; gap: 2px; font-size: clamp(1.65rem, 2.4vw, 2.15rem); }
.f3-summary-kpis .kpi-val small { color: var(--muted-foreground); font-size: var(--text-sm); font-weight: var(--font-medium); }
.f3-summary-kpis .kpi.danger { background: color-mix(in oklab, var(--destructive) 5%, var(--card)); border-color: color-mix(in oklab, var(--destructive) 20%, var(--border)); }
.f3-kpi-pending .kpi-ico { color: color-mix(in oklab, var(--gold) 64%, var(--brown-dark)); background: color-mix(in oklab, var(--gold) 13%, var(--card)); }
.f3-mini-progress { width: min(150px, 100%); height: 5px; margin-top: 7px; overflow: hidden; background: var(--muted); border-radius: var(--radius-full); }
.f3-mini-progress span { display: block; height: 100%; background: var(--gradient-primary); border-radius: inherit; transition: width var(--duration-normal) var(--ease-out); }
.f3-summary-panel { overflow: visible; }
.f3-summary-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(180px, auto) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); background: color-mix(in oklab, var(--cream) 38%, var(--card)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.f3-summary-search { position: relative; display: flex; align-items: center; min-height: 44px; color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.f3-summary-search:focus-within, .f3-summary-select:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 11%, transparent); }
.f3-summary-search svg { position: absolute; left: var(--space-3); pointer-events: none; }
.f3-summary-search input { width: 100%; min-height: 42px; padding: 0 var(--space-4) 0 42px; color: var(--foreground); font: inherit; background: transparent; border: 0; outline: 0; }
.f3-summary-search input::placeholder { color: var(--muted-foreground); }
.f3-summary-select { display: flex; min-height: 44px; align-items: center; gap: var(--space-2); padding-left: var(--space-3); color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-semibold); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.f3-summary-select select { min-height: 42px; padding: 0 var(--space-3) 0 0; color: var(--foreground); font: inherit; background: transparent; border: 0; outline: 0; cursor: pointer; }
.f3-summary-count { justify-self: end; padding: 6px 10px; color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-medium); white-space: nowrap; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full); }
.table-wrap.f3-summary-scroll { max-height: none; overflow: visible; scrollbar-gutter: auto; }
.f3-summary-table thead { background: color-mix(in oklab, var(--card) 96%, var(--cream)); box-shadow: 0 1px 0 var(--border); }
.f3-summary-table thead th { background: color-mix(in oklab, var(--card) 96%, var(--cream)); }
.f3-summary-table td:first-child span, .f3-summary-table td:nth-child(2) span { display: inline-block; margin-left: 5px; color: var(--muted-foreground); font-size: var(--text-xs); }
.f3-summary-table td:first-child > span { display: block; margin: 3px 0 0; }
.f3-summary-row { cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.f3-summary-row:hover, .f3-summary-row:focus-visible, .f3-summary-row[aria-expanded="true"] { background: color-mix(in oklab, var(--gold) 8%, var(--card)); outline: none; }
.f3-summary-row[aria-expanded="true"] td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.f3-summary-row.is-nok td:first-child { box-shadow: inset 3px 0 0 var(--destructive); }
.f3-summary-row.is-pendente { color: color-mix(in oklab, var(--foreground) 86%, transparent); }
.f3-summary-table td:last-child { width: 1%; text-align: right; white-space: nowrap; }
.f3-edit-delivery { min-width: 146px; min-height: 38px; padding: var(--space-2) var(--space-3); }
.f3-summary-row.is-nok .f3-edit-delivery { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
.f3-summary-detail td { padding: 0 !important; background: color-mix(in oklab, var(--cream) 44%, var(--card)); }
.f3-material-grid { display: flex; flex-direction: column; padding: var(--space-3) var(--space-6) var(--space-4); border-bottom: 1px solid var(--border); }
.f3-material-row { display: grid; grid-template-columns: minmax(260px, 1fr) 120px 110px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--success); }
.f3-material-row + .f3-material-row { border-top: 1px solid var(--border); }
.f3-material-row.danger { border-left-color: var(--destructive); }
.f3-material-row > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.f3-material-row code { overflow: hidden; color: var(--muted-foreground); font-size: var(--text-xs); text-overflow: ellipsis; }
.f3-material-row > span { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.f3-material-row > b { color: var(--success); font-size: var(--text-sm); text-align: right; }
.f3-material-row.danger > b { color: var(--destructive); }
.f3-detail-empty { margin: 0; padding: var(--space-5) var(--space-6); color: var(--success); font-size: var(--text-sm); }
.f3-result-flow { padding: var(--space-8) var(--space-5); }
.f3-result-flow .resultado { max-width: 700px; }

.f3-dialog { width: min(720px, calc(100% - 2rem)); max-height: min(86vh, 780px); padding: 0; overflow: hidden; color: var(--foreground); background: var(--card); border: 0; border-radius: var(--radius-2xl); box-shadow: 0 28px 80px -28px color-mix(in oklab, var(--brown-dark) 70%, transparent); }
.f3-dialog::backdrop { background: color-mix(in oklab, var(--brown-dark) 58%, transparent); backdrop-filter: blur(3px); }
.f3-dialog form { display: flex; max-height: min(86vh, 780px); flex-direction: column; }
.f3-dialog-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-5) var(--space-6); background: linear-gradient(145deg, color-mix(in oklab, var(--destructive) 8%, white), var(--card)); border-bottom: 1px solid var(--border); }
.f3-dialog-head h2 { margin: 0; font-size: var(--text-2xl); }
.f3-dialog-head p { margin: 4px 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.f3-dialog-icon { display: grid; width: 46px; height: 46px; place-items: center; color: var(--destructive); background: color-mix(in oklab, var(--destructive) 12%, transparent); border-radius: var(--radius-lg); }
.f3-dialog-close { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: var(--muted-foreground); font-size: 1.7rem; line-height: 1; background: transparent; border: 0; border-radius: var(--radius-full); cursor: pointer; }
.f3-dialog-close:hover { color: var(--foreground); background: var(--muted); }
.f3-dialog-body { min-height: 0; overflow-y: auto; padding: var(--space-5) var(--space-6); }
.f3-dialog-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.f3-dialog-summary strong { font-size: var(--text-lg); }
.f3-dialog-summary span { padding: 5px 10px; color: var(--destructive); font-size: var(--text-xs); font-weight: var(--font-semibold); background: color-mix(in oklab, var(--destructive) 9%, var(--card)); border-radius: var(--radius-full); }
.f3-missing-list { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); }
.f3-missing-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.f3-missing-item + .f3-missing-item { border-top: 1px solid var(--border); }
.f3-missing-icon { display: grid; width: 34px; height: 34px; place-items: center; color: var(--destructive); font-weight: var(--font-bold); background: color-mix(in oklab, var(--destructive) 11%, transparent); border-radius: var(--radius-md); }
.f3-missing-item > div:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.f3-missing-item code { overflow: hidden; color: var(--muted-foreground); font-size: var(--text-xs); text-overflow: ellipsis; }
.f3-missing-count { display: flex; align-items: center; gap: 5px; padding: 5px 9px; color: var(--destructive); background: color-mix(in oklab, var(--destructive) 8%, transparent); border-radius: var(--radius-md); }
.f3-missing-count span, .f3-missing-ratio { color: var(--muted-foreground); font-size: var(--text-xs); }
.f3-missing-ratio { min-width: 92px; text-align: right; }
.f3-dialog-warning { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); color: color-mix(in oklab, var(--gold) 55%, var(--brown-dark)); font-size: var(--text-sm); background: color-mix(in oklab, var(--gold) 12%, var(--card)); border-left: 3px solid var(--gold); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.f3-dialog-error { margin: var(--space-3) 0 0; color: var(--destructive); font-size: var(--text-sm); }
.f3-dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: color-mix(in oklab, var(--muted) 40%, var(--card)); border-top: 1px solid var(--border); }

@media (max-width: 760px) {
  .f3-summary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f3-summary-toolbar { grid-template-columns: 1fr; }
  .table-wrap.f3-summary-scroll { overflow-x: auto; overflow-y: visible; }
  .f3-summary-count { justify-self: start; }
  .f3-flow-head { align-items: stretch; flex-direction: column; }
  .f3-flow-actions { align-items: stretch; }
  .f3-flow-actions > div { flex-direction: column; }
  .f3-flow-actions > span { text-align: left; }
  .f3-flow-head .btn { width: 100%; justify-content: center; }
  .f3-material-row { grid-template-columns: 1fr auto; }
  .f3-material-row > b { grid-column: 2; }
  .f3-missing-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .f3-missing-ratio { grid-column: 2 / -1; text-align: left; }
  .f3-dialog-head, .f3-dialog-body, .f3-dialog-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .f3-dialog-footer .btn { flex: 1; }
}

@media (max-width: 480px) {
  .f3-summary-kpis { grid-template-columns: 1fr; }
}

.contadores { display: flex; gap: var(--space-4); }
.contador { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-4); text-align: center; box-shadow: var(--shadow-sm); }
.contador .n { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--primary); line-height: 1; }
.contador .rot { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; }

/* Bipagem — barra superior + tag do tipo */
.bipe-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bipe-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: color-mix(in oklab, var(--gold) 60%, black); background: color-mix(in oklab, var(--gold) 18%, var(--card)); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); }
.estacao-summary-button { min-height: 42px; padding: var(--space-2) var(--space-4); color: var(--primary); font-weight: var(--font-semibold); background: var(--card); border-color: color-mix(in oklab, var(--primary) 34%, var(--border)); border-radius: var(--radius-lg); box-shadow: 0 5px 16px -13px color-mix(in oklab, var(--primary) 65%, transparent); }
.estacao-summary-button:hover { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); box-shadow: 0 8px 20px -13px color-mix(in oklab, var(--primary) 75%, transparent); text-decoration: none; transform: translateY(-1px); }
.estacao-summary-button:active { transform: translateY(0); }
.demo-hint { font-size: var(--text-xs); color: var(--muted-foreground); text-align: center; }

/* A7 — 3 bipes do pallet */
.bipe3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 640px) { .bipe3 { grid-template-columns: 1fr; } }
.bipe3-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.bipe3-item.current { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 16%, transparent); }
.bipe3-item.accepted { border-color: var(--success); background: color-mix(in oklab, var(--success) 8%, var(--card)); }
.bipe3-item.accepted .b3-num { background: var(--success); }
.bipe3-item.error { border-color: var(--destructive); background: color-mix(in oklab, var(--destructive) 8%, var(--card)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 13%, transparent); }
.bipe3-item.error .b3-num { background: var(--destructive); }
.b3-num { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--gradient-primary); color: var(--primary-foreground); display: grid; place-items: center; font-weight: var(--font-bold); flex: none; }
.b3-lbl { font-size: var(--text-xs); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; }
.a7-mode-switch { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.a7-mode-switch[hidden] { display: none; }
.a7-pallet { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: color-mix(in oklab, var(--card) 92%, var(--primary) 8%); }
.a7-pallet[hidden] { display: none; }
.a7-pallet-rail .bipe3 { grid-template-columns: 1fr; }
.a7-pallet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.a7-pallet-head p { margin: var(--space-1) 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.a7-metricas { display: flex; gap: var(--space-2); }
.a7-faltantes { min-width: 130px; padding: var(--space-2) var(--space-3); text-align: right; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); }
.a7-faltantes strong, .a7-faltantes span { display: block; }
.a7-faltantes strong { color: var(--primary); font-size: var(--text-2xl); line-height: 1; }
.a7-faltantes span { margin-top: var(--space-1); color: var(--muted-foreground); font-size: var(--text-xs); }
#checklist-panel { display: contents; }
#checklist-panel[hidden] { display: none; }
.b3-val { overflow-wrap: anywhere; font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; }

/* =================== FLUXO — telas de selecao/form ================ */
.flow { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: clamp(var(--space-6), 4vw, var(--space-12)) clamp(var(--space-5), 4vw, var(--space-10)); display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
/* flex-shrink:0 impede que a coluna flex comprima os paineis (que tem
   overflow:hidden) e corte o conteudo — assim o scroll do .flow funciona. */
.flow > * { width: 100%; max-width: 1080px; flex-shrink: 0; }
.flow-center { justify-content: safe center; }

.flow-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.flow-heading { display: flex; align-items: center; gap: var(--space-4); }
.flow-ico { width: 54px; height: 54px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--gradient-primary); color: var(--primary-foreground); box-shadow: var(--shadow-md); flex: none; }
.flow-title { font-size: var(--text-4xl); font-weight: var(--font-bold); line-height: 1.1; }
.flow-sub { color: var(--muted-foreground); font-size: var(--text-lg); margin-top: 2px; }
.flow-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sec-lbl { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklab, var(--gold) 64%, var(--brown-dark)); }

/* Painel — container de secao */
.panel { background: var(--card); border: 1px solid color-mix(in oklab, var(--border) 65%, var(--brown-mid) 8%); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: hidden; }
.panel-accent { border-top: 4px solid var(--gold); }
.panel-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, var(--card)); }
.panel-ico { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); flex: none; }
.panel-title { font-weight: var(--font-semibold); font-size: var(--text-lg); }
.panel-sub { font-size: var(--text-sm); color: var(--muted-foreground); }
.panel-body { padding: var(--space-6); }
.panel-body.flush { padding: 0; }
.panel-alert { border-color: color-mix(in oklab, var(--destructive) 30%, var(--border)); }
.panel-alert .panel-head { background: color-mix(in oklab, var(--destructive) 9%, var(--card)); border-bottom-color: color-mix(in oklab, var(--destructive) 22%, var(--border)); }
.panel-alert .panel-ico { background: color-mix(in oklab, var(--destructive) 14%, transparent); color: var(--destructive); }

/* Inputs no fluxo */
.flow .input, .field .input { min-height: 52px; padding: 0 var(--space-4); font-size: var(--text-base); border-width: 1.5px; }
.field .label { font-weight: var(--font-semibold); }
.field .req { color: var(--destructive); margin-left: 2px; }

/* Cards de opcao (modulo, tipo de etiqueta) */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.opt-card { display: flex; align-items: center; gap: var(--space-4); text-align: left; padding: var(--space-6); min-height: 104px; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.opt-card:hover:not(:disabled) { box-shadow: var(--shadow-elegant); transform: translateY(-3px); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); }
.opt-card:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.opt-tall { min-height: 128px; }
.opt-ico { width: 58px; height: 58px; border-radius: var(--radius-lg); display: grid; place-items: center; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); flex: none; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.opt-card:hover:not(:disabled) .opt-ico { background: var(--gradient-primary); color: var(--primary-foreground); }
.opt-card:disabled .opt-ico { background: var(--muted); color: var(--muted-foreground); }
.opt-nome { font-size: var(--text-xl); font-weight: var(--font-semibold); }
.opt-desc { font-size: var(--text-sm); color: var(--muted-foreground); }
.opt-card:not(.carga-opt):not(:disabled)::after { content: "›"; margin-left: auto; font-size: 1.8rem; line-height: 1; color: color-mix(in oklab, var(--primary) 60%, var(--muted-foreground)); }
.opt-em-breve { margin-left: auto; font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); background: var(--muted); padding: 2px var(--space-2); border-radius: var(--radius-full); }

/* A3 — cards de modulo (secoes Disponiveis / Em breve). Escopado p/ nao afetar
   A4/A5/A11, que reusam .opt-card. */
/* min-height uniformiza a altura entre as duas secoes e evita o card sozinho
   na ultima linha do grid ficar mais baixo que os irmaos. */
.modulo-card { align-items: flex-start; min-height: 136px; }
.modulo-card .opt-ico { width: 48px; height: 48px; }
.modulo-card:not(:disabled) .opt-ico { background: var(--gradient-primary); color: var(--primary-foreground); }
.modulo-txt { flex: 1; min-width: 0; gap: var(--space-1); }
.modulo-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.modulo-top .opt-em-breve { margin-left: 0; }
.estacao-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-foreground); }

/* Cards de carga selecionaveis (A4 / A11) */
.carga-opt { align-items: stretch; border-left: 4px solid var(--border); }
.carga-opt.st-em_conferencia { border-left-color: var(--gold); }
.carga-opt.st-conferida { border-left-color: var(--success); }
.carga-opt.st-em_carregamento { border-left-color: var(--primary); }
.carga-opt.st-montada { border-left-color: var(--muted-foreground); }
.carga-opt.sel { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 35%, transparent); }
.carga-opt .carga-top { align-items: center; }
.carga-div { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--destructive); }
.chk { width: 28px; height: 28px; border-radius: var(--radius-full); border: 2px solid var(--border); display: grid; place-items: center; color: var(--primary); flex: none; align-self: center; }
.chk.on { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); }

/* A8 — grade da contagem cega */
.grade-cega { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.rua { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--muted) 30%, var(--card)); border: 1px solid var(--border); }
.rua-chip { min-width: 88px; text-align: center; font-weight: var(--font-semibold); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); background: var(--secondary); color: var(--secondary-foreground); border-radius: var(--radius-md); flex: none; }
.rua-pallets { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cega-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cell-cap { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--muted-foreground); }
.cega-input { width: 76px; height: 60px; text-align: center; font-size: var(--text-2xl); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; border: 2px solid var(--input); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); }
.cega-input:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent); }
.cega-cmp { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); font-weight: var(--font-semibold); font-size: var(--text-lg); }
.cega-cmp[hidden] { display: none; }
.cega-cmp.ok { background: color-mix(in oklab, var(--success) 15%, var(--card)); color: color-mix(in oklab, var(--success) 58%, black); border: 1px solid color-mix(in oklab, var(--success) 35%, transparent); }
.cega-cmp.div { background: color-mix(in oklab, var(--destructive) 12%, var(--card)); color: var(--destructive); border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent); }
.a8-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.a8-step-heading { display: flex; align-items: center; gap: var(--space-3); }
.a8-step-number { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: var(--radius-full); color: var(--primary-foreground); background: var(--gradient-primary); font-size: var(--text-lg); font-weight: var(--font-bold); }
.a8-setup-panel { border-color: color-mix(in oklab, var(--gold) 38%, var(--border)); }
.a8-setup-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-6); }
.a8-quantity-field { grid-column: 1 / -1; width: min(220px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .05em; color: var(--muted-foreground); }
.a8-quantity-field .input { width: 100%; min-height: 58px; font-size: var(--text-2xl); font-weight: var(--font-bold); text-align: center; background: var(--card); color: var(--foreground); }
#a8-contagem-panel .grade-cega { display: flex; flex-direction: column; padding: var(--space-5) var(--space-6); }
.a8-pallet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.a8-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 78px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.a8-pallet-identidade { display: flex; flex-direction: column; gap: 2px; }
.a8-pallet-identidade span { color: var(--muted-foreground); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.a8-pallet-identidade strong { color: var(--foreground); font-size: var(--text-lg); }
.a8-row label { display: flex; align-items: center; gap: var(--space-2); color: var(--muted-foreground); font-size: var(--text-sm); }
.a8-row .a8-volumes { width: 78px; min-height: 52px; font-size: var(--text-xl); font-weight: var(--font-bold); text-align: center; }
.a8-total-contado { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid var(--border); color: var(--muted-foreground); }
.a8-total-contado #a8-total-pallets { margin-right: auto; font-size: var(--text-sm); font-weight: var(--font-semibold); }
.a8-total-contado strong { color: var(--primary); font-size: var(--text-4xl); font-variant-numeric: tabular-nums; }
.a8-actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.a8-actions [hidden] { display: none; }
@media (max-width: 640px) {
  .a8-setup-body, #a8-contagem-panel .grade-cega { padding: var(--space-4); }
  .a8-total-contado { padding: var(--space-4); }
  .a8-pallet-grid { grid-template-columns: 1fr; }
  .a8-actions .btn { width: 100%; }
}

/* A12 — form de dados */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); }

/* A13 — linha de delivery nao conferida */
.nc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.nc-row + .nc-row { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.nc-info { display: flex; align-items: center; gap: var(--space-2); }
.nc-row .input { max-width: 340px; }

/* Tabela dentro de painel */
.panel .table thead th { background: transparent; }
.panel .table th, .panel .table td { padding: var(--space-4) var(--space-6); }

/* A10 / A14 — tela de resultado */
.resultado { position: relative; overflow: hidden; max-width: 620px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: clamp(var(--space-10), 5vw, var(--space-16)) var(--space-8) var(--space-8); }
.resultado::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--gradient-gold); }
.resultado h2 { font-size: var(--text-4xl); }
.resultado p { color: var(--muted-foreground); max-width: 48ch; }
.res-ico { width: 104px; height: 104px; border-radius: var(--radius-full); display: grid; place-items: center; background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); box-shadow: 0 0 0 10px color-mix(in oklab, var(--success) 8%, transparent); }
.res-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: color-mix(in oklab, var(--muted) 70%, var(--card)); color: var(--foreground); font-size: var(--text-sm); font-weight: var(--font-semibold); border: 1px solid var(--border); }
.chip svg { color: var(--gold); }
.res-actions { justify-content: center; width: 100%; margin-top: var(--space-2); }
.res-actions .btn { flex: 1 0 auto; }
.res-actions [hidden] { display: none !important; }

/* =================== A4 — AGENDA OPERACIONAL =================== */
.agenda-flow { width: 100%; max-width: none; align-items: center; gap: var(--space-5); padding-top: clamp(36px, 5vh, 58px); }
.agenda-flow > * { max-width: 1320px; }
.agenda-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.agenda-hero .flow-heading { gap: 0; }
.agenda-truck-action { min-width: 250px; box-shadow: 0 14px 28px -18px color-mix(in oklab, var(--primary) 80%, transparent); }
.agenda-workspace { overflow: hidden; background: color-mix(in oklab, var(--card) 84%, var(--cream)); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); }
.agenda-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 220px auto; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--card); border-bottom: 1px solid var(--border); }
.agenda-search { min-height: 48px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); color: var(--muted-foreground); background: color-mix(in oklab, var(--muted) 22%, var(--card)); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.agenda-search:focus-within { color: var(--primary); border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 14%, transparent); }
.agenda-search input { width: 100%; min-width: 0; padding: 0; color: var(--foreground); background: transparent; border: 0; outline: 0; font: inherit; }
.agenda-search input::placeholder { color: var(--muted-foreground); }
.agenda-status-filter { min-height: 48px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.agenda-status-filter span { color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; }
.agenda-status-filter select { min-width: 0; flex: 1; color: var(--foreground); background: transparent; border: 0; outline: 0; font: inherit; font-weight: var(--font-semibold); }
.agenda-view-toggle { display: flex; align-items: center; gap: 3px; padding: 4px; background: var(--muted); border-radius: var(--radius-lg); }
.agenda-view-toggle button { min-height: 38px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); color: var(--muted-foreground); background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); }
.agenda-view-toggle button.active { color: var(--primary); background: var(--card); box-shadow: var(--shadow-sm); }
.agenda-layout { min-height: 360px; }
.agenda-layout[hidden] { display: none !important; }
.agenda-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-4); }
.agenda-kanban:has(> :only-child) { grid-template-columns: minmax(320px, 1fr); }
.agenda-kanban-column { min-width: 0; padding: var(--space-3); background: color-mix(in oklab, var(--muted) 28%, var(--card)); border: 1px solid color-mix(in oklab, var(--border) 82%, transparent); border-radius: var(--radius-xl); }
.agenda-kanban-column > header { min-height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 var(--space-1) var(--space-3); }
.agenda-kanban-column > header > span { display: flex; align-items: center; gap: var(--space-2); }
.agenda-kanban-column > header i { width: 9px; height: 9px; flex: none; background: var(--muted-foreground); border-radius: var(--radius-full); }
.agenda-kanban-column.status-em_conferencia > header i { background: var(--gold); }
.agenda-kanban-column.status-conferida > header i { background: var(--success); }
.agenda-kanban-column.status-em_carregamento > header i { background: var(--primary); }
.agenda-kanban-column > header strong { font-size: var(--text-base); }
.agenda-kanban-column > header b { min-width: 25px; height: 25px; display: grid; place-items: center; margin-left: auto; color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-xs); }
.agenda-kanban-column > header small { padding-left: 17px; color: var(--muted-foreground); font-size: var(--text-xs); }
.agenda-kanban-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.agenda-card { width: 100%; min-height: 186px; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); overflow: hidden; color: var(--foreground); text-align: left; background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--muted-foreground); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast); }
.agenda-card.st-em_conferencia { border-top-color: var(--gold); }
.agenda-card.st-conferida { border-top-color: var(--success); }
.agenda-card.st-em_carregamento { border-top-color: var(--primary); }
.agenda-card:hover { border-color: color-mix(in oklab, var(--primary) 38%, var(--border)); box-shadow: var(--shadow-elegant); transform: translateY(-2px); }
.agenda-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.agenda-card-title { max-width: 20ch; font-size: var(--text-lg); font-weight: var(--font-bold); line-height: 1.2; overflow-wrap: anywhere; }
.agenda-card-route { display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: var(--text-sm); }
.agenda-card-route svg { flex: none; color: var(--gold); }
.agenda-card-metrics { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--muted-foreground); font-size: var(--text-sm); }
.agenda-card-metrics b { color: var(--foreground); font-variant-numeric: tabular-nums; }
.agenda-card-progress { height: 6px; overflow: hidden; background: var(--muted); border-radius: var(--radius-full); }
.agenda-card-progress i { display: block; height: 100%; background: var(--gradient-gold); border-radius: inherit; }
.agenda-progress-label { margin-top: calc(var(--space-2) * -1); color: var(--muted-foreground); font-size: 11px; text-align: right; }
.agenda-card-warning { width: fit-content; padding: 4px var(--space-2); color: var(--destructive); font-size: var(--text-xs); font-weight: var(--font-semibold); background: color-mix(in oklab, var(--destructive) 9%, var(--card)); border-radius: var(--radius-md); }
.agenda-card-action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-3); color: var(--primary); font-size: var(--text-sm); font-weight: var(--font-bold); border-top: 1px solid var(--border); }
.agenda-card-action b { font-size: var(--text-lg); }
.agenda-column-empty { min-height: 116px; display: grid; place-items: center; padding: var(--space-4); color: var(--muted-foreground); text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-lg); font-size: var(--text-sm); }
.agenda-empty { min-height: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-2); color: var(--muted-foreground); text-align: center; }
.agenda-empty[hidden] { display: none !important; }
.agenda-empty strong { color: var(--foreground); font-size: var(--text-lg); }
.agenda-table-wrap { padding: var(--space-4); }
.agenda-table-head, .agenda-table-row { display: grid; grid-template-columns: minmax(260px, 1.7fr) .6fr .8fr .8fr 80px; align-items: center; gap: var(--space-4); }
.agenda-table-head { padding: var(--space-3) var(--space-4); color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: .04em; }
.agenda-table-body { overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.agenda-table-row { width: 100%; min-height: 76px; padding: var(--space-3) var(--space-4); color: var(--foreground); text-align: left; background: var(--card); border: 0; cursor: pointer; font: inherit; transition: background var(--duration-fast); }
.agenda-table-row + .agenda-table-row { border-top: 1px solid var(--border); }
.agenda-table-row:hover { background: color-mix(in oklab, var(--primary) 4%, var(--card)); }
.agenda-table-name { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.agenda-table-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-table-name small { color: var(--muted-foreground); }
.agenda-row-action { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); color: var(--primary); font-size: var(--text-sm); font-weight: var(--font-bold); }

@media (max-width: 980px) {
  .agenda-toolbar { grid-template-columns: 1fr 210px; }
  .agenda-view-toggle { grid-column: 1 / -1; width: fit-content; }
  .agenda-kanban { grid-template-columns: 1fr; }
  .agenda-table-head { display: none; }
  .agenda-table-row { grid-template-columns: minmax(220px, 1fr) 1fr 90px; }
  .agenda-table-row > span:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .agenda-flow { padding: var(--space-8) var(--space-4) var(--space-5); }
  .agenda-hero { align-items: stretch; flex-direction: column; }
  .agenda-truck-action { width: 100%; min-width: 0; }
  .agenda-toolbar { grid-template-columns: 1fr; }
  .agenda-view-toggle { grid-column: auto; width: 100%; }
  .agenda-view-toggle button { flex: 1; justify-content: center; }
  .agenda-table-row { grid-template-columns: 1fr auto; gap: var(--space-2); }
  .agenda-table-row > span:nth-child(2), .agenda-table-row > span:nth-child(3) { display: none; }
  .agenda-table-row > span:nth-child(4) { grid-column: 1; }
  .agenda-row-action { grid-column: 2; grid-row: 1 / span 2; }
}

/* =================== F6-01 — FECHAMENTO DO CARREGAMENTO =================== */
.f6-flow { width: 100%; max-width: none; padding-top: var(--space-6); padding-bottom: var(--space-10); }
.f6-flow > * { max-width: 1180px; }
.f6-flow .flow-head { align-items: center; }
.f6-progress { display: flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-5); color: var(--muted-foreground); background: color-mix(in oklab, var(--card) 88%, var(--cream)); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.f6-progress span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; }
.f6-progress span b { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted-foreground); background: var(--muted); border-radius: var(--radius-full); }
.f6-progress span.active { color: var(--primary); }
.f6-progress span.active b { color: var(--primary-foreground); background: var(--gradient-primary); }
.f6-progress span.done { color: var(--success); }
.f6-progress span.done b { color: white; background: var(--success); }
.f6-progress i { width: clamp(24px, 8vw, 100px); height: 1px; margin: 0 var(--space-3); background: var(--border); }
.f6-inline-feedback { padding: var(--space-4) var(--space-5); color: var(--foreground); font-weight: var(--font-semibold); background: color-mix(in oklab, var(--gold) 16%, var(--card)); border: 1px solid color-mix(in oklab, var(--gold) 40%, var(--border)); border-radius: var(--radius-lg); }
.f6-inline-feedback.erro { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 8%, var(--card)); border-color: color-mix(in oklab, var(--destructive) 28%, var(--border)); }
.f6-selection-workspace { min-height: 0; }
.f6-selection-workspace .agenda-toolbar { grid-template-columns: minmax(260px, 1fr) 220px; }
.f6-selection-layout { min-height: 0; }
.f6-selection-layout[hidden] { display: none !important; }
.f6-select-table-grid { grid-template-columns: 44px minmax(250px, 1.6fr) .6fr .8fr .8fr; }
.f6-select-table-row.sel { position: relative; background: color-mix(in oklab, var(--primary) 5%, var(--card)); box-shadow: inset 4px 0 0 var(--primary); }
.f6-select-table-row .chk { width: 28px; height: 28px; align-self: center; font-size: var(--text-sm); font-weight: var(--font-bold); }
.f6-loading, .f6-empty { grid-column: 1 / -1; min-height: 180px; display: grid; place-items: center; color: var(--muted-foreground); background: color-mix(in oklab, var(--card) 75%, transparent); border: 1px dashed var(--border); border-radius: var(--radius-xl); }
.f6-empty { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); text-align: center; }
.f6-empty strong { color: var(--foreground); font-size: var(--text-lg); }
.f6-action-bar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-5); background: color-mix(in oklab, var(--card) 94%, transparent); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 18px 45px -25px color-mix(in oklab, var(--brown-dark) 65%, transparent); backdrop-filter: blur(12px); }
.f6-action-bar > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.f6-action-bar strong { color: var(--foreground); font-size: var(--text-base); }
.f6-action-bar span { color: var(--muted-foreground); font-size: var(--text-sm); }
.f6-form .field { position: relative; gap: var(--space-2); }
.f6-form .input { background: var(--card); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.f6-form .input:hover { border-color: color-mix(in oklab, var(--primary) 38%, var(--border)); }
.f6-form .input.invalid, .f6-reason-field .input.invalid { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 12%, transparent); }
.f6-field-wide { grid-column: 1 / -1; }
.f6-field-hint { color: var(--muted-foreground); font-size: var(--text-xs); }
.f6-field-error { min-height: 16px; color: var(--destructive); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.f6-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.f6-kpis .mini-stat { min-height: 118px; display: flex; flex-direction: column; justify-content: center; padding: var(--space-5); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.f6-kpis .ms-n { color: var(--foreground); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; line-height: 1; }
.f6-kpis .ms-rot { margin-top: var(--space-2); color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .04em; text-transform: uppercase; }
.f6-kpis .f6-stat-alert { background: color-mix(in oklab, var(--destructive) 5%, var(--card)); border-color: color-mix(in oklab, var(--destructive) 35%, var(--border)); }
.f6-kpis .f6-stat-alert .ms-n { color: var(--destructive); }
.f6-review-list { display: flex; flex-direction: column; }
.f6-review-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); }
.f6-review-list > div + div { border-top: 1px solid var(--border); }
.f6-review-list > div > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.f6-review-list small { color: var(--muted-foreground); }
#f6-pendencias-panel { background: color-mix(in oklab, var(--destructive) 2%, var(--card)); }
#f6-pendencias-panel .panel-head { align-items: center; }
.f6-pendencias-count { margin-left: auto; padding: 6px 11px; color: var(--destructive); background: color-mix(in oklab, var(--destructive) 11%, var(--card)); border: 1px solid color-mix(in oklab, var(--destructive) 20%, var(--border)); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-bold); white-space: nowrap; }
#f6-pendencias-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-5); }
.f6-nc-row { min-width: 0; align-items: stretch; flex-direction: column; gap: var(--space-4); margin: 0; padding: var(--space-4); background: var(--card); border: 1px solid color-mix(in oklab, var(--destructive) 18%, var(--border)); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.f6-nc-row + .f6-nc-row { margin: 0; padding: var(--space-4); border-top: 1px solid color-mix(in oklab, var(--destructive) 18%, var(--border)); }
.f6-nc-row .nc-info { width: 100%; min-width: 0; align-items: flex-start; }
.f6-nc-row .nc-info > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.f6-nc-row .nc-info b { color: var(--foreground); font-size: var(--text-base); }
.f6-nc-row .nc-info small, .f6-nc-row .nc-info em { color: var(--muted-foreground); font-size: var(--text-xs); font-style: normal; overflow-wrap: anywhere; }
.f6-nc-row .nc-info em { width: fit-content; margin-top: 3px; padding: 3px 7px; color: var(--primary); background: color-mix(in oklab, var(--primary) 8%, var(--card)); border-radius: var(--radius-md); font-weight: var(--font-semibold); }
.f6-warning-ico { width: 30px; height: 30px; display: grid; place-items: center; flex: none; color: var(--destructive); font-size: var(--text-lg); font-weight: var(--font-bold); background: color-mix(in oklab, var(--destructive) 12%, transparent); border-radius: var(--radius-full); }
.f6-reason-field { width: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.f6-reason-field > span { color: var(--foreground); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: .04em; }
.f6-reason-field textarea.input { width: 100%; max-width: none; min-height: 84px; padding: var(--space-3) var(--space-4); resize: vertical; line-height: 1.4; background: color-mix(in oklab, var(--muted) 12%, var(--card)); }
.f6-reason-field textarea.input:focus { background: var(--card); }
.f6-reason-field small { min-height: 16px; color: var(--destructive); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.f6-final-bar { position: static; }
.f6-result { max-width: 760px; }
.f6-result h1 { font-size: var(--text-4xl); }
.f6-result-details { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4); background: color-mix(in oklab, var(--muted) 35%, var(--card)); border: 1px solid var(--border); border-radius: var(--radius-xl); text-align: left; }
.f6-result-details span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.f6-result-details small { color: var(--muted-foreground); font-size: var(--text-xs); text-transform: uppercase; }
.f6-result-details b { overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .f6-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f6-action-bar { align-items: stretch; flex-direction: column; }
  .f6-action-bar .btn { width: 100%; }
  .f6-result-details { grid-template-columns: 1fr; }
  .f6-select-table-grid { grid-template-columns: 40px minmax(220px, 1fr) .7fr .9fr; }
  .f6-select-table-grid > span:nth-child(4) { display: none; }
  #f6-pendencias-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .f6-flow .flow-head { align-items: stretch; flex-direction: column; }
  .f6-flow .flow-head .btn { width: 100%; }
  .f6-selection-workspace .agenda-toolbar { grid-template-columns: 1fr; }
  .f6-progress { justify-content: flex-start; overflow-x: auto; }
  .f6-progress i { width: 24px; flex: none; }
  .f6-field-wide { grid-column: auto; }
  .f6-kpis { grid-template-columns: 1fr 1fr; }
  .f6-review-list > div { align-items: flex-start; padding: var(--space-4); }
  .f6-select-table-grid { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .f6-select-table-grid > span:nth-child(3), .f6-select-table-grid > span:nth-child(4) { display: none; }
  .f6-select-table-grid > span:nth-child(5) { display: block; }
  #f6-pendencias-panel .panel-head { align-items: flex-start; flex-wrap: wrap; }
  .f6-pendencias-count { margin-left: 0; }
  #f6-pendencias-list { padding: var(--space-3); }
}

/* =================== STEPPER (barra de etapas) =================== */
.stepper { background: color-mix(in oklab, var(--card) 88%, var(--cream)); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-10)); overflow-x: auto; position: relative; z-index: 2; }
.stepper-list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; min-width: max-content; }
.step { display: flex; align-items: center; }
.step-btn { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: none; padding: var(--space-1); cursor: default; color: inherit; }
.step.done .step-btn { cursor: pointer; }
.step-btn:disabled { pointer-events: none; }
.step-dot {
  width: 34px; height: 34px; border-radius: var(--radius-full); display: grid; place-items: center; flex: none;
  font-size: var(--text-base); font-weight: var(--font-bold);
  border: 2px solid var(--border); color: var(--muted-foreground); background: var(--card);
  transition: transform var(--duration-fast) var(--ease-out);
}
.step.current .step-dot { background: var(--gradient-primary); color: var(--primary-foreground); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 32%, transparent); }
.step.done .step-dot { background: var(--success); color: var(--success-foreground); border-color: transparent; }
.step.done .step-btn:hover .step-dot { transform: scale(1.1); }
.step-lbl { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--muted-foreground); white-space: nowrap; }
.step.current .step-lbl { color: var(--foreground); font-weight: var(--font-bold); }
.step.done .step-lbl { color: var(--foreground); }
.step-line { width: clamp(20px, 4vw, 56px); height: 3px; border-radius: var(--radius-full); background: var(--border); margin: 0 var(--space-2); flex: none; }
.step.done .step-line { background: var(--success); }
@media (max-width: 640px) {
  .step:not(.current) .step-lbl { display: none; }
  .step-line { width: 16px; margin: 0 var(--space-1); }
}

/* Checklist — item pendente (icone apagado) */
.check-item:not(.done) .ci-ico { color: var(--muted-foreground); opacity: 0.4; }

/* A10 — variante "Divergente" da tela de resultado */
.resultado.warn::before { background: linear-gradient(135deg, var(--destructive), color-mix(in oklab, var(--destructive) 65%, var(--gold))); }
.resultado.warn .res-ico { background: color-mix(in oklab, var(--destructive) 14%, transparent); color: var(--destructive); box-shadow: 0 0 0 10px color-mix(in oklab, var(--destructive) 7%, transparent); }
.res-list { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; text-align: left; }
.res-list-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: color-mix(in oklab, var(--destructive) 8%, var(--card)); color: var(--destructive); font-weight: var(--font-medium); font-size: var(--text-sm); }

/* =================== PORTAL DO GESTOR (telas W2–W8) =================== */
.page-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.table-wrap { overflow-x: auto; }
.row-actions { display: flex; gap: var(--space-2); }
.row-actions .btn { padding: var(--space-1) var(--space-3); }
.portal-back { align-self: flex-start; padding: 2px var(--space-2); margin-bottom: 2px; font-size: var(--text-sm); }

/* Card de carga clicavel (reset do button) */
.portal-carga { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }

/* W3 — upload + validacoes */
.upload-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: var(--space-8) var(--space-6); border: 2px dashed var(--border); border-radius: var(--radius-xl); background: var(--card); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.upload-card:hover { border-color: color-mix(in oklab, var(--primary) 50%, var(--border)); background: color-mix(in oklab, var(--primary) 4%, var(--card)); }
.upload-ico { width: 54px; height: 54px; border-radius: var(--radius-lg); display: grid; place-items: center; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); margin-bottom: 4px; }
.upload-nome { font-weight: var(--font-semibold); font-size: var(--text-lg); }
.upload-desc { font-size: var(--text-sm); color: var(--muted-foreground); }

.valida-list { display: flex; flex-direction: column; gap: var(--space-2); }
.valida { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: var(--font-medium); font-size: var(--text-sm); }
.valida.ok { background: color-mix(in oklab, var(--success) 10%, var(--card)); color: color-mix(in oklab, var(--success) 58%, black); }
.valida.ok svg { color: var(--success); }
.valida.warn { background: color-mix(in oklab, var(--gold) 16%, var(--card)); color: color-mix(in oklab, var(--gold) 52%, black); }
.valida.warn svg { color: color-mix(in oklab, var(--gold) 58%, black); }
.valida.erro { align-items: flex-start; background: color-mix(in oklab, var(--destructive) 8%, var(--card)); color: color-mix(in oklab, var(--destructive) 72%, black); }
.valida.erro svg { margin-top: 2px; color: var(--destructive); }

/* W3 — criação, cruzamento e liberação da carga */
.w3-flow { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 1480px; margin: 0 auto; padding-bottom: 100px; }
.w3-etapa { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--card); box-shadow: 0 12px 32px -28px color-mix(in oklab, var(--brown-dark) 45%, transparent); }
.w3-etapa-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.w3-etapa-head > span:first-child { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: var(--radius-full); background: var(--gradient-primary); color: white; font-weight: var(--font-bold); }
.w3-etapa-head > div { flex: 1; }.w3-etapa-head h2 { font-size: var(--text-lg); }.w3-etapa-head p { margin-top: 2px; color: var(--muted-foreground); font-size: var(--text-sm); }
.w3-etapa-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-full); background: var(--muted); color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-semibold); }.w3-etapa-status.erro { background: color-mix(in oklab, var(--destructive) 10%, var(--card)); color: var(--destructive); }.w3-etapa-status.ok { background: color-mix(in oklab, var(--success) 12%, var(--card)); color: var(--success); }
.w3-identificacao { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); }.w3-identificacao .field > span { font-size: var(--text-xs); font-weight: var(--font-semibold); }.w3-identificacao .input:disabled { color: var(--muted-foreground); background: var(--muted); }
.w3-upload { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'icon content trocar' 'arquivo arquivo arquivo'; align-items: center; gap: var(--space-3); min-height: 170px; padding: var(--space-5); text-align: left; border-style: solid; }.w3-upload.com-erro { border-color: color-mix(in oklab, var(--destructive) 36%, var(--border)); }.w3-upload.corrigido { border-color: color-mix(in oklab, var(--success) 42%, var(--border)); }
.w3-upload .upload-ico { grid-area: icon; margin: 0; }.upload-conteudo { grid-area: content; display: flex; flex-direction: column; gap: 2px; }.upload-tipo { color: var(--muted-foreground); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: var(--font-semibold); }.w3-upload .upload-nome { font-size: var(--text-base); }.w3-upload .upload-trocar { grid-area: trocar; pointer-events: none; }.upload-arquivo { grid-area: arquivo; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: color-mix(in oklab, var(--success) 8%, var(--card)); color: var(--success); }.upload-arquivo > span { display: flex; min-width: 0; flex-direction: column; }.upload-arquivo b { overflow: hidden; color: var(--foreground); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }.upload-arquivo small { color: var(--muted-foreground); font-size: var(--text-xs); }
.w3-bloqueio { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid color-mix(in oklab, var(--destructive) 25%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--destructive) 7%, var(--card)); color: var(--destructive); }.w3-bloqueio > div { display: flex; flex-direction: column; }.w3-bloqueio span { color: var(--muted-foreground); font-size: var(--text-sm); }
.w3-review-grid { display: grid; grid-template-columns: minmax(330px, .8fr) minmax(520px, 1.4fr); gap: var(--space-5); align-items: start; }.w3-review-grid .panel { box-shadow: none; }.w3-review-grid .valida span { display: flex; flex-direction: column; gap: 2px; }.w3-review-grid .valida b { font-size: 10px; letter-spacing: .05em; }.w3-review-grid .valida small { color: var(--muted-foreground); font-weight: var(--font-normal); }
.linha-erro { background: color-mix(in oklab, var(--destructive) 6%, var(--card)); }.linha-erro td:first-child { box-shadow: inset 3px 0 0 var(--destructive); }.erro-inline { display: block; margin-top: 3px; color: var(--destructive); font-size: 10px; font-weight: var(--font-semibold); text-transform: uppercase; }
.w3-actionbar { position: fixed; right: 0; bottom: 0; left: 264px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border); background: color-mix(in oklab, var(--card) 94%, transparent); box-shadow: 0 -10px 30px -24px color-mix(in oklab, var(--brown-dark) 55%, transparent); backdrop-filter: blur(12px); }.w3-actionbar > div { display: flex; align-items: center; gap: var(--space-3); color: var(--muted-foreground); }.w3-actionbar > div > span { display: flex; flex-direction: column; }.w3-actionbar strong { color: var(--foreground); font-size: var(--text-sm); }.w3-actionbar small { font-size: var(--text-xs); }
.w3-sucesso { display: flex; max-width: 720px; margin: 5vh auto; padding: var(--space-10); align-items: center; flex-direction: column; gap: var(--space-4); border: 1px solid color-mix(in oklab, var(--success) 28%, var(--border)); border-radius: var(--radius-2xl); background: var(--card); box-shadow: var(--shadow-lg); text-align: center; }.w3-sucesso-ico { display: grid; width: 78px; height: 78px; place-items: center; border-radius: var(--radius-full); background: color-mix(in oklab, var(--success) 12%, var(--card)); color: var(--success); }.w3-sucesso h2 { font-size: var(--text-2xl); }.w3-sucesso p { color: var(--muted-foreground); }.w3-resumo-liberacao { display: flex; gap: var(--space-6); padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); background: var(--muted); }.w3-resumo-liberacao span { display: flex; flex-direction: column; color: var(--muted-foreground); font-size: var(--text-xs); }.w3-resumo-liberacao b { color: var(--foreground); font-size: var(--text-lg); }
@media (max-width: 1100px) { .w3-identificacao { grid-template-columns: 1fr 1fr; }.w3-review-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .w3-actionbar { left: 0; } }
@media (max-width: 640px) { .w3-etapa { padding: var(--space-4); }.w3-identificacao { grid-template-columns: 1fr; }.w3-etapa-head { align-items: flex-start; flex-wrap: wrap; }.w3-etapa-status { margin-left: 47px; }.w3-upload { grid-template-columns: auto 1fr; grid-template-areas: 'icon content' 'arquivo arquivo' 'trocar trocar'; }.w3-upload .upload-trocar { justify-content: center; }.w3-actionbar { align-items: stretch; flex-direction: column; }.w3-actionbar .btn { width: 100%; min-height: 46px; }.w3-actionbar > div { display: none; }.w3-resumo-liberacao { width: 100%; justify-content: space-around; } }

/* W6 — toolbar / busca */
.toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.search-box { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 240px; padding: 0 var(--space-3); border: 1.5px solid var(--input); border-radius: var(--radius-md); background: var(--card); color: var(--muted-foreground); }
.search-box .input { border: none; background: none; padding: var(--space-3) 0; }
.search-box .input:focus-visible { box-shadow: none; }

/* W8 — switch + segmented + config */
.switch { width: 52px; height: 30px; border-radius: var(--radius-full); background: var(--muted); border: none; cursor: pointer; padding: 3px; display: inline-flex; align-items: center; transition: background var(--duration-fast) var(--ease-out); flex: none; }
.switch.on { background: var(--success); }
.switch-dot { width: 24px; height: 24px; border-radius: var(--radius-full); background: white; box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-out); }
.switch.on .switch-dot { transform: translateX(22px); }
.seg { display: inline-flex; background: var(--muted); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.seg-item { border: none; background: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--muted-foreground); cursor: pointer; white-space: nowrap; }
.seg-item.on { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.config-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.config-row + .config-row { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.config-nome { font-weight: var(--font-semibold); }
.config-desc { font-size: var(--text-sm); color: var(--muted-foreground); }

/* W7 — preview do romaneio */
.romaneio-preview { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); background: color-mix(in oklab, var(--muted) 30%, var(--card)); font-size: var(--text-sm); display: flex; flex-direction: column; gap: var(--space-3); }
.rp-head { font-size: var(--text-base); letter-spacing: 0.02em; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.rp-grid > div { display: flex; flex-direction: column; font-weight: var(--font-semibold); }
.rp-grid span { font-size: var(--text-xs); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--font-medium); }
.rp-foot { color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: var(--space-3); }

/* Cards de carga coloridos por SAUDE (borda + barra de progresso) — MagicPatterns */
.carga-card.saude-ok       { border-left-color: var(--success); }
.carga-card.saude-alerta   { border-left-color: var(--destructive); }
.carga-card.saude-pendente { border-left-color: var(--gold); }
.carga-card.saude-ok       .progress > span { background: var(--success); }
.carga-card.saude-alerta   .progress > span { background: var(--destructive); }
.carga-card.saude-pendente .progress > span { background: var(--gold); }

/* KPI de alerta/divergencias com card tingido de vermelho-claro */
.kpi.danger, .kpi.alerta { background: color-mix(in oklab, var(--destructive) 6%, var(--card)); border-color: color-mix(in oklab, var(--destructive) 28%, var(--border)); }

/* Card de carga como ACORDEAO (abre as divergencias) */
.carga-card.portal-carga { padding: 0; gap: 0; overflow: hidden; cursor: default; }
.carga-card.portal-carga:hover { transform: none; }
.carga-header { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); width: 100%; text-align: left; background: none; border: none; font: inherit; color: inherit; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.carga-header:hover { background: color-mix(in oklab, var(--muted) 30%, transparent); }
.carga-header:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; }
.carga-accordion-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -7px -7px -7px 0; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--muted-foreground); cursor: pointer; }
.carga-accordion-btn:hover,.carga-accordion-btn:focus-visible { background: var(--muted); color: var(--foreground); outline: none; }
.carga-chevron { color: var(--muted-foreground); transition: transform var(--duration-fast) var(--ease-out); }
.carga-card.aberto .carga-chevron { transform: rotate(90deg); }
.carga-accordion { padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 25%, var(--card)); display: flex; flex-direction: column; gap: var(--space-3); }
.acc-titulo { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--destructive); }
.acc-list { display: flex; flex-direction: column; gap: var(--space-2); }
.acc-div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.acc-div-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-div-main b { font-size: var(--text-sm); }
.acc-div-sub { font-size: var(--text-xs); color: var(--muted-foreground); }
.acc-vazio { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted-foreground); }
.acc-vazio svg { color: var(--success); }
.carga-accordion .btn { align-self: flex-start; }

/* W2 — ciclo de vida e sincronização das cargas */
.ciclo-carga { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 2px 0; }
.ciclo-etapa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; color: var(--muted-foreground); }
.ciclo-etapa::before { content: ''; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.ciclo-etapa:first-child::before { display: none; }
.ciclo-etapa.concluida::before { background: var(--gold); }
.ciclo-ponto { position: relative; z-index: 1; width: 12px; height: 12px; border: 2px solid var(--border); border-radius: 50%; background: var(--card); }
.ciclo-etapa.concluida .ciclo-ponto { border-color: var(--gold); background: var(--gold); }
.ciclo-etapa.atual .ciclo-ponto { box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 18%, transparent); }
.ciclo-etapa.atual .ciclo-label { color: var(--foreground); font-weight: var(--font-semibold); }
.ciclo-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; white-space: nowrap; }
.sync-info { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--muted-foreground); font-size: var(--text-xs); }
@media (max-width: 640px) { .ciclo-label { display: none; } .carga-foot { align-items: flex-start; flex-wrap: wrap; } .sync-info { width: 100%; } }

/* W2 — refinamento visual do painel operacional */
.w2-dashboard { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 1480px; margin: 0 auto; }
.w2-dashboard .kpis { gap: var(--space-4); }
.w2-dashboard .kpi { min-height: 108px; padding: var(--space-5); border: 1px solid color-mix(in oklab, var(--border) 82%, transparent); background: linear-gradient(145deg, var(--card), color-mix(in oklab, var(--cream) 36%, white)); box-shadow: 0 1px 2px color-mix(in oklab, var(--brown-dark) 7%, transparent), 0 10px 30px -24px color-mix(in oklab, var(--brown-dark) 35%, transparent); transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.w2-dashboard .kpi:hover { border-color: color-mix(in oklab, var(--gold) 38%, var(--border)); transform: translateY(-1px); }
.w2-dashboard .kpi-ico { width: 48px; height: 48px; border-radius: var(--radius-xl); }
.w2-dashboard .kpi-val { font-size: clamp(1.8rem, 2.5vw, 2.35rem); letter-spacing: -0.035em; }
.w2-dashboard .kpi-rot { color: color-mix(in oklab, var(--muted-foreground) 88%, transparent); font-weight: var(--font-medium); }
.w2-dashboard .kpi.danger { background: linear-gradient(145deg, color-mix(in oklab, var(--destructive) 4%, white), color-mix(in oklab, var(--destructive) 8%, white)); }
.w2-dashboard .secao-titulo { margin: var(--space-2) 0 calc(var(--space-2) * -1); padding-bottom: var(--space-3); border-bottom: 1px solid color-mix(in oklab, var(--border) 78%, transparent); }
.secao-icone { display: inline-grid; width: 32px; height: 32px; place-items: center; border-radius: var(--radius-md); background: color-mix(in oklab, var(--gold) 14%, var(--card)); color: color-mix(in oklab, var(--gold) 65%, var(--brown-dark)); }
.w2-dashboard .secao-titulo .cnt { padding: 3px 9px; border-radius: var(--radius-full); background: var(--muted); color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-medium); }
.secao-ajuda { margin-left: auto; color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-normal); }
.secao-atrasadas .secao-icone { background: color-mix(in oklab, var(--destructive) 9%, var(--card)); color: var(--destructive); }
.w2-dashboard .cargas-grid { gap: var(--space-5); }
.w2-dashboard .carga-card.portal-carga { border: 1px solid color-mix(in oklab, var(--border) 84%, transparent); border-left-width: 4px; border-radius: var(--radius-xl); box-shadow: 0 1px 2px color-mix(in oklab, var(--brown-dark) 6%, transparent), 0 12px 30px -26px color-mix(in oklab, var(--brown-dark) 45%, transparent); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.w2-dashboard .carga-card.portal-carga:hover { border-top-color: color-mix(in oklab, var(--gold) 42%, var(--border)); border-right-color: color-mix(in oklab, var(--gold) 42%, var(--border)); border-bottom-color: color-mix(in oklab, var(--gold) 42%, var(--border)); box-shadow: 0 16px 38px -25px color-mix(in oklab, var(--brown-dark) 45%, transparent); transform: translateY(-2px); }
.w2-dashboard .carga-header { gap: var(--space-4); padding: var(--space-5); }
.w2-dashboard .carga-nome { letter-spacing: -0.015em; }
.w2-dashboard .carga-meta { display: grid; grid-template-columns: .8fr .8fr 1.4fr; gap: 0; overflow: hidden; border: 1px solid color-mix(in oklab, var(--border) 75%, transparent); border-radius: var(--radius-md); background: color-mix(in oklab, var(--muted) 22%, transparent); }
.w2-dashboard .carga-meta > span { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-left: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.w2-dashboard .carga-meta > span:first-child { border-left: 0; }
.w2-dashboard .carga-meta small { color: var(--muted-foreground); font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .055em; }
.w2-dashboard .carga-meta b { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.w2-dashboard .progress { height: 7px; }
.w2-dashboard .carga-foot { min-height: 32px; padding-top: var(--space-2); border-top: 1px solid color-mix(in oklab, var(--border) 65%, transparent); }
.w2-dashboard .sync-info { white-space: nowrap; }
.w2-dashboard .badge { font-weight: var(--font-semibold); }
@media (max-width: 1200px) { .secao-ajuda { display: none; } }
@media (max-width: 520px) { .w2-dashboard .carga-meta { grid-template-columns: 1fr 1fr; }.w2-dashboard .carga-meta > span:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--border); border-left: 0; } }

/* W2 — tabela operacional de cargas */
.w2-cargas-table { overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 12px 30px -27px color-mix(in oklab, var(--brown-dark) 42%, transparent); }
.w2-table-head, .w2-carga-row-link { display: grid; grid-template-columns: minmax(250px, 1.7fr) .55fr .75fr .85fr .8fr 1fr 28px; align-items: center; gap: var(--space-4); }
.w2-table-head { min-height: 44px; padding: 0 var(--space-5); color: var(--muted-foreground); background: color-mix(in oklab, var(--muted) 30%, var(--card)); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .055em; text-transform: uppercase; }
.w2-dashboard .carga-card.portal-carga.w2-carga-row { display: block; width: 100%; padding: 0; background: var(--card); border: 0; border-radius: 0; box-shadow: none; }
.w2-dashboard .carga-card.portal-carga.w2-carga-row + .w2-carga-row { border-top: 1px solid var(--border); }
.w2-dashboard .carga-card.portal-carga.w2-carga-row:hover { transform: none; box-shadow: none; }
.w2-carga-row-link { position: relative; min-height: 78px; padding: var(--space-3) var(--space-5); color: inherit; text-decoration: none; transition: background var(--duration-fast) var(--ease-out); }
.w2-carga-row-link:hover { background: color-mix(in oklab, var(--primary) 3%, var(--card)); }
.w2-carga-row-link:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.w2-carga-identidade { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.w2-carga-identidade > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.w2-carga-identidade strong { overflow: hidden; color: var(--foreground); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.w2-carga-identidade small { color: var(--muted-foreground); font-size: var(--text-xs); }
.w2-status-marker { width: 9px; height: 36px; flex: none; background: var(--muted-foreground); border-radius: var(--radius-full); }
.w2-carga-row.st-em_conferencia .w2-status-marker { background: var(--gold); }
.w2-carga-row.st-conferida .w2-status-marker { background: var(--success); }
.w2-carga-row.st-em_carregamento .w2-status-marker { background: var(--primary); }
.w2-carga-row.st-finalizada .w2-status-marker { background: color-mix(in oklab, var(--success) 62%, var(--primary)); }
.w2-cell { min-width: 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.w2-cell > b { color: var(--foreground); font-variant-numeric: tabular-nums; }
.w2-station-ok { color: var(--success); font-weight: var(--font-semibold); }
.w2-station-wait { color: color-mix(in oklab, var(--gold) 58%, var(--brown-dark)); font-weight: var(--font-semibold); }
.w2-sync { font-variant-numeric: tabular-nums; white-space: nowrap; }
.w2-row-arrow { color: var(--primary); font-size: var(--text-xl); font-weight: var(--font-bold); text-align: right; transition: transform var(--duration-fast); }
.w2-carga-row-link:hover .w2-row-arrow { transform: translateX(3px); }
.w2-cargas-table > .tabela-vazia { padding: var(--space-8); }
.w2-toolbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.w2-view-toggle { display: inline-flex; gap: 3px; padding: 3px; background: color-mix(in oklab, var(--primary) 7%, var(--muted)); border-radius: var(--radius-lg); }
.w2-view-toggle button { min-height: 34px; padding: 0 12px; color: var(--muted-foreground); background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold); }
.w2-view-toggle button.on { color: var(--primary); background: var(--card); box-shadow: var(--shadow-sm); }
.w2-kanban { display: grid; grid-template-columns: repeat(5, 320px); align-items: start; gap: var(--space-4); width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px 2px var(--space-5); scrollbar-width: auto; scrollbar-color: color-mix(in oklab, var(--primary) 42%, var(--border)) color-mix(in oklab, var(--muted) 72%, var(--card)); scrollbar-gutter: stable; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
.w2-kanban::-webkit-scrollbar { height: 12px; }
.w2-kanban::-webkit-scrollbar-track { background: color-mix(in oklab, var(--muted) 72%, var(--card)); border-radius: var(--radius-full); }
.w2-kanban::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--primary) 42%, var(--border)); border: 3px solid color-mix(in oklab, var(--muted) 72%, var(--card)); border-radius: var(--radius-full); }
.w2-kanban::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--primary) 64%, var(--border)); }
.w2-kanban[hidden] { display: none !important; }
.w2-kanban-col { width: 320px; min-height: 164px; padding: var(--space-3); background: color-mix(in oklab, var(--muted) 25%, var(--card)); border: 1px solid var(--border); border-radius: var(--radius-xl); scroll-snap-align: start; }
.w2-kanban-col > header { min-height: 42px; display: flex; align-items: flex-start; padding: 2px 2px var(--space-3); color: var(--foreground); font-size: var(--text-sm); font-weight: var(--font-bold); }
.w2-kanban-col > header span { display: inline-flex; align-items: center; gap: var(--space-2); }
.w2-kanban-col > header i { width: 9px; height: 9px; flex: none; background: var(--muted-foreground); border-radius: var(--radius-full); }
.w2-kanban-col.status-em_conferencia > header i { background: var(--gold); }
.w2-kanban-col.status-conferida > header i { background: var(--success); }
.w2-kanban-col.status-em_carregamento > header i { background: var(--primary); }
.w2-kanban-col.status-finalizada > header i { background: color-mix(in oklab, var(--success) 58%, var(--primary)); }
.w2-kanban-col > div { display: flex; flex-direction: column; gap: var(--space-3); }
.w2-dashboard .w2-kanban .carga-card.portal-carga.w2-carga-row { overflow: hidden; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--muted-foreground); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.w2-dashboard .w2-kanban .carga-card.portal-carga.w2-carga-row.st-em_conferencia { border-left-color: var(--gold); }
.w2-dashboard .w2-kanban .carga-card.portal-carga.w2-carga-row.st-conferida { border-left-color: var(--success); }
.w2-dashboard .w2-kanban .carga-card.portal-carga.w2-carga-row.st-em_carregamento { border-left-color: var(--primary); }
.w2-dashboard .w2-kanban .carga-card.portal-carga.w2-carga-row.st-finalizada { border-left-color: color-mix(in oklab, var(--success) 58%, var(--primary)); }
.w2-kanban .w2-carga-row-link { min-height: 150px; display: flex; align-items: stretch; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.w2-kanban .w2-carga-identidade { align-items: flex-start; }
.w2-kanban .w2-status-marker { display: none; }
.w2-kanban .w2-carga-identidade strong { white-space: normal; line-height: 1.25; }
.w2-kanban .w2-cell { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); }
.w2-kanban .w2-cell::before { content: attr(data-label); color: var(--muted-foreground); font-size: 10px; font-weight: var(--font-semibold); letter-spacing: .04em; text-transform: uppercase; }
.w2-kanban .w2-carga-row-link > .w2-cell:nth-child(3),
.w2-kanban .w2-carga-row-link > .w2-cell:nth-child(5) { display: none; }
.w2-kanban .w2-row-arrow { align-self: flex-end; margin-top: auto; line-height: 1; }
@media (max-width: 1120px) {
  .w2-table-head, .w2-carga-row-link { grid-template-columns: minmax(230px, 1.5fr) .55fr .8fr .9fr 1fr 28px; }
  .w2-table-head > span:nth-child(5), .w2-carga-row-link > span:nth-child(5) { display: none; }
}
@media (max-width: 820px) {
  .w2-table-head { display: none; }
  .w2-carga-row-link { grid-template-columns: minmax(200px, 1fr) auto 24px; gap: var(--space-3); }
  .w2-carga-row-link > .w2-cell { display: none; }
  .w2-carga-row-link > .w2-cell:nth-child(4) { display: block; }
  .w2-kanban .w2-carga-row-link > .w2-cell:nth-child(2),
  .w2-kanban .w2-carga-row-link > .w2-cell:nth-child(4),
  .w2-kanban .w2-carga-row-link > .w2-cell:nth-child(6) { display: flex; }
  .w2-toolbar-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .w2-view-toggle { align-self: flex-end; }
}
@media (max-width: 520px) {
  .w2-carga-row-link { grid-template-columns: minmax(0, 1fr) 22px; min-height: 72px; padding: var(--space-3); }
  .w2-carga-row-link > .w2-cell:nth-child(4) { grid-column: 1; margin-left: 21px; }
  .w2-row-arrow { grid-column: 2; grid-row: 1 / span 2; }
  .w2-status-marker { width: 6px; height: 32px; }
}

/* W2 — prioridade decidida pelo gestor */
.prioridade-alerta { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid color-mix(in oklab, var(--destructive) 24%, var(--border)); border-radius: var(--radius-xl); background: linear-gradient(100deg, color-mix(in oklab, var(--destructive) 7%, var(--card)), var(--card) 72%); box-shadow: 0 10px 28px -25px color-mix(in oklab, var(--destructive) 55%, transparent); }
.prioridade-icone { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--destructive) 12%, var(--card)); color: var(--destructive); }
.prioridade-alerta > div { display: flex; flex: 1; flex-direction: column; gap: 2px; }.prioridade-alerta strong { font-size: var(--text-sm); }.prioridade-alerta span { color: var(--muted-foreground); font-size: var(--text-xs); }.prioridade-alerta .btn { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 32%, var(--border)); background: var(--card); }
.foco-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: color-mix(in oklab, var(--card) 92%, var(--cream)); }
.foco-toolbar > div:first-child { display: flex; flex-direction: column; gap: 1px; }.foco-toolbar strong { font-size: var(--text-sm); }.foco-toolbar > div:first-child span { color: var(--muted-foreground); font-size: var(--text-xs); }
.foco-opcoes { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--radius-lg); background: var(--muted); }.foco-opcoes button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted-foreground); font: inherit; font-size: var(--text-xs); font-weight: var(--font-medium); cursor: pointer; }.foco-opcoes button:hover { color: var(--foreground); }.foco-opcoes button.on { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }.foco-opcoes button.danger { color: var(--destructive); }.foco-opcoes b { display: inline-grid; min-width: 19px; height: 19px; place-items: center; border-radius: var(--radius-full); background: color-mix(in oklab, currentColor 10%, transparent); font-size: 10px; }
@media (max-width: 760px) { .foco-toolbar { align-items: stretch; flex-direction: column; }.foco-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); }.foco-opcoes button { justify-content: center; }.prioridade-alerta { align-items: flex-start; flex-wrap: wrap; }.prioridade-alerta .btn { margin-left: 58px; } }
@media (max-width: 480px) { .foco-opcoes { grid-template-columns: 1fr; }.prioridade-alerta .btn { width: 100%; margin-left: 0; } }

/* W8 — CRUD: modal + acoes de linha */
.dialog-overlay { display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 50; position: fixed; inset: 0; }
.switch { position: relative; }
.modal-box { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--space-4); max-height: 90vh; overflow: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.modal-head h3 { font-size: var(--text-xl); }
.modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
.btn.icon-btn { padding: var(--space-2); min-height: 0; }
.btn.icon-btn.danger { color: var(--destructive); }
.btn.icon-btn.danger:hover { background: color-mix(in oklab, var(--destructive) 10%, transparent); }
.badge-toggle { border: none; cursor: pointer; font: inherit; }
.tabela-vazia { text-align: center; color: var(--muted-foreground); padding: var(--space-6); }

/* ================= W6 — Lista EAN (tabela premium) ================= */
.modal-hint { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.4; margin: calc(var(--space-2) * -1) 0 0; }

/* toolbar / busca */
.ean-toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.ean-toolbar .search-box { flex: 1; min-width: 260px; border-radius: var(--radius-lg); border-width: 1.5px; padding-right: var(--space-2); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.ean-toolbar .search-box:focus-within { border-color: var(--ring); color: var(--foreground); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 13%, transparent); }
.ean-toolbar .search-box .input { padding: var(--space-3) 0; font-size: var(--text-base); }
.ean-import { border-radius: var(--radius-lg); }
.search-clear { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border: none; border-radius: var(--radius-full); background: var(--muted); color: var(--muted-foreground); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.search-clear:hover { background: color-mix(in oklab, var(--destructive) 14%, var(--muted)); color: var(--destructive); }

/* wrap com scroll proprio + cabecalho fixo (sticky).
   Selector .panel .ean-table p/ vencer .panel .table thead th (que zera o fundo). */
.ean-wrap { max-height: 512px; overflow: auto; }
.panel .ean-table thead th { position: sticky; top: 0; z-index: 2; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-semibold); color: color-mix(in oklab, var(--brown-mid) 88%, transparent); background: color-mix(in oklab, var(--muted) 42%, var(--card)); border-bottom: 1px solid var(--border); box-shadow: 0 6px 10px -7px color-mix(in oklab, var(--brown-dark) 22%, transparent); }
.ean-table tbody tr { height: 72px; border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); transition: background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.ean-table tbody td { vertical-align: middle; }
.ean-table tbody tr:last-child { border-bottom: none; }
.ean-table tbody tr:hover { background: color-mix(in oklab, var(--gold) 7%, var(--card)); box-shadow: inset 3px 0 0 var(--gold); }

/* chip SKU (chave do material) */
.sku { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.01em; color: var(--burgundy); background: color-mix(in oklab, var(--burgundy) 8%, var(--card)); border: 1px solid color-mix(in oklab, var(--burgundy) 16%, transparent); padding: 4px 10px; border-radius: var(--radius-md); white-space: nowrap; }
.sku svg { flex: none; color: color-mix(in oklab, var(--burgundy) 50%, var(--gold)); }

.ean-desc { font-weight: var(--font-medium); color: var(--foreground); }

/* codigo 14 dig. — zeros a esquerda esmaecidos */
.cod { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.03em; color: var(--foreground); }
.cod-zeros { font-weight: 400; color: color-mix(in oklab, var(--muted-foreground) 42%, transparent); }

/* peso/caixa */
.peso { font-variant-numeric: tabular-nums; font-weight: var(--font-semibold); white-space: nowrap; }
.peso-un { margin-left: 4px; font-size: var(--text-xs); font-weight: var(--font-normal); color: var(--muted-foreground); }

/* ultima alteracao — avatar + meta */
.alt-chip { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.alt-av { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-full); background: var(--gradient-primary); color: var(--primary-foreground); font-size: 0.66rem; font-weight: var(--font-bold); box-shadow: var(--shadow-sm); }
.alt-meta { display: flex; flex-direction: column; line-height: 1.2; }
.alt-nome { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--foreground); white-space: nowrap; }
.alt-data { font-size: var(--text-xs); color: var(--muted-foreground); white-space: nowrap; }
.alt-none { display: inline-flex; align-items: center; min-height: 28px; font-size: var(--text-sm); font-style: italic; color: color-mix(in oklab, var(--muted-foreground) 55%, transparent); }

/* botao editar — tamanho FIXO (sem layout shift): so o icone realca no hover */
.ean-table .col-acao { text-align: right; width: 60px; }
.ean-edit { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--muted-foreground); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.ean-table tbody tr:hover .ean-edit { color: var(--burgundy); }
.ean-edit:hover { background: color-mix(in oklab, var(--burgundy) 10%, transparent); color: var(--burgundy); border-color: color-mix(in oklab, var(--burgundy) 22%, var(--border)); }
.ean-edit:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; color: var(--burgundy); }

/* estado vazio */
.ean-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-6); color: var(--muted-foreground); }
.ean-empty svg { opacity: 0.5; }

/* ---- faixa de metricas (substitui os KPI cards pesados no W6) ---- */
.ean-stats { display: flex; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.ean-stat { flex: 1 1 0; min-width: 150px; padding: var(--space-5) var(--space-6); border-left: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.ean-stat:first-child { border-left: none; }
.ean-stat-n { font-size: var(--text-3xl); font-weight: var(--font-semibold); line-height: 1.1; letter-spacing: -0.02em; color: var(--foreground); font-variant-numeric: tabular-nums; }
.ean-stat-l { margin-top: 4px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--font-medium); color: var(--muted-foreground); }
.ean-stat.gold .ean-stat-n { color: color-mix(in oklab, var(--gold) 68%, var(--brown-dark)); }
.ean-stat.success .ean-stat-n { color: var(--success); }

/* ---- paginacao ---- */
.ean-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 28%, var(--card)); }
.ean-pager-info { font-size: var(--text-sm); color: var(--muted-foreground); }
.ean-pager-info b { color: var(--foreground); font-weight: var(--font-semibold); }
.ean-pager-ctrls { display: flex; align-items: center; gap: 4px; }
.pg-btn, .pg-num { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; font: inherit; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.pg-btn:hover:not(:disabled), .pg-num:hover:not(.on) { background: var(--muted); border-color: color-mix(in oklab, var(--burgundy) 22%, var(--border)); }
.pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-num.on { background: var(--gradient-primary); color: var(--primary-foreground); border-color: transparent; box-shadow: var(--shadow-sm); }

/* ---- Django templates (compat; React usa messages/components próprios) ---- */
.flash-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); }
.flash-error, .flash-erro { background: color-mix(in oklab, var(--destructive) 12%, var(--card)); color: var(--destructive); }
.flash-success, .flash-sucesso { background: color-mix(in oklab, var(--success) 12%, var(--card)); color: color-mix(in oklab, var(--success) 58%, black); }
.flash-warning, .flash-aviso { background: color-mix(in oklab, var(--gold) 16%, var(--card)); color: color-mix(in oklab, var(--gold) 52%, black); }
.flash-info { background: color-mix(in oklab, var(--primary) 10%, var(--card)); color: var(--primary); }
.upload-card .upload-file { margin-top: 6px; font-size: var(--text-xs); color: var(--muted-foreground); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-card.has-file .upload-file { color: var(--success); font-weight: var(--font-medium); }

/* W4 — acompanhamento */
.w4-acompanhamento { display: flex; flex-direction: column; gap: var(--space-5); }
.w4-back-link { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; color: var(--muted-foreground); font-size: var(--text-sm); font-weight: var(--font-medium); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.w4-back-link:hover { color: var(--primary); }
.w4-back-icon { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card); transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.w4-back-link:hover .w4-back-icon { border-color: color-mix(in oklab, var(--primary) 38%, var(--border)); transform: translateX(-2px); }
.w4-emitir-header[aria-disabled="true"] { cursor: not-allowed; }
.w4-section-nav { position: sticky; top: calc(var(--w4-header-height, 104px) + var(--space-2)); z-index: 4; display: flex; align-items: center; gap: var(--space-1); width: fit-content; max-width: 100%; padding: 5px; overflow-x: auto; background: color-mix(in oklab, var(--card) 94%, transparent); border: 1px solid color-mix(in oklab, var(--border) 88%, transparent); border-radius: var(--radius-xl); box-shadow: 0 12px 28px -22px color-mix(in oklab, var(--brown-dark) 48%, transparent); backdrop-filter: blur(12px); scrollbar-width: none; }
.w4-section-nav::-webkit-scrollbar { display: none; }
.w4-section-nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 11px; color: var(--muted-foreground); font-size: var(--text-sm); font-weight: var(--font-medium); text-decoration: none; white-space: nowrap; border-radius: var(--radius-lg); transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.w4-section-nav a:hover { color: var(--foreground); background: color-mix(in oklab, var(--muted) 58%, transparent); }
.w4-section-nav a.is-active { color: var(--primary-foreground); background: var(--primary); box-shadow: 0 6px 14px -9px color-mix(in oklab, var(--primary) 72%, transparent); }
.w4-nav-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; color: var(--destructive); font-size: 11px; font-weight: var(--font-bold); background: color-mix(in oklab, var(--destructive) 10%, white); border-radius: var(--radius-full); }
.w4-section-nav a.is-active .w4-nav-count { color: var(--primary); background: white; }
.w4-dashboard, #w5-divergencias, #w4-deliveries-panel, #w4-log-bipes { scroll-margin-top: calc(var(--w4-header-height, 104px) + 72px); }
.w4-dashboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.w4-metric { display: flex; align-items: flex-start; gap: var(--space-4); min-height: 142px; padding: var(--space-5); border-radius: var(--radius-xl); border: 1px solid color-mix(in oklab, var(--border) 85%, transparent); box-shadow: 0 8px 28px -24px color-mix(in oklab, var(--brown-dark) 42%, transparent); }
.w4-metric-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.w4-metric-label { color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .055em; text-transform: uppercase; }
.w4-metric-value { color: var(--foreground); font-size: clamp(1.75rem, 2.8vw, 2.35rem); font-weight: var(--font-bold); letter-spacing: -.045em; line-height: 1.05; white-space: nowrap; }
.w4-metric-value small { color: var(--muted-foreground); font-size: var(--text-sm); font-weight: var(--font-medium); letter-spacing: 0; }
.w4-metric-help { color: var(--muted-foreground); font-size: var(--text-xs); }
.w4-metric-alert { border-color: color-mix(in oklab, var(--destructive) 30%, var(--border)); background: linear-gradient(145deg, color-mix(in oklab, var(--destructive) 4%, white), color-mix(in oklab, var(--destructive) 8%, white)); }
.w4-metric-alert .kpi-ico { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 14%, transparent); }
.w4-metric-alert .w4-metric-help { color: var(--destructive); font-weight: var(--font-medium); }
.w4-metric-alert.is-clear { border-color: color-mix(in oklab, var(--success) 28%, var(--border)); background: color-mix(in oklab, var(--success) 4%, var(--card)); }
.w4-metric-alert.is-clear .kpi-ico { color: var(--success); background: color-mix(in oklab, var(--success) 14%, transparent); }
.w4-metric-alert.is-clear .w4-metric-help { color: var(--success); }
.w4-metric-status .kpi-ico { color: color-mix(in oklab, var(--gold) 65%, black); background: color-mix(in oklab, var(--gold) 17%, transparent); }
.w4-status-pill { display: inline-flex; max-width: 100%; padding: 7px 11px; color: var(--primary); font-size: var(--text-sm); font-weight: var(--font-semibold); background: color-mix(in oklab, var(--primary) 10%, var(--card)); border-radius: var(--radius-full); overflow-wrap: anywhere; }
.w4-progress-track { height: 7px; margin-top: 3px; overflow: hidden; background: color-mix(in oklab, var(--muted) 82%, white); border-radius: var(--radius-full); }
.w4-progress-track span { display: block; height: 100%; min-width: 2px; background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 60%, var(--gold))); border-radius: inherit; transition: width .3s var(--ease-out); }
.w4-live-meta {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#w5-divergencias { order: 4; }
#w4-deliveries-panel { order: 5; }
#w4-log-bipes { order: 6; }
.w4-acompanhamento .panel-ico-danger { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 14%, transparent); }
.w4-priority-panel { border-color: color-mix(in oklab, var(--destructive) 30%, var(--border)); box-shadow: 0 12px 34px -26px color-mix(in oklab, var(--destructive) 55%, transparent); }
.w4-priority-panel .panel-head { align-items: center; }
.w4-priority-count { display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto; padding: 6px 10px; color: var(--destructive); font-size: var(--text-xs); background: color-mix(in oklab, var(--destructive) 8%, var(--card)); border: 1px solid color-mix(in oklab, var(--destructive) 18%, var(--border)); border-radius: var(--radius-full); }
.w4-divergencias-list { display: flex; flex-direction: column; }
.w4-divergencia-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.w4-divergencia-item:last-child { border-bottom: 0; }
.w4-divergencia-heading { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.w4-divergencia-heading > strong { font-size: var(--text-base); }
.w4-divergencia-item { position: relative; border-left: 4px solid transparent; transition: background var(--duration-fast), border-color var(--duration-fast); }
.w4-divergencia-item.w4-divergencia-status--aberta { border-left-color: var(--destructive); background: color-mix(in oklab, var(--destructive) 2.5%, var(--card)); }
.w4-divergencia-item.w4-divergencia-status--em_revisao { border-left-color: #3677b9; background: color-mix(in oklab, #3677b9 3.5%, var(--card)); }
.w4-divergencia-item.w4-divergencia-status--justificada { border-left-color: var(--gold); background: color-mix(in oklab, var(--gold) 5%, var(--card)); }
.w4-divergencia-item.w4-divergencia-status--resolvida { border-left-color: var(--success); background: color-mix(in oklab, var(--success) 3.5%, var(--card)); }
.w4-divergencia-badge { gap: 5px; border: 1px solid transparent; }
.w4-divergencia-badge::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: var(--radius-full); background: currentColor; }
.w4-divergencia-badge--aberta { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 11%, var(--card)); border-color: color-mix(in oklab, var(--destructive) 19%, var(--border)); }
.w4-divergencia-badge--em_revisao { color: #28659e; background: color-mix(in oklab, #3677b9 12%, var(--card)); border-color: color-mix(in oklab, #3677b9 22%, var(--border)); }
.w4-divergencia-badge--justificada { color: color-mix(in oklab, var(--gold) 62%, #3b2517); background: color-mix(in oklab, var(--gold) 17%, var(--card)); border-color: color-mix(in oklab, var(--gold) 30%, var(--border)); }
.w4-divergencia-badge--resolvida { color: color-mix(in oklab, var(--success) 66%, #173522); background: color-mix(in oklab, var(--success) 12%, var(--card)); border-color: color-mix(in oklab, var(--success) 23%, var(--border)); }
.w4-divergencia-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--muted-foreground); font-size: var(--text-xs); }
.w4-divergencia-meta span { display: inline-flex; gap: 5px; }
.w4-divergencia-meta b { color: var(--foreground); font-weight: var(--font-medium); }
.w4-divergencia-main p { max-width: 820px; margin: var(--space-3) 0 0; color: color-mix(in oklab, var(--foreground) 82%, transparent); font-size: var(--text-sm); }
.w4-divergencia-motivo { padding: var(--space-2) var(--space-3); background: color-mix(in oklab, var(--gold) 9%, var(--card)); border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.w4-divergencias-empty { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-7); color: var(--success); }
.w4-divergencias-empty p { margin: 2px 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.w5-acoes .row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.w5-acoes .btn { min-width: 92px; }
.w4-delivery-row { cursor: pointer; transition: background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.w4-delivery-row:hover, .w4-delivery-row:focus-visible { background: color-mix(in oklab, var(--gold) 9%, transparent); box-shadow: inset 3px 0 0 var(--gold); outline: none; }
.w4-delivery-row[aria-expanded="true"] { background: color-mix(in oklab, var(--gold) 12%, transparent); box-shadow: inset 3px 0 0 var(--gold); }
.w4-ratio { color: var(--muted-foreground); font-size: var(--text-xs); }
.w4-drilldown { border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--gold) 5%, var(--card)); }
.w4-drill-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.w4-drill-head > div { display: flex; align-items: baseline; gap: var(--space-2); }
.w4-drill-head > div span { color: var(--muted-foreground); }
.w4-drill-head > span { color: var(--muted-foreground); font-size: var(--text-xs); }
.w4-delivery-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(210px, .55fr) auto; gap: var(--space-3); align-items: end; padding: var(--space-4) var(--space-5); background: color-mix(in oklab, var(--cream) 38%, var(--card)); border-bottom: 1px solid var(--border); }
.w4-filter-bar { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(190px, .8fr) minmax(190px, .75fr) auto; gap: var(--space-3); align-items: end; }
.w4-filter-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.w4-filter-field label { color: color-mix(in oklab, var(--foreground) 82%, transparent); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.w4-filter-control { position: relative; display: flex; align-items: center; min-height: 46px; overflow: hidden; color: var(--muted-foreground); background: var(--card); border: 1px solid color-mix(in oklab, var(--border) 88%, var(--foreground)); border-radius: var(--radius-lg); box-shadow: 0 1px 2px color-mix(in oklab, var(--brown-dark) 5%, transparent); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.w4-filter-control:hover { border-color: color-mix(in oklab, var(--primary) 34%, var(--border)); }
.w4-filter-control:focus-within { color: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 12%, transparent); }
.w4-filter-control > svg { position: absolute; left: 14px; z-index: 1; flex: none; pointer-events: none; }
.w4-filter-control input, .w4-filter-control select { width: 100%; min-width: 0; min-height: 44px; padding: 0 42px; color: var(--foreground); font: inherit; background: transparent; border: 0; outline: 0; }
.w4-filter-control input::placeholder { color: color-mix(in oklab, var(--muted-foreground) 82%, transparent); }
.w4-filter-control input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.w4-filter-control select { padding-right: var(--space-3); cursor: pointer; }
.w4-results-count { align-self: center; justify-self: end; padding: 6px 10px; color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-medium); white-space: nowrap; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full); }
.w4-filter-bar .btn { align-self: end; white-space: nowrap; }
.w4-clear-filters { min-height: 46px; border-radius: var(--radius-lg); }
.w4-filter-feedback { margin-top: var(--space-3); color: var(--muted-foreground); font-size: var(--text-xs); }
.w4-filter-feedback.is-loading { color: var(--primary); }

.w5-dialog { border: 0; border-radius: var(--radius-2xl); padding: 0; max-width: 560px; width: calc(100% - 2rem); overflow: hidden; background: var(--card); box-shadow: 0 28px 80px -28px color-mix(in oklab, var(--brown-dark) 68%, transparent); }
.w5-dialog::backdrop { background: color-mix(in oklab, var(--brown-dark) 52%, transparent); backdrop-filter: blur(2px); }
.w5-dialog form { display: flex; flex-direction: column; }
.w5-dialog-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-5) var(--space-6); background: linear-gradient(145deg, color-mix(in oklab, var(--destructive) 6%, white), var(--card)); border-bottom: 1px solid var(--border); }
.w5-dialog-head h3 { margin: 0; font-size: var(--text-xl); }
.w5-dialog-head p { margin: 4px 0 0; color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.45; }
.w5-dialog-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--destructive); background: color-mix(in oklab, var(--destructive) 12%, transparent); border-radius: var(--radius-lg); }
.w5-dialog-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; color: var(--muted-foreground); background: transparent; border-radius: var(--radius-full); cursor: pointer; }
.w5-dialog-close:hover { color: var(--foreground); background: var(--muted); }
.w5-dialog-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.w5-dialog-body textarea { min-height: 112px; resize: vertical; }
.w5-dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: color-mix(in oklab, var(--muted) 38%, var(--card)); border-top: 1px solid var(--border); }

/* W7 — fechamento e emissão do romaneio */
body.w7-modal-open { overflow: hidden; }
.w7-dialog { width: min(760px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; color: var(--foreground); background: var(--card); border: 0; border-radius: var(--radius-2xl); box-shadow: 0 28px 90px -28px color-mix(in oklab, var(--brown-dark) 72%, transparent); overflow: hidden; }
.w7-dialog [hidden] { display: none !important; }
.w7-dialog::backdrop { background: color-mix(in oklab, var(--brown-dark) 54%, transparent); backdrop-filter: blur(3px); }
.w7-dialog-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); }
.w7-dialog-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--border); background: linear-gradient(145deg, color-mix(in oklab, var(--primary) 7%, white), var(--card)); }
.w7-dialog-head h2 { margin: 2px 0 4px; font-size: var(--text-2xl); line-height: 1.2; }
.w7-dialog-head p { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.5; }
.w7-dialog-head p strong { color: var(--foreground); }
.w7-eyebrow { color: var(--primary) !important; font-size: var(--text-xs) !important; font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
.w7-dialog-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, var(--card)); border-radius: var(--radius-lg); }
.w7-dialog-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--muted-foreground); background: transparent; border: 0; border-radius: var(--radius-full); cursor: pointer; }
.w7-dialog-close:hover { color: var(--foreground); background: var(--muted); }
.w7-dialog-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); overflow-y: auto; }
.w7-gate-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.w7-gate-card strong { display: block; margin-bottom: 2px; font-size: var(--text-lg); }
.w7-gate-card p { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.45; }
.w7-gate-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-lg); }
.w7-gate-icon::before { content: "…"; font-size: var(--text-xl); font-weight: var(--font-bold); }
.w7-gate-card.is-loading { background: color-mix(in oklab, var(--muted) 32%, var(--card)); }
.w7-gate-card.is-loading .w7-gate-icon { color: var(--muted-foreground); background: var(--muted); }
.w7-gate-card.is-ready { border-color: color-mix(in oklab, var(--success) 38%, var(--border)); background: color-mix(in oklab, var(--success) 8%, var(--card)); }
.w7-gate-card.is-ready .w7-gate-icon { color: color-mix(in oklab, var(--success) 66%, black); background: color-mix(in oklab, var(--success) 16%, var(--card)); }
.w7-gate-card.is-ready .w7-gate-icon::before { content: "✓"; }
.w7-gate-card.is-blocked { border-color: color-mix(in oklab, var(--destructive) 38%, var(--border)); background: color-mix(in oklab, var(--destructive) 6%, var(--card)); }
.w7-gate-card.is-blocked .w7-gate-icon { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 14%, var(--card)); }
.w7-gate-card.is-blocked .w7-gate-icon::before { content: "!"; }
.w7-section { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.w7-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.w7-section-head h3 { margin: 0; font-size: var(--text-base); }
.w7-section-head p { margin: 3px 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.w7-embarque-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.w7-embarque-item { min-width: 0; padding: var(--space-3); background: color-mix(in oklab, var(--muted) 34%, var(--card)); border-radius: var(--radius-lg); }
.w7-embarque-item.is-wide { grid-column: span 2; }
.w7-embarque-item span { display: block; margin-bottom: 3px; color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .03em; text-transform: uppercase; }
.w7-embarque-item strong { display: block; overflow-wrap: anywhere; font-size: var(--text-sm); }
.w7-skeleton { height: 64px; border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--muted), color-mix(in oklab, var(--muted) 52%, white), var(--muted)); background-size: 200% 100%; animation: w7-skeleton 1.2s linear infinite; }
@keyframes w7-skeleton { to { background-position: -200% 0; } }
.w7-empty-state { grid-column: 1 / -1; padding: var(--space-4); text-align: center; color: var(--muted-foreground); background: color-mix(in oklab, var(--destructive) 4%, var(--card)); border: 1px dashed color-mix(in oklab, var(--destructive) 28%, var(--border)); border-radius: var(--radius-lg); }
.w7-empty-state strong { color: var(--foreground); }
.w7-empty-state p { margin: 4px 0 0; font-size: var(--text-sm); }
.w7-archive { background: color-mix(in oklab, var(--gold) 6%, var(--card)); }
.w7-error { padding: var(--space-3) var(--space-4); color: color-mix(in oklab, var(--destructive) 68%, black); background: color-mix(in oklab, var(--destructive) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--destructive) 30%, var(--border)); border-radius: var(--radius-lg); font-size: var(--text-sm); }
.w7-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-6); background: color-mix(in oklab, var(--muted) 38%, var(--card)); border-top: 1px solid var(--border); }
.w7-dialog-footer p { max-width: 390px; margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.4; }
.w7-dialog-actions { display: flex; gap: var(--space-3); flex: none; }
.w5-just-erro { color: var(--destructive); font-size: var(--text-sm); margin: var(--space-2) 0 0; }
#w4-gate[data-pode="0"] { color: var(--destructive); font-weight: var(--font-medium); }
#w4-gate[data-pode="1"] { color: var(--success); font-weight: var(--font-medium); }

@media (max-width: 1180px) {
  .w4-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .w4-filter-bar { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .w4-delivery-toolbar { grid-template-columns: minmax(200px, 1fr) minmax(180px, .7fr); }
  .w4-results-count { grid-column: 1 / -1; justify-self: start; }
  .w4-filter-bar .btn { width: 100%; }
  .w4-divergencia-item { grid-template-columns: 1fr; }
  .w5-acoes .row-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .w4-section-nav { width: 100%; }
  .w4-dashboard { grid-template-columns: 1fr; }
  .w4-emitir-header { width: 100%; justify-content: center; }
  .w4-metric { min-height: 120px; }
  .w4-filter-bar { grid-template-columns: 1fr; }
  .w4-delivery-toolbar { grid-template-columns: 1fr; }
  .w4-drill-head { align-items: flex-start; flex-direction: column; }
  .w4-priority-count { display: none; }
  .w4-divergencia-item { padding: var(--space-4); }
  .w5-dialog-head, .w5-dialog-body, .w5-dialog-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .w5-dialog-footer .btn { flex: 1; justify-content: center; }
  .w7-dialog { width: 100%; max-height: 100dvh; border-radius: 0; }
  .w7-dialog-shell { max-height: 100dvh; }
  .w7-dialog-head, .w7-dialog-body, .w7-dialog-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .w7-gate-card { grid-template-columns: auto minmax(0, 1fr); }
  .w7-gate-card > .badge { grid-column: 2; justify-self: start; }
  .w7-embarque-grid { grid-template-columns: 1fr 1fr; }
  .w7-embarque-item.is-wide { grid-column: 1 / -1; }
  .w7-dialog-footer { align-items: stretch; flex-direction: column; }
  .w7-dialog-actions, .w7-dialog-actions .btn { flex: 1; justify-content: center; }
}