/* ============================================================
   MWOS — design system: UM DS, UM TEMA (ADR 0031, vigente 05/08/2026)
   Importar em todos os módulos, e só isto:
     <link rel="stylesheet" href="/ds/mwos.css">
   O @import abaixo puxa o tokens.css sozinho. Não adicione um segundo
   <link>: a ordem dos dois é load-bearing, e fixá-la em código é o que
   impede a tela de renderizar sem fundo e sem cor de texto.

   CAMADAS (ADR 0051):
     tokens.css  = paleta e papel   — a cor da marca vive lá
     mwos.css    = componente       — como a cor se aplica na tela
   Cor nova entra pelo tokens.css. Componente novo entra aqui.

   Cor não decora: significa. Zero emoji; número sempre monospace.
   Shell (header/sidebar) FUNDIDO aqui — um import.
   ============================================================ */

@import url("tokens.css");

/* ---------- TEMA BASE: operacional (grafite) ----------
   Superfície, texto, borda e acento NÃO têm hex aqui: vêm de /ds/tokens.css, que é a
   fonte única. Antes deste arquivo declarar os seus, o tema escuro morria no caminho —
   o tokens.css trocava --mw-superficie e --mw-fundo, e os componentes liam --mw-card e
   --mw-pagina, que este arquivo fixava em claro. Medido em 18/08/2026 no /ds/catalogo.html.

   Continua com hex próprio só onde o tokens.css não tem equivalente: fluxo (cart, roma,
   expe, compras), triagem (ok, avalie, espere, bloq, frio) e atenção ISA-18.2. */
:root{
  /* marca — nome vive aqui */
  --mw-marca:"MWOS";

  /* superfície — o papel vem do tokens.css */
  --mw-pagina:var(--mw-fundo);
  --mw-card:var(--mw-superficie);
  --mw-linha:var(--mw-superficie-2);
  --mw-th-fundo:var(--mw-superficie-tabela);
  /* --mw-borda e --mw-borda-forte não se declaram aqui: são do tokens.css. Declará-los
     de novo era uma das seis colisões medidas — e este arquivo vencia por carregar depois. */

  /* texto */
  --mw-tinta:var(--mw-texto);
  --mw-texto2:var(--mw-texto-2);
  --mw-apoio:var(--mw-texto-fraco);
  --mw-dica:var(--mw-texto-fraco);

  /* número — monospace tabular, sempre */
  --mw-mono:var(--mw-fonte-mono);

  /* acento — ação primária. ⚠ `--mw-tinta` carrega DOIS papéis: aqui é texto principal,
     no tokens.css é ação primária. Hoje resolvem no mesmo valor, então nada quebra na
     tela — e é por isso que é perigoso: o modo de falha é o silêncio. Separar os nomes
     é dívida do ADR 0051, que declara qual camada manda. Até lá, a ação primária lê o
     mesmo token do texto: igual no claro, e no escuro inverte junto com ele. O `.mw-bt`
     compensa com --mw-texto-invertido na letra. */
  --mw-acento:var(--mw-texto);--mw-acento-forte:var(--mw-texto);--mw-acento-tinta:var(--mw-texto);
  --mw-acento-nevoa:var(--mw-superficie-2);--mw-acento-orla:var(--mw-borda-forte);

  /* fluxo — seção (onde estou): cor + aura pastel + orla */
  --mw-cart:#047857;   --mw-cart-nevoa:#F1F8F6;   --mw-cart-orla:#CDE4DD;
  --mw-roma:#5B6472;   --mw-roma-nevoa:#F6F6F7;   --mw-roma-orla:#DEE0E3;
  --mw-expe:#1D4ED8;   --mw-expe-nevoa:#F3F5FD;   --mw-expe-orla:#D2DCF7;
  --mw-compras:#A21CAF;--mw-compras-nevoa:#FAF3FB;--mw-compras-orla:#ECD2EF;

  /* triagem — estado (o que fazer): tinta + pastel + orla */
  --mw-ok:#15803D;    --mw-ok-nevoa:#F2F8F4;    --mw-ok-orla:#D0E6D8;
  --mw-avalie:#7C3AED;--mw-avalie-nevoa:#F8F4FE;--mw-avalie-orla:#E5D8FB;
  --mw-espere:#5B6472;--mw-espere-nevoa:#F6F6F7;--mw-espere-orla:#DEE0E3;
  --mw-bloq:#BE123C;  --mw-bloq-nevoa:#FBF2F4;  --mw-bloq-orla:#F2D0D8;

  /* frio — pago / programado financeiro (índigo) */
  --mw-frio:#312E81;--mw-frio-nevoa:#EEF2FF;--mw-frio-orla:#C7D2FE;--mw-frio-sinal:#6366F1;

  /* atenção ISA-18.2 — COMPARTILHADA entre temas, tema NÃO sobrescreve.
     -sinal = ponto/filete/fundo de botão, nunca texto; texto usa -tinta. */
  --mw-alerta-sinal:#7C3AED;--mw-alerta-nevoa:#F8F4FE;--mw-alerta-orla:#E5D8FB;--mw-alerta-tinta:#4C1D95;
  --mw-alarme-sinal:#BE123C;--mw-alarme-nevoa:#FBF2F4;--mw-alarme-orla:#F2D0D8;--mw-alarme-tinta:#881337;
}

/* ---------- TEMA ESCURO: mesmas famílias, superfícies noturnas ----------
   Texto operacional mantém AA. Medição WCAG registrada no manual canônico. */
[data-theme="dark"]{
  --mw-cart:#34D399;   --mw-cart-nevoa:#102721;   --mw-cart-orla:#245244;
  --mw-roma:#A1A1AA;   --mw-roma-nevoa:#232326;   --mw-roma-orla:#3F3F46;
  --mw-expe:#60A5FA;   --mw-expe-nevoa:#162438;   --mw-expe-orla:#27476B;
  --mw-compras:#E879F9;--mw-compras-nevoa:#2B1A2E;--mw-compras-orla:#5B2A62;

  --mw-ok:#4ADE80;    --mw-ok-nevoa:#142A1C;    --mw-ok-orla:#27643A;
  --mw-avalie:#C4B5FD;--mw-avalie-nevoa:#251D36;--mw-avalie-orla:#514078;
  --mw-espere:#D4D4D8;--mw-espere-nevoa:#242427;--mw-espere-orla:#52525B;
  --mw-bloq:#FDA4AF;  --mw-bloq-nevoa:#32181F;  --mw-bloq-orla:#7F1D31;

  --mw-frio:#A5B4FC;--mw-frio-nevoa:#20233D;--mw-frio-orla:#454B82;--mw-frio-sinal:#818CF8;

  --mw-alerta-sinal:#C4B5FD;--mw-alerta-nevoa:#251D36;--mw-alerta-orla:#514078;--mw-alerta-tinta:#EDE9FE;
  --mw-alarme-sinal:#FB7185;--mw-alarme-nevoa:#32181F;--mw-alarme-orla:#7F1D31;--mw-alarme-tinta:#FFE4E6;
}

/* ---------- base tipográfica ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--mw-pagina);color:var(--mw-tinta);
  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.1px}
.mw-mono{font-family:var(--mw-mono);font-variant-numeric:tabular-nums}

/* abertura de página — título responde, story dá o e-daí (números em <b>) */
.mw-titulo{font-size:22px;font-weight:650;letter-spacing:-.2px;margin:0}
.mw-story{color:var(--mw-apoio);font-size:14px;margin-top:5px}
.mw-story b{color:var(--mw-texto2);font-weight:600}
.mw-cap{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--mw-apoio);margin:0 0 14px}
.mw-regra{height:1px;background:var(--mw-borda-forte);border:0;margin:24px 0}

/* ---------- atenção ISA-18.2 — todo nível rende com AÇÃO visível ---------- */
.mw-alarme-card,.mw-alerta-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-radius:10px;padding:12px 16px;font-size:14px;margin-bottom:14px}
.mw-alarme-card{background:var(--mw-alarme-nevoa);border:1px solid var(--mw-alarme-orla);
  border-left:3px solid var(--mw-alarme-sinal);color:var(--mw-alarme-tinta)}
.mw-alerta-card{background:var(--mw-alerta-nevoa);border:1px solid var(--mw-alerta-orla);
  border-left:3px solid var(--mw-alerta-sinal);color:var(--mw-alerta-tinta)}
.mw-alarme-card .mw-bt{background:var(--mw-alarme-sinal);margin-left:auto}
.mw-alerta-card .mw-bt{background:var(--mw-alerta-sinal);margin-left:auto}
/* estado calmo explícito — "nada pede sua atenção" */
.mw-calmo{background:var(--mw-ok-nevoa);border:1px solid var(--mw-ok-orla);
  color:var(--mw-ok);border-radius:10px;padding:12px 16px;font-size:14px;margin-bottom:14px}

/* ---------- KPI — número vivo em card ---------- */
.mw-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:14px 0}
.mw-kpi{background:var(--mw-card);border:1px solid var(--mw-borda);border-radius:12px;padding:14px 16px}
.mw-kpi .l{display:block;font-size:12px;color:var(--mw-apoio)}
.mw-kpi .v{font-size:24px;font-weight:600;font-family:var(--mw-mono);font-variant-numeric:tabular-nums;margin-top:2px}
.mw-kpi .s{display:block;font-size:12px;color:var(--mw-apoio);margin-top:2px}

/* ---------- pílula de estado — pastel + tinta + ponto + PALAVRA ---------- */
.mw-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--mw-borda);
  background:var(--mw-card);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;white-space:nowrap}
.mw-pill .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.mw-pill.ok{color:var(--mw-ok);background:var(--mw-ok-nevoa);border-color:var(--mw-ok-orla)}
.mw-pill.avalie{color:var(--mw-avalie);background:var(--mw-avalie-nevoa);border-color:var(--mw-avalie-orla)}
.mw-pill.espere{color:var(--mw-espere);background:var(--mw-espere-nevoa);border-color:var(--mw-espere-orla)}
.mw-pill.bloq{color:var(--mw-bloq);background:var(--mw-bloq-nevoa);border-color:var(--mw-bloq-orla)}
.mw-pill.frio{color:var(--mw-frio);background:var(--mw-frio-nevoa);border-color:var(--mw-frio-orla)}
.mw-pill.alerta{color:var(--mw-alerta-tinta);background:var(--mw-alerta-nevoa);border-color:var(--mw-alerta-orla)}
.mw-pill.alarme{color:var(--mw-alarme-tinta);background:var(--mw-alarme-nevoa);border-color:var(--mw-alarme-orla)}

/* ---------- card de seção (fluxo) — aura + ponto + filete ---------- */
.mw-sec{background:var(--mw-card);border:1px solid var(--mw-borda);border-radius:12px;padding:18px 20px}
.mw-sec .nav{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mw-apoio);margin-bottom:16px}
.mw-sec .dot{width:7px;height:7px;border-radius:50%}
.mw-sec h3{font-size:16px;font-weight:600;padding-bottom:8px;position:relative;display:inline-block;margin:0}
.mw-sec h3:after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px}
.mw-sec.cart{background:var(--mw-cart-nevoa);border-color:var(--mw-cart-orla)}
.mw-sec.roma{background:var(--mw-roma-nevoa);border-color:var(--mw-roma-orla)}
.mw-sec.expe{background:var(--mw-expe-nevoa);border-color:var(--mw-expe-orla)}
.mw-sec.compras{background:var(--mw-compras-nevoa);border-color:var(--mw-compras-orla)}
.mw-sec.cart .dot,.mw-sec.cart h3:after,.mw-sec.cart .mw-bt{background:var(--mw-cart)}
.mw-sec.roma .dot,.mw-sec.roma h3:after,.mw-sec.roma .mw-bt{background:var(--mw-roma)}
.mw-sec.expe .dot,.mw-sec.expe h3:after,.mw-sec.expe .mw-bt{background:var(--mw-expe)}
.mw-sec.compras .dot,.mw-sec.compras h3:after,.mw-sec.compras .mw-bt{background:var(--mw-compras)}

/* ---------- botões ---------- */
.mw-bt{display:inline-flex;align-items:center;justify-content:center;min-width:132px;min-height:40px;
  border:0;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;
  color:var(--mw-texto-invertido);background:var(--mw-acento-forte);cursor:pointer;text-decoration:none}
.mw-bt:disabled{background:var(--mw-borda);color:var(--mw-apoio);cursor:default}
.mw-bt-sec{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  border:1px solid var(--mw-borda-forte);border-radius:8px;padding:8px 14px;font-size:13px;
  color:var(--mw-texto2);background:var(--mw-card);cursor:pointer;text-decoration:none}

/* ---------- tabela — header caps, número mono à direita ---------- */
.mw-tb{width:100%;border-collapse:collapse;font-size:14px}
.mw-tb th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mw-apoio);
  font-weight:600;padding:10px 14px;background:var(--mw-th-fundo);
  border-top:1px solid var(--mw-borda);border-bottom:1px solid var(--mw-borda-forte);white-space:nowrap}
.mw-tb td{padding:11px 14px;border-bottom:1px solid var(--mw-linha);vertical-align:middle}
.mw-tb td.n,.mw-tb th.n{text-align:right;white-space:nowrap}
.mw-tb td.n{font-family:var(--mw-mono);font-variant-numeric:tabular-nums}
.mw-tb tbody tr:hover td{background:var(--mw-pagina)}
.mw-tb tr.alarme td{background:var(--mw-alarme-nevoa)}
.mw-tb tr.alerta td{background:var(--mw-alerta-nevoa)}
.mw-tb-wrap{overflow-x:auto}
/* lista operacional: mesma tabela, densidade menor para varredura de muitas linhas */
.mw-tb.compacta{font-size:13px}
.mw-tb.compacta th{padding:7px 10px;font-size:10.5px}
.mw-tb.compacta td{padding:6px 10px}
.mw-tb.compacta .mw-pill{padding:3px 8px;font-size:12px}
.mw-tb.compacta .mw-bt-sec{min-height:32px;padding:5px 10px}
.mw-tb.compacta .mw-story{font-size:12px;margin:1px 0 0}

/* ---------- filtros ---------- */
.mw-filtros{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:14px}
.mw-filtros input,.mw-filtros select{border:1px solid var(--mw-borda-forte);border-radius:8px;
  padding:6px 10px;font-size:13px;background:var(--mw-card);color:var(--mw-texto2)}
.mw-filtros input:focus,.mw-filtros select:focus{outline:2px solid var(--mw-acento-orla);border-color:var(--mw-acento)}
.mw-filtros-contexto{margin:0}
.mw-filtros-contexto label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mw-apoio)}

/* ---------- rodapé de rastreabilidade — fonte + critérios + carimbo ---------- */
.mw-fonte{font-size:11.5px;color:var(--mw-apoio);border-top:1px solid var(--mw-borda);
  padding-top:10px;margin-top:18px;line-height:1.6}

/* ---------- CASCA OPERACIONAL — referência Sala de Expedição ---------- */
.mw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mw-appbar{display:flex;align-items:center;gap:18px;min-height:52px;padding:9px 20px;
  background:var(--mw-card);border-bottom:1px solid var(--mw-borda);position:sticky;top:0;z-index:30}
.mw-brandline,.mw-toolbar,.mw-company label{display:flex;align-items:center}
.mw-brandline{gap:12px;min-width:max-content}
.mw-brand{color:var(--mw-tinta);font-size:16px;font-weight:750;text-decoration:none;letter-spacing:-.02em}
.mw-module{color:var(--mw-texto2);font-size:13px}
.mw-toolbar{margin-left:auto;gap:12px;justify-content:flex-end;min-width:0}
.mw-toolbar-count,.mw-operator{font-size:11.5px;color:var(--mw-apoio);white-space:nowrap}
.mw-toolbar-count b{color:var(--mw-tinta)}
.mw-company{margin:0}
.mw-company label{gap:7px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mw-ok);flex:none}
.mw-company select{max-width:190px;min-height:34px;padding:5px 28px 5px 9px}
.mw-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;
  padding:5px 9px;border:1px solid var(--mw-borda-forte);border-radius:8px;
  background:var(--mw-card);color:var(--mw-texto2);font:inherit;font-size:12px;cursor:pointer}
.mw-theme-toggle:hover{color:var(--mw-tinta);border-color:var(--mw-tinta)}
.mw-theme-toggle:focus-visible,.mw-gnav a:focus-visible{outline:2px solid var(--mw-acento);outline-offset:2px}
.mw-gnav{display:flex;align-items:stretch;background:var(--mw-card);border-bottom:1px solid var(--mw-borda);
  position:sticky;top:52px;z-index:25;padding:0 20px}
.mw-gnav-track{display:flex;align-items:stretch;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:thin}
.mw-gnav-item,.mw-gnav-modules{display:flex;align-items:center;min-height:43px;padding:9px 12px;
  border-bottom:2px solid transparent;color:var(--mw-texto2);font-size:12.5px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.mw-gnav-item:hover,.mw-gnav-modules:hover{color:var(--mw-tinta)}
.mw-gnav-item.active{color:var(--mw-tinta);border-bottom-color:var(--mw-acento)}
.mw-gnav-item.disabled{color:var(--mw-dica)}
.mw-gnav-modules{margin-left:auto;padding-right:0;color:var(--mw-apoio)}
.main-container{display:block;min-height:calc(100vh - 96px)}
.mw-workspace{width:100%;max-width:1800px;margin:0 auto;padding:20px 24px 48px;min-width:0}
.mw-filterbar{display:flex;align-items:end;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.mw-filterbar label{display:grid;gap:4px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--mw-apoio)}
.mw-table-dense{width:100%;border-collapse:collapse;font-size:14px}
.mw-table-dense th{position:sticky;top:95px;z-index:5;text-align:left;padding:7px 9px;
  background:var(--mw-th-fundo);border-bottom:1px solid var(--mw-borda-forte);
  color:var(--mw-apoio);font-size:10px;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.mw-table-dense td{padding:7px 9px;border-bottom:1px solid var(--mw-linha);vertical-align:middle}
.mw-table-dense .n{text-align:right;font-family:var(--mw-mono);font-variant-numeric:tabular-nums}
.mw-queue,.mw-inspector,.mw-gate-list{border:1px solid var(--mw-borda);background:var(--mw-card)}
.mw-queue{overflow:auto}.mw-inspector{padding:14px}.mw-gate-list{display:grid}
.mw-gate-list>*{padding:9px 11px;border-bottom:1px solid var(--mw-linha)}
.mw-gate-list>*:last-child{border-bottom:0}

@media(max-width:700px){
  .mw-appbar{position:static;align-items:flex-start;flex-wrap:wrap;padding:9px 12px;gap:7px}
  .mw-toolbar{width:100%;justify-content:flex-start;gap:8px}
  .mw-operator,.mw-theme-label{display:none}
  .mw-company{margin-left:auto}.mw-company select{max-width:160px}
  .mw-gnav{top:0;padding:0 12px}.mw-gnav-modules{padding-left:10px}
  .mw-workspace{padding:16px 12px 36px}
  .mw-table-dense{min-width:620px}
}
@media(pointer:coarse){
  .mw-bt,.mw-bt-sec,.mw-filtros input,.mw-filtros select,
  .mw-gnav-item,.mw-gnav-modules,.mw-theme-toggle,.mw-company select{min-height:44px}
}


/* QA 2026-08-30: contencao responsiva da casca e das tabelas densas. */
.mw-gnav{min-width:0;max-width:100%;overflow:hidden}
.mw-gnav-track{width:100%;max-width:100%}
.mw-toolbar{flex-wrap:wrap}
.mw-workspace,.mw-workspace>*,
.mw-workspace section{min-width:0;max-width:100%}
.mw-tb-wrap{width:100%;max-width:100%;min-width:0;overflow-x:auto}
.mw-filterbar label{flex:0 1 240px;min-width:0;max-width:100%}
.mw-filterbar input,.mw-filterbar select{width:100%;min-width:0;max-width:100%}
@media(max-width:700px){
  .mw-filterbar label{flex-basis:100%;width:100%}
}

.mw-scroll,.mw-queue{width:100%;max-width:100%;min-width:0;overflow-x:auto}