:root {
  --bg: #0b0d12;
  --sidebar: #0f1218;
  --surface: #131720;
  --surface-2: #171c27;
  --surface-3: #1d2330;
  --surface-hover: #202735;
  --border: #252c3a;
  --border-2: #323b4d;
  /* Borda de CONTROLE (input, select, botão). Separada de propósito das
     duas acima: a WCAG 1.4.11 exige 3:1 para o que identifica um controle,
     e aqui o preenchimento não ajuda — o fundo do input contra o do cartão
     dá 1.05:1. As divisórias decorativas seguem discretas; subir todas
     encaixotaria a interface sem ganho de acessibilidade. */
  --border-control: #606876;   /* 3.19:1 sobre --surface, 3.04:1 sobre --surface-2 */
  --text: #eef1f7;
  --text-2: #c2c8d5;
  --muted: #9199aa;
  --faint: #667084;
  --primary: #f4f6fa;
  --primary-ink: #11141b;
  --go: #3ddc84;
  --go-bg: rgba(61,220,132,.10);
  --warn: #f2c94c;
  --warn-bg: rgba(242,201,76,.10);
  --crit: #ff646d;
  --crit-bg: rgba(255,100,109,.10);
  --info: #8da2fb;
  --info-bg: rgba(141,162,251,.10);
  --radius: 10px;
  --radius-sm: 8px;
  --sidebar-w: 244px;
  --font: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
::selection { background: rgba(141,162,251,.25); }
:focus-visible { outline: 2px solid #aebaf8; outline-offset: 2px; }

/* ---------- App shell ---------- */
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  padding: 18px 14px 14px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 0 8px; margin-bottom: 18px;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink);
  font-weight: 800; font-size: 13px; letter-spacing: -.04em;
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 14px; letter-spacing: -.02em; }
.brand-copy span { color: var(--muted); font-size: 11px; margin-top: 3px; }

.nav-group { margin-bottom: 16px; }
.nav-label {
  padding: 0 10px 6px; color: var(--faint); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.nav-link {
  height: 38px; padding: 0 10px; border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 13px; font-weight: 560;
  transition: background .15s ease, color .15s ease;
}
.nav-link svg { width: 17px; height: 17px; stroke-width: 1.8; flex: 0 0 auto; }
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.ativo { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
.nav-link.ativo svg { color: #fff; }
.sidebar-spacer { flex: 1; }
.system-mini {
  margin: 8px 5px 12px; padding: 11px 10px;
  background: rgba(255,255,255,.018); border: 1px solid var(--border); border-radius: 9px;
}
.system-mini-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--muted); }
.system-mini-row + .system-mini-row { margin-top:7px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--go); box-shadow:0 0 0 3px var(--go-bg); flex:0 0 auto; }
.status-dot.off { background:var(--faint); box-shadow:none; }
.user-menu {
  display:flex; align-items:center; gap:9px; padding:10px 8px 2px; border-top:1px solid var(--border);
}
.user-avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--surface-3); color:var(--text); font-size:11px; font-weight:750; }
.user-copy { min-width:0; flex:1; }
.user-copy strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.user-copy span { display:block; color:var(--faint); font-size:10.5px; text-transform:capitalize; }
.user-logout { color:var(--faint); font-size:11px; padding:5px; }
.user-logout:hover { color:var(--crit); }

.main-wrap { margin-left: var(--sidebar-w); min-height:100vh; }
.mobile-topbar { display:none; }
main { width:100%; max-width:1640px; margin:0 auto; padding:28px 30px 72px; }

/* ---------- Typography / page header ---------- */
h1,h2,h3,p { margin-top:0; }
h1 { font-size:26px; line-height:1.18; margin-bottom:5px; letter-spacing:-.035em; font-weight:720; }
h2 { font-size:18px; line-height:1.25; margin:30px 0 12px; letter-spacing:-.02em; font-weight:670; }
h3 { font-size:13px; line-height:1.35; margin:0 0 10px; color:var(--text-2); font-weight:650; letter-spacing:-.01em; }
.sub { margin:0; color:var(--muted); font-size:13px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.page-header-main { min-width:0; }
.page-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.eyebrow { color:var(--faint); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; margin-bottom:7px; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:28px 0 12px; }
.section-header h2 { margin:0; }
.section-header .sub { margin-top:3px; }

/* ---------- Controls ---------- */
input, select, textarea {
  color:var(--text); background:var(--surface-2); border:1px solid var(--border-control);
  border-radius:8px; min-height:38px; padding:8px 11px;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color:var(--faint); }
input:hover, select:hover, textarea:hover { border-color:#414b60; }
input:focus, select:focus, textarea:focus { outline:none; border-color:#68758e; box-shadow:0 0 0 3px rgba(141,162,251,.08); background:var(--surface-3); }
/* O outline:none acima (0-1-1) derrotava o :focus-visible global (0-1-0) e
   deixava o teclado sem anel. Mesmo hex do global. Em campo de texto o
   navegador considera qualquer foco "visible", então o anel aparece também
   no clique de mouse — assumido, não é bug. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid #aebaf8; outline-offset:2px; }
input[type=checkbox] { min-height:auto; accent-color:#aebaf8; }
input[type=number] { width:120px; }
textarea { width:100%; line-height:1.55; resize:vertical; }
select { cursor:pointer; }
button, .btn {
  min-height:38px; border:1px solid var(--border-control); border-radius:8px; padding:8px 13px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--surface-3); color:var(--text); cursor:pointer;
  font-weight:620; font-size:12.5px; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
button:hover, .btn:hover { background:#283143; border-color:#4b566c; text-decoration:none; }
button:active, .btn:active { transform:translateY(1px); }
button.primary, .btn.primary, button:not(.sec):not(.perigo):not(.mini-btn):not(.icon-btn) { background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
button.primary:hover, .btn.primary:hover, button:not(.sec):not(.perigo):not(.mini-btn):not(.icon-btn):hover { background:#fff; border-color:#fff; }
button.sec, .btn.sec { background:var(--surface-2); color:var(--text-2); }
button.ghost, .btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
button.perigo, .btn.perigo { background:transparent; color:var(--crit); border-color:rgba(255,100,109,.28); }
button.perigo:hover, .btn.perigo:hover { background:var(--crit-bg); border-color:rgba(255,100,109,.5); }
.icon-btn { width:38px; padding:0; background:var(--surface-2); color:var(--muted); }
.btn svg, button svg { width:15px; height:15px; }
.form-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field.grow { flex:1; }
.field label, label.rot { color:var(--muted); font-size:11px; font-weight:620; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.check-line { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:12.5px; }

/* ---------- Cards / metrics ---------- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.card.soft { background:rgba(19,23,32,.65); }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-header h3 { margin:0; }
.grid { display:grid; gap:12px; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.metric-card { min-height:102px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; position:relative; overflow:hidden; }
.metric-card::after { content:""; position:absolute; inset:auto 14px 0 14px; height:1px; background:linear-gradient(90deg,transparent,var(--border-2),transparent); opacity:.65; }
.metric-value { font:700 25px/1.1 var(--mono); letter-spacing:-.05em; color:var(--text); font-variant-numeric:tabular-nums; }
.metric-label { margin-top:7px; color:var(--muted); font-size:11.5px; }
.metric-note { margin-top:2px; color:var(--faint); font-size:10.5px; }
.metric-card.go .metric-value { color:var(--go); }
.metric-card.warn .metric-value { color:var(--warn); }
.metric-card.crit .metric-value { color:var(--crit); }
.stats-inline { display:flex; gap:16px; flex-wrap:wrap; color:var(--faint); font-size:11.5px; margin:-6px 0 19px; }
.stats-inline b { color:var(--text-2); font-weight:630; }

/* Titulo do detalhe: objeto inteiro, mas nao em 26px — um objeto de 900
   caracteres nesse corpo tomaria a tela toda antes do primeiro dado. */
h1.titulo-objeto {
  font-size:19px; line-height:1.32; letter-spacing:-.02em; font-weight:680;
  max-width:78ch; overflow-wrap:anywhere;
}

/* Barra de filtros do farol: mesma linguagem do radar, compacta. */
.farol-filtros {
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end;
  padding:12px 14px; margin-bottom:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
}
.farol-filtros .campo { display:flex; flex-direction:column; gap:4px; }
.farol-filtros .rot {
  font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:700;
}
.farol-filtros select, .farol-filtros input { min-width:132px; }

/* ---------- Farol do dia ----------
   Tela de fechamento: cada bloco responde uma pergunta fechada. Os quatro
   sinais do topo sao a unica parte do sistema onde a cor aparece sem um
   numero do dominio atras — mas ela continua sendo dado, porque codifica
   estado operacional (rodou / atrasado / estourando), nao enfeite. */
/* O numero do dia no subtitulo: e a resposta que a pessoa veio buscar. */
.farol-manchete { color:var(--text); font:700 15px var(--mono); font-variant-numeric:tabular-nums; }

/* Estado da operacao em UMA tira, nao em quatro cartoes. E contexto do
   dia, nao o assunto dele — cartao grande aqui competia com a tabela de
   oportunidades, que e o motivo da tela existir. */
.farol-tira {
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  padding:10px 14px; margin-bottom:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  font-size:12px; color:var(--muted);
}
.tira-item { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.tira-item b { color:var(--text-2); font-weight:620; }
.tira-item span { color:var(--muted); }
.sinal-dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--faint); }
.tira-go   .sinal-dot { background:var(--go);   box-shadow:0 0 0 3px var(--go-bg); }
.tira-warn .sinal-dot { background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg); }
.tira-crit .sinal-dot { background:var(--crit); box-shadow:0 0 0 3px var(--crit-bg); }
.tira-crit span { color:var(--crit); }

.farol-bloco { margin-bottom:14px; padding:0; }
.farol-bloco-topo { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:15px 18px; border-bottom:1px solid var(--border); }
.farol-bloco-topo h2 { margin:0; font-size:15px; font-weight:650; letter-spacing:-.01em; }
.farol-bloco-topo p { margin:3px 0 0; }
.farol-contagem { margin-left:5px; padding:1px 7px; border-radius:6px; background:var(--surface-3); color:var(--text-2); font:700 12px/1.6 var(--mono); font-variant-numeric:tabular-nums; }

.farol-lista { display:flex; flex-direction:column; }
.farol-item { display:flex; align-items:center; gap:13px; padding:11px 18px; border-bottom:1px solid var(--border); color:inherit; text-decoration:none; }
.farol-item:last-child { border-bottom:none; }
.farol-item:hover { background:var(--surface-hover); text-decoration:none; }
.farol-item-corpo { flex:1 1 auto; min-width:0; }
.farol-item-obj {
  display:block; color:var(--text-2); font-size:13px; line-height:1.45;
  overflow-wrap:anywhere; max-width:70ch;
}
.farol-item:hover .farol-item-obj { color:var(--text); }
.farol-item-lado { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto; text-align:right; }

/* Bloco vazio nao e erro: "nada abrindo amanha" e a resposta que fecha o
   dia. Por isso texto normal e sem cor de alerta. */
.farol-vazio { margin:0; padding:20px 18px; color:var(--muted); font-size:13px; }

.farol-rodape { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; margin-top:16px; }
@media (max-width:900px) { .farol-rodape { grid-template-columns:1fr; } }

/* ---------- Badges / score ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; min-height:23px; padding:3px 7px; border-radius:6px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--muted); font-size:10px; font-weight:720; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.badge.go { color:var(--go); border-color:rgba(61,220,132,.25); background:var(--go-bg); }
.badge.avaliar { color:var(--warn); border-color:rgba(242,201,76,.25); background:var(--warn-bg); }
.badge.no_go { color:var(--muted); background:var(--surface-2); }
.badge.urgente { color:var(--crit); border-color:rgba(255,100,109,.28); background:var(--crit-bg); }
.badge.info { color:var(--info); border-color:rgba(141,162,251,.26); background:var(--info-bg); }
.score { display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:28px; padding:3px 7px; border-radius:7px; background:var(--surface-2); color:var(--muted); font:700 13px/1 var(--mono); font-variant-numeric:tabular-nums; }
.score.alto { color:var(--go); background:var(--go-bg); }
.score.medio { color:var(--warn); background:var(--warn-bg); }
.score.baixo { color:var(--muted); }
.score-big { min-width:62px; min-height:46px; font-size:21px; border-radius:10px; }
.score-wrap { display:flex; align-items:center; gap:8px; }
.score-barra { display:block; width:48px; height:3px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.score-barra i { display:block; height:100%; background:var(--faint); }
.score-barra.alto i { background:var(--go); }
.score-barra.medio i { background:var(--warn); }

/* ---------- Toolbar / views / filters ---------- */
.radar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.radar-search { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.radar-search input[type=search] { width:min(480px, 100%); flex:1; }
.view-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.view-label { color:var(--faint); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-right:4px; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:5px 9px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--muted); font-size:11.5px; font-weight:580; }
.chip:hover { border-color:var(--border-2); color:var(--text); background:var(--surface-2); }
.chip.ativo { color:var(--text); background:var(--surface-3); border-color:#424c61; }
.chip .n { min-width:18px; padding:0 5px; height:18px; display:grid; place-items:center; border-radius:5px; background:rgba(255,255,255,.05); color:var(--text-2); font:650 10px var(--mono); }
.chip.salvo { padding-right:4px; }
.chip.salvo form { display:inline; }
.chip .x { width:23px; min-height:23px; padding:0; border:0; background:transparent !important; color:var(--faint); }
.chip .x:hover { color:var(--crit); }
.quick-actions { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.quick-actions form { margin:0; }
.filter-form { margin:0; }
.filter-drawer-backdrop { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.48); opacity:0; visibility:hidden; transition:.18s ease; }
/* visibility:hidden tira os 13 controles do drawer fechado da ordem de Tab
   (transform sozinho não tira) sem tirá-los do form GET — o "Aplicar" da
   barra continua serializando os valores. O atraso na visibility espera a
   animação de saída, mesmo padrão do backdrop acima. */
.filter-drawer { position:fixed; z-index:71; inset:0 0 0 auto; width:min(430px, 100vw); padding:22px; background:var(--sidebar); border-left:1px solid var(--border); transform:translateX(100%); visibility:hidden; transition:transform .2s ease, visibility 0s .2s; overflow:auto; }
.filter-drawer.open { transform:translateX(0); visibility:visible; transition:transform .2s ease, visibility 0s; }
.filter-drawer-backdrop.open { opacity:1; visibility:visible; }
.drawer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.drawer-head h2 { margin:0; font-size:18px; }
.drawer-fields { display:grid; gap:13px; }
.drawer-fields .field select, .drawer-fields .field input { width:100%; }
.drawer-footer { display:flex; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.save-view { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; padding:9px 10px; border:1px dashed var(--border-2); border-radius:9px; background:rgba(255,255,255,.012); }
.save-view .meta { margin:0; }

/* ---------- Data tables ---------- */
.tabela-wrap { overflow:auto; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
table { width:100%; border-collapse:separate; border-spacing:0; background:transparent; font-size:12.5px; }
th { position:sticky; top:0; z-index:4; padding:10px 12px; text-align:left; white-space:nowrap; background:#151a24; border-bottom:1px solid var(--border-2); color:var(--faint); font-size:9.5px; font-weight:750; text-transform:uppercase; letter-spacing:.1em; }
td { padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text-2); }
tr:last-child td { border-bottom:0; }
tbody tr { transition:background .12s ease; }
tbody tr:hover td { background:rgba(255,255,255,.018); }
/* O objeto aparece INTEIRO, sempre. Era cortado em 175 caracteres, e a
   parte cortada e justamente onde costuma estar o que decide: "com
   fornecimento e instalacao", "incluindo manutencao por 12 meses". Nao da
   para triar lendo meia frase.

   O custo e altura de linha, entao a medida e controlada: max-width em
   ch prende a linha em ~85 caracteres, que e a faixa legivel, e a coluna
   nao empurra as outras. `overflow-wrap` quebra palavra gigante (URL,
   codigo de processo) em vez de estourar a tabela na horizontal. */
td.objeto { min-width:330px; max-width:62ch; }
td.objeto a, .opportunity-title {
  display:block; color:var(--text); font-size:13px; line-height:1.45;
  font-weight:620; letter-spacing:-.01em;
  overflow-wrap:anywhere; hyphens:auto;
}
td.objeto a:hover { color:#fff; }
/* A marca no objeto E o dado: o termo do perfil (ou da busca) que pontuou
   a linha. Significa "termo positivo casou aqui", nao "decisao GO" —
   aparece tambem em linha de score 0/NO_GO, por design.
   Contraste calculado a mao: 8.31:1 (#3ddc84 sobre o blend de
   rgba(61,220,132,.10) com --surface #131720 = #172b2a). O
   checar_contraste nao cobre este par porque so le tokens #hex do :root
   e --go-bg e rgba; o par e o MESMO ja usado por .score.alto acima. */
mark.hit { background:var(--go-bg); color:var(--go); font-weight:650; border-radius:3px; padding:0 1px; }
.meta { color:var(--muted); font-size:11.5px; margin-top:3px; }
.faint { color:var(--faint); }
.nums { white-space:nowrap; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11.5px; }
.row-accent { position:relative; }
tr.urgente td:first-child::before, tr.nova td:first-child::before { content:""; position:absolute; inset:0 auto 0 0; width:2px; }
tr.urgente td:first-child, tr.nova td:first-child { position:relative; }
tr.urgente td:first-child::before { background:var(--crit); }
tr.nova:not(.urgente) td:first-child::before { background:var(--go); }
.deadline { display:flex; flex-direction:column; gap:2px; white-space:nowrap; }
.deadline strong { color:var(--text-2); font-size:12px; }
.deadline.urgent strong { color:var(--crit); }
.tag-nova { margin-top:5px; color:var(--go); font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.07em; }
.row-actions { opacity:0; display:flex; gap:5px; transition:opacity .12s ease; }
tr:hover .row-actions { opacity:1; }
/* Teclado: botão focável invisível é falha WCAG 2.4.7 — a linha revela as
   ações quando o foco entra nela, como o hover já fazia. */
tr:focus-within .row-actions { opacity:1; }
.row-action { min-height:28px; padding:4px 8px; font-size:10.5px; }

/* ---------- Detail page ---------- */
.detail-hero { margin-bottom:16px; }
.detail-back { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; margin-bottom:16px; }
.detail-title-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; }
.detail-title { min-width:0; }
.detail-title h1 { max-width:1000px; font-size:24px; line-height:1.32; }
.detail-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--muted); font-size:12px; margin-top:7px; }
.detail-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 315px; gap:16px; align-items:start; }
.detail-main { min-width:0; }
.detail-side { display:grid; gap:12px; position:sticky; top:20px; }
.detail-tabs { display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--border); margin-bottom:14px; overflow:auto; }
.detail-tab { padding:9px 11px; border:0; border-bottom:2px solid transparent; border-radius:0; min-height:38px; background:transparent !important; color:var(--muted) !important; font-size:12px; }
.detail-tab.active { color:var(--text) !important; border-bottom-color:var(--text); }
.tab-panel { display:none; }
.tab-panel.active { display:grid; gap:12px; }
.ai-hero { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:17px; border:1px solid var(--border); border-radius:10px; background:linear-gradient(135deg,rgba(61,220,132,.045),transparent 45%), var(--surface); }
.ai-decision { min-width:88px; padding:12px; text-align:center; border-radius:9px; background:var(--go-bg); border:1px solid rgba(61,220,132,.18); }
.ai-decision.no { background:var(--surface-2); border-color:var(--border); }
.ai-decision.eval { background:var(--warn-bg); border-color:rgba(242,201,76,.2); }
.ai-decision strong { display:block; font-size:17px; color:var(--go); }
.ai-decision.no strong { color:var(--muted); }
.ai-decision.eval strong { color:var(--warn); }
.ai-decision span { display:block; margin-top:5px; color:var(--muted); font:650 10px var(--mono); }
.ai-summary p { margin:0 0 7px; color:var(--text-2); }
.ai-summary .meta { margin:0; }
.ai-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ai-list-card { padding:14px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }
.ai-list-card h3 { display:flex; align-items:center; gap:7px; }
ul.lista, ol.lista { margin:7px 0 0; padding-left:19px; color:var(--text-2); }
ul.lista li, ol.lista li { margin-bottom:6px; }
.objeto-full { color:var(--text-2); font-size:13.5px; line-height:1.72; white-space:pre-wrap; max-width:90ch; }
dl.dados { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 14px; margin:0; font-size:12.5px; }
dl.dados dt { color:var(--muted); }
dl.dados dd { margin:0; color:var(--text-2); min-width:0; word-break:break-word; }
.side-stat { padding:12px 0; border-bottom:1px solid var(--border); }
.side-stat:first-of-type { padding-top:0; }
.side-stat:last-child { border-bottom:0; padding-bottom:0; }
.side-stat-label { color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:720; }
.side-stat-value { margin-top:3px; color:var(--text); font-size:15px; font-weight:650; }
.next-step { border-left:2px solid var(--warn); padding:10px 12px; background:var(--warn-bg); border-radius:0 8px 8px 0; color:var(--text-2); }

/* ---------- Kanban ---------- */
.pipeline-summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.kanban { display:flex; gap:10px; overflow:auto; padding:2px 2px 18px; scroll-snap-type:x proximity; }
.coluna { width:280px; min-width:280px; padding:0; scroll-snap-align:start; }
.coluna-topo { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 5px 8px; color:var(--muted); font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.kanban-dropzone { min-height:160px; padding:3px; border-radius:10px; transition:background .15s ease, box-shadow .15s ease; }
.kanban-dropzone.drag-over { background:rgba(141,162,251,.06); box-shadow:inset 0 0 0 1px rgba(141,162,251,.18); }
.mini { margin-bottom:8px; padding:13px; border:1px solid var(--border); border-radius:9px; background:var(--surface); cursor:grab; box-shadow:0 1px 0 rgba(0,0,0,.1); }
.mini:active { cursor:grabbing; }
.mini.dragging { opacity:.48; }
.mini .titulo {
  display:block; color:var(--text); font-size:12.5px; font-weight:620;
  line-height:1.45; margin:8px 0 7px; overflow-wrap:anywhere;
}
.mini-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mini-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; }
.kanban-empty { padding:24px 8px; text-align:center; color:var(--faint); font-size:11px; border:1px dashed var(--border); border-radius:9px; }
/* Dono do card: tom NEUTRO de propósito — o chip carrega DADO (quem), não é semáforo. Tokens já medidos pelo checar_contraste (muted/surface-2). */
.chip-resp { display:inline-flex; align-items:center; min-height:23px; max-width:120px; padding:3px 7px; border-radius:6px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--muted); font-size:10px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-assumir { min-height:23px; padding:2px 8px; background:transparent !important; color:var(--muted) !important; border:1px dashed var(--border-control); border-radius:6px; font-size:10px; }
.btn-assumir:hover { color:var(--text) !important; border-style:solid; }

/* ---------- Config ---------- */
.config-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:18px; align-items:start; }
.config-nav { position:sticky; top:20px; display:grid; gap:4px; }
.config-nav button { justify-content:flex-start; width:100%; background:transparent !important; color:var(--muted) !important; border-color:transparent; min-height:36px; }
.config-nav button:hover { background:var(--surface-2) !important; color:var(--text) !important; }
.config-nav button.active { background:var(--surface-3) !important; color:var(--text) !important; border-color:var(--border); }
.config-panel { display:none; }
.config-panel.active { display:block; }
.config-section { margin-bottom:14px; }
.config-section > .card + .card { margin-top:10px; }
.term-table { display:grid; gap:8px; }
.term-row { border:1px solid var(--border); border-radius:9px; background:var(--surface); overflow:hidden; }
.term-main { display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(200px,1.6fr) 90px auto; gap:10px; align-items:end; padding:12px; }
.term-main input, .term-main select { width:100%; }
.term-coverage { padding:0 12px 12px; }
.term-coverage details { border-top:1px solid var(--border); padding-top:10px; }
.term-coverage summary { cursor:pointer; color:var(--muted); font-size:11.5px; }
.ufs { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:9px; }
.ufs label.uf { position:relative; cursor:pointer; user-select:none; min-width:35px; min-height:30px; display:grid; place-items:center; padding:4px 7px; border-radius:7px; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); font:650 10.5px var(--mono); }
.ufs label.uf input { position:absolute; opacity:0; pointer-events:none; }
.ufs label.uf:hover { border-color:var(--border-2); color:var(--text-2); }
.ufs label.uf.on { color:var(--text); border-color:#58647c; background:var(--surface-3); }
/* O checkbox dentro do chip tem opacity:0 — sem isto o foco por teclado
   não aparece em lugar nenhum. Mesmo anel do :focus-visible global. */
.ufs label.uf:focus-within { outline:2px solid #aebaf8; outline-offset:2px; }
.mini-btn { min-height:30px; padding:4px 9px; background:transparent !important; color:var(--muted) !important; border-color:var(--border); font-size:10.5px; }
.mini-btn:hover { color:var(--text) !important; border-color:var(--border-2); }
.mini-btn.perigo:hover { color:var(--crit) !important; border-color:rgba(255,100,109,.35); background:var(--crit-bg) !important; }
.config-save { position:sticky; bottom:12px; z-index:12; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding:10px 12px; border:1px solid var(--border-2); border-radius:10px; background:rgba(19,23,32,.96); backdrop-filter:blur(14px); box-shadow:0 12px 36px rgba(0,0,0,.34); }
.config-save .meta { margin:0; }
.prio-block + .prio-block { margin-top:15px; padding-top:15px; border-top:1px solid var(--border); }

/* ---------- Analytics ---------- */
.analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.analytics-grid .card.wide { grid-column:1 / -1; }
.grafico { width:100%; height:auto; display:block; overflow:visible; margin-top:5px; }
.grafico .eixo { stroke:var(--border-2); stroke-width:1; }
.grafico .barra-v { fill:#69758e; opacity:.75; }
.grafico .area { fill:#69758e; opacity:.13; }
.grafico .linha { fill:none; stroke:#9ba7c0; stroke-width:2; stroke-linejoin:round; }
.legenda { display:flex; gap:13px; flex-wrap:wrap; color:var(--muted); font-size:10.5px; margin-top:8px; }
.legenda span::before { content:""; display:inline-block; width:7px; height:7px; border-radius:2px; background:#69758e; margin-right:5px; }
.barra { height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.barra i { display:block; height:100%; background:#68758e; border-radius:inherit; }
.progress-row + .progress-row { margin-top:10px; }
.progress-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; margin-bottom:5px; }

/* ---------- Operation ---------- */
.health-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.health-card { padding:14px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }
.health-head { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:11.5px; font-weight:620; }
.health-value { margin-top:8px; font-size:18px; font-weight:680; letter-spacing:-.02em; }
.health-note { color:var(--muted); font-size:10.5px; margin-top:2px; }

/* ---------- Import ---------- */
.import-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:14px; }
.dropzone { border:1px dashed var(--border-2); border-radius:10px; padding:14px; background:rgba(255,255,255,.012); }
.dropzone textarea { min-height:260px; border:0; background:transparent; padding:6px; box-shadow:none; }
.dropzone textarea:focus { box-shadow:none; }
.import-steps { display:grid; gap:8px; margin-top:12px; }
.import-step { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; }
.step-num { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--surface-3); color:var(--text-2); font:650 10px var(--mono); }
.import-step b { display:block; font-size:12px; color:var(--text-2); }
.import-step p { margin:2px 0 0; color:var(--muted); font-size:11px; }

/* ---------- Notices / misc ---------- */
.aviso { margin-bottom:14px; padding:11px 13px; border:1px solid var(--border); border-left:2px solid var(--warn); border-radius:0 9px 9px 0; background:var(--surface); color:var(--text-2); font-size:12.5px; }
.aviso.erro { border-left-color:var(--crit); background:linear-gradient(90deg,var(--crit-bg),transparent 55%),var(--surface); }
.aviso.ok { border-left-color:var(--go); background:linear-gradient(90deg,var(--go-bg),transparent 55%),var(--surface); }
.aviso a { text-decoration:underline; }
.vazio { text-align:center; padding:42px 18px !important; color:var(--faint); }
.paginacao { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; }
.acoes { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
code { padding:2px 5px; border-radius:5px; background:var(--surface-3); color:var(--text-2); font:11px var(--mono); }
pre { font-family:var(--mono); }
details > summary { list-style:none; }
details > summary::-webkit-details-marker { display:none; }

/* ---------- Users ---------- */
.users-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; align-items:start; }
.user-row-form { display:flex; gap:6px; align-items:center; }
.user-row-form select { min-height:32px; padding:5px 8px; font-size:11.5px; }
.user-row-form button { min-height:32px; padding:5px 9px; }
.user-detail { padding:10px 12px; border-top:1px solid var(--border); background:rgba(255,255,255,.012); }
.user-detail summary { cursor:pointer; color:var(--muted); font-size:11px; }

/* ---------- Login ---------- */
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(430px,.9fr); background:var(--bg); }
.login-visual { padding:52px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--border); background:radial-gradient(circle at 30% 25%,rgba(141,162,251,.08),transparent 32%),radial-gradient(circle at 70% 75%,rgba(61,220,132,.045),transparent 30%),var(--sidebar); }
.login-visual .brand { padding:0; }
.login-copy { max-width:580px; }
.login-copy h1 { font-size:42px; line-height:1.05; letter-spacing:-.05em; }
.login-copy p { max-width:500px; color:var(--muted); font-size:14px; }
.login-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:24px; }
.login-point { padding:12px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.015); color:var(--muted); font-size:11px; }
.login-point b { display:block; color:var(--text-2); font-size:13px; margin-bottom:3px; }
.login-panel { display:grid; place-items:center; padding:32px; }
.login-box { width:min(390px,100%); }
.login-box h2 { font-size:23px; margin:0 0 5px; }
.login-box .sub { margin-bottom:22px; }
.login-box .field { margin-bottom:12px; }
.login-box input { width:100%; min-height:42px; }
.login-box button { width:100%; min-height:42px; margin-top:4px; }
.login-foot { margin-top:14px; color:var(--faint); font-size:10.5px; text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-grid { grid-template-columns:minmax(0,1fr) 290px; }
  .ai-columns { grid-template-columns:1fr; }
  .users-layout, .import-grid { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 230px; }
  .sidebar { transform:translateX(-100%); transition:transform .2s ease; box-shadow:20px 0 60px rgba(0,0,0,.42); }
  .sidebar.open { transform:translateX(0); }
  .main-wrap { margin-left:0; }
  .mobile-topbar { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--border); background:var(--sidebar); position:sticky; top:0; z-index:35; }
  .mobile-menu-btn { width:36px; min-height:36px; padding:0; background:var(--surface-2) !important; color:var(--text) !important; }
  main { padding:22px 16px 60px; }
  .detail-grid, .config-layout { grid-template-columns:1fr; }
  .detail-side { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .config-nav { position:static; display:flex; overflow:auto; padding-bottom:4px; }
  .config-nav button { width:auto; flex:0 0 auto; }
  .analytics-grid { grid-template-columns:1fr; }
  .analytics-grid .card.wide { grid-column:auto; }
  .term-main { grid-template-columns:1fr 1fr; }
  .login-page { grid-template-columns:1fr; }
  .login-visual { display:none; }
}
@media (max-width: 650px) {
  .page-header, .radar-toolbar { flex-direction:column; align-items:stretch; }
  .page-header-actions { justify-content:flex-start; }
  .metrics-grid, .health-grid, .detail-side, .form-grid, .form-grid.three { grid-template-columns:1fr; }
  .radar-search { flex-wrap:wrap; }
  .radar-search input[type=search] { width:100%; flex-basis:100%; }
  .detail-title-row { grid-template-columns:auto minmax(0,1fr); }
  .detail-actions { grid-column:1 / -1; justify-content:flex-start; }
  .term-main { grid-template-columns:1fr; }
  .config-save { align-items:flex-start; flex-direction:column; }
  .login-panel { padding:22px; }
  td.objeto { min-width:260px; }
  .row-actions { opacity:1; }
}

/* ---------------- Utilitários ----------------
   Cada um nasceu de inline style repetido de verdade nos templates, não
   de especulação — a lista veio de auditar `style="..."` linha por linha.
   Largura de barra proporcional a um valor CONTINUA inline: isso é dado,
   não estilo, e virar classe esconderia a régua "cor é dado". */
.mt-8  { margin-top:8px; }
.mt-10 { margin-top:10px; }
.mt-12 { margin-top:12px; }
.mt-14 { margin-top:14px; }
.mt-16 { margin-top:16px; }
.mt-18 { margin-top:18px; }
.ml-8  { margin-left:8px; }
.w-100 { width:100%; }
.hidden { display:none; }
.text-crit   { color:var(--crit); }
.text-go     { color:var(--go); }
.text-strong { color:var(--text); }
.text-2      { color:var(--text-2); }
.m-0 { margin:0; }
.flex-row { display:flex; align-items:center; gap:7px; }
.pre-wrap { white-space:pre-wrap; max-width:680px; }
summary { cursor:pointer; }

/* Cartão cuja tabela toca a borda — usuários, coletas em blocos futuros.
   Um card-header dentro ganha o respiro de volta; a tabela filha perde
   moldura própria, porque o card já é a moldura. */
.card-flush { padding:0; overflow:hidden; }
.card-flush .card-header { padding:16px 16px 4px; margin-bottom:0; }
.card-flush .tabela-wrap { border:0; border-radius:0; }
.td-flush { padding:0; }

/* Estado vazio centralizado, com hierarquia (título → explicação →
   ação) — diferente de `.farol-vazio`, que é uma linha de texto solta. */
.empty-hero { text-align:center; padding:44px 20px; }
.empty-hero .lead { margin:0 0 6px; color:var(--text-2); font-size:15px; }
.empty-hero .meta { margin:0 0 18px; }

.metrics-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }

.brand-sm { margin:0; padding:0; min-height:auto; }
.brand-mark-sm { width:27px; height:27px; }

.yaml-editor { font-family:var(--mono); font-size:11.5px; }
.user-name { color:var(--text); font-weight:620; }

/* ---------- Acessibilidade ---------- */
/* Primeiro Tab da página: pula as 8-11 paradas da sidebar direto para o
   conteúdo. Invisível fora do foco, mesmo par de cor do botão primário. */
.skip-link { position:fixed; top:-48px; left:12px; z-index:100; padding:10px 14px; border-radius:8px; background:var(--primary); color:var(--primary-ink); font-weight:650; transition:top .15s ease; }
.skip-link:focus { top:12px; }
/* Texto só para leitor de tela — cabeçalho de coluna de ações, etc. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* O transition-delay:0s é obrigatório: sem ele a visibility do drawer
   (delay .2s) atrasaria o sumiço justamente para quem pediu menos
   movimento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; transition-delay:0s !important; animation-duration:.01ms !important; }
}