/* ============================================================
   Monitor de Processos ERP Senior — mockup de apresentação
   Direção: "quadro de expedição" — console de operações plano,
   régua fina, tipografia de máquina para tudo que é dado.
   ============================================================ */

:root {
  color-scheme: light;

  --plane:        #e8edf0;
  --surface:      #ffffff;
  --surface-2:    #f3f7f8;
  --surface-3:    #e2e9ed;
  --line:         #d2dae0;
  --line-2:       #b6c2ca;

  --ink-1:        #10171b;
  --ink-2:        #4a565e;
  --ink-3:        #6b7780;

  --accent:       #0a6e8a;
  --accent-ink:   #075467;
  --accent-wash:  #e0eff4;

  --good:    #0ca30c;  --good-ink:    #036803;  --good-wash:    #e2f5e2;
  --warn:    #fab219;  --warn-ink:    #8a5a00;  --warn-wash:    #fdf1d8;
  --serious: #ec835a;  --serious-ink: #a34a1e;  --serious-wash: #fbe9e1;
  --crit:    #d03b3b;  --crit-ink:    #a82a2a;  --crit-wash:    #fbe4e4;

  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;
  --s4: #eda100;  --s5: #e87ba4;  --s6: #008300;

  --grid:  #e6ebee;
  --axis:  #c3ccd2;

  --font-ui:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Mono",
               "Roboto Mono", Consolas, "Liberation Mono", monospace;

  --r:    3px;
  --r-lg: 5px;
  --rail: 250px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane:     #0b1013;
    --surface:   #141b1f;
    --surface-2: #1a2429;
    --surface-3: #222e35;
    --line:      #28343b;
    --line-2:    #3b4a53;

    --ink-1:     #eef3f6;
    --ink-2:     #a7b4bd;
    --ink-3:     #7d8b95;

    --accent:      #4fbcdd;
    --accent-ink:  #7fd2ec;
    --accent-wash: #0e2c36;

    --good-ink:    #3fce3f;  --good-wash:    #102c12;
    --warn-ink:    #fab219;  --warn-wash:    #33280a;
    --serious-ink: #f0a184;  --serious-wash: #332016;
    --crit-ink:    #ff9a9a;  --crit-wash:    #351718;

    --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;
    --s4: #c98500;  --s5: #d55181;  --s6: #008300;

    --grid: #232f36;
    --axis: #3b4a53;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:     #0b1013;
  --surface:   #141b1f;
  --surface-2: #1a2429;
  --surface-3: #222e35;
  --line:      #28343b;
  --line-2:    #3b4a53;

  --ink-1:     #eef3f6;
  --ink-2:     #a7b4bd;
  --ink-3:     #7d8b95;

  --accent:      #4fbcdd;
  --accent-ink:  #7fd2ec;
  --accent-wash: #0e2c36;

  --good-ink:    #3fce3f;  --good-wash:    #102c12;
  --warn-ink:    #fab219;  --warn-wash:    #33280a;
  --serious-ink: #f0a184;  --serious-wash: #332016;
  --crit-ink:    #ff9a9a;  --crit-wash:    #351718;

  --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;
  --s4: #c98500;  --s5: #d55181;  --s6: #008300;

  --grid: #232f36;
  --axis: #3b4a53;
}

:root[data-theme="light"] {
  color-scheme: light;
  --plane:     #e8edf0;
  --surface:   #ffffff;
  --surface-2: #f3f7f8;
  --surface-3: #e2e9ed;
  --line:      #d2dae0;
  --line-2:    #b6c2ca;
  --ink-1:     #10171b;
  --ink-2:     #4a565e;
  --ink-3:     #6b7780;
  --accent:      #0a6e8a;
  --accent-ink:  #075467;
  --accent-wash: #e0eff4;
  --good-ink:    #036803;  --good-wash:    #e2f5e2;
  --warn-ink:    #8a5a00;  --warn-wash:    #fdf1d8;
  --serious-ink: #a34a1e;  --serious-wash: #fbe9e1;
  --crit-ink:    #a82a2a;  --crit-wash:    #fbe4e4;
  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;
  --s4: #eda100;  --s5: #e87ba4;  --s6: #008300;
  --grid: #e6ebee;
  --axis: #c3ccd2;
}

/* ---------------------------------------------------------- base */

.mpx {
  background: var(--plane);
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.mpx *,
.mpx *::before,
.mpx *::after { box-sizing: border-box; }

.mpx :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.mpx-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- shell */

.mpx-shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
}

.mpx-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 62px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.mpx-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mpx-brand-mark {
  width: 30px; height: 30px; flex: none;
  color: var(--accent);
}
.mpx-brand-name {
  font-size: 15px; font-weight: 650; letter-spacing: -0.012em;
  line-height: 1.15; white-space: nowrap;
}
.mpx-brand-sub {
  font-family: var(--font-data);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.4;
}

.mpx-top-meta {
  display: flex; align-items: center; gap: 0;
  margin-left: auto;
  min-width: 0;
}
.mpx-meta {
  padding: 0 18px;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.mpx-meta-k {
  display: block;
  font-family: var(--font-data);
  font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3);
}
.mpx-meta-v {
  display: block;
  font-family: var(--font-data);
  font-size: 12px; color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mpx-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--good-ink);
}
.mpx-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent);
}

.mpx-iconbtn {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-2);
  cursor: pointer;
  margin-left: 18px;
}
.mpx-iconbtn:hover { background: var(--surface-3); color: var(--ink-1); }
.mpx-iconbtn svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------- rail */

.mpx-rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 18px 0 24px;
  display: flex; flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 62px;
  align-self: start;
  max-height: calc(100vh - 62px);
  overflow-y: auto;
}

.mpx-rail-h {
  font-family: var(--font-data);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 20px 0 22px;
}

.mpx-navlist { display: flex; flex-direction: column; }

.mpx-nav {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  width: 100%;
  padding: 11px 18px 11px 22px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
  font-family: inherit;
}
.mpx-nav:hover { background: var(--surface-2); }
.mpx-nav svg { width: 20px; height: 20px; margin-top: 1px; color: var(--ink-3); }
.mpx-nav-t {
  display: block;
  font-size: 13.5px; font-weight: 550; color: var(--ink-1);
  line-height: 1.25;
}
.mpx-nav-d {
  display: block;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.3; margin-top: 2px;
}
.mpx-nav[aria-current="true"] {
  background: var(--accent-wash);
  border-left-color: var(--accent);
}
.mpx-nav[aria-current="true"] svg,
.mpx-nav[aria-current="true"] .mpx-nav-t { color: var(--accent-ink); }

.mpx-rail-foot {
  margin-top: auto;
  padding: 16px 20px 0 22px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.mpx-rail-note {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.45;
}

/* ---------------------------------------------------------- stage */

.mpx-stage {
  padding: 26px 30px 64px;
  min-width: 0;
}

.mpx-screen { display: none; }
.mpx-screen.is-on {
  display: block;
  animation: mpx-in 220ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes mpx-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mpx-screen.is-on { animation: none; }
  .mpx *, .mpx *::before { transition: none !important; }
}

.mpx-head { margin-bottom: 22px; max-width: 78ch; }
.mpx-eyebrow {
  font-family: var(--font-data);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 7px;
}
.mpx-h1 {
  font-size: 27px; font-weight: 640; letter-spacing: -0.022em;
  line-height: 1.12; margin: 0 0 8px;
  text-wrap: balance;
}
.mpx-lede { font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }

/* ---------------------------------------------------------- panel */

.mpx-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  min-width: 0;
}
.mpx-panel-h {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
}
.mpx-panel-t { font-size: 14px; font-weight: 620; letter-spacing: -0.008em; }
.mpx-panel-hint {
  font-family: var(--font-data);
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
}
.mpx-panel-act { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.mpx-panel-b { padding: 17px; }
.mpx-panel-b.is-flush { padding: 0; }

.mpx-grid { display: grid; gap: 16px; }
.mpx-mb { margin-bottom: 16px; }

/* ---------------------------------------------------------- tags */

.mpx-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-data);
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: 2px;
}
.mpx-tag.t-real  { color: var(--accent-ink); background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.mpx-tag.t-ilu   { color: var(--ink-2); background: var(--surface-3); border-color: var(--line-2); border-style: dashed; }
.mpx-tag.t-comp  { color: var(--warn-ink); background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

.mpx-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 560;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mpx-pill svg { width: 12px; height: 12px; flex: none; }
.mpx-pill.p-ok    { color: var(--good-ink);    background: var(--good-wash);    border-color: color-mix(in srgb, var(--good) 38%, transparent); }
.mpx-pill.p-warn  { color: var(--warn-ink);    background: var(--warn-wash);    border-color: color-mix(in srgb, var(--warn) 52%, transparent); }
.mpx-pill.p-ser   { color: var(--serious-ink); background: var(--serious-wash); border-color: color-mix(in srgb, var(--serious) 52%, transparent); }
.mpx-pill.p-crit  { color: var(--crit-ink);    background: var(--crit-wash);    border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.mpx-pill.p-mute  { color: var(--ink-2);       background: var(--surface-3);    border-color: var(--line-2); }
.mpx-pill.p-acc   { color: var(--accent-ink);  background: var(--accent-wash);  border-color: color-mix(in srgb, var(--accent) 34%, transparent); }

/* ---------------------------------------------------------- KPI */

.mpx-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.mpx-kpi {
  padding: 15px 17px 16px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin: -1px 0 0 -1px;
}
.mpx-kpi-k {
  font-family: var(--font-data);
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 7px;
}
.mpx-kpi-v {
  font-size: 30px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.1; margin-top: 3px;
  display: flex; align-items: baseline; gap: 5px;
}
.mpx-kpi-u { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.mpx-kpi-s { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; margin-top: 3px; }
.mpx-kpi.is-crit .mpx-kpi-v { color: var(--crit-ink); }
.mpx-kpi.is-good .mpx-kpi-v { color: var(--good-ink); }
.mpx-kpi.is-acc  .mpx-kpi-v { color: var(--accent-ink); }

/* ---------------------------------------------------------- spine */

.mpx-spine {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 4px 0 2px;
}
.mpx-st {
  flex: 1 1 0;
  min-width: 116px;
  position: relative;
  padding: 0 8px;
  display: flex; flex-direction: column; gap: 7px;
  text-align: left;
}
.mpx-st-rail {
  height: 3px;
  background: var(--surface-3);
  border-radius: 2px;
  position: relative;
}
.mpx-st-rail::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background: var(--stc, var(--accent));
  border-radius: 2px;
}
.mpx-st-n {
  font-family: var(--font-data);
  font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--ink-3);
}
.mpx-st-t {
  font-size: 12.5px; font-weight: 560; line-height: 1.25;
  color: var(--ink-1);
}
.mpx-st-v {
  font-family: var(--font-data);
  font-size: 17px; font-variant-numeric: tabular-nums;
  color: var(--ink-1); letter-spacing: -0.02em;
}
.mpx-st-v small { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; }
.mpx-st.is-alert .mpx-st-v { color: var(--crit-ink); }
.mpx-st.is-cond .mpx-st-rail {
  background: none;
  border: 1px dashed var(--line-2);
  height: 5px;
}
.mpx-st.is-cond .mpx-st-rail::after { opacity: .55; border-radius: 1px; }
.mpx-st.is-cond .mpx-st-t { color: var(--ink-2); }
.mpx-st-tag {
  font-family: var(--font-data); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

.mpx-flow { display: flex; flex-direction: column; gap: 11px; }
.mpx-flow-credito {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 13px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r);
  background: var(--accent-wash);
}
.mpx-flow-credito-t {
  font-size: 12.5px; font-weight: 620; color: var(--accent-ink);
  display: flex; align-items: center; gap: 7px;
}
.mpx-flow-credito-t svg { width: 14px; height: 14px; flex: none; }
.mpx-flow-credito-n { font-size: 11.5px; color: var(--ink-2); }
.mpx-flow-credito-v {
  margin-left: auto;
  font-family: var(--font-data); font-size: 14px; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.mpx-flow-exc {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.45;
  padding-top: 9px; border-top: 1px solid var(--line);
}
.mpx-flow-exc b { color: var(--ink-2); font-weight: 560; }

/* ---------------------------------------------------------- bars (HTML) */

.mpx-bars { display: flex; flex-direction: column; gap: 3px; }
.mpx-bar {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
}
.mpx-bar-l {
  font-size: 12.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mpx-bar-tr { position: relative; height: 15px; }
.mpx-bar-f {
  position: absolute; inset: 0 auto 0 0;
  min-width: 2px;
  background: var(--bc, var(--accent));
  border-radius: 0 4px 4px 0;
  width: var(--w, 0%);
  transition: width 620ms cubic-bezier(.2,.75,.25,1);
}
.mpx-bar-v {
  font-family: var(--font-data);
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  min-width: 62px; text-align: right;
}
.mpx-bar-v small { color: var(--ink-3); font-size: 10.5px; }

/* ---------------------------------------------------------- legend */

.mpx-legend {
  display: flex; flex-wrap: wrap; gap: 5px 18px;
  padding-top: 13px; margin-top: 13px;
  border-top: 1px solid var(--line);
}
.mpx-lg { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.mpx-lg-s { width: 11px; height: 11px; border-radius: 2px; flex: none; background: var(--c); }
.mpx-lg-v {
  font-family: var(--font-data); font-size: 11.5px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- tables */

.mpx-tw { overflow-x: auto; }
.mpx-tw.is-tall { max-height: 520px; overflow-y: auto; }

.mpx-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.mpx-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  font-family: var(--font-data);
  font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  text-align: left;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mpx-table td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-1);
}
.mpx-table tbody tr:last-child td { border-bottom: 0; }
.mpx-table tbody tr:hover td { background: var(--surface-2); }
.mpx-table .c-num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.mpx-table .c-mono {
  font-family: var(--font-data);
  font-size: 12px;
  white-space: nowrap;
}
.mpx-table .c-dim { color: var(--ink-3); }
.mpx-table .c-nw { white-space: nowrap; }
.mpx-table .c-wrap { white-space: normal; min-width: 240px; }
.mpx-table tr.is-crit td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.mpx-table tr.is-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.mpx-table tr.is-sel td { background: var(--accent-wash); }
.mpx-table tr.is-click { cursor: pointer; }

.mpx-cap {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.45;
  padding: 11px 17px;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------- controls */

.mpx-seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2px;
  gap: 2px;
}
.mpx-seg button {
  font: inherit;
  font-size: 12.5px;
  padding: 4px 12px;
  border: 0; border-radius: 2px;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.mpx-seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink-1);
  font-weight: 560;
  box-shadow: 0 0 0 1px var(--line-2);
}

.mpx-sel {
  font: inherit; font-size: 12.5px;
  padding: 5px 9px;
  background: var(--surface-2);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.mpx-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
}
.mpx-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ink-3); }
.mpx-note.is-ilu { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-wash); color: var(--warn-ink); }
.mpx-note.is-ilu svg { color: var(--warn-ink); }
/* ---------------------------------------------------------- chart svg */

.mpx-chart { width: 100%; height: auto; display: block; overflow: visible; }
.mpx-chart .g-line { stroke: var(--grid); stroke-width: 1; }
.mpx-chart .g-axis { stroke: var(--axis); stroke-width: 1; }
.mpx-chart .g-tick {
  fill: var(--ink-3); font-family: var(--font-data); font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.mpx-chart .g-xlab { fill: var(--ink-2); font-family: var(--font-data); font-size: 12.5px; }
.mpx-chart .g-xsub { fill: var(--ink-3); font-family: var(--font-data); font-size: 10px; letter-spacing: .06em; }
.mpx-chart .g-tot {
  fill: var(--ink-1); font-family: var(--font-data); font-size: 13px;
  font-variant-numeric: tabular-nums; text-anchor: middle;
}
.mpx-chart .g-seg { transition: opacity 140ms ease; }
.mpx-chart .g-hit { fill: transparent; cursor: pointer; }
.mpx-chart.is-dim .g-seg { opacity: .32; }
.mpx-chart.is-dim .g-seg.is-hot { opacity: 1; }

.mpx-tip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
  padding: 9px 11px;
  font-size: 12px;
  color: var(--ink-1);
  min-width: 150px;
  opacity: 0;
  transition: opacity 110ms ease;
}
.mpx-tip.is-on { opacity: 1; }
.mpx-tip-h {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.mpx-tip-r { display: flex; align-items: center; gap: 8px; padding: 1.5px 0; }
.mpx-tip-s { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--c); }
.mpx-tip-n { margin-left: auto; font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- timeline */

.mpx-tl { display: flex; flex-direction: column; }
.mpx-tl-node {
  display: grid;
  grid-template-columns: 128px 26px minmax(0, 1fr);
  gap: 0 16px;
  min-height: 62px;
}
.mpx-tl-when {
  text-align: right;
  padding: 14px 0 10px;
}
.mpx-tl-t {
  font-family: var(--font-data); font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--ink-1);
  letter-spacing: -0.01em;
}
.mpx-tl-d { font-family: var(--font-data); font-size: 10.5px; color: var(--ink-3); }
.mpx-tl-gap {
  font-family: var(--font-data); font-size: 10px; color: var(--ink-3);
  letter-spacing: .06em; margin-top: 5px;
}
.mpx-tl-axis { position: relative; display: flex; justify-content: center; }
.mpx-tl-axis::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--line);
}
.mpx-tl-node:first-child .mpx-tl-axis::before { top: 20px; }
.mpx-tl-node:last-child .mpx-tl-axis::before { bottom: calc(100% - 20px); }
.mpx-tl-dot {
  position: relative; margin-top: 14px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--dc, var(--accent));
  flex: none;
}
.mpx-tl-body { padding: 10px 0 18px; min-width: 0; }
.mpx-tl-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 11px 13px;
}
.mpx-tl-card.is-hot { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-wash); }
.mpx-tl-card.is-slow { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-wash); }
.mpx-tl-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.mpx-tl-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.mpx-tl-svc { font-family: var(--font-data); font-size: 10.5px; color: var(--ink-3); }
.mpx-tl-msg { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }

.mpx-kv {
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  margin-top: 8px;
}
.mpx-kv-i { min-width: 0; }
.mpx-kv-k {
  font-family: var(--font-data); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); display: block;
}
.mpx-kv-v {
  font-family: var(--font-data); font-size: 12.5px; color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- phone / chat */

.mpx-phone {
  width: 100%; max-width: 372px;
  margin: 0 auto;
  border: 10px solid var(--line-2);
  border-radius: 30px;
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .16);
}
.mpx-ph-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 18px 4px;
  background: var(--surface-3);
  font-family: var(--font-data); font-size: 10.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mpx-ph-bar {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}
.mpx-ph-av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: none;
}
.mpx-ph-av svg { width: 18px; height: 18px; }
.mpx-ph-nm { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.mpx-ph-sb { font-size: 10.5px; color: var(--ink-3); }
.mpx-ph-body {
  padding: 12px 12px 16px;
  display: flex; flex-direction: column; gap: 9px;
  max-height: 620px; overflow-y: auto;
  background: var(--surface-2);
}
.mpx-ph-day {
  align-self: center;
  font-family: var(--font-data); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--surface-3);
  border-radius: 999px; padding: 3px 12px;
  margin: 4px 0;
}
.mpx-msg {
  max-width: 90%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px 10px 10px 2px;
  padding: 9px 11px 7px;
  font-size: 12.5px; line-height: 1.45;
  align-self: flex-start;
}
.mpx-msg.is-out {
  align-self: flex-end;
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px 10px 2px 10px;
}
.mpx-msg-t {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 660;
  padding-bottom: 5px; margin-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.mpx-msg-t svg { width: 14px; height: 14px; flex: none; }
.mpx-msg.a-crit .mpx-msg-t { color: var(--crit-ink); }
.mpx-msg.a-warn .mpx-msg-t { color: var(--warn-ink); }
.mpx-msg.a-acc  .mpx-msg-t { color: var(--accent-ink); }
.mpx-msg.a-crit { border-left: 3px solid var(--crit); }
.mpx-msg.a-warn { border-left: 3px solid var(--warn); }
.mpx-msg dl { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1px 9px; }
.mpx-msg dt {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 1px;
}
.mpx-msg dd { margin: 0; font-size: 12px; }
.mpx-msg dd.v-mono { font-family: var(--font-data); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mpx-msg-do {
  margin-top: 7px; padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2);
}
.mpx-msg-do b { color: var(--ink-1); font-weight: 620; }
.mpx-msg-time {
  display: block; text-align: right; margin-top: 4px;
  font-family: var(--font-data); font-size: 9.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- payload tree */

.mpx-tree { font-family: var(--font-data); font-size: 12.5px; }
.mpx-tree-g { margin-bottom: 4px; }
.mpx-tree-h {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.mpx-tree-h b { color: var(--ink-1); letter-spacing: .04em; }
.mpx-tree-h .mpx-count { margin-left: auto; color: var(--ink-3); }
.mpx-tree-rows { padding: 4px 0 4px 12px; border-left: 1px solid var(--line); margin-left: 10px; }
.mpx-tree-r {
  display: grid;
  grid-template-columns: minmax(96px, 160px) minmax(0, 1fr);
  gap: 4px 14px;
  padding: 3px 8px;
  border-radius: 2px;
}
.mpx-tree-r:hover { background: var(--surface-2); }
.mpx-tree-k { color: var(--accent-ink); }
.mpx-tree-v {
  color: var(--ink-1); font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.mpx-tree-v .biz {
  display: block;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-3);
  margin-top: 1px;
}
.mpx-tree-v.is-err { color: var(--crit-ink); white-space: pre-wrap; }
.mpx-tree-sub {
  font-size: 11px; color: var(--ink-3);
  padding: 3px 8px 6px;
}

.mpx-detail-h {
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mpx-detail-id {
  font-family: var(--font-data); font-size: 13px; color: var(--ink-1);
  word-break: break-all;
}
.mpx-empty {
  padding: 40px 20px; text-align: center;
  color: var(--ink-3); font-size: 13px;
}

/* ---------------------------------------------------------- config */

.mpx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mpx-field-k {
  font-family: var(--font-data); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.mpx-input {
  font-family: var(--font-data); font-size: 13px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.mpx-input:disabled { color: var(--ink-2); cursor: not-allowed; }
.mpx-field-h { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.mpx-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 15px 18px;
}
.mpx-radio {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 13px;
}
.mpx-radio.is-on {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 560;
}
.mpx-radio input { accent-color: var(--accent); }

.mpx-sw {
  width: 34px; height: 19px; border-radius: 999px;
  background: var(--line-2); position: relative; flex: none;
}
.mpx-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%; background: var(--surface);
}
.mpx-sw.is-on { background: var(--accent); }
.mpx-sw.is-on::after { left: auto; right: 2px; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .mpx-shell { grid-template-columns: minmax(0, 1fr); }
  .mpx-rail {
    position: static; max-height: none; border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row; align-items: center; gap: 0;
    overflow-x: auto; padding: 0;
  }
  .mpx-rail-h, .mpx-rail-foot { display: none; }
  .mpx-navlist { flex-direction: row; }
  .mpx-nav {
    grid-template-columns: 18px auto;
    border-left: 0; border-bottom: 3px solid transparent;
    padding: 10px 15px; gap: 8px; align-items: center;
  }
  .mpx-nav[aria-current="true"] { border-bottom-color: var(--accent); }
  .mpx-nav-d { display: none; }
  .mpx-stage { padding: 20px 18px 56px; }
}
@media (max-width: 860px) {
  .mpx-top { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 12px; }
  .mpx-top-meta { margin-left: 0; width: 100%; }
  .mpx-meta:first-child { padding-left: 0; border-left: 0; }
  .mpx-iconbtn { margin-left: auto; }
  .mpx-h1 { font-size: 23px; }
  .mpx-tl-node { grid-template-columns: 82px 22px minmax(0, 1fr); gap: 0 10px; }
}

/* ---------------------------------------------------------- tela 7: cards */

.mpx-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mpx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: inherit; font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.mpx-chip:hover { border-color: var(--line-2); color: var(--ink-1); }
.mpx-chip[aria-pressed="true"] {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-ink);
  font-weight: 560;
}
.mpx-chip-n {
  font-family: var(--font-data); font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.mpx-chip[aria-pressed="true"] .mpx-chip-n { color: var(--accent-ink); }
.mpx-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cd); flex: none; }

.mpx-busca {
  font: inherit; font-size: 13px;
  padding: 6px 12px;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-1);
}
.mpx-busca::placeholder { color: var(--ink-3); }

.mpx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 12px;
}
.mpx-card {
  font: inherit; color: inherit; text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  cursor: pointer;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.mpx-card:hover { border-color: var(--line-2); background: var(--surface-2); }
.mpx-card-stripe { height: 3px; background: var(--sc); flex: none; }
.mpx-card-b { padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 3px; }
.mpx-card-h { display: flex; align-items: flex-start; gap: 9px; }
.mpx-card-ref {
  font-family: var(--font-data); font-size: 13.5px; font-weight: 600;
  color: var(--ink-1); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1;
}
.mpx-card-sub {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mpx-card-cli {
  font-family: var(--font-data); font-size: 11px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mpx-card-v {
  font-size: 20px; font-weight: 600; letter-spacing: -0.022em;
  color: var(--ink-1); margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.mpx-card-v.is-none { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.mpx-card-foot {
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.mpx-card-et { font-size: 12px; color: var(--ink-1); font-weight: 550; }
.mpx-card-t {
  font-family: var(--font-data); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.mpx-mini { display: flex; gap: 3px; align-items: center; margin: 9px 0 7px; }
.mpx-mini span {
  flex: 1 1 0; height: 5px; border-radius: 2px;
  background: var(--surface-3);
}
.mpx-mini span.is-done { background: color-mix(in srgb, var(--mc) 55%, transparent); }
.mpx-mini span.is-now  { background: var(--mc); height: 9px; border-radius: 3px; }

.mpx-vazio {
  grid-column: 1 / -1;
  padding: 44px 20px; text-align: center;
  color: var(--ink-3); font-size: 13.5px;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
}

/* ---------------------------------------------------------- gaveta */

.mpx-bg {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(6, 12, 15, .52);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
}
.mpx-bg.is-on { opacity: 1; pointer-events: auto; }

.mpx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: min(640px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--line-2);
  transform: translateX(101%);
  transition: transform 240ms cubic-bezier(.2, .75, .25, 1);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .2);
}
.mpx-drawer.is-on { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mpx-drawer { transition: none; }
}
.mpx-drawer-h {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface-2);
}
.mpx-drawer-t {
  font-family: var(--font-data); font-size: 16px; font-weight: 620;
  letter-spacing: -0.015em; line-height: 1.2;
}
.mpx-drawer-s { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.mpx-drawer-b { padding: 16px 18px 28px; overflow-y: auto; flex: 1; }
.mpx-drawer-x {
  flex: none; margin-left: auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-2); cursor: pointer;
}
.mpx-drawer-x:hover { color: var(--ink-1); border-color: var(--line-2); }
.mpx-drawer-x svg { width: 15px; height: 15px; }

.mpx-tl-card.is-void {
  background: none;
  border-style: dashed;
  border-color: var(--line);
}
.mpx-tl-void {
  font-size: 12.5px; color: var(--ink-3); font-style: italic;
}
.mpx-tl-node.is-void .mpx-tl-when { opacity: .5; }

/* ------------------------------------------------- tabela TIPSER / alertas */

.mpx-table th.is-sort { cursor: pointer; user-select: none; }
.mpx-table th.is-sort:hover { color: var(--ink-1); }
.mpx-table th.is-sort[aria-sort="descending"]::after { content: " ↓"; color: var(--accent); }
.mpx-table th.is-sort[aria-sort="ascending"]::after  { content: " ↑"; color: var(--accent); }

.mpx-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-data); font-size: 9.5px;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px; white-space: nowrap;
  border: 1px solid transparent;
}
.mpx-flag.f-disc { color: var(--serious-ink); background: var(--serious-wash); border-color: color-mix(in srgb, var(--serious) 50%, transparent); }
.mpx-flag.f-par  { color: var(--warn-ink);    background: var(--warn-wash);    border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.mpx-flag.f-err  { color: var(--crit-ink);    background: var(--crit-wash);    border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.mpx-flag.f-ok   { color: var(--ink-3); }

.mpx-dot-fluxo {
  display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent); margin-right: 7px; vertical-align: 1px;
}
.mpx-dot-fluxo.d-cond { background: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.mpx-dot-fluxo.d-exc  { background: var(--serious); }
.mpx-dot-fluxo.d-cred { background: var(--s5); border-radius: 50%; }
.mpx-dot-fluxo.d-ruido { background: var(--line-2); }

tr.is-ruido td { opacity: .62; }

/* ------------------------------------------------------ estatísticas fase */

.mpx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.mpx-stat {
  padding: 11px 14px 12px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin: -1px 0 0 -1px;
  min-width: 0;
}
.mpx-stat-k {
  font-family: var(--font-data); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mpx-stat-v {
  font-family: var(--font-data); font-size: 17px; color: var(--ink-1);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 3px;
}
.mpx-stat-r {
  display: flex; gap: 10px; margin-top: 4px;
  font-family: var(--font-data); font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mpx-stat.is-slow { background: var(--warn-wash); }
.mpx-stat.is-slow .mpx-stat-v { color: var(--warn-ink); }

/* -------------------------------------------------- request / response */

.mpx-rr { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 12px; }
.mpx-rr-col { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 0; }
.mpx-rr-h {
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-data); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.mpx-rr-h b { color: var(--ink-1); letter-spacing: .05em; }
.mpx-rr-h .mpx-rr-tag { margin-left: auto; }
.mpx-rr-b { padding: 8px 4px 10px; }
.mpx-rr-col.is-req .mpx-rr-h { box-shadow: inset 3px 0 0 var(--s1); }
.mpx-rr-col.is-res .mpx-rr-h { box-shadow: inset 3px 0 0 var(--s3); }

.mpx-hit { background: color-mix(in srgb, var(--warn) 38%, transparent); border-radius: 2px; }

.mpx-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--accent-wash);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
}
.mpx-banner svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent-ink); }
.mpx-banner b { color: var(--accent-ink); }

/* --------------------------------------------------------- lista alertas */

.mpx-alist { display: flex; flex-direction: column; }
.mpx-al {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px; align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.mpx-alist .mpx-al:last-child { border-bottom: 0; }
.mpx-al-t { font-size: 13.5px; font-weight: 600; letter-spacing: -0.008em; }
.mpx-al-d { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.mpx-al-n {
  font-family: var(--font-data); font-size: 15px; color: var(--ink-1);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.mpx-al-n small { display: block; font-size: 10px; color: var(--ink-3); letter-spacing: .08em; }

/* ------------------------------------------------- fechamentos (reabertura) */
.mpx-fech-h {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; margin: 14px 0 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--serious);
  border-radius: var(--r);
}
.mpx-fech-n { font-size: 12.5px; font-weight: 620; color: var(--ink-1); }
.mpx-fech-r { font-family: var(--font-data); font-size: 11px; color: var(--ink-3); }
.mpx-fech-c {
  margin-left: auto;
  font-family: var(--font-data); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mpx-flag svg { width: 11px; height: 11px; }

/* --------------------------------------------- bifurcação da nota fiscal */
.mpx-bif { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; }
.mpx-bif-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-2);
}
.mpx-bif-t i {
  width: 12px; height: 1px; background: var(--line-2); flex: none;
  border-top: 1px dashed var(--line-2);
}
.mpx-bif-n { font-size: 10px; color: var(--ink-3); }

/* ------------------------------------------------------ bloco de rollback */
.mpx-rb {
  margin: 0 17px 15px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--serious) 45%, transparent);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--serious-wash);
}
.mpx-rb-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 640; color: var(--serious-ink);
  margin-bottom: 7px;
}
.mpx-rb-h svg { width: 15px; height: 15px; flex: none; }
.mpx-rb p { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.mpx-rb p b { color: var(--ink-1); }
.mpx-rb-p { margin-bottom: 0 !important; }
.mpx-rb-g { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mpx-rb-i {
  flex: 1 1 190px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 9px 12px;
  display: flex; flex-direction: column; gap: 1px;
}
.mpx-rb-k {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.mpx-rb-v {
  font-size: 24px; font-weight: 620; letter-spacing: -0.025em;
  color: var(--serious-ink); font-variant-numeric: tabular-nums;
}
.mpx-rb-s { font-size: 11px; color: var(--ink-3); line-height: 1.4; }

.mpx-kv-t {
  font-family: var(--font-data); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-ink);
  margin: 9px 0 1px; padding-top: 7px; border-top: 1px solid var(--line);
}
.mpx-kv-t:first-child { margin-top: 6px; }
/* cabeçalho da evidência de reconstrução — não é bloco de campos da chamada */
.mpx-recon-t {
  font-family: var(--font-data); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--serious-ink);
  margin: 9px 0 1px; padding-top: 7px; border-top: 1px dashed var(--line-2);
}
/* etapa remontada pelo monitor: o ERP não devolveu chave nenhuma aqui.
   Âmbar (mesma cor do rótulo "remontado pelo monitor"), não vermelho/laranja
   de --serious: reconstrução por evidência é uma nota de proveniência, não um
   problema — uma venda concluída com sucesso não pode parecer "em alerta"
   nas etapas finais só porque a chave foi remontada. Vermelho (--crit) fica
   reservado para veredito real de erro (e.v==='erro'), que é outra regra. */
.mpx-tl-card.is-recon {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  background: var(--warn-wash);
}

/* ------------------------------------------------------------- glossário */
.mpx-abbr {
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-3);
  cursor: help;
}
.mpx-abbr:hover { border-bottom-color: var(--accent); color: var(--accent-ink); }
th .mpx-abbr { border-bottom-color: var(--line-2); }

.mpx-gloss {
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 17px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.mpx-panel-b + .mpx-gloss, .mpx-tw + .mpx-gloss { border-top: 1px solid var(--line); }
.mpx-gloss-i {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 3px 12px;
  font-size: 11.5px; line-height: 1.45;
}
.mpx-gloss-k {
  font-family: var(--font-data); font-size: 10.5px;
  letter-spacing: .06em; color: var(--accent-ink); font-weight: 600;
  white-space: nowrap;
}
.mpx-gloss-v { color: var(--ink-2); }
.mpx-gloss-v b { color: var(--ink-1); font-weight: 600; }

.mpx-explica {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface-2);
}
.mpx-explica svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-ink); }
.mpx-explica-t { font-size: 12.5px; font-weight: 640; color: var(--ink-1); margin-bottom: 3px; }
.mpx-explica-d { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.mpx-explica-d b { color: var(--ink-1); }
.mpx-explica-e {
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line-2);
  font-size: 12px; color: var(--ink-2);
}
.mpx-explica-e .c-mono { font-size: 11.5px; }

.mpx-evid {
  font-size: 12px; line-height: 1.45; color: var(--ink-2);
  padding: 7px 9px; margin: 6px 0 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 2px;
}
.mpx-evid b { color: var(--ink-1); }
.mpx-evid-x { color: var(--ink-3); }
.mpx-corr {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  padding: 11px 13px; margin: 12px 0 0;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r);
}
.mpx-corr b { color: var(--ink-1); }
/* blocos narrativos da jornada — mesma caixa, cor de acento própria por assunto */
.mpx-narra {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  padding: 11px 13px; margin: 12px 0 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--nc, var(--accent));
  border-radius: var(--r);
}
.mpx-narra b { color: var(--ink-1); }
.mpx-narra .mpx-kv { margin-top: 9px; }

/* ==========================================================================
   P3.5 — login e telas de gestão.
   Nenhuma cor, fonte ou raio novo: tudo sai das variáveis já definidas
   acima. São 3 componentes que o mockup não tinha (sobreposição de login,
   seletor de escopo no cabeçalho e matriz de permissão); o resto das telas
   de gestão reusa .mpx-panel/.mpx-table/.mpx-field/.mpx-input.
   ========================================================================== */
.mpx-login {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--plane);
}
.mpx-login[hidden] { display: none; }
.mpx-login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 12%);
}
.mpx-login-erro {
  margin-top: 12px; font-size: 12.5px; line-height: 1.45;
  color: var(--crit-ink); background: var(--crit-wash);
  border: 1px solid color-mix(in srgb, var(--crit) 45%, transparent);
  border-radius: var(--r); padding: 9px 11px;
}
.mpx-login-erro[hidden] { display: none; }
.mpx-escopo { max-width: 260px; padding: 4px 7px; font-size: 12px; }
/* matriz usuário × empresa: caixas de seleção alinhadas na grade da tabela */
.mpx-acl { display: flex; align-items: center; justify-content: center; }
.mpx-acl input { accent-color: var(--accent); width: 15px; height: 15px; }
.mpx-chip[disabled] { opacity: .5; cursor: not-allowed; }