/* ============================================================
   Emerald Dawn — design system COMERCIAL do MWOS (MW-OS)
   Fonte única dos tokens. Importar nos módulos que ele governa:
     <link rel="stylesheet" href="/ds/emerald-dawn.css">
   Governa: Gestão B2B (mwos-vendas) e Gestão B2C (mwos-vendas-b2c).
   Irmão do slate-mist (operacional/grafite) — este é claro + esmeralda.
   Índole: comercial, claro, luz. Esmeralda é o acento-assinatura
   OFICIAL (não mais provisório). Zero emoji; números em monospace.
   Valores extraídos verbatim da referência aprovada pelo CTO:
   app-pedidos-b2b (telas/*.html + templates/base.html), 12/07/2026.
   ============================================================ */
:root{
  /* marca — nome vive aqui (ADR 0017) */
  --brand-name:"MWOS";

  /* neutros — zinc (base clara, 95% da tela) */
  --pagina:#FAFAFA;--card:#FFFFFF;--borda:#E4E4E7;--rule:#D4D4D8;
  --dica:#A1A1AA;--apoio:#71717A;--texto2:#3F3F46;--tinta:#18181B;

  /* acento-assinatura — esmeralda (emerald) · OFICIAL */
  --v-nevoa:#ECFDF5;--v-orla:#A7F3D0;--v-acao:#059669;--v-hover:#047857;--v-tinta:#064E3B;

  /* âmbar — atenção / sinal */
  --a-nevoa:#FFFBEB;--a-orla:#FDE68A;--a-sinal:#F59E0B;--a-tinta:#78350F;

  /* rubi — alerta / bloqueio */
  --r-nevoa:#FFF1F2;--r-orla:#FECDD3;--r-alerta:#E11D48;--r-tinta:#881337;

  /* índigo — pago / programado (estado frio) */
  --i-nevoa:#EEF2FF;--i-orla:#C7D2FE;--i-gelo:#6366F1;--i-tinta:#312E81;

  /* tabela */
  --th-fundo:var(--card);

  /* --- COMPAT B2C (temporario): nomes legados -> paleta emerald-dawn.
     Remover no passo 4 apos rename dos templates (fonte unica, um nome). --- */
  --acento:   var(--v-acao);
  --ac-nevoa: var(--v-nevoa);
  --ac-orla:  var(--v-orla);
  --e-ok:     var(--v-acao);
  --ok-nevoa: var(--v-nevoa);
  --ok-orla:  var(--v-orla);
  --e-bl:     var(--r-alerta);
  --bl-nevoa: var(--r-nevoa);
  --bl-orla:  var(--r-orla);
  --linha:    var(--borda);
  --r-acao:   var(--r-alerta);   /* alias de nome */
  --th:       var(--th-fundo);   /* alias de nome */
}

/* tipografia base */
body{background:var(--pagina);color:var(--tinta);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.mono{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}

/* abertura de página: título + trilha */
h1.pagtit{font-size:23px;font-weight:650;margin:0 0 2px}
.crumb{color:var(--dica);font-size:12.5px;margin-bottom:14px}

/* KPI — número vivo em card */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:14px 16px}
.kpi .rot,.kpi .rotulo{color:var(--apoio);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.kpi .val,.kpi .valor{font-size:24px;font-weight:650;margin-top:3px}
.kpi .sub{color:var(--dica);font-size:12px;margin-top:1px}

/* pílula de estado (sentinela) — fundo pastel + tinta + orla */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;
  font-size:12.5px;white-space:nowrap;border:1px solid}
.pill.verde{background:var(--v-nevoa);border-color:var(--v-orla);color:var(--v-tinta)}
.pill.ambar{background:var(--a-nevoa);border-color:var(--a-orla);color:var(--a-tinta)}
.pill.rubi{background:var(--r-nevoa);border-color:var(--r-orla);color:var(--r-tinta)}
.pill.indigo{background:var(--i-nevoa);border-color:var(--i-orla);color:var(--i-tinta)}

/* tabela — header claro, número mono à direita, hover de linha */
table{border-collapse:collapse;width:100%;font-size:13px}
th{color:var(--apoio);font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-align:left;
  padding:9px 10px;border-bottom:1px solid var(--borda);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--borda);vertical-align:middle}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* CTA primário — esmeralda cheia */
.btn-enviar,.btn.go{border:0;color:#fff;background:var(--v-acao);font-weight:600;border-radius:10px;
  padding:12px;font-size:14.5px;cursor:pointer}
.btn-enviar:disabled,.btn.go:disabled{background:var(--borda);color:var(--dica);cursor:default}

/* filtros — input com foco esmeralda */
.filtros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.filtros select,.filtros input{border:1px solid var(--rule);border-radius:8px;padding:6px 8px;
  background:var(--card);color:var(--texto2);font-size:13px;max-width:180px}
.filtros input:focus{outline:3px solid var(--v-orla);border-color:var(--v-acao)}