/* Watch Dogs — visual aprovado (rascunho_visual.html): paleta petróleo/terracota,
   IBM Plex, densidade do dashboard_gerador.py do AIB3. Tema único, escuro.
   Regra do Douglas: texto nunca quase da cor do fundo — títulos em terracota e
   negrito, texto secundário claro o bastante para ler de longe. */
:root {
  --fundo: #05090c;
  --ground: #0a1116;
  --surface: #111b22;
  --surface2: #16232b;
  --line: #223038;
  --moldura: #3e4f5a;
  --ink: #e7edef;
  --ink-dim: #aab8c1;
  --ink-faint: #4a5860;
  --signal: #d97757;
  --signal-dim: #3a2419;
  --pos: #00c853;
  --pos-dim: #0f2a1c;
  --neg: #ff3d57;
  --neg-dim: #33141a;
  --warn: #ffc107;
  --think: #00b8ff;
  --neutro: #6b7a84;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { display: flex; flex-direction: column; min-height: 100vh; padding: 14px; }
h1, h2, p { margin: 0; }
a { color: var(--signal); }
a:hover { color: #e9946f; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* Títulos de card e subtítulo da marca: terracota + negrito dão vida. */
.card h2.eyebrow, .topbar .eyebrow { font-size: 10.5px; font-weight: 700; color: var(--signal); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.neutro { color: var(--ink-dim); }
.marca { font-family: var(--mono); font-weight: 700; letter-spacing: .1em; white-space: nowrap; color: var(--ink); }
.marca span { color: var(--signal); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes growBar { from { width: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes deslizarTopo {
  from { opacity: 0; transform: translateY(-8px); background: rgba(217, 119, 87, .12); }
  to { opacity: 1; transform: translateY(0); background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.spinner {
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--think);
  animation: girar .9s linear infinite;
}
.carregando { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); }
.vazio { font-size: 12px; line-height: 1.5; color: var(--ink-dim); }

/* ---------- moldura do app ---------- */
.tela {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--ground);
  border: 1px solid var(--moldura);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  overflow: hidden;
  font-size: 13px;
}

/* ---------- barra superior ---------- */
.topbar {
  height: 56px; flex-shrink: 0;
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar .marca { font-size: 15px; }
.topbar .espaco { flex: 1; }
.relogio { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
#rotulo-pregao { font-weight: 700; color: var(--signal); }
.status-dot {
  width: 9px; height: 9px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--neutro);
  cursor: default;
  transition: background-color .6s var(--ease);
}
.status-dot.online { background: var(--pos); }
.status-dot.sem_conexao { background: var(--neg); }
.topbar .divisor { width: 1px; height: 22px; background: var(--line); }
.usuario { max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.btn-sair {
  padding: 5px 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.btn-sair:hover { border-color: var(--ink-dim); color: var(--ink); }

/* ---------- trilho lateral + conteúdo ---------- */
.corpo { flex: 1; min-height: 0; display: flex; }
.rail {
  width: 56px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.rail .espaco { flex: 1; }
.rail .divisor { width: 22px; height: 1px; margin-bottom: 8px; background: var(--line); }
.rail-icon {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-dim);
  transition: background-color .2s var(--ease);
}
.rail-icon:hover { background: var(--surface2); }
.rail-icon.ativo { background: var(--signal-dim); border-color: var(--signal); color: var(--signal); cursor: default; }
.rail-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.conteudo { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; }

/* ---------- grade: 4 colunas fixas, cada linha fecha exato ---------- */
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-content: start; }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
}
@media (max-width: 700px) {
  body { padding: 8px; }
  .grade { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .rail, .topbar .eyebrow, .relogio { display: none; }
}

/* ---------- cards ---------- */
.card {
  min-width: 0;
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  animation: fadeUp .5s var(--ease) both;
}
.grade .card:nth-child(2) { animation-delay: .04s; }
.grade .card:nth-child(3) { animation-delay: .08s; }
.grade .card:nth-child(4) { animation-delay: .12s; }
.grade .card:nth-child(5) { animation-delay: .16s; }
.grade .card:nth-child(6) { animation-delay: .20s; }
.grade .card:nth-child(7) { animation-delay: .24s; }
.grade .card:nth-child(8) { animation-delay: .28s; }
.grade .card:nth-child(9) { animation-delay: .32s; }
.grade .card:nth-child(10) { animation-delay: .36s; }
.grade .card:nth-child(11) { animation-delay: .40s; }
.grade .card:nth-child(12) { animation-delay: .44s; }
.card-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.contador { font-size: 10px; font-weight: 600; color: var(--ink-dim); }
.bloco { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; }

.tabela { overflow-x: auto; }
.card table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.card th, .card td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.card th:first-child, .card td:first-child, .card .esq { text-align: left; }
.card td.esq { white-space: normal; }
.card th { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); }
.card tbody tr:last-child td { border-bottom: none; }

.rodape { font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--ink-dim); }
.rodape b { color: var(--ink); font-weight: 600; }
.rodape.fim { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }

.tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink-dim);
  white-space: nowrap;
  vertical-align: middle;
}
.tag.alta-imp, .tag.defasagem { border-color: var(--warn); color: var(--warn); }
.tag.camada1 { border-color: var(--pos); color: var(--pos); }
.tag.camada2, .tag.camada3 { border-color: var(--think); color: var(--think); }
.tag.confirmado { background: var(--pos-dim); border-color: var(--pos); color: var(--pos); }

.aviso { padding: 7px 9px; border-radius: 4px; background: var(--surface2); font-size: 11px; line-height: 1.5; color: var(--ink-dim); }
.aviso b { color: var(--ink); font-weight: 600; }

.lista { max-height: 330px; overflow-y: auto; padding-right: 4px; }
.item { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.45; }
.item:first-child { padding-top: 0; }
.item:last-child { padding-bottom: 0; border-bottom: none; }
.item .meta { margin-top: 3px; font-family: var(--mono); font-size: 10px; color: var(--ink-dim); }
.item-novo { animation: deslizarTopo .6s var(--ease) both; }
.linha-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 3px; }

/* Teses Vivas — baixa à esquerda (lado do urso), alta à direita (lado do touro),
   igual à barra, que cresce do centro para o lado da tese. */
.card.com-banner { padding-top: 0; }
.banner { margin: 0 -16px; }
.banner img { display: block; width: 100%; height: auto; }
.tese-topo { display: flex; align-items: baseline; gap: 10px; }
.tese-ativo { font-size: 16px; font-weight: 700; }
.tese-vies { font-size: 13px; font-weight: 700; }
.tese-vies.lado-direito { margin-left: auto; }
.tese-vies.lado-centro { margin: 0 auto; }
.barra2 { position: relative; height: 6px; margin-top: 7px; overflow: hidden; background: var(--surface2); border-radius: 3px; }
.barra2 .centro { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ink-faint); }
.barra2 .fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; animation: growBar .8s var(--ease) both; }
.renderizado .barra2 .fill { animation: none; }
.comps { margin-top: 6px; font-size: 10.5px; font-weight: 600; color: var(--ink-dim); }
.separador { height: 1px; background: var(--line); }

/* Fluxo, book e ignição */
.sensor { display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.45; color: var(--ink-dim); }
.sensor b { color: var(--ink); }
.sensor-inativo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); }
.sensor-inativo b { color: var(--ink); }
.sensor-inativo .dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--neutro); }

/* Posicionamento institucional */
.referencia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.referencia .eyebrow { width: 100%; }
.data-ref { font-size: 20px; font-weight: 700; color: var(--ink); }

/* Comitê e fechamento */
.parecer { font-size: 12px; line-height: 1.5; }
.justificativa { margin-top: 3px; color: var(--ink-dim); }
.desfecho { font-size: 12px; line-height: 1.5; }
.narrativa { max-height: 180px; overflow-y: auto; font-size: 12px; font-style: italic; line-height: 1.55; color: var(--ink-dim); }

.placeholder {
  flex: 1; min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--ink-faint);
  border-radius: 4px;
}

/* ---------- login e telas de estado ---------- */
.tela-login, .tela-estado { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cartao-login, .cartao-estado {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--moldura);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  animation: fadeUp .6s var(--ease) both;
}
.cartao-login { max-width: 380px; padding: 32px 28px; }
.cartao-estado {
  max-width: 420px;
  padding: 32px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.cartao-estado h1 { font-size: 17px; font-weight: 600; }
.cartao-estado p { font-size: 13px; line-height: 1.6; color: var(--ink-dim); }
.cartao-estado .btn-primario { max-width: 160px; }

.logo-login { margin-bottom: 24px; text-align: center; }
.logo-login .marca { font-size: 20px; }
.logo-login .sub { margin-top: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.abas { display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.aba {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.aba.ativa { color: var(--ink); border-bottom-color: var(--signal); }
.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 5px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.campo input {
  width: 100%;
  padding: 10px 12px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .25s var(--ease);
}
.campo input:focus { outline: none; border-color: var(--signal); }
.btn-primario {
  width: 100%;
  margin-top: 6px;
  padding: 11px 0;
  background: var(--signal-dim);
  border: 1px solid var(--signal);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  transition: background-color .25s var(--ease);
}
.btn-primario:hover { background: var(--signal); }
.btn-primario:disabled { opacity: .5; cursor: default; }
.mensagem-erro, .mensagem-ok { margin-bottom: 14px; padding: 8px 12px; border-radius: 6px; font-size: 12px; line-height: 1.5; color: var(--ink); }
.mensagem-erro { background: var(--neg-dim); border: 1px solid var(--neg); }
.mensagem-ok { background: var(--pos-dim); border: 1px solid var(--pos); }
.link-whatsapp { display: block; margin-top: 18px; text-align: center; font-size: 12px; color: var(--ink-dim); }

/* ---------- navegação entre telas ---------- */
a.rail-icon { text-decoration: none; }
.link-cabeca {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--signal);
  text-decoration: none;
  white-space: nowrap;
}
.link-cabeca:hover { color: #e9946f; }

/* ---------- telas dedicadas (cabeçalho e filtros) ---------- */
.pagina-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.titulo-pagina { font-size: 22px; font-weight: 700; color: var(--ink); text-wrap: balance; }
.titulo-pagina span { color: var(--signal); }
.subtitulo { max-width: 72ch; margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-dim); }
.subtitulo b { color: var(--ink); font-weight: 600; }
.filtros {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.grupo-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.grupo-filtro .eyebrow { margin-right: 4px; }
.chip {
  padding: 5px 11px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 600;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip .mono { margin-left: 3px; color: var(--ink); }
.chip:hover { border-color: var(--ink-dim); color: var(--ink); }
.chip.ativo { background: var(--signal-dim); border-color: var(--signal); color: var(--ink); }
.legenda { margin: 0 0 14px; font-size: 11px; line-height: 1.5; color: var(--ink-dim); }
.legenda b { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .pagina-cabeca { flex-direction: column; align-items: flex-start; } }

/* ---------- Radar Corporativo (tela cheia) ---------- */
@keyframes surgirNovo {
  from { opacity: 0; transform: translateY(-8px); box-shadow: 0 0 0 1px var(--signal); }
  to { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 0 transparent; }
}
.grade-radar { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.grade-radar > .vazio, .grade-radar > .carregando { grid-column: 1 / -1; }
.fato {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  animation: fadeUp .5s var(--ease) both;
}
.renderizado .fato { animation: none; }
.fato.fato-novo, .renderizado .fato.fato-novo { animation: surgirNovo .7s var(--ease) both; }
.fato-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fato-ticker { font-size: 15px; font-weight: 700; color: var(--ink); }
.fato-assunto { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.estrelas { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
.estrelas svg { width: 14px; height: 14px; fill: currentColor; }
.estrelas-base { color: var(--ink-faint); white-space: nowrap; }
.estrelas-cheias { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--signal); }
.impacto { display: flex; flex-direction: column; gap: 5px; }
.impacto-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.impacto-valor { font-size: 15px; font-weight: 700; }
.impacto-barra { height: 6px; overflow: hidden; background: var(--surface2); border-radius: 3px; }
.impacto-barra .fill { height: 100%; border-radius: 3px; animation: growBar .8s var(--ease) both; }
.renderizado .impacto-barra .fill { animation: none; }
.fato .meta { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); }
.fato-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-dim);
}
.fato-rodape a { color: var(--signal); font-weight: 700; text-decoration: none; white-space: nowrap; }
.fato-rodape a:hover { text-decoration: underline; }

/* ---------- Administração ---------- */
.warn { color: var(--warn); }
.alternar { display: flex; flex-shrink: 0; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.alternar input { width: 16px; height: 16px; margin: 0; accent-color: var(--signal); cursor: pointer; }
.resumo-admin { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.stat-num { font-size: 26px; font-weight: 700; line-height: 1; }
.stat-rot { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.painel-admin {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.painel-admin h2.eyebrow { font-size: 10.5px; font-weight: 700; color: var(--signal); }
.lista-usuarios > .linha-usuario:first-child { border-top: none; }
.linha-usuario {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.usuario-titulo { font-size: 14px; font-weight: 700; color: var(--ink); }
.usuario-info .meta { margin-top: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); overflow-wrap: anywhere; }
.usuario-info .meta a { color: var(--signal); font-weight: 700; text-decoration: none; }
.usuario-info .meta a:hover { text-decoration: underline; }
.tag.voce { border-color: var(--signal); color: var(--signal); }
.situacao { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 10px; font-weight: 700; white-space: nowrap; }
.situacao-ativo { border-color: var(--pos); background: var(--pos-dim); color: var(--pos); }
.situacao-vencendo { border-color: var(--warn); color: var(--warn); }
.situacao-vencido, .situacao-negado, .situacao-revogado { border-color: var(--neg); background: var(--neg-dim); color: var(--neg); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.dias { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-dim); }
.dias input {
  width: 68px;
  padding: 6px 8px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  text-align: right;
}
.dias input:focus { outline: none; border-color: var(--signal); }
.btn-acao {
  padding: 6px 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn-acao.positivo { background: var(--pos-dim); border-color: var(--pos); }
.btn-acao.positivo:hover { background: #164a2e; }
.btn-acao.perigo { color: var(--ink-dim); }
.btn-acao.perigo:hover { border-color: var(--neg); color: var(--neg); }
.btn-acao.armado { background: var(--neg-dim); border-color: var(--neg); color: var(--ink); }
.btn-acao:disabled { opacity: .5; cursor: default; }
/* ---------- Radar Macro ---------- */
@keyframes pulsoIminente {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, .55); }
  50% { box-shadow: 0 0 0 7px rgba(217, 119, 87, 0); }
}
.carimbo { flex-shrink: 0; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; }
.grade-macro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
.span-3 { grid-column: span 3; }
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; }
.agenda-coluna { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.proximo {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--signal);
  border-radius: 6px;
}
.proximo.iminente { animation: pulsoIminente 1.8s ease-in-out infinite; }
.contagem { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--signal); }
.contagem-pequena { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--signal); white-space: nowrap; }
.lista-eventos { max-height: 360px; overflow-y: auto; padding-right: 4px; }
.evento { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.lista-eventos > .evento:first-child { border-top: none; }
.evento-hora { font-size: 13px; font-weight: 700; color: var(--ink); }
.evento-nome { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.evento .meta, .proximo .meta { margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); }
.evento .meta b, .proximo .meta b { color: var(--ink); }
.chip-comp { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink-dim); white-space: nowrap; }
.chip-comp.surpresa { background: var(--signal-dim); border-color: var(--signal); color: var(--signal); }
.proximo-pregao { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ---------- Painel de Fluxo ---------- */
@keyframes pulsoAgora { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
@keyframes pulsoConfirmada {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, .45); }
  50% { box-shadow: 0 0 0 6px rgba(0, 200, 83, 0); }
}
.grade-fluxo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; margin-top: 12px; }
.bloco-fluxo { display: flex; flex-direction: column; gap: 18px; }
.fluxo-cabeca { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.fluxo-ativo { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink); }
.fluxo-nome { margin-right: 4px; font-size: 12px; font-weight: 600; color: var(--ink-dim); }
.pressao-agora { display: flex; flex-direction: column; gap: 14px; }
.pressao { display: flex; flex-direction: column; gap: 6px; }
.pressao-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: 10px; }
.pressao-lado { display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pressao-lado.pos { justify-content: flex-end; }
.pressao-pct { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: 0; line-height: 1; }
.pressao-barra { position: relative; height: 12px; overflow: hidden; background: var(--neg); border-radius: 3px; }
.pressao-barra.sem-leitura { background: var(--surface2); }
.pressao-barra .compra { position: absolute; top: 0; right: 0; bottom: 0; background: var(--pos); }
.pressao-barra .meio { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: var(--ground); }
.pressao .meta { font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--ink-dim); }
.chips-fluxo { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-comp.alinhado { border-color: var(--ink-dim); color: var(--ink); }
.chip-comp.alerta { border-color: var(--warn); color: var(--warn); }
.grafico-fluxo { display: flex; flex-direction: column; gap: 6px; }
.grafico-fluxo svg { display: block; width: 100%; height: auto; }
.legenda { display: flex; gap: 14px; font-size: 11px; color: var(--ink-dim); }
.legenda i { display: inline-block; width: 16px; margin-right: 5px; vertical-align: middle; border-top: 2px solid var(--pos); border-image: linear-gradient(90deg, var(--pos) 50%, var(--neg) 50%) 1; }
.legenda i.book { border-top: 2px dashed var(--ink-dim); border-image: none; }
.graf-grade { stroke: var(--line); stroke-width: 1; }
.graf-zero { stroke: var(--ink-faint); stroke-width: 1; }
.graf-area-pos { fill: var(--pos); fill-opacity: .2; }
.graf-area-neg { fill: var(--neg); fill-opacity: .2; }
.graf-linha-pos { fill: none; stroke: var(--pos); stroke-width: 1.6; stroke-linejoin: round; }
.graf-linha-neg { fill: none; stroke: var(--neg); stroke-width: 1.6; stroke-linejoin: round; }
.graf-book { fill: none; stroke: var(--ink-dim); stroke-width: 1.2; stroke-dasharray: 4 3; }
.graf-texto { font-family: var(--mono); font-size: 10px; fill: var(--ink-dim); }
.graf-rotulo { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; fill: var(--ink-faint); }
.graf-ponto { fill: currentColor; }
.graf-agora { fill: none; stroke: currentColor; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulsoAgora 2s ease-out infinite; }
.ignicao { display: flex; flex-direction: column; gap: 8px; }
.portoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.portao { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; }
.portao-nome { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.lampada { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--neutro); }
.portao.aberto .lampada { background: var(--pos); box-shadow: 0 0 7px var(--pos); }
.portao.fechado { border-color: var(--neg); }
.portao.fechado .lampada { background: var(--neg); }
.portao .meta { font-size: 11px; line-height: 1.45; color: var(--ink-dim); }
.medidor { height: 4px; overflow: hidden; background: var(--ground); border-radius: 2px; }
.medidor .fill { height: 100%; border-radius: 2px; background: var(--ink-dim); }
.medidor .fill.ok { background: var(--pos); }
.medidor .fill.ruim { background: var(--neg); }
.veredito { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--ink-dim); }
.veredito.confirmada { background: var(--pos-dim); border-color: var(--pos); color: var(--pos); animation: pulsoConfirmada 2.4s ease-in-out infinite; }
.veredito.barrada { border-color: var(--neg); color: var(--neg); }
.veredito .mono { font-size: 10.5px; font-weight: 500; color: var(--ink-dim); }
.nota-fluxo { max-width: 110ch; margin-top: 14px; }
@media (max-width: 1100px) { .grade-fluxo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .portoes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sala de Controle ---------- */
.barra-sistema { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sis-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; cursor: default; }
.sis-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--neutro); }
.sis-item.ok .sis-dot { background: var(--pos); }
.sis-item.alerta .sis-dot { background: var(--neg); }
.sis-rotulo { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.sis-valor { font-weight: 600; color: var(--ink); }
.grade-sala { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
.mapa-grade { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: stretch; }
.mapa-ativo { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 4px; font-size: 18px; font-weight: 700; color: var(--ink); }
.mapa-ativo span { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 11px; font-weight: 500; color: var(--ink-dim); }
.mapa-rotulo { display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 11px; line-height: 1.35; color: var(--ink-dim); }
.mapa-rotulo b { font-size: 13px; font-weight: 700; color: var(--ink); }
.mapa-separador { grid-column: 1 / -1; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.celula { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; }
.celula.nula { background: transparent; border-style: dashed; }
.celula.dominante { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.celula.ok { border-color: var(--pos); }
.celula.barrada { border-color: var(--neg); }
.celula-valor { font-size: 16px; font-weight: 700; color: var(--ink); }
.celula.nula .celula-valor { font-size: 13px; color: var(--ink-dim); }
.celula-meta { font-size: 10.5px; line-height: 1.4; color: var(--ink-dim); }
.celula-marca { position: absolute; top: 6px; right: 8px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--signal); }
.celula-contra { position: absolute; right: 8px; bottom: 6px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--warn); }
.celula-tese { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; }
.tese-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tag-vies { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.tese-conf { font-size: 22px; font-weight: 700; color: var(--ink); }
.medidor-conf, .medidor-score { position: relative; height: 6px; overflow: hidden; background: var(--ground); border-radius: 3px; }
.medidor-conf .fill { height: 100%; background: var(--ink-dim); border-radius: 3px; }
.medidor-conf .marca-50, .medidor-score .centro { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ink-faint); }
.medidor-score .fill { position: absolute; top: 0; bottom: 0; }
.medidor-score .limite { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-dim); }
.sala-grande { font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1.1; }
.sala-grande span { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.sala-meta { font-size: 11px; line-height: 1.5; color: var(--ink-dim); }
.sala-linha { font-size: 12px; line-height: 1.5; color: var(--ink); }
@media (max-width: 1100px) { .grade-sala { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .grade-sala { grid-template-columns: minmax(0, 1fr); }
  .mapa-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mapa-rotulo { grid-column: 1 / -1; }
}

/* ---------- Faixa de cotações (topo de todas as telas, criada pelo app.js) ---------- */
@keyframes piscaAlta { from { background: rgba(0, 200, 83, .3); } to { background: transparent; } }
@keyframes piscaBaixa { from { background: rgba(255, 61, 87, .3); } to { background: transparent; } }
.faixa-cotacoes { height: 30px; flex-shrink: 0; display: flex; align-items: stretch; overflow: hidden; background: var(--ground); border-bottom: 1px solid var(--line); }
.faixa-estado { flex-shrink: 0; display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; cursor: default; }
.faixa-estado.atrasada { color: var(--warn); }
.faixa-janela { position: relative; flex: 1; min-width: 0; display: flex; overflow: hidden; }
/* A rolagem é feita pelo app.js, quadro a quadro, escrevendo o transform aqui —
   não por animação de CSS, que o movimento reduzido do Windows desliga. */
.faixa-trilho { display: flex; flex-shrink: 0; will-change: transform; }
.faixa-copia { display: flex; flex-shrink: 0; }
.cot { display: inline-flex; align-items: baseline; gap: 5px; padding: 0 12px; border-right: 1px solid var(--line); font-size: 11.5px; line-height: 30px; white-space: nowrap; }
.cot b { font-weight: 700; color: var(--ink); }
.cot-seta { font-size: 8px; }
.cot-preco { color: var(--ink); }
.cot-var { font-size: 11px; font-weight: 600; }
.cot.pisca-alta { animation: piscaAlta 1.2s var(--ease); }
.cot.pisca-baixa { animation: piscaBaixa 1.2s var(--ease); }
.cot-grupo { padding: 0 12px; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; line-height: 30px; text-transform: uppercase; color: var(--signal); white-space: nowrap; }
/* Reserva para navegador sem element.animate(): o preço que mudou fica marcado
   até o app.js tirar a classe. Com movimento reduzido a fita continua rolando —
   é informação de pregão, não enfeite. */
@media (prefers-reduced-motion: reduce) {
  .cot.pisca-alta { background: rgba(0, 200, 83, .22); }
  .cot.pisca-baixa { background: rgba(255, 61, 87, .22); }
}
.ativo-linha { display: grid; grid-template-columns: minmax(0, 1.3fr) auto 74px 96px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.grupo-ativos > .ativo-linha:first-child { border-top: none; }
.ativo-nome { display: flex; flex-direction: column; min-width: 0; font-size: 11px; color: var(--ink-dim); }
.ativo-nome .mono { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ativo-preco { font-size: 12px; color: var(--ink-dim); text-align: right; }
.ativo-var { font-size: 14px; font-weight: 700; text-align: right; }
.ativo-z { display: flex; flex-direction: column; gap: 3px; }
.ativo-z .barra2 { margin-top: 0; }
.ativo-z .mono { font-size: 9.5px; color: var(--ink-dim); text-align: right; white-space: nowrap; }
.di-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.di-linha:first-child { border-top: none; }
.di-nome { font-size: 13px; font-weight: 700; color: var(--ink); }
.di-taxa { font-size: 18px; font-weight: 700; color: var(--ink); }
.barra-rotulo { display: flex; flex-direction: column; gap: 4px; }
.barra-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--ink); }
.barra-simples { height: 6px; overflow: hidden; background: var(--surface2); border-radius: 3px; }
.barra-simples .fill { height: 100%; border-radius: 3px; background: var(--signal); animation: growBar .8s var(--ease) both; }
.renderizado .barra-simples .fill { animation: none; }
.mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.regime { display: flex; align-items: baseline; gap: 12px; }
.regime-rotulo { font-size: 22px; font-weight: 700; }
@media (max-width: 1100px) {
  .grade-macro { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .span-3 { grid-column: span 2; }
}
@media (max-width: 900px) { .agenda { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .grade-macro, .mapa { grid-template-columns: minmax(0, 1fr); }
  .span-3, .grade-macro .span-2 { grid-column: auto; }
}

@media (max-width: 1100px) { .resumo-admin { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .resumo-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha-usuario { grid-template-columns: minmax(0, 1fr); }
  .acoes { justify-content: flex-start; }
}