/* ============================================================
   BSB MARKET TRACKER · Bloomberg Terminal Theme
   ============================================================ */

:root {
  --bg:          #050505;
  --bg-panel:    #0c0c0c;
  --bg-input:    #111111;
  --bg-hover:    #181818;
  --green:       #00e676;
  --green-dim:   #00b248;
  --orange:      #ff8f00;
  --orange-dim:  #e65100;
  /* Um degrau acima do --orange na mesma escala (Amber 800 -> 600). Existe
     para texto longo: o laranja cheio foi feito para rotulo curto, e uma
     coluna inteira de titulos nele cansa a leitura. */
  --orange-soft: #ffb300;
  --red:         #f44336;
  --yellow:      #ffd600;
  --cyan:        #00e5ff;
  --white:       #e0e0e0;
  --grey:        #616161;
  --grey-light:  #9e9e9e;
  --border:      #1c1c1c;
  --border-hi:   #2e7d32;
  /* Davis Sans, a fonte da marca, em todo o conteudo (18/10/2026). A
     monoespacada fica so onde o alinhamento depende de largura fixa: a saida
     dos comandos, que desenha tabelas com espacos e linhas, o campo de digitar
     comando e trechos de codigo. */
  --font:        'Davis Sans', 'Segoe UI', Arial, sans-serif;
  --font-mono:   'Courier New', Consolas, 'Lucida Console', monospace;
  --font-size:   13px;
  --topbar-h:    32px;
  --cmdbar-h:    30px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;        /* page itself never scrolls */
  background: var(--bg);
  color: var(--green);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  /* Algarismos de largura igual: numa fonte proporcional, sem isso, os
     valores de uma coluna deixam de alinhar pela casa decimal. */
  font-variant-numeric: tabular-nums;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hi); }

/* ── Layout shell ─────────────────────────────────────────── */
.bsb-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;           /* fixed viewport height, never grows */
  overflow: hidden;
}

.bsb-main {
  flex: 1;
  min-height: 0;           /* allows flex child to shrink below content size */
  padding: 12px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  /* A folga de rodape era para a cmdbar, que subiu para o topo. O que sobra
     embaixo e a saida de comandos, que e `position: fixed` e so existe quando
     ha o que mostrar: reservar altura para ela deixaria um vao permanente no
     fim de toda pagina. */
  padding-bottom: 8px;
}

/* ── Top bar ──────────────────────────────────────────────── */
.bsb-topbar {
  height: var(--topbar-h);
  background: #000;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 0;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}

.bsb-topbar__brand {
  color: var(--orange);
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

/* Logo horizontal da BuysideBrazil no lugar do texto "BSB|MarketTracker": a mesma
   altura que as letras ocupavam, para a barra nao crescer nem desalinhar o resto. */
.bsb-topbar__logo {
  height: 15.6px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.bsb-topbar__nav {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 12px;
  gap: 2px;
}

.bsb-topbar__nav a {
  color: var(--grey-light);
  text-decoration: none;
  padding: 2px 10px;
  font-size: 11px;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
  text-transform: uppercase;
  transition: color 0.1s, border-color 0.1s;
}
.bsb-topbar__nav a:hover,
.bsb-topbar__nav a.active {
  color: var(--orange);
  border-color: var(--orange-dim);
}

/* Item visivel e inerte enquanto o e-mail nao foi confirmado.

   Esconde-lo seria pior: quem acabou de se cadastrar nao descobriria que o
   produto tem feed e relatorios, e a tela pareceria vazia por defeito. Apagado
   e com o titulo explicando, a razao fica evidente.

   pointer-events: none bloqueia o clique ANTES do onclick, entao o handler nem
   chega a rodar e nao e preciso um segundo caminho de decisao no JavaScript.
   Isto e aparencia: quem barra de verdade e o servidor. */
.bsb-topbar__nav a.bsb-topbar__nav--bloqueado,
.bsb-topbar__nav a.bsb-topbar__nav--bloqueado:hover {
  color: var(--grey);
  border-color: transparent;
  pointer-events: none;
  opacity: .45;
  cursor: not-allowed;
}

.bsb-topbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--grey-light);
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.bsb-topbar__user { color: var(--white); }
.bsb-topbar__clock { color: var(--yellow); letter-spacing: 1px; }
.bsb-topbar__status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); display: inline-block;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%  { opacity: 0.3; }
}

/* ── Command bar ──────────────────────────────────────────── */
/* Logo abaixo da topbar, e nao mais no rodape. A borda inferior separa a
   barra do conteudo; a superior separava do conteudo quando ela estava
   embaixo, e mante-la desenharia um traco duplo contra a topbar. */
.bsb-cmdbar {
  height: var(--cmdbar-h);
  background: #000;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  flex-shrink: 0;
}

.bsb-cmdbar__label {
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 1px;
}

.bsb-cmdbar__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 11px;
  caret-color: var(--green);
}

/* Copiar o comando digitado. min-width fixo porque o botao troca o icone pelo
   retorno curto (OK, VAZIO, ERRO) por um instante, e sem largura reservada o
   'WS: ONLINE' ao lado saltaria a cada clique. */
.bsb-cmdbar__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 18px;
  padding: 0 5px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--grey);
  font-family: var(--font);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.5px;
  cursor: pointer;
  flex-shrink: 0;
}
.bsb-cmdbar__copy:hover,
.bsb-cmdbar__copy:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
  outline: none;
}

/* Aviso passageiro na barra: estado do socket e atividade dos agendadores
   dividem o mesmo lugar. Sao a mesma pergunta ("o canal esta vivo?") e o
   rotulo permanente que existia antes ("WS: ONLINE") gastava espaco fixo para
   dizer que estava tudo bem, que e justamente a mensagem que ninguem le.

   max-width para o aviso longo nao empurrar o campo de comando: a barra agora
   divide UMA linha entre digitar e informar, e digitar tem precedencia. */
.bsb-cmdbar__aviso {
  font-size: 10px; letter-spacing: .5px; white-space: nowrap;
  color: var(--cyan);
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* RUNNING so aparece quando a rodada passa de um segundo, entao quando aparece
   e porque de fato demorou: pulsar ali informa, nao enfeita. */
.bsb-cmdbar__aviso--running { color: var(--orange); animation: bsb-sched-pisca 1s ease-in-out infinite; }
.bsb-cmdbar__aviso--done    { color: var(--green); }
.bsb-cmdbar__aviso--failed  { color: var(--red); }

@keyframes bsb-sched-pisca {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .bsb-cmdbar__aviso--running { animation: none; }
}

/* ── Panel ────────────────────────────────────────────────── */
.bsb-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.bsb-panel__header {
  background: #0f0f0f;
  border-bottom: 1px solid var(--border);
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bsb-panel__title {
  color: var(--orange);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.bsb-panel__badge {
  font-size: 10px;
  color: var(--grey);
  letter-spacing: 0.5px;
}

.bsb-panel__body {
  padding: 10px 12px;
  /* Contexto de posicionamento para o modo tomada da grade de séries manuais
     (issue #112): ela usa `position: absolute; inset: 0` para cobrir o painel,
     e sem isto cobriria a janela inteira. */
  position: relative;
}

/* CRM (/crm): painel de trabalho com menu lateral, cartoes e listas com
   avatar e etiqueta de situacao, na paleta do terminal. Tudo sob .crm-main
   para nao vazar para as outras telas. */
.crm-main { padding: 0; }
.crm-main [hidden] { display: none !important; }
.crm-main[aria-busy="true"] { cursor: progress; }
.crm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crm-muted { color: var(--grey-light); font-size: 11px; }
.crm-center { text-align: center; }
.crm-app { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 100%; }
.crm-app--collapsed { grid-template-columns: 56px minmax(0, 1fr); }
.crm-app--collapsed .crm-side { padding: 16px 8px; }
.crm-app--collapsed :is(.crm-brand__name, .crm-side__label, .crm-shortcuts) { display: none; }
.crm-app--collapsed .crm-brand { flex-direction: column; padding: 0 0 14px; }
.crm-app--collapsed .crm-nav__item { justify-content: center; padding: 8px 0; }
.crm-app--collapsed .crm-nav__item > span:not(.crm-nav__icon) { display: none; }
.crm-side__toggle { margin-left: auto; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--grey-light); font: inherit; line-height: 1; padding: 4px 7px; cursor: pointer; }
.crm-side__toggle:hover { background: var(--bg-hover); color: var(--white); }
.crm-side__toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.crm-app--collapsed .crm-side__toggle { margin-left: 0; }

.crm-side { background: #080808; border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; align-self: start; min-height: calc(100vh - var(--topbar-h) - var(--cmdbar-h)); }
.crm-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.crm-brand__mark { background: var(--orange); color: #000; font-weight: 700; font-size: 11px; letter-spacing: 1px; border-radius: 8px; padding: 7px 8px; }
.crm-brand__name { color: var(--white); font-weight: 500; }
.crm-side__label { color: var(--grey); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; margin: 12px 6px 4px; }
.crm-nav { display: flex; flex-direction: column; gap: 2px; }
.crm-nav__item, .crm-shortcut { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; border-radius: 8px; color: var(--grey-light); font: inherit; padding: 8px 10px; cursor: pointer; text-align: left; }
.crm-nav__item:hover, .crm-shortcut:hover { background: var(--bg-hover); color: var(--white); }
.crm-nav__item[aria-current="true"] { background: rgba(255, 143, 0, .12); color: var(--orange-soft); box-shadow: inset 3px 0 0 var(--orange); }
.crm-nav__item:focus-visible, .crm-shortcut:focus-visible, .crm-seeall:focus-visible, .crm-day:focus-visible, .crm-person:focus-visible, .crm-legend__row:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.crm-nav__icon { width: 16px; text-align: center; }
.crm-nav__badge { margin-left: auto; font-size: 10px; color: var(--grey-light); background: #151515; border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; min-width: 22px; text-align: center; }
.crm-nav__badge:empty { display: none; }
.crm-nav__badge[data-tone="late"] { color: var(--red); border-color: rgba(244, 67, 54, .4); }
.crm-shortcut { padding: 6px 10px; font-size: 12px; }
.crm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); flex: none; }

.crm-content { min-width: 0; padding: 16px 20px 24px; color: var(--white); }
.crm-content .cell-grey { color: var(--grey-light); }
.crm-split:has(#crm-lead-workspace:not([hidden])) .crm-table :is(th, td):is(:nth-child(2), :nth-child(4), :nth-child(5)) { display: none; }
@media (min-width: 1281px) { .crm-split:has(#crm-lead-workspace:not([hidden])) .crm-list-panel { position: sticky; top: 0; } }
.crm-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-top__who { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.crm-top__who strong { color: var(--white); font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.crm-top__who small { color: var(--grey-light); font-size: 11px; }
.crm-top__search { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; width: min(320px, 100%); }
.crm-top__search:focus-within { border-color: var(--orange); }
.crm-cta { border-radius: 8px; padding: 8px 16px; letter-spacing: .8px; }

.crm-main .bsb-panel.crm-card { border-radius: 10px; overflow: hidden; margin-bottom: 0; background: var(--bg-panel); }
.crm-main .crm-card > .bsb-panel__header { background: transparent; padding: 12px 14px 8px; border-bottom: 1px solid var(--border); gap: 8px; }
.crm-main .crm-card .bsb-panel__title { color: var(--white); letter-spacing: .6px; font-weight: 500; }
.crm-main .crm-card .bsb-panel__body { padding: 12px 14px; }
.crm-seeall { background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--grey-light); font: inherit; font-size: 11px; padding: 3px 9px; cursor: pointer; }
.crm-seeall:hover { color: var(--orange-soft); border-color: var(--orange); }
.crm-card h2 { font-size: 12px; color: var(--orange-soft); margin: 12px 0 6px; font-weight: 500; }

.crm-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #000; background: var(--orange-soft); }
.crm-avatar[data-tone="1"] { background: var(--green); }
.crm-avatar[data-tone="2"] { background: var(--cyan); }
.crm-avatar[data-tone="3"] { background: #b388ff; }
.crm-avatar[data-tone="4"] { background: #ff8a80; }
.crm-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; padding: 2px 9px; font-size: 10px; letter-spacing: .3px; white-space: nowrap; color: var(--grey-light); background: #161616; border: 1px solid var(--border); }
.crm-pill[data-tone="NEW"], .crm-shortcut[data-tone="NEW"] .crm-dot { color: var(--cyan); background: rgba(0, 229, 255, .08); border-color: rgba(0, 229, 255, .25); }
.crm-pill[data-tone="QUALIFYING"], .crm-pill[data-tone="OPEN"], .crm-shortcut[data-tone="QUALIFYING"] .crm-dot { color: var(--orange-soft); background: rgba(255, 179, 0, .1); border-color: rgba(255, 179, 0, .3); }
.crm-pill[data-tone="QUALIFIED"], .crm-pill[data-tone="CONVERTED"], .crm-pill[data-tone="DONE"], .crm-shortcut[data-tone="QUALIFIED"] .crm-dot, .crm-shortcut[data-tone="CONVERTED"] .crm-dot { color: var(--green); background: rgba(0, 230, 118, .08); border-color: rgba(0, 230, 118, .28); }
.crm-pill[data-tone="DISQUALIFIED"], .crm-pill[data-tone="late"], .crm-pill[data-tone="CANCELED"], .crm-shortcut[data-tone="DISQUALIFIED"] .crm-dot { color: var(--red); background: rgba(244, 67, 54, .08); border-color: rgba(244, 67, 54, .3); }
.crm-shortcut[data-tone] .crm-dot { background: currentColor; border: 0; }

.crm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.crm-kpi { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-height: 104px; }
.crm-kpi__label { color: var(--grey-light); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.crm-kpi__value { color: var(--white); font-size: 30px; font-weight: 500; line-height: 1.1; }
.crm-kpi[data-tone="up"] .crm-kpi__value { color: var(--green); }
.crm-kpi[data-tone="late"] .crm-kpi__value { color: var(--orange-soft); }
.crm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }

.crm-gauge-wrap { position: relative; max-width: 240px; margin: 0 auto; }
.crm-gauge { display: block; width: 100%; }
.crm-gauge path { fill: none; stroke-width: 22; }
.crm-gauge__track { stroke: #1a1a1a; }
.crm-gauge__value { stroke: var(--orange); }
.crm-gauge__center { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; display: flex; flex-direction: column; }
.crm-gauge__center strong { color: var(--white); font-size: 28px; font-weight: 500; line-height: 1; }
.crm-gauge__center span { color: var(--grey-light); font-size: 10px; letter-spacing: 1px; }
.crm-legend { display: flex; flex-direction: column; margin-top: 10px; }
.crm-legend__row { display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 10px; background: transparent; border: 0; border-top: 1px solid var(--border); padding: 7px 2px; color: var(--white); font: inherit; cursor: pointer; text-align: left; }
.crm-legend__row strong { text-align: right; }
.crm-legend__row .crm-pill { justify-self: start; }
.crm-legend__row:hover { background: var(--bg-hover); }

.crm-person { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: 8px 2px; color: var(--white); font: inherit; text-align: left; cursor: pointer; }
.crm-person:hover { background: var(--bg-hover); }
.crm-person__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.crm-person__text strong { font-weight: 500; overflow-wrap: anywhere; }

.crm-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12px; }
.crm-bar__label { color: var(--grey-light); overflow-wrap: anywhere; }
.crm-bar__track { height: 8px; background: #161616; border-radius: 4px; overflow: hidden; }
.crm-bar__fill { display: block; height: 100%; background: var(--orange); border-radius: 4px; min-width: 2px; }
.crm-bar[data-outcome="WON"] .crm-bar__fill { background: var(--green); }
.crm-bar[data-outcome="LOST"] .crm-bar__fill { background: var(--red); }
.crm-bar__value { color: var(--white); text-align: right; font-weight: 500; }

.crm-days { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.crm-days__nav { background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--grey-light); width: 26px; height: 26px; cursor: pointer; font-size: 16px; line-height: 1; }
.crm-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 0; color: var(--grey-light); font: inherit; cursor: pointer; }
.crm-day small { font-size: 10px; text-transform: capitalize; }
.crm-day strong { color: var(--white); font-size: 15px; font-weight: 500; }
.crm-day[data-today="true"] { border-color: var(--border); }
.crm-day[aria-pressed="true"] { background: var(--orange); color: #000; }
.crm-day[aria-pressed="true"] strong { color: #000; }
.crm-event { border-radius: 10px; padding: 10px 12px; margin-top: 8px; border: 1px solid rgba(255, 179, 0, .25); background: rgba(255, 179, 0, .08); }
.crm-event[data-tone="1"] { border-color: rgba(0, 229, 255, .25); background: rgba(0, 229, 255, .07); }
.crm-event[data-tone="2"] { border-color: rgba(179, 136, 255, .3); background: rgba(179, 136, 255, .08); }
.crm-event[data-tone="3"] { border-color: rgba(0, 230, 118, .25); background: rgba(0, 230, 118, .07); }
.crm-event[data-tone="late"] { border-color: rgba(244, 67, 54, .35); background: rgba(244, 67, 54, .09); }
.crm-event[data-tone="done"] { opacity: .55; }
.crm-event__head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.crm-event__head strong { color: var(--white); font-weight: 500; overflow-wrap: anywhere; }
.crm-event small { color: var(--grey-light); display: block; margin: 4px 0 8px; }
.crm-event__owner { display: flex; align-items: center; gap: 8px; color: var(--grey-light); font-size: 11px; }
.crm-event__owner .crm-avatar { width: 22px; height: 22px; font-size: 9px; }
.crm-empty { padding: 18px 0; text-align: center; }

.crm-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.crm-split:has(#crm-lead-workspace:not([hidden])) { grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.4fr); }
.crm-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.crm-filterbox { border-bottom: 1px solid var(--border); }
.crm-filterbox summary { cursor: pointer; padding: 8px 14px; color: var(--grey-light); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.crm-filterbox[open] summary { color: var(--orange-soft); }
.crm-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end; padding: 4px 14px 12px; }
.crm-filters label, .crm-form label { display: block; color: var(--grey-light); font-size: 11px; margin-bottom: 4px; }
.crm-filters .bsb-input, .crm-filters .bsb-select, .crm-form .bsb-input, .crm-form .bsb-select { display: block; width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; }
.crm-filters .bsb-input:focus, .crm-filters .bsb-select:focus, .crm-form .bsb-input:focus, .crm-form .bsb-select:focus { border-color: var(--orange); }
.crm-form .bsb-input:disabled, .crm-form .bsb-select:disabled { opacity: .55; }
/* WhatsApp numa linha: pais (com bandeira), codigo de area e numero. */
.crm-form .crm-phone__row { display: flex; gap: 6px; align-items: stretch; }
.crm-form .crm-phone__row .bsb-select, .crm-form .crm-phone__row .bsb-input { width: auto; min-width: 0; }
.crm-form .crm-phone__ddi { flex: 0 1 11rem; font-family: 'Twemoji Country Flags', var(--font); }
.crm-form .crm-phone__area { flex: 0 0 4.2rem; }
.crm-form .crm-phone__local { flex: 1 1 8rem; }
.crm-linkedin { display: block; font-size: 11px; color: var(--orange); }
.crm-form input[type="checkbox"], .crm-filters input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--orange); }
.crm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.crm-form .bsb-form-group, .crm-card .bsb-form-group { display: flex; flex-direction: column; align-items: stretch; gap: 4px; border: 0; padding: 0; margin-bottom: 0; min-width: 0; }
.crm-main .crm-card .bsb-form-group label, .crm-filters label { width: auto; color: var(--grey-light); text-transform: none; letter-spacing: .2px; font-size: 11px; margin: 0; }
.crm-form .bsb-form-group:has(input[type="checkbox"]) { flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.crm-form .bsb-form-group input[type="checkbox"] { order: -1; flex: none; }
.crm-form textarea, .crm-card textarea { resize: vertical; min-height: 70px; }
.crm-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; margin: 10px 0 0; }
.crm-main .crm-card .bsb-btn { border-radius: 6px; padding: 6px 14px; letter-spacing: .8px; background: transparent; border-color: #2a2a2a; color: var(--white); }
.crm-main .crm-card .bsb-btn:hover:not(:disabled) { border-color: var(--orange); color: var(--orange-soft); }
.crm-main .crm-card .bsb-btn:disabled { opacity: .4; cursor: not-allowed; }
.crm-main .crm-card .bsb-btn.bsb-btn-primary { background: var(--orange); border-color: var(--orange); color: #000; }
.crm-main .crm-card .bsb-btn.bsb-btn-primary:hover { background: var(--orange-soft); color: #000; }
#crm-opportunities .bsb-btn { text-transform: none; letter-spacing: 0; }
.crm-table-wrap { overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.crm-table th { color: var(--grey); font-weight: 400; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.crm-table td { color: var(--white); text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; vertical-align: middle; }
.crm-table td .crm-pill { margin: 1px 4px 1px 0; }
.crm-table tr:hover td { background: var(--bg-hover); }
.crm-table tr.crm-row--active td { background: rgba(255, 143, 0, .07); }
.crm-who { display: flex; align-items: center; gap: 10px; }
.crm-who > div { display: flex; flex-direction: column; min-width: 0; }
.crm-main .crm-who .bsb-btn { border: 0; background: transparent; color: var(--white); padding: 0; letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 500; white-space: normal; text-align: left; }
.crm-main .crm-who .bsb-btn:hover { color: var(--orange-soft); }
.crm-pagination { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; font-size: 11px; color: var(--grey-light); }
.crm-contact-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: center; }
.crm-contact-row > span:not(.crm-avatar):not(.crm-tags):not(.crm-pill) { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.crm-contact-row strong { color: var(--white); font-weight: 500; overflow-wrap: anywhere; }
.crm-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.crm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; padding: 12px 14px; overflow-x: auto; align-items: start; }
.crm-card > .crm-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 12px; }
.crm-stage { min-width: 0; background: #080808; border: 1px solid var(--border); border-radius: 10px; padding: 10px; border-top: 3px solid var(--orange); }
.crm-stage[data-outcome="WON"] { border-top-color: var(--green); }
.crm-stage[data-outcome="LOST"] { border-top-color: var(--red); }
.crm-stage__head { display: flex; justify-content: space-between; align-items: center; }
.crm-stage h2 { margin: 0; color: var(--white); font-size: 12px; }
.crm-stage__count { color: var(--grey-light); font-size: 11px; background: #151515; border-radius: 10px; padding: 1px 8px; }
.crm-opportunity-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 8px; overflow-wrap: anywhere; }
.crm-opportunity-card .crm-avatar { width: 24px; height: 24px; font-size: 9px; float: right; }
.crm-opportunity-card p { margin: 5px 0; font-size: 11px; color: var(--grey-light); }
.crm-main .crm-opportunity-card .bsb-btn { border: 0; background: transparent; color: var(--white); padding: 0; letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 500; white-space: normal; text-align: left; }
.crm-task-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; background: #080808; }
.crm-task-row--late { border-color: rgba(244, 67, 54, .35); background: rgba(244, 67, 54, .06); }
.crm-task-row strong, .crm-task-row span { overflow-wrap: anywhere; }
.crm-task-row strong:first-of-type { color: var(--white); font-weight: 500; }
.crm-history-event { padding: 10px 0 10px 14px; border-left: 2px solid var(--border); margin-left: 4px; position: relative; }
.crm-history-event::before { content: ""; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.crm-history-event p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 3px 0; }
.crm-history-event strong { color: var(--white); font-weight: 500; }
#crm-opportunities { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-split--offers:has(#crm-offer-editor:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.crm-form__wide { grid-column: 1 / -1; }
.crm-label { color: var(--grey-light); font-size: 11px; }
.crm-main .crm-switch-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #080808; }
.crm-main .crm-switch { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-size: 13px; cursor: pointer; }
.crm-main .crm-form .crm-switch__input { appearance: none; -webkit-appearance: none; order: 0; width: 38px; height: 20px; border-radius: 10px; background: #2a2a2a; border: 1px solid #3a3a3a; position: relative; cursor: pointer; transition: background .15s; flex: none; padding: 0; }
.crm-main .crm-switch__input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--grey-light); transition: transform .15s, background .15s; }
.crm-main .crm-switch__input:checked { background: rgba(255, 143, 0, .35); border-color: var(--orange); }
.crm-main .crm-switch__input:checked::before { transform: translateX(18px); background: var(--orange); }
.crm-main .crm-switch__input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.crm-offer-price { color: var(--white); padding: 7px 0; font-weight: 500; }
.crm-offer-price[data-tone="down"] { color: var(--orange-soft); }
.crm-offer-price[data-tone="up"] { color: var(--green); }
.crm-client-search { display: flex; gap: 8px; align-items: center; margin: 12px 0 4px; }
.crm-client-search .bsb-input, .crm-client-search .bsb-select { flex: 1; min-width: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; }
#crm-client-badge:empty { display: none; }

@media (max-width: 1280px) { .crm-split:has(#crm-lead-workspace:not([hidden])), .crm-split--offers:has(#crm-offer-editor:not([hidden])) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .crm-grid { grid-template-columns: minmax(0, 1fr); } .crm-card > .crm-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .crm-app, .crm-app--collapsed { grid-template-columns: minmax(0, 1fr); }
  .crm-app--collapsed .crm-side { padding: 10px 16px; }
  .crm-app--collapsed .crm-nav__item { justify-content: flex-start; padding: 8px 10px; }
  .crm-app--collapsed .crm-nav__item > span:not(.crm-nav__icon) { display: inline; }
  .crm-app--collapsed .crm-nav__badge:empty { display: none; }
  .crm-side { position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px 16px; }
  .crm-brand, .crm-side__label, .crm-shortcuts { display: none; }
  .crm-nav { flex-direction: row; flex-wrap: wrap; }
  .crm-nav__item { width: auto; }
  .crm-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) { .crm-board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: visible; } .crm-content { padding: 12px 16px 20px; } }
@media (max-width: 540px) { .crm-form, .crm-filters, .crm-card > .crm-filters { grid-template-columns: 1fr; } .crm-pagination { flex-wrap: wrap; } .crm-top__search { width: 100%; } }

/* ── Grid ─────────────────────────────────────────────────── */
.bsb-grid { display: grid; gap: 12px; }
.bsb-grid-2 { grid-template-columns: 1fr 1fr; }
.bsb-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 900px) {
  .bsb-grid-2, .bsb-grid-3 { grid-template-columns: 1fr; }
}

/* ── Auth page (login / signup) ───────────────────────────── */
.bsb-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--topbar-h) - var(--cmdbar-h));
  padding: 20px;
}

.bsb-auth__box {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--border-hi);
  background: var(--bg-panel);
}

.bsb-auth__header {
  background: #000;
  border-bottom: 1px solid var(--border-hi);
  padding: 10px 16px;
  text-align: center;
}

/* Cabecalho com a marca: a imagem ocupa o header inteiro, sem padding. */
.bsb-auth__header--brand {
  padding: 0;
  background: transparent;
  line-height: 0;
}

.bsb-auth__brand {
  display: block;
  width: 100%;
  height: auto;
}

/* Faixa de contexto sob a marca: diz em qual das telas de auth o usuario esta. */
.bsb-auth__context {
  border-bottom: 1px solid var(--border-hi);
  color: var(--grey-light);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 16px;
  text-align: center;
}

.bsb-auth__body { padding: 20px 16px; }

.bsb-auth__footer {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--grey);
}

.bsb-auth__footer a {
  color: var(--orange);
  text-decoration: none;
}
.bsb-auth__footer a:hover { text-decoration: underline; }

/* Definir senha, esqueci minha senha e alterar senha (issue #174). */
.bsb-auth__intro {
  color: var(--grey-light);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.bsb-auth__esqueci {
  margin-top: 10px;
  text-align: right;
  font-size: 11px;
}
.bsb-auth__esqueci a { color: var(--orange); text-decoration: none; }
.bsb-auth__esqueci a:hover { text-decoration: underline; }

/* As regras de forca ficam visiveis o tempo todo, e cada uma acende quando a
   senha digitada a cumpre: saber a regra so depois do erro e o que faz a
   pessoa tentar tres vezes. */
.bsb-senha-regras {
  margin: 10px 0 4px 0;
  padding: 6px 8px;
  border-left: 2px solid var(--border-hi);
  background: var(--bg-input);
  font-size: 11px;
}
.bsb-senha-regras__titulo {
  display: block;
  color: var(--grey-light);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.bsb-senha-regras ul { list-style: none; margin: 0; padding: 0; }
.bsb-senha-regras li { color: var(--grey); padding: 1px 0; }
.bsb-senha-regras li::before { content: "\25CB  "; }
.bsb-senha-regras li.ok { color: var(--green); }
.bsb-senha-regras li.ok::before { content: "\2714  "; }

/* Campos do dialogo de alterar senha: um por linha, com o rotulo em cima. */
.bsb-dlg__rotulo {
  display: block;
  margin-top: 10px;
  color: var(--grey-light);
  font-size: 10px;
  letter-spacing: 1px;
}
.bsb-dlg__rotulo + .bsb-dlg__campo { margin-top: 3px; }
.bsb-dlg__erro {
  display: none;
  margin-top: 10px;
  padding: 6px 8px;
  border-left: 2px solid var(--red);
  background: rgba(244, 67, 54, 0.08);
  color: var(--red);
}
.bsb-dlg__erro.visible { display: block; }

/* Formulario NOVO USUARIO do /admin (issue #174). */
.bsb-admin-form {
  display: none;
  border: 1px solid var(--border-hi);
  background: var(--bg-input);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.bsb-admin-form.visible { display: block; }
.bsb-admin-form__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px 12px;
}
.bsb-admin-form__grade label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--grey-light);
  font-size: 10px;
  letter-spacing: 1px;
}
.bsb-admin-form__grade .bsb-input,
.bsb-admin-form__grade .bsb-select { font-size: 11px; padding: 3px 6px; }
.bsb-admin-form__nota { color: var(--grey-light); font-size: 11px; margin-top: 6px; min-height: 14px; }
.bsb-admin-form__acoes { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }

/* ── Form elements ────────────────────────────────────────── */
.bsb-form-group {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}

.bsb-form-group:last-of-type { border-bottom: none; }

.bsb-form-group label {
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 1px;
  width: 100px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.bsb-form-group .bsb-arrow {
  color: var(--grey);
  margin-right: 6px;
  font-size: 12px;
}

.bsb-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 13px;
  caret-color: var(--green);
  padding: 2px 0;
}

.bsb-input::placeholder { color: var(--grey); }
.bsb-input:focus { color: var(--green); }

.bsb-select {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  -webkit-appearance: none;
}
.bsb-select option { background: #111; color: var(--white); }

/* ── Buttons ──────────────────────────────────────────────── */
.bsb-btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.bsb-btn {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 20px;
  border: 1px solid;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  text-decoration: none;
  display: inline-block;
}

.bsb-btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #000;
  font-weight: bold;
}
.bsb-btn-primary:hover { background: var(--orange-dim); border-color: var(--orange-dim); }
.bsb-btn-primary:disabled { background: var(--grey); border-color: var(--grey); color: #333; cursor: not-allowed; }

.bsb-btn-secondary {
  background: transparent;
  border-color: var(--border-hi);
  color: var(--green);
}
.bsb-btn-secondary:hover { background: var(--bg-hover); }

.bsb-btn-danger {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}
.bsb-btn-danger:hover { background: var(--red); color: #000; }

/* ── Alert / feedback ─────────────────────────────────────── */
.bsb-alert {
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-top: 12px;
  border-left: 3px solid;
  display: none;
}
.bsb-alert.visible { display: block; }
.bsb-alert-error  { border-color: var(--red);    color: var(--red);    background: rgba(244,67,54,.08); }
.bsb-alert-success{ border-color: var(--green);  color: var(--green);  background: rgba(0,230,118,.06); }
.bsb-alert-warn   { border-color: var(--yellow); color: var(--yellow); background: rgba(255,214,0,.06); }
.bsb-alert-info   { border-color: var(--cyan);   color: var(--cyan);   background: rgba(0,229,255,.06); }

/* ── Loading spinner ──────────────────────────────────────── */
.bsb-loading {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--grey-light);
  font-size: 11px;
  letter-spacing: 1px;
  margin-top: 12px;
  justify-content: center;
}
.bsb-loading.visible { display: flex; }
.bsb-spinner {
  width: 10px; height: 10px;
  border: 2px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── KV rows (key-value) ──────────────────────────────────── */
.bsb-kv { display: flex; gap: 6px; padding: 3px 0; font-size: 12px; }
.bsb-kv__key   { color: var(--grey-light); min-width: 130px; }
.bsb-kv__val   { color: var(--white); }
.bsb-kv__val.green  { color: var(--green); }
.bsb-kv__val.orange { color: var(--orange); }
.bsb-kv__val.red    { color: var(--red); }
.bsb-kv__val.yellow { color: var(--yellow); }

/* ── Status badge ─────────────────────────────────────────── */
.bsb-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: 1px;
  border: 1px solid;
  text-transform: uppercase;
}
.bsb-badge-active   { color: var(--green);  border-color: var(--green-dim); }
.bsb-badge-pending  { color: var(--yellow); border-color: var(--yellow); }
.bsb-badge-freemium { color: var(--grey-light); border-color: var(--grey); }
.bsb-badge-paid     { color: var(--orange); border-color: var(--orange); }
.bsb-badge-warn     { color: var(--yellow); border-color: var(--yellow); }

/* ── Banner (page-level alerts) ───────────────────────────── */
.bsb-banner {
  padding: 6px 16px;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid;
  display: none;
}
.bsb-banner.visible { display: block; }
.bsb-banner-success { background: rgba(0,230,118,.08); border-color: var(--green-dim); color: var(--green); }
.bsb-banner-error   { background: rgba(244,67,54,.08); border-color: var(--red);       color: var(--red);   }
.bsb-banner-warn    { background: rgba(255,214,0,.06); border-color: var(--yellow);    color: var(--yellow); }

/* ── Dashboard specific ───────────────────────────────────── */
.bsb-section-label {
  color: var(--grey);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.bsb-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  color: var(--grey-light);
  text-transform: uppercase;
  margin-right: 4px;
}

.bsb-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* ── Action row on dashboard ──────────────────────────────── */
.bsb-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── Empty state ──────────────────────────────────────────── */
.bsb-empty {
  padding: 24px;
  text-align: center;
  color: var(--grey);
  font-size: 11px;
  letter-spacing: 0.5px;
}
.bsb-empty__icon { font-size: 24px; margin-bottom: 8px; display: block; }

/* ── Cmdbar output ────────────────────────────────────────── */
/* Column layout so the close button stays put while the text scrolls. */
.bsb-cmdbar__output {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #080808;
  border-top: 1px solid var(--border-hi);
  border-bottom: 1px solid var(--border);
  z-index: 90;
}
/* O botao flutua sobre o canto em vez de ocupar uma faixa propria acima do
   texto. A faixa fazia sentido quando a barra de comandos vinha logo abaixo e
   as duas somavam duas linhas de moldura antes de qualquer conteudo. */
.bsb-cmdbar__close {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 1;
  /* Opaco, e nao transparente: ele flutua sobre a saida, e a primeira linha
     passando por tras dele desenharia texto cortado no meio de um botao. */
  background: #080808;
  border: 1px solid var(--border);
  color: var(--grey);
  font-family: var(--font);
  font-size: 11px;
  line-height: 1;
  padding: 2px 7px;
  cursor: pointer;
}
.bsb-cmdbar__close:hover,
.bsb-cmdbar__close:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
  outline: none;
}
#cmd-output__inner {
  flex: 1 1 auto;
  overflow-y: auto;
  /* O topo ganhou 6px porque o botao de fechar deixou de ter faixa propria e
     passou a flutuar sobre este canto. */
  padding: 6px 12px 8px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--white);
  white-space: pre;
  font-family: var(--font-mono);
}

/* ── Admin ────────────────────────────────────────────────── */
.bsb-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  gap: 8px;
}
.bsb-admin-toolbar__title {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--orange);
  white-space: nowrap;
}
.bsb-admin-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bsb-admin-result {
  margin-top: 6px;
  overflow-x: auto;
  min-height: 20px;
}
.bsb-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.bsb-admin-table th {
  text-align: left;
  color: var(--grey-light);
  border-bottom: 1px solid var(--border);
  padding: 4px 8px;
  white-space: nowrap;
  letter-spacing: 1px;
  font-size: 10px;
}
.bsb-admin-table th.bsb-admin-ordenavel { cursor: pointer; user-select: none; }
.bsb-admin-table th.bsb-admin-ordenavel:hover { color: var(--orange-soft); }
.bsb-admin-table th.bsb-admin-ordenavel--ativa { color: var(--orange-soft); }

.bsb-admin-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--white);
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsb-admin-table tr:hover td { background: var(--bg-hover); }
/* Conexao do WhatsApp (issue #61). Pares chave-valor densos, no lugar de uma
   tabela: sao seis linhas de estado, e cabecalho para elas seria cerimonia. */
.bsb-admin-kv { font-size: 11px; margin: 6px 0; }
.bsb-admin-kv__row { display: flex; gap: 10px; padding: 1px 0; }
.bsb-admin-kv__k { color: var(--grey); min-width: 180px; }
/* Os tons fora da tabela: o estado da conexao precisa deles no par acima. */
.bsb-admin-kv .cell-green, .bsb-admin-empty.cell-green { color: var(--green); }
.bsb-admin-kv .cell-red,   .bsb-admin-empty.cell-red   { color: var(--red); }

/* O QR em fundo claro de proposito: o leitor do celular erra em tema escuro,
   e aqui a legibilidade da camera vence a consistencia visual. */
.bsb-wa__qr { margin: 10px 0; }
.bsb-wa__qr img {
  width: 260px; height: 260px; image-rendering: pixelated;
  background: #fff; padding: 8px; border: 1px solid var(--border);
}
.bsb-wa__qr-hint { color: var(--grey-light); font-size: 11px; margin-bottom: 6px; max-width: 520px; }

.bsb-admin-table .cell-green  { color: var(--green); }
.bsb-admin-table .cell-yellow { color: var(--yellow); }
.bsb-admin-table .cell-red    { color: var(--red); }
.bsb-admin-table .cell-grey   { color: var(--grey); }
.bsb-admin-empty {
  padding: 10px 0;
  font-size: 11px;
  color: var(--grey);
  letter-spacing: 0.5px;
}

/* ── Feed cards ───────────────────────────────────────────────── */
.bsb-feed-card {
  border: 1px solid var(--border);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.bsb-feed-card:last-child { margin-bottom: 0; }
.bsb-feed-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.8px;
}
.bsb-feed-card__type {
  color: var(--orange);
  letter-spacing: 1px;
}
.bsb-feed-card__urgency {
  font-size: 10px;
  letter-spacing: 1px;
}
.bsb-feed-card__urgency.cell-red    { color: var(--red); }
.bsb-feed-card__urgency.cell-yellow { color: var(--yellow); }
.bsb-feed-card__urgency.cell-grey   { color: var(--grey); }
.bsb-feed-card__date {
  color: var(--grey);
  margin-left: auto;
  white-space: nowrap;
}
.bsb-feed-card__title {
  font-size: 13px;
  color: var(--white);
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin-bottom: 2px;
}
.bsb-feed-card__subtitle {
  font-size: 11px;
  color: var(--grey-light);
  margin-bottom: 6px;
  line-height: 1.4;
}
.bsb-feed-card__items {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bsb-feed-item {
  font-size: 11px;
  color: var(--grey-light);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.bsb-feed-item__section {
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 0.8px;
  white-space: nowrap;
}
.bsb-feed-item__section::after { content: " ·"; }
.bsb-feed-item__bullet {
  flex: 1;
  min-width: 0;
}
.bsb-feed-item__source {
  color: var(--grey);
  font-size: 10px;
  white-space: nowrap;
  text-decoration: none;
}
.bsb-feed-item__source:hover { color: var(--orange); text-decoration: underline; }

/* ==========================================================================
   PAINEL DE NOTÍCIAS
   Duas telas: a lista densa e o leitor. Sem token de cor novo: a manchete usa
   o âmbar da paleta, a entidade clicável usa o ciano, e o item já lido cai
   para o cinza. Não confundir com .bsb-feed, que é o feed de publicações
   da Buysidebrazil.
   ========================================================================== */

.bsb-news__bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
}
.bsb-news__bar-label { color: var(--green); font-size: 11px; letter-spacing: 1px; }
.bsb-news__search {
  flex: 1 1 240px; min-width: 180px;
  background: transparent; border: none; outline: none;
  color: var(--orange); font-family: var(--font); font-size: 13px;
}
.bsb-news__search::placeholder { color: var(--grey); }

.bsb-news__chips { display: flex; gap: 5px; flex-wrap: wrap; }
.bsb-news__chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--orange-dim); color: #000;
  font-size: 10px; letter-spacing: .5px;
  padding: 1px 6px; border-radius: 2px; cursor: pointer;
}
.bsb-news__chip:hover { background: var(--orange); }

.bsb-news__sort { display: flex; gap: 2px; }
.bsb-news__tab {
  background: var(--bg-panel); color: var(--grey-light);
  border: 1px solid var(--border); cursor: pointer;
  font-family: var(--font); font-size: 10px; letter-spacing: 1px;
  padding: 2px 9px;
}
.bsb-news__tab--on { background: var(--border-hi); color: #fff; border-color: var(--border-hi); }

.bsb-news__layout { display: flex; align-items: stretch; min-height: 320px; }

/* ---- trilho esquerdo ---- */
.bsb-news__rail {
  position: relative; flex: 0 0 170px; padding: 8px 0 12px;
  border-right: 1px solid var(--border); background: var(--bg-panel);
  max-height: 620px; overflow-y: auto;
}
.bsb-news__rail--collapsed { flex-basis: 22px; overflow: hidden; }
.bsb-news__rail--collapsed > *:not(.bsb-news__rail-toggle) { display: none; }
.bsb-news__rail-toggle {
  position: absolute; top: 4px; right: 4px;
  background: transparent; border: none; cursor: pointer;
  color: var(--grey); font-family: var(--font); font-size: 12px;
}
.bsb-news__rail-toggle:hover { color: var(--white); }
.bsb-news__rail-group {
  color: var(--orange); font-size: 10px; letter-spacing: 1.2px;
  padding: 10px 10px 3px;
}
.bsb-news__rail-item {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 2px 10px; cursor: pointer;
  color: var(--cyan); font-size: 12px;
  text-decoration: none;
}
.bsb-news__rail-item:hover { background: var(--bg-hover); }
.bsb-news__rail-item--on   { background: var(--border-hi); color: #fff; }
.bsb-news__rail-count      { color: var(--grey); font-size: 10px; }
.bsb-news__rail-item--on .bsb-news__rail-count { color: #cfe8cf; }

/* Feed da Buysidebrazil (issue #62). Reusa o desenho da tela de noticias; o que
   e proprio daqui e o tema na linha e o anexo, que noticia de RSS nao tem. */
/*
  O tema, onde quer que apareça: na lista do FEED e na tabela de RELATÓRIOS.

  O negrito mora aqui, e não na regra da lista, porque nos dois lugares ele faz
  a mesma coisa: separar rótulo de assunto entre textos que dividem a mesma
  cor. Deixá-lo só num dos dois daria a dois painéis irmãos duas leituras
  diferentes do mesmo dado.

  `min-width` e `text-overflow` só valem na lista: na tabela o span é inline
  dentro de um <td>, e nenhum dos dois se aplica a inline não substituído.
*/
.bsb-bsbfeed__tema {
  color: var(--orange); font-size: 10px; letter-spacing: .5px; font-weight: bold;
  min-width: 13ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/*
  A coluna do tema na LISTA do feed.

  Ela tinha só `min-width: 13ch` e nenhuma base flex, então encolhia até 13ch
  assim que o título disputava espaço, e 13ch corta o que a casa mais publica.
  Medido em produção: o percentil 90 do comprimento é 14 caracteres, e os três
  temas de maior volume passam disso.

      MONITOR DIÁRIO DE INFLAÇÃO   26 car., 146 posts  ->  MONITOR DIÁR…
      POLÍTICA MONETÁRIA           18 car.,  98 posts  ->  POLÍTICA MON…
      ESTADOS UNIDOS               14 car., 268 posts  ->  ESTADOS UNID…

  Base fixa e não elástica, porque a lista inteira é desenhada em colunas fixas:
  o título começando num x diferente a cada linha é o que torna uma lista densa
  ilegível de relance. 26ch cobre o maior tema de hoje, e o ellipsis fica como
  rede para o tema novo que passar disso.

  Só a largura aqui: o negrito é do tema em qualquer painel e mora na classe
  base, acima.
*/
.bsb-news__row .bsb-bsbfeed__tema {
  flex: 0 0 26ch;
}

/*
  O título no feed, um degrau mais claro que o laranja cheio.

  Escopado a `#bsb-list` e não aplicado a `.bsb-news__headline` inteira: a mesma
  classe desenha a lista de NOTÍCIAS (`#news-list`), que é outra tela e outro
  conteúdo: RSS de terceiros, e não publicação da casa.

  Vem depois da regra do tema de propósito: agora que o tema é negrito, os dois
  já se distinguem pelo peso, e o título podia abrir mão de parte da intensidade
  sem sumir. Antes do negrito, clarear o título o teria deixado abaixo do tema
  na hierarquia da linha.

  O `:not()` não é adorno. Um seletor com id vale mais que `.bsb-news__row--read
  .bsb-news__headline`, então sem ele esta regra venceria o cinza de "já lido" e
  o amarelo de "flash", estados que hoje só a lista de NOTÍCIAS aplica, e que
  passariam a não funcionar no dia em que o feed os usasse, sem nada apontando
  para cá. Declarar que a cor vale só no estado normal custa uma linha e remove
  a armadilha.
*/
#bsb-list .bsb-news__row:not(.bsb-news__row--read):not(.bsb-news__row--flash)
  .bsb-news__headline {
  color: var(--orange-soft);
}
/* O clipe diz que ha PDF ou imagem antes de abrir: quem procura a Rotina
   Matinal reconhece a linha sem entrar em cada uma. */
.bsb-bsbfeed__clipe { color: var(--cyan); font-size: 10px; white-space: nowrap; }

/* O corpo do post preserva as quebras. Os topicos sao a estrutura do texto e
   nao enfeite: colapsa-los transformaria uma analise de oito pontos num
   paragrafo unico. Justificar tambem estraga lista. */
#bsb-reader-body { white-space: pre-wrap; text-align: left; }

.bsb-bsbfeed__anexos { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.bsb-bsbfeed__anexo { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 11px; }
.bsb-bsbfeed__anexo a { color: var(--cyan); text-decoration: none; }
.bsb-bsbfeed__anexo a:hover { text-decoration: underline; }
.bsb-bsbfeed__tam { color: var(--grey); font-size: 10px; }
/* Imagem embutida: a tabela da agenda economica chega como imagem, e vira link
   faria o leitor perder justamente o conteudo. */
.bsb-bsbfeed__anexo img {
  max-width: 100%; border: 1px solid var(--border); background: #fff;
}

/* Davis Sans, a fonte da marca BuysideBrazil (design/fonts). Local, como todo
   asset do terminal: sem CDN. Texto normal sai no Regular (400); o Medium e o
   500, mais grosso, e ja foi usado por engano como peso normal, o que deixou
   o site inteiro com cara de negrito (18/10/2026). font-display swap mostra o texto na fonte de reserva ate o
   arquivo chegar, em vez de deixar a tela em branco. */
/* Bandeiras dos paises (emoji regional) onde o sistema nao as desenha: o
   Windows mostra so as letras. A fonte so tem as bandeiras, e o unicode-range
   faz o navegador baixa-la apenas quando uma aparece. Twemoji, CC-BY 4.0;
   licenca em /fonts/twemoji-country-flags/LICENSE.md. */
@font-face {
  font-family: 'Twemoji Country Flags';
  src: url('/fonts/twemoji-country-flags/TwemojiCountryFlags.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}
@font-face {
  font-family: 'Davis Sans';
  src: url('/fonts/davis-sans-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Davis Sans';
  src: url('/fonts/davis-sans-light-italic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Davis Sans';
  src: url('/fonts/davis-sans-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Davis Sans';
  src: url('/fonts/davis-sans-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Davis Sans';
  src: url('/fonts/davis-sans-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Davis Sans';
  src: url('/fonts/davis-sans-medium-italic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Davis Sans';
  src: url('/fonts/davis-sans-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Davis Sans';
  src: url('/fonts/davis-sans-bold-italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Item em destaque (issue #140).

   O modelo e o Alert Catcher do terminal antigo: uma faixa fixa acima da lista
   com o ultimo item dos seis temas de analise, e a lista rolando embaixo. Ela
   nao substitui a lista, por isso a borda esquerda em vez de caixa fechada,
   que anuncia destaque sem cortar a coluna em duas.

   A manchete e maior que a da lista de proposito: se tivesse o mesmo corpo de
   10px, o bloco viraria so um item com fundo diferente, e o ponto e que ele se
   leia de longe, sem procurar. */
/* Dentro do header a faixa ocupa tudo: o padding e a borda de baixo ja sao
   do header, e repeti-los desenharia duas molduras. */
.bsb-panel__header--destaque {
  display: block;
  padding: 0;
}

/* A ESCALA DO BLOCO SAI DAQUI.

   Os quatro tamanhos de dentro sao `em`, entao mudar esta linha move os quatro
   juntos e na mesma proporcao. Antes eram 10/13/11/10 em pixel solto, e subir
   o bloco significava acertar quatro numeros sem errar a razao entre eles.

   13px e o corpo base do terminal (--font-size): a faixa e conteudo de leitura,
   e nao rotulo, entao ela parte do mesmo tamanho do resto do texto em vez dos
   10px da lista densa logo abaixo. */
.bsb-bsbfeed__destaque {
  border-left: 3px solid var(--orange-soft);
  background: var(--bg-hover);
  font-size: 13px;
  padding: .8em 1em .85em;
  margin: 0;
  cursor: pointer;
}
.bsb-bsbfeed__destaque:hover { background: var(--bg-input); }

/* Cabecalho: tema, quando, quem. Mesma ordem da referencia. */
.bsb-bsbfeed__destaque-cab {
  display: flex; gap: .6em; align-items: baseline;
  font-size: 1em; margin-bottom: .25em;
}
.bsb-bsbfeed__destaque-tema {
  color: var(--orange); font-weight: bold; letter-spacing: .04em;
}
.bsb-bsbfeed__destaque-quando { color: var(--grey); }
/* Idade em vez de hora quando o destaque passa de um dia: o principio
   analitico da casa manda todo numero carregar o periodo, e "14:37" num item
   de 23 dias atras sugere novidade que nao existe. */
.bsb-bsbfeed__destaque-idade { color: var(--yellow); }
.bsb-bsbfeed__destaque-autor {
  color: var(--grey); margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch;
}

.bsb-bsbfeed__destaque-titulo {
  display: flex; align-items: flex-start; gap: .5em;
  color: var(--orange-soft); font-size: 1.3em; font-weight: bold;
  line-height: 1.25; margin-bottom: .3em;
}
.bsb-bsbfeed__destaque-titulo-txt { flex: 1 1 auto; }

/* Icone de traducao sob demanda do post (issue de i18n do feed, 29/09/2026).
   So aparece para quem le num idioma diferente de pt e so enquanto o post
   ainda nao tem traducao gravada (ver MT_LOCALE e o campo `traduzido`). */
.bsb-traduzir {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--cyan); opacity: .8; cursor: pointer;
}
.bsb-traduzir:hover { opacity: 1; }
.bsb-traduzir--carregando { cursor: wait; opacity: 1; }
.bsb-news__row .bsb-traduzir { width: 14px; height: 14px; }

/* Quatro linhas, cortadas pelo navegador. O servidor ja manda o trecho pronto
   em uma linha so; o clamp resolve a largura, que ele nao tem como saber. */
.bsb-bsbfeed__destaque-corpo {
  color: var(--white); font-size: 1.1em; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bsb-bsbfeed__destaque-ler {
  display: block; text-align: right; color: var(--cyan);
  font-size: 1em; margin-top: .3em;
}

/* A troca pisca uma vez. Reusa a duracao e a cor do --flash da lista, e some
   para quem pediu menos movimento. */
.bsb-bsbfeed__destaque--flash { animation: bsb-news-pulso .9s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .bsb-bsbfeed__destaque--flash { animation: none; }
}

@media (max-width: 900px) {
  .bsb-bsbfeed__destaque-autor { display: none; }
  .bsb-bsbfeed__destaque-corpo { -webkit-line-clamp: 3; }
}

/* Painel RELATÓRIOS: os documentos anexados aos posts.

   Tabela, e nao a lista densa do feed. O que identifica um relatorio e o nome
   do arquivo, o tamanho e a data, e essas tres colunas so se comparam de
   relance quando estao alinhadas; numa lista corrida o olho perde a coluna. */
.bsb-reports__table { width: 100%; font-size: 11px; }
.bsb-reports__table td { padding: 4px 8px; vertical-align: top; }
/* O nome do arquivo e a chave da linha: e por ele que se reconhece a Rotina
   Matinal daquela terca. */
.bsb-reports__file { color: var(--fg); white-space: nowrap; }
/* O titulo do post e contexto, nao identidade: cede espaco e nao empurra as
   colunas da direita para fora da tela. */
.bsb-reports__post {
  color: var(--grey); max-width: 34ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bsb-reports__baixar { color: var(--cyan); text-decoration: none; white-space: nowrap; }
.bsb-reports__baixar:hover { text-decoration: underline; }

/* Nenhuma coluna pode empurrar a pagina para os lados; a tabela rola sozinha. */
#rep-list { overflow-x: auto; }

/* Chegou noticia neste veiculo ou tema, mas fora do recorte que esta na tela.
   Sem este sinal a tela fica muda quando o filtro do usuario e restritivo, e
   mudez se confunde com sistema parado: ele nao teria como saber se o filtro
   e estreito ou se a coleta morreu.

   Pulsa e para: animacao infinita num trilho de 20 itens vira ruido de fundo e
   o olho deixa de registrar justamente o que ela deveria destacar. */
@keyframes bsb-news-pulso {
  0%   { background: var(--green-dim); color: #000; }
  100% { background: transparent; }
}
.bsb-news__rail-item--nova {
  animation: bsb-news-pulso 2s ease-out 3;
  border-left: 2px solid var(--green);
}
/* Urgente insiste mais e em vermelho: e a mesma distincao da pilula. */
@keyframes bsb-news-pulso-urgente {
  0%   { background: var(--red); color: #fff; }
  100% { background: transparent; }
}
.bsb-news__rail-item--urgente {
  animation: bsb-news-pulso-urgente 1.2s ease-out 6;
  border-left: 2px solid var(--red);
}

@media (prefers-reduced-motion: reduce) {
  /* Quem pediu menos movimento continua precisando do aviso: a borda fica, a
     pulsacao sai. */
  .bsb-news__rail-item--nova,
  .bsb-news__rail-item--urgente { animation: none; }
}

/* ---- área principal ---- */
.bsb-news__main { flex: 1 1 auto; min-width: 0; padding: 6px 0 10px; position: relative; }

.bsb-news__pill {
  position: sticky; top: 4px; z-index: 5;
  margin: 0 auto 6px; width: fit-content;
  background: var(--green-dim); color: #000;
  font-size: 11px; letter-spacing: .5px;
  padding: 2px 12px; border-radius: 10px; cursor: pointer;
}
.bsb-news__pill:hover { background: var(--green); }

/* Urgente furou a regra de nao mexer na lista de quem le, e a cor precisa
   dizer isso: verde e "chegou coisa", vermelho e "interrompi voce". */
.bsb-news__pill--flash { background: var(--red); color: #fff; }
.bsb-news__pill--flash:hover { background: var(--red); filter: brightness(1.15); }

.bsb-news__volume {
  color: var(--grey-light); font-size: 11px;
  padding: 0 10px 6px;
}

/* A lista é o coração: uma linha por matéria, sem quebra, colunas fixas. */
.bsb-news__list { list-style: none; margin: 0; padding: 0; }
.bsb-news__row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 1px 10px; cursor: pointer;
  white-space: nowrap;
}
.bsb-news__row:hover { background: var(--bg-hover); }
.bsb-news__num {
  flex: 0 0 34px; text-align: right;
  color: var(--grey); font-size: 12px;
}
.bsb-news__headline {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  color: var(--orange); font-size: 13px;
}
.bsb-news__row--read  .bsb-news__headline { color: var(--grey); }
.bsb-news__row--flash .bsb-news__headline { color: var(--yellow); text-transform: uppercase; }
.bsb-news__src  { flex: 0 0 46px; color: var(--grey-light); font-size: 11px; }
.bsb-news__time { flex: 0 0 44px; color: var(--grey-light); font-size: 11px; text-align: right; }

.bsb-news__more { text-align: center; padding: 10px; }

/* ---- leitor ---- */
.bsb-news__reader { padding: 4px 16px 14px; max-width: 900px; }
.bsb-news__reader-nav { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.bsb-news__reader-pos { color: var(--grey); font-size: 11px; margin-left: 6px; }
.bsb-news__reader-title {
  color: var(--white); font-size: 17px; font-weight: bold;
  line-height: 1.35; margin: 0 0 4px;
}
.bsb-news__reader-meta { color: var(--grey-light); font-size: 11px; margin-bottom: 12px; }
.bsb-news__reader-body {
  color: var(--orange); font-size: 13px; line-height: 1.6;
  text-align: justify;
}
.bsb-news__reader-body em {              /* trecho casado pela busca */
  font-style: normal; color: var(--yellow); background: rgba(255,214,0,.12);
}
.bsb-news__nobody { color: var(--grey); font-style: italic; }

/* Entidade clicável: o termo no meio do texto que leva a outra tela. */
.bsb-news__ent {
  color: var(--cyan); cursor: pointer;
  border-bottom: 1px dotted var(--cyan);
}
.bsb-news__ent:hover { background: rgba(0,229,255,.12); }

.bsb-news__related { margin-top: 14px; color: var(--grey); font-size: 11px; }
.bsb-news__related a {
  color: var(--cyan); text-decoration: none; margin-right: 12px; cursor: pointer;
}
.bsb-news__related a:hover { text-decoration: underline; }

.bsb-news__source-link {
  display: inline-block; margin-top: 14px;
  color: var(--green); font-size: 12px; letter-spacing: .5px; text-decoration: none;
}
.bsb-news__source-link:hover { color: #fff; }

@media (max-width: 780px) {
  .bsb-news__rail { display: none; }
  .bsb-news__src  { display: none; }
  /* Numa tela estreita a coluna fixa de 26ch comeria o título. Volta ao
     percentil 90 medido (14 car.), que ainda cobre nove em cada dez temas. */
  .bsb-news__row .bsb-bsbfeed__tema { flex: 0 0 14ch; }
}

/* ==========================================================================
   PAINEL DE FONTE (viewsource)
   Um painel para todas as fontes. Sem token de cor novo: reaproveita a paleta
   Bloomberg-like já definida no topo deste arquivo.
   ========================================================================== */

.bsb-sv__context {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
  padding: 5px 12px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--grey-light);
}
.bsb-sv__context b { color: var(--white); font-weight: normal; }
.bsb-sv__context .sv-provider { color: var(--orange); }

/* KPI tiles. O valor é o número; a comparação abaixo é o que o torna legível. */
.bsb-sv__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.bsb-sv__stat {
  border: 1px solid var(--border); border-left-width: 3px;
  background: var(--bg-panel); padding: 6px 10px;
}
.bsb-sv__stat--pos     { border-left-color: var(--green); }
.bsb-sv__stat--neg     { border-left-color: var(--red); }
.bsb-sv__stat--neutral { border-left-color: var(--yellow); }
.bsb-sv__stat-label { color: var(--grey);       font-size: 10px; letter-spacing: 1px; }
.bsb-sv__stat-value { color: var(--white);      font-size: 17px; margin: 2px 0; }
.bsb-sv__stat-cmp   { color: var(--grey-light); font-size: 10px; line-height: 1.3; }

.bsb-sv__charts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
/* position:relative contém o botão de PNG, que é absoluto. */
.bsb-sv__chart { border: 1px solid var(--border); background: var(--bg-panel);
                 padding: 6px; position: relative; }
.bsb-sv__chart-title    { color: var(--orange);     font-size: 11px; letter-spacing: 1px; padding-right: 86px; }
.bsb-sv__chart-subtitle { color: var(--grey-light); font-size: 10px; margin-bottom: 4px; padding-right: 86px; }
/* Altura fixa: gráfico que cresce com o dado desloca a tabela abaixo dele. */
.bsb-sv__chart-canvas   { width: 100%; height: 280px; }

.bsb-sv__tablebar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; background: var(--bg-input); border: 1px solid var(--border);
  border-bottom: none;
}
.bsb-sv__tablebar-label { color: var(--green); font-size: 10px; letter-spacing: 1px; }
.bsb-sv__filter {
  flex: 1 1 auto; background: transparent; border: none; outline: none;
  color: var(--orange); font-family: var(--font); font-size: 12px;
}
.bsb-sv__filter::placeholder { color: var(--grey); }
.bsb-sv__rowcount { color: var(--grey-light); font-size: 10px; white-space: nowrap; }

/* Altura fixa com rolagem própria: tabela longa não empurra o rodapé. */
.bsb-sv__tablewrap { max-height: 420px; overflow: auto; border: 1px solid var(--border); }
.bsb-sv__tablewrap thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-input);
  cursor: pointer; white-space: nowrap;
}
.bsb-sv__tablewrap thead th:hover { color: var(--white); }
.bsb-sv__sort { color: var(--cyan); }
.bsb-sv__num  { text-align: right; }
.bsb-sv__unit { color: var(--grey); font-size: 9px; }

.bsb-sv__downloads { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.bsb-sv__downloads-label { color: var(--grey); font-size: 10px; letter-spacing: 1px; }

.bsb-sv__tech { margin-top: 12px; color: var(--grey-light); font-size: 11px; }
.bsb-sv__tech summary { color: var(--orange); cursor: pointer; letter-spacing: 1px; font-size: 10px; }
.bsb-sv__tech-row { display: flex; gap: 10px; padding: 1px 0; }
.bsb-sv__tech-key { color: var(--grey); min-width: 150px; }

@media (max-width: 780px) {
  .bsb-sv__charts { grid-template-columns: 1fr; }
}

/* Célula de drill-down: leva a outra tela do próprio terminal. */
.bsb-sv__link { color: var(--cyan); cursor: pointer; border-bottom: 1px dotted var(--cyan); }
.bsb-sv__link:hover { background: rgba(0,229,255,.12); }

/* Link para fora do produto (issue #56): o post original na plataforma.
   Deliberadamente distinto do drill-down interno: um sai do terminal e o
   outro não, e confundir os dois faz o usuário perder o contexto sem esperar. */
.bsb-sv__ext { color: var(--yellow); text-decoration: none; white-space: nowrap; }
.bsb-sv__ext:hover { text-decoration: underline; }

/* Texto longo na célula (issue #56): fechado ocupa uma linha, aberto mostra o
   post inteiro com as quebras que o autor escreveu. O ponto é ler sem sair do
   terminal para a plataforma, e por isso `pre-wrap`: colapsar as quebras
   destruiria a formatação justamente dos posts que precisam ser lidos por
   inteiro. */
.bsb-sv__long {
  cursor: pointer;
  max-width: 46ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px dotted var(--grey);
}
.bsb-sv__long:hover { color: var(--white); }
.bsb-sv__long:focus-visible { outline: 1px solid var(--cyan); }
.bsb-sv__long.is-open {
  max-width: 72ch;
  white-space: pre-wrap; overflow: visible; word-break: break-word;
  border-bottom: none; color: var(--white);
}
/* Aberta, a célula deixa de empurrar a linha para uma altura só. */
.bsb-sv__tablewrap td:has(> .bsb-sv__long.is-open) { vertical-align: top; }

/* Badge de status e plataforma. O tom vem de um mapa fechado no JS: valor
   inesperado do banco cai em neutro e nunca vira nome de classe. */
.bsb-sv__badge {
  display: inline-block; padding: 0 4px; border-radius: 2px;
  font-size: 9px; letter-spacing: .5px; white-space: nowrap;
  border: 1px solid currentColor;
}
.bsb-sv__badge--ok      { color: var(--green); }
.bsb-sv__badge--warn    { color: var(--yellow); }
.bsb-sv__badge--bad     { color: var(--red); }
.bsb-sv__badge--neutral { color: var(--grey-light); }

/* Painel de chat (issue #59).

   Deliberadamente sem bolha, sem avatar e sem canto arredondado: chat de
   produto de mercado se parece com log de terminal, e o resto da interface e
   denso e monoespacado. Quem fala se distingue pelo prefixo e pela cor, que e
   como um terminal sempre distinguiu. */
.bsb-chat__log {
  max-height: 420px; overflow-y: auto;
  border: 1px solid var(--border); padding: 8px;
  font-size: 12px; line-height: 1.5;
}
.bsb-chat__msg { padding: 3px 0; white-space: pre-wrap; word-break: break-word; }
.bsb-chat__msg--user { color: var(--green); }
.bsb-chat__msg--assistant { color: var(--grey-light); }
.bsb-chat__msg--erro { color: var(--red); }
.bsb-chat__quem {
  color: var(--orange); font-size: 10px; letter-spacing: 1px;
  display: inline-block; min-width: 5ch;
}
/* O rodape de cada resposta: modelo, ferramentas e tokens. Numero sem
   referencia e dado, nao analise; aqui a referencia e o custo da resposta. */
.bsb-chat__meta { color: var(--grey); font-size: 10px; padding: 1px 0 6px 5ch; }

/* O relato do que esta acontecendo enquanto a resposta nao existe. Uma barra
   girando nao diz se o sistema trabalha ou travou; isto diz qual ferramenta
   foi chamada e o que voltou. */
.bsb-chat__progresso {
  border-left: 2px solid var(--orange); padding: 4px 8px; margin-top: 6px;
  color: var(--grey-light); font-size: 11px; max-height: 140px; overflow-y: auto;
}
.bsb-chat__evento { padding: 1px 0; }
.bsb-chat__evento b { color: var(--cyan); font-weight: normal; }
.bsb-chat__evento--erro { color: var(--red); }

.bsb-chat__corte {
  color: var(--yellow); font-size: 11px; padding: 4px 0;
}

.bsb-chat__entrada { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.bsb-chat__prompt { color: var(--orange); }
.bsb-chat__input {
  flex: 1 1 auto; background: var(--bg-input); border: 1px solid var(--border);
  outline: none; padding: 4px 8px;
  color: var(--green); font-family: var(--font); font-size: 12px;
}
.bsb-chat__input:focus { border-color: var(--cyan); }
.bsb-chat__input::placeholder { color: var(--grey); }
.bsb-chat__input:disabled { color: var(--grey); }

/* Painel de politico (issue #51). Uma secao por bloco do perfil, densas e
   empilhadas: o padrao operacional do produto e ler tudo numa rolagem, nao
   caçar informacao atras de aba. */
.bsb-pol__secao { margin-top: 14px; }
.bsb-pol__secao-titulo {
  color: var(--orange); font-size: 10px; letter-spacing: 1px;
  border-bottom: 1px solid var(--border); padding-bottom: 3px; margin-bottom: 4px;
}
.bsb-pol__secao-titulo span { color: var(--grey); letter-spacing: 0; }

/* Limite de fonte nao e ausencia de fato, e a diferenca precisa saltar. */
.bsb-pol__notas { margin-top: 14px; color: var(--yellow); font-size: 11px; }
.bsb-pol__notas div { padding: 2px 0; }

/* Comando sugerido no estado vazio: clicavel, como o badge CMD >. */
.bsb-pol__cmd {
  color: var(--bg); background: var(--orange); padding: 1px 5px; border-radius: 2px;
  cursor: pointer; font-size: 11px; display: inline-block; margin-top: 2px;
}
.bsb-pol__cmd:hover { background: var(--white); }

/* Comando em execucao. Sem sinal nenhum, um comando de dez segundos e
   indistinguivel de um que falhou, e foi assim que ingestpolitica pareceu nao
   produzir saida. O tempo decorrido aparece a partir de 2s, que e quando a
   espera comeca a incomodar. */
.bsb-cmd-busy {
  color: var(--yellow);
  font-size: 11px;
  padding: 1px 0;
  white-space: pre;
}

/* Comando recomendado, em qualquer texto da interface. O badge preenche o
   cmdbar e nao executa: quem dispara ingestao ou cura e o usuario. O desenho
   fica aqui, e nao em cada tela, para sair igual em toda a interface. */
.bsb-cmd { display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; }
.bsb-cmd__txt {
  color: var(--white); background: rgba(255,255,255,.06);
  padding: 0 4px; border-radius: 2px; font-size: 11px; white-space: nowrap;
}
.bsb-cmd__badge {
  color: var(--bg); background: var(--orange);
  padding: 0 5px; border-radius: 2px; cursor: pointer;
  font-size: 10px; font-weight: bold; letter-spacing: .5px; white-space: nowrap;
  user-select: none;
}
.bsb-cmd__badge:hover { background: var(--white); }
.bsb-cmd__badge:focus { outline: 1px solid var(--cyan); outline-offset: 1px; }

/* Linha de drill-down: abre a série que a linha identifica. Existe além do
   link de célula porque numa tela de série de séries o destino é a combinação
   das colunas, não uma delas. O ▸ é a afordância; sem ele a linha só reage
   depois que o ponteiro já está em cima. */
.bsb-sv__row--go { cursor: pointer; }
.bsb-sv__row--go:hover  td { background: rgba(0,229,255,.07); }
.bsb-sv__row--go:focus  { outline: 1px solid var(--cyan); outline-offset: -1px; }
.bsb-sv__row--go:focus  td { background: rgba(0,229,255,.10); }
.bsb-sv__go { color: var(--cyan); text-align: right; width: 14px; padding-left: 4px; }

/* Entidade que abre uma fonte de dados, contra a que abre um gráfico. */
.bsb-news__ent--sourceview  { border-bottom-style: solid; }
.bsb-news__ent--news_filter { color: var(--green); border-bottom-color: var(--green); }

/* Barra de ações do gráfico: baixar e copiar. Fica no canto superior direito
   da caixa do gráfico, e o title/subtítulo reservam espaço para ela. */
.bsb-chart-actions {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; gap: 4px;
}
.bsb-chart-actions__btn {
  font-size: 9px; padding: 2px 8px; opacity: .8;
  display: inline-flex; align-items: center; gap: 4px;
}
.bsb-chart-actions__btn:hover:not(:disabled) { opacity: 1; }
.bsb-chart-actions__btn:disabled { opacity: .4; cursor: default; }

/* ============================================================
   CREDENCIAIS DE REDES SOCIAIS (issue #53)

   Um card por plataforma. A densidade continua a do terminal, mas a ajuda de
   cada campo é texto corrido e não caber tudo numa linha aqui é o ponto: a
   issue exige que o operador preencha sem abrir documentação, e ajuda cortada
   em "..." é ajuda que ninguém lê.
   ============================================================ */

.bsb-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
}

.bsb-social-card {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  padding: 10px 12px;
}

.bsb-social-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px;
}
.bsb-social-card__name {
  color: var(--orange); font-size: 12px; letter-spacing: 1px;
}
.bsb-social-card__status { font-size: 11px; white-space: nowrap; }

.bsb-social-card__lib { font-size: 10px; color: var(--grey); margin-bottom: 6px; }
.bsb-social-card__lib code,
.bsb-social-warn code,
.bsb-social-help code { color: var(--cyan); font-family: var(--font-mono); }

/* Ressalva permanente da plataforma: expiração, 2FA, biblioteca parada. Fica no
   corpo do card e não num tooltip: é a informação que muda a decisão de qual
   conta usar, e tooltip é onde se guarda o que não se quer que seja lido. */
.bsb-social-warn,
.bsb-social-note {
  font-size: 10px; line-height: 1.45;
  border-left: 2px solid var(--border-hi);
  padding: 4px 8px; margin-bottom: 6px;
  background: rgba(255,255,255,.02);
}
.bsb-social-note { color: var(--grey-light); }
.bsb-social-warn.cell-red    { border-left-color: var(--red); }
.bsb-social-warn.cell-yellow { border-left-color: var(--yellow); }

.bsb-social-meta {
  border: 1px solid var(--border); padding: 6px 8px; margin-bottom: 8px;
  font-size: 10px;
}
.bsb-social-meta__row {
  display: flex; justify-content: space-between; gap: 12px; padding: 1px 0;
}
.bsb-social-meta__key { color: var(--grey); }

.bsb-social-field { margin-bottom: 10px; }
.bsb-social-field label { display: block; }

/* Obrigatório e opcional distinguidos por rótulo, e não só por cor: a issue
   pede que o campo informe seu nível, e cor sozinha não informa quem não a
   distingue. */
.bsb-social-req,
.bsb-social-opt {
  font-size: 9px; letter-spacing: 0; text-transform: lowercase;
  border: 1px solid var(--border); padding: 0 4px; margin-left: 6px;
}
.bsb-social-req { color: var(--orange); border-color: var(--orange-dim); }
.bsb-social-opt { color: var(--grey); }

.bsb-social-help {
  font-size: 10px; color: var(--grey-light); line-height: 1.45; margin-top: 3px;
}

.bsb-social-fielderr { font-size: 10px; color: var(--red); margin-top: 2px; }

.bsb-social-card__actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.bsb-social-card__actions .bsb-btn { font-size: 10px; padding: 3px 10px; }

/* O que o teste faz e o que ele não coleta, sempre visível junto do botão:
   ler isso depois de clicar não ajudaria. */
.bsb-social-card__testhelp {
  font-size: 10px; color: var(--grey); line-height: 1.45; margin-top: 6px;
}


/* Acoes por linha na tabela de usuarios do admin.

   Botoes pequenos e lado a lado: a coluna e a ultima e nao pode empurrar as
   outras. O de remover fica vermelho no hover, e nao sempre: uma coluna com
   cinquenta botoes vermelhos vira ruido e o olho deixa de registrar o aviso
   justamente na linha em que ele importa. */
.bsb-admin-acoes { white-space: nowrap; }

/* A CELULA DE ACOES NAO E TEXTO, E O RECORTE DELA ESCONDIA O ULTIMO BOTAO.

   `.bsb-admin-table td` traz `max-width: 260px; overflow: hidden`, que existe
   para impedir que titulo ou e-mail longo estoure a largura da tabela. Numa
   coluna de botoes isso recorta, e recorta pelo fim, que e onde ficam as
   acoes destrutivas.

   Medido na tabela do DATABASE, com os cinco botoes do vinculo por upload:
   DESCRICAO ~81px, ARQUIVO ~71, TEMA ~54, DESATIVAR ~81, APAGAR ~65, somando
   ~352px numa celula de 260px. Sobravam os tres primeiros inteiros, DESATIVAR
   pela metade e APAGAR invisivel. O botao estava no DOM o tempo todo.

   `width: 1%` com `nowrap` e o jeito de a coluna pedir exatamente o que os
   botoes ocupam: as colunas de texto ficam com o resto e continuam
   truncando com reticencias, que e o que aquelas regras queriam. */
.bsb-admin-table td.bsb-admin-acoes {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  width: 1%;
}

/* Rede de seguranca: com muitas colunas largas a tabela pode passar do painel,
   e ai a ultima acao volta a ficar fora de alcance por outro caminho. Rolar
   dentro da propria caixa mantem todo botao acessivel sem a pagina rolar de
   lado. */
.bsb-admin-rolagem { overflow-x: auto; }

.bsb-admin-acao {
  font-size: 9px; padding: 2px 8px; margin-right: 4px; letter-spacing: .5px;
}
.bsb-admin-acao--perigo:hover {
  color: var(--red); border-color: var(--red);
}

/* Campo recusado pela validacao de dominio no cadastro. A borda vermelha diz
   ONDE esta o problema; a mensagem, qual e. Uma sem a outra deixa o usuario
   procurando. */
.bsb-input--invalido {
  border-color: var(--red);
  color: var(--red);
}
/* ISSUES 79-81: viewers de anexos, PDFs e graficos. */
.bsb-bsbfeed__anexo--image { align-items: flex-start; }
.bsb-bsbfeed__image-wrap { position: relative; display: inline-block; max-width: 100%; }
.bsb-bsbfeed__fullscreen {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: rgba(0,0,0,.74); color: var(--cyan);
  cursor: pointer; opacity: .88;
}
.bsb-bsbfeed__fullscreen:hover { opacity: 1; }
.bsb-bsbfeed__arquivo { color: var(--fg); overflow-wrap: anywhere; }
.bsb-bsbfeed__acao {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--cyan);
  font: inherit; font-size: 10px; line-height: 1; padding: 4px 7px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bsb-bsbfeed__acao:hover { border-color: var(--cyan); text-decoration: none; }

.bsb-reports__acoes { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.bsb-reports__acao,
.bsb-reports__baixar {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--cyan);
  font: inherit; font-size: 10px; line-height: 1; padding: 4px 7px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bsb-reports__acao:hover,
.bsb-reports__baixar:hover { border-color: var(--cyan); text-decoration: none; }

/* Edicao inline no painel RELATORIOS (issue #83) */
.bsb-reports__input {
  background: var(--bg); color: var(--white); border: 1px solid var(--border-hi);
  font: inherit; font-size: 11px; padding: 3px 5px; width: 100%; max-width: 420px;
}
.bsb-reports__input:focus { border-color: var(--cyan); outline: none; }

.bsb-reports__edit-acoes {
  display: flex; gap: 6px; align-items: center; margin-top: 5px; flex-wrap: wrap;
}

/* O erro aparece na propria linha: um alerta tiraria o admin do painel e
   faria perder filtro, paginacao e posicao de rolagem. */
.bsb-reports__erro { color: var(--red); font-size: 10px; }

/* Marca do que foi corrigido a mao. Sem ela o admin nao distingue o que ja
   revisou do que continua como o parser deixou. */
.bsb-reports__curado { color: var(--yellow); font-size: 10px; margin-left: 4px; cursor: help; }

.mt-embedded-viewer-host { width: 100%; padding-top: 8px; }
.mt-media-viewer,
.mt-chart-viewer {
  position: relative; display: none; width: 100%; margin: 10px 0 14px; padding: 0;
  background: transparent;
}
.mt-media-viewer--open,
.mt-chart-viewer--open { display: block; }
.mt-media-viewer__dialog,
.mt-chart-viewer__dialog {
  width: 100%; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--border);
}
.mt-media-viewer__dialog { height: min(76vh, 780px); min-height: 420px; }
.mt-chart-viewer__dialog { height: min(82vh, 860px); min-height: 460px; }
.mt-media-viewer__bar,
.mt-chart-viewer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--panel-2);
}
.mt-media-viewer__title,
.mt-chart-viewer__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.mt-media-viewer__actions,
.mt-chart-viewer__actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.mt-media-viewer__btn,
.mt-media-viewer__download { font-size: 10px; padding: 4px 8px; text-decoration: none; }
.mt-media-viewer__zoom {
  min-width: 42px; text-align: center; color: var(--grey-light); font-size: 10px;
  border: 1px solid var(--border); padding: 4px 6px; background: var(--bg);
}
.mt-media-viewer__body { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; overflow: auto; background: #111; }
.mt-media-viewer__frame { width: 100%; height: 100%; border: 0; background: #fff; }
.mt-media-viewer__img { max-width: none; height: auto; object-fit: contain; background: #fff; transform-origin: top center; }
.mt-chart-viewer__canvas { flex: 1; min-height: 360px; width: 100%; background: #fff; }
.mt-chart-viewer__fallback { width: 100%; height: 100%; object-fit: contain; background: #fff; }

@media (max-width: 700px) {
  .mt-media-viewer__dialog { min-height: 360px; height: min(72vh, 680px); }
  .mt-chart-viewer__dialog { min-height: 380px; height: min(78vh, 720px); }
  .mt-media-viewer__bar,
  .mt-chart-viewer__bar { align-items: flex-start; flex-direction: column; }
  .mt-media-viewer__actions,
  .mt-chart-viewer__actions { flex-wrap: wrap; }
  .bsb-reports__acoes { justify-content: flex-start; }
}

/* ── painel da agenda operacional (comando SCHEDULE) ───────────────────────
   O comando devolvia 40 linhas no output. Aqui o mesmo estado vira quadro:
   resumo clicavel em cima, tabela embaixo, acao por linha. */

.bsb-sched__resumo {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}

/* Cada bloco e um filtro: clicar liga, clicar de novo desliga. */
.bsb-sched__bloco {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--white); cursor: pointer; font: inherit;
  padding: 6px 12px; min-width: 84px; text-align: left;
}
.bsb-sched__bloco:hover        { border-color: var(--cyan); }
.bsb-sched__bloco--ativo       { border-color: var(--cyan); background: var(--bg-panel); }
.bsb-sched__bloco-n            { display: block; font-size: 18px; line-height: 1.1; }
.bsb-sched__bloco-r            { display: block; font-size: 9px; letter-spacing: 1px; color: var(--grey); }

/* A cor carrega o significado: problema em vermelho, normal em verde.
   O rotulo continua escrito, porque cor sozinha nao e acessivel. */
.bsb-sched__bloco--neg .bsb-sched__bloco-n  { color: var(--red); }
.bsb-sched__bloco--warn .bsb-sched__bloco-n { color: var(--yellow); }
.bsb-sched__bloco--run .bsb-sched__bloco-n  { color: var(--cyan); }
.bsb-sched__bloco--pos .bsb-sched__bloco-n  { color: var(--green); }

.bsb-sched__estado {
  font-size: 9px; letter-spacing: 1px; padding: 2px 6px;
  border: 1px solid var(--border); white-space: nowrap;
}
.bsb-sched__estado--neg     { color: var(--red);    border-color: var(--red); }
.bsb-sched__estado--warn    { color: var(--yellow); border-color: var(--yellow); }
.bsb-sched__estado--run     { color: var(--cyan);   border-color: var(--cyan); }
.bsb-sched__estado--pos     { color: var(--green);  border-color: var(--green); }
.bsb-sched__estado--neutral { color: var(--grey); }

/* O erro fica recuado sob o nome, e nao em coluna propria: uma coluna para ele
   deixaria a tabela ilegivel para os 90% que estao bem. */
.bsb-sched__erro { color: var(--red); font-size: 10px; }

/* ── Séries mantidas à mão: a grade (issue #112) ──────────────────────────
   
   A tela anterior era um formulário com três campos soltos numa página fora
   do admin, e a medida do resultado foi zero conferências desde que subiu.
   Aqui é planilha: uma linha por data, uma coluna por campo, edição no lugar.
   Quem preenche está copiando um post com cinco números: o formato tem de
   parecer com o que a pessoa está lendo.
   
   O MODO TOMADA
   Enquanto se edita, a grade ocupa o painel inteiro do admin. Não é estética:
   a ABICOM tem cinco colunas mais data e ações, e disputá-las com as outras
   seções do admin deixaria a linha estreita demais para digitar sem errar de
   célula, que é justamente o erro que esta tela existe para consertar. */

.bsb-ms { font-size: 11px; }

/* Modo tomada: a div cobre o painel do admin inteiro. Fica DENTRO do painel,
   e não como modal sobre a página, para o operador não perder o contexto de
   onde está: a barra de comando e a topbar continuam acessíveis. */
.bsb-ms--tomada {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  overflow: hidden;
}
.bsb-ms--tomada .bsb-ms__corpo { flex: 1; overflow: auto; }

.bsb-ms__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.bsb-ms__nome { color: var(--orange); letter-spacing: 1px; font-size: 12px; }
.bsb-ms__meta { color: var(--grey-light); font-size: 10px; }
.bsb-ms__meta a { color: var(--cyan); }
.bsb-ms__acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* A grade. `position: sticky` no cabeçalho porque a ABICOM acumula centenas
   de dias e rolar sem cabeçalho é digitar às cegas na coluna errada. */
.bsb-ms__grade { width: 100%; border-collapse: collapse; font-size: 11px; }
.bsb-ms__grade th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-panel);
  text-align: right;
  color: var(--grey-light);
  border-bottom: 1px solid var(--border);
  padding: 4px 6px;
  font-size: 10px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.bsb-ms__grade th:first-child,
.bsb-ms__grade td:first-child { text-align: left; }
.bsb-ms__grade th .u { color: var(--grey); letter-spacing: 0; }
.bsb-ms__grade td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.bsb-ms__grade tr:hover td { background: var(--bg-hover); }

/* Célula editável: input sem cara de input até receber foco, para a grade ler
   como planilha e não como formulário de cadastro. */
.bsb-ms__cel {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--white);
  font-family: var(--font);
  font-size: 11px;
  padding: 3px 6px;
  text-align: right;
}
.bsb-ms__cel:focus {
  outline: none;
  border-color: var(--border-hi);
  background: var(--bg-input);
}
.bsb-ms__cel--data { text-align: left; }
.bsb-ms__cel--nota { text-align: left; color: var(--grey-light); }
/* Alterada e ainda não gravada. O amarelo é o mesmo dos avisos do terminal. */
.bsb-ms__cel--suja { border-color: var(--yellow); }
.bsb-ms__cel:disabled { color: var(--grey); }

.bsb-ms__linha--nova td { background: rgba(0, 230, 118, 0.04); }
.bsb-ms__linha--suja td { background: rgba(255, 214, 0, 0.05); }

.bsb-ms__acao {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--grey-light);
  font-family: var(--font);
  font-size: 10px;
  padding: 2px 7px;
  cursor: pointer;
}
.bsb-ms__acao:hover { border-color: var(--grey-light); color: var(--white); }
.bsb-ms__acao--apagar:hover { border-color: var(--red); color: var(--red); }
.bsb-ms__acao--gravar:hover { border-color: var(--green); color: var(--green); }

.bsb-ms__aviso {
  font-size: 10px;
  padding: 4px 0;
  letter-spacing: 0.5px;
}
.bsb-ms__aviso--ok  { color: var(--green); }
.bsb-ms__aviso--err { color: var(--red); }

/* A lista de séries, quando nenhuma está aberta. */
.bsb-ms__cartao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 5px 8px; border: 1px solid var(--border);
  margin-bottom: 4px; cursor: pointer;
}
.bsb-ms__cartao:hover { border-color: var(--border-hi); background: var(--bg-hover); }
.bsb-ms__cartao__nome { color: var(--white); }
.bsb-ms__cartao__cod  { color: var(--grey); font-size: 10px; }

/* Relatorio pendente de aprovacao (issue #114). Amarelo, que e o tom de aviso
   do terminal: o selo precisa saltar na lista, porque quem abre o painel de
   manha tem de ver num olhar que ha deck esperando conferencia. */
.bsb-reports__pendente {
  color: var(--yellow);
  border: 1px solid var(--yellow);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 0 4px;
  margin-left: 4px;
  white-space: nowrap;
}

/* ── Diálogo do terminal ──────────────────────────────────────────────────
   Substitui alert(), confirm() e prompt() do navegador.

   Os diálogos nativos quebram de três formas que importam aqui: aparecem no
   chrome do navegador, num visual claro que nada tem a ver com o terminal;
   travam a thread, então nenhuma animação ou WebSocket avança enquanto estão
   abertos; e não deixam formatar nada: o confirm de remover usuário virava um
   bloco de texto sem hierarquia, com o aviso destrutivo do mesmo tamanho que o
   resto.

   z-index 200 fica acima da cmdbar (90), que é o teto do resto da interface. */
.bsb-dlg-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}

.bsb-dlg {
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  font-family: var(--font);
  font-size: var(--font-size);
  color: var(--white);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.bsb-dlg--perigo { border-color: var(--red); }

.bsb-dlg__titulo {
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  font-size: 11px;
}

.bsb-dlg--perigo .bsb-dlg__titulo { color: var(--red); }

.bsb-dlg__corpo {
  padding: 12px 10px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* O aviso do que não tem desfazer, separado do texto corrido: num parágrafo
   único ele tinha o mesmo peso visual que a pergunta. */
.bsb-dlg__aviso {
  display: block;
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 2px solid var(--red);
  background: rgba(244, 67, 54, 0.08);
  color: var(--red);
}

.bsb-dlg__campo {
  width: 100%;
  margin-top: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--font-size);
  padding: 5px 6px;
}

.bsb-dlg__campo:focus { outline: none; border-color: var(--border-hi); }
textarea.bsb-dlg__campo { display: block; resize: vertical; min-height: 72px; }

/* Opções de escolha: uma por linha, porque o menu "digite 1, 2 ou 3" do prompt
   obrigava a pessoa a traduzir número em significado. */
.bsb-dlg__opcoes { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }

.bsb-dlg__opcao {
  text-align: left;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--font-size);
  padding: 6px 8px;
  cursor: pointer;
}

.bsb-dlg__opcao:hover { background: var(--bg-hover); border-color: var(--border-hi); }
.bsb-dlg__opcao b { color: var(--cyan); }
.bsb-dlg__opcao small { display: block; color: var(--grey-light); font-size: 11px; }

.bsb-dlg__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}

/* ── Publicação manual no FEED (/admin/feed-post, issue #237) ─────────── */
.bsb-afp { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.bsb-afp__grupo { border: 1px solid var(--border); padding: 8px 10px 10px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.bsb-afp__grupo legend { font-size: 10px; letter-spacing: 1px; color: var(--grey-light); padding: 0 4px; }
.bsb-afp__grupo small { flex-basis: 100%; }
.bsb-afp__comunidades { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.bsb-afp__comunidade { flex: 1 1 260px; display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--border); padding: 8px 10px; cursor: pointer; }
.bsb-afp__comunidade:has(input:checked) { border-color: var(--orange); background: var(--bg-input); }
.bsb-afp__comunidade span { display: flex; flex-direction: column; gap: 2px; }
.bsb-afp__comunidade b { color: var(--orange); letter-spacing: 1px; }
.bsb-afp__comunidade small { color: var(--grey-light); font-size: 11px; }
.bsb-afp__jid { font-family: var(--font-mono); font-size: 10px !important; }
.bsb-afp__campo { display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: 1px; color: var(--grey-light); }
.bsb-afp__campo .bsb-input, .bsb-afp__campo small { letter-spacing: normal; }
.bsb-afp__texto { min-height: 180px; resize: vertical; font-family: var(--font); line-height: 1.45; }
.bsb-afp__anexos { font-size: 12px; color: var(--white); letter-spacing: normal; }
.bsb-afp__opcao { font-size: 12px; cursor: pointer; }
.bsb-afp__off { opacity: 0.45; }
.bsb-afp__data { width: auto; }
.bsb-afp__acoes { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
/* Os campos do terminal são transparentes; num formulário longo, sem moldura,
   ninguém acha onde digitar. */
.bsb-afp .bsb-input { width: 100%; box-sizing: border-box; background: var(--bg-input); border: 1px solid var(--border); padding: 6px 8px; font-size: 13px; }
.bsb-afp .bsb-input:focus { border-color: var(--border-hi); color: var(--white); }
.bsb-afp .bsb-admin-form__grade .bsb-input { font-size: 13px; padding: 6px 8px; }
.bsb-afp small, .bsb-afp .cell-grey { color: var(--grey-light); font-size: 11px; }
.bsb-afp .cell-red { color: var(--red); }
.bsb-afp .cell-green { color: var(--green); }
.bsb-afp__opcao { color: var(--white); }
.bsb-afp__data { width: auto !important; }

/* ── Mensagem bloqueante: telas do ADMIN (issue #234) ──────────────────── */
.bsb-mdm { max-width: 600px; }
.bsb-mdm__corpo { white-space: normal; }
.bsb-mdm__quem { font-size: 13px; }
.bsb-mdm__info { font-size: 11px; margin-top: 2px; color: var(--grey-light); }
.bsb-mdm__quem .cell-grey { color: var(--grey-light); }
.bsb-mdm__nota { margin: 10px 0 4px; }
.bsb-mdm__texto { min-height: 96px; }
.bsb-mdm__contador { font-size: 10px; text-align: right; margin-top: 2px; }
.bsb-mdm__modos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.bsb-mdm__modo { font-size: 12px; cursor: pointer; }
.bsb-mdm__opcoes { margin-top: 6px; }
.bsb-mdm__opcao { display: flex; gap: 6px; margin-top: 4px; }
.bsb-mdm__opcao .bsb-dlg__campo { margin-top: 0; }
.bsb-mdm__mais { margin-top: 6px; font-size: 10px; padding: 3px 10px; }
.bsb-mdm__selo { font-size: 10px; letter-spacing: 0.5px; white-space: nowrap; }
.bsb-mdm__selo.orange { color: var(--orange); }
.bsb-mdm__selo.cell-yellow { color: var(--yellow); }
.bsb-mdm__selo.cell-green { color: var(--green); }
.bsb-mdm__linha { margin-bottom: 4px; }
.bsb-mdm__trecho { max-width: 280px; }
.bsb-live__clicavel { cursor: pointer; }
.bsb-live__clicavel:hover td { background: var(--bg-hover); }

/* ── Mensagem bloqueante da equipe (issues #229 e #233) ─────────────────────
   Toma a tela inteira até a pessoa responder. z-index 1000: acima até dos
   diálogos (200), porque nada pode ficar por cima dela.

   Celular primeiro. A altura vem do visualViewport (--blk-altura, posto pelo
   JS), que encolhe quando o teclado virtual sobe; sem ele, 100dvh, que no
   Safari do iOS não erra com a barra de endereço como 100vh erra. As margens
   respeitam o notch e a barra de gestos (env(safe-area-inset-*)). O campo de
   texto tem 16px: abaixo disso o iOS dá zoom ao focar. Botões com 44px de
   altura, o mínimo confortável para o dedo. */
html.bsb-blk-aberto,
html.bsb-blk-aberto body { overflow: hidden; overscroll-behavior: none; }
/* O iOS ignora overflow no body: só fixando o body o fundo para de rolar. O
   JS guarda a posição em `top` e a devolve ao fechar. */
html.bsb-blk-aberto body { position: fixed; left: 0; right: 0; width: 100%; }

.bsb-blk {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--blk-topo, 0px);
  height: 100vh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(5, 5, 5, 0.94);
  overscroll-behavior: contain;
  font-family: var(--font);
  animation: bsb-blk-entra 180ms ease-out;
}
@supports (height: 100dvh) { .bsb-blk { height: 100dvh; } }
.bsb-blk[style*="--blk-altura"] { height: var(--blk-altura); }
.bsb-blk--saindo { animation: bsb-blk-sai 200ms ease-in forwards; }

.bsb-blk__caixa {
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--orange-dim);
  border-top: 3px solid var(--orange);
  color: var(--white);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  animation: bsb-blk-sobe 220ms ease-out;
  /* Último recurso: se nem com a mensagem encolhida cabe (tela muito baixa,
     fonte ampliada), a caixa inteira rola, e nada fica fora de alcance. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bsb-blk__cab { flex: 0 0 auto; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.bsb-blk__marca { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--orange); }
.bsb-blk__titulo { margin-top: 4px; font-size: 15px; font-weight: 500; letter-spacing: 0.5px; }
.bsb-blk__de { margin-top: 4px; font-size: 11px; color: var(--grey-light); }

.bsb-blk__corpo {
  flex: 1 1 auto;
  min-height: 64px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bsb-blk__corpo:focus { outline: none; }
.bsb-blk__corpo:focus-visible { outline: 1px solid var(--border-hi); outline-offset: -1px; }

.bsb-blk__pe { flex: 0 0 auto; padding: 12px 16px 14px; border-top: 1px solid var(--border); background: var(--bg-input); }
.bsb-blk__instrucao { margin-bottom: 10px; font-size: 12px; color: var(--orange-soft); }
.bsb-blk__rotulo { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--grey-light); }

.bsb-blk__campo {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 76px;
  max-height: 30vh;
  resize: vertical;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
}
.bsb-blk__campo:focus { outline: none; border-color: var(--green-dim); }

.bsb-blk__linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.bsb-blk__contador { font-size: 10px; color: var(--grey); }
.bsb-blk__enviar { min-height: 44px; padding: 0 20px; font-size: 13px; }

.bsb-blk__opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.bsb-blk__opcao {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.bsb-blk__opcao:hover { background: var(--bg-hover); border-color: var(--green-dim); }
.bsb-blk__opcao:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.bsb-blk__status { min-height: 16px; margin-top: 8px; font-size: 12px; color: var(--grey-light); }
.bsb-blk__status--erro { color: var(--red); }
.bsb-blk__status--aviso { color: var(--orange-soft); }
.bsb-blk__status--ok { color: var(--green); }
.bsb-blk--enviando .bsb-blk__pe button,
.bsb-blk--enviando .bsb-blk__campo { opacity: 0.55; cursor: progress; }

/* Celular em pé: a caixa vira a tela, a mensagem rola no meio e a resposta
   fica embaixo, ao alcance do polegar. */
@media (max-width: 600px) {
  .bsb-blk { padding: 0; align-items: stretch; }
  .bsb-blk__caixa {
    max-width: none;
    height: 100%;
    border: none;
    border-top: 3px solid var(--orange);
    box-shadow: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
  }
  .bsb-blk__opcao { flex-basis: 100%; }
  .bsb-blk__linha { flex-wrap: wrap; }
  .bsb-blk__enviar { flex: 1 1 100%; order: -1; }
  .bsb-blk__contador { margin-left: auto; }
}

/* Paisagem no celular, ou teclado aberto: pouca altura. A caixa vira a tela
   (sem a moldura de 16px), o cabeçalho cabe numa linha e a mensagem fica com
   o que sobra, rolando, em vez de ser coberta pela resposta. */
@media (max-height: 480px) {
  .bsb-blk { padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); align-items: stretch; }
  .bsb-blk__caixa { height: 100%; max-width: 760px; border-bottom: none; box-shadow: none; }
  .bsb-blk__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 16px; }
  .bsb-blk__titulo { margin-top: 0; font-size: 13px; }
  .bsb-blk__de { margin-top: 0; }
  .bsb-blk__corpo { min-height: 40px; padding: 8px 16px; font-size: 14px; }
  .bsb-blk__pe { padding: 6px 16px 8px; }
  .bsb-blk__instrucao { margin-bottom: 4px; font-size: 11px; }
  .bsb-blk__rotulo { display: none; }
  .bsb-blk__campo { min-height: 44px; max-height: 22vh; }
  .bsb-blk__linha { margin-top: 4px; }
  .bsb-blk__opcao { flex-basis: 120px; }
}

@keyframes bsb-blk-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes bsb-blk-sai { from { opacity: 1; } to { opacity: 0; } }
@keyframes bsb-blk-sobe { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .bsb-blk, .bsb-blk__caixa, .bsb-blk--saindo { animation: none; }
}

/* Explicação curta acima de uma tabela do /admin: o que a ação faz, antes de a
   pessoa clicar. Fica no painel e não num diálogo porque é contexto para
   decidir, e não confirmação do que já se decidiu. */
.bsb-admin-nota {
  border-left: 2px solid var(--orange);
  background: var(--bg-input);
  color: var(--grey-light);
  padding: 6px 8px;
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.5;
}

.bsb-admin-nota b { color: var(--white); }

/* ── Ordenação de temas (FEED e RELATÓRIOS) ───────────────────────────────
   Lista arrastável do /admin. Mesmo componente para os dois painéis. */
.bsb-ordem__modo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.bsb-ordem__modo .bsb-btn { font-size: 10px; padding: 3px 14px; }

.bsb-ordem__explica { color: var(--grey-light); font-size: 11px; }

.bsb-ordem {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
}

.bsb-ordem__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}

.bsb-ordem__item:last-child { border-bottom: none; }

/* A alça só vira cursor de arrasto no modo MANUAL: em AUTO a lista informa a
   ordem em vigor, e um cursor de mover prometeria o que não funciona. */
.bsb-ordem--manual .bsb-ordem__item { cursor: grab; }
.bsb-ordem--manual .bsb-ordem__item:hover { background: var(--bg-hover); }

.bsb-ordem__item--arrastando { opacity: 0.4; }

/* A linha de destino marcada no topo, e não a inteira realçada: durante o
   arrasto o que se precisa saber é ONDE o item vai cair. */
.bsb-ordem__item--alvo { box-shadow: inset 0 2px 0 0 var(--green); }

.bsb-ordem__alca { color: var(--grey); width: 12px; }
.bsb-ordem--manual .bsb-ordem__alca { color: var(--orange); }

.bsb-ordem__pos {
  color: var(--grey);
  width: 26px;
  text-align: right;
  font-size: 11px;
}

.bsb-ordem__nome { color: var(--white); flex: 1; }
.bsb-ordem__meta { color: var(--grey-light); font-size: 11px; }

/* Tema criado depois da lista manual: entra no fim e é marcado, senão é
   indistinguível de um que alguém pôs ali de propósito. */
.bsb-ordem__item--novo { background: rgba(255, 214, 0, 0.06); }

.bsb-ordem__selo {
  color: var(--yellow);
  border: 1px solid var(--yellow);
  font-size: 9px;
  padding: 0 4px;
  white-space: nowrap;
}

.bsb-ordem__setas { display: flex; gap: 2px; }

.bsb-ordem__seta {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--grey-light);
  font-family: var(--font);
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
}

.bsb-ordem__seta:hover { background: var(--bg-hover); color: var(--white); }

.bsb-ordem__acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* ── Explorador de fontes: BANCO DE DADOS (issues #129 e #135, redesenho de 16/10/2026) ──
   Feito para quem procura um dado com o mouse: linha inteira clicavel, hover
   visivel, estado selecionado claro e o BAIXAR perto do topo. O teclado e uma
   camada a mais (foco sempre visivel, abas com setas), sem atrapalhar o clique.

   Contraste: texto secundario em var(--grey-light) (#9e9e9e sobre #0c0c0c,
   7,3:1). var(--grey) (#616161, 3,2:1) nao passa no AA de 4,5:1 para texto e
   fica so em borda e separador. */

.bsb-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Foco visivel em tudo que e clicavel no explorador, na paleta do terminal. */
.bsb-vs :focus-visible { outline: 2px solid var(--orange-soft); outline-offset: -2px; }

.bsb-vs__topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-panel);
}

.bsb-vs__busca { position: relative; flex: 1 1 320px; min-width: 0; display: flex; }
.bsb-vs__busca-input {
  width: 100%; min-width: 0; background: var(--bg-input); color: var(--white);
  border: 1px solid var(--border-hi); font-family: var(--font); font-size: 13px;
  padding: 7px 34px 7px 10px;
}
.bsb-vs__busca-input::placeholder { color: var(--grey-light); }
.bsb-vs__busca-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bsb-vs__busca-limpar {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  min-width: 30px; min-height: 30px; background: transparent; border: none;
  color: var(--grey-light); font-family: var(--font); font-size: 14px; cursor: pointer;
}
.bsb-vs__busca-limpar:hover { color: var(--white); background: var(--bg-hover); }
.bsb-vs__busca-limpar[hidden] { display: none; }

.bsb-vs__abas { display: flex; gap: 2px; flex-shrink: 0; }
.bsb-vs__aba {
  background: var(--bg-panel); color: var(--grey-light);
  border: 1px solid var(--border-hi); cursor: pointer;
  font-family: var(--font); font-size: 11px; letter-spacing: 1px; padding: 6px 12px;
}
.bsb-vs__aba:hover { background: var(--bg-hover); color: var(--white); }
.bsb-vs__aba--on, .bsb-vs__aba[aria-selected="true"] {
  background: var(--border-hi); color: #fff;
}

.bsb-vs__layout { display: flex; align-items: stretch; min-height: 360px; }
.bsb-vs__rail {
  flex: 0 0 340px; max-width: 40%; border-right: 1px solid var(--border);
  background: var(--bg-panel); max-height: 680px; overflow-y: auto;
}
.bsb-vs__main { flex: 1; min-width: 0; }

/* Linha da lista: um botao do tamanho da linha. */
.bsb-vs__item {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%;
  text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  color: var(--white); font-family: var(--font); font-size: 12px; line-height: 1.35;
  padding: 7px 10px 7px 9px; cursor: pointer;
}
.bsb-vs__item:hover { background: var(--bg-hover); }
.bsb-vs__fonte--on, .bsb-vs__fonte--on:hover {
  background: #102a12; border-left-color: var(--orange-soft);
}
.bsb-vs__fonte-nome { color: var(--cyan); font-size: 12px; }
.bsb-vs__fonte--on .bsb-vs__fonte-nome { color: #fff; }
.bsb-vs__fonte-meta { color: var(--grey-light); font-size: 11px; }
.bsb-vs__fonte-pe { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bsb-vs__estado { font-size: 11px; letter-spacing: .3px; cursor: help; }
.bsb-vs__chave {
  color: var(--grey-light); font-size: 10px; letter-spacing: .3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.bsb-vs__cinza { color: var(--grey-light); }
.bsb-vs__ciano { color: var(--cyan); }

.bsb-vs__interna {
  display: inline-block; color: var(--orange-soft); border: 1px solid var(--orange-soft);
  font-size: 10px; letter-spacing: .5px; padding: 0 4px; margin-left: 4px; vertical-align: 1px;
  cursor: help;
}

/* Fatia curada: a fonte e o que a casa escolheu acompanhar de um catalogo
   maior (issue #135). Informa, nao alarma: discreto de proposito. */
.bsb-vs__fatia {
  color: var(--grey-light); background: var(--bg-input); border: 1px solid var(--border);
  font-size: 10px; padding: 0 4px; margin-left: 4px; white-space: nowrap; cursor: help;
}

.bsb-vs__secao {
  color: var(--orange); font-size: 11px; letter-spacing: 1.2px; padding: 10px 10px 4px;
}
.bsb-vs__conta { color: var(--grey-light); font-size: 11px; margin-left: 4px; }
.bsb-vs__vazio { color: var(--grey-light); font-size: 12px; line-height: 1.5; padding: 14px 12px; }
.bsb-vs__mais { color: var(--orange-soft); font-size: 11px; letter-spacing: 1px; }

.bsb-vs__grupo-cab { flex-direction: row; align-items: baseline; gap: 6px; color: var(--orange-soft); }
.bsb-vs__grupo-nome { flex: 1; min-width: 0; color: var(--orange-soft); font-size: 12px; }
.bsb-vs__seta { color: var(--orange-soft); width: 1em; flex-shrink: 0; }
.bsb-vs__grupo-cab + div > .bsb-vs__item { padding-left: 22px; }

/* ── a fonte aberta ── */
.bsb-vs__trilha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 11px;
}
.bsb-vs__trilha-link {
  background: transparent; border: none; color: var(--cyan); cursor: pointer;
  font-family: var(--font); font-size: 11px; letter-spacing: .5px; padding: 3px 4px;
  text-decoration: underline; text-underline-offset: 2px; text-align: left;
}
.bsb-vs__trilha-link:hover { background: var(--bg-hover); color: #fff; }
.bsb-vs__trilha-sep { color: var(--grey-light); }
.bsb-vs__trilha-txt { color: var(--white); }

.bsb-vs__cab { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); }
.bsb-vs__cab-nome { color: var(--orange-soft); font-size: 15px; font-weight: normal; margin: 0 0 3px; }
.bsb-vs__cab-sub { color: var(--white); font-size: 12px; margin-bottom: 3px; }
.bsb-vs__cab-meta { color: var(--grey-light); font-size: 11px; line-height: 1.6; }

.bsb-vs__baixar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-input);
}
.bsb-vs__btn-baixar.bsb-btn { font-size: 12px; letter-spacing: 1px; padding: 8px 16px; }
.bsb-vs__campo--periodo { flex: 0 1 220px; }
.bsb-vs__n { color: var(--grey-light); font-size: 11px; align-self: center; }

.bsb-vs__sobre { padding: 8px 12px 0; }
.bsb-vs__nota-estado { color: var(--yellow); font-size: 11px; line-height: 1.5; margin: 0 0 8px; }

.bsb-vs__blocos { display: flex; flex-wrap: wrap; gap: 4px; }
.bsb-vs__bloco {
  background: var(--bg-input); border: 1px solid var(--border-hi); color: var(--white);
  font-family: var(--font); font-size: 11px; padding: 5px 9px; cursor: pointer;
}
.bsb-vs__bloco:hover { background: var(--bg-hover); }
.bsb-vs__bloco[aria-pressed="true"] { background: var(--border-hi); color: #fff; border-color: var(--orange-soft); }

.bsb-vs__visao { padding: 0 12px 4px; }
.bsb-vs__grafico { margin: 8px 0; }
.bsb-vs__grafico figcaption { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.bsb-vs__grafico-canvas { width: 100%; height: 260px; }
.bsb-vs__series { border-top: 1px solid var(--border); margin-bottom: 6px; }

.bsb-vs__acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px;
}
.bsb-vs__acoes .bsb-btn { font-size: 11px; padding: 5px 12px; }

.bsb-vs__avancadas-btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-panel); border: none; border-top: 1px solid var(--border);
  color: var(--orange-soft); font-family: var(--font); font-size: 11px; letter-spacing: 1.2px;
  padding: 9px 12px;
}
.bsb-vs__avancadas-btn:hover { background: var(--bg-hover); }
.bsb-vs__avancadas { border-top: 1px solid var(--border); }
.bsb-vs__avancadas[hidden] { display: none; }
.bsb-vs__avancadas-meta { padding: 6px 12px; }

/* A contagem e o coracao do construtor: e ela que torna visivel o filtro que
   nao filtra nada. Fica no topo das opcoes e responde a cada mudanca. */
.bsb-vs__contagem {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg-input); font-size: 12px; color: var(--grey-light);
}
.bsb-vs__contagem b { font-size: 16px; }
.bsb-vs__zerou { display: block; margin-top: 4px; color: var(--yellow); font-size: 11px; }

.bsb-vs__grupo { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.bsb-vs__grupo-titulo {
  color: var(--orange); font-size: 11px; letter-spacing: 1.2px; margin-bottom: 6px;
}

.bsb-vs__linha { display: flex; gap: 8px; flex-wrap: wrap; }
.bsb-vs__campo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 150px; }
.bsb-vs__campo > span { color: var(--grey-light); font-size: 11px; }
.bsb-vs__campo .bsb-input { font-size: 12px; padding: 5px 6px; }

.bsb-vs__nota { color: var(--grey-light); font-size: 11px; line-height: 1.5; margin: 4px 0; }

/* Chips: a representacao que torna obvio que ha mais de um filtro combinado e
   qual remover. */
.bsb-vs__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.bsb-vs__chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-input); border: 1px solid var(--border-hi);
  color: var(--white); font-size: 11px; padding: 2px 4px 2px 7px;
}
.bsb-vs__chip button {
  background: transparent; border: none; color: var(--grey-light); min-width: 24px; min-height: 24px;
  font-family: var(--font); font-size: 12px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.bsb-vs__chip button:hover { color: var(--red); background: var(--bg-hover); }

/* A linha de comando montada, com o badge CMD > que a leva ao cmdbar. */
.bsb-vs__cmd {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; background: #000; border: 1px solid var(--border);
}
.bsb-vs__cmd > span { flex: 1; min-width: 0; overflow-x: auto; }
.bsb-vs__cmd .bsb-btn { font-size: 10px; padding: 3px 8px; flex-shrink: 0; }

/* Descricao em Markdown, recolhida em ~4 linhas com "Ler mais". */
.bsb-vs__desc { color: var(--white); font-size: 12px; line-height: 1.55; margin: 0 0 4px; }
.bsb-vs__desc--recolhida { max-height: calc(1.55em * 4); overflow: hidden; }
.bsb-vs__ler {
  background: transparent; border: none; color: var(--cyan); cursor: pointer; padding: 3px 0;
  font-family: var(--font); font-size: 11px; text-decoration: underline; text-underline-offset: 2px;
  margin-bottom: 8px;
}
.bsb-vs__ler:hover { color: #fff; }
.bsb-vs__ler[hidden] { display: none; }
.bsb-md p { margin: 0 0 6px; }
.bsb-md ul, .bsb-md ol { margin: 0 0 6px 18px; }
.bsb-md li { margin: 1px 0; }
.bsb-md hr { border: none; border-top: 1px solid var(--border-hi); margin: 8px 0; }
.bsb-md a { color: var(--cyan); }
.bsb-md strong { color: #fff; }
.bsb-md__h { color: var(--orange-soft); font-size: 12px; font-weight: bold; margin: 8px 0 4px; }
.bsb-md__code {
  background: #000; border: 1px solid var(--border); color: var(--green);
  font-family: var(--font-mono); font-size: 11px; padding: 6px 8px; margin: 0 0 6px;
  overflow-x: auto; white-space: pre;
}
.bsb-md__code-inline { background: #000; color: var(--green); padding: 0 3px; font-family: var(--font-mono); }

/* Filtro escolhido no inicio, no topo da lista, com o X que o tira. */
.bsb-vs__filtro {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--border-hi); background: #102a12;
  color: #fff; font-size: 11px; letter-spacing: .5px;
}
.bsb-vs__filtro-x {
  background: transparent; border: 1px solid var(--border-hi); color: var(--white); cursor: pointer;
  font-family: var(--font); font-size: 12px; min-width: 28px; min-height: 28px;
}
.bsb-vs__filtro-x:hover { background: var(--bg-hover); color: var(--red); }

/* Inicio: letras, instituicoes e temas, tudo por clique. */
.bsb-vs__inicio { padding: 10px 12px 14px; }
.bsb-vs__inicio-titulo { color: var(--orange-soft); font-size: 14px; font-weight: normal; margin: 0 0 4px; }
.bsb-vs__inicio .bsb-vs__grupo-titulo { margin-top: 12px; }
.bsb-vs__letras { display: flex; flex-wrap: wrap; gap: 4px; }
.bsb-vs__letra {
  min-width: 34px; min-height: 34px; background: var(--bg-input); border: 1px solid var(--border-hi);
  color: var(--cyan); font-family: var(--font); font-size: 13px; cursor: pointer;
}
.bsb-vs__letra:hover, .bsb-vs__cartao:hover { background: var(--bg-hover); color: #fff; }
.bsb-vs__letra[aria-pressed="true"], .bsb-vs__cartao[aria-pressed="true"] {
  background: var(--border-hi); color: #fff; border-color: var(--orange-soft);
}
.bsb-vs__cartoes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px;
}
.bsb-vs__cartao {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border-hi); padding: 7px 9px;
  font-family: var(--font); color: var(--white); min-width: 0;
}
.bsb-vs__cartao-sigla { color: var(--cyan); font-size: 12px; }
.bsb-vs__cartao[aria-pressed="true"] .bsb-vs__cartao-sigla { color: #fff; }
.bsb-vs__cartao-nome { color: var(--grey-light); font-size: 11px; line-height: 1.35; }
.bsb-vs__cartao-n { color: var(--grey-light); font-size: 11px; }

/* Celular: a lista ocupa a tela; escolher uma fonte troca para ela, e a
   trilha (BANCO DE DADOS) volta. Alvos de toque de pelo menos 44px, sem
   rolagem horizontal a 360px. */
@media (max-width: 780px) {
  .bsb-vs__topo { padding: 8px 16px; }
  .bsb-vs__abas { width: 100%; }
  .bsb-vs__aba { flex: 1; min-height: 44px; padding: 6px 4px; }
  .bsb-vs__busca-input { min-height: 44px; }
  .bsb-vs__busca-limpar { min-width: 44px; min-height: 44px; }
  .bsb-vs__layout { flex-direction: column; min-height: 0; }
  .bsb-vs__rail { flex-basis: auto; max-width: none; max-height: none; border-right: none; }
  /* Sem fonte aberta, o inicio fica acima da lista; com fonte, so o detalhe. */
  .bsb-vs__main { order: -1; border-bottom: 1px solid var(--border); }
  .bsb-vs--detalhe .bsb-vs__rail { display: none; }
  .bsb-vs__letra { min-width: 44px; min-height: 44px; }
  .bsb-vs__cartoes { grid-template-columns: 1fr 1fr; }
  .bsb-vs__cartao { min-height: 44px; }
  .bsb-vs__ler, .bsb-vs__filtro-x { min-height: 44px; min-width: 44px; }
  .bsb-vs__inicio, .bsb-vs__filtro { padding-left: 16px; padding-right: 16px; }
  .bsb-vs--detalhe .bsb-vs__main { display: block; }
  .bsb-vs__item { min-height: 44px; padding: 9px 16px 9px 13px; }
  .bsb-vs__grupo-cab + div > .bsb-vs__item { padding-left: 26px; }
  .bsb-vs__trilha, .bsb-vs__cab, .bsb-vs__baixar, .bsb-vs__sobre, .bsb-vs__visao,
  .bsb-vs__acoes, .bsb-vs__grupo, .bsb-vs__avancadas-btn { padding-left: 16px; padding-right: 16px; }
  .bsb-vs__trilha-link, .bsb-vs__bloco, .bsb-vs__avancadas-btn { min-height: 44px; }
  .bsb-vs__btn-baixar.bsb-btn { flex: 1 1 140px; min-height: 44px; }
  .bsb-vs__campo--periodo { flex: 1 1 100%; }
  .bsb-vs__campo { min-width: 0; }
  .bsb-vs__campo .bsb-input { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .bsb-vs * { transition: none !important; animation: none !important; }
}

/* ══ Entrada publica (landing.html) · design de 06/10/2026 ═══════════════════
   Estreou em /index2 como teste e virou a entrada em `/`. Nas cores da marca:
   verde e ambar do logo mt, preto do terminal. Tudo prefixado ix2- e escopado
   em .ix2-html/.ix2, porque esta pagina, diferente do resto do produto, rola
   e usa fonte sem serifa: e vitrine, nao mesa de operacao. */
.ix2-html {
  --ix2-green:      #307f38;
  --ix2-green-hi:   #3fa04a;
  --ix2-amber:      #fbb21b;
  --ix2-amber-hi:   #ffc43d;
  --ix2-black:      #000;
  --ix2-ink:        #1b1b1b;
  --ix2-ink-soft:   #4a4a4a;
  --ix2-paper:      #ffffff;
  --ix2-paper-alt:  #f4f5f2;
  --ix2-line:       #d9dcd6;
  --ix2-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html.ix2-html, html.ix2-html body.ix2 {
  height: auto;
  overflow: auto;
  overflow-x: hidden;
}

body.ix2 {
  background: var(--ix2-paper);
  color: var(--ix2-ink);
  font-family: var(--ix2-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ix2 a { color: inherit; }
.ix2 ::-webkit-scrollbar-track { background: var(--ix2-paper-alt); }

.ix2-wrap {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 24px;
  width: 100%;
}

/* ── Cabecalho ── */
.ix2-header { background: var(--ix2-black); border-top: 3px solid var(--ix2-green); color: #fff; position: sticky; top: 0; z-index: 20; }
.ix2-header__in { align-items: center; display: flex; gap: 40px; min-height: 82px; }

.ix2-brand { align-items: center; display: inline-flex; gap: 10px; text-decoration: none; }
.ix2-brand img { border-radius: 6px; display: block; height: 46px; width: auto; }
.ix2-brand__sub { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }

.ix2-nav { display: flex; gap: 28px; }
.ix2 .ix2-nav__link { color: #fff; font-size: 18px; font-weight: 600; padding: 28px 0; position: relative; text-decoration: none; }
.ix2-nav__link::after {
  background: var(--ix2-amber); bottom: 20px; content: ""; height: 2px; left: 0; position: absolute;
  transform: scaleX(0); transform-origin: left; transition: transform .2s; width: 100%;
}
.ix2 .ix2-nav__link:hover, .ix2 .ix2-nav__link:focus-visible { color: var(--ix2-amber); outline: none; }
.ix2-nav__link:hover::after, .ix2-nav__link:focus-visible::after { transform: scaleX(1); }

/* Os links do menu rolam ate a secao. O cabecalho e sticky (85px com a linha
   verde): sem a margem, o titulo da secao pararia escondido atras dele. */
html.ix2-html { scroll-behavior: smooth; }
#ix2-conteudo, #ix2-tour { scroll-margin-top: 85px; }
@media (prefers-reduced-motion: reduce) { html.ix2-html { scroll-behavior: auto; } }

.ix2-access { align-items: center; display: flex; gap: 8px; margin-left: auto; }
.ix2-access__input {
  background: #fff; border: 0; border-radius: 4px; color: #222; font: 16px var(--ix2-sans);
  height: 42px; padding: 0 18px; text-align: center; width: 214px;
}
.ix2-access__input::placeholder { color: #555; }
.ix2-access__input:focus { outline: 2px solid var(--ix2-amber); outline-offset: 1px; }
.ix2-access__lock {
  align-items: center; background: #bdbdbd; border: 0; border-radius: 4px; color: #fff; cursor: pointer;
  display: inline-flex; height: 42px; justify-content: center; width: 42px;
}
.ix2-access__lock:hover, .ix2-access__lock:focus { background: var(--ix2-green); outline: none; }
.ix2-access__signup {
  color: #fff; font-size: 19px; font-weight: 600; margin-left: 12px; text-decoration: none; white-space: nowrap;
}
.ix2-access__signup span:first-child { font-weight: 300; margin-right: 4px; }
.ix2-access__signup:hover { color: var(--ix2-amber); }

/* ── Hero ── */
.ix2-hero { background: var(--ix2-black); color: #fff; overflow: hidden; position: relative; }
.ix2-hero__in {
  align-items: center; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  min-height: 480px; padding-bottom: 48px; padding-top: 48px; position: relative; z-index: 1;
}
.ix2-hero__eyebrow { color: var(--ix2-amber); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; margin-bottom: 14px; text-transform: uppercase; }
.ix2-hero__title { font-size: 40px; font-weight: 600; letter-spacing: -.3px; line-height: 1.15; margin-bottom: 18px; }
.ix2-hero__lead { color: #f0f0f0; font-size: 18px; margin-bottom: 30px; max-width: 420px; }

.ix2-btn {
  border-radius: 4px; display: inline-block; font-size: 20px; font-weight: 600; padding: 12px 24px;
  text-decoration: none; transition: background .15s, color .15s;
}
.ix2 .ix2-btn--primary { background: var(--ix2-amber); color: #111; }
.ix2 .ix2-btn--primary:hover, .ix2 .ix2-btn--primary:focus { background: var(--ix2-amber-hi); }
.ix2 .ix2-btn--ghost { border: 2px solid #fff; color: #fff; padding: 10px 22px; }
.ix2 .ix2-btn--ghost:hover, .ix2 .ix2-btn--ghost:focus { background: #fff; color: #111; }

/* ── Mockup do produto (desenho, sem dado) ── */
.ix2-mock { position: relative; }
.ix2-laptop { margin-left: 12%; }
.ix2-laptop__screen {
  aspect-ratio: 16 / 10; background: #050505; border: 10px solid #1e1e1e; border-radius: 14px 14px 0 0;
  box-shadow: 0 0 0 1px #333; display: flex; flex-direction: column; font-family: 'Courier New', monospace;
  font-size: 9px; overflow: hidden;
}
.ix2-laptop__base {
  background: linear-gradient(#3a3a3a, #1a1a1a); border-radius: 0 0 14px 14px; height: 14px;
  margin: 0 -7%; position: relative;
}
.ix2-laptop__base::after {
  background: #111; border-radius: 0 0 6px 6px; content: ""; height: 5px; left: 42%; position: absolute; top: 0; width: 16%;
}
.ix2-scr__top { align-items: center; background: #000; border-bottom: 1px solid #1c1c1c; display: flex; justify-content: space-between; padding: 5px 8px; }
.ix2-scr__brand { color: var(--orange); font-weight: bold; }
.ix2-scr__cmd { color: var(--green); }
.ix2-scr__cmd i { animation: ix2-blink 1s steps(1) infinite; background: var(--green); display: inline-block; height: 9px; vertical-align: middle; width: 5px; }
@keyframes ix2-blink { 50% { opacity: 0; } }
.ix2-scr__head { align-items: baseline; display: flex; gap: 14px; padding: 8px 10px 6px; }
.ix2-scr__head strong { color: var(--white); font-size: 12px; }
.ix2-scr__tabs { color: var(--grey-light); display: flex; gap: 10px; }
.ix2-scr__tabs b { border-bottom: 1px solid var(--orange); color: var(--orange); font-weight: normal; }
.ix2-scr__body { display: grid; flex: 1; gap: 8px; grid-template-columns: 1fr 1.1fr; min-height: 0; padding: 4px 10px 10px; }
.ix2-scr__list { display: flex; flex-direction: column; gap: 7px; }
.ix2-scr__row { align-items: center; border-bottom: 1px solid #161616; display: flex; gap: 6px; justify-content: space-between; padding-bottom: 6px; }
.ix2-scr__row i { background: #2a2a2a; border-radius: 2px; display: block; height: 6px; }
.ix2-scr__row i.w55 { width: 55%; } .ix2-scr__row i.w65 { width: 65%; } .ix2-scr__row i.w75 { width: 75%; }
.ix2-scr__row i.w80 { width: 80%; } .ix2-scr__row i.w90 { width: 90%; }
.ix2-scr__row em { background: var(--green-dim); border-radius: 2px; display: block; height: 6px; opacity: .7; width: 14px; }
.ix2-scr__chart { border: 1px solid #1c1c1c; display: flex; flex-direction: column; padding: 6px; }
.ix2-scr__charttitle { color: var(--yellow); margin-bottom: 4px; }
.ix2-scr__chart svg { flex: 1; min-height: 0; width: 100%; }
.ix2-scr__grid path { stroke: #1f1f1f; stroke-width: 1; }
.ix2-scr__prior { fill: none; stroke: var(--grey-light); stroke-dasharray: 4 3; stroke-width: 1.5; }
.ix2-scr__curr  { fill: none; stroke: var(--orange); stroke-width: 2; }
.ix2-scr__legend { color: var(--grey-light); display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.ix2-scr__legend > span { align-items: center; display: inline-flex; gap: 4px; }
.ix2-scr__legend i { display: inline-block; height: 2px; width: 10px; }
.ix2-scr__legend i.c { background: var(--orange); }
.ix2-scr__legend i.p { border-top: 2px dashed var(--grey-light); }

.ix2-float {
  background: #fff; border: 2px solid var(--ix2-amber); border-radius: 10px; bottom: -6%;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); color: #222; left: 0; padding: 12px 14px; position: absolute; width: 44%;
}
.ix2-float__title { border-bottom: 1px solid #eee; font-size: 12px; font-weight: 700; margin-bottom: 6px; padding-bottom: 6px; }
.ix2-float__item { align-items: center; display: flex; gap: 8px; padding: 4px 0; }
.ix2-float__item > i { border-radius: 50%; flex: none; height: 14px; width: 14px; }
.ix2-float__item > span { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.ix2-float__item b { font-size: 10px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix2-float__item em { background: #e6e6e6; border-radius: 2px; display: block; height: 4px; width: 85%; }
.ix2-float__item i.t1 { background: var(--ix2-green); }
.ix2-float__item i.t2 { background: var(--ix2-amber); }
.ix2-float__item i.t3 { background: #1f5f8b; }
.ix2-float__item i.t4 { background: #8e3b2f; }
.ix2-float__item i.t5 { background: #5b6b2f; }
.ix2-float__item i.t6 { background: #555; }

/* ── Secoes claras ── */
.ix2-light { background: var(--ix2-paper); padding: 56px 0 64px; }
.ix2-light--alt { background: var(--ix2-paper-alt); }
.ix2-h2 { color: var(--ix2-ink); font-size: 28px; font-weight: 500; letter-spacing: -.2px; margin-bottom: 8px; }
.ix2-sub { color: var(--ix2-ink-soft); font-size: 17px; margin-bottom: 32px; }

.ix2-cards { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
.ix2-card {
  background: #fff; border: 1px solid var(--ix2-line); border-radius: 6px; display: flex; flex-direction: column;
  padding: 18px 16px 20px; transition: border-color .15s, box-shadow .15s;
}
.ix2-card:hover { border-color: var(--ix2-green); box-shadow: 0 6px 20px rgba(48,127,56,.12); }
.ix2-card__icon { fill: none; height: 32px; margin-bottom: 42px; stroke: var(--ix2-green); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 32px; }
.ix2-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.ix2-card p { color: #2b2b2b; flex: 1; font-size: 16px; margin-bottom: 22px; }
.ix2 .ix2-card a { color: var(--ix2-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ix2 .ix2-card a:hover { color: var(--ix2-green-hi); }

.ix2-strengths { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
.ix2-strength { border-top: 3px solid var(--ix2-amber); padding-top: 16px; }
.ix2-strength__n { color: var(--ix2-green); display: block; font-size: 14px; font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; }
.ix2-strength h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.ix2-strength p { color: var(--ix2-ink-soft); }

.ix2-mission { background: var(--ix2-green); color: #fff; padding: 64px 0; }
.ix2-mission blockquote { border-left: 4px solid var(--ix2-amber); max-width: 880px; padding-left: 28px; }
.ix2-mission p { font-size: 26px; font-weight: 300; line-height: 1.4; margin-bottom: 20px; }
.ix2-mission footer { display: flex; flex-direction: column; font-size: 15px; }
.ix2-mission footer span { opacity: .85; }

.ix2-clients { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.ix2-clients li {
  background: var(--ix2-paper-alt); border: 1px solid var(--ix2-line); border-left: 4px solid var(--ix2-green);
  border-radius: 4px; font-weight: 600; padding: 14px 18px;
}

.ix2-cta { background: var(--ix2-black); color: #fff; padding: 56px 0; }
.ix2-cta__in { align-items: center; display: flex; gap: 32px; justify-content: space-between; }
.ix2-cta h2 { font-size: 28px; font-weight: 600; margin-bottom: 6px; }
.ix2-cta p { color: #cfcfcf; }
.ix2-cta__btns { display: flex; flex: none; flex-wrap: wrap; gap: 12px; }

/* ── Rodape ── */
.ix2-footer { background: #0c0c0c; border-top: 4px solid var(--ix2-green); color: #bdbdbd; font-size: 14px; padding: 44px 0 20px; }
.ix2-footer__grid { display: grid; gap: 32px; grid-template-columns: 1.4fr 1.2fr 1fr .8fr; margin-bottom: 32px; }
.ix2-footer__bsb { background: #fff; border-radius: 4px; height: 34px; margin-bottom: 12px; padding: 6px 10px; width: auto; }
.ix2-footer h4 { color: var(--ix2-amber); font-size: 13px; letter-spacing: 1px; margin-bottom: 10px; text-transform: uppercase; }
.ix2-footer p { margin-bottom: 6px; }
.ix2-footer a { text-decoration: none; }
.ix2-footer a:hover { color: var(--ix2-amber); }
.ix2-footer__base { border-top: 1px solid #222; color: #777; font-size: 12px; padding-top: 16px; }

/* ── Por dentro do terminal: carrossel num navegador ── */
.ix2-tour { background: radial-gradient(1200px 500px at 85% 0%, #10240f 0%, #000 60%); color: #fff; padding: 72px 0 80px; }
.ix2-tour__eyebrow { color: var(--ix2-amber); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; margin-bottom: 10px; text-transform: uppercase; }
.ix2-h2--dark { color: #fff; }
.ix2-sub--dark { color: #bdbdbd; max-width: 640px; }

.ix2-tour__grid { align-items: center; display: grid; gap: 40px; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }

.ix2-tour__steps { display: flex; flex-direction: column; gap: 6px; }
.ix2-tour__step {
  background: transparent; border: 1px solid transparent; border-radius: 8px; color: #9e9e9e; cursor: pointer;
  display: grid; font-family: var(--ix2-sans); gap: 4px 14px; grid-template-columns: auto 1fr; overflow: hidden;
  padding: 16px 18px 14px; position: relative; text-align: left; transition: background .2s, border-color .2s, color .2s;
}
.ix2-tour__step:hover { background: rgba(255,255,255,.04); color: #e0e0e0; }
.ix2-tour__step:focus-visible { outline: 2px solid var(--ix2-amber); outline-offset: 2px; }
.ix2-tour__step.is-active { background: rgba(255,255,255,.06); border-color: #2a2a2a; color: #fff; }
.ix2-tour__num { color: #616161; font-size: 13px; font-weight: 700; letter-spacing: 1px; padding-top: 2px; }
.ix2-tour__step.is-active .ix2-tour__num { color: var(--ix2-amber); }
.ix2-tour__txt { display: flex; flex-direction: column; gap: 6px; }
.ix2-tour__txt strong { font-size: 17px; font-weight: 600; }
.ix2-tour__txt span { display: none; font-size: 14.5px; line-height: 1.5; color: #c4c4c4; }
.ix2-tour__step.is-active .ix2-tour__txt span { display: block; animation: ix2-fade .35s ease; }
.ix2-tour__bar { background: #222; bottom: 0; height: 2px; left: 0; position: absolute; right: 0; visibility: hidden; }
.ix2-tour__bar i { background: linear-gradient(90deg, var(--ix2-green-hi), var(--ix2-amber)); display: block; height: 100%; width: 0; }
.ix2-tour__step.is-active .ix2-tour__bar { visibility: visible; }
.ix2-tour__step.is-active .ix2-tour__bar i { animation: ix2-progress 6.5s linear forwards; }
.ix2-tour__grid.is-paused .ix2-tour__step.is-active .ix2-tour__bar i { animation-play-state: paused; }
.ix2-tour__grid.is-stopped .ix2-tour__step.is-active .ix2-tour__bar i { animation: none; width: 100%; opacity: .35; }
@keyframes ix2-progress { from { width: 0; } to { width: 100%; } }
@keyframes ix2-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* O navegador de mentira */
.ix2-browser {
  background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(251,178,27,.08); overflow: hidden;
}
.ix2-browser__chrome { align-items: center; background: #202020; border-bottom: 1px solid #2c2c2c; display: flex; gap: 14px; padding: 10px 14px; }
.ix2-browser__dots { display: inline-flex; flex: none; gap: 7px; }
.ix2-browser__dots i { border-radius: 50%; display: block; height: 11px; width: 11px; }
.ix2-browser__dots i:nth-child(1) { background: #ff5f57; }
.ix2-browser__dots i:nth-child(2) { background: #febc2e; }
.ix2-browser__dots i:nth-child(3) { background: #28c840; }
.ix2-browser__tab {
  align-items: center; background: #2b2b2b; border-radius: 6px; color: #ddd; display: inline-flex; flex: none;
  font: 12px 'Courier New', monospace; gap: 7px; padding: 5px 12px;
}
.ix2-browser__addr {
  align-items: center; background: #111; border-radius: 999px; color: #8a8a8a; display: flex; flex: 1; font-size: 13px;
  gap: 8px; min-width: 0; overflow: hidden; padding: 6px 14px; white-space: nowrap;
}
.ix2-browser__addr svg { color: var(--ix2-green-hi); flex: none; }
.ix2-browser__addr span { overflow: hidden; text-overflow: ellipsis; }
.ix2-browser__addr b { color: #555; font-weight: 400; }

.ix2-browser__viewport { aspect-ratio: 1600 / 930; background: #050505; position: relative; }
.ix2-tour__slide { inset: 0; margin: 0; opacity: 0; position: absolute; transform: scale(1.015); transition: opacity .6s ease, transform .9s ease; }
.ix2-tour__slide.is-active { opacity: 1; transform: none; }
.ix2-tour__slide img { display: block; height: 100%; object-fit: cover; object-position: top left; width: 100%; }

.ix2-tour__arrow {
  align-items: center; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  color: #fff; cursor: pointer; display: inline-flex; height: 44px; justify-content: center; opacity: 0;
  position: absolute; top: 50%; transform: translateY(-50%); transition: opacity .2s, background .2s; width: 44px;
  backdrop-filter: blur(4px);
}
.ix2-tour__arrow--prev { left: 14px; }
.ix2-tour__arrow--next { right: 14px; }
.ix2-browser__viewport:hover .ix2-tour__arrow, .ix2-tour__arrow:focus-visible { opacity: 1; }
.ix2-tour__arrow:hover { background: var(--ix2-amber); border-color: var(--ix2-amber); color: #111; }

.ix2-tour__foot { align-items: center; background: #161616; border-top: 1px solid #262626; display: flex; justify-content: center; gap: 16px; padding: 10px; position: relative; }
.ix2-tour__dots { display: inline-flex; gap: 8px; }
.ix2-tour__dots button { background: #444; border: 0; border-radius: 999px; cursor: pointer; height: 8px; padding: 0; transition: width .25s, background .25s; width: 8px; }
.ix2-tour__dots button.is-active { background: var(--ix2-amber); width: 26px; }
.ix2-tour__pause {
  align-items: center; background: none; border: 1px solid #333; border-radius: 50%; color: #aaa; cursor: pointer;
  display: inline-flex; height: 26px; justify-content: center; position: absolute; right: 12px; width: 26px;
}
.ix2-tour__pause:hover { border-color: var(--ix2-amber); color: var(--ix2-amber); }
.ix2-ico-play { display: none; }
.ix2-tour__grid.is-stopped .ix2-ico-play { display: block; }
.ix2-tour__grid.is-stopped .ix2-ico-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ix2-tour__slide { transition: none; transform: none; }
}

/* ── Responsivo ── */
@media (max-width: 1080px) {
  .ix2-header__in { flex-wrap: wrap; gap: 16px 28px; padding-bottom: 12px; padding-top: 12px; }
  .ix2 .ix2-nav__link { padding: 10px 0; }
  .ix2-nav__link::after { bottom: 4px; }
  #ix2-conteudo, #ix2-tour { scroll-margin-top: 150px; }
  .ix2-access { margin-left: 0; width: 100%; }
  .ix2-access__input { flex: 1; width: auto; }
  .ix2-hero__in { grid-template-columns: minmax(0, 1fr); }
  .ix2-mock { margin: 0 auto 40px; max-width: 640px; width: 100%; }
  .ix2-strengths { grid-template-columns: repeat(2, 1fr); }
  .ix2-footer__grid { grid-template-columns: 1fr 1fr; }
  .ix2-tour__grid { gap: 24px; grid-template-columns: minmax(0, 1fr); }
  .ix2-tour__steps { order: 2; }
}

@media (max-width: 720px) {
  .ix2-wrap { padding: 0 16px; }
  .ix2-header { position: static; }
  #ix2-conteudo, #ix2-tour { scroll-margin-top: 0; }
  .ix2-brand__sub { display: none; }
  .ix2-nav { gap: 20px; }
  .ix2 .ix2-nav__link { font-size: 16px; }
  .ix2-access__signup { font-size: 16px; margin-left: 4px; }
  .ix2-hero__title { font-size: 32px; }
  .ix2-laptop { margin-left: 0; }
  .ix2-float { bottom: -18%; width: 62%; }
  .ix2-cards, .ix2-strengths, .ix2-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .ix2-mission p { font-size: 21px; }
  .ix2-cta__in { align-items: flex-start; flex-direction: column; }
  .ix2-tour { padding: 48px 0 56px; }
  .ix2-browser__tab { display: none; }
  .ix2-tour__arrow { height: 36px; opacity: 1; width: 36px; }
}

/* ── Ficha do usuário e completude do onboarding (issue #175) ─────────────
   Mesma linguagem do /admin: tabela densa, chave cinza, valor branco. */
.bsb-ud__voltar { font-size: 10px; padding: 2px 10px; text-decoration: none; }
.bsb-ud__rotulo { font-size: 10px; letter-spacing: 1px; margin: 8px 0 4px; }
.bsb-ud__select { font-size: 10px; padding: 3px 8px; width: 110px; }
.bsb-ud__link { color: var(--orange); text-decoration: none; }
.bsb-ud__link:hover { text-decoration: underline; }
.bsb-ud__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 24px; }
.bsb-ud__totais { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; margin: 6px 0; }
.bsb-ud__total { white-space: nowrap; }
.bsb-ud__acoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.bsb-ud__onb-resumo { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 12px; margin: 6px 0; }
.bsb-ud__classe { color: var(--orange); font-weight: bold; font-size: 14px; letter-spacing: 1px; }
.bsb-ud__grafico { width: 100%; height: 280px; margin: 6px 0; }

/* Trilha de onboarding (issue #175): pilulas encadeadas, uma por classe. */
.bsb-onb-trilha { display: flex; align-items: flex-end; overflow-x: auto; padding: 4px 4px 16px 4px; margin: 8px 0; }
.bsb-onb-etapa { position: relative; flex: 1 0 158px; min-width: 158px; margin-left: -22px; outline: none; }
.bsb-onb-etapa:first-child { margin-left: 0; }
.bsb-onb-num { text-align: center; font-size: 22px; font-weight: bold; color: var(--onb-cor); margin-bottom: 6px; padding-left: 22px; }
.bsb-onb-etapa:first-child .bsb-onb-num { padding-left: 0; }
.bsb-onb-pilula {
  background: var(--onb-cor); color: #fff; border-radius: 999px; min-height: 72px;
  padding: 10px 14px 10px 34px; border: 3px solid var(--bg, #000);
  display: flex; flex-direction: column; justify-content: center; box-shadow: -6px 0 10px rgba(0,0,0,.45);
}
.bsb-onb-etapa:first-child .bsb-onb-pilula { padding-left: 18px; }
.bsb-onb-etapa:last-child:not(.bsb-onb-etapa--apagada):not(.bsb-onb-etapa--pulada) .bsb-onb-pilula { color: #1a1a1a; }
.bsb-onb-titulo { font-weight: bold; font-size: 12px; letter-spacing: .5px; white-space: nowrap; }
.bsb-onb-linha { font-size: 11px; margin-top: 2px; white-space: nowrap; }
.bsb-onb-linha--suave { opacity: .8; }
.bsb-onb-etapa--apagada .bsb-onb-pilula { background: #262626; color: #777; box-shadow: -6px 0 10px rgba(0,0,0,.6); }
.bsb-onb-etapa--apagada .bsb-onb-num { color: #555; }
.bsb-onb-etapa--pulada .bsb-onb-pilula { background: #262626; color: var(--onb-cor); border-style: dashed; border-color: var(--onb-cor); }
.bsb-onb-etapa--atual .bsb-onb-pilula { box-shadow: 0 0 0 2px var(--orange, #fb8b1e), -6px 0 10px rgba(0,0,0,.45); }
.bsb-onb-etapa--clicavel { cursor: pointer; }
.bsb-onb-etapa--clicavel:hover .bsb-onb-pilula { filter: brightness(1.15); }
.bsb-ud__secao { margin: 4px 0; }
.bsb-ud__secao > summary {
  cursor: pointer; color: var(--orange); font-size: 11px; letter-spacing: 1px;
  padding: 4px 0; list-style: none;
}
.bsb-ud__secao > summary::-webkit-details-marker { display: none; }
.bsb-ud__secao[open] > summary { color: var(--white); }
.bsb-ud__paginacao { display: flex; gap: 10px; align-items: center; margin: 6px 0; font-size: 11px; }
.bsb-ud__negado { padding: 16px 4px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.bsb-ud__negado-codigo { color: var(--red); font-size: 14px; letter-spacing: 1px; font-weight: bold; }
@media (max-width: 600px) {
  .bsb-ud__total { white-space: normal; }
}

/* ── /user, a página do próprio usuário (issue #176) ──────────────────────
   Tudo o que é privado da conta num painel só: dados, perfil, idioma dos
   e-mails, WhatsApp, senha e notificações. O e-mail no topo leva até aqui. */
.bsb-topbar__user--link { text-decoration: none; border-bottom: 1px dotted var(--grey); }
.bsb-topbar__user--link:hover, .bsb-topbar__user--link.active { color: var(--orange); border-bottom-color: var(--orange); }
.bsb-user__corpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 20px; }
.bsb-user__secao { border: 1px solid var(--border); padding: 8px 10px; min-width: 0; }
.bsb-user__titulo { color: var(--orange); letter-spacing: 1px; font-size: 11px; margin-bottom: 6px; }
.bsb-user__subtitulo { color: var(--grey-light); letter-spacing: 1px; font-size: 10px; margin: 10px 0 4px; }
.bsb-user__nota { font-size: 11px; margin: 4px 0 6px; line-height: 1.5; }
.bsb-user__btn { font-size: 10px; padding: 3px 12px; }
.bsb-user__estado { margin: 4px 0 8px; line-height: 1.5; }
.bsb-user__opcao { display: flex; align-items: center; gap: 8px; margin-top: 6px; cursor: pointer; }
.bsb-user__opcao input { accent-color: var(--orange); }
.bsb-user__opcao--sub { margin-left: 22px; }
.bsb-user__aparelho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin-top: 4px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-size: 11px;
}
@media (max-width: 600px) {
  .bsb-user__corpo { grid-template-columns: 1fr; }
  .bsb-user__aparelho { flex-direction: column; align-items: flex-start; }
}

/* ── /admin/live, o monitor ao vivo ────────────────────────────────────────
   Quem está no Market Tracker agora e o que está vendo. Os números do topo
   são o que se lê de longe; a tabela embaixo é o detalhe por pessoa. */
.bsb-live__abrir { font-size: 10px; padding: 3px 12px; text-decoration: none; }
.bsb-live__estado { font-size: 10px; letter-spacing: 1px; color: var(--red); }
.bsb-live__estado--vivo { color: var(--green); }
.bsb-live .green { color: var(--green); }
.bsb-live .orange { color: var(--orange); }
.bsb-live .red { color: var(--red); }
.bsb-live .cell-grey { color: var(--grey-light); }
.bsb-live .num { text-align: right; white-space: nowrap; }
.bsb-live__totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 8px; margin: 4px 0 10px; }
.bsb-live__tile { border: 1px solid var(--border); background: var(--bg-input); padding: 8px 10px; }
.bsb-live__tile-valor { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--white); }
.bsb-live__tile-rotulo { font-size: 10px; letter-spacing: 1px; color: var(--grey-light); margin-top: 2px; }
.bsb-live__comparacao { display: flex; flex-direction: column; gap: 3px; font-size: 11px; margin-bottom: 10px; }
.bsb-live__grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 20px; }
.bsb-live__grafico { width: 100%; height: 240px; }
.bsb-live__filtro { font-size: 10px; letter-spacing: 1px; color: var(--grey-light); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.bsb-live__sub { font-size: 10px; }
.bsb-live__fundo td { opacity: 0.55; }
.bsb-live__selo { display: inline-block; font-size: 10px; letter-spacing: 1px; padding: 1px 6px; border: 1px solid var(--grey); color: var(--grey-light); white-space: nowrap; }
.bsb-live__selo--ativo { color: var(--green); border-color: var(--green-dim); }
.bsb-live__selo--ausente { color: var(--orange-soft); border-color: var(--orange-dim); }
.bsb-live__nota { font-size: 10px; margin: 4px 0 0; }
.bsb-live__bloco { margin-top: 12px; }
.bsb-live__subtitulo { font-size: 10px; letter-spacing: 1px; color: var(--orange); margin-bottom: 4px; }
@media (max-width: 800px) {
  .bsb-live__grade { grid-template-columns: minmax(0, 1fr); }
}
.bsb-live__barra { display: flex; justify-content: flex-end; margin: 2px 0 8px; }
.bsb-live__chave { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--border); color: var(--grey-light); font: inherit; font-size: 11px; padding: 5px 10px; cursor: pointer; }
.bsb-live__chave:hover { color: var(--white); border-color: var(--grey); }
.bsb-live__chave-trilho { position: relative; width: 28px; height: 14px; border-radius: 7px; background: #2a2a2a; transition: background .15s; flex-shrink: 0; }
.bsb-live__chave-botao { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--grey-light); transition: left .15s, background .15s; }
.bsb-live__chave--ligada { color: var(--white); border-color: var(--orange-dim); }
.bsb-live__chave--ligada .bsb-live__chave-trilho { background: var(--orange-dim); }
.bsb-live__chave--ligada .bsb-live__chave-botao { left: 16px; background: var(--white); }

/* Feed em ingles por e-mail na lista de usuarios do admin (issue #215). */
.bsb-admin-feeden {
  display: flex; gap: 16px; align-items: center;
  margin: 4px 0 8px 0; font-size: 11px; color: var(--grey);
}
.bsb-admin-feeden label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.bsb-admin-chave { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.bsb-admin-chave input:disabled { cursor: not-allowed; }
.bsb-admin-chave input:disabled + span { opacity: .6; }

/* ── Painel de e-mails (/email) ──────────────────────────────────────────── */
.em-gerado { font-size: 10px; letter-spacing: 1px; }
.em-rotulo { font-size: 10px; letter-spacing: 1px; }
.em-select { width: auto; }
.em-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 8px; margin: 4px 0 14px; }
.em-tile__var { font-size: 11px; margin-top: 4px; }
.em-tile__det { font-size: 10px; margin-top: 2px; line-height: 1.35; }
.em-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; margin-bottom: 8px; }
.em-grade--larga { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.em-grafico { width: 100%; height: 260px; }
.em-nota { font-size: 10px; line-height: 1.4; margin: 4px 0 8px; }
.em-var { font-size: 10px; }
.em-erro { white-space: normal; max-width: 520px; word-break: break-word; font-size: 11px; }
.em-filtro { background: none; border: 1px solid var(--border); color: var(--grey-light); font: inherit; font-size: 10px; letter-spacing: 1px; padding: 4px 8px; cursor: pointer; }
.em-filtro:hover { color: var(--white); border-color: var(--grey); }
.em-filtro[aria-pressed="true"] { color: var(--white); border-color: var(--orange-dim); background: var(--bg-hover); }
.em-paginas { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin: 8px 0; font-size: 11px; }
.em .bsb-admin-result { overflow-x: auto; }
@media (max-width: 900px) {
  .em-grade, .em-grade--larga { grid-template-columns: minmax(0, 1fr); }
  .bsb-admin-toolbar__actions#em-filtros { flex-wrap: wrap; }
}
.em .green { color: var(--green); }
.em .red { color: var(--red); }
.em .cell-grey { color: var(--grey-light); }