/* ============================================================
   Slate Mist — design system do MWOS (MW-OS)
   Fonte única dos tokens. Importar em todos os módulos:
     <link rel="stylesheet" href="/ds/slate-mist.css">
   Spec: docs.mwos.solo.ind.br → Design. 
   Grafite manda; a cor sussurra como névoa. Zero emoji.
   ============================================================ */
:root{
  /* marca — nome vive aqui (ADR 0015) */
  --brand-name:"MWOS";

  /* neutros — grafite (a base, 95% da tela) */
  --pagina:#FBFBFA;--card:#FFFFFF;--borda:#EAEAE7;--linha:#F1F1EF;--rule:#DBDAD4;
  --dica:#9A9990;--apoio:#66655D;--texto2:#3A3833;--tinta:#1C1B18;

  /* fluxo — acento de seção (tom fechado) */
  --se-cart:#3F6152;  /* pinho  · Vendas/Carteira */
  --se-roma:#5E5470;  /* ameixa · Romaneio       */
  --se-expe:#455A6E;  /* aço    · Expedição/Sala  */

  /* fluxo — aura pastel + borda por seção */
  --cart-nevoa:#F4F7F5;--cart-orla:#E4EDE8;
  --roma-nevoa:#F5F3F7;--roma-orla:#EAE6EF;
  --expe-nevoa:#F2F5F7;--expe-orla:#E3EAEF;

  /* triagem — estado (semáforo): tinta + pastel */
  --e-ok:#3F6152; --ok-nevoa:#F1F5F2; --ok-orla:#E0EAE4;
  --e-av:#8A6D3B; --av-nevoa:#F7F3EB; --av-orla:#EDE4D3;
  --e-pr:#6B6A64; --pr-nevoa:#F4F4F3; --pr-orla:#E7E7E4;
  --e-bl:#8C3B45; --bl-nevoa:#F7EEEF; --bl-orla:#EDDCDE;

  /* tabela */
  --th-fundo:#EDEDEA;
}

/* tipografia base */
body{background:var(--pagina);color:var(--tinta);
  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.1px}
.mono{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-variant-numeric:tabular-nums}
.sm-rule{height:1px;background:var(--rule);margin:24px 0}
.sm-cap{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--dica);margin:0 0 14px}

/* padrão de abertura: título + subtítulo storytelling */
.sm-title{font-size:22px;font-weight:600;letter-spacing:-.2px}
.sm-story{color:var(--apoio);font-size:13.5px;margin-top:5px}
.sm-story b{color:var(--texto2);font-weight:600}

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

/* CTA — largura fixa, cor da seção */
.sm-bt{display:inline-block;min-width:132px;text-align:center;border-radius:8px;
  padding:7px 14px;font-size:12px;font-weight:500;color:#fff;border:0;cursor:pointer}
.sm-bt.cart{background:var(--se-cart)}
.sm-bt.roma{background:var(--se-roma)}
.sm-bt.expe{background:var(--se-expe)}
.sm-bt:disabled{background:var(--borda);color:var(--dica)}

/* pílula de estado (triagem) — fundo pastel + tinta + ponto */
.sm-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--borda);
  background:var(--card);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:500;white-space:nowrap}
.sm-pill .d{width:7px;height:7px;border-radius:50%}
.sm-pill.ok{color:var(--e-ok);background:var(--ok-nevoa);border-color:var(--ok-orla)} .sm-pill.ok .d{background:var(--e-ok)}
.sm-pill.av{color:var(--e-av);background:var(--av-nevoa);border-color:var(--av-orla)} .sm-pill.av .d{background:var(--e-av)}
.sm-pill.pr{color:var(--e-pr);background:var(--pr-nevoa);border-color:var(--pr-orla)} .sm-pill.pr .d{background:var(--e-pr)}
.sm-pill.bl{color:var(--e-bl);background:var(--bl-nevoa);border-color:var(--bl-orla)} .sm-pill.bl .d{background:var(--e-bl)}

/* tabela — header cinza, número mono centralizado sob o título */
.sm-tb{width:100%;border-collapse:collapse;font-size:13px}
.sm-tb th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--apoio);
  font-weight:600;padding:11px 20px;background:var(--th-fundo);border-top:1px solid var(--borda);border-bottom:1px solid var(--rule)}
.sm-tb th.n{text-align:center}
.sm-tb td{padding:12px 20px;border-bottom:1px solid var(--linha)}
.sm-tb td.n{text-align:center;font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.sm-tb tbody tr:hover td{background:var(--pagina)}