/* ==========================================================================
   LÉXICO DE DADOS — peças visuais reutilizadas em hero, frentes, camada e painel
   .mono  texto monoespaçado          .id   identificador (CH-01, SKU)
   .ts    timestamp                   .tag  selo de status (.ok .alert .wait)
   .node-dot  pontinho de status (.live pulsa, .alert vermelho)
   .mark  marcador de seção "01 Título"
   .delta variação ▲/▼ (.dn = negativa)
   ========================================================================== */
.mono,.id,.ts,.tag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.id{font-size:var(--f-12);color:var(--text-3);letter-spacing:.01em}
.dark .id{color:var(--on-dark-3)}
.ts{font-size:var(--f-12);color:var(--text-3)}
.dark .ts{color:var(--on-dark-3)}

/* ---------- tag ---------- */
.tag{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
     padding:3px 7px;border-radius:4px;border:1px solid var(--border);color:var(--text-2);white-space:nowrap}
.dark .tag{border-color:var(--border-dark);color:var(--on-dark-2)}
.tag.ok{color:var(--interactive);border-color:var(--b-200);background:var(--b-50)}
.dark .tag.ok{color:var(--accent);border-color:rgba(92,153,242,.38);background:rgba(92,153,242,.11)}
.tag.alert{color:var(--danger);border-color:#F3C9C6;background:#FDF2F1}
.dark .tag.alert{color:var(--danger-dark);border-color:rgba(255,131,120,.32);background:rgba(255,131,120,.1)}
.tag.wait{color:var(--warn);border-color:#EADFBD;background:#FBF7EC}

/* ---------- node-dot ---------- */
.node-dot{width:6px;height:6px;border-radius:2px;background:var(--interactive);flex:none}
.dark .node-dot{background:var(--accent)}
.node-dot.live{animation:pulse 2.6s var(--e-out) infinite}
.node-dot.alert{background:var(--danger)}
.dark .node-dot.alert{background:var(--danger-dark)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(92,153,242,.36)}70%{box-shadow:0 0 0 7px rgba(92,153,242,0)}100%{box-shadow:0 0 0 0 rgba(92,153,242,0)}}

/* ---------- marcador de seção ---------- */
.mark{display:flex;align-items:baseline;gap:12px;font-size:var(--f-13);color:var(--text-3)}
.mark b{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:var(--f-12);color:var(--interactive)}
.dark .mark{color:var(--on-dark-3)}
.dark .mark b{color:var(--accent)}

/* ---------- delta ---------- */
.delta{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;
  font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);font-weight:600;
  background:var(--b-50);color:var(--interactive)}
.delta svg{width:9px;height:9px}
.dark .delta{background:rgba(92,153,242,.14);color:var(--accent)}
.delta.dn{background:#FDF2F1;color:var(--danger)}
.delta.dn svg{transform:rotate(180deg)}
.dark .delta.dn{background:rgba(255,131,120,.12);color:var(--danger-dark)}