/* Design System do Atlas
 *
 * Tokens antes de componentes. Toda cor, espaçamento e tipografia da interface
 * sai daqui — nenhum valor literal nas telas. É o que permite mudar a
 * identidade inteira num arquivo, e o que impede que a décima tela invente um
 * cinza ligeiramente diferente dos outros nove.
 *
 * A identidade busca: precisão, densidade sem poluição, e hierarquia por
 * contraste em vez de por cor. Terminal financeiro, não painel administrativo.
 *
 * Escuro é o padrão — não por estética, mas porque a tela fica aberta por
 * horas e o contraste alto de fundo claro cansa. Claro é suportado por
 * `prefers-color-scheme`.
 */

:root {
  /* Superfícies, do fundo ao destaque */
  --bg: #0b0d11;
  --surface: #12151c;
  --surface-2: #171b24;
  --surface-3: #1e232e;
  --line: #252b37;
  --line-strong: #333b4a;

  /* Texto, em três níveis de ênfase */
  --fg: #e8eaef;
  --fg-2: #a8b0bf;
  --fg-3: #6b7383;

  /* Semântica. Verde e vermelho reservados para resultado financeiro;
     nunca para estado de interface, para que "verde" signifique uma coisa só. */
  --up: #35c46b;
  --down: #e5484d;
  --warn: #e2a03f;
  --info: #4c8dff;
  --accent: #7c5cff;

  /* A versão da interface tem cor própria, e não empresta a semântica.
   *
   * **A regra acima diz que verde é resultado financeiro e nunca estado de
   * interface.** O selo de versão pede verde, e a exceção foi decidida — mas
   * com tons próprios, e não com `--up`/`--info`: assim o verde de "subiu"
   * continua valendo uma coisa só, e mudar a cor da versão um dia não mexe em
   * nenhum número da tela. O risco de confusão é baixo porque o selo é
   * palavra, não número — é onde a regra original tem menos força. */
  --versao-light: #10b981;
  --versao-pro: #5b8def;

  /* Camadas do organismo — cada subsistema tem sua cor, constante em todas
     as telas. É o que permite reconhecer a origem de um evento pela cor. */
  --perception: #38bdf8;
  --knowledge: #7c5cff;
  --reasoning: #c084fc;
  --governance: #e2a03f;
  --execution: #35c46b;
  --learning: #2dd4bf;

  /* Tipografia */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-lg: 15px;
  --t-xl: 19px;
  --t-2xl: 26px;

  /* Espaçamento em escala de 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.22);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fa;
    --surface: #ffffff;
    --surface-2: #f2f4f7;
    --surface-3: #e9ecf1;
    --line: #e2e6ec;
    --line-strong: #ccd3dd;
    --fg: #131720;
    --fg-2: #4a5364;
    --fg-3: #7c8598;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  }
}

* { box-sizing: border-box; }

/* `hidden` precisa vencer qualquer classe.
 *
 * O atributo vale `display: none` na folha do navegador, que tem
 * especificidade menor que uma classe do autor — e `.shell { display: flex }`
 * o anulava. O efeito era a tela de login aparecer com o aplicativo inteiro
 * desenhado embaixo dela: barra superior, abas e "carregando…", tudo visível
 * para quem ainda não entrou.
 *
 * É o tipo de defeito que passa despercebido porque a página *funciona* — só
 * mostra o que não devia. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--t-md)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Foco visível sempre. Remover outline quebra navegação por teclado, e a
   economia visual não compensa tornar a interface inutilizável para quem
   depende dela. */
:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- Layout --------------------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.rail {
  width: 210px; flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--s4) var(--s3);
  display: flex; flex-direction: column; gap: var(--s1);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* A marca do produto é Insert Finance. "Atlas" passou a nomear o agente que
   vive dentro dele — a aba de análise autônoma —, e manter os dois nomes
   distintos evita que o operador confunda o sistema com uma de suas
   ferramentas. */
.rail /* A marca da barra lateral: ícone e nome lado a lado.
 *
 * O nome ganhou um invólucro próprio para poder empilhar "FINANCE" e a linha
 * de baixo enquanto o ícone fica ao lado. As regras de `.brand span` e
 * `.brand small` continuam valendo — elas alcançam descendentes, e o
 * invólucro não as interrompe. */
.brand {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-lg); font-weight: 700; letter-spacing: 1.2px;
  padding: var(--s2) var(--s3) var(--s4); line-height: 1.15;
}
.brand .logotipo { width: 26px; height: 26px; }
.rail .brand span {
  display: block; color: var(--accent); letter-spacing: 3px;
  font-size: var(--t-md);
}
.rail .brand small {
  display: block; font-size: var(--t-xs); font-weight: 400;
  letter-spacing: 0; color: var(--fg-3); margin-top: 4px;
}

/* --- A versão, à vista -------------------------------------------------------
 *
 * **Uma cor só não bastaria, e o selo existe por isso.** Trocar de versão muda
 * o que o menu mostra e o que o Painel desenha; sem uma marca fixa, a pessoa
 * abriria uma tela mais curta sem saber se foi ela quem pediu ou se algo
 * quebrou. O selo responde "em que versão estou" antes da pergunta nascer.
 *
 * A cor entra pelo atributo na raiz, então quem quiser diferenciar mais um
 * ponto acrescenta uma regra aqui — sem que o JavaScript precise conhecer o
 * ponto novo. */
/* **Três classes, e não uma.** `.rail .brand small` tem especificidade maior
   que `.marca-versao` sozinha — o selo saía na cor padrão do subtítulo, e a
   cor da versão nunca chegava à tela. Cascata perdida é o tipo de defeito que
   só o navegador resolve; o valor abaixo foi conferido nele. */
.rail .brand .marca-versao {
  font-style: italic; font-weight: 700; letter-spacing: .04em;
  color: var(--versao-light);
}
:root[data-versao="pro"] .rail .brand .marca-versao {
  color: var(--versao-pro);
}

/* A aba aberta dentro de uma tela segue a mesma cor, pelo mesmo motivo. */
:root[data-versao="light"] .aba.on { border-bottom-color: var(--versao-light); }
:root[data-versao="pro"] .aba.on { border-bottom-color: var(--versao-pro); }
.rail a {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  color: var(--fg-2); text-decoration: none; font-size: var(--t-md);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.rail a:hover { background: var(--surface-2); color: var(--fg); }

/* A troca de versão: item de menu que é botão, e não destino.
 *
 * **Herda a forma dos links de propósito.** Ela mora entre eles e um visual
 * próprio a anunciaria como coisa de outra natureza — o que ela não é: da
 * perspectiva de quem usa, é mais um lugar do menu. O que a distingue é o
 * valor à direita, que diz em que versão se está sem exigir um clique para
 * descobrir. */
.rail .rail-acao {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  color: var(--fg-2); font-size: var(--t-md); font-family: inherit;
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.rail .rail-acao:hover { background: var(--surface-2); color: var(--fg); }
.rail .rail-acao-valor {
  margin-left: auto; font-size: var(--t-sm); font-weight: 600;
  color: var(--fg); opacity: .75;
}

/* O chip do botão de troca usa a cor de **destino**, não a da versão atual:
   ele é a porta para a outra, e pintá-lo com a cor de onde já se está faria a
   marca e o botão parecerem dizer a mesma coisa. */
.rail .rail-acao-valor { color: var(--versao-pro); opacity: 1; }
:root[data-versao="pro"] .rail .rail-acao-valor { color: var(--versao-light); }

/* Layers: escolher o que cada tela mostra.
 *
 * **Duas colunas, e o motivo é a altura.** Vinte e quatro caixas em lista
 * única viram uma coluna de rolagem dentro de uma tela que já rola, e a pessoa
 * perde de vista o seletor enquanto decide. `auto-fill` com mínimo em `rem`
 * devolve uma coluna sozinha quando a tela é estreita — sem media query, e sem
 * um segundo lugar onde a regra precise concordar. */
.layer-barra {
  display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.layer-seletor { display: flex; flex-direction: column; gap: var(--s1);
  min-width: 14rem; flex: 1 1 14rem; font-size: var(--t-sm);
  color: var(--fg-2); }
.layer-acoes { display: flex; gap: var(--s2); flex-wrap: wrap; }

.layer-grade {
  display: grid; gap: var(--s1) var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* A linha inteira é alvo do clique: uma caixa de 14px é alvo pequeno demais
 * para uma lista que se percorre decidindo item por item. */
.layer-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s2); border-radius: var(--r-sm);
  cursor: pointer; font-size: var(--t-sm); color: var(--fg);
  transition: background .12s var(--ease);
}
.layer-item:hover { background: var(--surface-2); }
.layer-item input { accent-color: var(--up); cursor: pointer; flex: none; }
/* Desligada fica legível, e não apagada: ela continua sendo uma opção que se
   lê para reativar. */
.layer-item.off .layer-nome { color: var(--fg-3); text-decoration: line-through;
  text-decoration-color: var(--line); }
.layer-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ponto de pendência: há cadastro esperando decisão.
 *
 * Verde porque é trabalho a fazer, não erro — vermelho no menu é alarme, e
 * alarme para uma pessoa aguardando cadastro ensina a ignorar vermelho, que
 * precisa continuar querendo dizer "algo deu errado".
 *
 * O halo é o que faz o ponto ser notado sem ser grande. Oito pixels de cor
 * chapada somem num menu escuro; oito pixels com um anel de luz em volta
 * puxam o olho de canto, que é onde ele está quando a pessoa não está
 * procurando por isso. */
.ponto-pendencia {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 25%, transparent);
  margin-left: auto; flex-shrink: 0;
  animation: pulso-pendencia 2.4s ease-in-out infinite;
}

/* O pulso é lento de propósito. Rápido vira urgência, e urgência permanente
 * cansa: o menu fica com um ponto piscando o dia inteiro e o olho aprende a
 * filtrá-lo. Dois segundos e meio é perceptível de canto e ignorável quando se
 * está lendo outra coisa. */
@keyframes pulso-pendencia {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 25%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--up) 10%, transparent); }
}

/* Quem pediu menos animação no sistema operacional não recebe o pulso. O ponto
 * continua lá — a informação não depende do movimento. */
@media (prefers-reduced-motion: reduce) {
  .ponto-pendencia { animation: none; }
}
.rail a.on { background: var(--surface-3); color: var(--fg); font-weight: 600; }

/* O item aberto no menu ganha um traço na cor da versão: é o ponto que a
   pessoa olha o tempo todo, e um lembrete discreto vale mais que um alarme. */
.rail a.on {
  box-shadow: inset 2px 0 0 var(--versao-light);
}
:root[data-versao="pro"] .rail a.on {
  box-shadow: inset 2px 0 0 var(--versao-pro);
}
/* **A legenda de grupo ganha um traço embaixo, e ele é quase invisível de
 * propósito.**
 *
 * "OPERAÇÕES" e "SISTEMA" estão na mesma coluna dos itens clicáveis, com o
 * mesmo alinhamento — e por isso são lidos como mais um botão até a pessoa
 * tentar clicar. O traço resolve isso sem acrescentar peso: ele diz "daqui
 * para baixo começa outra coisa" pela forma, que é como separador funciona.
 *
 * A cor é a mesma da barra de rolagem (`--line-strong`), a pedido do titular.
 * Faz sentido além do gosto: as duas são marcas de estrutura, não de conteúdo,
 * e usar tons diferentes para a mesma função ensina uma distinção que não
 * existe. */
.rail .sep {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .8px;
  color: var(--fg-3); padding: var(--s4) var(--s3) 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: var(--t-lg); margin: 0; font-weight: 650; }
.grow { flex: 1; }

/* --- O menu horizontal acompanha a rolagem ---------------------------------
 *
 * A barra de cima já era fixa; o menu de abas logo abaixo dela não era, e
 * sumia assim que a página descia. Em telas longas — a de Leilões passa de
 * dez rolagens — trocar de aba exigia voltar ao topo primeiro.
 *
 * **O `top` vem de uma variável, e não de um número.** A barra de cima tem
 * `flex-wrap` e quebra em duas linhas quando a tela é estreita: com um valor
 * fixo, o menu ficaria escondido atrás dela justamente onde o espaço é menor.
 * O valor é medido no navegador e escrito em `--altura-topbar`.
 *
 * O fundo é opaco de propósito. Translúcido deixaria o conteúdo passar por
 * baixo durante a rolagem, e um menu com texto correndo atrás é ilegível. */
#subabas {
  position: sticky;
  top: var(--altura-topbar, 52px);
  z-index: 19;                 /* abaixo da barra de cima, acima do conteúdo */
  background: var(--bg);

  /* `var(--s2)` em cima e embaixo repete de propósito o par que `.abas` e
     `.abas-grupo` formam. Um `padding` de atalho com outro valor apagaria os
     dois: id vence classe, e a faixa perderia a simetria que faz o botão de
     trocar de grupo parecer centralizado. */
  padding: var(--s2) var(--s5);

  /* A folga de baixo sai daqui e fica com o `padding` da página. Grudada, a
     margem é uma faixa transparente por onde o conteúdo passa visível entre a
     linha divisória e o texto — o menu pareceria descolado da tela. */
  margin-bottom: 0;
}

/* Sem conteúdo, a faixa não deve deixar uma linha órfã atravessando a tela. */
#subabas:empty { border-bottom: 0; padding: 0; }

/* O menu de Ativos e o de IA — `#abas`, e não `#subabas`.
 *
 * São elementos diferentes com o mesmo papel, e a primeira versão desta regra
 * alcançou só um deles: em Ativos o menu continuou preso à rolagem.
 *
 * **Ele gruda abaixo do `#subabas`, quando existe.** Em IA as duas faixas
 * convivem: a de grupos, filha direta da `.main`, e esta logo abaixo. Com o
 * mesmo `top`, a segunda encostaria no mesmo lugar e sumiria por trás da
 * primeira. Onde não há faixa de grupos — Ativos — a parcela vale zero e esta
 * gruda direto embaixo do cabeçalho.
 *
 * A camada é uma abaixo da do `#subabas` pelo mesmo motivo: quando as duas se
 * encontram, quem passa por baixo é esta. */
#abas {
  position: sticky;
  top: calc(var(--altura-topbar, 52px) + var(--altura-subabas, 0px));
  z-index: 18;
  background: var(--bg);

  /* `.abas` só tem folga embaixo. Grudada, a faixa fica com os botões colados
     na borda de cima do próprio fundo — a folga de cima é o que a torna uma
     faixa em vez de uma tira. É o mesmo par que `.abas-grupo` monta. */
  padding-top: var(--s2);
}

/* Em Ativos a faixa mora dentro da `.page` e já recebe dela a folga lateral;
   repetir aqui a afastaria o dobro do resto da tela. Em IA ela é filha direta
   da `.main`, onde não há folga nenhuma, e sem isto ficaria desalinhada da
   faixa de grupos logo acima. */
.main > #abas { padding-left: var(--s5); padding-right: var(--s5); }
.page { padding: var(--s5); }

/* --- O telefone ------------------------------------------------------------
 *
 * **A faixa rolável não servia.** Até aqui, o menu virava uma tira horizontal
 * com rolagem no topo da tela. Ninguém rola tira: os itens da direita — que
 * incluem Configurações e Sair — simplesmente não existiam para quem usa o
 * telefone, e os do meio apareciam cortados pela metade.
 *
 * Vira gaveta. É o padrão que a pessoa já conhece de qualquer aplicativo, e
 * tem a propriedade que importa: a lista inteira cabe, com os nomes inteiros.
 *
 * **A gaveta fecha sozinha ao navegar.** Menu que continua aberto por cima da
 * tela que ele acabou de abrir esconde justamente o que a pessoa foi ver.
 */
@media (max-width: 880px) {
  .shell { flex-direction: column; }

  .rail {
    position: fixed; z-index: 60; top: 0; left: 0; bottom: 0;
    width: min(78vw, 300px); height: 100dvh;
    flex-direction: column; overflow-y: auto;
    padding-top: max(var(--s4), env(safe-area-inset-top));
    padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
    border-right: 1px solid var(--line); border-bottom: 0;
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
    box-shadow: 0 0 40px rgba(0,0,0,.35);
  }
  body.menu-aberto .rail { transform: translateX(0); }

  /* O véu existe para duas coisas: fechar com um toque em qualquer lugar, e
   * dizer que o que está atrás não está ativo. */
  .rail-veu {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s var(--ease);
  }
  body.menu-aberto .rail-veu { opacity: 1; pointer-events: auto; }

  .rail .brand { display: flex; }
  .rail .sep { display: block; }

  /* **Alvo de toque de 44px.** É a medida em que o dedo acerta o que mirou; o
   * padrão de 32px do computador produz o clique no item vizinho. */
  .rail a, .topbar .btn, .topbar .fld { min-height: 44px; }
  .rail a { align-items: center; }

  .topbar { flex-wrap: wrap; gap: var(--s2); }
  .topbar h1 { font-size: var(--t-md); }

  .page { padding: var(--s4); }

  /* O iOS dá zoom no campo com fonte menor que 16px, e o zoom desalinha a
   * tela inteira. */
  input, select, textarea { font-size: 16px; }
}

/* O botão da gaveta só existe no telefone: no computador o menu está sempre à
 * vista, e um botão para abri-lo seria um clique para nada. */
.rail-abrir { display: none; }
@media (max-width: 880px) {
  .rail-abrir {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: var(--s2);
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--fg);
    font-size: 20px; line-height: 1; cursor: pointer;
  }
  .rail-abrir:hover { background: var(--surface-2); }
}

/* --- Indicador de conexão ------------------------------------------------- */

.pulse { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.on { background: var(--up); animation: beat 2.4s infinite; }
.dot.warn { background: var(--warn); }
.dot.off { background: var(--down); }
@keyframes beat {
  0%   { box-shadow: 0 0 0 0 rgba(53,196,107,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(53,196,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,196,107,0); }
}

/* --- Cartões e métricas --------------------------------------------------- */

.grid { display: grid; gap: var(--s3); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* **Três números que se leem juntos, e por isso não quebram.**
 *
 * Total, em caixa e investido respondem a uma pergunta só: quanto eu tenho, e
 * onde. Com `auto-fit` eles quebravam em duas linhas na primeira tela estreita
 * — "total" e "em caixa" em cima, "investido" embaixo —, e a leitura passava a
 * sugerir que o terceiro é de outra natureza. São a mesma conta: o total é a
 * soma dos outros dois.
 *
 * `minmax(0, 1fr)` em vez de uma largura mínima: as colunas encolhem juntas em
 * vez de empurrar uma para baixo, e o número diminui de corpo com a tela. */
.trio-do-patrimonio {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trio-do-patrimonio .v {
  font-size: clamp(var(--t-lg), 4.2vw, 26px);
  overflow-wrap: anywhere;
}
.trio-do-patrimonio .n { overflow-wrap: anywhere; }
.grid.c6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
}
/* **Duas convenções de título, um só desenho.**
 *
 * As telas usam `<h2>` em umas caixas e `.card-t` em outras — e `.card-t` não
 * tinha regra nenhuma: saía como texto de corpo, do mesmo tamanho e peso do
 * conteúdo abaixo dele. O resultado era uma caixa cujo título não se lia como
 * título, e o operador precisava deduzir onde uma informação terminava e a
 * seguinte começava.
 *
 * As duas passam a compartilhar a mesma regra. Peso 700 em vez de 650 porque o
 * título é o que se lê primeiro numa tela cheia de números — e semibold contra
 * um corpo de números tabulares não se destaca o suficiente. */
.card h2,
.card-t {
  font-size: var(--t-md); margin: 0 0 var(--s3); font-weight: 700;
  display: flex; align-items: center; gap: var(--s2);
}
.card h2 .tag,
.card-t .tag { margin-left: auto; }

.metric { display: flex; flex-direction: column; gap: 2px; }
.metric .k {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3);
}
.metric .v {
  font-size: var(--t-2xl); font-weight: 650; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metric .n { font-size: var(--t-sm); color: var(--fg-3); }

/* Barra fina de camada no topo do cartão: identifica o subsistema sem texto */
.card[data-layer] { position: relative; overflow: hidden; }
.card[data-layer]::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
}
.card[data-layer="perception"]::before { background: var(--perception); }
.card[data-layer="knowledge"]::before  { background: var(--knowledge); }
.card[data-layer="reasoning"]::before  { background: var(--reasoning); }
.card[data-layer="governance"]::before { background: var(--governance); }
.card[data-layer="execution"]::before  { background: var(--execution); }
.card[data-layer="learning"]::before   { background: var(--learning); }

/* --- Etiquetas ------------------------------------------------------------ */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .2px;
  padding: 2px var(--s2); border-radius: var(--r-full);
  background: var(--surface-3); color: var(--fg-2);
  white-space: nowrap;
}
.tag.up   { background: rgba(53,196,107,.14); color: var(--up); }
.tag.down { background: rgba(229,72,77,.14);  color: var(--down); }
.tag.warn { background: rgba(226,160,63,.14); color: var(--warn); }
.tag.info { background: rgba(76,141,255,.14); color: var(--info); }
.tag.mute { background: var(--surface-3); color: var(--fg-3); }

/* --- Pipeline cognitivo --------------------------------------------------- */

.pipeline {
  display: flex; align-items: stretch; gap: var(--s1);
  overflow-x: auto; padding-bottom: var(--s2);
}
.stage {
  flex: 1; min-width: 76px;
  padding: var(--s2); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  text-align: center; transition: all .25s var(--ease);
}
.stage .n {
  font-size: var(--t-xs); color: var(--fg-3); text-transform: uppercase;
  letter-spacing: .4px; line-height: 1.3;
}
.stage .c {
  font-size: var(--t-lg); font-weight: 650; font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.stage.hot {
  background: var(--surface-3); border-color: var(--line-strong);
}
.stage.hot .c { color: var(--info); }
.stage.req { border-bottom: 2px solid var(--governance); }

/* --- Fluxo de eventos ----------------------------------------------------- */

.stream { display: flex; flex-direction: column; gap: 1px; max-height: 460px;
          overflow-y: auto; }
.ev {
  display: grid; grid-template-columns: 62px 12px 1fr auto;
  gap: var(--s2); align-items: baseline;
  padding: var(--s2) var(--s2); border-radius: var(--r-sm);
  font-size: var(--t-sm); transition: background .12s var(--ease);
  animation: slide .3s var(--ease);
}
.ev:hover { background: var(--surface-2); cursor: pointer; }
@keyframes slide { from { opacity: 0; transform: translateY(-3px); } }
.ev time { font: var(--t-xs)/1.4 var(--mono); color: var(--fg-3); }
.ev .bar { width: 3px; height: 100%; min-height: 14px; border-radius: 2px; }
.ev .t { color: var(--fg); font-weight: 550; }
.ev .d { color: var(--fg-3); font-size: var(--t-xs); }
.ev.crit .t { color: var(--down); }

/* --- Grafo ---------------------------------------------------------------- */

.graph-wrap {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; height: 620px;
}
.graph-wrap svg { display: block; width: 100%; height: 100%; cursor: grab; }
.graph-wrap svg:active { cursor: grabbing; }

.node-c { cursor: pointer; }
.node-c circle { transition: stroke-width .15s var(--ease), r .15s var(--ease); }
.node-c:hover circle { stroke-width: 2.5px; }
.node-c text {
  font-size: 9px; fill: var(--fg-2); pointer-events: none;
  text-anchor: middle; font-family: var(--font);
}
.node-c.sel circle { stroke: var(--fg); stroke-width: 2.5px; }
.node-c.dim { opacity: .18; }

.edge { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.edge.contra { stroke: var(--down); stroke-dasharray: 3 3; stroke-width: 1.4; }
.edge.hi { stroke: var(--info); stroke-width: 2; }
.edge.dim { opacity: .06; }

.legend {
  position: absolute; left: var(--s3); bottom: var(--s3);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s2) var(--s3); font-size: var(--t-xs);
  display: flex; flex-direction: column; gap: 3px;
  backdrop-filter: blur(6px);
}
.legend span { display: flex; align-items: center; gap: var(--s2); color: var(--fg-2); }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.inspector {
  position: absolute; top: var(--s3); right: var(--s3); width: 330px;
  max-height: calc(100% - var(--s6)); overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: var(--s4); box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  animation: pop .18s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateX(8px); } }
.inspector h3 { margin: 0 0 var(--s2); font-size: var(--t-md); line-height: 1.35; }
.inspector .close {
  position: absolute; top: var(--s2); right: var(--s2);
  background: none; border: 0; color: var(--fg-3); cursor: pointer;
  font-size: 16px; line-height: 1; padding: var(--s1);
}
.inspector dl {
  display: grid; grid-template-columns: auto 1fr; gap: 3px var(--s3);
  margin: var(--s3) 0; font-size: var(--t-sm);
}
.inspector dt { color: var(--fg-3); }
.inspector dd { margin: 0; font-variant-numeric: tabular-nums; }
.inspector ul { margin: var(--s2) 0 0; padding-left: var(--s4); font-size: var(--t-sm);
                color: var(--fg-2); }
.inspector li { margin-bottom: 3px; }
.inspector .sec {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3); margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* --- Controles ------------------------------------------------------------ */

/* O seletor era `button.btn`, de elemento — e por isso um `<a class="btn">`
   não recebia estilo algum: saía como link cru ao lado de botões de verdade.
   A classe é o contrato; quem a usa deve parecer um botão, seja qual for a
   tag. Alguns controles precisam navegar de fato (`<a href>` funciona mesmo
   se o JavaScript falhar), e isso não deveria custar a aparência. */
.btn {
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--fg); border-radius: var(--r-sm); padding: 6px 14px;
  cursor: pointer; transition: all .12s var(--ease);
  display: inline-flex; align-items: center; text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn.pri { background: var(--info); border-color: var(--info); color: #fff; }
.btn.dan { background: var(--down); border-color: var(--down); color: #fff; }

/* Botão quadrado de ação numa linha: engrenagem, X.
 *
 * Quadrado e do mesmo tamanho para os dois porque eles vivem lado a lado — um
 * retângulo e um quadrado vizinhos leem como dois controles de importância
 * diferente, e aqui não são. A largura fixa impede que "×" e "⚙" saiam com
 * larguras distintas por causa da métrica do glifo. */
.btn.quadrado {
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; font-size: var(--t-sm); line-height: 1;
}
/* O X só ganha o vermelho cheio ao ser apontado. Vermelho permanente numa
 * lista inteira vira ruído, e o operador para de enxergá-lo justamente onde
 * ele deveria fazer parar. */
.btn.quadrado.dan {
  background: var(--surface-2); border-color: var(--down);
  color: var(--down); font-size: var(--t-md);
}
.btn.quadrado.dan:hover:not(:disabled) {
  background: var(--down); color: #fff;
}

input.fld, select.fld {
  font: inherit; font-size: var(--t-sm);
  background: var(--surface-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 10px;
}

.empty {
  text-align: center; padding: var(--s7) var(--s4); color: var(--fg-3);
  font-size: var(--t-sm);
}
.note {
  padding: var(--s3); border-radius: var(--r-md); font-size: var(--t-sm);
  background: color-mix(in srgb, var(--info) 8%, transparent);
  border-left: 2px solid var(--info); color: var(--fg-2);
}
.note.warn {
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-left-color: var(--warn);
}

.mono { font-family: var(--mono); font-size: var(--t-xs); }
.muted { color: var(--fg-3); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* Barra de proporção — usada em confiança e cobertura */
.meter { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--info); transition: width .4s var(--ease); }
.meter i.up { background: var(--up); }
.meter i.warn { background: var(--warn); }
.meter i.down { background: var(--down); }

/* Respeita quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Dicas contextuais -----------------------------------------------------
 *
 * Box fixo no canto inferior direito, alimentado por `data-hint`. Escolhido em
 * vez de balão junto ao cursor por duas razões: não cobre o elemento que está
 * sendo explicado, e a posição fixa faz o olho aprender onde procurar.
 */
.hintbox {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  /* **Acima de tudo, inclusive das janelas.**
   *
   * Era 100, abaixo do `.modal` (200): dentro de uma janela — a de conectar
   * carteira, por exemplo — a dica aparecia *atrás* dela e não dava para ler.
   * O elemento que explica o que está na tela precisa estar por cima do que
   * está na tela; qualquer outra ordem torna a explicação inútil justamente
   * onde ela é mais necessária, que é numa janela cheia de opções novas. */
  z-index: 300;
  max-width: 340px;
  padding: var(--s3) var(--s4);
  background: var(--surface-3);
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: 1.45;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.hintbox.on { opacity: 1; transform: translateY(0); }

@media (max-width: 700px) {
  /* Em tela estreita a dica cobriria o conteúdo. Some — o rótulo do botão
     precisa bastar nesse tamanho. */
  .hintbox { display: none; }
}

/* Sinaliza que o elemento explica a si mesmo, sem poluir. */
[data-hint] { cursor: pointer; }
a[data-hint], button[data-hint] { position: relative; }

/* --- Barra lateral ---------------------------------------------------------
 *
 * A mesma barra em toda tela. Um menu que muda de lugar obriga a reaprender a
 * navegação a cada passo — e é o que torna um botão de "voltar" necessário.
 */

/* Item "Sair" ancorado ao fim da barra lateral. */
.rail a.sair {
  margin-top: auto;
  color: var(--down);
}
.rail a.sair:hover { background: rgba(229,72,77,.10); color: var(--down); }

@media (max-width: 880px) {
  /* Na horizontal, `margin-top:auto` empurraria o Sair para fora. */
  .rail a.sair { margin-top: 0; margin-left: auto; }
}

/* --- Perfil de ativo (modal) ----------------------------------------------- */

.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s5) var(--s4);
  overflow-y: auto;
  animation: fade .15s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.modal .sheet {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  width: 100%; max-width: 640px;
  padding: var(--s5);
  position: relative;
  animation: rise .2s var(--ease);
}
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }

.modal .sheet h2 { font-size: var(--t-lg); margin: 0 0 var(--s1); }
.modal .fechar {
  position: absolute; top: var(--s3); right: var(--s3);
  background: none; border: 0; color: var(--fg-3);
  font-size: 20px; line-height: 1; cursor: pointer; padding: var(--s1);
}

/* Linha de dado com rótulo e valor, usada no perfil e nas configurações. */
.linha {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s3); padding: var(--s2) 0;
  border-bottom: 1px solid var(--line); font-size: var(--t-sm);
}
.linha:last-child { border-bottom: 0; }

/* Linha marcada para ação em lote: a borda esquerda diz quais serão atingidas
 * sem tirar a legibilidade do texto, que um fundo colorido tiraria. */
.linha.selecionada {
  box-shadow: inset 3px 0 0 var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.linha .r { color: var(--fg-3); }
.linha .v { font-variant-numeric: tabular-nums; text-align: right; }

/* Campo de formulário com rótulo acima. */
.campo { display: flex; flex-direction: column; gap: 3px; }
.campo > label {
  font-size: var(--t-xs); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .5px;
}
.campo .ajuda { font-size: var(--t-xs); color: var(--fg-3); }

/* Passo numerado, usado na aba Conectar. */
.passo {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.passo:last-child { border-bottom: 0; }
.passo .n {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-3); color: var(--fg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 700;
}
.passo .t { font-size: var(--t-sm); }


/* --- Abas de segmento -------------------------------------------------------
 *
 * Rolagem horizontal em vez de quebra de linha: com oito segmentos, quebrar
 * empurraria o conteúdo para baixo em telas médias, e a primeira coisa visível
 * passaria a ser um bloco de botões.
 */
.abas {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  padding-bottom: var(--s2);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.aba {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--fg-3);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: var(--s2) var(--s3);
  cursor: pointer;
  transition: color .12s var(--ease), border-color .12s var(--ease),
              background .12s var(--ease);
}
.aba:hover { color: var(--fg); background: var(--surface-2); }
.aba.on {
  color: var(--fg);
  border-bottom-color: var(--info);
  background: var(--surface-2);
}

/* --- Painéis reorganizáveis ------------------------------------------------
 *
 * O operador decide a ordem dos blocos e o que fica visível. A grade é de doze
 * colunas para que um bloco possa ocupar um terço, metade ou a largura toda —
 * um gráfico de pizza não precisa do mesmo espaço de uma tabela, e forçar
 * todos ao mesmo tamanho desperdiça tela.
 */

.widgets {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s3);
  /* **As caixas de uma linha têm a mesma altura, e o conteúdo que não couber
     rola dentro delas.**

     Era `start`, e cada caixa tinha a altura do próprio conteúdo. O resultado
     eram tiras: a de alertas, com oito itens, esticava a linha inteira e
     deixava as vizinhas com um palmo de conteúdo e um metro de espaço em
     branco ao lado. Pior, o painel virava uma coluna de retângulos de alturas
     aleatórias, e a leitura perdia a régua.

     Com `stretch` mais o teto abaixo, toda linha tem a mesma altura e nenhuma
     passa de uma tela. O que sobra rola — e rolar dentro de uma caixa é
     melhor que rolar a página inteira para ver o que havia ao lado. */
  align-items: stretch;
  /* Preenche os buracos que caixas de alturas diferentes deixam: um bloco de
     um terço cabe no vão ao lado de um bloco alto em vez de esperar a próxima
     linha. Sem isto, uma caixa longa abre um corredor vazio à direita dela. */
  grid-auto-flow: dense;
}

/* O teto de altura de qualquer caixa. Num lugar só, para que se possa discordar
   do número olhando para ele. Cerca de metade de uma tela de notebook: alto o
   bastante para as caixas curtas nunca encostarem nele, baixo o bastante para
   nenhuma linha empurrar a seguinte para fora da vista. */
:root { --widget-altura: 520px; }

.widget {
  grid-column: span calc(var(--span, 1) * 4);
  min-width: 0;
  /* `min-height: 0` é o que permite ao corpo encolher e rolar. Sem ele o item
     de grade assume o tamanho do conteúdo e o `overflow` abaixo nunca dispara —
     é a pegadinha clássica de flex e grid, e o sintoma é exatamente o que se
     está consertando: a caixa continua esticando. */
  min-height: 0;
  max-height: var(--widget-altura);
  display: flex;
  flex-direction: column;
}

.widget-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* **A caixa de largura cheia não tem teto nem rolagem.**
 *
 * O teto existe para que uma caixa alta não estique as vizinhas de linha e não
 * deixe um metro de branco ao lado. Ocupando a linha inteira **não há
 * vizinha**: nada fica desalinhado e nada sobra em branco. Aí o teto só
 * atrapalharia — esconderia atrás de uma barra o conteúdo que tem toda a
 * largura disponível para ser lido de uma vez, que é justamente por que esses
 * blocos foram postos em 1/1: histórico com quatro colunas, evolução com
 * gráfico, alertas com o texto do que fazer. */
.widget[style*="--span:3"] {
  max-height: none;
}
.widget[style*="--span:3"] > .widget-corpo {
  overflow-y: visible;
}

/* **Três exceções, a pedido do titular: em 1/1 elas mantêm o teto e rolam.**
 * Alertas, Gestão das posições e Histórico de operações crescem com o tempo
 * — uma linha por alerta, por posição, por ordem — e na largura inteira
 * empurravam o resto da tela para muito longe. O título continua fixo no
 * topo enquanto o conteúdo rola.
 *
 * Como a do `universo`, não vale no celular: ali toda caixa já ocupa a linha
 * inteira, e rolagem dentro de rolagem é ruim de usar num toque. */
@media (min-width: 721px) {
  .widget[data-widget="alertas"][data-span="3"],
  .widget[data-widget="of-gestao"][data-span="3"],
  .widget[data-widget="of-historico"][data-span="3"] {
    max-height: var(--widget-altura);
  }
  .widget[data-widget="alertas"][data-span="3"] > .widget-corpo,
  .widget[data-widget="of-gestao"][data-span="3"] > .widget-corpo,
  .widget[data-widget="of-historico"][data-span="3"] > .widget-corpo {
    overflow-y: auto;
  }
}

/* No celular toda caixa ocupa a linha inteira, então a mesma razão vale para
   todas: sem vizinha, o teto só esconderia conteúdo atrás de uma barra dentro
   de outra barra — rolagem aninhada é das piores coisas de usar num toque. */
@media (max-width: 720px) {
  .widget { max-height: none; }
  .widget > .widget-corpo { overflow-y: visible; }
}

/* A caixa curta preenche a linha em vez de flutuar no topo dela, deixando um
   degrau ao lado da vizinha alta. */
.widget-corpo > .card { min-height: 100%; }

/* **O título fica.** Rolando o conteúdo, uma caixa sem cabeçalho vira um bloco
   de texto sem dono — e num painel de vinte caixas o operador perde de qual
   ele está lendo. */
.widget-corpo > .card > h2 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-top: 0;
  padding-top: var(--s1, 4px);
  background: var(--surface);
}

/* Barra de rolagem discreta: ela aparece em várias caixas ao mesmo tempo, e a
   barra padrão do sistema rouba atenção do conteúdo. */
.widget-corpo::-webkit-scrollbar { width: 8px; }
.widget-corpo::-webkit-scrollbar-track { background: transparent; }
.widget-corpo::-webkit-scrollbar-thumb {
  background: var(--line-strong, var(--linha));
  border-radius: 4px;
}
.widget-corpo { scrollbar-width: thin; }

/* Abaixo de 1100px, dois blocos por linha; abaixo de 720px, um. Um painel de
   três colunas num celular vira três colunas ilegíveis. */
@media (max-width: 1100px) {
  .widget { grid-column: span min(calc(var(--span, 1) * 6), 12); }
}
@media (max-width: 720px) {
  .widget { grid-column: span 12; }
}

/* --- Modo de organizar ---------------------------------------------------- */

.widgets.editando .widget {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  cursor: grab;
  transition: transform .12s var(--ease), opacity .12s var(--ease);
}
.widgets.editando .widget:hover { border-color: var(--accent); }
.widgets.editando .widget:active { cursor: grabbing; }

/* O bloco em movimento fica translúcido para que se veja o espaço onde ele
   vai cair. Sem isso, o arraste parece não estar acontecendo. */
.widget.arrastando { opacity: .35; transform: scale(.98); }

.widget-barra {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px dashed var(--line);
  font-size: var(--t-xs); color: var(--fg-3);
}
.widget-pega { cursor: grab; font-size: var(--t-md); color: var(--fg-3); }
.widget-nome { font-weight: 600; color: var(--fg-2); }
.widget-olho {
  margin-left: auto; padding: 1px var(--s2); font-size: var(--t-xs);
}

/* Oculto só aparece durante a edição — apagado, para dizer "existe e está
   escondido" em vez de sumir sem explicação. */
.widget.oculto { opacity: .4; }
.widget.oculto .widget-corpo { filter: grayscale(1); pointer-events: none; }

/* Fora da edição os blocos não têm moldura própria: quem desenha a borda é o
   .card dentro deles, e duas bordas concêntricas poluiriam a tela. */
.widgets:not(.editando) .widget > .widget-corpo > .card { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .widget, .widget.arrastando { transition: none; transform: none; }
}

/* --- Alternância lista / blocos ------------------------------------------- */

.visao-troca { display: inline-flex; gap: 2px; background: var(--surface-3);
  border-radius: var(--r-sm); padding: 2px; }
.visao-troca button {
  border: 0; background: transparent; color: var(--fg-3);
  font: 600 var(--t-xs)/1 var(--font); padding: 5px var(--s3);
  border-radius: var(--r-sm); cursor: pointer;
}
.visao-troca button.on { background: var(--surface); color: var(--fg); }

/* Blocos de ativo, lado a lado. `auto-fill` em vez de `auto-fit` para que dois
   ativos não se estiquem por toda a largura — um cartão de 800px ao lado de
   nada pareceria defeito. */
.blocos {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.bloco-ativo {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s3);
  cursor: pointer; text-align: left;
  transition: border-color .12s var(--ease), transform .12s var(--ease);
}
.bloco-ativo:hover { border-color: var(--accent); transform: translateY(-1px); }
.bloco-ativo.arrastando { opacity: .35; }
.bloco-ativo .sim { font-size: var(--t-lg); font-weight: 650; }
.bloco-ativo .val {
  font-size: var(--t-xl); font-weight: 650;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  .bloco-ativo:hover { transform: none; }
}

/* --- Logotipo de moeda ----------------------------------------------------
 *
 * A imagem vem do CDN do provedor de dados, e uma rede que bloqueia a API
 * costuma bloquear o CDN junto. O monograma é o substituto que sempre
 * funciona — cor derivada do próprio código, de modo que BTC tenha sempre o
 * mesmo tom e a moeda seja reconhecível pelo canto do olho.
 */

.moeda-logo, .moeda-monograma {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); flex: none; overflow: hidden;
}
.moeda-logo img { display: block; object-fit: contain; }
.moeda-monograma {
  color: #fff; font-weight: 700; letter-spacing: -.3px;
  font-family: var(--font); line-height: 1;
}

/* O seletor de visão fica no canto do cabeçalho do cartão, em ícone: dois
   botões de texto ocupariam uma linha inteira para uma escolha que se faz uma
   vez e raramente se muda. */
.visao-troca button svg { display: block; }
.visao-troca button { line-height: 0; }

/* --- Tabela de criptoativos ------------------------------------------------
 *
 * O formato das telas de referência do setor. A ordem das colunas resolve a
 * leitura: identidade à esquerda, onde o olho entra; números alinhados à
 * direita e tabulares, para que a coluna se compare de cima a baixo sem que os
 * dígitos dancem; gráfico no fim, que diz em um relance o que três percentuais
 * dizem em três leituras.
 */

.tabela-cripto {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm); white-space: nowrap;
}

.tabela-cripto th {
  text-align: left; font-weight: 600; color: var(--fg-3);
  font-size: var(--t-xs); padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.tabela-cripto th.num, .tabela-cripto td.num { text-align: right; }

.tabela-cripto td {
  padding: var(--s3); border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; color: var(--fg-2);
}
.tabela-cripto td.forte { color: var(--fg); font-weight: 600; }

/* A linha inteira é clicável, e o fundo confirma isso antes do clique. */
.tabela-cripto tbody tr { cursor: pointer; transition: background .1s var(--ease); }
.tabela-cripto tbody tr:hover { background: var(--surface-2); }
.tabela-cripto tbody tr:last-child td { border-bottom: 0; }

.ativo-celula { display: inline-flex; align-items: center; gap: var(--s2); }
.ativo-celula strong { color: var(--fg); font-weight: 600; }

/* Verde e vermelho aqui são resultado financeiro, que é o único uso reservado
   a essas cores no sistema inteiro. */
.sobe  { color: var(--up); }
.desce { color: var(--down); }

/* Barra de oferta emitida: um número percentual sozinho não mostra o quanto
   falta; a barra mostra. */
.barra-oferta {
  height: 3px; background: var(--surface-3); border-radius: 2px;
  margin-top: 4px; overflow: hidden;
}
.barra-oferta span { display: block; height: 100%; background: var(--fg-3); }

.moeda-icone { display: block; border-radius: 50%; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .tabela-cripto tbody tr { transition: none; }
}

/* --- Detalhe da moeda ------------------------------------------------------ */

.moeda-topo {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: var(--s4);
}
.moeda-preco {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Métricas em cartões pequenos, como na tela de referência: cada número com o
   rótulo em cima, para que a leitura não dependa de lembrar a ordem. */
.metricas-moeda {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.metrica-caixa {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s3);
}
.metrica-caixa .k {
  font-size: var(--t-xs); color: var(--fg-3); display: block; margin-bottom: 3px;
}
.metrica-caixa .v {
  font-size: var(--t-lg); font-weight: 650; font-variant-numeric: tabular-nums;
}

/* --- Definições -----------------------------------------------------------
 *
 * Para texto corrido com rótulo. `.linha` alinha o valor à direita, o que
 * serve para número — uma coluna de valores se compara de cima a baixo. Serve
 * mal para parágrafo: o texto encosta na borda direita e a margem esquerda
 * fica irregular, o que obriga o olho a caçar o começo de cada linha.
 *
 * Aqui o rótulo vai acima e o texto ocupa a largura toda, justificado nas duas
 * margens. `hyphens: auto` acompanha a justificação: sem hifenização, um
 * parágrafo justificado abre rios de espaço entre palavras longas — e em
 * português as palavras são longas.
 */

.definicoes { margin: 0; }
.definicoes dt {
  font-size: var(--t-xs); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .5px;
  margin-top: var(--s3);
}
.definicoes dt:first-child { margin-top: 0; }
.definicoes dd {
  margin: 3px 0 0;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  color: var(--fg-2);
  line-height: 1.6;
}
.definicoes dd:last-child { border-bottom: 0; padding-bottom: 0; }
.definicoes dd.mono {
  font-family: var(--mono); text-align: left; hyphens: none;
}

/* Cartão de segmento de cripto: a faixa colorida no topo identifica o grupo
   sem exigir que se leia o título, e é o que permite varrer a grade de relance. */
.segmento {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s3);
}
.segmento .linha { border-bottom-color: var(--line); }
.segmento .linha:last-of-type { border-bottom: 0; }

/* Seletor de largura do bloco, no modo de layout.
 *
 * Três passos, não arraste livre: a grade tem doze colunas e cada passo vale
 * quatro. Redimensionamento contínuo produziria blocos de sete colunas ao lado
 * de blocos de cinco, e a tela perderia o alinhamento que torna uma grade
 * legível. O rótulo mostra a fração — "⅓" se lê sem conhecer a grade. */
.widget-larguras {
  display: inline-flex; gap: 1px; margin-left: auto;
  background: var(--surface-3); border-radius: var(--r-sm); padding: 1px;
}
.widget-larguras button {
  border: 0; background: transparent; color: var(--fg-3); cursor: pointer;
  font: 600 var(--t-xs)/1 var(--font); padding: 3px 7px;
  border-radius: calc(var(--r-sm) - 1px); min-width: 26px;
}
.widget-larguras button:hover { color: var(--fg); }
.widget-larguras button.on { background: var(--surface); color: var(--fg); }

/* Com o seletor de largura na barra, o botão de ocultar perde o `margin-left`
   automático — senão os dois disputariam o mesmo espaço. */
.widget-barra .widget-olho { margin-left: 0; }

/* --- Futuros ---------------------------------------------------------------
 *
 * Verificação antes da ordem. A caixa é grande e a área clicável é a linha
 * inteira: conferir um item precisa ser mais fácil que ignorá-lo.
 */

.checagem {
  display: flex; gap: var(--s2); align-items: flex-start;
  padding: var(--s2) 0; border-bottom: 1px solid var(--line);
  cursor: pointer; font-size: var(--t-sm);
}
.checagem:last-of-type { border-bottom: 0; }
.checagem input { margin-top: 2px; width: 15px; height: 15px; flex: none; }
.checagem input:checked + span strong {
  text-decoration: line-through; color: var(--fg-3);
}

/* Passo da sequência de execução. O número à esquerda existe porque a ordem
   é o conteúdo: entrar antes de colocar o stop é a forma mais comum de
   destruir uma conta. */
.passo {
  display: flex; gap: var(--s3); padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.passo:last-child { border-bottom: 0; }
.passo-num {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--surface-3); color: var(--fg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 700;
}
.passo.critico .passo-num { background: var(--down); color: #fff; }
.passo.critico { background: rgba(229,72,77,.05); border-radius: var(--r-sm);
  padding-left: var(--s2); padding-right: var(--s2); }

/* Lição recolhida por padrão: o material inteiro aberto seria uma parede de
   texto que ninguém lê. Recolhido, o título funciona como índice. */
.licao {
  border-bottom: 1px solid var(--line); padding: var(--s2) 0;
}
.licao:last-of-type { border-bottom: 0; }
.licao > summary {
  cursor: pointer; display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm); list-style: none;
}
.licao > summary::-webkit-details-marker { display: none; }
.licao > summary::before {
  content: "▸"; color: var(--fg-3); font-size: var(--t-xs);
  transition: transform .12s var(--ease);
}
.licao[open] > summary::before { transform: rotate(90deg); }
.licao > summary strong { color: var(--fg); font-weight: 600; }

.licao-corpo {
  padding: var(--s3) 0 var(--s2) var(--s4);
  border-left: 2px solid var(--line); margin: var(--s2) 0 0 6px;
}
.licao-secao { margin-bottom: var(--s3); }
.licao-secao p {
  margin: 3px 0 0; font-size: var(--t-sm); line-height: 1.6;
  color: var(--fg-2); text-align: justify; hyphens: auto;
}
.licao-rotulo {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3); font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .licao > summary::before { transition: none; }
}

/* A marca do agente no cabeçalho da própria aba, com o indicador de análise
   contínua ao lado. Verde não significa "conectado à internet" — significa
   "o Atlas está lendo o mercado agora". Com a análise parada, os números da
   tela são do último ciclo e podem ser de horas atrás. */
.marca-atlas {
  display: flex; align-items: center; gap: var(--s3);
  letter-spacing: 2px; font-weight: 700;
}
.marca-atlas .pulse { gap: 6px; }

/* --- A marca ------------------------------------------------------------------
 *
 * O desenho mora em `static/logotipo.svg` e é injetado nas páginas ao servir.
 * Aqui fica só o tamanho: cinco cópias do mesmo SVG divergiriam na primeira
 * alteração feita numa só, e a página esquecida seria justamente a que
 * estivesse no ar.
 *
 * `flex: none` porque a marca vive dentro de uma linha flexível ao lado do
 * nome — sem isso ela encolhe quando o nome cresce, e a identidade vira um
 * retângulo achatado. */
.logotipo { width: 30px; height: 30px; display: block; flex: none; }

/* --- A escolha de tema ---------------------------------------------------------
 *
 * O sistema já suportava claro por `prefers-color-scheme`; o que faltava era
 * poder **decidir**. O atributo no elemento raiz vence a preferência do
 * computador nos dois sentidos — declarar só o claro deixaria quem usa sistema
 * claro sem como voltar ao escuro.
 *
 * Os valores são os mesmos do bloco `:root` e da mídia de tema claro, copiados
 * de propósito: um tom novo aqui faria a tela divergir de si mesma no primeiro
 * ajuste de paleta. */
html[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #0b0d11;
  --surface: #12151c;
  --surface-2: #171b24;
  --surface-3: #1e232e;
  --line: #252b37;
  --line-strong: #333b4a;
  --fg: #e8eaef;
  --fg-2: #a8b0bf;
  --fg-3: #6b7383;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.22);
}
html[data-tema="claro"] {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e9ecf1;
  --line: #e2e6ec;
  --line-strong: #ccd3dd;
  --fg: #131720;
  --fg-2: #4a5364;
  --fg-3: #7c8598;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
}

/* Quadrado, do tamanho dos outros botões da barra. O ícone troca com o tema:
   sol quando se pode clarear, lua quando se pode escurecer — o desenho mostra
   o destino, e não o estado, que é o que se espera de um interruptor. */
.btn-tema {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--fg-2); cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.btn-tema:hover { color: var(--fg); border-color: var(--line-strong); }
.btn-tema svg { width: 17px; height: 17px; display: block; }
.btn-tema .lua { display: none; }
html[data-tema="claro"] .btn-tema .sol { display: none; }
html[data-tema="claro"] .btn-tema .lua { display: block; }

/* O botão do bate-papo veste o mesmo quadrado do tema: são dois controles de
   mesma natureza — atravessam todas as telas e não pertencem a nenhuma. Sendo
   um `<a>`, precisa recusar o sublinhado que o link traz de fábrica. */
.btn-conversa { text-decoration: none; }
.btn-conversa svg { display: block; }

/* --- Grupos de abas e telas embutidas ------------------------------------- */

/* `.abas` tem `padding-bottom` e nenhum `padding-top`: a folga existe para
   afastar as abas da linha divisória. Centralizar dentro dela deixava o botão
   alto — `align-items: center` centra na caixa de conteúdo, e a folga de baixo
   fica fora dela. O par de cima torna a faixa simétrica, e aí centralizar
   centraliza de verdade. */
.abas-grupo {
  display: flex;
  align-items: center;
  overflow: visible;
  padding-top: var(--s2);
}

/* O botão de grupo vive na linha de baixo, junto das abas, e é um `.btn`
   idêntico ao "Atualizar" logo acima. Fica à direita porque é ali que estão os
   controles que trocam o que se vê — e alinhado a eles, não à borda.
   `align-self` o impede de esticar na altura da barra. */
.troca-grupo {
  white-space: nowrap;
  margin-left: auto;
  align-self: center;
  /* A mesma folga que sobra acima e abaixo — encostado na borda o botão lê
     como parte da moldura da tela.

     Os 2px não são arbitrários. A folga vertical é `padding-top` mais metade
     da diferença de altura entre a aba e o botão: a aba usa `var(--s2)` de
     padding vertical e o botão usa 6px, o que a deixa 4px mais alta, e
     `align-self: center` reparte esses 4px em dois. Dá 10px em cima e embaixo.

     Se o padding de qualquer um dos dois mudar, este ajuste muda junto — é o
     que o teste da simetria verifica. */
  margin-right: calc(var(--s2) + 2px);
}

/* --- Rolagem estilizada ----------------------------------------------------
 *
 * A barra padrão do sistema é cinza-claro e sólida: num tema escuro ela salta
 * como um retângulo estranho no meio do cartão. Aqui ela usa as mesmas
 * superfícies do resto — visível quando se procura, discreta quando não.
 *
 * `scrollbar-color` cobre Firefox; `::-webkit-scrollbar` cobre Chrome, Edge e
 * os navegadores embutidos do modo desktop. Os dois são necessários.
 */

* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: var(--r-full);
  /* A borda transparente afina a barra sem reduzir a área de clique: o
     ponteiro pega os 10px, o olho vê 6. */
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Rolagem horizontal dentro de cartão — tabelas largas, abas de segmento.
   O degradê nas bordas avisa que há conteúdo além do que se vê; sem ele a
   tabela parece terminar onde a tela termina. */
.card [style*="overflow-x"], .rolagem-x {
  scrollbar-color: var(--accent) var(--surface-2);
}
.card [style*="overflow-x"]::-webkit-scrollbar-thumb,
.rolagem-x::-webkit-scrollbar-thumb {
  background: var(--line-strong); background-clip: content-box;
}
.card [style*="overflow-x"]:hover::-webkit-scrollbar-thumb,
.rolagem-x:hover::-webkit-scrollbar-thumb {
  background: var(--accent); background-clip: content-box;
}

/* Bloco com altura limitada e rolagem própria. Usado no box de notícias: sem
   ele, trinta matérias empurram o calendário para fora da tela — e calendário
   tem prazo, notícia não. */
.rolagem-interna {
  max-height: 420px; overflow-y: auto; overflow-x: hidden;
  /* Espaço para a barra não cobrir o texto da última linha. */
  padding-right: var(--s2); margin-right: calc(-1 * var(--s2));
}

/* A barra de abas de segmento em Ativos rola na horizontal quando as oito
   classes não cabem. A barra padrão do sistema apareceria como um risco cinza
   colado à linha divisória — dois traços paralelos que não separam nada.
   Aqui ela é fina, translúcida e some quando não se está usando a barra. */
.abas::-webkit-scrollbar { height: 4px; }
.abas::-webkit-scrollbar-track { background: transparent; }
.abas::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: var(--r-full); border: 0;
  transition: background .15s var(--ease);
}
.abas:hover::-webkit-scrollbar-thumb { background: var(--line-strong); }
.abas { scrollbar-color: var(--line) transparent; }
.abas:hover { scrollbar-color: var(--line-strong) transparent; }

@media (prefers-reduced-motion: reduce) {
  .abas::-webkit-scrollbar-thumb { transition: none; }
}

/* A lista de abas rola sozinha quando não cabe; o botão de grupo fica fora
   dela para nunca sair de vista. */
.abas-lista {
  display: flex; gap: var(--s1); overflow-x: auto; flex: 1; min-width: 0;
}
.abas-lista::-webkit-scrollbar { height: 4px; }
.abas-lista::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: var(--r-full);
}
.abas-lista:hover::-webkit-scrollbar-thumb { background: var(--line-strong); }

/* A aba pode ser botão (troca local) ou link (navega). As duas precisam ficar
   idênticas — o operador não tem por que perceber a diferença, e um link cru
   chegaria sublinhado e azul no meio de abas que não são nem uma coisa nem
   outra. */
.abas .aba { border: 0; border-bottom: 2px solid transparent; font: inherit; }
.abas .aba.on { border-bottom-color: var(--info); }
a.aba { text-decoration: none; color: var(--fg-3); }
a.aba:hover { color: var(--fg); }
a.aba.on { color: var(--fg); }

/* --- Engrenagem de ajuste --------------------------------------------------
 *
 * Fica no canto do cartão de detalhe porque ajustar patrimônio não é o que se
 * vem fazer ali: abre-se o detalhe para olhar. Um formulário sempre aberto
 * convidaria a digitar por engano num campo que muda o valor da carteira.
 *
 * `margin-left: auto` a empurra para o canto oposto ao logo, e o quadrado fixo
 * a mantém do tamanho do símbolo em vez de esticar com o texto ao lado. */
.engrenagem {
  margin-left: auto;
  align-self: flex-start;
  width: 32px; height: 32px; padding: 0;
  justify-content: center;
  font-size: 15px; line-height: 1;
}

.painel-ajuste {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.painel-ajuste .abas { margin-bottom: var(--s3); padding-bottom: var(--s2); }

/* --- Regras de saída e pontos de atenção (DeFi) ----------------------------
 *
 * Classes próprias em vez de reaproveitar `.passo` e `.licao`: aquelas têm
 * semântica de sequência numerada e de bloco recolhível, e uma regra de saída
 * não é o passo três de nada — é uma condição que pode disparar sozinha, a
 * qualquer momento, na ordem que o mercado quiser. */
.regra {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.regra:last-child { border-bottom: 0; }
.regra.critica {
  border-left: 3px solid var(--down);
  padding-left: var(--s3);
  background: rgba(229, 72, 77, .04);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.regra-quando { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.regra-faca { margin-top: 4px; font-size: var(--t-sm); }
.regra-porque {
  margin-top: 4px; font-size: var(--t-xs); color: var(--fg-3);
  text-align: justify;
}

.ponto {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.ponto.critico { border-color: var(--down); }

/* --- Carteira em blocos (aba Ativos) ---------------------------------------
 *
 * Os quadrados existem para **reconhecer**, não para comparar: código grande,
 * quatro informações, e muito mais ativos por tela. A tabela ao lado é que
 * serve para comparar, e é por isso que as duas coexistem em vez de uma
 * substituir a outra.
 *
 * `auto-fill` com mínimo fixo mantém os quadrados do mesmo tamanho em qualquer
 * largura — quadrados de tamanhos diferentes sugeririam importâncias
 * diferentes, que não é o caso. */
.grade-ativos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--s2);
}
.quadro-ativo {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--fg);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.quadro-ativo:hover {
  border-color: var(--line-strong); background: var(--surface-3);
}
/* --- Bloco de ativo, redesenhado -------------------------------------------
 *
 * A primeira versão empilhava quatro linhas de texto do mesmo tamanho, e o
 * olho não tinha onde pousar: para saber quanto uma posição valia era preciso
 * ler as quatro. Aqui a hierarquia é explícita — o valor domina, o código é
 * etiqueta, e quantidade e preço unitário ficam no rodapé, atrás de uma linha,
 * porque respondem a "como cheguei nesse valor": pergunta que só aparece
 * depois da primeira. */
.quadro-ativo {
  position: relative; overflow: hidden;
  padding: var(--s3) var(--s3) var(--s2);
  gap: 0;
}
/* A faixa identifica a classe sem gastar uma linha de texto com o nome dela. */
.quadro-ativo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--cor-classe, var(--line-strong));
}
.quadro-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-bottom: 2px;
}
.quadro-codigo {
  font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .4px; color: var(--fg-2);
}
.quadro-marca {
  font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--fg-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0 4px;
}
.quadro-valor {
  font-size: 19px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.quadro-res {
  font-size: var(--t-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 5px;
}
.quadro-desde {
  font-weight: 400; font-size: 9px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .4px;
}
/* A barra dá a proporção entre posições sem exigir a leitura de dois números:
   qual é a maior da classe se vê antes de ler qualquer coisa. */
.quadro-barra {
  display: block; height: 3px; border-radius: var(--r-full);
  background: var(--surface-3); margin: var(--s2) 0 6px;
}
.quadro-barra > span {
  display: block; height: 100%; border-radius: var(--r-full);
  background: var(--cor-classe, var(--line-strong)); opacity: .75;
}
.quadro-rodape {
  display: flex; justify-content: space-between; gap: var(--s2);
  font-size: var(--t-xs); color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  padding-top: 5px; border-top: 1px solid var(--line);
}
.grade-ativos { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }

/* --- Total da carteira no cabeçalho ----------------------------------------
 *
 * Mesma altura e mesmo raio do campo de busca ao lado: os dois ocupam a mesma
 * faixa do cabeçalho e alturas diferentes fariam a linha parecer desalinhada.
 *
 * O verde marca "este é o total", não "está indo bem" — um patrimônio em queda
 * continua verde aqui. O resultado de cada posição tem cor própria dentro da
 * carteira, e é lá que verde e vermelho significam ganho e perda. */
.total-carteira {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  padding: 6px var(--s3);
  border: 1px solid var(--up); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--up) 10%, transparent);
  color: var(--up);
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.total-carteira strong { font-size: var(--t-md); font-weight: 700; }
.total-rotulo {
  font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
  opacity: .8;
}
.total-conta { font-size: var(--t-xs); opacity: .75; }

@media (max-width: 900px) { .total-conta, .total-rotulo { display: none; } }

/* --- Concessão de acesso ---------------------------------------------------
 *
 * Cada opção é um alvo de clique inteiro, não só a caixinha: alvos pequenos
 * fazem errar, e errar aqui concede ou nega uma tela a alguém. */
.opcao-acesso {
  display: flex; align-items: flex-start; gap: 8px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--t-sm); cursor: pointer;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.opcao-acesso:hover { border-color: var(--line-strong); background: var(--surface-3); }
.opcao-acesso:has(input:checked) {
  border-color: var(--info);
  background: color-mix(in srgb, var(--info) 8%, transparent);
}
.opcao-acesso input { margin-top: 2px; flex: none; }

/* --- Proventos ---------------------------------------------------------------
 *
 * O layout segue a leitura da B3 porque a comparação é inevitável: o operador
 * abre as duas telas lado a lado. Números grandes no topo, a série mensal em
 * barras, e a lista por ativo com a fatia de cada um — nessa ordem, porque é a
 * ordem em que a pergunta aparece: quanto veio, quando veio, de onde veio.
 *
 * **As alturas são relativas ao maior mês, não absolutas.** Uma escala fixa
 * achataria uma carteira pequena até virar uma linha reta, e a forma da série é
 * justamente o que a barra existe para mostrar. */

.prov-topo {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s4);
}
.prov-numeros { display: flex; gap: var(--s5); flex-wrap: wrap; }
.prov-numeros div { display: flex; flex-direction: column; }
.prov-numeros span {
  font-size: var(--t-xs); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .6px;
}
.prov-numeros b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }

.prov-grafico {
  display: flex; align-items: flex-end; gap: 4px;
  height: 116px; margin-bottom: var(--s5);
  padding: 14px 0 18px; position: relative;
}

/* **A barra fina deixa o valor caber.** Com a coluna cheia, o número acima
 * dela precisaria encolher até virar ilegível ou colidir com o vizinho; a
 * barra estreitada abre a folga sem tirar altura, que é o que carrega a
 * comparação entre os meses. */
.prov-fina .prov-barra { width: 58%; margin: 0 auto; }

/* **A cifra é ancorada pela base, não pelo topo do quadro.**
 *
 * Com `top: 0` ela ficava na mesma linha para todas as colunas: sobre a barra
 * mais alta parecia colada, e sobre as baixas flutuava longe, de modo que o
 * olho perdia a que coluna cada número pertencia. `bottom` calculado a partir
 * da mesma altura da barra faz o número acompanhar o topo dela. */
.prov-cifra {
  position: absolute; left: 0; right: 0;
  text-align: center; font-size: 10px; color: var(--fg-2);
  font-variant-numeric: tabular-nums; pointer-events: none;
  white-space: nowrap;
}
.prov-col {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
}
.prov-barra {
  background: linear-gradient(180deg, var(--accent), var(--perception));
  border-radius: 3px 3px 0 0; min-height: 2px;
  transition: opacity .15s;
}
.prov-col:hover .prov-barra { opacity: .75; }
.prov-mes {
  position: absolute; bottom: -18px; left: 0; right: 0;
  text-align: center; font-size: 10px; color: var(--fg-3);
}

.prov-sec {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3); margin: 0 0 var(--s3);
}
.prov-linha {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) 1fr auto auto auto;
  align-items: center; gap: var(--s3); padding: 5px 0;
}

/* **A média fica entre a barra e o total, e em tom mais fraco.**
 *
 * Os dois números respondem perguntas diferentes — quanto o papel rende por
 * mês, e quanto ele rendeu no período — e com o mesmo peso visual competiriam
 * pela leitura. O total é o que fecha a soma da caixa, então é ele que fica
 * forte. */
.prov-media {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--fg-2); font-size: var(--t-sm);
  min-width: 88px; text-align: right;
}
.prov-media small { color: var(--fg-3); font-size: 10px; margin-left: 1px; }

/* **Por cota vem antes da média, e é o mais fraco dos três.**
 *
 * A linha responde três perguntas em ordem de proximidade com a decisão: o que
 * o emissor declarou por cota, o que isso vira por mês na sua posição, e o
 * total do período. O primeiro não depende de quanto você tem — é a régua com
 * que se compara papéis —, e por isso é o que menos compete com os outros. */
.prov-cota {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--fg-3); font-size: var(--t-sm);
  min-width: 78px; text-align: right;
}
.prov-cota small { font-size: 10px; margin-left: 1px; }
.prov-papel { display: flex; flex-direction: column; min-width: 0; }
.prov-papel .muted { font-size: var(--t-xs); }
.prov-trilho {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  overflow: hidden;
}
.prov-parte {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--perception));
}
.prov-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* O calendário é uma grade de doze marcas, e não uma lista de nomes de mês.
 * A pergunta que ele responde — "este papel paga todo mês ou só em dois?" — se
 * lê pela forma, e a forma some numa frase separada por vírgulas. */
.prov-cal-linha {
  display: flex; align-items: center; gap: var(--s3); padding: 3px 0;
}
.prov-cal-papel {
  min-width: 76px; font-size: var(--t-sm); font-weight: 600;
}
.prov-cal-grade { display: flex; gap: 3px; flex-wrap: wrap; }
.prov-cel {
  width: 18px; height: 18px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: 9px; text-transform: uppercase;
  background: var(--surface-2); color: var(--fg-3);
}
/* **Vazado é o mês que o papel paga e o operador ainda não recebeu.**
 *
 * A distinção é por preenchimento, e não por cor: quem não separa dois tons
 * ainda enxerga cheio contra vazado. E o contorno mantém a forma da linha
 * legível — é ela que responde "este papel paga todo mês ou só em alguns?",
 * que é a pergunta do calendário. */
/* **Preenchido fraco, e não transparente.**
 *
 * A primeira versão deixava o mês "ainda vai receber" sem fundo, com só um
 * contorno fino. Contra o fundo escuro isso se lê como célula vazia — e o
 * calendário de um papel recém-comprado, que é justamente quem tem doze meses
 * nesse estado, parecia não ter sido preenchido. Fundo fraco resolve sem
 * perder a distinção: cheio é o que já caiu, fraco é o que vai cair. */
.prov-cel.on {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
  border: 1px solid var(--accent); font-weight: 700;
}
.prov-cel.on.recebido {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
}

.prov-nota {
  font-size: var(--t-xs); color: var(--fg-3);
  line-height: 1.5; margin: var(--s3) 0 0;
}
.prov-nada p { line-height: 1.5; }

@media (max-width: 560px) {
  .prov-linha { grid-template-columns: 1fr auto auto; }
  .prov-trilho { display: none; }
  /* Numa tela estreita a régua por cota é a que menos serve: ela compara
     papéis, e comparar exige ver a lista inteira de uma vez. */
  .prov-cota { display: none; }
  .prov-media { min-width: 0; font-size: var(--t-xs); }
  .prov-numeros { gap: var(--s4); }
}

/* --- Notificações -------------------------------------------------------------
 *
 * Cada aviso é um link, e não um texto solto: ele existe para levar ao bloco
 * que tem o dado. Um aviso que informa e não leva obriga o operador a procurar
 * onde a informação mora, que é o atrito que este bloco existe para remover. */
.notif {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line);
}
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--surface-2); }
.notif > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.notif b { font-size: var(--t-sm); }
.notif .muted { font-size: var(--t-xs); line-height: 1.45; }

/* --- Radar de proventos -------------------------------------------------------
 *
 * O rendimento e a variação ficam lado a lado de propósito: rendimento alto
 * costuma vir de preço em queda, e ler um sem o outro entrega o pior papel no
 * topo da lista. */
.radar-linha {
  display: grid; grid-template-columns: minmax(88px, 1fr) auto auto;
  align-items: center; gap: var(--s3); padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.radar-linha:last-child { border-bottom: 0; }
.radar-papel { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.radar-rend { font-variant-numeric: tabular-nums; font-weight: 700; }
.radar-var { font-variant-numeric: tabular-nums; font-size: var(--t-xs); }

@media (max-width: 560px) {
  .radar-linha { grid-template-columns: 1fr auto; }
  .radar-var { display: none; }
}

/* --- Indicação de compra ------------------------------------------------------
 *
 * **A condição que derruba fica sob cada razão, e não escondida atrás do
 * mouse.** Ela é o que separa análise de torcida, e o que está atrás de um
 * `title` não é lido por quem age — nem existe no toque. */
.ind-seg { margin-bottom: var(--s5); }
.ind-seg h3 {
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3); margin: 0 0 var(--s3);
  display: flex; align-items: center; gap: var(--s2);
}
.ind-item {
  border-left: 2px solid var(--accent);
  padding: var(--s2) 0 var(--s2) var(--s3);
  margin-bottom: var(--s3);
}
.ind-topo {
  display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap; margin-bottom: 4px;
}
.ind-razao {
  display: flex; flex-direction: column;
  font-size: var(--t-sm); line-height: 1.45; padding: 3px 0;
}
.ind-derruba {
  font-size: var(--t-xs); color: var(--fg-3); font-style: italic;
}

/* --- Segmentos em quadrados ---------------------------------------------------
 *
 * A lista corrida obrigava a rolar sete blocos para achar o que interessa. O
 * quadrado mostra de relance onde há coisa e onde não há — e o que está fora da
 * cobertura fica apagado em vez de sumir, porque omitir faria supor que aquele
 * segmento não existe. */
.seg-grade {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.seg-quadro {
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: var(--s3); text-align: center; cursor: pointer;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .12s var(--ease), transform .12s var(--ease);
}
.seg-quadro:hover:not(:disabled) {
  border-color: var(--accent); transform: translateY(-2px);
}
.seg-quadro.tem { border-color: var(--accent); }
.seg-quadro.fora { opacity: .45; cursor: default; }
.seg-nome { font-size: var(--t-sm); font-weight: 600; line-height: 1.2; }
.seg-conta {
  font-size: 30px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.seg-quadro.tem .seg-conta { color: var(--accent); }
.seg-rodape {
  font-size: 10px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .5px;
}

/* --- O popup do segmento ------------------------------------------------------
 *
 * Centralizado e por cima: comparar dez papéis exige vê-los juntos, e dentro do
 * bloco a lista competiria por espaço com o resto da aba. */
.vit-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
}
.vit-caixa {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5);
  width: min(880px, 100%); max-height: 88vh; overflow-y: auto;
}
.vit-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
}
.vit-topo h2 { margin: 0; font-size: var(--t-lg); }
.vit-sobre {
  font-size: var(--t-sm); color: var(--fg-2); line-height: 1.55;
  margin: 0 0 var(--s4);
}
.vit-abas { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.vit-aba {
  background: transparent; color: var(--fg-3); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 6px var(--s3); font-size: var(--t-sm);
}
.vit-aba.on { color: var(--fg); border-color: var(--accent); }

.vit-item { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.vit-item:last-child { border-bottom: 0; }
.vit-papel {
  display: flex; align-items: center; gap: var(--s2);
  flex-wrap: wrap; margin-bottom: 4px;
}
.vit-nome { font-size: var(--t-xs); color: var(--fg-3); }
.vit-numeros {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}
.vit-numeros span {
  display: flex; flex-direction: column;
  font-variant-numeric: tabular-nums; font-size: var(--t-sm);
}
.vit-numeros small {
  font-size: 10px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .5px;
}
.vit-abaixo { color: var(--up); }
.vit-acima { color: var(--fg-2); }
.vit-nota {
  font-size: var(--t-xs); color: var(--fg-3);
  line-height: 1.5; margin: var(--s4) 0 0;
}

/* --- Histórico de movimentações ----------------------------------------------
 *
 * **A cor carrega o lado da operação, e o texto também.** Verde e vermelho
 * sozinhos excluem quem não distingue as duas cores — e é o dado mais básico
 * da linha. Por isso a etiqueta diz "compra" ou "venda" por extenso. */
.hist-grupo { margin-bottom: var(--s5); }
.hist-grupo h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3); margin: 0 0 var(--s2);
  display: flex; align-items: center; gap: var(--s2);
}
.hist-linha {
  display: grid;
  grid-template-columns: 72px minmax(110px, 1fr) auto minmax(110px, auto);
  align-items: center; gap: var(--s3); padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.hist-linha:last-child { border-bottom: 0; }
.hist-lado {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  text-align: center; padding: 2px 0; border-radius: var(--r-sm, 4px);
}
.hist-lado.compra { color: var(--up); border: 1px solid var(--up); }
.hist-lado.venda { color: var(--down); border: 1px solid var(--down); }
.hist-papel { display: flex; flex-direction: column; min-width: 0; }
.hist-papel .muted { font-size: var(--t-xs); }
.hist-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-res {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-align: right; font-size: var(--t-sm); color: var(--fg-3);
}
.hist-res.ganho { color: var(--up); }
.hist-res.perda { color: var(--down); }
.hist-res small { font-size: 10px; opacity: .8; }

@media (max-width: 560px) {
  .hist-linha { grid-template-columns: 60px 1fr auto; }
  .hist-valor { display: none; }
}

/* --- Em operação --------------------------------------------------------------
 *
 * **A barra é o peso na carteira, e ela responde a pergunta que a lista não
 * responde sozinha.** Uma coluna de valores em reais obriga a comparar de
 * cabeça; a barra mostra a concentração de relance, que é o que decide se
 * comprar mais daquele papel é diversificar ou concentrar. */
.op-item {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) auto 1fr auto;
  align-items: center; gap: var(--s3); padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.op-item:last-child { border-bottom: 0; }
.op-papel { display: flex; flex-direction: column; min-width: 0; }
.op-papel .muted { font-size: var(--t-xs); }
.op-trilho {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  overflow: hidden;
}
.op-parte {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--perception));
}
.op-valor {
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.op-valor small { color: var(--fg-3); font-size: 10px; margin-left: 3px; }
.op-plano {
  padding: var(--s2) 0 var(--s3);
  border-bottom: 1px solid var(--line); margin-bottom: var(--s3);
}
.op-linha-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.op-linha-topo .muted { font-size: var(--t-xs); }

@media (max-width: 560px) {
  .op-item { grid-template-columns: 1fr auto auto; }
  .op-trilho { display: none; }
}

/* --- Os quatro quadrantes da tela do ativo ------------------------------------
 *
 * **Duas colunas fixas, e não `auto-fit`.**
 *
 * `.grid.c2` usa `repeat(auto-fit, minmax(320px, 1fr))`: numa tela larga isso
 * cria quantas colunas couberem — quatro, no monitor do operador — e os quatro
 * quadrantes viram uma fileira única. A ordem "sobre o ativo, análise, proventos,
 * o que fazer" só existe como duas linhas de dois; em fileira ela não diz nada.
 *
 * Aqui as colunas são contadas, não estimadas. Abaixo de 760px vira coluna
 * única, porque meia tela de celular não comporta uma tabela de indicadores. */
.grid-ativo {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 760px) {
  .grid-ativo { grid-template-columns: 1fr; }
}

/* A saúde das fontes é uma faixa, não uma lista: cinco cartões lado a lado
   respondem "está tudo no ar?" de uma olhada. Empilhados exigiriam rolagem
   para a mesma resposta. Abaixo de 220px por cartão eles quebram sozinhos. */
.fontes-faixa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.fonte-cartao {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: var(--t-sm);
}
.fonte-topo { display: flex; justify-content: space-between; align-items: center; }
.fonte-ms { font-variant-numeric: tabular-nums; white-space: nowrap; }
.saude-alarme { color: var(--down); font-weight: 700; }

/* O diagnóstico de uma falha de provedor: rótulo e valor em duas colunas, para
   que HTTP, modelo, tentativa e Retry-After sejam lidos de uma varredura
   vertical em vez de garimpados num parágrafo. */
.diag {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
  font-size: var(--t-xs);
}
.diag-linha {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
}

/* Corrigir cadastro e registrar movimento são atos diferentes e precisam
   parecer diferentes: um separador com rótulo evita que o operador aplique um
   aporte achando que está corrigindo um erro de digitação. */
.edit-secao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linha);
}

/* Alertas: a severidade é lida pela borda esquerda antes de qualquer texto,
   porque numa lista de oito o que importa é achar os dois que urgem. */
.alerta {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--linha);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2);
  font-size: var(--t-sm);
}
.alerta-critico { border-left-color: var(--down); }
.alerta-atencao { border-left-color: var(--warn, var(--info)); }
.alerta-informativo { border-left-color: var(--info); }
.alerta-topo { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.alerta-texto { margin: 0 0 6px; color: var(--fg-2, inherit); }
.alerta-acao { margin: 0; font-size: var(--t-xs); }
.alerta-acao a { margin-left: 6px; color: var(--info); }
.alerta-quieto { margin: 0; font-size: var(--t-sm); color: var(--up); }

/* Renda fixa: cada tipo é uma caixa que abre. Fechada mostra nome, selos e
   resumo — o suficiente para orientar; aberta traz o material inteiro, que é
   longo demais para ficar exposto em dez caixas ao mesmo tempo. */
.rf-caixa {
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface-2);
}
.rf-caixa > summary {
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--t-sm);
}
.rf-caixa[open] > summary { margin-bottom: 10px; }
.rf-resumo { flex: 1 1 240px; font-size: var(--t-xs); }
.rf-caixa .definicoes { margin: 0; }

/* Formas de fazer cripto render: quadrados iguais, e não uma lista. São oito
   mecanismos independentes, e a lista vertical sugeriria uma ordem de
   preferência que não existe — staking não é "melhor" que empréstimo, é outra
   coisa com outro risco. A grade diz isso pela forma. */
/* **Todos os temas numa linha só.**
 *
 * Com `auto-fit` e 150px de mínimo, oito quadrados quebravam em 7 + 1 — e o
 * único da segunda linha parecia uma sobra, não um item igual aos outros. A
 * quebra também dava a impressão de que os sete primeiros formavam um grupo.
 *
 * `auto-fit` vira contagem fixa: eles dividem a largura disponível, seja qual
 * for. Abaixo de 900px a linha única deixa de caber sem espremer, e aí a
 * quebra é a resposta certa. */
/* **O quadrado tem tamanho próprio; a grade só o centraliza.**
 *
 * Com `1fr` por coluna, três tipos de renda fixa dividiam a largura inteira e o
 * `aspect-ratio` os transformava em três retângulos de meia tela, quase vazios.
 * O número de colunas dizia quantos cabem por linha, e acabava mandando também
 * no tamanho de cada um — duas decisões presas numa.
 *
 * Separadas: a coluna tem largura fixa, e o que sobra vira margem dos dois
 * lados. Oito temas ou três tipos, o quadrado é o mesmo. */
.rend-grade {
  display: grid;
  grid-template-columns: repeat(var(--rend-colunas, 8), 118px);
  justify-content: center;
  gap: 8px;
}
@media (max-width: 900px) {
  .rend-grade { grid-template-columns: repeat(auto-fit, 110px); }
}
.rend-quadro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: inherit;
  /* Menor que o resto: são oito numa linha, e o nome precisa caber sem
     reticências num quadrado que agora tem um oitavo da largura. */
  font-size: var(--t-xs);
  line-height: 1.15;
  transition: border-color .15s, transform .15s;
}
.rend-quadro:hover { border-color: var(--info); transform: translateY(-2px); }
.rend-icone { font-size: 20px; line-height: 1; }
.rend-resumo { margin: 0 0 var(--s3); font-size: var(--t-sm); }
.rend-corpo { display: grid; gap: var(--s3); }
.rend-secao p { margin: 2px 0 0; font-size: var(--t-sm); }
.rend-rotulo {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fg-3);
}

/* Lista de carteiras: compacta, para caber inteira sem rolagem. Quem chega
   aqui sabe qual usa e quer achá-la — o detalhe fica na dica, ao passar o
   mouse, em vez de ocupar a tela para todo mundo. */
.cw-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.cw-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: inherit;
  font-size: var(--t-sm);
  text-align: left;
  /* Era `default`. Virou botão: clicar mostra o cuidado específico da carteira
     e leva o cursor ao campo de conexão — e o ponteiro precisa dizer isso
     antes do clique. */
  cursor: pointer;
  width: 100%;
}
.cw-item:hover { border-color: var(--info); }
.cw-item:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.cw-detalhe { margin-top: var(--s3); }
/* Monograma na cor da carteira — não é o logotipo dela. Ele só precisa dar
   âncora visual para achar a sua na lista. */
.cw-marca {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.cw-nome { flex: 1; }

/* O alternador de modo, encostado no canto do título — perto do conteúdo que
   ele muda, e fora do caminho de quem só quer ler. */
.rf-alternar {
  float: right;
  display: inline-flex;
  gap: 4px;
}
.btn.rf-modo {
  padding: 2px 9px;
  font-size: var(--t-sm);
  line-height: 1.4;
}
/* O nome quebra em até três linhas sem estourar o quadrado — "Títulos
   tokenizados (RWA)" e "LC — Letra de Câmbio" não cabem em uma. */
.rend-quadro b {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Avisos e regras: a borda esquerda diz a natureza do item antes do texto —
   o que o sistema faz, o que ele recusa, como trata dado, o que você precisa
   saber. Numa página de vinte e duas regras, é o que permite varrer. */
.regra {
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--linha);
  border-left-width: 3px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2);
  font-size: var(--t-sm);
}
.regra-faz { border-left-color: var(--up); }
.regra-nao { border-left-color: var(--down); }
.regra-dado { border-left-color: var(--info); }
.regra-aviso { border-left-color: var(--warn, var(--info)); }
.regra-titulo { margin-bottom: 6px; }
.regra-oque { margin: 0 0 8px; }
.regra-linha {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--linha);
  font-size: var(--t-xs);
}
.regra-linha p { margin: 0; }
.regra-rotulo {
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fg-3);
}

/* Alocação sugerida: a barra dá a proporção de relance, que é o que se lê numa
   sugestão — o número exato importa depois, na hora de executar. */
.pf-barra {
  flex: 1;
  height: 8px;
  min-width: 90px;
  border-radius: 4px;
  background: var(--surface-3, var(--surface-2));
  overflow: hidden;
}
.pf-parte { height: 100%; background: var(--info); }

/* --- Renda fixa no painel ---------------------------------------------------
 * Barra proporcional em vez de gráfico: a pergunta é "quanto de cada tipo",
 * e uma barra responde no tamanho de uma linha de texto. */
.rf-lista { display:flex; flex-direction:column; gap:var(--s3); }
.rf-grupo { border-left:2px solid var(--line); padding-left:var(--s3); }
.rf-cab { display:flex; justify-content:space-between; align-items:baseline;
          gap:var(--s2); }
.rf-titulo { font-size:var(--t-sm); font-weight:600; display:flex;
             align-items:center; gap:var(--s2); flex-wrap:wrap; }
.rf-peso { font-size:var(--t-xs); color:var(--fg-3); font-variant-numeric:tabular-nums; }
.rf-barra { height:3px; background:var(--line); border-radius:2px;
            margin:var(--s2) 0; overflow:hidden; }
.rf-barra > span { display:block; height:100%; background:var(--accent); }
.rf-total { font-size:var(--t-sm); font-variant-numeric:tabular-nums;
            display:flex; gap:var(--s2); flex-wrap:wrap; align-items:baseline; }
.rf-total .up { color:var(--up); } .rf-total .down { color:var(--down); }
.rf-item { display:flex; justify-content:space-between; gap:var(--s2);
           font-size:var(--t-xs); color:var(--fg-2); padding-top:2px; }
.rf-item .rf-val { font-variant-numeric:tabular-nums; }

/* --- Concentração e risco ---------------------------------------------------
 * A barra é multiplicada por 3 no HTML: pesos de 5% a 25% ocupariam uma faixa
 * invisível numa escala de 0 a 100, e a comparação entre eles é o ponto. */
.cc-lista { display:flex; flex-direction:column; gap:var(--s2); }
.cc-linha { display:grid; grid-template-columns:minmax(0,1fr) 2fr auto;
            gap:var(--s3); align-items:center; font-size:var(--t-sm); }
.cc-nome { display:flex; gap:var(--s2); align-items:baseline; min-width:0;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-nome .muted { font-size:var(--t-xs); }
.cc-barra { height:6px; background:var(--line); border-radius:3px; overflow:hidden; }
.cc-barra > span { display:block; height:100%; background:var(--accent); }
.cc-peso { font-variant-numeric:tabular-nums; font-size:var(--t-sm);
           color:var(--fg-2); }
@media (max-width:640px) {
  .cc-linha { grid-template-columns:minmax(0,1fr) auto; }
  .cc-barra { grid-column:1 / -1; }
}

/* --- Roteiro da declaração: o único bloco com rolagem própria ---------------
 * Quinze fichas com todos os itens de cada uma ocupam três telas. O cabeçalho
 * fica fora da área rolável para que a regra continue visível no meio da
 * lista — um aviso que sai de cena junto com o conteúdo deixa de avisar. */
.ir-rolagem {
  max-height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--s2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* --- Com quanto entrar: a configuração de ordem -----------------------------
 * Duas grades de quatro: a primeira é a ordem (preços e quantidade), a
 * segunda é o dinheiro (o que sai, o que se arrisca, o que se busca). Separar
 * as duas é o que faz o operador ler o risco antes do ganho. */
.pl-linha { border:1px solid var(--line); border-radius:var(--r-md);
            padding:var(--s3); margin-bottom:var(--s3); }
.pl-cab { display:flex; justify-content:space-between; align-items:baseline;
          gap:var(--s2); margin-bottom:var(--s2); }
.pl-nome { display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap; }
.pl-nome .muted { font-size:var(--t-xs); }
.pl-grade { display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
            gap:var(--s2); margin-bottom:var(--s2); }
.pl-grade > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pl-grade .k { font-size:var(--t-xs); color:var(--fg-3);
               text-transform:uppercase; letter-spacing:.4px; }
.pl-grade b { font-variant-numeric:tabular-nums; font-size:var(--t-sm); }
.pl-grade b.up { color:var(--up); } .pl-grade b.down { color:var(--down); }
.pl-porque { font-size:var(--t-xs); color:var(--fg-2); margin:var(--s2) 0 0; }
.pl-invalida { font-size:var(--t-xs); color:var(--fg-2); margin:4px 0 0; }
.pl-fora { font-size:var(--t-xs); color:var(--fg-3); padding:3px 0; }
@media (max-width:720px) {
  .pl-grade { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* --- Escolher a administradora de consórcio -------------------------------- */
.adm-sec { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.6px;
           color:var(--fg-3); margin:var(--s4) 0 var(--s2); }
.adm-ficha { border:1px solid var(--line); border-radius:var(--r-md);
             padding:var(--s2) var(--s3); margin-bottom:var(--s2); }
.adm-ficha > summary { cursor:pointer; display:flex; justify-content:space-between;
                       align-items:baseline; gap:var(--s2); }
.adm-nome { font-size:var(--t-sm); }
.adm-pontos { font-variant-numeric:tabular-nums; font-size:var(--t-sm);
              color:var(--fg-2); }
.adm-pontos .muted { font-size:var(--t-xs); }
.adm-criterio { padding:var(--s2) 0; border-top:1px solid var(--line); }
.adm-criterio-cab { display:flex; gap:var(--s2); align-items:baseline;
                    flex-wrap:wrap; font-size:var(--t-sm); }
.adm-criterio p { font-size:var(--t-xs); color:var(--fg-2); margin:4px 0 0; }

/* --- Conexões: a explicação numerada --------------------------------------
 * Quatro passos numerados em vez de um parágrafo corrido. O operador relatou
 * não entender para que a tela serve, e texto denso sobre um assunto que já
 * é abstrato é lido na diagonal ou não é lido. */
.conx-para-que { display:flex; flex-direction:column; gap:var(--s3);
                 margin:var(--s3) 0; }
.conx-item { display:flex; gap:var(--s3); align-items:flex-start; }
.conx-num { flex:0 0 24px; height:24px; border-radius:50%;
            background:var(--line); color:var(--fg-2); display:flex;
            align-items:center; justify-content:center;
            font-size:var(--t-xs); font-weight:600; }
.conx-item strong { font-size:var(--t-sm); display:block; }
.conx-item p { font-size:var(--t-sm); color:var(--fg-2); margin:4px 0 0;
               line-height:1.55; }

/* --- Modelos locais --------------------------------------------------------- */
.loc-servidor { border:1px solid var(--line); border-radius:var(--r-md);
                padding:var(--s2) var(--s3); margin-bottom:var(--s2); }
.loc-cab { display:flex; justify-content:space-between; align-items:baseline;
           gap:var(--s2); font-size:var(--t-sm); }
.loc-modelo { display:flex; justify-content:space-between; gap:var(--s2);
              font-size:var(--t-xs); padding:3px 0; }
.loc-id { font-family:var(--mono, monospace); }
.loc-aviso { font-size:var(--t-xs); color:var(--fg-3); margin:var(--s2) 0 0; }

/* --- Preço-teto ------------------------------------------------------------- */
.tt-lista { display:flex; flex-direction:column; gap:2px; }
.tt-linha { display:grid; grid-template-columns:minmax(0,1.6fr) auto auto 64px;
            gap:var(--s3); align-items:baseline; padding:5px var(--s2);
            border-radius:var(--r-sm); font-size:var(--t-sm); }
.tt-dentro { background:color-mix(in srgb, var(--up) 8%, transparent); }
.tt-nome { display:flex; gap:var(--s2); align-items:baseline; min-width:0;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-nome .muted { font-size:var(--t-xs); }
.tt-num { font-variant-numeric:tabular-nums; text-align:right;
          display:flex; flex-direction:column; align-items:flex-end; }
.tt-num .k { font-size:var(--t-xs); color:var(--fg-3); text-transform:uppercase;
             letter-spacing:.4px; }
.tt-dist { font-variant-numeric:tabular-nums; text-align:right;
           font-size:var(--t-sm); }
.tt-dist.up { color:var(--up); } .tt-dist.down { color:var(--down); }
@media (max-width:640px) {
  .tt-linha { grid-template-columns:minmax(0,1fr) auto auto; }
  .tt-dist { grid-column:1 / -1; text-align:left; }
}

/* --- Nota de decisão e exportação -------------------------------------------- */
.nt-nota { border-left:2px solid var(--line); padding:var(--s2) 0 var(--s2) var(--s3);
           margin-bottom:var(--s2); }
.nt-cab { display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap;
          font-size:var(--t-sm); margin-bottom:var(--s2); }
.nt-cab .muted { font-size:var(--t-xs); }
.nt-campo { margin-bottom:4px; }
.nt-campo .k { font-size:var(--t-xs); color:var(--fg-3); text-transform:uppercase;
               letter-spacing:.4px; }
.nt-campo p { font-size:var(--t-sm); color:var(--fg-2); margin:2px 0 0;
              white-space:pre-wrap; }
.exp-linha { display:flex; justify-content:space-between; align-items:center;
             gap:var(--s3); padding:var(--s2) 0;
             border-bottom:1px solid var(--line); flex-wrap:wrap; }
.exp-linha:last-of-type { border-bottom:none; }

/* --- Onde a IA é usada ------------------------------------------------------ */
.ou-sec { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.6px;
          color:var(--fg-3); margin:var(--s4) 0 var(--s2); }
.ou-uso { border:1px solid var(--line); border-radius:var(--r-md);
          padding:var(--s2) var(--s3); margin-bottom:var(--s2); }
.ou-cab { display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap;
          justify-content:space-between; font-size:var(--t-sm); }
.ou-campo { margin-top:var(--s2); }
.ou-campo .k { font-size:var(--t-xs); color:var(--fg-3); text-transform:uppercase;
               letter-spacing:.4px; }
.ou-campo p { font-size:var(--t-sm); color:var(--fg-2); margin:2px 0 0; }

/* --- A Mesa ------------------------------------------------------------------
 *
 * Uma conversa dentro de um widget, e não uma tela de chat. A diferença que
 * isso impõe: a altura é limitada e a rolagem é interna, senão uma resposta de
 * research com tabela empurraria as outras oito caixas da aba para baixo da
 * dobra a cada pergunta. */
.mesa-topo { display:flex; gap:var(--s2); align-items:center;
             margin-bottom:var(--s3); flex-wrap:wrap; }
.mesa-topo .fld { flex:1; min-width:180px; }

.mesa-conversa { max-height:52vh; overflow-y:auto; display:flex;
                 flex-direction:column; gap:var(--s3);
                 padding-right:var(--s2); }

.mesa-fala { border-radius:var(--r-md); padding:var(--s2) var(--s3);
             font-size:var(--t-sm); line-height:1.55; }
/* A fala do titular é curta e alinhada à direita; a da Mesa ocupa a largura,
 * porque tabela não cabe em balão. */
.mesa-eu { align-self:flex-end; max-width:82%; background:var(--surface-3);
           color:var(--fg); }
.mesa-ela { background:var(--surface-2); border:1px solid var(--line); }
.mesa-recusa { border-color:var(--line-strong); }
.mesa-ela p { margin:0 0 var(--s2); color:var(--fg-2); }
.mesa-ela p:last-child { margin-bottom:0; }
.mesa-tit { color:var(--fg) !important; font-weight:600; margin-top:var(--s3); }
.mesa-item { padding-left:var(--s3); position:relative; }
.mesa-item::before { content:"·"; position:absolute; left:6px;
                     color:var(--fg-3); }
/* A tabela nasce da resposta, e por isso ela é estilizada aqui e não numa
 * classe compartilhada: `.tab` não existe no resto do sistema, e inventar uma
 * regra global a partir de um caso só produziria estilo que ninguém sabe de
 * onde veio. */
.mesa-ela table.tab {
  margin:var(--s2) 0; font-size:var(--t-xs); width:100%;
  border-collapse:collapse; font-variant-numeric:tabular-nums;
}
.mesa-ela table.tab th, .mesa-ela table.tab td {
  padding:5px var(--s2); text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line);
}
.mesa-ela table.tab th {
  color:var(--fg-3); font-weight:600; text-transform:uppercase;
  letter-spacing:.4px; white-space:nowrap;
}
.mesa-ela table.tab td { color:var(--fg-2); }
.mesa-ela table.tab tr:last-child td { border-bottom:0; }

.mesa-envio { display:flex; gap:var(--s2); align-items:flex-end;
              margin-top:var(--s3); }
.mesa-envio textarea { flex:1; resize:vertical; min-height:44px;
                       font-family:inherit; }

/* --- A caixa que declara o escopo, e por isso é a mais alta ------------------
 *
 * **"1/1" é a largura inteira, e é ela que remove o teto.** A regra logo acima
 * tira `max-height` de todo bloco de largura cheia, e a razão dela é boa: sem
 * vizinha na linha, o teto só esconderia atrás de uma barra o conteúdo que tem
 * a tela toda para ser lido.
 *
 * "O universo observado" é a exceção, e o motivo é o que ela contém. As outras
 * caixas de largura cheia mostram um gráfico ou uma tabela com um número de
 * linhas que o dia decide; esta **declara tudo o que a varredura acompanha** —
 * cada ativo, cada fonte, cada frequência —, e essa lista só cresce. Em 1/1
 * ela empurrava as caixas seguintes para tão longe que a aba parecia terminar
 * ali.
 *
 * O teto é o mesmo das demais e a rolagem é interna: nada do que ela declara
 * some, e o escopo continua conferível linha a linha. Cortar o conteúdo seria
 * desmentir a própria caixa.
 *
 * No celular a exceção não vale — a regra de baixo continua mandando. Rolagem
 * dentro de rolagem é das piores coisas de usar num toque, e ali toda caixa já
 * ocupa a linha inteira. */
.widget[data-widget="universo"][data-span="3"] {
  max-height: var(--widget-altura);
}
.widget[data-widget="universo"][data-span="3"] > .widget-corpo {
  overflow-y: auto;
}

@media (max-width: 720px) {
  .widget[data-widget="universo"][data-span="3"] { max-height: none; }
  .widget[data-widget="universo"][data-span="3"] > .widget-corpo {
    overflow-y: visible;
  }
}

/* --- A chave de liga e desliga -----------------------------------------------
 *
 * Um botão, não um `<input type=checkbox>`: o que se quer é o desenho de
 * interruptor, e `role="switch"` já entrega a semântica correta a quem usa
 * leitor de tela — com a vantagem de o estado morar num só lugar,
 * `aria-checked`, em vez de espalhado entre a propriedade do input e a classe
 * do CSS, que é como esses dois costumam divergir. */
.chave-linha {
  display: flex; align-items: flex-start; gap: var(--s3);
  justify-content: space-between;
}
.chave-nome { font-size: var(--t-sm); color: var(--fg); }
.chave-sub {
  font-size: var(--t-xs); color: var(--fg-3);
  margin-top: 2px; max-width: 62ch;
}

.chave {
  flex: none; width: 44px; height: 26px; padding: 3px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface-3); cursor: pointer;
  display: flex; align-items: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.chave-bolha {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fg-3); display: block;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.chave.on { background: var(--accent); border-color: var(--accent); }
.chave.on .chave-bolha { transform: translateX(18px); background: #fff; }
.chave:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A chamada e o selo do painel lateral da entrada. Ela vende; a lista prova. */
.ent-chamada {
  font-size: var(--t-sm); color: var(--fg-2); line-height: 1.6;
  margin: 0 0 var(--s4); max-width: 46ch;
}
.ent-selo {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--fg-3); line-height: 1.7;
}

/* --- Manual: o quadro a quadro -----------------------------------------------
 *
 * A terceira linha de cada caixa — de onde vem o dado — recebe tratamento
 * próprio porque é a que dá ao manual a natureza de documento conferível: sem
 * ela, ele seria uma lista de funcionalidades. */
.man-caixas { margin-top: var(--s4); }
.man-caixas > .titulo {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .6px;
  color: var(--fg-3); margin-bottom: var(--s2);
}
.man-caixa {
  border-left: 2px solid var(--line-strong); padding: var(--s2) 0 var(--s2) var(--s3);
  margin-bottom: var(--s2);
}
.man-caixa b { font-size: var(--t-sm); color: var(--fg); }
.man-caixa p {
  margin: 3px 0 0; font-size: var(--t-sm); color: var(--fg-2); line-height: 1.6;
}
.man-origem { color: var(--fg-3) !important; font-size: var(--t-xs) !important; }
.man-origem span {
  display: inline-block; margin-right: 6px; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 999px;
  text-transform: uppercase; letter-spacing: .4px; font-size: 9px;
}

/* --- O mapa da IA, com teto ---------------------------------------------------
 *
 * São oito usos e quatro recusas, cada um com quatro campos. Aberto por
 * inteiro, o bloco tem mais de duas telas de altura e empurra o rodapé para
 * longe — quem só queria conferir um item precisa rolar a página toda de volta.
 * O teto o mantém do tamanho de uma leitura, e a rolagem é dele. */
#caixaOnde > .card {
  max-height: 60vh; overflow-y: auto;
}
@media (max-width: 720px) {
  /* No telefone a caixa já ocupa a largura toda e rolagem dentro de rolagem é
     das piores coisas de usar num toque. */
  #caixaOnde > .card { max-height: none; overflow-y: visible; }
}

/* --- Renda fixa: suas aplicações ---------------------------------------------
 *
 * Cada linha responde três coisas na ordem em que se pergunta: quanto entrou,
 * quanto rendeu, quanto vale hoje. A regra usada fica embaixo, em letra menor —
 * ela é o que torna o número conferível, e quem já confia não precisa relê-la
 * a cada linha. */
.rf-totais {
  display: flex; gap: var(--s5); flex-wrap: wrap;
  padding-bottom: var(--s3); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.rf-totais > span { display: flex; flex-direction: column; }
.rf-totais small, .rf-conta small {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--fg-3);
}
.rf-totais b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }

.rf-linha { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.rf-linha:last-of-type { border-bottom: 0; }
.rf-quem {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-bottom: 6px;
}
.rf-conta {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  font-variant-numeric: tabular-nums; font-size: var(--t-sm);
}
.rf-conta > span { display: flex; flex-direction: column; }
.rf-semconta {
  color: var(--fg-3); font-size: var(--t-xs); max-width: 64ch;
  line-height: 1.5;
}
.rf-como {
  margin: 6px 0 0; font-size: var(--t-xs); color: var(--fg-3); line-height: 1.5;
}

/* --- A cascata da renda fixa -------------------------------------------------
 *
 * Três passos empilhados, cada um abrindo o seguinte. A explicação fica ao lado
 * do passo — e não num modal: modal esconde o caminho percorrido, e aqui o
 * caminho é metade da informação. */
.rf-cascata { display: flex; flex-direction: column; gap: var(--s4); }

.rf-passo-cab { display: flex; gap: var(--s3); align-items: flex-start; }
.rf-numero {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--t-xs);
  background: var(--accent); color: #fff; font-weight: 600;
}
.rf-passo-cab b { display: block; font-size: var(--t-md); }
.rf-passo-cab span {
  display: block; font-size: var(--t-sm); color: var(--fg-2);
  line-height: 1.6; margin-top: 3px; max-width: 78ch;
}
.rf-opcoes {
  display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3);
}
.rf-opcoes .rend-quadro { flex: 0 1 auto; min-width: 132px; }
/* O escolhido fica aceso: sem isso, descer a página perde o rastro da decisão. */
.rf-opcoes .rend-quadro.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.rf-explica {
  border-left: 3px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2); padding: var(--s4);
}
.rf-explica h3 {
  margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--fg-3);
  font-weight: 500;
}
.rf-explica .rf-nome { color: var(--fg); font-weight: 600; }
.rf-secao { margin-bottom: var(--s3); }
.rf-secao:last-of-type { margin-bottom: 0; }
.rf-rotulo {
  display: inline-block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fg-3); margin-bottom: 2px;
}
.rf-secao p {
  margin: 0; font-size: var(--t-sm); color: var(--fg-2); line-height: 1.65;
  max-width: 82ch;
}
.rf-fgc {
  margin: var(--s3) 0 0; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--t-xs); color: var(--fg-2); line-height: 1.6;
}
.rf-convite {
  margin: 0; padding: var(--s3);
  font-size: var(--t-sm); color: var(--fg-3); line-height: 1.6;
  border: 1px dashed var(--line); border-radius: var(--r-md);
}

.rf-acoes { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
.rf-acoes .btn { padding: 3px 10px; font-size: var(--t-xs); }
.rf-form {
  display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap;
  margin-top: var(--s3); padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}

/* A faixa de referência de cada papel. Ela orienta a leitura de uma oferta —
   e diz, em letra visível, que é referência e não oferta. */
.rf-comparar {
  margin-top: var(--s3); padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.rf-faixa {
  margin: 2px 0 var(--s2); font-size: var(--t-sm); color: var(--fg);
  line-height: 1.6;
}
.rf-olhar, .rf-onde {
  margin: 0 0 var(--s2); font-size: var(--t-sm); color: var(--fg-2);
  line-height: 1.6;
}
.rf-onde a { color: var(--accent); }

/* --- Fluxo de caixa -----------------------------------------------------------
 *
 * Três números no topo, na ordem em que se pergunta: o que entra este mês, o
 * que entra no ano, e o próximo. Depois a lista por mês, e no fim de onde vem.
 * A marca de "devolução" existe porque amortização entra na conta e não é
 * ganho — sem ela, o total do ano vira um número que ninguém pode gastar. */
.fx-topo {
  display: flex; gap: var(--s5); flex-wrap: wrap;
  padding-bottom: var(--s3); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.fx-topo > div { display: flex; flex-direction: column; min-width: 150px; }
.fx-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--fg-3);
}
.fx-topo b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.fx-n { font-size: var(--t-xs); color: var(--fg-3); }

.fx-mes { margin-bottom: var(--s3); }
.fx-mes-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 5px; border-bottom: 1px solid var(--line);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .5px;
  color: var(--fg-3);
}
.fx-mes-cab b {
  font-size: var(--t-sm); color: var(--fg); text-transform: none;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.fx-linha {
  display: grid; gap: var(--s2); align-items: baseline;
  grid-template-columns: 46px 96px 1fr 1.4fr auto;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.fx-linha:last-child { border-bottom: 0; }
.fx-dia { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.fx-valor { font-variant-numeric: tabular-nums; }
.fx-ativo { color: var(--fg-2); }
.fx-tipo { color: var(--fg-2); font-size: var(--t-xs); }
.fx-estado { font-size: var(--t-xs); color: var(--fg-3); text-align: right; }
.fx-cancelado { opacity: .45; text-decoration: line-through; }

.fx-origem { margin-top: var(--s4); }
.fx-origem-linha {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.fx-origem-linha:last-child { border-bottom: 0; }
.fx-origem-linha b { font-variant-numeric: tabular-nums; }

.fx-historico {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line-strong);
}

@media (max-width: 720px) {
  .fx-linha { grid-template-columns: 44px 1fr; row-gap: 2px; }
  .fx-tipo, .fx-estado { grid-column: 2; text-align: left; }
}

/* Onde está seu dinheiro: o patrimônio por carteira.
 *
 * **Grade e não tabela.** Uma tabela precisaria de cabeçalho para quatro
 * colunas curtas, e o cabeçalho ocuparia a altura de uma linha inteira para
 * rotular números que já se explicam pelo próprio rótulo embaixo. Em telas
 * estreitas as colunas empilham sozinhas. */
.pc-linha {
  display: grid; align-items: center; gap: var(--s3);
  grid-template-columns: minmax(9rem, 1.4fr) minmax(4rem, 1fr) repeat(3, auto);
  padding: var(--s2) var(--s2); border-radius: var(--r-sm);
  cursor: pointer; transition: background .12s var(--ease);
}
.pc-linha:hover { background: var(--surface-2); }
.pc-nome { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-nome .muted { font-size: var(--t-xs); }
.pc-nome strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pc-barra { height: 6px; border-radius: 3px; background: var(--surface-3);
  overflow: hidden; }
.pc-barra > span { display: block; height: 100%; background: var(--versao-light); }
:root[data-versao="pro"] .pc-barra > span { background: var(--versao-pro); }

.pc-num { display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; font-size: var(--t-sm); white-space: nowrap; }
.pc-num .muted { font-size: var(--t-xs); }

/* Os ativos de dentro: recuados, para a hierarquia ficar óbvia sem moldura. */
.pc-itens { padding: 0 var(--s2) var(--s2) var(--s4);
  border-left: 2px solid var(--line); margin: 0 0 var(--s2) var(--s2); }
.pc-item { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3);
  padding: 2px 0; font-size: var(--t-sm); }

@media (max-width: 720px) {
  .pc-linha { grid-template-columns: 1fr 1fr; }
  .pc-barra { grid-column: 1 / -1; }
}

/* --- Carteiras em cartões ---------------------------------------------------
 *
 * **Lista dizia tudo e não mostrava nada.** Nome, valor e dois botões na mesma
 * linha obrigam a ler para comparar, e o olho não pousa. Em cartão o valor é o
 * elemento maior, a barra dá a proporção sem número e o resultado tem cor —
 * três leituras antes da primeira palavra.
 *
 * `auto-fill` com mínimo em `rem`: quatro carteiras ocupam a linha, oito
 * quebram sozinhas, e em tela estreita vira uma coluna sem media query.
 * Colunas fixas dariam cartões espremidos com sete e gigantes com dois.
 *
 * **Retrato, e não paisagem.** O cartão é mais alto que largo porque o que ele
 * mostra é uma pilha — nome, lugar, valor, proporção, resultado — e não uma
 * linha. Deitado, sobrava faixa vazia à direita do valor e os cartões
 * pareciam a mesma lista de antes com borda em volta. */
.ct-grade {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  margin-top: var(--s3);
}

.ct-cartao {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; min-height: 15.5rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.ct-cartao:hover { border-color: var(--line-strong); background: var(--surface-3); }
/* A faixa identifica a guarda — banco, corretora, exchange, carteira fria —
   sem gastar uma linha de texto com o nome dela. Mesma ideia da faixa de
   classe nos quadros de Ativos, e de propósito: são a mesma pergunta. */
.ct-cartao::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--cor-classe, var(--line-strong)); z-index: 1;
}
/* A carteira aberta ganha a cor da versão: é a mesma marca do item de menu
   ativo, e repetir a linguagem poupa uma convenção nova. */
.ct-cartao.on { border-color: var(--versao-light); }
:root[data-versao="pro"] .ct-cartao.on { border-color: var(--versao-pro); }

/* O corpo inteiro é o alvo do clique — um cartão que só abre pelo título faz a
   pessoa caçar o ponto sensível. */
.ct-corpo {
  display: flex; flex-direction: column; gap: 0; flex: 1;
  width: 100%; padding: var(--s3) var(--s3) var(--s2); border: 0;
  background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.ct-onde { color: var(--fg-3); font-size: var(--t-xs); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin-bottom: var(--s2); }

/* --- A composição, no lugar do vão ------------------------------------------
 *
 * Entre o nome e o valor sobrava uma faixa vazia. Ela não podia virar gráfico
 * de evolução: não há série diária de patrimônio guardada, e a linha teria de
 * ser inventada entre o custo e a cotação de hoje. O que cabe ali com dado de
 * verdade é o que a carteira tem dentro.
 *
 * `margin-top: auto` acima do valor mantém o bloco do mesmo tamanho com uma
 * classe ou com seis: a composição fica logo abaixo do nome e o valor
 * continua ancorado no pé. */
.ct-mix {
  display: flex; height: 6px; border-radius: var(--r-full);
  overflow: hidden; background: var(--surface-3); gap: 1px;
}
.ct-mix > span { display: block; height: 100%; opacity: .85; }
.ct-mix-leg {
  display: flex; flex-wrap: wrap; gap: 2px var(--s2); margin-top: 5px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--fg-3);
}
.ct-mix-leg span { display: inline-flex; align-items: center; gap: 4px; }
.ct-mix-leg i {
  width: 6px; height: 6px; border-radius: 2px; display: inline-block;
}
/* Posição estrangeira que ficou fora do total precisa aparecer: somada como
   zero, ela sumiria calada — e o cartão diria um patrimônio menor com cara de
   número certo. */
.ct-sem-cambio {
  display: block; margin-top: 4px; font-size: 9px; color: var(--warn, #f59e0b);
  text-transform: uppercase; letter-spacing: .4px;
}
.ct-mix-vazio {
  font-size: var(--t-xs); color: var(--fg-3); font-style: italic;
}

/* O valor é o maior elemento: é a resposta que a pessoa veio buscar. `auto`
   acima dele empurra tudo para o pé, e `anywhere` porque R$ 1.234.567,89 não
   cabe em 12,5rem — sem ele o número vazaria a borda em vez de quebrar. */
.ct-cartao .quadro-valor { margin-top: auto; overflow-wrap: anywhere; }

.ct-acoes { display: flex; gap: var(--s2); padding: 0 var(--s3) var(--s3);
  flex-wrap: wrap; }
.ct-acoes .btn { font-size: var(--t-xs); padding: 4px 10px; }

/* O conteúdo da carteira aberta fica fora da grade: dentro dela, esticaria a
   linha inteira e empurraria as vizinhas. */
.ct-dentro { margin-top: var(--s3); padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); }
.ct-item { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3);
  padding: 4px 0; font-size: var(--t-sm); }
.ct-form { margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--line); }

/* --- e-Book: o material de quem está começando ------------------------------
 *
 * **Texto para ler, e não para consultar.** O resto do sistema é feito de
 * números em colunas e caixas densas — aqui a medida é outra: linha curta,
 * entrelinha larga, e um limite de largura, porque linha de cem caracteres faz
 * o olho perder o começo da seguinte. É a única tela do sistema onde a pessoa
 * lê parágrafos inteiros, e tratá-la como as outras seria pedir que ela não
 * lesse.
 *
 * **A cor é por capítulo, e ela é funcional.** Nove capítulos numa grade
 * cinzenta viram nove retângulos iguais; com uma cor por assunto, a pessoa
 * volta ao que estava lendo sem reler os títulos. O tom aparece na faixa, no
 * número, no halo do cartão e na régua lateral do texto aberto — sempre como
 * marcação, nunca como fundo de bloco inteiro, que cansaria numa tela de
 * leitura longa.
 *
 * **Toda tinta é aplicada por opacidade sobre a cor do capítulo**, em
 * pseudo-elementos, e não por mistura de cores no CSS. Assim o mesmo código
 * funciona no tema claro e no escuro sem uma segunda paleta — e sem depender
 * de `color-mix`, que nem todo navegador em uso entrega.
 */
.eb-busca {
  max-width: 16rem; height: 30px; font-size: var(--t-sm);
}

/* --- A capa ---------------------------------------------------------------- */

.eb-capa {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
/* O halo: um brilho frio no canto, que dá o tom "futurista" sem escurecer nem
   clarear o fundo — ele é desenhado por cima, com opacidade baixa. */
.eb-capa::before {
  content: ""; position: absolute; inset: -60% 55% 30% -10%;
  background: radial-gradient(closest-side,
    var(--versao-light) 0%, transparent 100%);
  opacity: .16; pointer-events: none;
}
:root[data-versao="pro"] .eb-capa::before { background: radial-gradient(
  closest-side, var(--versao-pro) 0%, transparent 100%); }

.eb-capa > * { position: relative; }

.eb-capa h2 {
  font-size: 26px; letter-spacing: -.4px; margin-bottom: var(--s3);
}
.eb-capa .eb-abertura {
  font-size: var(--t-lg); line-height: 1.65; max-width: 46rem;
  margin: 0 0 var(--s4); color: var(--fg-2);
}
.eb-capa .eb-aviso {
  margin: 0; font-size: var(--t-xs); color: var(--fg-3); line-height: 1.6;
  max-width: 46rem; padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* --- O índice, em cartões --------------------------------------------------- */

.eb-indice {
  display: grid; gap: var(--s3); margin-top: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.eb-cartao {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s4) var(--s3) var(--s3);
  text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--fg); font: inherit;
  transition: border-color .16s var(--ease), transform .16s var(--ease),
              box-shadow .16s var(--ease);
}
/* A tinta do capítulo, fraca, subindo do pé para o topo. É ela que faz nove
   cartões deixarem de ser nove retângulos iguais. */
.eb-cartao::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, var(--eb-cor) 0%, transparent 62%);
  opacity: .1; transition: opacity .16s var(--ease);
}
/* A faixa superior: a marcação mais nítida, e a única em cor cheia. */
.eb-cartao::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--eb-cor);
}
.eb-cartao:hover {
  border-color: var(--eb-cor);
  transform: translateY(-2px);
}
.eb-cartao:hover::before { opacity: .2; }
.eb-cartao.on {
  border-color: var(--eb-cor);
}
.eb-cartao.on::before { opacity: .22; }

.eb-num {
  font-size: var(--t-xs); font-weight: 700; color: var(--eb-cor);
  letter-spacing: 1.5px; font-variant-numeric: tabular-nums;
}
.eb-titulo {
  font-size: var(--t-lg); font-weight: 700; line-height: 1.25;
  letter-spacing: -.2px;
}
.eb-resumo {
  font-size: var(--t-sm); color: var(--fg-2); line-height: 1.5;
  margin-top: 4px;
}
.eb-pe {
  margin-top: auto; padding-top: var(--s3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); font-size: 9px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--fg-3);
}
.eb-seta {
  color: var(--eb-cor); font-size: var(--t-md); line-height: 1;
  transition: transform .16s var(--ease);
}
.eb-cartao:hover .eb-seta { transform: translateX(3px); }
.eb-cartao.on .eb-seta { transform: rotate(90deg); }

/* --- O capítulo aberto ------------------------------------------------------ */

.eb-texto {
  position: relative; margin-top: var(--s4); overflow: hidden;
  border: 1px solid var(--line);
}
.eb-texto::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--eb-cor);
}
.eb-texto h2 {
  font-size: 24px; letter-spacing: -.4px; color: var(--fg);
  margin-bottom: 4px;
}
.eb-marca {
  display: inline-block; margin-bottom: var(--s2);
  font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--eb-cor);
}

/* A régua lateral em cor: marca onde cada seção começa sem gastar uma linha
   horizontal, que cortaria a leitura em fatias. */
.eb-secao {
  position: relative; max-width: 46rem; margin-bottom: var(--s5);
  padding-left: var(--s3); border-left: 2px solid var(--line);
  transition: border-color .16s var(--ease);
}
.eb-secao:hover { border-left-color: var(--eb-cor); }
.eb-secao:last-of-type { margin-bottom: 0; }
.eb-secao h3 {
  margin: 0 0 8px; font-size: var(--t-lg); font-weight: 700;
  color: var(--fg); letter-spacing: -.2px;
}
.eb-secao p {
  margin: 0 0 var(--s3); font-size: var(--t-md); line-height: 1.8;
  color: var(--fg-2);
}
.eb-secao p:last-child { margin-bottom: 0; }
.eb-secao strong { color: var(--fg); font-weight: 600; }

@media (max-width: 560px) {
  .eb-busca { max-width: 100%; }
  .eb-indice { grid-template-columns: 1fr; }
  .eb-capa h2, .eb-texto h2 { font-size: 20px; }
}

/* O seletor de janela, dentro do título do bloco que ele governa.
 *
 * Ele morava no cabeçalho da tela, onde parecia valer para o painel inteiro —
 * e governa um gráfico só. Aqui precisa caber ao lado de um `<h2>` sem
 * empurrá-lo: corpo pequeno, altura da linha do título, e sem crescer. */
.sel-janela {
  width: auto; height: 24px; padding: 0 22px 0 8px;
  font-size: var(--t-xs); flex: none;
}

/* O quadrado da versão Pró, na lista de usuários.
 *
 * Aceso quer dizer liberado. Usa o azul da versão Pró — o mesmo da marca ao
 * lado da logo — para que o estado se leia sem abrir a dica: quem já viu a
 * marca azul uma vez reconhece o que o botão está dizendo. */
.btn.quadrado.pro-on {
  border-color: var(--versao-pro);
  color: var(--versao-pro);
  font-weight: 700;
}

/* O botão de Layout, o terceiro quadrado da barra.
 *
 * Mesma forma do tema e da conversa — os três atravessam as telas e não
 * pertencem a nenhuma. O ícone troca de grade para visto no modo de arrumar:
 * um desenho igual nos dois estados trocaria a informação pela simetria. */
.btn-layout .visto { display: none; }
.btn-layout.arrumando .grade { display: none; }
.btn-layout.arrumando .visto { display: block; }
.btn-layout.pri {
  border-color: var(--info); color: var(--info);
}

/* O botão de reler, dentro da caixa a que ele se refere.
 *
 * **Ele morava no cabeçalho da tela e dizia respeito a um pedaço dela.** No
 * alto, parecia reler tudo; e onde a releitura é automática, era um controle
 * que não controlava nada. Fica só onde o dado não se atualiza sozinho — e
 * ali, junto do que ele atualiza.
 *
 * Discreto de propósito: é ação secundária dentro de um bloco de leitura, e
 * competir com o título tiraria a atenção do que a caixa veio dizer. */
.btn-reler {
  margin-left: auto; font-size: var(--t-xs); padding: 2px 10px;
  flex: none;
}

/* --- Plano de capital: a saúde antes da leitura -----------------------------
 *
 * **A faixa diz se o plano pede atenção sem exigir que se leia a barra.** Com
 * cinco planos na tela, descobrir qual está atrasado não deveria custar cinco
 * leituras de percentual. A cor vem do ritmo — progresso contra prazo — e é
 * calculada no JavaScript, porque depende de data.
 */
.plano-cartao {
  position: relative; overflow: hidden;
  border-left: 3px solid var(--plano-cor, var(--line-strong));
}

/* A barra de progresso com a marca de "onde deveria estar hoje".
 *
 * **A marca é o ponto inteiro deste desenho.** Barra sem ela responde "quanto
 * andei" e cala sobre "quanto do prazo já passou" — e é a segunda metade que
 * decide se há problema. */
.plano-barra {
  position: relative; height: 8px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: visible;
}
.plano-barra > i {
  display: block; height: 100%; border-radius: var(--r-full);
  transition: width .2s var(--ease);
}
.plano-barra > u {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--fg-2); border-radius: 1px;
  transform: translateX(-1px);
}
/* O traço precisa de contraste contra a barra preenchida e contra o vazio: o
   contorno na cor do fundo o separa dos dois sem precisar de uma terceira. */
.plano-barra > u::after {
  content: ""; position: absolute; inset: -1px; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--surface);
}

/* A barra de busca da caixa de recados.
 *
 * Os campos quebram em linhas conforme a largura em vez de encolherem juntos:
 * um seletor de data espremido a oitenta pixels deixa de ser usável, e é
 * melhor ocupar duas linhas do que caber mal numa. */
.rec-busca {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s3); align-items: center;
}
.rec-busca .fld { height: 30px; font-size: var(--t-sm); }
.rec-busca > input[type="text"], .rec-busca > input:not([type]) {
  flex: 1 1 16rem; min-width: 12rem;
}
.rec-busca > select { flex: 0 1 12rem; }
.rec-busca > input[type="date"] { flex: 0 1 9.5rem; }


/* --- Os degraus de acesso, na tela de usuários ------------------------------
 *
 * **Cartão e não linha de lista.** A escolha é uma só entre três, e o que
 * decide é o que cada degrau abre — que é uma lista de telas, não um rótulo.
 * Numa linha de rádio essa lista não cabe, e quem concede escolhe pelo nome
 * sem saber o que está dando. */
.nivel-cartao {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s3); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
  transition: all .12s var(--ease);
}
.nivel-cartao:hover { border-color: var(--line-strong); }
/* **Aceso por borda e realce, não por mistura de cor.** `color-mix` não chega
 * a todo navegador em uso, e misturar à mão exigiria uma segunda paleta para o
 * tema claro. Borda mais um traço interno funcionam nos dois com uma regra só. */
.nivel-cartao.on {
  border-color: var(--info);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--info);
}
.nivel-cartao input { margin: 0 0 2px; }
.nivel-cartao .nivel-nome { font-weight: 700; font-size: var(--t-md); }
.nivel-cartao .nivel-telas {
  font-size: var(--t-xs); color: var(--fg-3); line-height: 1.5;
}

/* **Um quadrado com palavra dentro deixa de ser quadrado.** Os outros levam um
 * glifo e cabem nos 26px fixos; "Atlas" não cabe, e forçá-lo cortaria a
 * palavra ao meio. A largura acompanha o texto e a altura continua a mesma, de
 * modo que a fileira segue alinhada. */
.btn.quadrado.rotulado { width: auto; padding: 0 8px; }

/* O quadrado do Atlas aceso, ao lado do da versão Pró. Roxo e não azul: os
 * dois vivem lado a lado numa fileira de cinco, e duas luzes da mesma cor
 * obrigariam a ler o rótulo para saber qual é qual. */
.btn.quadrado.atlas-on {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

/* **O acréscimo não se parece com um degrau.** Ele fica na mesma fileira dos
 * dois cartões, e um desenho idêntico faria parecer que se escolhe entre os
 * três — quando o Atlas combina com qualquer um deles. A borda tracejada e o
 * roxo dizem "mais um", e não "em vez de". */
.nivel-cartao.acrescimo { border-style: dashed; }
.nivel-cartao.acrescimo.on {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.nivel-cartao.acrescimo.on .nivel-nome { color: var(--accent); }

/* --- O guia de cada aba do Atlas ---------------------------------------------
 *
 * As explicações da aba, reunidas ao pé dela. Fechadas por padrão: o guia
 * serve para consultar, e oito seções abertas no fim da página seriam o mesmo
 * paredão que ele veio desfazer, só que embaixo. */
.guia-secao {
  border-top: 1px solid var(--line);
}
.guia-secao:first-of-type { border-top: 0; }

.guia-secao > summary {
  cursor: pointer; padding: var(--s3) 0;
  font-size: var(--t-md); font-weight: 700;
  list-style: none; display: flex; align-items: center; gap: var(--s2);
}
.guia-secao > summary::-webkit-details-marker { display: none; }

/* A seta é desenhada aqui porque o marcador nativo varia entre navegadores —
 * e num acordeão o sinal de "isto abre" não pode depender de qual deles. */
.guia-secao > summary::before {
  content: "›"; color: var(--fg-3); font-size: var(--t-lg);
  transition: transform .12s var(--ease); display: inline-block;
}
.guia-secao[open] > summary::before { transform: rotate(90deg); }
.guia-secao > summary:hover { color: var(--accent); }

.guia-corpo { padding: 0 0 var(--s4) var(--s4); }

/* As caixas que viraram seção vinham com cartão próprio; dentro do guia elas
 * perdem a moldura, senão haveria caixa dentro de caixa dentro de caixa. */
.guia-corpo .card { border: 0; padding: 0; background: none; }

/* --- As caixas do DeFi têm teto e rolam por dentro ---------------------------
 *
 * **São listas que não têm tamanho previsível.** Pools aprovadas, pools
 * recusadas, plataformas, cadeias: cada uma vem com o que o mercado tiver no
 * dia, e numa tarde qualquer uma delas passa de cinquenta linhas. Sem teto, a
 * aba vira uma coluna de dezenas de milhares de pixels e as caixas de baixo
 * deixam de existir na prática — ninguém rola até elas.
 *
 * `max-height` e não `height`: caixa curta continua curta, sem um vão embaixo.
 * O teto só age onde há o que conter. */
.widgets[data-tela="atlas.defi"] .widget-corpo {
  max-height: 32rem;
  overflow-y: auto;
}

/* O guia fica de fora: ele é um acordeão, e abrir uma seção dentro de uma
 * caixa que rola põe duas rolagens em cima uma da outra — a de dentro engole a
 * de fora e a pessoa perde o caminho de volta. */
.widgets[data-tela="atlas.defi"] .widget-corpo:has(.guia-secao) {
  max-height: none;
  overflow-y: visible;
}

/* --- Trading Office -------------------------------------------------------
 *
 * **O escritório precisa parecer um escritório, e não um formulário.** A aba
 * mostra cinco pessoas trabalhando; se elas forem linhas de tabela, o que se
 * perde não é enfeite — é a leitura periférica. Numa grade de mesas, quem
 * está em posição, quem está parado e quem foi suspenso se distinguem sem
 * ler uma palavra, e é isso que permite olhar a tela de passagem.
 *
 * **Nenhuma animação é decorativa.** Cada estado visual corresponde a um
 * estado real vindo do servidor: `IN_POSITION` pulsa porque há dinheiro
 * exposto agora, e `SUSPENDED` é opaco porque aquele agente não vai operar.
 * Uma animação que rodasse sem estado por trás ensinaria a ignorá-las todas. */

/* **Cinco colunas fixas, porque a equipe é de cinco.** Com `auto-fit`, a
 * linha cabia quatro e jogava o quinto para baixo — e o agente que sobrava
 * parecia ser de outro time. A largura mínima some: numa tela estreita as
 * mesas encolhem juntas, e abaixo de 720px a regra do celular assume. */
.of-mesas {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: var(--of-mesa-altura);
}

/* **O andar tem teto de dois escritórios, e depois rola.**
 *
 * Uma linha é o mínimo: é o que existe no primeiro dia. Duas é o máximo antes
 * da barra — com três escritórios a caixa passaria de mil pixels e empurraria
 * o ranking, o terminal e tudo o mais para fora da tela, justamente quando o
 * grupo cresceu e há mais o que acompanhar.
 *
 * A altura da linha é declarada, e não medida: sem ela, um agente com texto
 * de estado mais longo esticaria a própria linha e o teto de "duas linhas"
 * passaria a significar alturas diferentes a cada ciclo. */
/* A mesa tem 340px, e não 248: o conteúdo dela — monitor, nome, quatro linhas,
 * três linhas de estado e botões — mede uns 336px, e com 248 os botões saíam
 * cortados. */
.of-andares {
  --of-mesa-altura: 340px;
  --of-linha-altura: calc(var(--of-mesa-altura) + var(--s3));
  display: grid; gap: var(--s3);
  min-height: var(--of-linha-altura);
  max-height: calc(var(--of-linha-altura) * 2 + 42px);
  overflow-y: auto;
  padding-right: 2px;
}

.of-andar-rotulo {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm);
  padding-top: var(--s2);
}

.of-mesa {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
  transition: border-color .2s, transform .2s;
  height: 100%; min-width: 0;
}

/* Nada na mesa encolhe, a não ser o texto de estado (abaixo): sem isso, o
   monitor e as linhas cediam altura e cada mesa ficava de um jeito. */
.of-mesa > * { flex-shrink: 0; }

/* Os botões grudam no rodapé da mesa: sem isso, uma mesa com texto de estado
   curto põe os botões no meio e a linha fica com cinco alturas de botão. */
.of-mesa-acoes {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto;
  flex: none;   /* os botões nunca encolhem: quem cede espaço é o texto */
}
.of-mesa:hover { transform: translateY(-2px); }

/* A barra de cima é o estado, e a cor dela é a única coisa que muda sozinha. */
.of-mesa::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--fg-3);
}
.of-mesa[data-estado="ANALYZING"]::before { background: var(--info); }
.of-mesa[data-estado="IN_POSITION"]::before { background: var(--up); }
.of-mesa[data-estado="SUSPENDED"]::before { background: var(--down); }

.of-mesa[data-estado="IN_POSITION"] { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); }
.of-mesa[data-estado="SUSPENDED"] { opacity: .55; }

.of-monitor {
  height: 54px; border-radius: var(--r-sm);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--info) 12%, var(--surface)) 0%, var(--surface) 100%);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-3); font-family: var(--mono, monospace);
}
.of-mesa[data-estado="IN_POSITION"] .of-monitor {
  color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, var(--line));
  animation: of-pulso 2.4s ease-in-out infinite;
}
.of-mesa[data-estado="ANALYZING"] .of-monitor { color: var(--info); }

@keyframes of-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* Quem prefere menos movimento não perde informação: a cor e o texto ficam. */
@media (prefers-reduced-motion: reduce) {
  .of-mesa[data-estado="IN_POSITION"] .of-monitor { animation: none; }
  .of-mesa:hover { transform: none; }
}

.of-nome { font-weight: 600; letter-spacing: -.01em; }
.of-papel { font-size: var(--t-xs); color: var(--fg-3); text-transform: uppercase;
  letter-spacing: .06em; }
.of-linha { display: flex; justify-content: space-between; gap: var(--s2);
  font-size: var(--t-sm); }
.of-linha span:first-child { color: var(--fg-3); }
/* **O texto de estado cede, e não os botões.** Ele ocupa o espaço que sobra,
 * em até três linhas com reticências; o texto inteiro fica no tooltip. Antes,
 * um estado longo empurrava os botões para fora da mesa. */
.of-detalhe {
  font-size: var(--t-xs); color: var(--fg-2); line-height: 1.5;
  flex: 0 1 auto; min-height: 0; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3;
}

.of-terminal {
  font-family: var(--mono, ui-monospace, monospace); font-size: var(--t-xs);
  line-height: 1.7; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s2);
}
.of-terminal div { display: flex; gap: var(--s2); }
.of-terminal time { color: var(--fg-3); flex: none; }
.of-terminal .of-alerta { color: var(--down); }
.of-terminal .of-aviso { color: var(--warn); }

.of-perigo {
  border-color: var(--down) !important;
  background: color-mix(in srgb, var(--down) 8%, var(--surface-2));
}

/* --- Trading League: lista, e não tabela ----------------------------------
 *
 * **Sete colunas não sobrevivem à altura de fonte deste sistema.** Medido na
 * tela: os cabeçalhos encostavam uns nos outros, e o número acabava a seis
 * colunas do rótulo que o nomeia — quem lia precisava contar na horizontal
 * para saber o que era o quê.
 *
 * Em lista, o valor fica embaixo do próprio rótulo, as medidas quebram linha
 * sozinhas quando falta largura, e o telefone vem de graça. */

.of-liga { display: grid; gap: var(--s2); }

.of-liga-linha {
  display: flex; align-items: flex-start; gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}

/* O primeiro colocado se destaca sem precisar de medalha: a borda basta. */
.of-liga-linha:first-child {
  border-color: color-mix(in srgb, var(--up) 40%, var(--line));
}

.of-liga-pos {
  font-size: var(--t-lg); font-weight: 700; color: var(--fg-3);
  min-width: 2.2em; line-height: 1.2;
}

.of-liga-quem { min-width: 150px; flex: 0 1 auto; }

.of-liga-medidas {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4);
  flex: 1 1 320px;
}

@media (max-width: 560px) {
  .of-liga-linha { gap: var(--s2); }
  .of-liga-medidas { gap: var(--s2) var(--s3); }
}

/* --- Parâmetros que explicam a si mesmos ----------------------------------
 *
 * **O texto que só aparece ao passar o mouse não protege quem não passa o
 * mouse.** Estes campos decidem quanto dinheiro pode ser perdido por dia, e a
 * explicação deles fica visível, embaixo do campo, com um número concreto.
 *
 * Uma coluna por parâmetro, com respiro entre eles: com a altura de fonte
 * deste sistema, três campos lado a lado sem separação viram um bloco só. */

.of-params {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: var(--s3);
}

.of-param {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}

.of-param > label {
  font-weight: 600; font-size: var(--t-sm); line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}

.of-unidade {
  font-weight: 400; font-size: var(--t-xs); color: var(--fg-3);
  text-transform: none; letter-spacing: 0;
}

.of-param .fld { width: 100%; }

.of-explica {
  margin: 2px 0 0; font-size: var(--t-xs); color: var(--fg-2);
  line-height: 1.65;
}

.of-exemplo {
  margin: 0; font-size: var(--t-xs); line-height: 1.65;
  color: var(--fg-2);
  padding: 6px 8px; border-radius: var(--r-sm);
  background: var(--surface);
  border-left: 2px solid var(--info);
}

.of-padrao {
  margin: 0; font-size: var(--t-xs); color: var(--fg-3);
}

/* --- Gavetas da configuração ----------------------------------------------
 *
 * **`<details>` e não um acordeão escrito à mão.** A seta, o estado aberto, o
 * teclado e o leitor de tela vêm prontos do navegador.
 *
 * O corpo aberto tem teto e rolagem própria: a caixa de limites tem doze
 * parâmetros explicados, e sem teto ela empurra o rodapé para longe o
 * bastante para a pessoa perder de vista onde estava. */

.of-gaveta {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); margin-top: var(--s3);
}

.of-gaveta > summary {
  cursor: pointer; padding: var(--s3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  list-style: none;
}
.of-gaveta > summary::-webkit-details-marker { display: none; }

/* A seta é desenhada e gira ao abrir: o triângulo nativo some no tema escuro
   e fica diferente em cada navegador. */
.of-gaveta > summary::before {
  content: "▸"; color: var(--fg-3); flex: none;
  transition: transform .18s ease;
}
.of-gaveta[open] > summary::before { transform: rotate(90deg); }

.of-gaveta-titulo { font-weight: 600; }
.of-gaveta-resumo { font-size: var(--t-xs); color: var(--fg-3); }

.of-gaveta-corpo {
  padding: 0 var(--s3) var(--s3);
  max-height: 60vh; overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}

@media (prefers-reduced-motion: reduce) {
  .of-gaveta > summary::before { transition: none; }
}

/* --- Lista de escritórios -------------------------------------------------- */

.of-predio {
  display: grid; gap: var(--s2);
  max-height: 340px; overflow-y: auto;
  padding-right: 2px;
}

.of-sala-linha {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}

/* --- A planta do andar ------------------------------------------------------
 *
 * Cada sala é um escritório, cada mesa é um agente, e o boneco muda de cor
 * pelo estado real dele. Desenhado com caracteres e blocos: a política de
 * conteúdo não carrega imagem de fora, e um andar em SVG teria de ser
 * redesenhado a cada sala nova. */

.of-andar-fundo {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, #000 72%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
}

.of-andar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  width: min(1100px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
}

.of-andar-topo {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.of-andar-salas {
  display: grid; gap: var(--s4); padding: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  overflow-y: auto;
}

.of-sala {
  border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: var(--s3); background: var(--surface-2);
  display: flex; flex-direction: column; gap: var(--s3);
}

.of-sala-nome { font-weight: 600; letter-spacing: -.01em; }

/* O painel de parede: o que a sala inteira está fazendo. */
.of-parede {
  background: #0b1220; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s2) var(--s3);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--t-xs); line-height: 1.9;
}
.of-parede > div { display: flex; justify-content: space-between; gap: var(--s3); }
.of-parede span { color: var(--fg-3); }

.of-mesinhas {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
}

.of-mesinha { text-align: center; }

.of-boneco {
  font-size: 20px; line-height: 1; color: var(--fg-3);
}
.of-mesinha[data-estado="ANALYZING"] .of-boneco { color: var(--info); }
.of-mesinha[data-estado="IN_POSITION"] .of-boneco {
  color: var(--up); animation: of-pulso 2.4s ease-in-out infinite;
}
.of-mesinha[data-estado="SUSPENDED"] .of-boneco { color: var(--down); opacity: .5; }

.of-tampo {
  height: 6px; border-radius: 2px; margin: 3px auto 0; width: 80%;
  background: var(--line);
}

.of-mesinha-nome {
  font-size: 9px; color: var(--fg-3); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  .of-mesinha[data-estado="IN_POSITION"] .of-boneco { animation: none; }
}


/* No celular a regra se inverte: cinco colunas não cabem, e teto com barra de
 * rolagem dentro de outra barra é das piores coisas de usar num toque. */
@media (max-width: 720px) {
  .of-mesas {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: auto;
  }
  .of-andares { max-height: none; overflow-y: visible; }
  .of-mesa { height: auto; }

  /* A janela de parâmetros ocupa a tela inteira: num telefone, margem lateral
     em modal e campo de formulário disputam a mesma largura escassa. */
  .of-config-janela { max-width: 100%; padding: var(--s3); }
  .of-config-corpo { max-height: 72vh; }
}

/* --- O aceite -------------------------------------------------------------
 *
 * **Era uma frase digitada, e virou uma caixa a pedido do titular.** O
 * argumento a favor da frase é real — marcar é reflexo, escrever é ato —, mas
 * ele não sobreviveu ao contato com a tela: a frase escolhida tinha o nome do
 * campo logo acima, que pede um valor, e o titular digitou o valor ali duas
 * vezes seguidas. Uma proteção que impede o dono de usar o próprio sistema
 * protege do dono, e não do risco.
 *
 * O que sobrou fazendo o trabalho é o aviso em vermelho acima dela — por isso
 * a caixa é grande, o alvo é a frase inteira, e ela não se parece com as
 * outras caixinhas da tela. */

.of-aceite {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3);
  margin-bottom: var(--s3);
  border: 1px solid color-mix(in srgb, var(--down) 45%, var(--line));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--down) 7%, var(--surface));
  cursor: pointer; font-size: var(--t-sm); line-height: 1.6;
}

.of-aceite input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  accent-color: var(--down); cursor: pointer;
}

.of-aceite:hover {
  border-color: color-mix(in srgb, var(--down) 70%, var(--line));
}


/* A caixinha que liga e desliga o agente.
 *
 * **Fica no alto da mesa porque é a primeira coisa a saber sobre ela**: se
 * este agente opera. Posta embaixo, junto dos botões, ela competiria com
 * Parar e Religar, que dizem outra coisa.
 *
 * O nome não é `of-liga`: essa classe já é a da Trading League, e reusá-la
 * fez o `position: absolute` daqui arrancar a tabela do ranking do fluxo. */
.of-opera {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-xs);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  z-index: 1;
}

.of-opera input { cursor: pointer; margin: 0; }

/* Espaço para a caixinha: sem isto, um estado de nome longo passa por baixo
   dela e as duas se sobrepõem. */
.of-mesa .of-monitor { padding-right: 68px; }

.of-mesa[data-estado="OFF"] { opacity: .55; }


/* Agente e ativo na tabela de vereditos.
 *
 * **Não é o que se lê primeiro nesta tabela.** Quem olha aqui procura o
 * veredito — aprovou, recusou, por quê. Agente e ativo em corpo cheio
 * competiam com ele e deixavam a linha confusa. */
.tbl td.of-secundario {
  font-size: var(--t-xs);
  color: var(--muted-2, var(--muted));
}

/* **O mesmo padrão em toda tabela dos boxes do Trading Office.** A coluna
 * "Agente" de Decisões e vereditos, em fonte menor e cor secundária, lia bem;
 * as tabelas de histórico, capital, gestão e as demais, na fonte cheia,
 * ficavam carregadas. Todas passam a usar o mesmo tamanho. */
section.widget[data-widget^="of-"] .tbl td,
section.widget[data-widget^="of-"] .of-resultado {
  font-size: var(--t-xs);
  color: var(--muted-2, var(--muted));
}


/* A janela de parâmetros do Trading Office.
 *
 * **Ela é larga de propósito.** Os campos de risco vêm com explicação e
 * exemplo em cada um; espremidos na largura de um modal comum, cada campo
 * ocuparia três alturas de tela e a janela viraria uma rolagem infinita. */
.of-config-janela { max-width: 980px; }

.of-config-abas {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s3); margin-bottom: var(--s3);
}

/* O corpo rola sozinho: o cabeçalho e as abas ficam sempre à vista, e o botão
   de salvar não foge para fora da janela quando a aba é longa. */
.of-config-corpo { max-height: 68vh; overflow-y: auto; padding-right: var(--s2); }