/* Tabuleiro Tropical — página pública. Reaproveita as variáveis de style.css
   (cores, fonte mono, .tape-item, .dot, .up/.down/.flat) e define só o
   layout próprio. Sem biblioteca. */

body.monitor {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  display: block;
  font-size: 13px;
}

/* ------------------------------------------------------------ cabeçalho */
.m-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
}
.m-brand { color: var(--up-ink); font-weight: 700; letter-spacing: .14em; font-size: 13px; white-space: nowrap; }
.m-brand small { color: var(--ink-3); font-weight: 400; letter-spacing: .06em; margin-left: 8px; text-transform: uppercase; font-size: 10px; }
.m-nav { display: flex; gap: 14px; margin-left: auto; }
.m-nav a { color: var(--ink-2); text-decoration: none; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border: 1px solid transparent; }
.m-nav a:hover { color: var(--ink); border-color: var(--line); }
.m-nav a.m-terminal { color: var(--amber-ink); border-color: var(--amber-dim); }
.m-nav a.m-terminal:hover { background: #221a08; }
.m-nav-btn { background: none; color: var(--ink-2); font: inherit; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.m-nav-btn:hover, .m-nav-btn:focus-visible { color: var(--ink); border-color: var(--line); outline: 0; }
.m-clock { color: var(--ink-2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-clock b { color: var(--ink); font-weight: 600; }

/* faixa de indicadores: reaproveita .tape-item de style.css */
.m-tape {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  scrollbar-width: none;
}
.m-tape::-webkit-scrollbar { display: none; }
.m-tape .tape-item { display: flex; gap: 8px; align-items: baseline; padding: 7px 14px; border-right: 1px solid var(--line-soft); white-space: nowrap; }
.m-tape .t-label { color: var(--ink-3); font-size: 10.5px; letter-spacing: .09em; }
.m-tape .t-price { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.m-tape .t-chg { font-size: 11px; font-variant-numeric: tabular-nums; }
.m-tape .t-note { color: var(--ink-3); font-size: 10px; }
.m-tape .t-hora { color: var(--ink-3); font-size: 9.5px; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- grade */
/* `main` em style.css é a grade fixa do terminal (áreas nomeadas, altura da
   viewport, overflow hidden). Tudo isso é zerado aqui: o Monitor é uma página
   que rola. */
.m-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  grid-template-areas: none;
  grid-template-rows: none;
  grid-auto-flow: row;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
  gap: 10px;
  padding: 12px 16px;
  max-width: 1900px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .m-grid { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .m-head { gap: 10px; flex-wrap: wrap; }
  .m-clock { order: 3; width: 100%; text-align: right; }
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-hi);
}
.card-head h2 { margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--ink); font-weight: 700; }
.card-head .desc { color: var(--ink-3); font-size: 10.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head .meta { font-size: 10px; color: var(--ink-3); letter-spacing: .05em; white-space: nowrap; }
.card-head .meta .stale-txt { color: var(--amber-ink); }

/* ------------------------------------------------------------ minimizar
   Todo box (.box) tem cabeçalho (.box-head) com o botão −/+ (.box-btn) e um
   corpo (.box-corpo). Minimizado (.box.min): só o cabeçalho fica; o corpo
   vai a altura 0 com transição curta e sai do foco/leitor de tela. O
   estado vem de localStorage (bm:box:<id>), aplicado antes da primeira
   pintura por um trecho inline de monitor.html. */
.box-btn {
  flex: 0 0 auto; margin-left: 4px; width: 20px; height: 20px; padding: 0; line-height: 18px;
  background: none; border: 1px solid transparent; border-radius: 2px; color: var(--ink-3);
  font: inherit; font-size: 14px; text-align: center; cursor: pointer; align-self: center;
}
.box-btn:hover, .box-btn:focus-visible { color: var(--ink); border-color: var(--line); background: #1a1e26; outline: 0; }
.box > .box-corpo { transition: max-height .18s ease, opacity .18s ease; }
.box.min > .box-corpo { max-height: 0 !important; min-height: 0 !important; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height .18s ease, opacity .18s ease, visibility 0s linear .18s; }
.box.min > .box-head { border-bottom: 0; }
/* cartão minimizado fica baixo na grade (não estica até a linha) */
.card.min { align-self: start; }
/* mapa: a barra quebra linha no celular; o botão fica fixo no canto superior direito */
.mapa-bar { position: relative; padding-right: 36px; }
.mapa-bar .box-btn { position: absolute; top: 6px; right: 8px; margin: 0; }
/* mapa minimizado: só a barra; a seção deixa de ocupar 60vh */
.mapa-secao.min { height: auto; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .box > .box-corpo, .box.min > .box-corpo { transition: none; }
}

/* indicadores do tema */
.ind {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line);
}
.ind-item { background: var(--panel); padding: 7px 10px; min-width: 0; }
.ind-lbl { color: var(--ink-3); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-val { color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ind-val .unit { color: var(--ink-3); font-size: 10px; font-weight: 400; }
.ind-val .chg { font-size: 11px; font-weight: 500; }
.ind-val.na { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.ind-src { color: var(--ink-3); font-size: 9.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-item.est .ind-lbl::after { content: ' ~'; color: var(--amber-ink); }
.ind-list { list-style: none; margin: 4px 0 0; padding: 0; font-size: 10.5px; }
.ind-list li { display: flex; gap: 6px; justify-content: space-between; color: var(--ink-2); line-height: 1.5; }
.ind-list li .sym { color: var(--ink); font-weight: 600; }
.ind-list li .chg { font-variant-numeric: tabular-nums; }
.ind-list.gov li { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-list.gov a { color: var(--ink-2); text-decoration: none; }
.ind-list.gov a:hover { color: var(--amber-ink); }
.ind-item.wide { grid-column: 1 / -1; }

/* resumo */
.resumo { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.resumo b { display: block; color: var(--ink-3); font-size: 9.5px; letter-spacing: .1em; margin-bottom: 4px; font-weight: 600; }
.resumo .fontes { color: var(--ink-3); font-size: 10.5px; margin-top: 4px; }

/* manchetes: reaproveita .news-item/.news-meta/.news-title de style.css */
.manchetes { display: flex; flex-direction: column; }
.manchetes .news-item { padding: 6px 12px; }
.news-src .via { color: var(--ink-3); margin-left: 2px; }
.news-src .cruz { color: var(--blue-ink); margin-left: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.news-item.hidden { display: none; }
.ver-mais {
  background: none; border: 0; border-top: 1px solid var(--line-soft);
  color: var(--amber-ink); font: inherit; font-size: 11px; letter-spacing: .08em;
  padding: 8px 12px; text-align: left; cursor: pointer; text-transform: uppercase;
}
.ver-mais:hover { background: #161a21; }
.card .msg { padding: 12px; }
.card .skel { padding: 12px; }

/* --------------------------------------------------------------- rodapé */
.m-foot {
  display: flex;
  flex-wrap: wrap;
  /* `footer` em style.css é a barra de atalhos do terminal (nowrap + rolagem
     horizontal); aqui o rodapé precisa quebrar linha em 375 px. */
  white-space: normal;
  overflow: visible;
  gap: 6px 20px;
  padding: 12px 16px 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 10.5px;
  line-height: 1.5;
}
.m-foot-src { width: 100%; }

/* ======================================================== painéis extras
   Eleições 2026, Risco externo, Segurança pública, Energia e governo. Mesmo
   cartão dos temas; só os miolos são novos. */
.card.wide { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .card.wide { grid-column: span 2; }
}
.msg.fontes-status { padding: 8px 12px; border-top: 1px solid var(--line-soft); font-size: 10px; }

/* barra horizontal simples (pesquisas, mercados, intensidade) */
.barra { height: 5px; background: #1b1f27; border-radius: 2px; overflow: hidden; min-width: 0; }
.barra-fill { height: 100%; background: var(--up); border-radius: 2px; }
.barra-fill.azul { background: var(--blue); }
.barra-fill.ambar { background: var(--amber); }
.barra-fill.vermelho { background: var(--down); }

/* --- eleições */
.el-contagem { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line-soft); border-bottom: 1px solid var(--line); }
.el-turno { background: var(--panel); padding: 9px 12px; }
.el-turno-lbl { display: block; color: var(--ink-3); font-size: 9.5px; letter-spacing: .1em; }
.el-turno b { display: block; color: var(--amber-ink); font-size: 17px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.el-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line-soft); border-bottom: 1px solid var(--line); }
.el-bloco { background: var(--panel); padding: 9px 12px; min-width: 0; }
.el-bloco h3 { margin: 0 0 7px; color: var(--ink-3); font-size: 9.5px; letter-spacing: .14em; font-weight: 700; }
.el-bloco .msg { padding: 6px 0; }
.el-meta { color: var(--ink-2); font-size: 10.5px; margin-bottom: 7px; }
.el-cands { display: grid; gap: 5px; }
.el-cand { display: grid; grid-template-columns: minmax(70px, 120px) 1fr 44px; gap: 8px; align-items: center; font-size: 11px; }
.el-nome { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-pct { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.el-nota { color: var(--ink-3); font-size: 10px; margin-top: 6px; line-height: 1.4; }
.el-fonte { color: var(--ink-3); font-size: 10px; margin-top: 7px; }
.el-fonte a, .ind-src a { color: var(--ink-3); text-decoration: underline dotted; }
.el-fonte a:hover, .ind-src a:hover { color: var(--amber-ink); }
.el-mercados .pm-item { padding: 4px 0; border-bottom: 0; }
.el-mercados .pm-q a { color: var(--ink); text-decoration: none; }
.el-mercados .pm-q a:hover { color: var(--amber-ink); }
.el-mercados .pm-foot { font-variant-numeric: tabular-nums; }
.el-aviso { padding: 7px 12px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 10px; line-height: 1.45; border-left: 2px solid var(--amber-dim); }

/* --- risco externo */
.metricas { display: flex; flex-direction: column; }
.metrica { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); }
.sem { width: 8px; height: 8px; border-radius: 50%; background: var(--flat); display: inline-block; }
.sem.verde { background: var(--up-ink); }
.sem.ambar { background: var(--amber-ink); }
.sem.vermelho { background: var(--down-ink); }
.sem.vazio { background: transparent; border: 1px solid var(--line-soft); }
.ge-partes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.ge-partes li { position: relative; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-2); padding: 2px 4px; }
.ge-partes li b { font-weight: 500; color: var(--ink); white-space: nowrap; }
.ge-partes li i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--amber-ink); opacity: .55; border-radius: 1px; }
.met-bloco { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 10px 12px 4px; font-weight: 600; }
.metrica > .met-lbl { grid-column: 2; min-width: 0; }
.metrica:not(:has(.sem)) > .met-lbl { grid-column: 1 / 3; }
.met-lbl span { display: block; color: var(--ink-2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.met-lbl small { display: block; color: var(--ink-3); font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.met-val { color: var(--ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.met-chg { font-size: 10.5px; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }
.met-chg:empty { display: none; }

/* --- segurança pública */
.centros { display: flex; flex-direction: column; }
.centro { padding: 8px 12px 4px; border-bottom: 1px solid var(--line); }
.centro-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.centro-nome { color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.centro-n { color: var(--ink-3); font-size: 10px; flex: 1; }
.centro-score { color: var(--ink-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.centro .manchetes { margin-top: 4px; }
.centro .manchetes .news-item { padding: 5px 0; }
.centro .manchetes .news-item:last-child { border-bottom: 0; }

/* --- energia e governo */
.sondas { list-style: none; margin: 0; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; border-bottom: 1px solid var(--line-soft); font-size: 10.5px; color: var(--ink-2); }
.sondas li { min-width: 0; overflow-wrap: anywhere; }
.sondas small { color: var(--ink-3); }

/* --- itens clicáveis (abrem o mini-gráfico) */
.clicavel { cursor: pointer; }
.m-tape .tape-item.clicavel:hover, .ind-item.clicavel:hover { background: #161a21; }
.m-tape .tape-item.clicavel:focus-visible, .ind-item.clicavel:focus-visible { outline: 1px solid var(--amber-ink); outline-offset: -1px; }
.ind-item.clicavel .ind-lbl::after { content: ' ⌇'; color: var(--ink-3); }

/* ------------------------------------------------------------ mini-gráfico */
.mini {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(4, 5, 7, .88);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px 16px; overflow-y: auto;
}
.mini[hidden] { display: none !important; }
body.mini-aberto { overflow: hidden; }
.mini-box { width: min(760px, 100%); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.mini-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel-hi); flex-wrap: wrap; }
.mini-head h2 { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--ink); font-weight: 700; }
.mini-head .mini-sym { color: var(--ink-3); font-size: 10.5px; letter-spacing: .06em; }
.mini-head .meta { margin-left: auto; font-size: 10px; color: var(--ink-3); letter-spacing: .05em; white-space: nowrap; }
.mini-head .meta .stale-txt { color: var(--amber-ink); }
.mini-fechar { background: none; border: 1px solid var(--line); color: var(--ink-2); font: inherit; font-size: 10px; letter-spacing: .1em; padding: 4px 10px; cursor: pointer; }
.mini-fechar:hover { border-color: var(--amber-dim); color: var(--amber-ink); }
.mini-ctl { display: flex; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.mini-ctl .tabs { display: flex; gap: 2px; }
.mini-ctl .tab { background: none; border: 1px solid transparent; color: var(--ink-3); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 3px 8px; cursor: pointer; border-radius: 2px; }
.mini-ctl .tab:hover { color: var(--ink-2); background: #1a1e26; }
.mini-ctl .tab[aria-selected="true"] { color: var(--amber-ink); border-color: var(--amber-dim); background: #221a08; }
.mini-canvas-wrap { padding: 8px 4px 4px; min-width: 0; }
.mini-grafico { width: 100%; height: clamp(180px, 46vw, 320px); }
.mini-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 12px 8px; color: var(--ink-3); font-size: 10.5px; }
.mini-stats b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-stats .mini-fonte { width: 100%; }
.mini-leitura { padding: 0 12px 6px; color: var(--ink-2); font-size: 10.5px; min-height: 16px; font-variant-numeric: tabular-nums; }
.mini-msg { padding: 0 12px 10px; color: var(--down-ink); font-size: 11px; }
.mini-msg:empty { display: none; }
.mini-aviso { padding: 8px 12px 10px; border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: 10px; line-height: 1.45; }
@media (max-width: 600px) {
  .mini { padding: 12px 8px; }
  .el-cand { grid-template-columns: minmax(60px, 96px) 1fr 40px; }
}

/* ================================================================== mapa
   Seção acima da grade: Leaflet local, tiles do OpenStreetMap escurecidos
   por filtro (sem chave, sem estilo de terceiros). */
.mapa-secao {
  display: flex; flex-direction: column;
  height: 60vh; min-height: 340px;
  margin: 12px 16px 0; max-width: 1900px;
  border: 1px solid var(--line); background: var(--panel);
}
@media (min-width: 1933px) { .mapa-secao { margin-left: auto; margin-right: auto; } }
.mapa-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--panel-hi);
}
.mapa-bar h2 { margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--ink); font-weight: 700; }
.mapa-regioes { display: flex; gap: 2px; flex-wrap: wrap; }
.mapa-regioes button, .mapa-btn {
  white-space: nowrap;
  background: none; border: 1px solid transparent; color: var(--ink-3);
  font: inherit; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; cursor: pointer; border-radius: 2px;
}
.mapa-regioes button:hover, .mapa-btn:hover { color: var(--ink-2); background: #1a1e26; }
.mapa-regioes button[aria-pressed="true"], .mapa-btn[aria-pressed="true"] { color: var(--amber-ink); border-color: var(--amber-dim); background: #221a08; }
.mapa-btn { border-color: var(--line); color: var(--ink-2); }
.mapa-direita { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mapa-stats, .mapa-seg-nota { color: var(--ink-3); font-size: 10px; letter-spacing: .05em; white-space: nowrap; }
.mapa-seg-nota small { color: var(--ink-3); letter-spacing: 0; }
.mapa-seg-nota .stale-txt { color: var(--amber-ink); }
.mapa-wrap { flex: 1 1 auto; min-height: 0; position: relative; background: #0a0c10; isolation: isolate; }
/* `isolation` prende os z-index internos do Leaflet (panes 400, controles 1000)
   dentro da seção; sem isso o mapa passaria por cima do cabeçalho fixo e das
   sobreposições (mini-gráfico, seletor de camadas). */
#mapa { position: absolute; inset: 0; background: #0a0c10; font-family: var(--mono); }
/* escurecimento dos tiles claros do OSM: inverte, corrige o matiz e abaixa a saturação */
#mapa .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(.92) saturate(.45); }
#mapa .leaflet-control-attribution { background: rgba(10, 12, 16, .85); color: var(--ink-3); font: 9.5px var(--mono); }
#mapa .leaflet-control-attribution a { color: var(--ink-2); }
#mapa .leaflet-bar a { background: var(--panel-hi); color: var(--ink-2); border-color: var(--line); }
#mapa .leaflet-bar a:hover { background: #1a1e26; color: var(--ink); }
#mapa .leaflet-container a.leaflet-popup-close-button { color: var(--ink-3); }
.bm-marker-shell { background: none; border: 0; }
.bm-marker {
  width: 14px; height: 14px; display: block; border-radius: 50%;
  background: var(--marker); border: 2px solid rgba(10, 12, 16, .9);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marker) 28%, transparent), 0 4px 12px rgba(0, 0, 0, .4);
}
#mapa .leaflet-popup-content-wrapper, #mapa .leaflet-popup-tip {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .6);
}
#mapa .leaflet-popup-content { margin: 10px 12px; font: 11.5px/1.4 var(--mono); }
#mapa .leaflet-tooltip { background: #050608; color: var(--ink); border: 1px solid var(--line); font: 10.5px var(--mono); }
#mapa .leaflet-tooltip::before { display: none; }
.popup { max-width: 260px; }
.popup span, .popup strong, .popup small { display: block; }
.popup span { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.popup strong { margin-top: 3px; font-size: 12px; color: var(--ink); }
.popup p { margin: 5px 0; color: var(--ink-2); }
.popup small { color: var(--ink-3); font-size: 10px; }
.popup-lista { margin: 4px 0 6px; padding-left: 14px; color: var(--ink-2); }
.popup-lista a { color: var(--ink); text-decoration: none; }
.popup-lista a:hover { color: var(--amber-ink); }

/* seletor de camadas: mesma sobreposição do mini-gráfico */
.camadas { position: fixed; inset: 0; z-index: 40; background: rgba(4, 5, 7, .88); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px 16px; overflow-y: auto; }
.camadas[hidden] { display: none !important; }
.camadas-box { width: min(640px, 100%); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.camadas-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel-hi); }
.camadas-head h2 { margin: 0; font-size: 12px; letter-spacing: .12em; color: var(--ink); font-weight: 700; flex: 1; }
.camadas-ctl { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.camadas-ctl input { flex: 1 1 160px; background: #050608; border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 11px; padding: 4px 8px; outline: 0; min-width: 0; }
.camadas-ctl input:focus { border-color: var(--amber-ink); }
.camadas-lista { padding: 6px 12px 10px; max-height: 60vh; overflow-y: auto; }
.camadas-grupo { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.camadas-grupo:last-child { border-bottom: 0; }
.camadas-grupo-titulo { color: var(--ink-3); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 4px 0 5px; }
.camada-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 0; border-bottom: 1px solid transparent; background: none;
  color: var(--ink-2); font: inherit; font-size: 11.5px; text-align: left; cursor: pointer;
}
.camada-toggle:hover { background: #161a21; color: var(--ink); }
.camada-toggle .swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.camada-toggle .label { flex: 1; }
.camada-toggle .toggle { width: 26px; height: 12px; border-radius: 6px; background: #1b1f27; border: 1px solid var(--line); position: relative; flex: 0 0 auto; }
.camada-toggle .toggle::after { content: ''; position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); transition: left .12s; }
.camada-toggle[aria-pressed="true"] .toggle { background: #123a2c; border-color: var(--up); }
.camada-toggle[aria-pressed="true"] .toggle::after { left: 15px; background: var(--up-ink); }
.camada-toggle[aria-pressed="true"] { color: var(--ink); }

@media (max-width: 900px) {
  .mapa-secao { height: 45vh; min-height: 280px; margin: 10px 12px 0; }
  .mapa-bar { padding: 6px 10px; gap: 6px; }
  .mapa-direita { margin-left: 0; width: 100%; }
  .mapa-regioes { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .mapa-regioes::-webkit-scrollbar { display: none; }
  .camadas { padding: 12px 8px; }
}

/* ============================================================ apuração TSE
   Painel largo acima de Eleições 2026: estado, progresso, candidatos com
   barra e votos, grade de líderes por UF, presidente + governador da UF. */
.ap-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-hi); }
.ap-estado { font-size: 10px; letter-spacing: .12em; font-weight: 700; padding: 3px 8px; border: 1px solid var(--line); color: var(--ink-2); border-radius: 2px; white-space: nowrap; }
.ap-estado.vivo { color: var(--up-ink); border-color: var(--up); background: #0c2a1e; animation: ap-pulsa 2s ease-in-out infinite; }
.ap-estado.fim { color: var(--blue-ink); border-color: var(--blue); }
.ap-estado.espera { color: var(--amber-ink); border-color: var(--amber-dim); }
@keyframes ap-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(18, 193, 132, .35); } 50% { box-shadow: 0 0 0 4px rgba(18, 193, 132, 0); } }
.ap-turno { color: var(--ink); font-size: 11px; letter-spacing: .1em; font-weight: 700; }
.ap-status-txt { color: var(--ink-3); font-size: 10.5px; min-width: 0; }
.ap-status-txt b { color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.ap-prog { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line-soft); border-bottom: 1px solid var(--line); }
.ap-prog-item { background: var(--panel); padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.ap-prog-lbl { color: var(--ink-3); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.ap-prog-item b { color: var(--ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ap-prog-item .barra { grid-column: 1 / -1; height: 6px; }
.ap-prog-item small { grid-column: 1 / -1; color: var(--ink-3); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.ap-bloco h3 small { color: var(--ink-3); font-weight: 400; letter-spacing: .04em; margin-left: 6px; }
.ap-cands { display: grid; gap: 5px; }
.ap-cand { display: grid; grid-template-columns: 26px minmax(90px, 1.2fr) minmax(60px, 1fr) 58px 86px; gap: 8px; align-items: center; font-size: 11px; }
.ap-cand.destaque .ap-nome { color: var(--ink); font-weight: 700; }
.ap-num { display: inline-block; text-align: center; font-size: 10px; font-weight: 700; color: #050608; background: var(--cor, var(--ink-3)); border-radius: 2px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.ap-nome { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ap-nome small { color: var(--ink-3); font-size: 9.5px; font-weight: 400; }
.ap-badge { display: inline-block; margin-left: 6px; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--amber-ink); border: 1px solid var(--amber-dim); padding: 0 4px; border-radius: 2px; vertical-align: 1px; }
.ap-badge.eleito { color: var(--up-ink); border-color: var(--up); }
.ap-barra { display: block; height: 7px; background: #1b1f27; border-radius: 2px; overflow: hidden; min-width: 0; }
.ap-fill { display: block; height: 100%; border-radius: 2px; transition: width .4s ease; }
.ap-pct { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ap-votos { color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-size: 10.5px; }
.ap-outros { color: var(--ink-3); font-size: 10px; margin-top: 8px; line-height: 1.5; }
.ap-ufs { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 3px; }
.ap-uf { background: #11151b; border: 1px solid var(--line-soft); border-left: 3px solid var(--cor, var(--line)); color: var(--ink-2); font: inherit; font-size: 10px; padding: 4px 5px; text-align: left; cursor: pointer; min-width: 0; display: grid; gap: 1px; border-radius: 2px; }
.ap-uf b { color: var(--ink); font-size: 11px; letter-spacing: .06em; }
.ap-uf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; }
.ap-uf i { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 9.5px; }
.ap-uf:hover { background: #161a21; color: var(--ink); }
.ap-uf.ativa { border-color: var(--amber-dim); background: #1b1608; }
.ap-uf.na { color: var(--ink-3); cursor: default; }
.ap-uf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); background: var(--panel-hi); }
.ap-uf-sel { color: var(--ink-3); font-size: 10px; letter-spacing: .1em; display: flex; align-items: center; gap: 6px; }
.ap-uf-sel select { background: #050608; border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 2px; }
.ap-uf-sel select:focus { outline: 0; border-color: var(--amber-ink); }
.ap-uf-titulo { color: var(--ink-3); font-size: 10.5px; flex: 1; }
.ap-uf-head .meta { font-size: 10px; color: var(--ink-3); }
.ap-uf-corpo .el-cols { border-bottom: 0; }
.ap-uf-corpo .skel { padding: 12px; }
.ap-aviso a { color: var(--ink-2); text-decoration: underline dotted; }
.ap-aviso a:hover { color: var(--amber-ink); }
.ap-aviso b { color: var(--amber-ink); font-weight: 600; }
.ap-link { background: none; border: 0; padding: 0; color: var(--amber-ink); font: inherit; font-size: inherit; text-decoration: underline dotted; cursor: pointer; }
.ap-link:hover { color: var(--ink); }
.ap-espera { color: var(--ink-2); font-size: 11px; line-height: 1.5; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) {
  .ap-cand { grid-template-columns: 24px minmax(70px, 1fr) 46px 62px; }
  .ap-cand .ap-barra { grid-column: 1 / -1; order: 5; height: 5px; }
  .ap-status { gap: 6px; }
  .ap-ufs { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
}

/* mapa: camada de apuração (círculos nas capitais) e legenda no canto */
.mapa-legenda { position: absolute; left: 10px; bottom: 22px; z-index: 500; background: rgba(10, 12, 16, .9); border: 1px solid var(--line); padding: 7px 9px; font-size: 10px; color: var(--ink-2); max-width: 220px; pointer-events: none; }
.mapa-legenda[hidden] { display: none !important; }
.mapa-legenda h4 { margin: 0 0 4px; font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3); font-weight: 700; }
.mapa-legenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mapa-legenda li { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-legenda .sw { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mapa-legenda small { color: var(--ink-3); margin-left: auto; padding-left: 8px; font-variant-numeric: tabular-nums; }
.mapa-legenda p { margin: 4px 0 0; color: var(--ink-3); font-size: 9px; }

/* ============================================================== ao vivo
   Box "Ao vivo" (aovivo.js): coluna fixa à direita no desktop, abaixo do
   cabeçalho (altura medida em --m-head-h), com rolagem própria; no celular
   vira um painel recolhível logo abaixo da faixa, com botão AO VIVO e
   contador de novas. TV embutida em cima, fluxo de manchetes embaixo. */
:root { --av-w: 360px; --m-head-h: 41px; }
.aovivo { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
/* `hidden` precisa vencer os `display` das classes abaixo (selo, contador, seletor). */
.aovivo [hidden] { display: none !important; }
.av-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-hi); }
.av-titulo { margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--ink); font-weight: 700; display: flex; align-items: center; gap: 7px; }
.av-relogio { color: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; margin-left: auto; }
.av-head .meta { font-size: 10px; color: var(--ink-3); letter-spacing: .05em; white-space: nowrap; }
.av-head .meta .stale-txt { color: var(--amber-ink); }
.av-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e3433f; box-shadow: 0 0 0 0 rgba(227, 67, 63, .6); animation: av-pulsa 1.6s ease-out infinite; }
@keyframes av-pulsa { 0% { box-shadow: 0 0 0 0 rgba(227, 67, 63, .6); } 70% { box-shadow: 0 0 0 6px rgba(227, 67, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 67, 63, 0); } }
.av-toggle {
  display: none; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 11px;
  letter-spacing: .14em; font-weight: 700; padding: 4px 10px; cursor: pointer; border-radius: 2px;
}
.av-toggle[aria-expanded="true"] { border-color: var(--amber-dim); color: var(--amber-ink); background: #221a08; }
.av-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: #0e1116; font-size: 10px; font-weight: 700; text-align: center; letter-spacing: 0; }
.av-corpo { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

/* TV */
.av-tv { border-bottom: 1px solid var(--line); }
.av-tv-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }
.av-tv-btn {
  white-space: nowrap; background: none; border: 1px solid var(--line); color: var(--ink-2);
  font: inherit; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; cursor: pointer; border-radius: 2px;
}
.av-tv-btn:hover { color: var(--ink); background: #1a1e26; }
.av-tv-btn[aria-expanded="true"] { color: var(--amber-ink); border-color: var(--amber-dim); background: #221a08; }
.av-canal { flex: 1 1 auto; min-width: 0; background: #050608; border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 11px; padding: 3px 6px; outline: 0; }
.av-canal:focus { border-color: var(--amber-ink); }
.av-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.av-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.av-player-vazio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 11px; padding: 12px; text-align: center; }
.av-tv-nota { padding: 6px 12px 0; color: var(--ink-3); font-size: 10px; line-height: 1.45; }
.av-tv-nota a { color: var(--amber-ink); text-decoration: none; }
.av-tv-nota a:hover { text-decoration: underline; }
.av-tv-rodape { padding: 4px 12px 8px; color: var(--ink-3); font-size: 10px; line-height: 1.45; border-left: 2px solid var(--amber-dim); margin: 6px 12px 8px; padding-left: 8px; }

/* filtro e busca */
.av-ctl { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.av-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.av-chip {
  white-space: nowrap; background: none; border: 1px solid transparent; color: var(--ink-3);
  font: inherit; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; cursor: pointer; border-radius: 2px;
}
.av-chip:hover { color: var(--ink-2); background: #1a1e26; }
.av-chip[aria-pressed="true"] { color: var(--cor, var(--amber-ink)); border-color: currentColor; background: #12161d; }
.av-busca { background: #050608; border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 11px; padding: 4px 8px; outline: 0; min-width: 0; width: 100%; }
.av-busca:focus { border-color: var(--amber-ink); }

/* selo de novas */
.av-novas {
  display: block; width: 100%; background: #0c2a1e; border: 0; border-bottom: 1px solid var(--line);
  color: var(--up-ink); font: inherit; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 6px 12px; cursor: pointer; text-align: left;
}
.av-novas.pausado { background: #221a08; color: var(--amber-ink); }
.av-novas:hover { filter: brightness(1.15); }

/* lista */
.av-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.av-msg { padding: 6px 12px; border-top: 1px solid var(--line-soft); color: var(--amber-ink); font-size: 10px; line-height: 1.45; }
.av-item { display: block; padding: 7px 12px 7px 10px; border-bottom: 1px solid var(--line-soft); border-left: 2px solid transparent; text-decoration: none; min-width: 0; }
.av-item:hover { background: #161a21; }
.av-item:hover .av-titulo-item { color: var(--amber-ink); }
.av-item.urgente { border-left-color: var(--amber-ink); background: #17130a; }
.av-item.novo { animation: av-entra .7s ease-out; }
@keyframes av-entra { 0% { background: #0c2a1e; transform: translateY(-6px); opacity: .2; } 60% { background: #0c2a1e; } 100% { transform: none; opacity: 1; } }
.av-item-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; min-width: 0; flex-wrap: wrap; }
.av-urg { color: #0e1116; background: var(--amber-ink); font-size: 8.5px; letter-spacing: .12em; font-weight: 700; padding: 0 4px; border-radius: 2px; }
.av-tema { color: var(--cor, var(--ink-3)); border: 1px solid var(--cor, var(--line)); font-size: 8.5px; letter-spacing: .1em; font-weight: 700; padding: 0 4px; border-radius: 2px; opacity: .9; }
.av-tema small { font-size: 8px; margin-left: 2px; font-weight: 400; }
.av-fonte { color: var(--ink-3); font-size: 9.5px; letter-spacing: .1em; font-weight: 600; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.av-quando { color: var(--ink-3); font-size: 9.5px; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.av-titulo-item { color: var(--ink); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.av-lista .msg { padding: 12px; }
.av-lista .skel { padding: 12px; }

/* desktop: coluna fixa à direita, a grade e o mapa ocupam o espaço à esquerda */
@media (min-width: 1101px) {
  body.monitor { padding-right: var(--av-w); }
  .aovivo { position: fixed; top: var(--m-head-h); right: 0; bottom: 0; width: var(--av-w); z-index: 4; border-width: 0 0 0 1px; }
  .aovivo.min { bottom: auto; border-bottom-width: 1px; }
}
/* até 1100 px: painel recolhível no topo */
@media (max-width: 1100px) {
  .aovivo { margin: 10px 16px 0; }
  .av-toggle { display: inline-flex; }
  .av-titulo { display: none; }
  .aovivo .box-btn { display: none; }
  .av-lista { max-height: 60vh; }
}
@media (max-width: 900px) {
  .aovivo { margin: 10px 12px 0; }
}

/* =====================================================================
   ESTÉTICA BRASIL MONITOR (2026-10-05)
   Decisão do João em 04/10: o Tabuleiro fica com a cara do Brasil Monitor
   original (~/dev/brasil-monitor-original, src/styles.css). Esta seção vem
   por último e vale por cima das regras acima; só o Monitor (body.monitor)
   muda, o Terminal continua com o visual de mesa de operações.
   Linguagem: fundo verde-escuro em gradiente, superfícies translúcidas com
   desfoque, cantos de 10–14 px, rótulo pequeno em caixa alta acima de títulos
   em caixa normal, itens com filete verde à esquerda, botões em pílula com o
   ativo em verde cheio, fonte sem serifa e números tabulares.
   ===================================================================== */
/* Cores, fonte, fundo e .eyebrow vêm de tema.css (body.tt), comum ao Terminal. */

/* ------------------------------------------------------------ cabeçalho */
body.monitor .m-head {
  gap: 16px; padding: 12px 18px;
  background: rgba(7, 17, 15, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  z-index: 30;
}
body.monitor .m-brand {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  color: var(--ink); text-decoration: none; letter-spacing: 0; font-size: inherit;
}
body.monitor .m-marca {
  width: 40px; height: 40px; border-radius: 10px; display: block;
  box-shadow: 0 12px 30px rgba(0, 156, 59, 0.28), 0 0 0 1px var(--line);
}
body.monitor .m-brand-txt { display: flex; flex-direction: column; gap: 2px; }
body.monitor .m-brand-txt b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
body.monitor .m-brand-txt small { margin: 0; color: var(--ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
body.monitor .m-nav { gap: 8px; align-items: center; }
body.monitor .m-nav a, body.monitor .m-nav-btn {
  height: 38px; display: inline-flex; align-items: center; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3);
  color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
body.monitor .m-nav a:hover, body.monitor .m-nav-btn:hover, body.monitor .m-nav-btn:focus-visible {
  background: var(--panel-3-hi); border-color: var(--line-hi); color: var(--ink);
}
/* um só botão verde no topo: o "Entrar" (conta); Terminal fica como os demais */
body.monitor .m-nav a.m-terminal { color: var(--ink); }
body.monitor .m-clock {
  height: 38px; display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(20, 36, 30, 0.35);
  color: var(--ink-2); font-size: 12.5px; gap: 6px;
}
body.monitor .m-clock b { color: var(--ink); }

/* faixa de cotações: cartões pequenos em fila, filete pela direção */
body.monitor .m-tape {
  gap: 8px; padding: 12px 18px 0; border-bottom: 0; background: transparent;
  max-width: 1900px; margin: 0 auto;
}
body.monitor .m-tape .tape-item {
  gap: 8px; padding: 9px 14px; align-items: baseline;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--ink-3); border-radius: 10px;
  background: var(--panel-3); flex: 0 0 auto;
}
body.monitor .m-tape .tape-item:has(.t-chg.up) { border-left-color: var(--up-ink); }
body.monitor .m-tape .tape-item:has(.t-chg.down) { border-left-color: var(--down-ink); }
body.monitor .m-tape .t-label { color: var(--ink); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
body.monitor .m-tape .t-price { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
body.monitor .m-tape .t-chg {
  font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: rgba(180, 220, 200, 0.1); color: var(--ink-2);
}
body.monitor .m-tape .t-chg.up { color: #bbf7d0; background: rgba(34, 197, 94, 0.15); }
body.monitor .m-tape .t-chg.down { color: #fecaca; background: rgba(239, 68, 68, 0.15); }
body.monitor .m-tape .t-note, body.monitor .m-tape .t-hora { color: var(--ink-3); font-size: 11px; }
body.monitor .m-tape .tape-item.clicavel:hover { background: var(--panel-3-hi); border-color: var(--line-hi); }
body.monitor .m-tape .tape-item.clicavel:focus-visible { outline: 2px solid var(--up-ink); outline-offset: 1px; }

/* ----------------------------------------------------------------- grade */
body.monitor .m-grid { gap: 14px; padding: 16px 18px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 900px) { body.monitor .m-grid { padding: 12px; gap: 12px; } }

body.monitor .card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  box-shadow: 0 18px 50px rgba(7, 17, 15, 0.32); overflow: hidden;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.monitor .card-head {
  align-items: flex-start; gap: 12px; padding: 14px 16px 10px;
  background: transparent; border-bottom: 1px solid var(--line-soft);
}
body.monitor .card-tit { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
body.monitor .card-head h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
body.monitor .card-head .desc { color: var(--ink-3); font-size: 12px; white-space: normal; line-height: 1.35; }
body.monitor .card-head .desc:empty { display: none; }
body.monitor .card-head .meta, body.monitor .av-head .meta, body.monitor .mini-head .meta, body.monitor .ap-uf-head .meta {
  flex-shrink: 0; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--ink-2);
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-3);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
body.monitor .box-btn {
  width: 28px; height: 28px; line-height: 26px; border-radius: 8px; font-size: 15px;
  border: 1px solid var(--line-soft); background: var(--panel-3); color: var(--ink-2);
}
body.monitor .box-btn:hover, body.monitor .box-btn:focus-visible { background: var(--panel-3-hi); border-color: var(--line-hi); color: var(--ink); }
body.monitor .card-body { padding: 12px 14px; }
body.monitor .card .msg, body.monitor .card .skel { padding: 4px 2px; }

/* indicadores: blocos arredondados em vez de grade de linhas */
body.monitor .ind { gap: 8px; background: transparent; border-bottom: 0; padding: 0 0 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
body.monitor .ind-item {
  background: var(--panel-3); border: 1px solid var(--line-soft); border-left: 3px solid var(--ink-3);
  border-radius: 10px; padding: 10px 12px;
}
body.monitor .ind-item:has(.chg.up) { border-left-color: var(--up-ink); }
body.monitor .ind-item:has(.chg.down) { border-left-color: var(--down-ink); }
body.monitor .ind-lbl { color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
body.monitor .ind-val { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
body.monitor .ind-val .chg {
  font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(180, 220, 200, 0.1);
}
body.monitor .ind-val .chg.up { color: #bbf7d0; background: rgba(34, 197, 94, 0.15); }
body.monitor .ind-val .chg.down { color: #fecaca; background: rgba(239, 68, 68, 0.15); }
body.monitor .ind-src { font-size: 10.5px; }
body.monitor .ind-item.clicavel:hover { background: var(--panel-3-hi); }

/* resumo */
body.monitor .resumo { padding: 0 0 12px; border-bottom: 0; font-size: 13px; color: var(--ink-2); }
body.monitor .resumo b { color: var(--ink-2); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }

/* manchetes: caixinhas com filete verde (assinatura do Brasil Monitor) */
body.monitor .manchetes { gap: 8px; }
body.monitor .manchetes .news-item, body.monitor .news-item {
  padding: 10px 12px; border: 1px solid var(--line-soft); border-left: 3px solid var(--up-ink);
  border-radius: 10px; background: var(--panel-3); transition: background .15s ease, border-color .15s ease;
}
body.monitor .news-item:hover { background: var(--panel-3-hi); border-color: var(--line-hi); border-left-color: var(--amber-ink); }
body.monitor .news-item:hover .news-title { color: var(--ink); }
body.monitor .news-meta { justify-content: space-between; margin-bottom: 4px; }
body.monitor .news-src { color: var(--amber-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
body.monitor .news-time { color: var(--ink-2); font-size: 10.5px; font-weight: 600; }
body.monitor .news-title { font-size: 13.5px; font-weight: 600; line-height: 1.38; letter-spacing: -0.005em; }
body.monitor .ver-mais {
  margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3);
  color: var(--ink); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; text-align: center; padding: 8px 12px;
}
body.monitor .ver-mais:hover { background: var(--panel-3-hi); border-color: var(--line-hi); }

/* painéis extras: blocos internos arredondados */
body.monitor .el-contagem, body.monitor .el-cols, body.monitor .ap-prog { gap: 8px; background: transparent; border-bottom: 0; padding-bottom: 12px; }
body.monitor .el-turno, body.monitor .el-bloco, body.monitor .ap-prog-item {
  background: var(--panel-3); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px;
}
body.monitor .el-bloco h3, body.monitor .el-turno-lbl, body.monitor .ap-prog-lbl { color: var(--ink-2); font-size: 10.5px; letter-spacing: .06em; font-weight: 600; text-transform: uppercase; }
body.monitor .el-aviso { border: 1px solid var(--line-soft); border-left: 3px solid var(--amber-ink); border-radius: 10px; background: var(--panel-3); margin-bottom: 12px; font-size: 11px; color: var(--ink-2); }
body.monitor .metrica { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel-3); margin-bottom: 6px; padding: 8px 12px; }
body.monitor .metricas { padding-bottom: 6px; }
body.monitor .met-lbl span { color: var(--ink); font-size: 12.5px; }
body.monitor .met-lbl small { font-size: 10.5px; }
body.monitor .centro { border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(20, 36, 30, 0.3); margin-bottom: 10px; padding: 10px 12px 8px; }
body.monitor .centro-nome { font-size: 13.5px; letter-spacing: 0; }
body.monitor .centro-score { padding: 1px 9px; border-radius: 999px; background: rgba(250, 204, 21, 0.15); color: var(--amber-ink); font-size: 11px; }
body.monitor .centro .manchetes .news-item { padding: 8px 10px; }
body.monitor .sondas { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel-3); margin-bottom: 10px; padding: 8px 12px; }
body.monitor .msg.fontes-status { border-top: 0; padding: 8px 2px 0; }
body.monitor .barra, body.monitor .ap-barra { background: rgba(180, 220, 200, 0.1); border-radius: 999px; }
body.monitor .barra-fill, body.monitor .ap-fill { border-radius: 999px; }

/* apuração */
body.monitor .ap-status { background: transparent; border-bottom: 0; padding: 0 0 12px; }
body.monitor .ap-estado { border-radius: 999px; padding: 4px 12px; font-size: 11px; letter-spacing: .06em; }
body.monitor .ap-estado.vivo { color: #07110f; background: var(--up-ink); border-color: var(--up-ink); }
body.monitor .ap-turno { font-size: 12.5px; letter-spacing: .04em; }
body.monitor .ap-num { border-radius: 6px; color: #07110f; }
body.monitor .ap-cand { font-size: 12.5px; }
body.monitor .ap-uf { border-radius: 8px; background: var(--panel-3); border: 1px solid var(--line-soft); border-left: 3px solid var(--cor, var(--line)); padding: 6px 7px; }
body.monitor .ap-uf:hover { background: var(--panel-3-hi); }
body.monitor .ap-uf.ativa { border-color: var(--up-ink); background: rgba(34, 197, 94, 0.12); }
body.monitor .ap-uf-head { background: transparent; border: 1px solid var(--line-soft); border-radius: 10px; margin: 0 0 10px; }
body.monitor .ap-uf-sel select, body.monitor .av-canal { border-radius: 8px; background: rgba(7, 17, 15, 0.7); border-color: var(--line); padding: 5px 8px; }
body.monitor .ap-badge { border-radius: 999px; padding: 0 7px; }

/* --------------------------------------------------------------- mapa */
body.monitor .mapa-secao {
  height: clamp(360px, 56vh, 720px); margin: 16px 18px 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); overflow: hidden; box-shadow: 0 20px 60px rgba(7, 17, 15, 0.5);
}
body.monitor .mapa-bar { gap: 12px; padding: 12px 52px 12px 16px; background: rgba(7, 17, 15, 0.55); border-bottom: 1px solid var(--line-soft); }
body.monitor .mapa-bar h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
body.monitor .mapa-bar .box-btn { top: 11px; right: 12px; }
body.monitor .mapa-regioes { gap: 6px; }
body.monitor .mapa-regioes button, body.monitor .mapa-btn {
  height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-3); color: var(--ink-2); font-size: 12.5px; letter-spacing: 0; text-transform: none;
}
body.monitor .mapa-regioes button:hover, body.monitor .mapa-btn:hover { background: var(--panel-3-hi); color: var(--ink); }
body.monitor .mapa-regioes button[aria-pressed="true"], body.monitor .mapa-btn[aria-pressed="true"] {
  color: #07110f; background: var(--up-ink); border-color: var(--up-ink); font-weight: 600;
}
body.monitor .mapa-stats, body.monitor .mapa-seg-nota {
  height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px;
  border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(20, 36, 30, 0.6);
  color: var(--ink-2); font-size: 12px; letter-spacing: 0;
}
body.monitor .mapa-wrap, body.monitor #mapa { background: #0d1719; font-family: var(--sans); }
/* tiles do OSM como no original: claros, dessaturados e escurecidos */
body.monitor #mapa .leaflet-tile-pane { filter: saturate(0.78) contrast(1.04) brightness(0.7); }
body.monitor #mapa .leaflet-control-attribution { background: rgba(7, 17, 15, 0.85); color: var(--ink-3); font: 10.5px var(--sans); }
body.monitor #mapa .leaflet-bar { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
body.monitor #mapa .leaflet-bar a { background: rgba(7, 17, 15, 0.85); color: var(--ink); border-color: var(--line-soft); }
body.monitor #mapa .leaflet-bar a:hover { background: var(--panel-3-hi); }
body.monitor .bm-marker { border-color: rgba(7, 17, 15, 0.9); }
body.monitor #mapa .leaflet-popup-content-wrapper, body.monitor #mapa .leaflet-popup-tip {
  background: rgba(7, 17, 15, 0.96); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
body.monitor #mapa .leaflet-popup-content { font: 13px/1.45 var(--sans); }
body.monitor #mapa .leaflet-tooltip { background: rgba(7, 17, 15, 0.95); border-radius: 8px; font: 12px var(--sans); }
body.monitor .popup strong { font-size: 14px; }
body.monitor .popup span { font-size: 10.5px; letter-spacing: .06em; }
body.monitor .mapa-legenda { background: rgba(7, 17, 15, 0.88); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 11.5px; backdrop-filter: blur(10px); }
body.monitor .mapa-legenda h4 { font-size: 10.5px; letter-spacing: .06em; color: var(--ink-2); }
@media (max-width: 900px) {
  body.monitor .mapa-secao { margin: 12px 12px 0; height: 55vh; }
  body.monitor .mapa-direita { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.monitor .mapa-direita::-webkit-scrollbar { display: none; }
  body.monitor .mapa-direita > * { flex: 0 0 auto; }
}

/* -------------------------------------------- janelas (gráfico, camadas) */
body.monitor .mini, body.monitor .camadas { background: rgba(2, 8, 18, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.monitor .mini-box, body.monitor .camadas-box {
  border: 1px solid var(--line); border-radius: 14px; background: rgba(7, 17, 15, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55); overflow: hidden;
}
body.monitor .mini-head, body.monitor .camadas-head { background: transparent; border-bottom: 1px solid var(--line-soft); padding: 14px 16px; }
body.monitor .mini-head h2, body.monitor .camadas-head h2 { font-size: 16px; letter-spacing: -0.01em; text-transform: none; }
body.monitor .mini-fechar {
  height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3);
  color: var(--ink); font-size: 12px; letter-spacing: 0; text-transform: none;
}
body.monitor .mini-fechar:hover { background: var(--panel-3-hi); border-color: var(--line-hi); color: var(--ink); }
body.monitor .mini-ctl { border-bottom: 1px solid var(--line-soft); padding: 10px 16px; }
body.monitor .mini-ctl .tabs { gap: 6px; }
body.monitor .mini-ctl .tab {
  height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3);
  color: var(--ink-2); font-family: var(--sans); font-size: 12.5px; letter-spacing: 0;
}
body.monitor .mini-ctl .tab:hover { background: var(--panel-3-hi); color: var(--ink); }
body.monitor .mini-ctl .tab[aria-selected="true"] { color: #07110f; background: var(--up-ink); border-color: var(--up-ink); font-weight: 700; }
body.monitor .mini-stats, body.monitor .mini-leitura { font-size: 12px; padding-left: 16px; padding-right: 16px; }
body.monitor .mini-aviso { font-size: 11px; padding: 10px 16px 14px; }
body.monitor .camadas-ctl { padding: 12px 16px; }
body.monitor .camadas-ctl input, body.monitor .av-busca {
  height: 36px; border: 1px solid var(--line); border-radius: 10px; background: rgba(20, 36, 30, 0.55);
  color: var(--ink); font-size: 13px; padding: 0 12px;
}
body.monitor .camadas-ctl input:focus, body.monitor .av-busca:focus { border-color: var(--up-ink); }
body.monitor .camadas-lista { padding: 8px 16px 14px; }
body.monitor .camadas-grupo-titulo { color: var(--ink-2); font-size: 10.5px; letter-spacing: .06em; }
body.monitor .camada-toggle { border-radius: 8px; font-size: 13px; padding: 8px 10px; }
body.monitor .camada-toggle:hover { background: var(--panel-3-hi); }
body.monitor .camada-toggle .toggle { width: 32px; height: 18px; border-radius: 999px; background: rgba(180, 220, 200, 0.1); }
body.monitor .camada-toggle .toggle::after { top: 2px; left: 2px; width: 12px; height: 12px; }
body.monitor .camada-toggle[aria-pressed="true"] .toggle { background: var(--up-ink); border-color: var(--up-ink); }
body.monitor .camada-toggle[aria-pressed="true"] .toggle::after { left: 16px; background: #07110f; }

/* ------------------------------------------------------------ ao vivo */
body.monitor .aovivo { background: rgba(7, 17, 15, 0.82); border-color: var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
@media (max-width: 1100px) { body.monitor .aovivo { border-radius: 14px; overflow: hidden; margin: 12px 18px 0; } }
body.monitor .av-head { background: transparent; border-bottom: 1px solid var(--line-soft); padding: 12px 16px; }
body.monitor .av-titulo { font-size: 15px; letter-spacing: 0; text-transform: none; }
body.monitor .av-relogio { color: var(--ink-2); font-size: 12px; }
body.monitor .av-dot { background: #ef4444; }
body.monitor .av-toggle, body.monitor .av-tv-btn {
  height: 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3);
  color: var(--ink); font-size: 12.5px; letter-spacing: 0; text-transform: none; padding: 0 12px;
}
body.monitor .av-toggle[aria-expanded="true"], body.monitor .av-tv-btn[aria-expanded="true"] { color: #07110f; background: var(--up-ink); border-color: var(--up-ink); }
body.monitor .av-tv { border-bottom: 1px solid var(--line-soft); padding: 6px 4px; }
body.monitor .av-player { border-radius: 10px; overflow: hidden; margin: 0 12px; }
body.monitor .av-tv-rodape { border-left: 3px solid var(--amber-ink); border-radius: 0 8px 8px 0; background: var(--panel-3); }
body.monitor .av-ctl { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
body.monitor .av-chips { gap: 6px; }
body.monitor .av-chip {
  height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-3);
  color: var(--ink-2); font-size: 11px; letter-spacing: .02em; text-transform: none;
}
body.monitor .av-chip:hover { background: var(--panel-3-hi); color: var(--ink); }
body.monitor .av-chip[aria-pressed="true"] { color: #07110f; background: var(--cor, var(--up-ink)); border-color: var(--cor, var(--up-ink)); font-weight: 600; }
body.monitor .av-novas { background: rgba(34, 197, 94, 0.15); color: #bbf7d0; border-bottom: 1px solid var(--line-soft); letter-spacing: .04em; text-transform: none; font-size: 12px; padding: 8px 16px; }
body.monitor .av-novas.pausado { background: rgba(250, 204, 21, 0.12); color: var(--amber-ink); }
body.monitor .av-lista { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
body.monitor .av-item {
  padding: 10px 12px; border: 1px solid var(--line-soft); border-left: 3px solid var(--up-ink); border-radius: 10px; background: var(--panel-3);
}
body.monitor .av-item:hover { background: var(--panel-3-hi); border-color: var(--line-hi); border-left-color: var(--amber-ink); }
body.monitor .av-item:hover .av-titulo-item { color: var(--ink); }
body.monitor .av-item.urgente { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
body.monitor .av-fonte { color: var(--amber-ink); font-size: 10.5px; letter-spacing: .05em; font-weight: 700; }
body.monitor .av-quando { color: var(--ink-2); font-size: 10.5px; font-weight: 600; }
body.monitor .av-titulo-item { font-size: 13.5px; font-weight: 600; line-height: 1.38; }
body.monitor .av-urg { background: #ef4444; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 9.5px; }
body.monitor .av-tema { border-radius: 999px; padding: 0 7px; font-size: 9.5px; }
body.monitor .av-badge { background: var(--amber-ink); color: #07110f; }

/* desktop: o cabeçalho passa por cima da coluna Ao vivo e ocupa a largura toda */
@media (min-width: 1101px) { body.monitor .m-head { margin-right: calc(-1 * var(--av-w)); } }

/* notebook (até ~1700 px): numa linha só o topo pede ~1580 px e empurrava a
   página para o lado; os botões descem para uma segunda linha. */
@media (min-width: 901px) and (max-width: 1700px) {
  body.monitor .m-head { flex-wrap: wrap; row-gap: 10px; }
  body.monitor .tt-modo { margin-left: auto; }
  body.monitor .m-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  body.monitor .m-nav::-webkit-scrollbar { display: none; }
  body.monitor .m-nav a, body.monitor .m-nav-btn { height: 34px; flex: 0 0 auto; }
}

/* celular: topo compacto e sem ficar preso (em 400 px ele ocupava meia tela) */
@media (max-width: 900px) {
  body.monitor .m-head { position: static; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  body.monitor .m-marca { width: 34px; height: 34px; border-radius: 9px; }
  body.monitor .m-brand-txt b { font-size: 15.5px; }
  body.monitor .m-brand-txt small { font-size: 9.5px; }
  body.monitor .m-conta { margin-left: auto; }
  body.monitor .m-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  body.monitor .m-nav::-webkit-scrollbar { display: none; }
  body.monitor .m-nav a, body.monitor .m-nav-btn, body.monitor .jtc-btn { height: 32px; padding: 0 11px; font-size: 12.5px; flex: 0 0 auto; }
  body.monitor .m-clock { display: none; }
  body.monitor .m-tape { padding: 10px 12px 0; }
}

/* --------------------------------------------------------------- rodapé */
body.monitor .m-foot { border-top: 0; padding: 10px 18px 18px; color: var(--ink-3); font-size: 12px; gap: 6px 18px; }

/* números sempre tabulares na fonte sem serifa */
body.monitor .t-price, body.monitor .ind-val, body.monitor .ap-pct, body.monitor .ap-votos, body.monitor .met-val,
body.monitor .el-pct, body.monitor .m-clock, body.monitor .av-relogio, body.monitor .news-time { font-variant-numeric: tabular-nums; }

/* =====================================================================
   JANELAS DO BRASIL MONITOR (paineis.js): Brief, Sinal selecionado, Tempo e
   snapshots, Mercados Brasil, Saúde, Cadeias e rotas, Meus monitores, Fontes,
   paleta ⌘K e o aviso de ação.
   ===================================================================== */
.bm-filtrado { display: none !important; }
body.monitor .bm-pill { display: inline-flex; align-items: center; gap: 5px; }
body.monitor .card-head .meta:has(.bm-pill.verde) { color: #bbf7d0; border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.12); }
body.monitor .card-head .meta:has(.bm-pill.vermelho) { color: #fecaca; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.12); }
.bm-vazio { color: var(--ink-2); font-size: 13px; line-height: 1.5; padding: 4px 2px; }
.bm-sub { color: var(--ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 12px 0 8px; }
.bm-sub:first-child { margin-top: 0; }
.bm-sub-acao { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bm-nota { color: var(--ink-3); font-size: 11.5px; line-height: 1.45; margin: 10px 0 0; }
.bm-nota a { color: var(--ink-2); }
.bm-fontes { font-size: 10.5px; }

/* itens em caixinha com filete colorido (cor por --cor) */
.bm-lista { display: flex; flex-direction: column; gap: 8px; }
.bm-item {
  display: block; padding: 9px 12px; border: 1px solid var(--line-soft); border-left: 3px solid var(--cor, var(--up-ink));
  border-radius: 8px; background: var(--panel-3); color: var(--ink); font-size: 13.5px; line-height: 1.42; text-decoration: none;
}
a.bm-item:hover { background: var(--panel-3-hi); border-color: var(--line-hi); border-left-color: var(--amber-ink); }
.bm-item small { display: block; color: var(--ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 3px; }
.bm-item em { display: block; font-style: normal; color: var(--ink-3); font-size: 11.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-cand { display: flex; align-items: center; gap: 8px; }
.bm-cand b { min-width: 26px; text-align: center; border-radius: 6px; background: var(--cor); color: #07110f; font-size: 11px; padding: 1px 0; }
.bm-cand span { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* sinal selecionado */
.bm-sinal { border-left: 3px solid var(--cor); padding: 2px 0 2px 12px; }
.bm-sinal-camada { display: block; color: var(--cor); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bm-sinal strong { display: block; font-size: 16px; margin: 4px 0 6px; letter-spacing: -0.01em; }
.bm-sinal p { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.bm-sinal dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12px; }
.bm-sinal dt { color: var(--ink-3); }
.bm-sinal dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* segmentado (janela de tempo, tipo de alerta, modal) */
.bm-seg { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bm-seg-2 { grid-template-columns: repeat(2, 1fr); }
.bm-seg-auto { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bm-seg button {
  height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3);
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.bm-seg button small { color: inherit; opacity: .7; margin-left: 2px; }
.bm-seg button:hover { background: var(--panel-3-hi); color: var(--ink); }
.bm-seg button[aria-pressed="true"] { color: #07110f; background: var(--up-ink); border-color: var(--up-ink); font-weight: 700; }

.bm-btn {
  height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3);
  color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.bm-btn:hover { background: var(--panel-3-hi); border-color: var(--line-hi); }
.bm-btn-largo { width: 100%; height: 36px; margin-top: 12px; }
.bm-x { width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--line-soft); border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 16px; cursor: pointer; }
.bm-x:hover { color: var(--ink); background: var(--panel-3-hi); }

/* fotografias */
.bm-snaps { display: flex; flex-direction: column; gap: 6px; }
.bm-snap { display: flex; gap: 6px; align-items: center; }
.bm-snap-abrir {
  flex: 1; min-width: 0; text-align: left; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--panel-3); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer;
}
.bm-snap-abrir:hover { background: var(--panel-3-hi); border-color: var(--line-hi); }
.bm-snap-abrir span, .bm-snap-abrir small { display: block; }
.bm-snap-abrir small { color: var(--ink-3); font-size: 11px; margin-top: 2px; }

/* mercados brasil */
.bm-mercados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bm-mercado {
  display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--ink-3); border-radius: 10px; background: var(--panel-3);
  color: var(--ink); font: inherit; cursor: pointer; min-width: 0;
}
div.bm-mercado { cursor: default; }
.bm-mercado.up { border-left-color: var(--up-ink); }
.bm-mercado.down { border-left-color: var(--down-ink); }
button.bm-mercado:hover { background: var(--panel-3-hi); border-color: var(--line-hi); }
.bm-mercado-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.bm-mercado-top span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-mercado-top small, .bm-mercado-base small { color: var(--ink-3); font-size: 10.5px; }
.bm-mercado strong { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.bm-mercado-base { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: auto; }
.bm-chg { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(180, 220, 200, 0.1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bm-chg.up { color: #bbf7d0; background: rgba(34, 197, 94, 0.15); }
.bm-chg.down { color: #fecaca; background: rgba(239, 68, 68, 0.15); }

/* saúde */
.bm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-3); font-size: 12px; }
.bm-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); }
.bm-ufs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 10px; }
.bm-uf { display: grid; gap: 1px; padding: 6px 8px; border: 1px solid var(--line-soft); border-left: 3px solid var(--cor); border-radius: 8px; background: var(--panel-3); min-width: 0; }
.bm-uf b { font-size: 12px; letter-spacing: .04em; }
.bm-uf span { font-size: 11px; color: var(--ink-2); }
.bm-uf i { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* meus monitores */
.bm-regra { display: flex; align-items: center; gap: 10px; }
.bm-regra > span { flex: 1; min-width: 0; }
.bm-regra.on { background: rgba(239, 68, 68, 0.1); }
.bm-regra.on small { color: #fecaca; }
.bm-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.bm-num { position: relative; background: var(--panel-3); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bm-num:has(.chg.up) { border-left: 3px solid var(--up-ink); }
.bm-num:has(.chg.down) { border-left: 3px solid var(--down-ink); }
.bm-num-topo { display: flex; align-items: flex-start; gap: 4px; }
.bm-num-rot { flex: 1; min-width: 0; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-num-acoes { position: absolute; top: 4px; right: 4px; display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--panel-3-hi); opacity: 0; transition: opacity .15s; }
@media (hover: none) { .bm-num-acoes { opacity: .85; } }
.bm-num:hover .bm-num-acoes, .bm-num:focus-within .bm-num-acoes { opacity: 1; }
.bm-num-acoes button { width: 20px; height: 20px; border: 1px solid var(--line-soft); border-radius: 6px; background: transparent; color: var(--ink-3); font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.bm-num-acoes button:disabled { opacity: .3; cursor: default; }
.bm-num-acoes button:not(:disabled):hover { color: var(--ink); border-color: var(--line-hi); }
.bm-num-val { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.bm-num-espera { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.bm-num-fonte { font-size: 10px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-num-seletor { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px; background: var(--panel-3); margin-bottom: 4px; }
.bm-num-seletor input { width: 100%; box-sizing: border-box; }
.bm-num-opcoes { max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.bm-num-opcoes .bm-sub { margin: 8px 0 4px; }
.bm-num-op { display: flex; justify-content: space-between; gap: 10px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; color: var(--ink-2); font-size: 12px; cursor: pointer; }
.bm-num-op b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.bm-num-op:hover, .bm-num-op:focus-visible { border-color: var(--line-hi); background: var(--panel-3-hi); color: var(--ink); }
.bm-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bm-form-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.bm-form-linha[hidden] { display: none; }
.bm-form select, .bm-form input {
  flex: 1 1 110px; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(7, 17, 15, 0.7); color: var(--ink); font: inherit; font-size: 13px;
}
.bm-form select:focus, .bm-form input:focus { outline: 0; border-color: var(--up-ink); }
.bm-form .bm-btn-largo { margin-top: 0; }

/* paleta de comandos */
.bm-paleta-box { width: min(620px, 100%); }
.bm-paleta-box .camadas-ctl kbd { font: 11px var(--sans); color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.bm-paleta-lista { max-height: 55vh; }
.bm-cmd {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.bm-cmd small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.bm-cmd:hover, .bm-cmd[aria-selected="true"] { background: var(--panel-3-hi); }
.bm-cmd[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--up-ink); }

/* aviso curto de ação (link copiado, fotografia salva) */
.bm-aviso {
  position: fixed; left: 50%; bottom: 22px; z-index: 9500; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border: 1px solid rgba(34, 197, 94, 0.45); border-radius: 10px; background: rgba(7, 17, 15, 0.96);
  color: #bbf7d0; font: 13px var(--sans, system-ui); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); transition: opacity .18s, transform .18s;
}
.bm-aviso.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 600px) { .bm-seg { grid-template-columns: repeat(3, 1fr); } .bm-mercados { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* clima e defesa civil */
.bm-ufs-clima { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.bm-clima-uf { font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.bm-clima-uf:hover { background: var(--panel-3-hi); }
.bm-clima-uf.ativa { border-color: var(--up-ink); box-shadow: inset 0 0 0 1px var(--up-ink); }
.bm-clima-uf b { display: flex; justify-content: space-between; }
.bm-clima-ico { font-weight: 400; color: var(--ink-2); }
.bm-clima-t { font-size: 17px !important; font-weight: 700; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.bm-dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.bm-dia { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-3); min-width: 0; }
.bm-dia b { font-size: 11.5px; text-transform: capitalize; }
.bm-dia span { font-size: 11.5px; color: var(--ink-2); line-height: 1.3; }
.bm-dia i { font-style: normal; font-size: 11.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bm-alerta b { font-size: 13.5px; }
.bm-alerta em { white-space: normal; }
.bm-alerta p { margin: 6px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.bm-alerta-acoes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.bm-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); }
.bm-instr { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
/* marcador de temperatura no mapa */
.bm-temp-shell { background: none; border: 0; }
.bm-temp {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 50px; height: 22px; padding: 0 7px;
  border-radius: 999px; border: 1px solid var(--cor); background: rgba(7, 17, 15, 0.88); color: #eef7f2;
  font: 600 12px/1 Inter, ui-sans-serif, system-ui, sans-serif; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); white-space: nowrap;
}
/* rolagem até um painel (⌘K, "ver no mapa") para abaixo do topo fixo */
body.monitor .mapa-secao, body.monitor .card, body.monitor .aovivo { scroll-margin-top: calc(var(--m-head-h, 64px) + 12px); }
body.monitor .card-head { flex-wrap: wrap; }
body.monitor .card-tit { flex: 1 1 170px; }

/* Personalizar e Como estava (pro.js) */
.tt-pers-box { width: min(680px, 100%); }
.tt-pers-corpo { padding: 12px 16px 16px; max-height: 78vh; overflow-y: auto; }
.tt-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink); }
.tt-linha input[type="time"], .tt-linha select {
  height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7, 17, 15, 0.7); color: var(--ink); font: inherit;
}
.tt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-chip { position: relative; cursor: pointer; }
.tt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tt-chip span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-3); color: var(--ink-2); font-size: 12.5px; }
.tt-chip input:checked + span { background: var(--up-ink); border-color: var(--up-ink); color: #07110f; font-weight: 600; }
.tt-chip input:focus-visible + span { outline: 2px solid var(--up-ink); outline-offset: 2px; }
.tt-ufs .tt-chip span { min-width: 44px; justify-content: center; padding: 0 8px; }
.tt-pers-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tt-salvar { background: var(--up-ink); border-color: var(--up-ink); color: #07110f; font-weight: 700; }
.tt-salvar:hover { background: #4ade80; }
.tt-previa { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.tt-hist-cot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin-bottom: 4px; }
.tt-hist-cot i { font-style: normal; font-size: 11.5px; }
.tt-hist-cot .up { color: var(--up-ink); } .tt-hist-cot .down { color: var(--down-ink); }
#card-historico select { max-width: 100%; }
.tt-mon-email { margin-top: 10px; }
body.monitor .tt-pers-btn { color: var(--up-ink); border-color: rgba(34, 197, 94, 0.45); }

/* faixa do topo: frase de valor + inscrição (pro.js) */
.tt-faixa {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  max-width: 1900px; margin: 12px 18px 0; padding: 14px 44px 14px 18px; border-radius: 14px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(20, 36, 30, 0.6) 55%, rgba(250, 204, 21, 0.06));
}
.tt-faixa-txt { flex: 1 1 340px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.tt-faixa-txt strong { color: var(--ink); font-size: 15px; letter-spacing: -0.01em; }
.tt-faixa-form { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 420px; }
.tt-faixa-form input, .tt-faixa-form select {
  height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 17, 15, 0.75);
  color: var(--ink); font: 13.5px var(--sans); min-width: 0;
}
.tt-faixa-form input { flex: 1 1 200px; }
.tt-faixa-form select { flex: 0 1 170px; }
.tt-faixa-form input:focus, .tt-faixa-form select:focus { outline: 0; border-color: var(--up-ink); }
.tt-faixa-form button { height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--up-ink); color: #07110f; font: 700 13.5px var(--sans); cursor: pointer; }
.tt-faixa-form button:hover { background: #4ade80; }
.tt-faixa-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 18px; cursor: pointer; }
.tt-faixa-x:hover { color: var(--ink); background: var(--panel-3-hi); }
.tt-faixa-msg { flex-basis: 100%; margin: 0; font-size: 12.5px; color: #bbf7d0; }
.tt-faixa-msg:empty { display: none; }
@media (max-width: 900px) { .tt-faixa { margin: 10px 12px 0; padding: 12px 40px 12px 14px; } }

/* Geração de energia: seletor de estado no mapa e matriz elétrica no "Sinal selecionado" */
.mapa-uf { height: 30px; max-width: 200px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-3, #11141a); color: var(--ink-2); font: inherit; font-size: 12px; outline: 0; cursor: pointer; }
.mapa-uf:hover, .mapa-uf:focus { color: var(--ink); border-color: var(--amber-dim); }
.bm-matriz { display: grid; gap: 5px; margin: 4px 0 8px; }
.bm-matriz-linha { display: grid; grid-template-columns: 9.5em 1fr auto; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.bm-matriz-linha i { display: block; height: 7px; border-radius: 4px; background: var(--cor); min-width: 2px; }
.bm-matriz-linha b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bm-cand small { color: var(--ink-3); font-size: 10.5px; }
.bm-cand:not(:has(b))::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); flex: none; }

/* Apuração: urnas apuradas em destaque; % de urnas no quadrinho da UF durante a apuração */
.ap-prog-urnas b { font-size: 20px; color: var(--ink); }
.ap-uf em { display: block; font-style: normal; color: var(--ink-3); font-size: 9px; font-variant-numeric: tabular-nums; }

/* Mercados Brasil: atraso de cada cotação */
.bm-atraso { align-self: flex-start; margin-top: 4px; font-size: 9.5px; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); }
.bm-atraso.rt { color: var(--up-ink); border-color: color-mix(in srgb, var(--up-ink) 45%, transparent); }

/* Painel de contexto de tema (Panorama do agro e afins) */
.painel-tema { margin: 10px 0 12px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.painel-tema > summary { cursor: pointer; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; padding: 2px 0; }
.painel-tema > summary small { text-transform: none; letter-spacing: 0; color: var(--amber-ink); font-weight: 400; }
.pn-bloco { margin-top: 10px; }
.pn-bloco h4 { margin: 0 0 6px; font-size: 11.5px; color: var(--ink); font-weight: 600; }
.pn-destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.pn-dest { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.pn-dest b { font-size: 22px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pn-dest.up b { color: var(--up-ink); }
.pn-dest.down b { color: var(--down-ink, #f87171); }
.pn-rot { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pn-det { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.pn-ajuda { font-size: 10.5px; color: var(--ink-3); line-height: 1.35; font-style: italic; }
.pn-fonte { font-size: 10px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.pn-fonte a { color: var(--amber-ink); text-decoration: none; }
.pn-fonte a:hover { text-decoration: underline; }
.pn-tab-wrap { overflow-x: auto; }
.pn-tab { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pn-tab th { text-align: right; font-weight: 500; color: var(--ink-3); font-size: 10px; letter-spacing: .04em; padding: 3px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pn-tab td { text-align: right; padding: 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); color: var(--ink-2); white-space: nowrap; }
.pn-tab th:first-child, .pn-tab td:first-child { text-align: left; white-space: normal; color: var(--ink); }
.pn-tab td.chg.up { color: var(--up-ink); }
.pn-tab td.chg.down { color: var(--down-ink, #f87171); }
.pn-poder { display: inline-block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-ink); border: 1px solid var(--amber-dim); border-radius: 999px; padding: 0 7px; margin-bottom: 4px; }
.pn-resumo { margin: 0 0 6px; font-size: 11px; color: var(--ink-2); line-height: 1.4; }
.pn-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pn-lista li { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-left: 2px solid var(--line); background: var(--panel); border-radius: 0 8px 8px 0; font-size: 12px; line-height: 1.35; }
.pn-lista li a { color: var(--ink); text-decoration: none; }
.pn-lista li a:hover { text-decoration: underline; }
.pn-lista li small { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pn-lista li em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.pn-quando { font-size: 10px; color: var(--ink-3); }

/* ------------------------------------------------ janelas redimensionáveis
   public/janelas.js: alça no canto inferior direito de cada cartão da grade. */
#grid .card[data-box] { position: relative; }
.jan-alca {
  position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px;
  background: linear-gradient(135deg, transparent 0 46%, var(--ink-3) 46% 52%, transparent 52% 64%, var(--ink-3) 64% 70%, transparent 70% 82%, var(--ink-3) 82% 88%, transparent 88%);
  opacity: .35; cursor: nwse-resize; touch-action: none; z-index: 3; transition: opacity .15s;
}
.card:hover > .jan-alca, .jan-alca:focus-visible, .card.jan-arrastando > .jan-alca { opacity: 1; }
.jan-alca:focus-visible { outline: 2px solid var(--up-ink); outline-offset: 1px; }
.card.min > .jan-alca { display: none; }
.card.jan-alta > .card-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.card.min.jan-alta { height: auto !important; }
.card.jan-arrastando { outline: 1px dashed var(--line-hi); outline-offset: 2px; transition: none; }
body.jan-arrastando-pagina { cursor: nwse-resize; user-select: none; -webkit-user-select: none; }
@media (hover: none) { .jan-alca { opacity: .7; width: 24px; height: 24px; } }

/* trocar de lugar: alça de mover no alto, ao centro */
.jan-mover {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 34px; height: 12px; padding: 0; border: 0; border-radius: 6px;
  background: radial-gradient(circle, var(--ink-3) 1.2px, transparent 1.5px) 0 0 / 6px 6px; opacity: 0; cursor: grab; touch-action: none; z-index: 3; transition: opacity .15s;
}
.card:hover > .jan-mover, .jan-mover:focus-visible, .card.jan-movendo > .jan-mover { opacity: .9; }
.jan-mover:focus-visible { outline: 2px solid var(--up-ink); outline-offset: 2px; }
.card.jan-movendo { opacity: .6; outline: 2px dashed var(--up-ink); outline-offset: 2px; transition: none; }
body.jan-movendo-pagina, body.jan-movendo-pagina .jan-mover { cursor: grabbing; user-select: none; -webkit-user-select: none; }
@media (hover: none) { .jan-mover { opacity: .55; width: 42px; height: 16px; } }

/* mapa: alça de altura no pé e "Ampliar" (tela inteira) */
.mapa-secao { position: relative; }
.mapa-secao.min { height: auto !important; }
.jan-alca-alt {
  left: 50%; right: auto; bottom: 0; transform: translateX(-50%); width: 64px; height: 12px; border-radius: 6px 6px 0 0;
  background: var(--panel-3); border: 1px solid var(--line-soft); border-bottom: 0; cursor: ns-resize; z-index: 500;
}
.jan-alca-alt::before { content: ''; position: absolute; left: 22px; right: 22px; top: 4px; height: 4px; border-top: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); }
.mapa-secao:hover > .jan-alca-alt { opacity: 1; }
.mapa-secao.min > .jan-alca, .mapa-secao.mapa-max > .jan-alca { display: none; }
body.jan-so-altura { cursor: ns-resize; }
.mapa-secao.mapa-max { position: fixed; inset: 8px; z-index: 5000; height: auto !important; max-width: none; margin: 0 !important; background: var(--panel); }
.mapa-secao.mapa-max .mapa-bar { background: var(--panel); }
body.mapa-max-aberto::before { content: ""; position: fixed; inset: 0; z-index: 4999; background: rgba(4, 10, 9, .82); }
body.mapa-max-aberto { overflow: hidden; }

/* Brief Brasil por IA (public/paineis.js → briefIaHtml) */
.bm-ia { margin-bottom: 6px; }
.bm-ia-tit { margin: 2px 0 8px; font-size: 17px; line-height: 1.3; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.bm-ia-abertura { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.bm-ia-par { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.bm-ia-fontes { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.bm-ia-fontes a { color: var(--ink-3); text-decoration: underline dotted; }
.bm-ia-fontes a:hover { color: var(--ink); }
.bm-ia-agenda { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* ---------------------------------------------------------------- agenda */
.ag-dia { margin: 0 0 10px; }
.ag-data { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px; }
.ag-hoje .ag-data { color: var(--up-ink); }
.ag-ev { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline; padding: 5px 6px; border-radius: 8px; color: var(--ink); font-size: 13px; line-height: 1.35; }
.ag-ev:hover { background: var(--panel-3-hi, rgba(255,255,255,.04)); }
.ag-hora { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12px; }
.ag-destaque .ag-tit { font-weight: 600; }
.ag-org { font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; text-decoration: none; white-space: nowrap; }
.ag-org:hover { color: var(--ink); border-color: var(--line-hi, var(--line)); }
.ag-bal { font-size: 13px; line-height: 1.45; margin: 4px 0 8px; }
.ag-entregues { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag-chip { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.ag-chip small { color: var(--ink-3); }

.mc-sala { height: 340px; }
@media (max-width: 900px) { .mc-sala { height: 280px; } }