/* Área administrativa da T&D.
   CSS próprio, não o do site: aqui é ferramenta de trabalho, não peça de
   marketing. Mesma paleta da marca, densidade maior, zero animação supérflua.
   Serve o mesmo tema claro/escuro do site. */

/* 🔴 Achado em 25/08/2026: este arquivo NUNCA teve `@font-face`, e `--fonte`
   pedia 'Montserrat' que o navegador não tinha onde buscar — o painel inteiro
   rodava em `system-ui`, contrariando o comentário logo acima. O site público
   servia as mesmas fontes desde sempre (`src/styles/global.css`); só o painel
   ficou de fora.
   ⚠️ `font-weight: 600 700` no arquivo de 700 é de propósito: este CSS pede o
   peso 600 em 22 lugares, e sem a faixa o navegador SINTETIZA um negrito falso
   em vez de usar o arquivo real. Mesma linha do site público. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/montserrat-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/montserrat-700.woff2') format('woff2');
}

/* 📏 A ESCALA DE ESTREITO — três degraus, e só três.
   Este arquivo tinha SEIS limiares (640px, 720px, 900px, 34rem, 40rem, 56rem)
   escritos em duas unidades, cada um decidido no dia em que a seção nasceu.
   Seis limiares ⛔ não são uma escala: são seis opiniões, e a tela quebra em
   seis larguras diferentes sem que ninguém consiga prever onde.

     40rem (640px) — o telefone: coluna única, ação embaixo do texto
     45rem (720px) — a tabela que já ⛔ não cabe deitada vira cartão
     56rem (896px) — a navegação lateral vira fita no topo

   ⚠️ Os três degraus são os limiares que JÁ EXISTIAM, renomeados — ⛔ não uma
   escala inventada por cima do que estava no ar. `640px` e `40rem` são a mesma
   largura; `900px` virou 896px (4px); só o `34rem` das guias mudou de verdade,
   subindo para 40rem — e para melhor, porque são oito guias com emoji e elas
   já transbordavam antes dos 544px do limiar antigo.
   ⛔ Degrau novo ⛔ não se acrescenta sem tirar outro. */

:root {
  color-scheme: light;
  --azul: #00253f;
  --verde: #94b962;
  --verde-texto: #607d38;
  --agua-texto: #377f91;
  /* acento oficial do cliente, de `_source/design/PALETA-E-TIPOGRAFIA.md` */
  --acento: #47a2b9;
  --ambar: #d9822b;
  --ambar-escuro: #8a5a00;

  --texto: #22262b;
  --texto-suave: #5d666e;
  --linha: #dfe4e8;
  --fundo: #f4f6f8;
  --fundo-suave: rgb(0 0 0 / 3%);
  --superficie: #ffffff;
  --superficie-2: #f8fafb;
  --tinta-forte: var(--azul);

  --ok-fundo: #e8f2dc;
  --ok-texto: #33501a;
  --alerta-fundo: #fdf1dd;
  --alerta-texto: #7a4b06;
  --erro-fundo: #fdeceb;
  --erro-texto: #a5281b;

  /* sinal de mercado: oportunidade / risco / neutro */
  --sinal-op-fundo: #e3f1d6;  --sinal-op-texto: #2f5413;
  --sinal-ri-fundo: #fbe1e1;  --sinal-ri-texto: #7a1d1d;
  --sinal-ne-fundo: #e9ecef;  --sinal-ne-texto: #3a3e3e;

  /* O destaque absoluto inverte o plano, então a cor dele ⛔ não deriva de
     --superficie: no claro é painel escuro, no escuro é painel claro. */
  --destaque-fundo: var(--azul);
  --destaque-titulo: #ffffff;
  --destaque-conta: rgb(255 255 255 / 72%);

  /* 📏 A CALHA — a mesma grandeza dos dois lados, com um nome so.
     ⛔ Nao e medida nova: e a formula que ja vestia `.conteudo` e
     `.area__moldura`, promovida a token porque o cabecalho usava OUTRA
     (`clamp(0.8rem, 3vw, 1.5rem)`, teto 24px) e abria 4px mais estreito que a
     coluna que ele encima — em toda tela de 933px para cima. */
  --respiro: clamp(1rem, 3vw, 1.75rem);
  /* o vao ENTRE colunas irmas ⛔ nao e a calha externa: e de proposito que ele
     seja menor, senao a barra lateral parece solta no meio da pagina. */
  --respiro-gap: clamp(0.75rem, 2vw, 1.5rem);
  /* altura do `.topo` da area do cliente: medida **58,8px de 480px para cima**.
     ⚠️ Abaixo disso ele TAMBEM quebra em duas fileiras — a 390px mede 101px —
     so que ali a barra ja e fita (`position: static`) e este `top` ⛔ nao vale.
     ⇒ o token so precisa estar certo na faixa em que a barra e barra.
     O teto de 60px e escolhido, ⛔ nao medido: arredondar PARA CIMA faz a barra
     encostar 1,2px ABAIXO do cabecalho em vez de sumir sob ele, e deixa a
     pagina 1,2px mais curta que a janela — arredondado para baixo, uma secao
     curta ganharia barra de rolagem por 1 pixel. */
  --altura-topo: 3.75rem;

  --raio: 10px;
  --sombra: 0 1px 2px rgb(0 37 63 / 6%), 0 6px 20px rgb(0 37 63 / 8%);
  --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace;
}

/* ══════════════════════════════════════════════════════════════════════
   TEMA — três estados, nesta ordem de precedência (a mesma do site público,
   `src/styles/global.css`):
     1. :root                      → claro, o padrão
     2. prefers-color-scheme: dark → segue o sistema, se ninguém escolheu
     3. [data-tema='…']            → escolha explícita vence o sistema
   Por isso o bloco do sistema é guardado com `:not([data-tema='claro'])`.

   🔴 Achado em 25/08/2026: este arquivo tinha o passo 2 e ⛔ NÃO tinha o 3 —
   `grep "data-tema='escuro'" admin.css` devolvia ZERO. E o `index.html`
   nascia com `data-tema="claro"` fixo no `<html>`, o que fazia a guarda do
   passo 2 nunca poder ser satisfeita. Resultado: ~35 linhas de tema escuro
   que jamais pintaram um pixel, num painel que se anuncia no comentário do
   topo como "serve o mesmo tema claro/escuro do site".
   ⚠️ Os dois blocos abaixo são gêmeos de propósito e ⛔ têm que mudar juntos.
   `test/o-painel-tem-tema.test.mjs` falha se um ganhar token que o outro não
   tem — é essa prova que substitui a disciplina de lembrar.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    color-scheme: dark;
    --texto: #eaf1f5;
    --texto-suave: #9fb3c0;
    --linha: #0d3f66;
    --fundo: #00192b;
    --superficie: #00253f;
    --superficie-2: #003256;
    --tinta-forte: #eaf1f5;
    --verde-texto: #b2c761;
    --agua-texto: #9ac8d8;
    --ok-fundo: rgb(148 185 98 / 16%);
    --ok-texto: #cfe0a4;
    --alerta-fundo: rgb(241 151 1 / 16%);
    --alerta-texto: #f2c471;
    --erro-fundo: rgb(255 138 128 / 14%);
    --erro-texto: #ff9d93;
    --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 34%);
    --sinal-op-fundo: rgb(148 185 98 / 20%);  --sinal-op-texto: #cfe0a4;
    --sinal-ri-fundo: rgb(255 138 128 / 18%); --sinal-ri-texto: #ff9d93;
    --sinal-ne-fundo: rgb(255 255 255 / 8%);  --sinal-ne-texto: #9fb3c0;
    --destaque-fundo: #eaf1f5;
    --destaque-titulo: var(--azul);
    --destaque-conta: rgb(0 37 63 / 70%);
  }
}

/* Gêmeo do bloco acima. ⚠️ Mudou lá, muda aqui. */
:root[data-tema='escuro'] {
  color-scheme: dark;
  --texto: #eaf1f5;
  --texto-suave: #9fb3c0;
  --linha: #0d3f66;
  --fundo: #00192b;
  --superficie: #00253f;
  --superficie-2: #003256;
  --tinta-forte: #eaf1f5;
  --verde-texto: #b2c761;
  --agua-texto: #9ac8d8;
  --ok-fundo: rgb(148 185 98 / 16%);
  --ok-texto: #cfe0a4;
  --alerta-fundo: rgb(241 151 1 / 16%);
  --alerta-texto: #f2c471;
  --erro-fundo: rgb(255 138 128 / 14%);
  --erro-texto: #ff9d93;
  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 34%);
  --sinal-op-fundo: rgb(148 185 98 / 20%);  --sinal-op-texto: #cfe0a4;
  --sinal-ri-fundo: rgb(255 138 128 / 18%); --sinal-ri-texto: #ff9d93;
  --sinal-ne-fundo: rgb(255 255 255 / 8%);  --sinal-ne-texto: #9fb3c0;
  --destaque-fundo: #eaf1f5;
  --destaque-titulo: var(--azul);
  --destaque-conta: rgb(0 37 63 / 70%);
}

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}

[hidden] { display: none !important; }

h1, h2, h3 { color: var(--tinta-forte); line-height: 1.2; margin: 0; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.02rem; }

.ajuda { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--texto-suave); }
.ajuda strong { color: var(--texto); }

/* ── A SUPERFÍCIE DE CARTÃO ───────────────────────────────────────────────
   Quatro classes desenhavam o mesmo retângulo, cada uma repetindo as três
   mesmas linhas: `.cartao` (o quadro de seção), `.item` (o cartão de lista),
   `.materia` (a matéria de imprensa) e `.fila__item` (a linha da fila de
   triagem). Byte por byte iguais nas três, e por isso mesmo o lugar onde a
   deriva entra sem ninguém ver — bastava alguém trocar o raio numa.

   ⛔ Nomes de classe ⛔ NÃO mudam: `.item` tem 165 usos no JS e há prova lendo
   o fonte por nome. O que muda é de onde a cor vem. */
.cartao, .item, .materia, .fila__item {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.cartao { box-shadow: var(--sombra); }

/* ── botões ───────────────────────────────────────────────────────── */
.btn {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55em 1.1em;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--tinta-forte);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn--primario { background: var(--verde); color: #00253f; }
.btn--primario:hover { background: #a3c674; }
.btn--discreto { border-color: var(--linha); color: var(--texto-suave); }
.btn--discreto:hover { border-color: var(--agua-texto); color: var(--agua-texto); }
.btn--perigo { color: var(--erro-texto); border-color: transparent; }
.btn--perigo:hover { background: var(--erro-fundo); }
.btn:focus-visible { outline: 2px solid var(--agua-texto); outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
/* Botão que está esperando o servidor. ⚠️ O RÓTULO ⛔ não muda — trocar a
   palavra é copy, e copy pende card. O que muda é o sinal: um disco girando ao
   lado do texto, que diz "estou trabalhando" sem escrever nada. */
.btn[aria-busy='true'] { opacity: 1; }
.btn[aria-busy='true']::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girando 0.7s linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }
/* Quem pede menos movimento recebe o mesmo sinal parado: o anel aberto já
   distingue o botão que espera do botão que ⛔ não faz nada. */
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy='true']::after { animation: none; }
}

/* ── entrada ──────────────────────────────────────────────────────── */
.entrada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.entrada__caixa { width: min(24rem, 100%); padding: 1.75rem; display: grid; gap: 0.9rem; }
.entrada__marca { width: 44px; height: auto; }
/* A saída da tela de login e a volta dela. É `<button>`, ⛔ não `<a>`: ⛔ não
   navega para lugar nenhum — troca a tela que está visível. */
.entrada__saida { justify-self: center; padding: 0; border: 0; background: none; color: var(--acento); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
/* Gemeo POSITIVO do `.aviso`: mesma geometria (raio, respiro, corpo), par de
   cor invertido. Ocupa o mesmo lugar onde o erro apareceria, entao ler como
   erro seria pior que nao ter caixa nenhuma. `--ok-fundo`/`--ok-texto` ja
   existem nos DOIS temas — ⛔ nao inventar token para isto. */
.entrada__ok { margin: 0; padding: 0.55em 0.75em; border-radius: 8px; font-size: 0.88rem; line-height: 1.5; background: var(--ok-fundo); color: var(--ok-texto); }

.campo { display: grid; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.campo em { font-weight: 400; font-style: normal; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  padding: 0.55em 0.7em;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie-2);
  color: var(--texto);
  width: 100%;
}
.campo textarea { min-height: 5rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--agua-texto);
  box-shadow: 0 0 0 3px rgb(55 127 145 / 22%);
}
.campo--linha { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.campo--linha input { width: auto; }
/* Um seletor de conta ⛔ não precisa da largura da tela. Era o único `style=`
   inline do index.html — regra de aparência escrita fora da folha ⛔ não é
   alcançada por tema, por estreito nem por busca. */
.campo--estreito { max-width: 26rem; }

/* 🔴 Campo que o servidor recusou. Sem isto o erro era só um parágrafo vermelho
   ao pé do formulário, e o campo culpado ficava idêntico aos outros — quem
   voltava para corrigir tinha de adivinhar onde. */
.campo input[aria-invalid='true'],
.campo select[aria-invalid='true'],
.campo textarea[aria-invalid='true'] {
  border-color: var(--erro-texto);
}
.campo input[aria-invalid='true']:focus,
.campo select[aria-invalid='true']:focus,
.campo textarea[aria-invalid='true']:focus {
  border-color: var(--erro-texto);
  box-shadow: 0 0 0 3px var(--erro-fundo);
}

.aviso {
  margin: 0;
  padding: 0.55em 0.75em;
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--erro-fundo);
  color: var(--erro-texto);
}

/* ── topo ─────────────────────────────────────────────────────────── */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem var(--respiro);
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.topo__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--tinta-forte);
  font-weight: 700;
  font-size: 0.92rem;
}
.topo__marca img { width: 26px; height: auto; }
/* ⚠️ `.seletor-tema` e ⛔ NÃO `.tema`: `.tema` já é a etiqueta de ASSUNTO de
   imprensa (`.temas__lista > .tema`), e reusar o nome faria a etiqueta de
   pauta herdar a moldura do seletor de cor. Nome comprido é mais barato que
   colisão. */
.seletor-tema {
  display: inline-flex;
  border: 1px solid var(--linha);
  border-radius: 99px;
  background: var(--superficie-2);
  padding: 2px;
}
.seletor-tema button {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.76rem; color: var(--texto-suave);
  border-radius: 99px; padding: 0.2rem 0.6rem;
  line-height: 1.4;
}
.seletor-tema button:hover { color: var(--tinta-forte); }
.seletor-tema button[aria-pressed='true'] {
  background: var(--superficie);
  color: var(--tinta-forte);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 37 63 / 10%);
}
.seletor-tema button:focus-visible { outline: 2px solid var(--agua-texto); outline-offset: 1px; }
/* No estreito o painel já disputa cada pixel do topo: sobra o ícone, que os
   três `title` continuam explicando para quem passa o mouse e o `aria-label`
   do grupo para quem usa leitor de tela. */
@media (max-width: 40rem) {
  .seletor-tema button span { display: none; }
  .seletor-tema button { padding: 0.25rem 0.45rem; }
}

.topo__conta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

/* 🔴 Até 25/08/2026 esta barra era `flex-wrap: wrap` e ⛔ NÃO tinha nenhuma
   media query — a única das quatro navegações do painel sem tratamento no
   estreito. Com as 9 abas de admin, a 390 px ela quebrava em CINCO fileiras e
   comia ~150 px de altura antes de qualquer conteúdo aparecer.
   🎯 A fita rolável ⛔ não é invenção: é o mesmo tratamento que o `.menu` da
   área do cliente já usava a 900 px e as `.guias` de mercado a 34 rem. O que
   faltava era aplicá-lo aqui. */
/* ── AS TRÊS NAVEGAÇÕES ───────────────────────────────────────────────────
   O painel tem três: as abas do topo, o menu lateral do cliente e as guias de
   Mercado. Eram QUATRO até 10/09/2026 — a barra de visões «Nossas matérias |
   Mercado» morreu quando as duas viraram abas irmãs. Cada uma nasceu num dia
   diferente e trouxe a própria grafia da MESMA ideia — resets de botão,
   `:hover` e anéis de foco (`--agua-texto` com deslocamento 1px, 2px, 2px e
   `--verde` com -2px) escritos de novo a cada vez.

   ✅ O que se unifica aqui é a BASE — reset, passar-o-mouse e o anel de foco.
   ⛔ O que ⛔ NÃO se unifica é o estado SELECIONADO, e isto é decisão, não
   esquecimento: as barras se empilham na tela (abas → guias) e, se marcarem a
   escolhida do mesmo jeito, deixa de dar para ver o que está dentro do quê. A
   tela ganharia hierarquia de mentira. Cada nível guarda a sua marca — pílula
   preenchida em cima, sublinhado na linha de base embaixo — e há prova
   defendendo isso em `test/guias-mercado.test.mjs`.

   🔴 O anel virou INSETO (`-2px`) porque três das quatro viram fita rolável no
   estreito, e `overflow-x: auto` CORTA anel desenhado para fora: quem navega
   por teclado via meio anel, ou nenhum, exatamente na largura em que mais
   precisa dele. */
.abas button, .guias button, .menu__item {
  font: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.abas button:focus-visible,
.guias button:focus-visible, .menu__item:focus-visible {
  outline: 2px solid var(--agua-texto);
  outline-offset: -2px;
}
.abas button:hover,
.guias button:hover, .menu__item:hover { color: var(--tinta-forte); }

.abas {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  /* A âncora de rolagem prende o item ativo quando a fita rola sozinha. */
  scroll-snap-type: inline proximity;
}
.abas button {
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.45em 0.85em;
  border-radius: 999px;
  color: var(--texto-suave);
  scroll-snap-align: center;
}
/* Estado selecionado: superfície preenchida + régua de 2 px. A régua existe
   porque só o preenchimento (`--superficie-2` sobre `--superficie`) é uma
   diferença de dois passos de cinza — some no monitor mais claro, e some de
   vez em `forced-colors`, onde o navegador descarta cor de fundo. */
.abas button[aria-selected='true'] {
  background: var(--superficie-2);
  color: var(--tinta-forte);
  box-shadow: inset 0 -2px 0 var(--verde);
}

@media (max-width: 56rem) {
  .abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Sem a barra visível: ela empurraria o conteúdo do topo em 15 px e
       reaparece no gesto de rolagem em todo navegador que a esconde. */
    scrollbar-width: none;
    /* O respiro à direita mostra que ainda há aba depois do corte — sem ele a
       última aba encosta na borda e a fita parece terminar ali. */
    padding-right: 1rem;
  }
  .abas::-webkit-scrollbar { display: none; }
  .abas button { white-space: nowrap; }
}

/* Some até receber o foco. ⛔ Não é `display: none` nem `visibility: hidden`:
   os dois tirariam o link da ordem de tabulação, que é a única coisa que ele
   tem. Fica na tela, fora dela. */
.pular {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 60;
  padding: 0.55rem 0.9rem;
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--verde);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { top: 0.5rem; }
/* O destino recebe foco por programação e ⛔ não por clique — o anel ali seria
   uma moldura em volta da tela inteira, que ⛔ não ajuda ninguém a se localizar. */
.conteudo:focus { outline: none; }
.conteudo { padding: var(--respiro); max-width: 74rem; margin-inline: auto; }

.cabecalho-painel__acoes {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cabecalho-painel {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.cabecalho-painel > div:first-child { flex: 1 1 22rem; }
.cabecalho-painel .ajuda { max-width: 46rem; }

.busca {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5em 0.8em;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  min-width: min(20rem, 100%);
}

/* ── listas ───────────────────────────────────────────────────────── */
.grade-cartoes {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.item {
  padding: 0.85rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.item__topo { display: flex; align-items: baseline; gap: 0.5rem; }
.item__titulo { font-weight: 700; color: var(--tinta-forte); }
.item__meta { font-size: 0.8rem; color: var(--texto-suave); }
/* Fila de analise parada nao pode ter a mesma cor de uma legenda qualquer:
   e a diferenca entre "ninguem falou" e "ninguem leu". */
.item__meta--atencao { color: var(--ambar-escuro); font-weight: 600; }
.item__acoes { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.15rem; }
/* O começo da fala no cartão de depoimento. Quatro linhas bastam para achar
   qual é qual; a fala inteira está a um «Editar» de distância. */
.item__citacao {
  margin: 0; font-size: 0.86rem; color: var(--texto);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  line-clamp: 4; overflow: hidden;
}

.moldura {
  display: grid;
  place-items: center;
  /* 🔴 Sem trilho definido a linha da grade é `auto` e cresce com a imagem: o
     `max-height: 76%` e o `height: 100%` abaixo ficavam sem altura contra a
     qual se calcular e valiam `none`/`auto`. Logo quadrado vazava a moldura e
     o `overflow` cortava a base — medido na aba de depoimentos. */
  grid-template: 100% / 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  /* Placa clara SEMPRE: logo de terceiro é arte escura e sumiria no tema
     escuro. Não se inverte marca alheia. */
  background: #fff;
  border: 1px solid var(--linha);
  overflow: hidden;
}
.moldura img { max-width: 84%; max-height: 76%; object-fit: contain; }
.moldura--vazia { color: #8b969e; font-size: 0.8rem; background: var(--superficie-2); }

.selo {
  display: inline-block;
  padding: 0.12em 0.55em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.selo--ok { background: var(--ok-fundo); color: var(--ok-texto); }
.selo--alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }
.selo--erro { background: var(--erro-fundo); color: var(--erro-texto); }
.selo--neutro { background: var(--superficie-2); color: var(--texto-suave); }
/* ⚠️ `--acento` ⛔ NÃO é redefinido nos blocos de tema escuro — é a mesma cor
   nos dois, e o par com `#fff` já é usado no contador de `.movimento`. Por
   isso este selo ⛔ não precisa de token novo em três lugares. */
.selo--pedido { background: var(--acento); color: #fff; margin-top: 0.3rem; }

/* ── tabela ───────────────────────────────────────────────────────── */
.tabela { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabela th, .tabela td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
.tabela th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  background: var(--superficie-2);
}
.tabela tr:last-child td { border-bottom: 0; }
.rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }

.filtros { display: flex; gap: 0.3rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.filtros button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35em 0.8em;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
}
.filtros button[aria-pressed='true'] {
  background: var(--tinta-forte);
  border-color: var(--tinta-forte);
  color: var(--fundo);
}

.vazio {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--texto-suave);
  background: var(--superficie);
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
}
/* A segunda linha: o próximo passo. Discreta de propósito — quem já sabe o que
   fazer ⛔ não deve ler duas frases do mesmo tamanho para achar a lista. */
.vazio__passo {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.92em;
}
/* 🔴 Falha ⛔ NÃO se veste de vazio. O tracejado diz "ainda não há"; a linha
   cheia na cor de erro diz "⛔ não deu para perguntar". Confundir as duas fez o
   cliente ler ausência de dado onde houve queda de rede. */
.vazio--falha {
  border-style: solid;
  border-color: var(--erro-texto);
  background: var(--erro-fundo);
  color: var(--erro-texto);
}

/* ── modal ────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; }
.modal__fundo { position: absolute; inset: 0; background: rgb(0 10 20 / 55%); }
.modal__caixa {
  position: relative;
  width: min(32rem, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  padding: 1.25rem;
}
.modal__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.modal__caixa form { display: grid; gap: 0.75rem; }
.modal__acoes { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.3rem; }

/* ── recado ───────────────────────────────────────────────────────── */
/* 🔴 Era `left: 50%` e mais nada — sem largura máxima e sem folga lateral. Um
   erro comprido num telefone de 390px estourava a tela para os dois lados, e a
   parte que sobrava era justamente o fim da frase, onde mora o que fazer.
   ⚠️ `max-width` em `calc()` porque o `translate: -50%` centraliza pela largura
   REAL: sem o teto, a régua de centro ⛔ não impede o transbordo. */
.recado {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  translate: -50% 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6em 0.7em 0.6em 1.1em;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--ok-fundo);
  color: var(--ok-texto);
  box-shadow: var(--sombra);
}
/* ⛔ Aviso que só some sozinho obriga a esperar, e o mais comprido é justamente
   o de erro — que fica em cima da linha que a pessoa quer reler. */
.recado__fechar {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.recado__fechar:hover { opacity: 1; background: rgb(0 0 0 / 8%); }
.recado__fechar:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.recado[data-tipo='erro'] { background: var(--erro-fundo); color: var(--erro-texto); }

/* Resultado da busca de menções. Fica no painel, não no aviso que
   some: é uma lista para ler, e o que a IA descartou importa tanto quanto o
   que ela aceitou. */
.coleta {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--agua-texto);
  border-radius: var(--raio);
  background: var(--superficie);
  padding: .9rem 1rem;
  margin-bottom: 1rem;
}
.coleta p { margin: 0 0 .3rem; }
.coleta summary { cursor: pointer; font-weight: 600; margin-top: .5rem; }
.coleta ul { margin: .6rem 0 .2rem; padding-left: 1.1rem; }
.coleta li { margin-bottom: .5rem; }

/* Coleta que FALHOU. Some do azul-água e vai para o vermelho da casa porque a
   diferença entre "não achou matéria" e "não conseguiu procurar" tem de ser
   visível de longe, antes de qualquer palavra ser lida: em 21/08/2026 as duas
   situações apareceram idênticas na tela e alguém concluiu, do quadro errado,
   que a T&D não tinha saído na imprensa. */
.coleta--falha {
  border-color: var(--erro-texto);
  border-left-color: var(--erro-texto);
  background: var(--erro-fundo);
}
.coleta__alarme { font-weight: 700; color: var(--erro-texto); }

/* Peça faltando ≠ sistema quebrado. Configuração ausente tem conserto conhecido
   e fica no âmbar: o vermelho é reservado para a rodada que não consegue dizer
   a verdade, e vermelho gasto em pendência é vermelho que ninguém mais lê. */
.coleta--pendencia {
  border-color: var(--alerta-texto);
  border-left-color: var(--alerta-texto);
  background: var(--alerta-fundo);
}
.coleta__pendencia { font-weight: 700; color: var(--alerta-texto); }

/* Falha parcial: alerta, não alarme. Alguma fonte respondeu, então a lista
   serve — só não é a lista inteira, e isso precisa estar dito.
   ⚠️ Os seletores desta seção são compostos (`.coleta .x`) de propósito: as
   regras genéricas acima — `.coleta p`, `.coleta ul`, `.coleta li` — ganhariam
   de uma classe sozinha. Duas classes resolvem sem `!important`, que neste
   arquivo existe só no `[hidden]`. */
.coleta .coleta__aviso {
  background: var(--alerta-fundo);
  color: var(--alerta-texto);
  border-radius: 8px;
  padding: .45rem .6rem;
  margin: .5rem 0;
  font-size: .85rem;
}

/* ── placar por fonte ─────────────────────────────────────────────────
   Uma linha por fonte consultada, com o que veio de cada uma ou por que ela
   caiu. É o quadro que responde "zero matérias foi por quê". */
.fontes { margin-top: .6rem; }
.coleta .fontes__titulo {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
  font-weight: 700;
  margin: 0 0 .15rem;
}
.coleta .fontes__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .2rem;
}
.coleta .fonte {
  position: relative;
  padding-left: .85rem;
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: .85rem;
  margin: 0;
}
/* Marcador colorido em vez de emoji: sobrevive ao tema escuro e não é lido em
   voz alta por leitor de tela — a frase ao lado já diz tudo.
   ⚠️ Fora do fluxo, e é o `padding-left` acima que abre o lugar dele. Como item
   do flex, ele empurrava a segunda linha de uma frase longa até a margem
   esquerda, e a frase descolava do nome da fonte — justo nas falhas, que são as
   frases compridas e as que mais importa ler direito. */
.fonte::before {
  content: '●';
  position: absolute;
  left: 0;
  font-size: .62em;
  line-height: 2.1;
  color: var(--verde-texto);
}
.fonte--falha::before { color: var(--erro-texto); }
.fonte__nome { font-weight: 600; color: var(--tinta-forte); }
.fonte__nota { color: var(--texto-suave); }
.fonte--falha .fonte__nota { color: var(--erro-texto); font-weight: 600; }

/* A evidência crua da falha — o corpo que a fonte devolveu. Fica dobrada e só
   nas linhas de falha: aberta por padrão, ela vira ruído numa rodada normal, e
   ruído gasta o alarme.
   ⚠️ `flex-basis: 100%` a joga para a linha de baixo inteira, senão ela disputa
   espaço com a frase e as duas quebram feio. `overflow-wrap` é obrigatório: o
   conteúdo é HTML de página de bloqueio, que vem com strings sem espaço e
   estouraria o quadro para fora. */
.coleta .fonte__prova {
  flex-basis: 100%;
  margin: .1rem 0 .2rem;
  font-size: .78rem;
}
.coleta .fonte__prova summary {
  cursor: pointer;
  color: var(--texto-suave);
  font-weight: 400;
}
/* ⚠️ `--superficie` (e não uma transparência) porque este bloco aparece por
   cima de DOIS fundos diferentes: o quadro normal e o `--erro-fundo` do quadro
   de falha. Cor sólida é a única que se lê nos dois, nos dois temas. */
.coleta .fonte__prova code {
  display: block;
  margin-top: .2rem;
  padding: .35rem .5rem;
  border: 1px solid var(--linha);
  border-radius: .3rem;
  background: var(--superficie);
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: .72rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* O texto que vem logo depois do placar é a explicação do placar, não mais um
   item dele: precisa de respiro para não ser lido como quarta linha da lista. */
.coleta .fontes + p { margin-top: .55rem; }

/* ── editor de case ───────────────────────────────────────────────────
   Tela própria, não modal: a lista de pontos e a galeria de fotos não cabem
   numa caixa de 32rem, e o modal genérico serve as outras quatro abas. */
.editor { display: grid; gap: 1rem; }

.grupo {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
.grupo .ajuda { max-width: 46rem; }

/* Duas colunas quando cabem, uma quando não cabem. O mínimo de 15rem é o que
   impede "Maior % de economia mensal" de virar três linhas de rótulo. */
.grupo__campos {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.editor__acoes { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }

/* Bloco de explicação dentro do formulário — mesma família do resultado da
   coleta, sem o tom de alarme: aqui é instrução, não achado. */
/* Aviso que fica NA página — ≠ `.recado`, que some sozinho no topo. Duas
   naturezas, um componente: a explicação (padrão, barra azul-água) e o alerta
   (`--alerta`, fundo tingido).

   ⚠️ Havia DOIS `.nota` neste arquivo, 330 linhas um do outro, cada um com um
   comentário jurando um propósito diferente. O segundo redefinia margem,
   padding, raio e tamanho — mas ⛔ NÃO redefinia a borda, então `.nota--alerta`
   pintava fundo âmbar e mantinha a barra AZUL do primeiro. Ninguém tinha
   escolhido isso: era colisão de nome, não decisão. Fundidos em 25/08/2026. */
.nota {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--agua-texto);
  border-radius: 8px;
  background: var(--superficie-2);
  margin: 0.8rem 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
/* Prosa, ⛔ não caixa: é o texto principal de um diálogo que só tem texto.
   ⛔ Sem fundo e sem borda de propósito — dentro de um modal, qualquer retângulo
   com fundo próprio lê como campo. E a tinta é a cheia (`--texto`), ⛔ não a
   suave: quem pergunta "posso apagar?" ⛔ não pode sussurrar a consequência. */
.consequencia {
  margin: 0.15rem 0 0.9rem;
  color: var(--texto);
  font-size: 0.95rem;
  line-height: 1.55;
}
.nota--alerta {
  background: var(--alerta-fundo);
  color: var(--alerta-texto);
  border-color: var(--alerta-texto);
  border-left-color: var(--alerta-texto);
}
.nota--alerta strong { color: inherit; }
.nota p { margin: 0 0 0.35rem; }
.nota p:last-child { margin-bottom: 0; }
.nota strong { color: var(--texto); }

code {
  font-size: 0.85em;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* ── pontos ───────────────────────────────────────────────────────── */
.ponto {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  padding: 0.7rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie-2);
}
.ponto__campos { display: grid; gap: 0.5rem; }
.ponto__campos textarea { min-height: 3.5rem; }
.ponto__acoes { display: grid; gap: 0.3rem; align-content: start; }
.ponto__acoes .btn { padding: 0.35em 0.7em; }

/* Seta desabilitada não está carregando nada — o cursor de progresso do .btn
   genérico diria que algo está acontecendo. */
.ponto__acoes .btn[disabled] { cursor: default; }

/* ── fotos ────────────────────────────────────────────────────────── */
.fotos {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.foto { margin: 0; display: grid; gap: 0.45rem; }

/* Foto de case é fotografia, não marca: preenche a moldura e pode ser
   recortada. O fundo branco fixo da .moldura existe para não inverter logo de
   terceiro no tema escuro — aqui ele só deixaria tarja branca em volta. */
.moldura--foto { background: var(--superficie-2); }
.moldura--foto img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}


/* ── Cockpit de inteligência de mercado ──────────────────────────────────
   A aba deixou de ser lista e virou painel de decisão. Três regras valeram
   para tudo aqui:
   1. nenhuma cor é chumbada — tudo sai de token, senão o tema escuro quebra
      (era o caso dos selos de sinal, que vinham com hex fixo);
   2. nada de altura fixa em bloco que recebe texto da IA — a leitura e a
      pauta variam de duas a seis linhas;
   3. toda barra tem largura mínima quando o valor é maior que zero: 0,4% de
      barra é indistinguível de zero, e a tabela ficava com uma coluna de
      "fatia" que não mostrava fatia nenhuma. */

/* ⚠️ Os tokens `--sinal-*` moravam aqui, num SEGUNDO `:root` e num SEGUNDO
   bloco de tema escuro, 600 linhas abaixo dos primeiros. Subiram para o topo
   em 25/08/2026: token espalhado é como os dois `.nota` incompatíveis
   nasceram — ninguém procura a segunda definição porque não imagina que
   exista. ⛔ Não abrir um terceiro `:root` aqui embaixo. */
.sinal--oportunidade { background: var(--sinal-op-fundo); color: var(--sinal-op-texto); }
.sinal--risco        { background: var(--sinal-ri-fundo); color: var(--sinal-ri-texto); }
.sinal--neutro       { background: var(--sinal-ne-fundo); color: var(--sinal-ne-texto); }

/* ── barra de comando ─────────────────────────────────────────────────── */
.barra {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--texto-suave);
  border-radius: var(--raio);
  padding: 0.85rem 1rem;
  margin-bottom: 1.2rem;
}
.barra--ligada { border-left-color: var(--verde); }
.barra--alerta { border-left-color: var(--alerta-texto); background: var(--alerta-fundo); }

.barra__linha {
  display: flex;
  align-items: center;
  gap: 0.5rem 1.1rem;
  flex-wrap: wrap;
}
.barra__estado { display: flex; align-items: center; gap: 0.45rem; }

.ponto-estado {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--texto-suave); flex: none;
}
.ponto-estado--on { background: var(--verde); box-shadow: 0 0 0 3px rgb(148 185 98 / 25%); }

.barra__num { font-size: 0.95rem; }
.barra__num strong { font-size: 1.05rem; }
.barra__num--vazio,
.barra__num--voo { color: var(--texto-suave); font-size: 0.85rem; }

/* Empurra os botões para a direita quando cabe, e os deixa quebrar em
   telas estreitas em vez de espremer os números. */
.barra__acoes { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }

.barra__detalhe { margin-top: 0.6rem; }
.barra__detalhe > summary {
  cursor: pointer; color: var(--texto-suave);
  font-size: 0.85rem; padding: 0.15rem 0;
}
.barra__detalhe > summary:hover { color: var(--agua-texto); }
.barra__detalhe[open] > summary { margin-bottom: 0.4rem; }
.barra__detalhe p { margin: 0.35rem 0; }

.orcamento__medidor { margin-top: 0.7rem; }
.orcamento__barra {
  height: 7px; border-radius: 99px; overflow: hidden;
  background: var(--superficie-2); border: 1px solid var(--linha);
}
.orcamento__barra > span { display: block; height: 100%; background: var(--verde); }
.orcamento__barra--cheia > span { background: var(--alerta-texto); }
.orcamento__alerta {
  margin: 0.6rem 0 0; padding: 0.5rem 0.7rem;
  background: var(--alerta-fundo); color: var(--alerta-texto);
  border-radius: 8px; font-size: 0.88rem;
}

/* ── KPIs ─────────────────────────────────────────────────────────────── */
/* auto-fit e não colunas fixas: são 5 ou 6 cartões conforme haja fila
   pendente, e uma grade fixa deixaria buraco quando não há. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}
.kpi {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.75rem 0.85rem;
  text-align: left;
  font: inherit;
  color: inherit;
}
.kpi__valor { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--tinta-forte); }
.kpi__rotulo { font-size: 0.85rem; margin-top: 0.15rem; }
.kpi__extra { font-size: 0.78rem; color: var(--texto-suave); margin-top: 0.2rem; }
.kpi--bom .kpi__valor { color: var(--verde-texto); }
.kpi--atencao .kpi__valor { color: var(--alerta-texto); }
.kpi--acao { cursor: pointer; border-color: var(--agua-texto); }
.kpi--acao:hover { background: var(--superficie-2); }
.kpi--acao:focus-visible { outline: 2px solid var(--agua-texto); outline-offset: 2px; }

/* ── blocos do cockpit ────────────────────────────────────────────────── */
.bloco { margin: 1.6rem 0; }
.bloco > h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.bloco__topo {
  display: flex; align-items: baseline; gap: 0.7rem;
  flex-wrap: wrap; margin-bottom: 0.25rem;
}
.bloco__topo > h3 { margin: 0; }

.dobra { margin: 1.6rem 0; }
.dobra > summary {
  cursor: pointer; font-weight: 600; padding: 0.5rem 0;
  border-top: 1px solid var(--linha);
}
.dobra > summary:hover { color: var(--agua-texto); }

.ressalva__mais { color: var(--texto-suave); }

/* ── placar ───────────────────────────────────────────────────────────── */
.tabela--placar td.num { white-space: nowrap; }
.linha--propria { background: var(--superficie-2); }
.placar__fatia { min-width: 130px; }
.placar__barra {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--superficie-2); border: 1px solid var(--linha);
  margin-bottom: 0.2rem;
}
.placar__barra > span { display: block; height: 100%; background: var(--agua-texto); }
.placar__barra--propria > span { background: var(--verde); }

.btn--mini { padding: 0.25rem 0.55rem; font-size: 0.8rem; white-space: nowrap; }

/* ── tendência ────────────────────────────────────────────────────────── */
/* Colunas em flex e altura em %: sem biblioteca de gráfico, porque a CSP do
   painel não carrega script externo e um gráfico de 12 colunas não justifica
   embarcar uma. */
.tendencia {
  display: flex; align-items: flex-end; gap: 0.35rem;
  height: 130px; padding: 0.6rem 0.4rem 0;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow-x: auto;
}
.tendencia__col { flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column; height: 100%; }
.tendencia__barras {
  flex: 1; display: flex; align-items: flex-end;
  justify-content: center; gap: 2px;
}
.tendencia__b {
  width: 40%; max-width: 16px; border-radius: 2px 2px 0 0;
  /* 2px de piso: uma barra de altura 0.3% some, e sumir é indistinguível de
     "não houve dado" — que é outra coisa. */
  min-height: 2px;
}
.tendencia__b--nos { background: var(--verde); }
.tendencia__b--deles { background: var(--agua-texto); }
.tendencia__rotulo {
  font-size: 0.7rem; color: var(--texto-suave);
  text-align: center; padding-top: 0.3rem; white-space: nowrap;
}
.legenda { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--texto-suave); }
.legenda__cor { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legenda__cor--nos { background: var(--verde); }
.legenda__cor--deles { background: var(--agua-texto); margin-left: 0.8rem; }

/* ── radar de produto ─────────────────────────────────────────────────── */
.produtos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
  /* Alinhados pelo topo: com alturas diferentes de título, esticar todos até o
     mais alto deixa buraco branco no meio da grade. */
  align-items: start;
}
.produto {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 0.7rem 0.8rem;
}
.produto:hover { border-color: var(--agua-texto); }
.produto[aria-pressed='true'] { border-color: var(--verde); background: var(--superficie-2); }
.produto:focus-visible { outline: 2px solid var(--agua-texto); outline-offset: 2px; }
.produto__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.produto__n { font-size: 1.3rem; font-weight: 700; color: var(--tinta-forte); }
.produto__barra {
  height: 6px; border-radius: 99px; overflow: hidden; margin: 0.4rem 0 0.35rem;
  background: var(--superficie-2); border: 1px solid var(--linha);
}
.produto__barra > span { display: block; height: 100%; background: var(--agua-texto); }
.produto__termos { font-size: 0.75rem; color: var(--texto-suave); margin-top: 0.3rem; }

/* ── feed de matérias ─────────────────────────────────────────────────── */
.feed__filtros {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap; margin: 0.7rem 0;
}
.feed__filtros .filtros { margin-bottom: 0; }
.feed__filtros .busca { max-width: 260px; }
.feed__ativo { margin: 0 0 0.6rem; }

.feed { display: grid; gap: 0.7rem; }
/* A régua grossa à esquerda é o que separa matéria de cartão comum: ela
   ganha cor conforme a decisão da equipe (ver `.materia--*`). */
.materia {
  border-left: 3px solid var(--linha);
  padding: 0.8rem 0.95rem;
}
/* A cor da borda é o papel: de longe se vê se a página está cheia de
   concorrente ou de matéria própria, sem ler uma palavra. */
.materia--propria { border-left-color: var(--verde); }
.materia--concorrente { border-left-color: var(--alerta-texto); }
.materia--candidato { border-left-color: var(--texto-suave); }
.materia--setor { border-left-color: var(--agua-texto); }

.materia__topo {
  display: flex; align-items: center; gap: 0.45rem;
  flex-wrap: wrap; margin-bottom: 0.35rem;
}
.fita {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem; border-radius: 4px;
  background: var(--superficie-2); color: var(--texto-suave);
  border: 1px solid var(--linha);
}
.materia__empresa { font-size: 0.9rem; }
.materia__titulo { margin: 0 0 0.3rem; font-size: 1rem; line-height: 1.35; }
.materia__titulo a { color: var(--tinta-forte); }
.materia__porque { margin: 0.3rem 0; }
.materia__pauta { margin: 0.3rem 0; }
.materia__pe {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--linha);
  font-size: 0.78rem; color: var(--texto-suave);
}
.materia__produtos { color: var(--agua-texto); }

@media (max-width: 40rem) {
  .barra__acoes { margin-left: 0; width: 100%; }
  .kpi__valor { font-size: 1.45rem; }
  .feed__filtros .busca { max-width: 100%; }
}

/* ── temas: sobre o que cada empresa é citada ─────────────────────────────
   Era uma lista com marcador de bala — a comparação que ESTA seção existe para
   fazer (a T&D é citada por preço, o concorrente por tecnologia) não se lia,
   porque os dois viravam duas listas soltas uma embaixo da outra. Agora são
   cartões lado a lado e cada tema é uma pastilha com o número colado. */
.temas { margin: 1.6rem 0; }
.temas > h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.temas__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem;
}
.temas__cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.75rem 0.85rem;
}
.temas__lista {
  list-style: none; margin: 0.55rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.tema {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--superficie-2); border: 1px solid var(--linha);
  border-radius: 99px; padding: 0.15rem 0.5rem; font-size: 0.8rem;
}
.tema > span { font-weight: 700; color: var(--agua-texto); }

/* ⚠️ `.nota` e `.nota--alerta` moravam aqui também. Subiram para a definição
   única, junto do primeiro `.nota` — ⛔ não redefinir por aqui. */
.feed__mais { margin-top: 0.8rem; text-align: center; }

/* A decisão da equipe sobre a matéria. Fica no pé do cartão, discreta: ela é
   marcação interna e ⛔ não pode se parecer com o botão de publicar, que mora
   noutra tela e leva coisa ao ar. */
.materia__acoes { display: flex; gap: 0.35rem; align-items: center; margin-left: auto; flex-wrap: wrap; }
.materia__marca { font-size: 0.78rem; font-weight: 600; }
.materia__marca--pauta { color: var(--verde-texto); }
.materia__marca--dispensada { color: var(--texto-suave); }

/* ── a pesquisa da inteligência de mercado ───────────────────────────
   🔴 Antes eram três botões de período; todas as demais condições da busca
   estavam fixas no SQL. Este bloco é o que as traz para a tela.
   ⚠️ Os campos quebram em grade fluida: são oito e não cabem em uma linha de
   notebook — e filtro que exige rolagem lateral não é usado. */
/* O sinal da guia de custo: ponto de estado, ou marca de alerta. ⛔ Nunca
   um numero — dinheiro nao se resume a contagem, e "R$ 2.533" no rotulo
   competiria com os selos de quantidade das outras guias. */
.guias__sinal { display: inline-flex; align-items: center; font-size: 0.8rem; }
.guias__sinal--ponto {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--texto-suave); margin-left: 0.1rem;
}
.guias__sinal--on { background: var(--verde); }
.guias__sinal--alerta { filter: none; }

.pesquisa { margin-bottom: 0.9rem; }

/* A gaveta dos 8 campos. O resumo do recorte é o proprio botao de abrir: a
   frase que diz o que esta na tela e a frase em que se clica para mudar. */
.pesquisa__mais > summary {
  display: flex; align-items: baseline; gap: 0.5rem;
  cursor: pointer; list-style: none; padding: 0.15rem 0;
  border-radius: 0.3rem;
}
.pesquisa__mais > summary::-webkit-details-marker { display: none; }
.pesquisa__mais > summary:focus-visible { outline: 2px solid var(--agua-texto); outline-offset: 2px; }
.pesquisa__resumo { margin: 0; }
.pesquisa__abrir {
  font-size: 0.8rem; color: var(--agua-texto); white-space: nowrap;
  border-bottom: 1px dashed currentColor;
}
.pesquisa__mais[open] > summary { margin-bottom: 0.6rem; }
.pesquisa__mais[open] .pesquisa__abrir::after { content: ' \2191'; }
.pesquisa__mais:not([open]) .pesquisa__abrir::after { content: ' \2193'; }
.pesquisa__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem 0.7rem;
  align-items: end;
  margin-top: 0.5rem;
}
.pesquisa__campos label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pesquisa__campos input,
.pesquisa__campos select {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.35em 0.5em;
  border: 1px solid var(--linha);
  border-radius: 0.4rem;
  background: var(--superficie);
  color: var(--texto);
  min-width: 0;
}
.pesquisa__campos input:focus-visible,
.pesquisa__campos select:focus-visible { outline: 2px solid var(--agua-texto); outline-offset: 1px; }
/* Campo com valor fica marcado: com oito filtros, "por que só aparecem 3
   matérias?" tem de se responder com o olho, sem abrir cada seletor. */
.pesquisa__campos [data-ativo='sim'] { border-color: var(--agua-texto); box-shadow: inset 0 0 0 1px var(--agua-texto); }
.pesquisa__campos button { align-self: end; }

/* ── A FILA DE TRIAGEM DE IMPRENSA ────────────────────────────────────────
   Era uma `.tabela` genérica, e o preço aparecia em três lugares: o resumo que
   a IA escreve não cabia em coluna nenhuma (então quem decidia abria a matéria
   numa aba nova, ou decidia pelo título); a coluna de ações caía fora da
   largura no celular (então do telefone não se aprovava nada); e as quatro
   ações tinham exatamente o mesmo peso visual, num lugar onde uma delas manda
   texto para o site e outra é só "editar".

   Agora é uma lista de cartões: marcar · conteúdo · decidir. O estado da
   matéria é a cor da borda esquerda, na mesma gramática do feed de mercado —
   quem já conhece uma visão lê a outra sem aprender nada novo. */

.fila { display: grid; gap: 0.6rem; }

.fila__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.2rem 0.75rem;
  align-items: start;
  padding: 0.8rem 0.95rem;
  border-left: 3px solid var(--linha);
}
.fila__item--rascunho { border-left-color: var(--alerta-texto); }
.fila__item--aprovado { border-left-color: var(--verde); }
/* Descartada não é erro — é decisão tomada. Fica apagada, não vermelha: o
   vermelho da casa está reservado para o que quebrou. */
.fila__item--descartado { border-left-color: var(--linha); opacity: 0.72; }
.fila__item--descartado:hover { opacity: 1; }
.fila__item--marcada { border-color: var(--agua-texto); background: var(--superficie-2); }

/* Alvo de toque de verdade: a caixinha do navegador tem 13px e no celular
   errar a marcação é marcar a matéria errada. */
.fila__marcar { display: grid; place-items: center; padding: 0.15rem 0.1rem; cursor: pointer; }
.fila__marcar input { width: 18px; height: 18px; accent-color: var(--verde-texto); cursor: pointer; }

.fila__corpo { min-width: 0; }
.fila__selos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.25rem; }
.fila__origem { font-size: 0.75rem; color: var(--texto-suave); }

.fila__titulo { margin: 0 0 0.2rem; font-size: 1rem; line-height: 1.35; }
/* ⚠️ O link herda a cor da marca em vez do azul-do-navegador sublinhado que
   estava aí: numa lista de vinte títulos, vinte links azuis sublinhados leem
   como um bloco de ruído, e o título é justamente o que se lê primeiro. */
.fila__titulo a { color: var(--tinta-forte); text-decoration: none; font-weight: 700; }
.fila__titulo a:hover { color: var(--agua-texto); text-decoration: underline; }
.fila__titulo a:focus-visible { outline: 2px solid var(--agua-texto); outline-offset: 2px; border-radius: 3px; }

.fila__meta {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.55rem;
  margin: 0; font-size: 0.8rem; color: var(--texto-suave);
}
.fila__meta strong { color: var(--texto); font-weight: 600; }
/* Separador em CSS: escrever " · " no HTML deixaria o ponto órfão numa linha
   quando o texto quebra. */
.fila__meta > * + *::before { content: '· '; color: var(--linha); }
.fila__porte { text-transform: lowercase; }

/* O resumo da IA, que a tabela não tinha onde pôr. Duas linhas: é o suficiente
   para dizer se a matéria fala da T&D, que é a única pergunta desta fila. */
.fila__resumo {
  margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--texto-suave);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}
.fila__nota { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--texto-suave); }
.fila__nota strong { color: var(--texto); }
.fila__nota--discreta { font-size: 0.78rem; }

.fila__acoes { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }

/* ── faixa de ferramentas ─────────────────────────────────────────────── */
.fila__ferramentas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.fila__ferramentas .filtros { margin-bottom: 0; }
.fila__achar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fila__achar .busca { min-width: min(22rem, 100%); }
.fila__ordem {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 600; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.fila__ordem select {
  font: inherit; font-size: 0.85rem; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  padding: 0.35em 0.5em; border: 1px solid var(--linha); border-radius: 0.4rem;
  background: var(--superficie); color: var(--texto);
}
.fila__ordem select:focus-visible { outline: 2px solid var(--agua-texto); outline-offset: 1px; }

.fila__atalhos {
  display: flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap; margin-bottom: 0.7rem;
}
.fila__atalhos .ajuda { margin: 0; }

/* ── barra de lote ────────────────────────────────────────────────────────
   Aparece só com seleção e fica presa ao rodapé da janela. Sticky e não fixed:
   fixed cobriria o último cartão da lista, e o último cartão é justamente o
   que se está olhando quando se rola até o fim. */
.lote { position: sticky; bottom: 0.75rem; z-index: 40; margin-top: 0.8rem; }
.lote__caixa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem; flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  background: var(--superficie);
  border: 1px solid var(--agua-texto);
  border-radius: 999px;
  box-shadow: var(--sombra);
}
.lote__quantas { font-size: 0.9rem; color: var(--tinta-forte); }
.lote__acoes { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* ── esqueleto de carregamento ────────────────────────────────────────────
   A lista piscar vazia e depois encher lê como "não há matéria" por meio
   segundo. Nesta tela isso não é detalhe de acabamento: "não há matéria" é
   exatamente a conclusão errada que o painel já induziu uma vez, em 21/08. */
/* O envoltório dos blocos. Existia só embutido na fila de imprensa, e por isso
   as outras nove telas ⛔ não tinham onde pendurar o `aria-busy`. */
.esqueletos { display: grid; gap: 0.6rem; }
.esqueleto {
  display: grid; gap: 0.45rem;
  padding: 0.9rem; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
}
.esqueleto span {
  display: block; height: 0.7rem; border-radius: 99px;
  background: linear-gradient(90deg, var(--superficie-2), var(--linha), var(--superficie-2));
  background-size: 200% 100%;
  animation: esqueleto 1.4s ease-in-out infinite;
}
.esqueleto span:nth-child(1) { width: 45%; }
.esqueleto span:nth-child(2) { width: 85%; }
.esqueleto span:nth-child(3) { width: 60%; }
@keyframes esqueleto { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto span { animation: none; } }

/* ── o recado ganha ação, e ganha o tom âmbar que faltava ─────────────────
   🔴 `recado(msg, 'aviso')` já era chamado em três lugares — inclusive na
   busca que responde EM PARTE — e não existia estilo para 'aviso': a frase
   "uma fonte não respondeu" saía com o verde de sucesso. */
.recado[data-tipo='aviso'] { background: var(--alerta-fundo); color: var(--alerta-texto); }

/* O botão de confirmar um descarte usa `.btn--perigo`, que nasceu sem borda —
   e sem borda ele fica visualmente MENOS forte que o "Cancelar" ao lado, que
   tem contorno. Dentro do modal ele ganha o contorno de volta: a ação
   consequente não pode parecer a opção secundária. */
.modal__acoes .btn--perigo { border-color: var(--erro-texto); }
.recado__acao {
  font: inherit; font-size: 0.82rem; font-weight: 700;
  margin-left: 0.5rem; padding: 0.15em 0.7em;
  border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer;
}
.recado__acao:hover { background: rgb(0 0 0 / 8%); }
.recado__acao:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── o placar de mercado no celular ───────────────────────────────────────
   A `.rolagem` resolve tabela larga com rolagem lateral — e rolagem lateral
   dentro de uma página que já rola verticalmente é a interação que ninguém
   descobre. Abaixo de 720px cada linha vira cartão e cada célula ganha o nome
   da coluna à esquerda, que é a informação que a rolagem escondia. */
@media (max-width: 45rem) {
  .rolagem:has(.tabela--placar) { border: 0; background: transparent; }
  .tabela--placar thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela--placar, .tabela--placar tbody, .tabela--placar tr, .tabela--placar td { display: block; width: 100%; }
  .tabela--placar tr {
    margin-bottom: 0.6rem; padding: 0.35rem 0.15rem;
    background: var(--superficie);
    border: 1px solid var(--linha); border-radius: var(--raio);
  }
  .tabela--placar td { border-bottom: 0; padding: 0.3rem 0.7rem; }
  .tabela--placar td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--texto-suave);
  }
  .tabela--placar td:empty { display: none; }
  .placar__fatia { min-width: 0; }
}

@media (max-width: 40rem) {
  /* A decisão vai para baixo do texto e ocupa a linha inteira: espremida na
     terceira coluna ela virava uma pilha de botões de 4 caracteres. */
  .fila__item { grid-template-columns: auto minmax(0, 1fr); }
  .fila__acoes { grid-column: 1 / -1; justify-content: flex-start; margin-top: 0.55rem; }
  .fila__ferramentas { align-items: stretch; }
  .fila__achar { width: 100%; }
  .fila__achar .busca { flex: 1 1 100%; }
  .lote__caixa { border-radius: var(--raio); }
  .lote__acoes .btn { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   A INTELIGÊNCIA DE MERCADO
   ═══════════════════════════════════════════════════════════════════════════
   🔴 A tela abria por indicador e tabela — seis números, dez linhas e catorze
   cartões, todos com o mesmo peso visual. Peso igual é o mesmo que peso nenhum:
   quem entra lê tudo ou não lê nada, e acaba lendo nada.

   A hierarquia aqui é a da decisão, e ela é VISUAL antes de ser textual:
     · a frente é o objeto mais pesado da tela — sombra, borda de calor, número
       grande. É o que se vê da porta;
     · a ação é uma linha com endereço à esquerda e conteúdo à direita, no ritmo
       de uma lista de tarefas, porque é isso que ela é;
     · o achado é plano e discreto — importa, mas não é o que se faz hoje;
     · o placar, abaixo, continua sendo tabela. Ele é a prova, e prova não
       precisa de brilho.

   ⚖️ Nenhum estado depende só de cor: calor tem rótulo escrito, família de
   achado tem nome, canal tem ícone E palavra. Painel que só fala por cor
   exclui quem não distingue as duas que você escolheu. */

.bloco--destaque {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: var(--sombra);
}

/* ── a barra de estado da leitura ─────────────────────────────────────────
   Aparece SEMPRE, inclusive quando está tudo lido: uma tela que mostra três
   frentes sem dizer que metade do acervo não foi lida mente por omissão sobre
   a própria cobertura. */
.ia-estado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem; flex-wrap: wrap;
  margin: 0.15rem 0 0.9rem;
  padding: 0.5rem 0.8rem;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 0.86rem;
}
.ia-estado__texto { color: var(--texto-suave); }
.ia-estado__texto strong { color: var(--tinta-forte); }

/* ── a frente ─────────────────────────────────────────────────────────────
   Geografia × evento. Três notícias de reajuste em São Paulo são UMA decisão
   de verba, e o cartão precisa ter o peso de uma decisão de verba. */
.frentes { display: grid; gap: 0.75rem; }

.frente {
  position: relative;
  padding: 0.85rem 1rem 0.75rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha);
  border-radius: var(--raio);
}
/* O calor é o ÚNICO uso de cor forte nesta tela, e é deliberado: se tudo
   chamasse atenção, nada chamaria. Âmbar para o que paga a conta agora. */
.frente--quente {
  border-left-color: var(--alerta-texto);
  /* Cor de fundo E imagem, separadas de proposito: no tema escuro o
     --alerta-fundo e translucido, e um gradiente sozinho deixaria a borda
     esquerda compor com a cor da PAGINA em vez da cor do cartao. */
  background-color: var(--superficie);
  background-image: linear-gradient(90deg, var(--alerta-fundo) 0%, var(--superficie) 38%);
}
.frente--morna  { border-left-color: var(--agua-texto); }
.frente--fria   { border-left-color: var(--linha); }

.frente__topo {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.3rem 0.6rem; margin-bottom: 0.35rem;
}
/* A PRAÇA vem primeiro e é a maior coisa do cartão: campanha se compra por
   praça, e é a primeira pergunta de quem tem verba na mão. */
.frente__lugar {
  font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--tinta-forte);
}
.frente__uf {
  font-size: 0.72rem; font-weight: 700; vertical-align: 0.28em;
  color: var(--texto-suave); letter-spacing: 0.04em;
}
.frente__evento {
  font-size: 0.78rem; font-weight: 600; text-transform: lowercase;
  color: var(--agua-texto);
  padding: 0.1em 0.6em; border: 1px solid currentColor; border-radius: 999px;
}
/* O número da notícia — "8%". É o que vai para dentro do anúncio, então tem
   de ser legível de longe e conferível na matéria, logo abaixo. */
.frente__magnitude {
  font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--alerta-texto);
}
.frente__calor {
  margin-left: auto;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texto-suave);
}
.frente--quente .frente__calor { color: var(--alerta-texto); }

.frente__gancho {
  margin: 0 0 0.6rem; font-size: 0.88rem; line-height: 1.4;
  color: var(--texto-suave);
}

/* ── a ação ───────────────────────────────────────────────────────────────
   Canal à esquerda, conteúdo à direita. O ritmo é o de uma lista de tarefas
   porque é exatamente isso que ela é — e o canal fica numa coluna fixa para
   que a pessoa de mídia paga consiga varrer só a dela com o olho. */
.frente__acoes { display: grid; gap: 0.4rem; }

.acao {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.15rem 0.9rem; align-items: start;
  padding: 0.45rem 0.6rem;
  background: var(--superficie-2);
  border-radius: 8px;
}
/* A coluna do endereco: quem faz (canal) e onde (alvo). Antes o alvo ficava
   numa linha propria a direita e esta coluna era espaco em branco — a mesma
   informacao, uma linha a mais por acao, e uma fila de decisoes que ninguem
   consegue varrer sem rolar. */
.acao__endereco { display: grid; gap: 0.1rem; min-width: 0; }
.acao__canal {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-suave);
  cursor: help;
}
.acao__icone { font-size: 0.95rem; line-height: 1; }
.acao--ads       .acao__canal { color: var(--alerta-texto); }
.acao--seo       .acao__canal { color: var(--verde-texto); }
.acao--imprensa  .acao__canal { color: var(--agua-texto); }
.acao--comercial .acao__canal { color: var(--texto-suave); }

.acao__corpo { min-width: 0; }
.acao__titulo {
  margin: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.35;
  color: var(--texto);
}
.acao__alvo {
  font-size: 0.78rem; line-height: 1.3; color: var(--texto-suave);
  overflow-wrap: anywhere;
}
/* Os termos são o que a pessoa DIGITA — então são mostrados como texto de
   máquina, não como etiqueta de marketing. A diferença tipográfica é o que
   avisa que aquilo se copia e cola numa ferramenta. */
.acao__termos { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.acao__termos code {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  padding: 0.12em 0.45em;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 5px;
  color: var(--texto-suave);
}

/* A dobra da frente fria: continua sendo uma linha clicavel com a contagem a
   vista, nao um cartao mutilado. */
.frente__dobra > summary {
  cursor: pointer; padding: 0.3rem 0;
  font-size: 0.84rem; font-weight: 600; color: var(--agua-texto);
}
.frente__dobra > summary:hover { text-decoration: underline; }
.frente__dobra[open] > summary { margin-bottom: 0.35rem; }

.frente__pe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; flex-wrap: wrap;
  margin-top: 0.6rem; padding-top: 0.5rem;
  border-top: 1px solid var(--linha);
}

/* ── o plano por canal ────────────────────────────────────────────────────
   As mesmas ações, reorganizadas pela forma como um time divide a semana. */
.plano {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 0.6rem;
}
.plano__coluna {
  padding: 0.7rem 0.8rem;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.plano__titulo {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave);
}
.plano__n {
  margin-left: auto;
  font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--tinta-forte);
}
.plano__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.plano__lista li { display: grid; gap: 0.1rem; }
.plano__item { font-size: 0.86rem; line-height: 1.35; color: var(--texto); }

/* A gaveta do resto da coluna. Ate 10/09/2026 aqui havia uma frase morta ("e
   mais 30.") sem destino nenhum — o dado ja vinha inteiro da API e a tela o
   escondia sem porta. A linha continua discreta de proposito: ela e saida,
   nao chamada. */
.plano__mais > summary {
  cursor: pointer; padding: 0.4rem 0 0.1rem;
  font-size: 0.8rem; font-weight: 600; color: var(--agua-texto);
}
.plano__mais > summary:hover { text-decoration: underline; }
.plano__mais > summary:focus-visible { outline: 2px solid var(--agua-texto); outline-offset: 2px; }
.plano__mais[open] > summary { margin-bottom: 0.35rem; }

/* ── os achados ───────────────────────────────────────────────────────────
   Planos e discretos de propósito: importam, mas não são o que se faz hoje.
   Competem com a frente se ganharem sombra — e perder essa disputa é o que
   fazia a tela antiga não ter foco nenhum. */
/* ══════════════════════════════════════════════════════════════════════
   O DESTAQUE ABSOLUTO — ⛔ UM por tela
   ══════════════════════════════════════════════════════════════════════
   Pedido do Anderson em 24/08 para "O que ninguem pegou ainda": e a unica
   peca desta tela que aponta o que AINDA NAO aconteceu. Tudo o mais e
   retrato do passado.

   🎯 O destaque nao vem de cor mais forte no MESMO plano — vem de INVERTER
   o plano: painel escuro num painel claro (e claro num escuro), que e o
   unico contraste que nenhum outro bloco desta tela usa. Fosse so uma borda
   grossa, competiria com as faixas de familia e urgencia dos cartoes.

   ⛔ Um segundo bloco com esta classe destroi o efeito: dois destaques
   absolutos sao zero destaques absolutos. Por isso o modo e PARAMETRO de
   htmlAchados, e nao regra dentro dela. */
.destaque {
  background: var(--destaque-fundo);
  border-radius: var(--raio);
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--sombra);
}
.destaque__topo { margin-bottom: 0.2rem; }
.destaque__etiqueta {
  display: inline-block;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--azul);
  background: var(--verde);
  border-radius: 99px; padding: 0.15rem 0.5rem;
  margin-bottom: 0.45rem;
}
.destaque__titulo {
  color: var(--destaque-titulo); font-size: 1.3rem; line-height: 1.15; margin: 0;
}
.destaque__conta {
  margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--destaque-conta);
}
/* Os cartoes ficam CLAROS sobre o painel escuro: e a inversao que carrega o
   destaque. ⛔ Nao repintar familia nem urgencia — elas continuam sendo o
   que dizem de que natureza e o achado e o quanto ele corre.

   🌙 No escuro o painel inverte (o fundo da pagina JA e azul, entao repetir o
   azul sumiria com o destaque) — mas o cartao dentro dele ⛔ nao inverte de
   novo: ele e claro nos DOIS temas. Por isso a tinta destes cartoes e escrita
   com valor literal e ⛔ nao com token de tema: `var(--tinta-forte)` viraria
   texto claro sobre cartao branco no escuro, que e o defeito que estas cinco
   linhas existem para evitar. */
.destaque .achado { background: #ffffff; border-color: transparent; }
.destaque .achado__titulo { color: var(--azul); }
.destaque .achado__evidencia { color: #22262b; }
.destaque .achado__acao,
.destaque .achado__familia { color: #5d666e; }

.achados {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: 0.6rem;
}
.achados--destaque { margin-top: 0.75rem; }
.achado {
  padding: 0.7rem 0.85rem;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha);
  border-radius: var(--raio);
}
/* A família diz de que natureza é o problema. `maquina` é o único que ganha
   cor de alerta: dado furado invalida a leitura toda, e essa é a hierarquia
   real — não uma preferência de paleta. */
.achado--maquina    { border-left-color: var(--erro-texto); }
.achado--pauta      { border-left-color: var(--verde-texto); }
.achado--competicao { border-left-color: var(--agua-texto); }

/* A urgencia engrossa a faixa, sem inventar uma quarta cor. A familia ja diz de
   que natureza e o problema; a urgencia diz o quanto ele corre. Duas variaveis
   em dois canais visuais distintos (matiz e espessura) se leem juntas — duas
   variaveis no mesmo canal viram uma so, e a que perde e sempre a segunda. */
.achado--u3 { border-left-width: 5px; }
.achado--u2 { border-left-width: 3px; }
.achado--u1 { border-left-width: 2px; }

.achado__topo { margin-bottom: 0.3rem; }
.achado__familia {
  display: block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-suave);
}
.achado__titulo { margin: 0.1rem 0 0; font-size: 0.95rem; line-height: 1.3; color: var(--tinta-forte); }
.achado__evidencia { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--texto); }
.achado__acao { margin: 0.35rem 0 0.5rem; font-size: 0.82rem; color: var(--texto-suave); }

/* ── as monitoradas sem menção ────────────────────────────────────────────
   Eram nove linhas de tabela com quatro células vazias cada. Agora é uma
   frase que dobra — continua sendo informação, deixa de ser parede. */
.zerados { margin-top: 0.6rem; }
.zerados > summary {
  cursor: pointer; font-size: 0.84rem; color: var(--texto-suave);
  padding: 0.35rem 0;
}
.zerados > summary:hover { color: var(--agua-texto); }
/* Os tres silencios. Cores distintas porque sao decisoes distintas:
   verde = espaco vago (oportunidade), neutro = calou (contexto),
   ambar = defeito NOSSO (cadastro pela metade). */
.silencio {
  border-left: 3px solid var(--linha);
  padding: 0.6rem 0 0.6rem 0.8rem;
  margin-top: 0.8rem;
}
.silencio--aberto { border-left-color: var(--verde); }
.silencio--defeito { border-left-color: var(--ambar); }
.silencio > strong { display: block; margin-bottom: 0.35rem; }
.silencio .ajuda { margin-top: 0.35rem; }
.zerados__item em { font-style: normal; margin-left: 0.25rem; }

/* 🎯 "Quem a matéria nomeia" -- o eixo de quem foi CITADO, ao lado da tabela
   que conta quem foi BUSCADO. Separado por uma linha de topo porque são dois
   números diferentes de propósito: encostados, seriam lidos como o mesmo. */
.quem-apareceu {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
}
.quem-apareceu__titulo {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}

.zerados__lista { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0 0.5rem; }

/* ── 🏢 Quem é quem: a faixa que separa os grupos do mapa ─────────────────
   A tabela é UMA só de propósito — cinco tabelas empilhadas repetiriam o
   cabeçalho cinco vezes e quebrariam a comparação de volume entre grupos.
   A separação é uma linha de faixa, ⛔ não um contorno.
   ⚠️ `--decidir` marca o único grupo que PEDE ação (os que ninguém
   classificou). A borda âmbar à esquerda é o mesmo vocabulário de
   `.silencio--defeito`: âmbar nesta tela quer dizer "alguém precisa mexer". */
.mapa__grupo > td {
  background: var(--fundo);
  border-top: 1px solid var(--linha);
  padding-top: 0.7rem;
  padding-bottom: 0.5rem;
}
.mapa__grupo > td > strong { font-size: 0.9rem; }
.mapa__grupo--decidir > td {
  border-left: 3px solid var(--ambar);
  background: var(--fundo);
}
.mapa__grupo:first-child > td { border-top: 0; }
.zerados__item {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.82rem; color: var(--texto);
  padding: 0.2em 0.6em;
  background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 999px;
}

/* A dobra fina — a prosa longa que saiu do corpo da tela e continua a um
   clique. ⛔ Não some: a ressalva que impede o número virar "market share"
   precisa continuar alcançável. */
.dobra--fina > summary {
  font-size: 0.8rem; font-weight: 600; color: var(--texto-suave);
  padding: 0.25rem 0; cursor: pointer;
}
.dobra--fina > summary:hover { color: var(--agua-texto); }
.dobra--fina .ajuda { margin-top: 0.25rem; }

@media (max-width: 45rem) {
  /* O canal vai para cima do conteúdo: 7,5rem de coluna fixa num telefone
     deixa o título da ação com quatro palavras por linha. */
  .acao { grid-template-columns: 1fr; gap: 0.2rem; }
  /* No telefone o endereco vira uma linha so: rotulo e alvo lado a lado. */
  .acao__endereco { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 0.45rem; }
  .frente__calor { margin-left: 0; }
  .bloco--destaque { padding: 0.85rem 0.8rem 1rem; }
}

/* O alvo hasteado: quando as ações da frente miram todas a mesma praça, ele
   deixa de ser repetição em quatro linhas e vira uma linha só, colada no lugar
   a que pertence. ⚠️ Continua legível como texto, e não só como posição — quem
   chega pelo leitor de tela ouve "alvo" antes da praça. */
.frente__alvo {
  display: flex; align-items: baseline; gap: 0.45rem;
  margin: 0 0 0.5rem;
  font-size: 0.82rem; color: var(--texto);
}
.frente__alvo-rotulo {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--texto-suave);
}

/* A coluna de endereço encolhe quando o alvo sobe para o cabeçalho: sem a
   segunda linha, 11rem viram espaço em branco entre o canal e o trabalho. */
.frente__alvo ~ .frente__acoes .acao,
.frente__alvo ~ .frente__dobra .acao { grid-template-columns: 7.5rem minmax(0, 1fr); }

@media (max-width: 45rem) {
  .frente__alvo ~ .frente__acoes .acao,
  .frente__alvo ~ .frente__dobra .acao { grid-template-columns: 1fr; }
}

/* ── as guias temáticas da tela Mercado ───────────────────────────────────
   📏 A tela tinha 7.084 px numa coluna só. As guias dão atalho para a ordem
   que já existia — ⛔ não a reordenam.

   ⚠️ É o SEGUNDO nível de navegação (abas → guias) desde 10/09/2026, quando
   Imprensa e Mercado deixaram de dividir uma aba e a barra de visões — a
   pílula azul que ficava no meio — foi embora com a divisão. Guia continua
   sendo SUBLINHADO, e ⛔ não pílula: `.abas` já é pílula cinza, e duas barras
   de pílula empilhadas deixam de dizer o que está dentro do quê. */
.guias {
  display: flex; gap: 0.15rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--linha);
  margin: 1.5rem 0 1.4rem;
}
.guias button {
  font-size: 0.95rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  color: var(--texto-suave);
  /* O -1px é o que faz a guia ativa MORDER a linha de baixo em vez de flutuar
     sobre ela — sem isso a aba parece descolada da área que ela abre. */
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.guias button[aria-selected='true'] {
  color: var(--tinta-forte); border-bottom-color: var(--azul);
}

/* O número da guia. ⛔ Ele NASCE `hidden` e só aparece quando há medida — zero
   e "ainda não sei" são coisas diferentes, e é a mesma régua do medidor de
   dinheiro desta tela. */
.guias__n {
  font-size: 0.78rem; font-weight: 700; line-height: 1;
  padding: 0.3em 0.55em; border-radius: 99px;
  background: var(--superficie-2); color: var(--texto-suave);
}
.guias button[aria-selected='true'] .guias__n { background: var(--azul); color: #fff; }

/* No celular a barra rola em vez de quebrar em duas linhas: quatro guias
   empilhadas empurram o conteúdo para baixo justamente na tela em que ele já
   está mais longe. */
@media (max-width: 40rem) {
  .guias { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .guias::-webkit-scrollbar { display: none; }
  .guias button { white-space: nowrap; }
}

/* ── senha provisória ─────────────────────────────────────────────────────
   Este bloco existe porque a senha aparece UMA vez. Ele não é um aviso: é o
   próprio entregável da tela, e por isso ocupa espaço, tem cor de atenção e
   só sai quando a pessoa diz que anotou. Um toast levaria embora o único
   momento em que o valor existe. */
.senha-nova {
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border: 2px solid var(--alerta-texto);
  border-radius: var(--raio);
  background: var(--alerta-fundo);
}
.senha-nova__quem {
  margin: 0;
  font-size: 0.9rem;
  color: var(--texto);
}
.senha-nova__valor {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.senha-nova__valor code {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie);
  font-family: var(--fonte-mono);
  /* A senha vai ser lida em voz alta ou copiada a olho. Tamanho de corpo de
     texto transformaria o passo que não tem segunda chance num exercício de
     acuidade visual. */
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--texto);
  user-select: all;
}
.senha-nova .ajuda { margin: 0 0 0.7rem; }

/* ════════════════════ O MOVIMENTO DO PLACAR ═════════════════════
   🎯 Abre a guia Placar, antes da tabela: é a única parte da tela que responde
   "vale a pena eu ter aberto isto hoje?". */
.movimento {
  margin: 0 0 1.25rem;
  padding: .9rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--fundo-suave);
}
.movimento--tem { border-left: 3px solid var(--acento); }
.movimento--vazio { border-style: dashed; }
.movimento__titulo {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1rem; margin: 0 0 .6rem;
}
.movimento__selo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem;
  border-radius: 999px; background: var(--acento); color: #fff;
  font-size: .85rem; font-weight: 700;
}
.movimento__lista { list-style: none; margin: 0; padding: 0; }
.movimento__item {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .3rem 0; border-top: 1px solid var(--linha);
  font-size: .95rem;
}
.movimento__item:first-child { border-top: 0; }
.movimento__icone { width: 1.2rem; text-align: center; flex: none; opacity: .8; }
.movimento__item--subiu .movimento__icone,
.movimento__item--silencio_quebrado .movimento__icone { color: #2e7d32; opacity: 1; }
.movimento__item--caiu .movimento__icone { color: #c62828; opacity: 1; }

/* A seta ao lado do número, e a posição na frente do nome. */
.delta { margin-left: .35rem; font-size: .8rem; font-weight: 700; }
.delta--sobe { color: #2e7d32; }
.delta--desce { color: #c62828; }
.posto {
  display: inline-block; margin-right: .4rem; padding: .05rem .4rem;
  border-radius: 6px; background: var(--linha); font-size: .8rem; font-weight: 700;
}
.posto small { font-weight: 400; opacity: .75; margin-left: .2rem; }
.posto--sobe { background: #e8f5e9; color: #1b5e20; }
.posto--desce { background: #ffebee; color: #b71c1c; }

/* O botão do ritual + o limite armado, colados. */
.vigilia-armada { display: inline-flex; align-items: stretch; gap: 0; }
.vigilia-armada .btn--vigilia { border-radius: 8px 0 0 8px; }
.vigilia-armada select {
  border: 1px solid var(--linha); border-left: 0; border-radius: 0 8px 8px 0;
  background: var(--fundo); font-size: .85rem; padding: 0 .5rem;
}
.quadro--vigilia .lista-simples { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ── clientes e parceiros ─────────────────────────────────────────────
   Cada conta é um cartão, e a gente dela vem DENTRO do cartão. O arranjo
   é o que responde de olho a pergunta que a tela existe para responder —
   "quem tem acesso por esta empresa" — sem clique nenhum. Lista chapada de
   usuários com uma coluna "conta" obrigaria a ler linha por linha. */
.conta { padding: 1rem 1.1rem; margin-bottom: 0.9rem; }
.conta__topo {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.conta__topo h3 { margin: 0 0 0.15rem; font-size: 1.02rem; }
.conta__topo h3 .selo { vertical-align: middle; margin-left: 0.35rem; }
.conta__topo .ajuda { margin: 0.4rem 0 0; }
.conta__gente { margin-top: 0.85rem; border-top: 1px solid var(--linha); padding-top: 0.7rem; }
.conta__gente .ajuda { margin: 0; }
.conta__gente .tabela { margin: 0; }

/* ─────────────────────────────────────────────── registro do sistema */
/*
 * A tabela é de LEITURA DE RELANCE: a pessoa abre porque algo aconteceu e
 * varre a coluna do meio procurando a linha que não devia estar ali. Por isso
 * a hora encolhe, o ator encolhe, e o que sobra de largura vai para a ação.
 */
.log__hora {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* colunas de hora que não dançam */
  color: var(--texto-suave);
  font-size: 0.82rem;
}

/* Monoespaçada porque metade das ações é literalmente uma rota (`GET
   /api/v1/leads`) — em fonte proporcional a barra some no meio da palavra. */
.log__acao {
  font-family: var(--fonte-mono);
  font-size: 0.82rem;
  margin-left: 0.4rem;
  word-break: break-word;
}

.log__detalhe {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.log__ator {
  font-size: 0.82rem;
  color: var(--texto-suave);
  white-space: nowrap;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log__tecnico {
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────── de onde veio (25/08/2026) */

.log__origem { white-space: nowrap; }

/*
 * ⚠️ É um `<button>`, e ⛔ não um `<span>` com `onclick`. Ele filtra a tela
 * inteira — quem navega por teclado precisa alcançá-lo com Tab, e quem usa
 * leitor de tela precisa ouvir que aquilo é acionável. Todo o CSS abaixo
 * existe para tirar dele a APARÊNCIA de botão sem tirar o comportamento.
 */
.log__ip {
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--linha);
  padding: 0;
  cursor: pointer;
}

.log__ip:hover,
.log__ip:focus-visible { color: var(--texto); border-bottom-color: currentColor; }

.log__pais {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

/*
 * O conteúdo enviado. `pre-wrap` + `break-word` porque JSON de formulário vem
 * numa linha só — sem quebra, uma única requisição de 400 caracteres estica a
 * tabela e joga as outras quatro colunas para fora da tela.
 *
 * 🔴 `max-height` com rolagem, e ⛔ não `overflow: hidden`. Cortar sem
 * rolagem esconderia o fim do corpo sem dizer que há mais — numa tela cujo
 * trabalho é ser prova, texto escondido em silêncio é o pior desfecho.
 */
.log__corpo {
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.55rem;
  max-height: 7.5rem;
  overflow: auto;
  background: var(--fundo-suave);
  border-radius: 6px;
  font-family: var(--fonte-mono);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--texto-suave);
  white-space: pre-wrap;
  word-break: break-word;
}

/* No celular a coluna do ator sai: numa tabela dentro de uma faixa de 360 px,
   ela é a que menos responde à pergunta que traz alguém a esta tela. O dado
   continua no logs.json.
   ⚠️ A coluna «De onde» FICA. Ela é a que se olha no celular — quem abre o
   painel do telefone está respondendo a alguma coisa que aconteceu agora. */
@media (max-width: 40rem) {
  .log__ator { display: none; }
  [data-painel="registro"] .tabela thead th:nth-child(3) { display: none; }
  .log__corpo { max-height: 5rem; }
}

/* ── a área de quem é de fora (cliente/parceiro) ───────────────────── */
/* 🔴 Ela reaproveita .topo, .conteudo, .item, .moldura e .selo do painel — e
   isso NÃO é dizer que é o painel. O visual é o mesmo porque é o mesmo
   produto; o conteúdo é outro, e a API que o serve também.
   Só o que a área tem de próprio mora aqui. */
.area { min-height: 100dvh; background: var(--fundo); }
.area__titulo { margin: 0; font-size: 1.35rem; color: var(--tinta-forte); }

/* ── o menu da esquerda ────────────────────────────────────────────── */
/* 🔴 Coluna, e ⛔ não a fileira de abas do painel interno. O painel serve um
   time que passa o dia na mesma tela e sabe de cor onde fica cada coisa; esta
   área recebe alguém que entra três vezes por ano. Nome inteiro à vista, um
   embaixo do outro, é o que dispensa a pessoa de adivinhar. */
.area__moldura {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--respiro-gap);
  padding: var(--respiro) var(--respiro) 0;
}
/* 🔴 Aqui morreu o `max-width: 78rem; margin-inline: auto`. Coluna centrada faz
   a calha CRESCER com a janela: media em producao, o vao lateral era 28px a
   1024, 84px a 1360 e 204px a 1600 — numa tela de 1840 passava de 290px de
   cada lado, e a barra ficava boiando longe da marca do cabecalho, que abre em
   `var(--respiro)` e ⛔ nao centraliza. Calha CONSTANTE dos dois lados e o que
   ancora a barra na esquerda e alinha ela com o logotipo.
   ⚠️ `align-items: start` fica: e ele que deixa a barra ter altura propria (e,
   com isso, `position: sticky` ter para onde correr). */
/* `.conteudo` já centraliza e já tem respiro; dentro da moldura ele viraria
   uma segunda margem por cima da primeira. */
.conteudo--area { padding: 0 0 var(--respiro); max-width: none; margin-inline: 0; }

/* 🔴 BARRA, e ⛔ nao um cartao pousado no vao. Ela desce do rodape do cabecalho
   ate o pe da janela e fica la enquanto a pagina rola.
   🚨 `top: 1rem` era defeito medido: o `.topo` e sticky com `z-index: 20` e mede
   58,8px, entao 42,8px do alto do menu corriam POR BAIXO dele e o primeiro item
   sumia. `top` agora e a altura do cabecalho mais a calha.
   ⚠️ `align-content: start` ⛔ nao e enfeite: com `min-height` numa grade, as
   seis linhas se esticariam para preencher a barra inteira. */
.menu {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: 0.4rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  position: sticky;
  top: calc(var(--altura-topo) + var(--respiro));
  min-height: calc(100dvh - var(--altura-topo) - var(--respiro) * 2);
}
.menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: var(--texto);
  font-size: 0.9rem;
  text-align: left;
}
/* ⚠️ Este `:hover` guarda o FUNDO, que a base ⛔ não dá: o item lateral ocupa a
   linha inteira, e só a tinta mudando ⛔ não diz onde o ponteiro está. */
.menu__item:hover { background: var(--superficie-2); }
/* ⚠️ A seleção ⛔ não é só cor: quem ⛔ não distingue o azul do cinza precisa do
   peso da fonte e da barra à esquerda para saber onde está. */
.menu__item[aria-current='true'] {
  background: var(--superficie-2);
  color: var(--tinta-forte);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--verde);
}
.menu__nome { min-width: 0; }
.menu__conta {
  flex: 0 0 auto;
  min-width: 1.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  color: var(--texto-suave);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.menu__item[aria-current='true'] .menu__conta:not(.menu__conta--atencao) {
  background: var(--superficie);
}
/* O número que pede AÇÃO ⛔ não pode ter a mesma cor do que só conta itens —
   e ⛔ não pode perder o âmbar justamente quando a seção está aberta. */
.menu__conta--atencao,
.menu__item[aria-current='true'] .menu__conta--atencao {
  background: var(--alerta-fundo);
  border-color: transparent;
  color: var(--alerta-texto);
}

@media (max-width: 56rem) {
  /* No celular vira uma fita rolável no topo — mesma lista, mesma ordem. */
  .area__moldura { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 0.25rem;
    /* ⛔ A fita ⛔ nao herda a altura da barra: aqui ela e uma linha so. */
    min-height: 0;
  }
  .menu__item { white-space: nowrap; }
  .menu__item[aria-current='true'] { box-shadow: inset 0 -3px 0 var(--verde); }
}
.area__bloco { margin-top: 1.6rem; }
.area__h2 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  color: var(--tinta-forte);
}
.area__bloco .ajuda { margin-bottom: 0.8rem; max-width: 46rem; }

/* O formulário da área é uma COLUNA de campos largos, e ⛔ não a grade densa do
   painel: quem preenche aqui é alguém que entra três vezes por ano e lê cada
   rótulo. Densidade seria economia contra a pessoa errada. */
.area__form { display: grid; gap: 0.75rem; max-width: 34rem; padding: 1.1rem; }
.area__form .item__acoes { margin-top: 0.25rem; }
.area__form input:disabled, .area__form textarea:disabled {
  background: var(--superficie-2);
  color: var(--texto-suave);
  cursor: not-allowed;
}
.area__form code {
  font-size: 1rem;
  letter-spacing: 0.04em;
  user-select: all;
}
.area__bloco .recado code { user-select: all; font-size: 1rem; letter-spacing: 0.04em; }

/* A coluna única e larga de leitura das listas da área do cliente — e da aba
   Cobrança do painel, que usa a mesma. */
.area__lista { display: grid; gap: 0.9rem; }
.area__resumo { margin: 0; color: var(--texto); }

/* A ajuda que pede AÇÃO de quem está lendo — e ⛔ não a que só explica. O
   contraste com a `.ajuda` comum é o que faz o número âmbar do menu ter uma
   frase correspondente na tela: aceso lá, explicado aqui. */
.ajuda--atencao {
  margin-top: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--alerta-fundo);
  color: var(--alerta-texto);
}

/* ⚠️ O `.btn[disabled]` da casa usa `cursor: progress`, e ele existe para o
   botão que está ENVIANDO. Aqui o botão está desligado por REGRA — nada vai
   acontecer se esperar —, e o cursor de espera prometeria o contrário. */
.btn[disabled][data-fatura-situacao] { cursor: not-allowed; }

/* A comparação com o mês anterior é a MESMA informação da linha de cima — os
   números e o que eles viraram —, e ⛔ não um assunto novo. O `.item` distribui
   os filhos por `gap`, e a margem própria do <p> soma por cima: as duas linhas
   acabavam mais afastadas entre si do que do resto do cartão. */
.item__delta { margin-top: -0.45rem; }

/* ── RDE: o relatório de economia, em tela ─────────────────────────────
   O relatório que a T&D entrega ao cliente deixou de ser só um PDF: ele é lido
   campo a campo e desenhado aqui. São tabelas de NÚMERO, e número se lê em
   coluna — daí o alinhamento à direita e o `tabular-nums`, que dá a todos os
   dígitos a mesma largura para as casas se empilharem.

   ⚠️ Escopado em `.tabela--rde` de propósito. `.num` já existe e serve a
   outras telas com outro tratamento; mudar `.tabela td.num` mexeria em tudo. */
.tabela--rde td.num,
.tabela--rde th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* ⚠️ E ⛔ NÃO QUEBRAM. `.tabela--placar` já faz isso, e a tabela de faixas do
   cliente veste as duas classes — a de conferência veste só esta, então no
   estreito `R$ 20,0000` partia em duas linhas ali e ficava inteiro lá. A
   tabela rola dentro da `.rolagem`; o número ⛔ não precisa se dobrar. */
.tabela--rde td.num { white-space: nowrap; }

/* 🔴 A CAIXA ALTA DE `.tabela th` ⛔ NÃO PODE ALCANÇAR ESTA TABELA.
   Ela é decoração de rótulo de coluna, e aqui os cabeçalhos carregam DADO e
   UNIDADE: a faixa «0 m³ a 20 m³» saía «0 M³ A 20 M³» na tela do cliente e na
   de conferência. `M` é mega — maiúscula num símbolo do SI ⛔ não é estilo, é
   outra unidade. E o próprio RDE protege o símbolo: o cabeçalho impresso é
   «m³ FATURADO», minúsculo no meio de um título em caixa alta.
   ⚠️ De quebra, os rótulos longos do relatório completo («Volume médio
   consumido antes das soluções») voltam à caixa em que foram escritos —
   mesma palavra, mesma ordem, ⛔ nenhum texto novo. */
.tabela--rde th { text-transform: none; letter-spacing: 0; }

/* 🔴 A CONFERÊNCIA É A ÚNICA `.area__form` QUE ⛔ NÃO É UM FORMULÁRIO CURTO.
   O teto de 34rem foi feito para as telas de cadastro do cliente — meia dúzia
   de campos numa coluna. Aqui são 18 números e duas tabelas, e o mesmo teto os
   empilhava numa fita de 4.000px: quem confere tem o PDF aberto ao lado e
   desce os dois juntos, então cada rolagem a mais é um lugar a mais para o
   olho perder a linha.
   ⚠️ `minmax(20rem, …)` de propósito: com 15rem cabem três colunas na tela
   larga, e aí rótulos como «10. Valor de economia líquida no mês (R$)» quebram
   em duas linhas — o que devolve em altura o que a coluna economizou. */
[data-form-rde] { max-width: 62rem; }
.rde__campos {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* Os três números do topo do panorama. O `.barra__linha` de origem é para
   controle; aqui ele carrega leitura, e precisa de mais ar entre as colunas. */
.barra__linha--numeros { gap: 0.6rem 1.6rem; margin-bottom: 1rem; }

/* O título de cada cenário («sem as soluções» / «com as soluções»). É um <h4>
   porque mora dentro da dobra de um relatório, que já vem depois do <h2> da
   porta e do título do cartão. */
.rde__h4 { margin: 1.2rem 0 0.4rem; font-size: 0.95rem; }

/* ══════════════════════════════════════════════════════════════════════
   O «i» DE CADA BOTÃO (01/09/2026)

   🔴 O balão é `position: fixed` e mora no `<body>`, ⛔ nunca dentro da tira
   que o abriu: os «i» vivem em tabela com rolagem própria (`.rolagem`), em
   barra colada no rodapé (`.lote`, que é sticky) e em cartão com `overflow`.
   Em `absolute` ele seria cortado pelo pai em quase toda tela deste painel.

   ⚠️ z-index 50 é escolhido, ⛔ não copiado: fica ACIMA da barra de lote (40)
   e do topo sticky (20), e ABAIXO da caixa modal (60) — que promete tela
   inerte atrás dela e ⛔ não pode ter balão flutuando por cima.
   ══════════════════════════════════════════════════════════════════════ */
.ajuda-i {
  flex: none;
  align-self: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.35rem;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: transparent;
  color: var(--texto-suave);
  font: 700 0.7rem/1 var(--fonte);
  vertical-align: middle;
  cursor: help;
}

.ajuda-i:hover,
.ajuda-i[aria-expanded="true"] {
  border-color: var(--acento);
  color: var(--acento);
}

.balao {
  position: fixed;
  z-index: 50;
  max-width: min(23rem, calc(100vw - 1rem));
  /* A fita de guias tem nove botões, e o balão dela explica todos: sem teto de
     altura ele passaria da janela e a última guia ficaria fora de alcance. */
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  color: var(--texto);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* Uma tira de ação tem até cinco botões, e o balão explica todos: sem a linha
   entre eles vira parágrafo único e ninguém acha o botão que procurava. */
.balao__item + .balao__item {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linha);
}

.balao__item strong { display: block; margin-bottom: 0.2rem; }
.balao__item p { margin: 0; }
.balao__item p + p { margin-top: 0.35rem; }

/* 💸 A linha do dinheiro ⛔ não se sussurra: é ela que separa clicar de gastar,
   e é o único aviso antes do clique. */
.balao__custo {
  font-weight: 600;
  color: var(--verde-texto);
}

.balao__custo--gasta { color: var(--alerta-texto); }

.balao__nota { color: var(--texto-suave); }

/* 🔴 A fita de guias é `flex` de largura inteira e carrega a linha de baixo do
   grupo: o «i» irmão cairia sozinho na linha seguinte, como um ponto solto no
   meio da tela — visto na foto de 01/09. Ele sobe para o fim da última fileira
   de guias, sem entrar na fita, que ⛔ não aceita botão que não seja aba. */
.guias + .ajuda-i {
  display: block;
  margin: -2.6rem 0 1.2rem auto;
}

/* ══════════════════════════════════════════════════════════════════
   🏁 O PLACAR DE POSIÇÃO, POR PRODUTO  (10/09/2026)
   ══════════════════════════════════════════════════════════════════
   Um cartão por linha de produto, com os concorrentes em `<ol>` — e a
   marcação É a semântica: posição em lista ordenada, ⛔ não `<div>` com
   número desenhado. Leitor de tela anuncia "1 de 3" sozinho, e o
   ordinal na tela é só o reforço visual disso. */
.posicoes { display: grid; gap: 1rem; }
.posicao {
  border: 1px solid var(--linha); border-radius: 10px;
  background: var(--superficie); padding: 0.9rem 1rem;
  /* 🔴 MEDIDO NO CELULAR, 10/09/2026: com a memória de cálculo aberta a 390 px,
     a página inteira passou a rolar de lado (612 px de scrollWidth). O culpado
     ⛔ não é a tabela — é o `min-width: auto` que todo item de grid tem por
     padrão: ele deixa a coluna CRESCER até caber o filho mais largo, e o
     `overflow-x` da `.rolagem` nunca chega a valer. Zerar aqui devolve a rolagem
     para dentro da tabela, que é onde ela deve morar. */
  min-width: 0;
}
.posicao__topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.posicao__produto { margin: 0 0 0.15rem; font-size: 0.98rem; }
.posicao__aviso { margin: 0.6rem 0 0; }

.posicao__lista { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.posicao__jogador {
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.5rem 0.6rem; border-radius: 8px; background: var(--fundo-suave);
}
/* 🎯 A T&D se distingue por BORDA, ⛔ não por cor de fundo: fundo verde no
   nosso nome pintaria de "bom" uma linha que pode estar em 4º lugar. */
.posicao__jogador--nos { outline: 2px solid var(--acento); outline-offset: -2px; }
.posicao__lugar {
  flex: 0 0 2.1rem; font-weight: 700; font-size: 1.05rem;
  color: var(--tinta-forte); font-variant-numeric: tabular-nums;
}
.posicao__quem { flex: 1 1 auto; min-width: 0; }
.posicao__nome { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.posicao__porque { font-size: 0.84rem; margin-top: 0.15rem; }
.posicao__semdono { margin: 0.7rem 0 0; }
.posicao__memoria { margin-top: 0.8rem; }
.posicao__memoria > summary {
  cursor: pointer; font-size: 0.85rem; color: var(--texto-suave);
}
.posicao__memoria > summary:hover { color: var(--agua-texto); }
.posicoes__vazias { margin-top: 1rem; }

/* 📐 O relatório: a conta de cada matéria, aberta em parcelas. Números à
   direita e tabulares, porque coluna de peso que dança é coluna que ⛔ não
   se confere de relance. */
.memoria { margin-top: 0.8rem; }
.memoria__quem { margin: 0 0 0.3rem; font-size: 0.88rem; display: flex; gap: 0.5rem; align-items: baseline; }
.tabela--memoria td, .tabela--memoria th { vertical-align: top; }
.tabela--memoria .memoria__pontos {
  text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.regua { margin: 0.35rem 0 0.6rem; padding-left: 1.1rem; }
.regua li { margin-bottom: 0.2rem; }