/* ds.css — design system do console (tokens + componentes canônicos).
 *
 * Fonte: docs/design-system/ (contract) via skill dns-console-design-system.
 * Regras: sóbrio, sem neon, dark-first (light é override explícito), sem
 * estilo inline, sem framework. NÃO altere tokens nem a assinatura dos
 * componentes — o contrato vive no console-mockup.html.
 *
 * Substitui o css/style.css antigo (estilo "glow"/gradiente, fora do padrão)
 * nas telas do console do hub: index.html (login) e dashboard.html.
 */

/* ---------------- tokens (dark = base) ---------------- */
:root {
  color-scheme: dark;
  --bg: #0a0e13;
  --bg-vignette: radial-gradient(1100px 520px at 82% -8%, rgba(28, 184, 148, .07), transparent 60%);
  --surface: #111820;
  --surface-raised: #161e27;
  --surface-sunken: #0c1218;
  --border: rgba(158, 173, 190, .14);
  --border-strong: rgba(158, 173, 190, .26);
  --text: #eef2f5;
  --text-muted: #8b98a6;
  --text-faint: #5b6672;
  --accent: #1cb894;
  --accent-strong: #37d9b0;
  --accent-soft: rgba(28, 184, 148, .14);
  --accent-ink: #04211a;
  --success: #34c77b;
  --success-soft: rgba(52, 199, 123, .14);
  --warning: #e0a53c;
  --warning-soft: rgba(224, 165, 60, .14);
  --sev-high: #e2793a;
  --sev-high-soft: rgba(226, 121, 58, .14);
  --critical: #e5555f;
  --critical-soft: rgba(229, 85, 95, .14);
  --info: #4a9fd9;
  --info-soft: rgba(74, 159, 217, .14);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .4);
  --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, .55);
  --font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --surface-2: rgba(255, 255, 255, .03);
  --overlay: rgba(4, 7, 10, .6);
  --bar-track: rgba(255, 255, 255, .08);
  --bar-track-strong: rgba(255, 255, 255, .14);
  --dot-off: rgba(255, 255, 255, .22);
  --success-glow: rgba(34, 197, 94, .55);
  --success-glow-zero: rgba(52, 199, 123, 0);
  --success-glow-ring: rgba(52, 199, 123, .35);
}

/* light — override explícito, espelha o dark 1:1 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f6;
  --bg-vignette: radial-gradient(1100px 520px at 82% -8%, rgba(15, 150, 120, .06), transparent 60%);
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eef1f2;
  --border: rgba(16, 24, 32, .10);
  --border-strong: rgba(16, 24, 32, .20);
  --text: #0f1620;
  --text-muted: #57636f;
  --text-faint: #8993a0;
  --accent: #0f9678;
  --accent-strong: #0c7c63;
  --accent-soft: rgba(15, 150, 120, .10);
  --accent-ink: #eafbf5;
  --success: #1f9d5c;
  --success-soft: rgba(31, 157, 92, .10);
  --warning: #a5701d;
  --warning-soft: rgba(165, 112, 29, .10);
  --sev-high: #b85a24;
  --sev-high-soft: rgba(184, 90, 36, .10);
  --critical: #c23342;
  --critical-soft: rgba(194, 51, 66, .10);
  --info: #2f7fb8;
  --info-soft: rgba(47, 127, 184, .10);
  --shadow-1: 0 1px 0 rgba(16, 24, 32, .05);
  --shadow-2: 0 10px 30px -14px rgba(16, 24, 32, .18);
  --surface-2: rgba(13, 27, 38, .03);
  --overlay: rgba(15, 23, 32, .45);
  --bar-track: rgba(13, 27, 38, .10);
  --bar-track-strong: rgba(13, 27, 38, .16);
  --dot-off: rgba(13, 27, 38, .25);
  --success-glow: rgba(34, 197, 94, .45);
  --success-glow-zero: rgba(52, 199, 123, 0);
  --success-glow-ring: rgba(52, 199, 123, .30);
}

/* ---------------- reset / base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg) var(--bg-vignette);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-ui); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.icon { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------------- layout ---------------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 60px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; padding-right: 14px; border-right: 1px solid var(--border); height: 100%; }
.brand .icon { width: 20px; height: 20px; color: var(--accent-strong); }
.brand strong { font-size: 14px; letter-spacing: .01em; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.content { flex: 1; padding: clamp(20px, 2.2vw, 36px) clamp(20px, 3vw, 52px) 48px; }
/* `.view` (largura máxima do conteúdo) é declarado UMA vez só, no bloco do
   rail nav mais abaixo. Este bloco aqui é o layout de topbar de antes do rail
   nav: a declaração que existia neste ponto (1400px) só vencia por ordem de
   arquivo e mascarava a do rail nav — duas fontes de verdade para a mesma
   medida. Guard: console_layout_test.go. */
.view.is-active { display: block; }
.view-head { margin-bottom: 22px; }
.view-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.view-head p { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; max-width: 66ch; }

/* quem está logado, no topo */
.who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.who .mono { color: var(--text); }

/* ---------------- botões ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn .icon { width: 14px; height: 14px; }
.btn:hover { background: var(--surface-raised); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface); color: var(--text); }
.btn--danger { background: var(--critical-soft); border-color: transparent; color: var(--critical); }
.btn--sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn--full { width: 100%; }
.btn--lg { height: 42px; font-size: 14px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-md); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--text-muted);
}
.icon-btn:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.icon-btn .icon { width: 17px; height: 17px; }

/* ---------------- pills ---------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap;
}
.pill--critical { background: var(--critical-soft); color: var(--critical); }
.pill--high { background: var(--sev-high-soft); color: var(--sev-high); }
.pill--medium { background: var(--warning-soft); color: var(--warning); }
.pill--low { background: var(--info-soft); color: var(--info); }
.pill--success { background: var(--success-soft); color: var(--success); }
.pill--accent { background: var(--accent-soft); color: var(--accent-strong); }
.pill--neutral { background: var(--surface-raised); color: var(--text-muted); border: 1px solid var(--border); }
/* Estado do Sysmon na página da máquina: o motivo vem do agente e pode ser
   longo (erro de download) — quebra linha e mantém a caixa original. */
.pill.mq-sysmon { height: auto; min-height: 22px; padding: 3px 9px; border-radius: 10px; white-space: normal; text-transform: none; overflow-wrap: anywhere; }
/* O display:inline-flex acima vence o [hidden] do navegador: sem isto o selo
   "Isolado" da página da máquina aparecia em TODA máquina (10/10). */
.pill[hidden] { display: none; }
/* Idem para .alert (display:flex): sem isto o alerta com [hidden] continua visível. */
.alert[hidden] { display: none; }
/* Tags da página da máquina: pills na linha do hostname. */
.mq-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.mq-tags:empty { display: none; }

/* ---------------- painéis ---------------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.panel__head h2 { font-size: 14.5px; font-weight: 700; }
.panel__head-meta { font-size: 12px; color: var(--text-faint); }
.panel-body { padding: 20px; }
.panel + .panel { margin-top: 16px; }
.panel__actions { display: flex; gap: 8px; align-items: center; }

/* ---------------- listas (det-row) ---------------- */
.det-list { max-height: 560px; overflow-y: auto; }
.det-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 18px; border-bottom: 1px solid var(--border); cursor: pointer;
  background: transparent; border-left: 2.5px solid transparent; width: 100%; text-align: left;
  transition: background .12s var(--ease);
}
.det-row:last-child { border-bottom: 0; }
.det-row:hover { background: var(--surface-raised); }
.det-row[aria-selected="true"] { background: var(--accent-soft); border-left-color: var(--accent-strong); }
.det-row__top { display: flex; align-items: center; gap: 8px; }
.det-row__title { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.det-row__meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-faint); padding-left: 2px; align-items: center; }
.det-row__meta .mono { color: var(--text-muted); }
.det-row__meta .meta-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); }

/* ---------------- tabelas ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  position: sticky; top: 0; background: var(--surface);
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); padding: 11px 14px; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s var(--ease); }
tbody tr:hover { background: var(--surface-raised); }
td.domain { color: var(--text); font-family: var(--font-mono); font-size: 12px; }
td.num { font-family: var(--font-mono); text-align: right; }
/* Dados mono (data/hora, IP, UID) NÃO quebram linha: sem isto a célula de data
   mede 59px em duas linhas ("15/09/26," / "23:32") e desalinha a linha inteira.
   .mono fora de td (rótulo, cabeçalho) pode quebrar normalmente. */
td.mono { white-space: nowrap; }
td.actions { text-align: right; white-space: nowrap; }
/* Separação entre ações da mesma linha. Medido: sem isto "Desativar" terminava
   em 1121px e "Remover" começava em 1121px — ação reversível e ação destrutiva
   encostadas, sem nenhum intervalo, convidando a clique errado. */
td.actions button + button { margin-left: 6px; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-faint); }

/* coluna que absorve a sobra + metadados encolhendo ao conteúdo */
table td.grow, table th.grow { width: 100%; }
table td.shrink, table th.shrink { width: 1%; }

/* ---------------- campos ---------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.field small { font-size: 11px; color: var(--text-faint); }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="date"], .field select, .field textarea {
  height: 38px; padding: 0 12px; background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text); outline: 0; font-size: 13px; width: 100%;
}
.field textarea { height: auto; padding: 10px 12px; resize: vertical; font-family: var(--font-mono); font-size: 12.5px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
/* ---------------- marcar/desmarcar ----------------
   O checkbox nativo vem do UA: caixa cinza-clara (e azul do Windows quando
   marcado, --accent azul #0078D4) num console que e' teal sobre #111820. Aqui
   ele passa a usar os mesmos tokens dos outros campos, no vocabulario do
   design system (docs/design-system/design-system.html, secao Forms: o
   componente .check-row poe rotulo e caixa na MESMA linha; antes o .field
   empilhava a caixa embaixo do rotulo). */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: 0 0 16px; margin: 0; padding: 0;
  background: var(--surface-sunken); border: 1px solid var(--border-strong);
  border-radius: 4px; cursor: pointer; position: relative;
  transition: background-color .12s ease, border-color .12s ease;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
  border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent-ink);
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }
.check-row {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.check-row span { font-size: 13px; font-weight: 500; color: var(--text); }
.check-row:last-child { margin-bottom: 0; }

.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* ---------------- modal ---------------- */
.modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 250; padding: 20px; }
.modal-overlay.is-open { display: flex; }
/* O modal do terminal sai do centro quando o operador o arrasta: o overlay
   deixa de centralizar e a caixa passa a obedecer a left/top. So vale para
   o modal do terminal (classe modal--terminal) -- os outros continuam no centro. */
.modal-overlay.modal--solta { justify-content: flex-start; align-items: flex-start; }
.modal-overlay.modal--solta .modal { margin: 0; }
/* JANELA FLUTUANTE (a pane do terminal do tenant). Com a pane aberta o overlay
   NAO e' veu: ele e' a moldura invisivel da janela -- sem escurecer e SEM capturar
   o clique, para o operador trabalhar no site atras da sessao (pedido do usuario,
   21/09). O escopo e' a PANE NO CORPO do modal (#modalCorpo .term) -- a mesma
   pergunta que o JS ja' faz em painelDoTerminalNaFrente -- e nao as marcas
   modal--terminal/modal--solta: a primeira fica no elemento e sobrevive a abrir
   outro modal por cima (ali o veu TEM de voltar, senao o dialogo nao bloqueia
   nada), e a segunda so existe DEPOIS do primeiro arrasto -- com ela a janela
   recem-aberta continuaria engolindo o clique no site. O :has() responde isso no
   proprio CSS, sem estado paralelo para dessincronizar; navegador sem :has()
   descarta a regra e cai no veu de sempre (nada quebra). */
.modal-overlay:has(#modalCorpo .term) { background: transparent; pointer-events: none; }
/* A janela continua clicavel: sem isto a pane inteira ficaria inerte (arrasto,
   alca, botoes, campo de comando). */
.modal-overlay:has(#modalCorpo .term) .modal { pointer-events: auto; }
.modal { width: 460px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal__head h3 { font-size: 14.5px; font-weight: 700; }
.modal__body { padding: 18px; font-size: 13px; color: var(--text-muted); line-height: 1.6; overflow-y: auto; }
/* QR do segundo fator (enrollment). O SVG da lib já pinta o próprio fundo de
   branco (quiet zone incluída), que é o que o leitor do celular precisa num
   console dark — aqui só o tamanho: 208px cabe no modal de 460px. */
.mfa-qr { margin: 12px 0; }
.mfa-qr svg { display: block; width: 208px; height: 208px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
.modal__foot .btn--danger { margin-right: auto; }

/* ---------------- estados ---------------- */
.empty-state { padding: 40px; text-align: center; color: var(--text-faint); }
/* LOADERS — spinner (contrato: docs/design-system/design-system.html §Loaders) */
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--border-strong); border-top-color: var(--accent); animation: spin .7s linear infinite; flex-shrink: 0; }
.spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.spinner--lg { width: 30px; height: 30px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.4s; } }
/* spinner dentro de célula de tabela (.empty-state é td — o span precisa de display próprio) */
.empty-state--loading .spinner { display: inline-block; vertical-align: middle; margin-right: 8px; }
.alert {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: var(--radius-md); font-size: 12.5px; margin-bottom: 14px;
  border: 1px solid transparent;
}
.alert .icon { width: 15px; height: 15px; margin-top: 1px; }
.alert--critical { background: var(--critical-soft); color: var(--critical); }
.alert--success { background: var(--success-soft); color: var(--success); }
.alert--info { background: var(--info-soft); color: var(--info); }

/* ---------------- específicos do console do hub ---------------- */
/* seletor de tenant no topbar (o operador escolhe; usuário de tenant é fixo) */
.tenant-field { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.tenant-field > span { font-size: 12px; color: var(--text-faint); }
.tenant-field input { height: 32px; width: 190px; }
.tenant-field input[readonly] { color: var(--text-muted); background: transparent; border-color: transparent; }

.panel__note { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; }

/* ---------------- login (tela de entrada) ---------------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-mark {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--accent-strong);
}
.auth-mark .icon { width: 24px; height: 24px; }
.auth-head h1 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.auth-head p { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.auth-card .panel-body { padding: 22px; }
/* Rodapé do login: aviso de segurança, texto que o usuário PRECISA ler.
   --text-faint mede 3,3:1 sobre --bg (reprova AA para 11,5px); --text-muted mede
   6,6:1. O eyebrow acima continua faint: é o padrão do contrato (decorativo). */
.auth-foot { text-align: center; margin-top: 16px; font-size: 11.5px; color: var(--text-muted); }
.auth-submit { margin-top: 6px; }

/* ---------------- saude da frota / tags ---------------- */
.stat-cards { display: flex; gap: 1rem; flex-wrap: wrap; }
.stat-card { display: flex; flex-direction: column; gap: .25rem; padding: .75rem 1rem; }
.stat-card strong { font-size: 1.5rem; font-family: 'IBM Plex Mono', monospace; }
.tag-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
/* td.tags-cell: NÃO usar display:flex numa <td> — perde o vertical-align
   table-cell e a coluna fica desalinhada verticalmente das demais (18/09).
   table-cell + middle mantém a linha alinhada; os chips já são inline-flex. */
td.tags-cell { display: table-cell; vertical-align: middle; }
td.tags-cell .tags-inline { display: inline-flex; gap: .35rem; flex-wrap: wrap; align-items: center; vertical-align: middle; }
.tag-chip { display: inline-flex; align-items: center; gap: .35rem; }
.tag-chip__remove { background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; color: inherit; }

/* resumo compacto de tags na tabela de agentes (1 chip por linha) */
.tag-so {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-muted);
  font-family: var(--font-mono);
}
.tag-so--eol { background: var(--critical-soft); color: var(--critical); border-color: transparent; }
.tag-more { font-size: 11px; color: var(--text-faint); margin-left: 5px; cursor: default; }
.tag-so--ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.tag-so--eol { background: var(--critical-soft); color: var(--critical); border-color: transparent; }

/* linha de agente clicável */
.agente-row { cursor: pointer; }
/* Sem underline no nome da máquina (o pontilhado "tinha cara de link quebrado");
   a affordance de clicável fica no hover: cor vai para o verde do sistema. */
.agente-row .host-link { border-bottom: 0; }
.agente-row:hover .host-link { color: var(--accent-strong); }

/* página da máquina */
.field-select, .field-input {
  height: 36px; padding: 0 10px; background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); outline: 0; font-size: 12.5px; width: 100%;
}
.field-select:focus, .field-input:focus { border-color: var(--accent); }
/* textarea com .field-input: a altura vem de rows= (o height: 36px acima é de input de uma linha) */
textarea.field-input { height: auto; padding: 8px 10px; resize: vertical; }
.tiles-4 { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 14px; margin-bottom: 22px; align-items: start; }
@media (max-width: 1100px) { .tiles-4 { grid-template-columns: 1fr; } }
.tag-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tag-lista__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-sunken); font-size: 12.5px; color: var(--text);
}
.auth-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }

/* ============================================================
   RAIL NAV + WORKSPACE (console-mockup.html layout)
   ============================================================ */
.shell.rail-shell { flex-direction: row; min-height: 100vh; }
.railnav {
  width: 72px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 16px 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh;
}
.railnav__logo {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-strong);
  margin-bottom: 14px;
}
.railnav__logo .icon { width: 20px; height: 20px; }
.railnav__group { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; }
.railnav__spacer { flex: 1; }
.rail-btn {
  position: relative;
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.rail-btn .icon { width: 19px; height: 19px; }
.rail-btn:hover { background: var(--surface-raised); color: var(--text); }
.rail-btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
.rail-btn[aria-current="page"]::before {
  content: ""; position: absolute; left: -9px; top: 50%; translate: 0 -50%;
  width: 3px; height: 20px; border-radius: 2px; background: var(--accent-strong);
}
.rail-tip {
  position: absolute; left: 60px; top: 50%; translate: 0 -50%;
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  padding: 6px 10px; border-radius: var(--radius-sm); font-size: 12px;
  white-space: nowrap; box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transition: opacity .12s var(--ease);
  z-index: 40; color: var(--text);
}
.rail-btn:hover .rail-tip, .rail-btn:focus-visible .rail-tip { opacity: 1; }
.railnav__status {
  width: 12px; height: 12px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft); margin-top: 10px;
}
.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.workspace .topbar {
  height: 60px; flex-shrink: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(8px);
}
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.crumb strong { color: var(--text); font-weight: 700; }
.crumb .icon { width: 13px; height: 13px; color: var(--text-faint); }
.topbar__spacer { flex: 1; }
.viewport { flex: 1; padding: clamp(20px, 2.2vw, 36px) clamp(20px, 3vw, 52px) 48px; }
/* 1920px é o valor do template: console-mockup.html do design-system e console
   do agente (internal/api/web/css/styles.css). Aqui esteve 1600px desde o
   680ab64 — no tenant isso aparecia como margem a mais entre o menu e o
   conteúdo e como limite direito fora do lugar. Guard: console_layout_test.go. */
.view { display: none; max-width: 1920px; width: 100%; margin: 0 auto; }
.view.is-active { display: block; }
.view-head { margin-bottom: 22px; }
.view-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.view-head p { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; max-width: 66ch; }

/* ============================================================
   TILES (linha de resumo do Overview)
   ============================================================ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; margin-bottom: 22px; }

/* card de instalador no view-head do overview (canto superior direito) */
.overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.installer-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-top: 2.5px solid var(--accent);
  padding: 14px 16px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  min-width: 250px;
}
.installer-card__eyebrow {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-strong);
}
.installer-card__eyebrow .icon { width: 13px; height: 13px; }
.installer-card__text { font-size: 12px; color: var(--text-muted); }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 18px 14px; box-shadow: var(--shadow-1);
  border-top: 2.5px solid var(--tile-c, var(--border-strong));
  display: flex; flex-direction: column; gap: 12px;
}
/* Cor do card por ASSUNTO (não por gravidade): Risco = critical (vermelho), Frota e
   máquina = info (azul), Telemetria/DNS = success (verde), Remediação/postura =
   warning (amarelo). O guard TestDashboardAssets_CorDoCardPorAssunto cobra o mapa. */
.tile--success { --tile-c: var(--success); }
.tile--warning { --tile-c: var(--warning); }
.tile--critical { --tile-c: var(--critical); }
.tile--info { --tile-c: var(--info); }
.tile--accent { --tile-c: var(--accent); }

/* Cor por ASSUNTO nas telas (estende o mapa dos tiles, acima): data-assunto na
   <section class="view"> e no botão do rail. risco = vermelho, frota (agentes e
   máquina) = azul, telemetria = verde, remediação (patches e comandos) = amarelo.
   Visão geral e Implantação não têm assunto único e ficam neutras.
   O ÍCONE do menu principal NÃO é colorido por assunto (decisão do usuário,
   23/09): ele mantém a cor padrão em repouso e a cor do item ativo. O que leva
   o assunto no rail é o fundo do item ativo e a barra do ::before.
   Guard: TestDashboardAssets_CorPorAssuntoNasTelas. */
[data-assunto="risco"] { --assunto-c: var(--critical); }
[data-assunto="frota"] { --assunto-c: var(--info); }
[data-assunto="telemetria"] { --assunto-c: var(--success); }
[data-assunto="remediacao"] { --assunto-c: var(--warning); }
.view[data-assunto] .panel { border-top: 2.5px solid var(--assunto-c); }
.rail-btn[data-assunto][aria-current="page"] { background: color-mix(in srgb, var(--assunto-c) 14%, transparent); }
.rail-btn[data-assunto][aria-current="page"]::before { background: var(--assunto-c); }
.tile__top { display: flex; justify-content: space-between; align-items: flex-start; }
.tile__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.tile__icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tile-c) 16%, transparent); color: var(--tile-c); }
.tile__icon .icon { width: 15px; height: 15px; }
.tile__value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.tile__label { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.tile__rows { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.tile__row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.tile__row .icon { width: 13px; height: 13px; flex-shrink: 0; }
.tile__row .icon.-success { color: var(--success); }
.tile__row .icon.-warning { color: var(--warning); }
.tile__row .icon.-critical { color: var(--critical); }
.tile__foot {
  display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--tile-c);
  cursor: pointer;
}
.tile__foot .icon { width: 12px; height: 12px; transition: translate .15s var(--ease); }
.tile:hover .tile__foot .icon { translate: 2px 0; }
.tile[data-goto] { cursor: pointer; }

/* ============================================================
   CHIPS (filtro por tag)
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.chip__count { background: var(--surface-sunken); border-radius: 999px; padding: 1px 6px; font-size: 10.5px; }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.filterbar__spacer { flex: 1; }

/* ============================================================
   DROPDOWN de ações por agente (tabela Agentes)
   ============================================================ */
.agente-menu-wrap { position: relative; display: inline-block; }
.agente-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 230px; z-index: 60;
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  padding: 6px;
}
.agente-menu.is-open { display: flex; flex-direction: column; gap: 2px; }
.agente-menu__item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.agente-menu__item:hover { background: var(--accent-soft); color: var(--accent-strong); }
.agente-menu__item:last-child { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 11px; color: var(--critical); }
.agente-menu__item:last-child:hover { background: var(--critical-soft); color: var(--critical); }

/* ============================================================
   LISTA DE AÇÕES / SELEÇÃO DENTRO DO MODAL
   Task 3 do plano 2026-10-27-acoes-para-leigo (spec §3): o mesmo desenho serve
   ao "O que você quer fazer?" do cabeçalho da máquina e ao seletor com lista
   viva (processos, programas). Alvo de clique grande, uma linha por item.
   Não reaproveita .agente-menu__item porque aquele pinta o ÚLTIMO item de
   vermelho (convenção do dropdown); aqui "destrutiva" é marcada item a item.
   ============================================================ */
.acao-lista { display: flex; flex-direction: column; gap: 2px; }
.acao-lista__item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.acao-lista__item:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-strong); }
.acao-lista__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.acao-lista__item--perigo { color: var(--critical); }
.acao-lista__item--perigo:hover { background: var(--critical-soft); border-color: var(--critical-soft); color: var(--critical); }
.acao-lista__detalhe {
  display: block; margin-top: 2px; color: var(--text-faint);
  font-size: 11.5px; font-weight: 400; word-break: break-all;
}

/* ============================================================
   ASSISTENTE IA (painel flutuante, canto inferior direito)
   ============================================================ */
.ai-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 220;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent-strong); cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: background .15s var(--ease), translate .15s var(--ease);
}
.ai-fab:hover { background: var(--accent-strong); translate: 0 -2px; }
.ai-fab .icon { width: 22px; height: 22px; }
.ai-panel {
  position: fixed; right: 24px; bottom: 88px; z-index: 220;
  width: 420px; max-width: calc(100vw - 48px); height: 560px; max-height: calc(100vh - 140px);
  display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  overflow: hidden;
}
.ai-panel.is-open { display: flex; }
.ai-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.ai-panel__head h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ai-panel__head h3 .icon { width: 16px; height: 16px; color: var(--accent-strong); }
.ai-panel__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { max-width: 92%; padding: 10px 13px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.ai-msg--user { align-self: flex-end; background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent); }
.ai-msg--bot { align-self: flex-start; background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border); }
.ai-msg--bot strong, .ai-msg--user strong { color: var(--text); }
.ai-msg .mono { color: var(--text); }
.ai-panel__foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.ai-panel__foot input {
  flex: 1; height: 38px; padding: 0 12px;
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text); outline: 0; font-size: 13px;
}
.ai-panel__foot input:focus { border-color: var(--accent); }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-suggest button {
  background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 999px; padding: 5px 11px; font-size: 11.5px; cursor: pointer;
}
.ai-suggest button:hover { border-color: var(--accent); color: var(--accent-strong); }

/* ── tabs da página da máquina ── */
.mq-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 14px; cursor: pointer;
}
.mq-tab:hover { color: var(--fg); }
.mq-tab.is-active { color: var(--fg); border-bottom-color: var(--accent); }
.mq-cmdout pre {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-all; margin: 0;
}

/* ── download do instalador: barra de progresso no card ── */
.dl-progress { margin: 8px 0; }
.dl-progress__bar {
  height: 6px; border-radius: 3px; background: var(--bar-track);
  overflow: hidden;
}
.dl-progress__fill {
  height: 100%; width: 0%;
  background: var(--accent, #22c55e);
  border-radius: 3px;
  transition: width .15s ease-out;
}
.dl-progress__meta {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--text-muted); margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
}
.dl-progress__meta span { white-space: nowrap; }

/* ── bola de status online/offline na lista de agentes ── */
.host-wrap { display: inline-flex; align-items: center; gap: 8px; }
.host-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 auto; display: inline-block;
}
.host-dot--on {
  background: var(--success, #22c55e);
  box-shadow: 0 0 6px var(--success-glow);
}
.host-dot--off { background: var(--dot-off); }
.tag-more--info {
  color: var(--text-muted);
  border-bottom: 1px dotted var(--border);
  cursor: help;
}

.installer-card__eyebrow { display: flex; align-items: center; gap: 8px; }
#agentVersaoBadge { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; }

/* ── SSE: blink discreto na linha do agente atualizada ── */
tr.linha-atualizada > td {
  animation: linhaPulse 1.3s ease-out 2;
}
@keyframes linhaPulse {
  0%   { background: var(--success-soft); }
  100% { background: transparent; }
}
/* O ponto verde da máquina atualizada pulsa em glow (o foco visual do operador é
   o ponto, não a linha inteira) — mesmo timing do pulse da linha. */
tr.linha-atualizada .host-dot--on {
  animation: dotGlow 1.3s ease-out 2;
}
@keyframes dotGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--success-glow-zero); }
  50%      { box-shadow: 0 0 0 6px var(--success-glow-ring); }
}
/* Valor fora de tabela que o agente atualizou (KPI, linha de cartão, versão):
   mesmo pulso da linha, no próprio elemento. */
.valor-atualizado {
  animation: linhaPulse 1.3s ease-out 2;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  tr.linha-atualizada > td { animation: none; }
  tr.linha-atualizada .host-dot--on { animation: none; }
  .valor-atualizado { animation: none; }
}

/* ── toolbar de busca + paginador da lista de agentes ── */
/* Barra de ferramentas de lista: mesma regua horizontal do .panel__head (18px),
   para a busca nascer alinhada com o titulo do painel, nao colada na borda. */
.list-toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.list-toolbar__meta { font-size: 12px; color: var(--text-muted); }
/* Busca canonica: caixa com lupa + input sem borda propria (mesma marcacao do
   dashboard do agente e do mockup do design system). Use SEMPRE esta marcacao:
   input cru com style= inline e o que deixava a busca colada na borda do painel.
   Fundo sunken e nao --surface (como no mockup): dentro do painel, que ja e
   --surface, o campo sumiria e sobraria so a borda. */
.search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; flex: 1 1 260px; min-width: 220px; max-width: 440px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-faint); transition: border-color .15s var(--ease), background .15s var(--ease); }
.search:hover { border-color: var(--border-strong); }
.search:focus-within { border-color: var(--accent); background: var(--surface-raised); color: var(--text-muted); }
.search .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 13px; }
.search input::placeholder { color: var(--text-faint); }
/* o X nativo do type=search destoa no tema escuro: quem limpa e o .search__clear */
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search__clear { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-faint); cursor: pointer; }
.search__clear:hover { background: var(--surface); color: var(--text); }
.search__clear .icon { width: 12px; height: 12px; }
.search__hint { flex: 0 0 auto; font-family: var(--font-mono); font-size: 10.5px; line-height: 1; color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; }
/* O X so existe quando ha o que limpar, e o "/" some quando ha texto: os dois
   juntos pareciam dois botoes de fechar dentro do mesmo campo (CSS puro). */
.search input:placeholder-shown ~ .search__clear { opacity: 0; pointer-events: none; }
.search input:not(:placeholder-shown) ~ .search__hint { opacity: 0; }
@media (max-width: 900px) { .search { flex-basis: 100%; max-width: none; } .search__hint { display: none; } }

/* busca global do topbar (fase 3): o MESMO .search canonico (lupa, X e dica),
   com teto menor e dropdown de resultados — a posicao e o tamanho seguem o
   contrato do mockup (console-mockup.html: entre o spacer e as acoes). */
.topbar__search { flex: 0 1 320px; max-width: 320px; position: relative; }
.topbar__search input { width: 100%; }
.search-results {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 100%; width: max-content; max-width: 460px;
  max-height: 340px; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 6px;
}
.search-results[hidden] { display: none; }
.search-results__grupo + .search-results__grupo { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.search-results__titulo { display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.search-results__contagem { color: var(--text-muted); }
.search-results__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.search-results__item:hover, .search-results__item[aria-selected="true"] { background: var(--surface-sunken); }
.search-results__item .icon { width: 14px; height: 14px; color: var(--text-faint); flex: 0 0 auto; }
.search-results__principal { font-weight: 500; }
.search-results__secundario { color: var(--text-faint); font-size: 12px; margin-left: auto; padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results__vazio { padding: 10px 8px; color: var(--text-faint); font-size: 13px; }
/* o teto do topbar nao pode virar largura cheia na faixa media (a regra do
   .search da tela vale so para a busca DENTRO do painel) */
@media (max-width: 900px) { .topbar__search { flex: 0 1 320px; max-width: 320px; } }
@media (max-width: 720px) { .topbar__search { display: none; } }


/* paginador no padrão do mockup: .table-foot dentro do panel + .pager de
   botões só-ícone (console-mockup.html) */
.table-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-faint);
}
.table-foot strong { color: var(--text-muted); font-weight: 600; }
.pager { display: flex; gap: 6px; }

/* ============================================================
   MARKDOWN do assistente do console (js/markdown.js — portado
   do projboard: a resposta da IA vira DOM de verdade em vez de
   marcadores crus; folha SEMPRE por textContent, nunca innerHTML)
   ============================================================ */
/* Cada seletor repete o contêiner nos DOIS lados da vírgula. A versão anterior
   ("…--bot, .gv-resposta p") aplicava as regras de p/a/em/h6 no próprio balão:
   a explicação do caso saía em caixa-alta, itálico e sublinhada. */
.ai-msg--bot, .gv-resposta { white-space: normal; }
.ai-msg--bot > *:first-child, .gv-resposta > *:first-child { margin-top: 0; }
.ai-msg--bot > *:last-child, .gv-resposta > *:last-child { margin-bottom: 0; }
.ai-msg--bot p, .gv-resposta p { margin: 0 0 8px; }
.ai-msg--bot ul, .ai-msg--bot ol, .gv-resposta ul, .gv-resposta ol { margin: 0 0 8px; padding-left: 19px; list-style: disc; }
.ai-msg--bot ol, .gv-resposta ol { list-style: decimal; }
.ai-msg--bot li, .gv-resposta li { margin: 2px 0; }
.ai-msg--bot h4.ai-h, .ai-msg--bot h5.ai-h, .ai-msg--bot h6.ai-h,
.gv-resposta h4.ai-h, .gv-resposta h5.ai-h, .gv-resposta h6.ai-h { margin: 12px 0 6px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.ai-msg--bot h4.ai-h, .gv-resposta h4.ai-h { font-size: 14px; }
.ai-msg--bot h5.ai-h, .gv-resposta h5.ai-h { font-size: 13px; }
.ai-msg--bot h6.ai-h, .gv-resposta h6.ai-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ai-msg--bot strong, .gv-resposta strong { font-weight: 700; color: var(--text); }
.ai-msg--bot em, .gv-resposta em { font-style: italic; color: var(--text-muted); }
.ai-msg--bot a, .gv-resposta a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.ai-msg--bot hr, .gv-resposta hr { margin: 10px 0; border: 0; border-top: 1px solid var(--border); }
.ai-code { padding: 1px 5px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-strong); word-break: break-word; }
.ai-pre { margin: 0 0 8px; padding: 9px 11px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; }
.ai-pre code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); white-space: pre; }
.ai-quote { margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 2px solid var(--border-strong); color: var(--text-muted); }
.ai-tblwrap { margin: 0 0 8px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.ai-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ai-tbl th { padding: 7px 10px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-strong); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); text-align: left; white-space: nowrap; }
.ai-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
.ai-tbl tbody tr:last-child td { border-bottom: 0; }
.ai-tbl td:first-child { font-family: var(--font-mono); color: var(--text); }

/* ── God view (IA de fusão no hub) ──────────────────────────────────────────
   A resposta da god view é markdown renderizado pelo MESMO motor do assistente
   (/js/markdown.js) e por isso entra na MESMA lista de seletores do bloco
   acima (`.ai-msg--bot, .gv-resposta`) em vez de ganhar uma cópia das regras —
   cópia diverge. O que é só da god view é a lista de citações: cada afirmação
   com a ferramenta e o valor medido, em fonte monoespaçada. */
.gv-citacoes { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-muted); }
.gv-citacoes li { margin: 3px 0; }
.gv-citacoes strong { font-weight: 700; color: var(--text); }
.gv-cit__fonte { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }


/* ── perfil do host: barras de disco + interfaces de rede ── */
.disk-bar__row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.disk-bar__label { min-width: 30px; font-size: 11.5px; }
.disk-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: var(--bar-track); overflow: hidden;
}
.disk-bar__fill {
  height: 100%; border-radius: 4px;
  background: var(--accent, #22c55e);
  transition: width .3s ease-out;
}
.disk-bar__meta { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* Donut de RAM (pedido de 21/09, item 3): o tile "Perfil do host" mostra
   ocupação de memória em anel — leitura de um olhar, sem gastar a largura da
   linha. r = 15.9155 ⇒ circunferência 100 ⇒ dasharray em % direto. */
.donut { position: relative; display: inline-flex; width: 46px; height: 46px; vertical-align: middle; }
.donut__svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.donut__trilha { fill: none; stroke: var(--bar-track); stroke-width: 3.6; }
.donut__arco { fill: none; stroke: var(--accent); stroke-width: 3.6; stroke-linecap: round; }
.donut__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text); }
.donut__meta { margin-left: 8px; font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* Postura em checkbox (pedido de 21/09, item 5): Secure Boot e TPM com o mesmo
   desenho. --on = ligado; --off = desligado; --none = o agente não reportou. */
.chk { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid var(--border); border-radius: 4px; vertical-align: -2px; }
.chk .icon { width: 11px; height: 11px; stroke-width: 2.6; }
.chk--on { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.chk--off { border-color: var(--critical); color: var(--critical); background: var(--critical-soft); }
.chk--none { color: var(--text-faint); }

.netif-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--surface-2);
}
.netif-row:last-child { border-bottom: none; }
.netif-row__name { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.netif-row__desc {
  font-size: 11.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.netif-row__type {
  font-size: 10.5px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
  white-space: nowrap;
}
.netif-row__ips { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Perfil do host: MESMA hierarquia do cartao "Interfaces de rede" logo ao lado.
   La o identificador da linha e o dado forte (.netif-row__name: branco, 600) e o
   detalhe e o secundario (.netif-row__desc: muted). Aqui estava invertido — o
   rotulo saia cinza (.tile__label) e o valor saia branco — e as linhas nao
   tinham a separacao do cartao vizinho. Escopo so nas linhas do perfil do host
   (.mq-host): .tile__label continua igual em todo o resto do console. */
.mq-host > div {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--surface-2);
}
.mq-host > div:last-child { border-bottom: none; }
.mq-host .tile__label { color: var(--text); font-weight: 600; font-size: 12.5px; margin-top: 0; }
.mq-host .mq-host__val { color: var(--text-muted); font-size: 11.5px; }

/* ============================================================
   PÁGINA DA MÁQUINA v2 (spec 2026-09-18-pagina-maquina-v2)
   Zonas A/B, coleta por aba e cards novos. Nada aqui anima layout:
   só o skeleton (gradiente) e ele respeita prefers-reduced-motion.
   ============================================================ */
.mq-zone { margin-bottom: 26px; }
.mq-zone__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.mq-zone__tag {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 11.5px; font-weight: 800;
}
.mq-zone__txt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mq-zone__txt strong { font-size: 13.5px; }
.mq-zone__txt span { font-size: 12px; color: var(--text-faint); }

/* rodapé de painel: estado da coleta da aba (cache de 5 min por máquina) */
.panel__foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 11.5px; color: var(--text-faint);
}

/* linhas curtas dos cards novos (domínio × hits, bloqueios, saúde do agent) */
.mq-card-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted); min-width: 0;
}
.mq-card-row .mono { font-size: 11.5px; }
.mq-card-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* skeleton da tabela enquanto a coleta da aba roda no endpoint */
.skel-row td { padding: 9px 10px; }
.skel-bar {
  display: block; height: 9px; border-radius: 4px;
  background: linear-gradient(90deg, var(--bar-track), var(--bar-track-strong), var(--bar-track));
  background-size: 200% 100%;
  animation: skel 1.2s linear infinite;
}
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-bar { animation: none; } }


/* ============================================================
   TABS (abas de painel)
   ============================================================ */

/* Portado de docs/design-system/design-system.html (seção TABS): as declarações
   são as do contrato, formatadas no estilo deste arquivo. O .tabpanel traz o
   padding-top do conteúdo (o painel de dentro não tem margem própria) e o
   [hidden] é declarado como no contrato — o painel é um card com estilo próprio,
   então a tela não depende do padrão do navegador para escondê-lo. Quem troca a
   aba é o dashboard.html, com o seletor escopado em #view-risco: o .mq-tabs da
   página da máquina é outro sistema (data-mqtab) e não pode ser alcançado. */
.tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
}
.tab {
  padding: 9px 4px; margin-right: 20px; font-size: 13px; font-weight: 600;
  color: var(--text-faint); background: none; border: 0;
  border-bottom: 2px solid transparent; cursor: pointer; translate: 0 1px;
}
.tab:hover { color: var(--text-muted); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabpanel { padding-top: 16px; font-size: 13px; color: var(--text-muted); }
.tabpanel[hidden] { display: none; }

/* ============================================================
   RISCO (radar FAIR + CIS v8.1 + roadmap ROSI)
   ============================================================ */

/* Ações no cabeçalho da view (a view de Risco põe o rótulo da semana e o
   botão de atualizar à direita do título, como as demais telas fazem com o
   panel__head — aqui não há painel em volta para ancorar). */
.view-head__actions {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
/* Select no cabeçalho da view: mesma altura do .btn--sm ao lado, largura do
   conteúdo (o .field-select padrão é 100% para formulários). */
.view-head__actions .field-select { height: 30px; width: auto; min-width: 84px; }

/* Linha do tempo da coleta forense (detalhe do incidente). Um cartão por
   etapa; os dados brutos (vindos do host) rolam dentro do cartão em vez de
   empurrar a página, e textos longos (paths, cmdline) quebram na célula. */
.inc-etapa {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-sunken); padding: 10px 12px; margin-bottom: 10px;
}
.inc-etapa--sinal { border-color: var(--critical); }
.inc-etapa__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.inc-etapa__cab .panel__head-meta { margin-left: auto; }
.inc-etapa table { font-size: 12px; }
.inc-etapa tbody td, .inc-etapa thead th { padding: 6px 10px; vertical-align: top; }
.inc-etapa code { font-family: var(--font-mono); font-size: 11.5px; overflow-wrap: anywhere; word-break: break-word; }
.inc-etapa__kv { width: auto; }
.inc-etapa__kv > tbody > tr > th {
  text-align: left; font-weight: 600; color: var(--text-faint); white-space: nowrap; min-width: 120px;
  padding: 6px 14px 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.inc-etapa__kv > tbody > tr:last-child > th { border-bottom: 0; }
.inc-etapa__kv .inc-etapa__kv { min-width: 0; }
.inc-etapa__kv .inc-etapa__kv > tbody > tr > th { padding: 2px 10px 2px 0; border-bottom: 0; }
.inc-etapa__kv .inc-etapa__kv > tbody > tr > td { padding: 2px 0; border-bottom: 0; }
.inc-etapa__lista { margin: 0; padding-left: 16px; }
.inc-etapa__lista li { margin: 2px 0; }
.inc-etapa__dados { margin-top: 8px; }
.inc-etapa__dados > summary { cursor: pointer; font-size: 12px; color: var(--text-muted); user-select: none; }
.inc-etapa__dados > summary:hover { color: var(--text); }
.inc-etapa__dados-corpo {
  margin-top: 8px; max-height: 420px; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
.inc-etapa__grade { border-radius: 0; }
.inc-etapa__grade thead th { background: var(--surface); }

/* Tela do caso (Investigações → caso do parque). Escala de 4 px do design
   system; título de seção como o .detail h3 do console-mockup. */
.inv-det__cab { padding-bottom: 16px; }
#invCabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
/* A ficha encosta nas bordas do painel: as células acompanham o padding de 20 px do panel-body. */
.inv-det__ficha { border-radius: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.inv-det__ficha tbody td:first-child { padding-left: 20px; }
.inv-det__ficha tbody td:last-child { padding-right: 20px; }
.inv-det + .inv-det { border-top: 1px solid var(--border); }
.inv-det > h3 {
  margin: 28px 0 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-faint);
}
.inv-det > h3:first-child,
.inv-det > .hidden:first-child + h3 { margin-top: 0; }
.inv-det > #incIaDetMotivos > h3 { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.inv-det > #incIaDetMotivos:not(.hidden) + h3 { margin-top: 28px; }
#incIaDetMotivosChips { display: flex; flex-wrap: wrap; gap: 6px; }
#incIaDetMotivosOlhado { margin-top: 8px; }
.inv-det .panel__actions { flex-wrap: wrap; }
.inv-det__linha { margin-top: 10px; }
.inv-det__linha .field-select { width: auto; flex: 0 1 260px; min-width: 180px; }
.inv-det__linha .field-input:not(textarea) { width: auto; flex: 0 1 260px; min-width: 180px; height: 32px; }
.inv-det .btn { white-space: nowrap; }
#invVeredito > textarea, #invPainelPerguntar > textarea { margin-top: 10px; width: 100%; }
#invPainelPerguntar > textarea { margin-top: 0; }
.inv-det__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv-det__chip { display: inline-flex; align-items: center; gap: 4px; }
.inv-det__chip .btn { height: 22px; min-width: 22px; padding: 0 6px; }
#invArquivar:not(:empty) { margin-top: 16px; }
#incIaDetAcoes:not(:empty) { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.inv-det__check { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
#incIaDetExplicacao { max-width: none; }
#incIaDetCitacoes > li + li { margin-top: 10px; }
#incIaDetCitacoes .panel__head-meta { margin-top: 2px; overflow-wrap: anywhere; }
#invFicha .inc-etapa:last-child, #invLinhaTempo .inc-etapa:last-child { margin-bottom: 0; }
#invPerfil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#invPerfil > p { flex-basis: 100%; }
.inv-det__filtro { margin-bottom: 10px; }
.inv-det__filtro .field-select { width: auto; min-width: 220px; }
.inv-det__aba { padding-top: 16px; }
.inv-det__aba > .panel__head-meta:first-child { margin-bottom: 0; }
.inv-det__etapas { margin-top: 28px; }
.inv-det__etapas > summary {
  cursor: pointer; user-select: none; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-faint);
}
.inv-det__etapas > summary:hover { color: var(--text-muted); }
.inv-det__etapas[open] > summary { margin-bottom: 10px; }
@media (max-width: 600px) {
  .inc-etapa__kv > tbody > tr > th { min-width: 0; white-space: normal; padding-right: 8px; }
}

/* Aviso de nível médio (warning): a paleta já tinha --warning e --sev-high,
   mas só critical/success/info tinham classe de alerta. Usado para os avisos
   honestos do radar (frequência não instrumentada, escala não calibrada). */
.alert--medium { background: var(--warning-soft); color: var(--warning); }

/* Barra de risco com a BANDA do FAIR: a barra cheia é o risco calculado; a
   faixa translúcida é a incerteza ([0,8x; 1,2x]). Sem a banda, o número
   pareceria exato — que é justamente o que a spec proíbe. */
.risk-bar__row { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.risk-bar {
  position: relative; flex: 1; height: 10px; border-radius: 5px;
  background: var(--bar-track); overflow: hidden; min-width: 110px;
}
.risk-bar__band {
  position: absolute; top: 0; bottom: 0;
  background: var(--accent-soft); border-left: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
}
.risk-bar__fill {
  position: relative; height: 100%; border-radius: 5px;
  background: var(--accent); transition: width .3s ease-out;
}
.risk-bar__fill--high { background: var(--sev-high); }
.risk-bar__fill--critical { background: var(--critical); }
.risk-bar__fill--low { background: var(--success); }
.risk-bar__num { font-size: 12px; white-space: nowrap; }
.risk-bar__band-meta { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }

/* Tendência: ▲▼→ com o mesmo vocabulário visual do resto do console. */
.risk-trend { font-size: 12.5px; white-space: nowrap; }
.risk-trend--up { color: var(--critical); }
.risk-trend--down { color: var(--success); }
.risk-trend--flat { color: var(--text-faint); }

/* Chips de gap CIS: clicáveis, levam para a máquina/o safeguard. */
.risk-chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* botao de acao em linha de tabela: altura fixa + texto quebrado = sobreposicao */
.risk-chips .btn { white-space: nowrap; }
.risk-chip {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-muted); cursor: pointer; font-family: inherit;
}
.risk-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Selo do zero honesto: o fator sem achado na janela. */
.risk-seal {
  font-size: 10.5px; color: var(--warning);
  border: 1px dashed var(--warning); border-radius: 999px; padding: 1px 7px;
  white-space: nowrap;
}

/* Exposição por componente (detalhe abaixo do radar). */
.risk-exp { display: flex; flex-direction: column; gap: 8px; }
.risk-exp__row { display: flex; align-items: center; gap: 10px; }
.risk-exp__label { font-size: 12px; color: var(--text-muted); min-width: 250px; }
.risk-exp__bar {
  flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--bar-track); max-width: 320px;
}
.risk-exp__bar > div { height: 100%; background: var(--accent); }
.risk-exp__meta { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* Barras de maturidade por Implementation Group. */
.risk-igs { display: flex; flex-direction: column; gap: 12px; }
.risk-ig__row { display: flex; align-items: center; gap: 12px; }
.risk-ig__label { font-size: 12.5px; font-weight: 700; min-width: 44px; }
.risk-ig__bar {
  flex: 1; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--bar-track); max-width: 420px;
}
.risk-ig__bar > div { height: 100%; background: var(--accent); transition: width .3s ease-out; }
.risk-ig__meta { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

/* ---------- tema claro/escuro (t_0aa08475) ---------- */
#themeToggle{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
#themeToggle .icon{width:16px;height:16px}
/* transição suave só nos componentes principais (spec §1.2: não em *) */
.topbar, .rail, .view, .tile, .panel, .card, table, th, td, .btn, .icon-btn,
.field, .pill, .modal, .agente-menu, .chip, input, select, textarea {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* color-scheme acompanha o tema (scrollbars/inputs nativos) */
:root{ color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }

/* ---------- dropdown da conta no topbar (t_0aa08475 §1.3) ---------- */
.user-menu-wrap{position:relative}
.user-menu{min-width:240px}
.user-menu__head{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-bottom:1px solid var(--border)}
.user-menu__email{font-size:12px;color:var(--text);word-break:break-all}
.user-menu__head .pill{align-self:flex-start}
.user-menu__section{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.user-menu__label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.user-menu__select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);padding:6px 8px;font-size:13px}
.user-menu__sair{width:100%;text-align:left;color:var(--warning,#e5484d)}

/* ============================================================
   TOAST — avisos flutuantes ao usuário (portado do agente:
   internal/api/web/css/styles.css). Substitui o banner fixo
   para feedback de ação; o banner permanece para estado de
   página (ex.: "informe o tenant").
   ============================================================ */
.toast-region{position:fixed;top:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:10px;width:330px;max-width:calc(100vw - 36px);pointer-events:none;}
.toast{pointer-events:auto;display:flex;gap:10px;padding:13px 14px;border-radius:var(--radius-md);background:var(--surface-raised);border:1px solid var(--border-strong);box-shadow:var(--shadow-2);border-left:3px solid var(--a-c,var(--accent));animation:toast-in .22s var(--ease);}
.toast.is-leaving{animation:toast-out .18s var(--ease) forwards;}
.toast__icon{width:20px;height:20px;color:var(--a-c,var(--accent));flex-shrink:0;}
.toast__body{flex:1;min-width:0;}
.toast__title{font-size:12.5px;font-weight:700;color:var(--text);}
.toast__text{font-size:11.5px;color:var(--text-muted);margin-top:2px;line-height:1.4;word-break:break-word;}
.toast__close{width:20px;height:20px;flex-shrink:0;color:var(--text-faint);cursor:pointer;background:none;border:0;display:flex;align-items:center;justify-content:center;border-radius:5px;}
.toast__close:hover{color:var(--text);background:var(--surface-sunken);}
.toast--success{--a-c:var(--success);}
.toast--warning{--a-c:var(--warning);}
.toast--critical{--a-c:var(--critical);}
@keyframes toast-in{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateX(12px);}}
@media (prefers-reduced-motion: reduce){.toast{animation:none;}.toast.is-leaving{animation:none;}}

/* ---------- Terminal interativo (shell do tenant) ----------
   A pane e uma COMBINACAO de componentes do contrato (panel/field/btn/pill) e
   nao uma tela nova: o CSS proprio e o do terminal em si (fonte mono,
   superficie afundada, rolagem), a paleta ANSI e o zoom do operador. O
   modificador de largura do modal vai por classe -- nunca style inline.

   A paleta ANSI NAO e token de design novo: --ansi-N e contrato do FIO (o
   endpoint manda "indice 11" no SGR 93) e existe UMA vez, aqui, sob a pane.
   Preto literal (indice 0) num fundo afundado escuro e ilegivel, entao cada
   tema da ao indice o tom legivel -- mesma pratica do VS Code e do Windows
   Terminal. Token de design continua sendo o que a tela ESCOLHE; isto e o que
   ela RECEBE.

   O zoom mora em --term-fonte (padrao aqui, ajustado pelo operador e guardado
   no localStorage dele) e a altura da saida e em em: aumentar a fonte aumenta
   a TELA (mais linhas visiveis), nao espreme o mesmo retangulo. */
.modal--wide { width: 720px; }
/* O #modal e' o overlay (veu); a caixa e o .modal DENTRO dele. A classe
   vai no overlay (mesma convencao de modal--solta e modal--terminal), entao
   a largura tem de ser do descendente: escrita no overlay, ela encolhia o
   VEU para 1100px e a caixa continuava nos 460px do .modal base. */
.modal--sigma .modal { width: min(1100px, 98vw); max-height: 95vh; }
/* O editor YAML do sigma, dentro do modal largo, ocupa a largura toda e
   ganha altura extra para caber regras reais (hoje ~14 linhas, típico de
   regra tem 20+). */
.modal--sigma .field { max-width: none; }
.modal--sigma #sgYaml { font-size: 12.5px; min-height: 50vh; }
/* Cabecalho do terminal: area de arrasto (como a barra de titulo de uma
   janela). O titulo mostra o nome do host e o operador arrasta por ele. */
.modal--terminal .modal__head { cursor: grab; user-select: none; }
/* A caixa do terminal e' o referencial da alca de redimensionar (que fica
   ancorada no canto inferior direito, como a de qualquer janela). */
.modal--terminal { position: relative; }
.modal__grip { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px;
  padding: 0; border: 0; background: none; cursor: nwse-resize; }
.modal__grip::after { content: ''; position: absolute; right: 4px; bottom: 4px;
  width: 8px; height: 8px; border-right: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong); }
.modal__grip:hover::after, .modal__grip:focus-visible::after { border-color: var(--accent); }
/* Redimensionado: a janela manda no tamanho e a SAIDA ocupa o que sobra, em vez
   da altura padrao em `em` (que existe para o A+/A- aumentar a tela pela fonte).
   As duas coisas convivem: sem redimensionar, a altura continua em `em`. */
.modal--redimensionado .modal__body { flex: 1 1 auto; min-height: 0; }
.modal--redimensionado .term { height: 100%; }
.modal--redimensionado .term__saida { height: auto; flex: 1 1 auto; min-height: 6em; }
.modal--terminal .modal__head:active { cursor: grabbing; }
#modalMinimizar { margin-left: auto; }
.modal--terminal #modalMinimizar { display: inline-flex; }
.modal__head h3 + #modalMinimizar { margin-left: auto; }
.modal__head #modalFechar { margin-left: 0; }
.modal__head #modalMinimizar:not([hidden]) + #modalFechar { margin-left: 4px; }
.term { display: flex; flex-direction: column; gap: 10px; --term-fonte: 12.5px; }
.term__status { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.term__prazo { color: var(--text-faint); }
.term__status > .btn { margin-left: auto; }
.term__zoom { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.term__zoom + .btn { margin-left: 4px; }
.term__zoom-btn { min-width: 30px; padding: 0 8px; }
.term__fonte { min-width: 30px; text-align: right; font-size: 11px; color: var(--text-faint); }
.term__aviso { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.term__saida { margin: 0; height: 25em; overflow-y: auto; padding: 12px 14px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--term-fonte); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.term__entrada { height: 38px; padding: 0 12px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-size: calc(var(--term-fonte) + 1px); font-family: var(--font-mono); }
.term__entrada:focus { border-color: var(--accent); outline: none; }


/* Paleta ANSI da saída do endpoint: índice -> tom legível no tema.
   Não é escolha da tela (a tela escolhe tokens), é o contrato do fio: o endpoint
   diz "cor 11", e o tema decide o que é 11. Por isso vive aqui, uma vez, e não
   no JS nem em token de design. */
.term__saida {
  --ansi-0:#5c6370; --ansi-1:#e06c75; --ansi-2:#98c379; --ansi-3:#e5c07b;
  --ansi-4:#61afef; --ansi-5:#c678dd; --ansi-6:#56b6c2; --ansi-7:#cfd4dc;
  --ansi-8:#7f848e; --ansi-9:#ff7b86; --ansi-10:#b6e29a; --ansi-11:#ffd68a;
  --ansi-12:#8ac6ff; --ansi-13:#e29bf0; --ansi-14:#7fdbe8; --ansi-15:#ffffff;
}
[data-theme="light"] .term__saida {
  --ansi-0:#4b5563; --ansi-1:#b91c1c; --ansi-2:#15803d; --ansi-3:#a16207;
  --ansi-4:#1d4ed8; --ansi-5:#7e22ce; --ansi-6:#0e7490; --ansi-7:#374151;
  --ansi-8:#9ca3af; --ansi-9:#dc2626; --ansi-10:#16a34a; --ansi-11:#ca8a04;
  --ansi-12:#2563eb; --ansi-13:#9333ea; --ansi-14:#0891b2; --ansi-15:#111827;
}
.term-f0{color:var(--ansi-0);} .term-f1{color:var(--ansi-1);} .term-f2{color:var(--ansi-2);} .term-f3{color:var(--ansi-3);}
.term-f4{color:var(--ansi-4);} .term-f5{color:var(--ansi-5);} .term-f6{color:var(--ansi-6);} .term-f7{color:var(--ansi-7);}
.term-f8{color:var(--ansi-8);} .term-f9{color:var(--ansi-9);} .term-f10{color:var(--ansi-10);} .term-f11{color:var(--ansi-11);}
.term-f12{color:var(--ansi-12);} .term-f13{color:var(--ansi-13);} .term-f14{color:var(--ansi-14);} .term-f15{color:var(--ansi-15);}
.term-b0{background:var(--ansi-0);} .term-b1{background:var(--ansi-1);} .term-b2{background:var(--ansi-2);} .term-b3{background:var(--ansi-3);}
.term-b4{background:var(--ansi-4);} .term-b5{background:var(--ansi-5);} .term-b6{background:var(--ansi-6);} .term-b7{background:var(--ansi-7);}
.term-b8{background:var(--ansi-8);} .term-b9{background:var(--ansi-9);} .term-b10{background:var(--ansi-10);} .term-b11{background:var(--ansi-11);}
.term-b12{background:var(--ansi-12);} .term-b13{background:var(--ansi-13);} .term-b14{background:var(--ansi-14);} .term-b15{background:var(--ansi-15);}
.term-neg{font-weight:600;}
.term-fraco{opacity:.72;}
.term-ital{font-style:italic;}
.term-sub{text-decoration:underline;}
/* SGR 7 (reverso): a pane e um log, nao tem cursor nem selecao -- o par padrao
   do tema e o unico contraste que existe aqui. */
.term-rev{background:var(--text); color:var(--surface-sunken);}

/* ---------- Terminal minimizado (PiP) ----------
   A barra fica ACIMA do overlay do modal (z-index maior que o do overlay): o
   operador trabalha no resto do site com a sessao ativa. Escondida por padrao
   (hidden); o JS mostra quando minimiza e esconde ao voltar/encerrar.
   ARRASTAVEL: a alca e' o CORPO do chip -- a pilula com o nome do host e o
   prazo, que e' onde o operador poe o dedo/mouse. Antes o corpo era um <button>
   "voltar" e a alca de verdade virava um frame de 5-12px em volta da pilula
   (medido no Chromium, viewport 1280x720, na revisao do #25). Os dois botoes de
   icone (voltar/encerrar) ficam de fora do arrasto e com cursor de clique. */
.term-pip { position: fixed; right: 16px; bottom: 16px; z-index: 400;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  padding: 8px 8px 8px 4px; max-width: min(420px, calc(100vw - 32px)); }
.term-pip[hidden] { display: none; }
.term-pip__alca { display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 4px 6px; border-radius: var(--radius-md); cursor: grab; }
.term-pip__alca:hover { background: var(--surface-raised); }
.term-pip__voltar { flex: none; }
.term-pip__ponto { display: inline-flex; align-items: center; gap: 8px; max-width: 300px; }
.term-pip__ponto #termPipHost { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-pip__bolinha { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
/* Sessao encerrada ou expirada: a bolinha apaga e a barra pede reabertura. */
.term-pip--morta .term-pip__bolinha { background: var(--critical); }
.term-pip__prazo { font-size: 12px; color: var(--text-muted); }
.term-pip__encerrar { flex: none; }
.term-pip .icon-btn, .term-pip button { cursor: pointer; }

/* ---- Score de risco por máquina + global do tenant (t_ca0303aa) ----
   A COR da faixa chega pronta do hub no campo `band` (risk_machine.go); este
   arquivo não decide limiar nenhum. Um "60" escrito aqui seria um segundo
   limiar do mesmo risco (e a linha "N acima de 60" nasceria decorativa). */
.risk-valor{transition:color .15s ease;}
.risk-valor[data-band="verde"]{color:var(--success);}
.risk-valor[data-band="amarelo"]{color:var(--warning);}
.risk-valor[data-band="vermelho"]{color:var(--critical);}
.risk-cell{padding-left:0;}
.risk-cell .pill{cursor:pointer;}
.risk-fator{font-size:11.5px;color:var(--text-muted);}
.tile__link{background:none;border:0;margin-left:auto;padding:0 0 0 10px;font:inherit;font-size:11.5px;
  color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.tile__link:hover{color:var(--text);}

/* ============================================================
   Eventos agrupados + investigação (spec 2026-09-22)
   ============================================================ */

/* A linha do agrupado é um botão de fato: ela abre o drill-down. Cursor e hover
   são o que dizem isso — sem eles o usuário não descobre que dá para clicar e a
   tela vira um relatório morto. */
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td { background: var(--surface-sunken); }
.linha-clicavel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* O balde "sem detecção" tem o MESMO peso visual dos achados, porque ele é a
   maior parte do stream (97,5% medido). Rebaixá-lo a cinza de rodapé repetiria
   na cor o erro que a tela existe para corrigir. */
.ev-balde__nome { color: var(--text); }
.ev-achado__sub { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }

/* "outros" é SOMA, não achado: fica rebaixado e não é clicável. */
.ev-outros td { color: var(--text-muted); font-style: italic; }

/* O vazio (c) de §7.2 — "nenhum match de regra SIGMA na janela". É NOTA acima
   da tabela, e não linha vazia, porque aqui a lista TEM conteúdo: o que falta
   é o match de regra. A cor de aviso é deliberada — sem a nota, ausência de
   match passa por ausência de ameaça, e é o erro mais caro desta tela. */
.ev-nota {
  margin: 12px 14px 0; padding: 10px 14px;
  background: var(--warning-soft);
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  color: var(--text);
  font-size: 12.5px;
}

.ev-drill { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .ev-drill { grid-template-columns: minmax(0, 1fr); } }
.ev-drill__coluna { min-width: 0; }

.ev-pivo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ev-pivo__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-pivo__rotulo { min-width: 92px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.ev-pivo .chip { height: 26px; padding: 0 10px; font-size: 12px; }

#evCriterio ul { margin: 6px 0 0; padding-left: 18px; }
#evCriterio li { margin-bottom: 4px; }

/* ---- Risco em R$: abas da view de risco, questionário de magnitudes e
   camada ALE/LEC (decisão do usuário 21/09; spec §11.1/§11.2).

   O selo de procedência é o contrato desta aba: medido (verde), tenant (azul),
   prior (âmbar), premissa/default do porte (cinza). Nenhum número da camada R$
   aparece sem selo — a cor responde "de onde veio esse número", não é enfeite. */

.rs-selo {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
}
.rs-selo--medido { background: var(--success-soft); color: var(--success); }
.rs-selo--tenant { background: var(--info-soft); color: var(--info); }
.rs-selo--prior { background: var(--warning-soft); color: var(--warning); }
.rs-selo--premissa,
.rs-selo--default_porte { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }

.rs-unidade { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.rs-input {
  width: 160px; height: 34px; padding: 0 10px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-mono); font-size: 13px; outline: 0;
}
.rs-input:focus { border-color: var(--accent); }
.rs-acoes { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.rs-aviso { font-size: 12.5px; }
.rs-aviso--success { color: var(--success); }
.rs-aviso--critical { color: var(--critical); }
.rs-aviso--info { color: var(--text-muted); }

.rs-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rs-cartao {
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.rs-cartao--alerta { border-color: var(--critical); background: var(--critical-soft); }
.rs-cartao__rot { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.rs-cartao__val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; margin-top: 6px; }
.rs-cartao__det { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }

.rs-lec__caixa { margin-top: 16px; }
.rs-lec { width: 100%; height: auto; display: block; }
.rs-lec__grade { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.rs-lec__eixo { stroke: var(--border-strong); stroke-width: 1; }
.rs-lec__linha { fill: none; stroke: var(--accent-strong); stroke-width: 2; }
.rs-lec__linha--inerente { stroke: var(--critical); }
.rs-lec__linha--residual { stroke: var(--success); }
.rs-lec__apetite { stroke: var(--critical); stroke-width: 1.5; stroke-dasharray: 6 4; }
.rs-lec__rot { fill: var(--text-faint); font-size: 11px; font-family: var(--font-mono); }
.rs-lec__rot--apetite { fill: var(--critical); }
.rs-lec__legenda { margin-top: 8px; }

.rs-selos { display: flex; flex-wrap: wrap; gap: 4px; }
.rs-notas { margin: 14px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 12.5px; }
.rs-notas li { margin-bottom: 4px; }

/* ── Painel executivo do Risco (spec 2026-09-23-risco-painel-executivo) ── */
.rp-cabec { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.rp-cabec h2 { font-size: 15px; font-weight: 700; }
.rp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rp-kpis > .empty-state { grid-column: 1 / -1; }
.rp-print-id { display: none; }
.rp-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-top: 2.5px solid var(--rp-c, var(--border-strong)); box-shadow: var(--shadow-1);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.rp-kpi--critical { --rp-c: var(--critical); }
.rp-kpi--success { --rp-c: var(--success); }
.rp-kpi--warning { --rp-c: var(--warning); }
.rp-kpi--info { --rp-c: var(--info); }
.rp-kpi__rot { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.rp-kpi__val { font-family: var(--font-mono); font-size: 20px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.rp-kpi__det { font-size: 11.5px; color: var(--text-muted); }
.rp-frase {
  margin: 14px 0; padding: 11px 14px; border-left: 3px solid var(--critical);
  background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 13.5px;
}
.rp-frase:empty { display: none; }
.rp-grade { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 14px; }
.rp-grade--iguais { grid-template-columns: 1fr 1fr; }
.rp-lec__legenda { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.rp-lec__chave { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.rp-lec__chave--inerente { background: var(--critical); }
.rp-lec__chave--residual { background: var(--success); margin-left: 12px; }
.rp-rank { display: flex; flex-direction: column; gap: 12px; }
.rp-rank__cab { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.rp-rank__barra { height: 8px; border-radius: 4px; background: var(--surface-raised); margin: 5px 0 3px; overflow: hidden; }
.rp-rank__fill { height: 100%; border-radius: 4px; }
.rp-rank__fill--ok { background: var(--success); }
.rp-rank__fill--atencao { background: var(--warning); }
.rp-rank__fill--critico { background: var(--critical); }
.rp-rank__det { font-size: 11.5px; color: var(--text-faint); }
.rp-rank__fora { margin-top: 12px; font-size: 11.5px; color: var(--text-faint); }
.rp-fatores { display: flex; flex-direction: column; gap: 12px; }
.rp-fator__nome { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.rp-notas { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.rp-notas summary { cursor: pointer; }
.rp-notas ul { margin: 8px 0 0 18px; }
.rp-cambio-nota { font-size: 11.5px; color: var(--text-faint); margin: 6px 0 0; }
.rp-declare {
  grid-column: 1 / -1; padding: 16px 18px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg); background: var(--surface);
}
.rp-declare__titulo { font-weight: 700; margin-bottom: 6px; }
.rp-declare__msg { color: var(--text-muted); font-size: 12.5px; margin-bottom: 12px; }
@media (max-width: 1100px) {
  .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-grade, .rp-grade--iguais { grid-template-columns: 1fr; }
}

/* Impressão: só o painel executivo, em tema claro, sem menu (botão "Imprimir relatório"). */
@media print {
  .railnav, .topbar, #riscoAbas, .view-head__actions, #rpImprimir, .rp-notas summary,
  #view-risco [data-tabpanel]:not(#riscoPainelExec) { display: none !important; }
  .rp-print-id { display: block !important; font-size: 12px; color: #374151; }
  /* :root[data-theme="light"] (mais específico) já é claro; este override vale para o
     tema escuro. Não "conserte" a especificidade. */
  :root {
    --bg: #ffffff; --surface: #ffffff; --surface-raised: #f1f3f6;
    --text: #111827; --text-muted: #374151; --text-faint: #6b7280;
    --border: #d1d5db; --border-strong: #9ca3af; --shadow-1: none; --shadow-2: none;
  }
  body, .viewport, .view { background: #ffffff !important; color: #111827 !important; }
  .panel, .rp-kpi, .rp-frase, .rp-declare { break-inside: avoid; box-shadow: none !important; }
  .rp-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rp-grade { grid-template-columns: 1.6fr 1fr; }
  .rp-grade--iguais { grid-template-columns: 1fr 1fr; }
}

/* ── Patches: Visão geral / Pendências (spec 2026-09-24-patch-inventario-conformidade) ──
   Reaproveita .rp-kpi/.rp-grade/.risk-bar/.risk-seal/.pill; só o que falta. */
.pt-barra { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.pt-barra__rot { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.pt-fill--success { background: var(--success); }
.pt-fill--warning { background: var(--warning); }
.pt-fill--critical { background: var(--critical); }
.pt-fill--info { background: var(--info); }
.pt-fill--neutral { background: var(--text-faint); }
.pt-linha { cursor: pointer; }
.pt-linha:hover { background: var(--surface-raised); }
.pt-titulo { font-size: 11.5px; color: var(--text-faint); }
.pt-nota { margin: 10px 0; font-size: 12px; color: var(--text-muted); }
.pt-nota--aviso { color: var(--warning); }

/* Aba Tráfego da máquina (dashboard.html #mqtab-trafego, js/trafego.js) */
.hh-grid{display:grid;grid-template-columns:28px repeat(24,minmax(0,1fr));gap:2px;font-size:10px}
.hh-h,.hh-d,.hh-corner{color:var(--text-muted);text-align:center}
.hh-cell{aspect-ratio:1;border-radius:2px;background:var(--bar-track);cursor:pointer;position:relative;transition:transform .1s}
.hh-cell:hover{transform:scale(1.18);outline:1px solid var(--border-strong)}
.hh-cell[data-i="1"],.hh-cell[data-i="2"]{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.hh-cell[data-i="3"],.hh-cell[data-i="4"],.hh-cell[data-i="5"]{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.hh-cell[data-i="6"],.hh-cell[data-i="7"],.hh-cell[data-i="8"]{background:color-mix(in srgb,var(--accent) 70%,transparent)}
.hh-cell[data-i="9"],.hh-cell[data-i="10"]{background:var(--accent)}
.hh-cell.anom{outline:2px solid var(--critical);outline-offset:-1px;animation:hhAnomPulse 1.8s ease-in-out infinite}
@keyframes hhAnomPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--critical) 50%,transparent)}50%{box-shadow:0 0 0 3px transparent}}
.hh-cell.cell-link{transform:scale(1.3);outline:2px solid var(--text);z-index:2;box-shadow:0 0 10px 2px color-mix(in srgb,var(--text) 55%,transparent)}
@media (prefers-reduced-motion:reduce){.hh-cell.anom{animation:none}.hh-cell{transition:none}}
.tf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tf-grid h3,.tf-modal h4{margin:0 0 8px}
.modal:has(.tf-modal){width:1100px;max-width:95vw}
.tf-modal__sec{margin:18px 0 10px;font-size:14px}
.tf-modal__legenda{margin:18px 0 0;font-size:11px;color:var(--text-muted)}
.tf-score .pill{text-transform:none}
.tf-modal__resumo{margin-bottom:14px}
.tf-mets{margin-bottom:16px}
.tf-met{display:grid;grid-template-columns:150px 1fr 120px;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
.tf-met small{display:block;font-size:11px;color:var(--text-muted)}
.tf-met__track{position:relative;height:10px;background:var(--bar-track);border-radius:5px}
.tf-met__band{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--info) 35%,transparent);border-radius:5px}
.tf-met__mean{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--info)}
.tf-met__v{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1px;background:var(--critical);box-shadow:0 0 6px color-mix(in srgb,var(--critical) 70%,transparent)}
.tf-met.flag .tf-met__z{color:var(--critical)}
.tf-met__z{text-align:right;font-size:12px}
.tf-grid>div,.tf-grid3>div{min-width:0}
.tf-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tf-rank{font-size:12px;margin-bottom:4px}.tf-rank__l{display:flex;justify-content:space-between;gap:6px}
.tf-rank__l .mono{overflow-wrap:anywhere;min-width:0}
.tf-rank__bar{height:4px;background:var(--bar-track);border-radius:2px}.tf-rank__bar>div{height:100%;background:var(--accent);border-radius:2px}
.tr-anom{cursor:pointer}
#mqtab-trafego .muted{color:var(--text-muted)}
@media (max-width:720px){.tf-grid,.tf-grid3{grid-template-columns:1fr}.tf-met{grid-template-columns:1fr}.tf-met__z{text-align:left}}

/* --- barra de lote da lista de Agentes (plano 2026-10-27, Task 6) ---
   A barra aparece quando o operador pode agir e existe lista; ela tambem
   vive SEM nada marcado, porque e ali que mora "selecionar a lista toda". O
   `.list-toolbar` acima ja da a moldura, aqui e so o espacamento interno e a
   coluna do checkbox. */
.lote-barra { gap: 8px; }
.lote-barra__acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.lote-col { width: 1%; white-space: nowrap; text-align: center; }
.lote-ctl { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--accent); vertical-align: middle; }
.lote-ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Aviso de consequencia irreversivel no dialogo (isolar N maquinas) — mesmo
   token de perigo do resto do console, nunca uma cor nova. */
.modal__body.dlg-body--perigo { color: var(--critical); font-weight: 600; }
/* ---------- Análises (Task 7): cartões de resultado, só leitura ----------
   A conclusão é a frase grande; o técnico (saída crua do agente) fica dentro
   do <details>. Nada aqui sugere ação: o cartão lê, não pede. */
#listaAnalises{display:flex;flex-direction:column;gap:10px;}
.analise-card{padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised);transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.analise-card.is-destaque{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.analise-card__topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.analise-card__tipo{margin:0;font-size:13px;font-weight:700;color:var(--text);}
.analise-card__quem{font-size:11.5px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.analise-card__quando{margin-left:auto;font-size:11px;color:var(--text-faint);}
.analise-card__conclusao{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--text);}
.analise-card__sinais{margin:8px 0 0;padding-left:18px;font-size:12px;line-height:1.6;color:var(--text-muted);}
.analise-card__placar{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
.analise-card__placar li{display:flex;gap:10px;font-size:12px;}
.analise-card__placar-host{min-width:170px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.analise-card__placar-frase{color:var(--text);}
.analise-card__alerta{margin:8px 0 0;font-size:11.5px;color:var(--warning);}
.analise-card__tec{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border);}
.analise-card__tec summary{font-size:11.5px;color:var(--text-muted);cursor:pointer;}
.analise-card__tec summary:hover{color:var(--text);}
.analise-card__tec-item{margin-top:8px;}
.analise-card__tec-titulo{margin:0 0 4px;font-size:11px;color:var(--text-faint);}
.analise-card__saida{margin:0;padding:8px 10px;max-height:420px;overflow:auto;background:var(--surface-sunken);border:1px solid var(--border);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.45;color:var(--text-muted);white-space:pre-wrap;word-break:break-word;}
.analise-card__tec-baixar{display:inline-block;margin:6px 0 0;font-size:11px;color:var(--accent);}
.analise-nota{margin:0;padding:0 16px 12px;font-size:11px;color:var(--text-faint);}
/* Aviso acionável (clique leva ao cartão) */
.toast--acao{cursor:pointer;}
.toast--acao:hover{border-color:var(--accent);}
.toast--acao:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.analise-nota--acao{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* ============================================================
   POSTURA CIS (radar na Visão geral)
   ============================================================ */
.postura { margin-bottom: 22px; padding: 18px; }
.postura__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.postura__teia { max-width: 520px; width: 100%; margin: 0 auto; aspect-ratio: 440 / 280; } /* viewBox do radar: reserva a altura antes do dado chegar */
.postura__titulo { font-size: 14.5px; font-weight: 700; }
.postura__resumo { font-size: 12.5px; color: var(--text); margin-top: 2px; }
.postura__aviso { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 10px; }
.postura__lista { display: flex; flex-direction: column; }
.postura__linha {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 0;
  background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--text);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.postura__linha:hover { background: var(--accent-soft); }
.postura__linha:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.postura__valor { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-weight: 600; text-align: right; }
.postura__valor--ok { color: var(--success); }
.postura__valor--med { color: var(--warning); }
.postura__valor--mal { color: var(--critical); }
.postura__valor--nm { color: var(--text-muted); }
.postura-svg { display: block; overflow: visible; max-width: 100%; height: auto; }
.postura-grade { fill: none; stroke: var(--border); }
.postura-eixo { stroke: var(--border-strong); }
.postura-eixo--nm { stroke: var(--text-muted); stroke-dasharray: 3 3; }
.postura-rotulo { fill: var(--text); font-size: 11px; cursor: pointer; }
.postura-rotulo--nm { fill: var(--text-muted); }
.postura-area { fill: var(--accent-soft); stroke: var(--accent-strong); stroke-width: 1.6; pointer-events: none; }
.postura-ponto { cursor: pointer; }
.postura-ponto--ok { fill: var(--success); }
.postura-ponto--med { fill: var(--warning); }
.postura-ponto--mal { fill: var(--critical); }
.postura__sub { font-size: 13px; font-weight: 700; margin: 4px 0 6px; }
.postura__maquinas { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 12.5px; }
.postura__maquinas li { padding: 3px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
/* O SVG escala com a coluna (viewBox 440 de largura): em coluna estreita o rótulo
   precisa crescer em unidades do viewBox para continuar legível (~11 px na tela). */
@media (max-width: 1100px) { .postura-rotulo { font-size: 12.5px; } }
@media (max-width: 760px) {
  .postura { padding: 14px; }
  .postura__grid { grid-template-columns: minmax(0, 1fr); }
  .postura-rotulo { font-size: 14.5px; }
}