/* Os tokens vêm do CRM: mesmo papel, mesmo laranja, mesma tipografia.
   O painel é outro sistema, mas é a mesma casa — e quem abre os dois no
   mesmo dia não deve sentir que trocou de empresa.

   Cor só por variável, contorno em vez de sombra, sem gradiente e sem
   canto medido no olho: a mesma régua anti-slop do produto. */
:root {
  --paper: #eae7df;
  --surface: #f4f2ec;
  --raised: #efece5;
  --line: #cbc6b8;
  --line-soft: #dcd8cd;
  --ink: #191c19;
  --ink-2: #3d423c;
  --ink-3: #6b7167;
  --ink-4: #8d9289;
  --acento: #e8921f;
  --acento-texto: #96570a;
  --azul: #144c76;
  --azul-texto: #113e60;
  --verde: #2f7a48;
  --amber: #866112;
  --brick: #8b2f21;
  --radius: 8px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100e0c;
    --surface: #1a1714;
    --raised: #221e1a;
    --line: #3a332b;
    --line-soft: #2a241e;
    --ink: #ede9e1;
    --ink-2: #cfc9be;
    --ink-3: #9a938a;
    --ink-4: #7d766d;
    --acento-texto: #f0a94a;
    --azul: #62a8dc;
    --azul-texto: #86bfe8;
    --verde: #6cbf87;
    --amber: #cfa441;
    --brick: #d4735b;
  }
}

* {
  box-sizing: border-box;
}

/* O atributo `hidden` esconde pela folha do navegador, e QUALQUER regra
   de autor com `display` a vence: `.entrada { display: grid }` deixava a
   tela de login desenhada por cima do painel já aberto. O !important
   aqui é o lugar certo dele — sem isso, todo bloco com display próprio
   teria de lembrar de tratar o hidden. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.marca {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--azul);
}
.marca span {
  color: var(--acento);
}
/* O "nobre" do menu mora num span (para sumir com o menu recolhido), e
   herdava o laranja do "monitor": a marca é azul e laranja. */
.marca span.marca-nome {
  color: var(--azul);
}

/* ------------------------------------------------------------ entrada */
/* Duas colunas desde a spec 034: à esquerda o que o Monitor é (quem chega
   pela landing page vem decidir), à direita entrar ou criar a conta. No
   celular, a vitrine sobe e o cartão vem embaixo. */
.entrada {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 380px);
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 24px;
}
@media (max-width: 860px) {
  .entrada {
    grid-template-columns: minmax(0, 420px);
    gap: 24px;
    padding-top: 32px;
    align-items: start;
  }
}
.vitrine-entrada .marca {
  font-size: 20px;
  margin-bottom: 18px;
}
/* A tese em Paytone One, a voz de display da marca, como nos títulos do
   CRM: é o único lugar do Monitor onde ela entra. */
.tese {
  font-family: "Paytone One", "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--ink);
}
.lista-tese,
.lista-incluso {
  margin: 0 0 16px;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.lista-tese li + li,
.lista-incluso li + li {
  margin-top: 4px;
}
.link-fraco,
button.link-fraco {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--acento-texto);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cartao-entrada a {
  color: var(--acento-texto);
}
.abas-entrada {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 4px;
}
.abas-entrada button {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  padding: 6px 10px;
}
.abas-entrada button.ativa {
  background: color-mix(in srgb, var(--acento) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent);
  color: var(--ink);
}
.cartao-entrada form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.captcha {
  min-height: 78px;
}
.cartao-entrada {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cartao-entrada .sub {
  margin: -6px 0 8px;
  color: var(--ink-3);
  font-size: 13px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-3);
}
input,
textarea,
select {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
}
textarea {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  resize: vertical;
}
input:focus,
textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
}

button {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #241d16;
  padding: 8px 16px;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
button.secundario {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-2);
}
button.fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
}
button.secundario:hover,
button.fantasma:hover {
  background: var(--raised);
}

.erro {
  margin: 0;
  color: var(--brick);
  font-size: 12.5px;
}
.ok {
  margin: 0;
  color: var(--verde);
  font-size: 12.5px;
}
/* A instrução do que conferir no painel da Meta. Tom de aviso e não de
   erro: ela diz onde olhar, e não que algo quebrou -- e numa tela em que
   três de cada quatro contas têm alguma pendência, vermelho em todas
   deixaria de significar qualquer coisa. */
.instrucao {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  color: var(--amber);
  font-size: 13px;
  line-height: 1.45;
}
.instrucao strong { font-weight: 600; }

.nota {
  margin: 0 0 12px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ------------------------------------------------------- menu lateral */
/* O painel é duas colunas: o menu à esquerda e o conteúdo. O menu GRUDA
   na altura da janela e rola sozinho, então o "Atualizar" e o estado da
   coleta ficam sempre à mão, a lista tenha o tamanho que tiver.

   A largura mora numa variável para o recolhido ser uma linha só: as
   regras de baixo leem a variável, e nenhuma delas precisa saber se o
   menu está aberto. */
.painel {
  --larg-lateral: 224px;
  display: grid;
  grid-template-columns: var(--larg-lateral) minmax(0, 1fr);
  min-height: 100dvh;
}
.painel.recolhido {
  --larg-lateral: 60px;
}
.lateral {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 6;
}
.lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 4px 12px 8px;
}
/* O botão de recolher é só ícone: a seta aponta para onde o menu vai. */
.recolher {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  flex: none;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-3);
}
.recolher:hover {
  background: var(--raised);
  color: var(--ink);
}
.painel.recolhido .recolher svg {
  transform: rotate(180deg);
}

/* Os ícones são desenhados aqui, no traço da casa (1.5, ponta e junção
   redondas), como os do CRM: biblioteca de ícone não entra. */
.lateral svg,
.alternar-vista svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.abas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
/* O rótulo do grupo é frase pequena, e não olho em maiúsculas: é a régua
   anti-slop do CRM valendo aqui também. */
.grupo-menu {
  margin: 12px 10px 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-4);
}
.grupo-menu:first-child {
  margin-top: 0;
}
.abas button,
.abas .item-menu,
.lateral-pe button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  font-weight: 500;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-3);
  white-space: nowrap;
}
.abas button:hover,
.abas .item-menu:hover,
.lateral-pe button:hover {
  background: var(--raised);
  color: var(--ink);
}
/* A receita de "onde estou" do CRM: o fundo do acento com o contorno de
   dentro. Em `--raised` puro o item ativo mal se separava do menu. */
.abas button.ativa {
  background: color-mix(in srgb, var(--acento) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent);
  color: var(--ink);
}
.abas button:focus-visible,
.abas .item-menu:focus-visible,
.lateral-pe button:focus-visible,
.recolher:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.rotulo-menu {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* O contador do item: o que ali dentro pede gesto. Número dentro, e não
   só cor, pela mesma razão dos pontos dos quadros. */
.contador {
  margin-left: auto;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  text-align: center;
  color: var(--brick);
  background: color-mix(in srgb, var(--brick) 14%, transparent);
}
.contador.amarelo {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 16%, transparent);
}

.lateral-pe {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
#atualizar:disabled {
  opacity: 0.6;
}

/* O estado da coleta, numa linha. Quadrado e não bolinha, pela régua das
   legendas das roscas. */
.estado-coleta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 4px 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}
.ponto-coleta {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  flex: none;
  border-radius: 2px;
  background: var(--verde);
}
.estado-coleta.andando .ponto-coleta {
  background: var(--amber);
}
.estado-coleta.parada {
  color: var(--brick);
}
.estado-coleta.parada .ponto-coleta {
  background: var(--brick);
}

/* Recolhido: fica o ícone, e o resto some. O contador vira um ponto no
   canto do ícone, como o de não lida do CRM: a contagem não cabe, o
   aviso de que há o que ver cabe. */
.painel.recolhido .marca,
.painel.recolhido .rotulo-menu,
.painel.recolhido .grupo-menu,
.painel.recolhido .texto-coleta {
  display: none;
}
.painel.recolhido .lateral {
  padding-left: 8px;
  padding-right: 8px;
}
.painel.recolhido .lateral-topo {
  justify-content: center;
  padding: 2px 0 12px;
}
.painel.recolhido .abas button,
.painel.recolhido .lateral-pe button {
  justify-content: center;
  padding: 8px 0;
}
.painel.recolhido .abas {
  gap: 4px;
}
.painel.recolhido .contador {
  position: absolute;
  top: 5px;
  right: 7px;
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  background: var(--brick);
}
.painel.recolhido .contador.amarelo {
  background: var(--amber);
}
.painel.recolhido .estado-coleta {
  justify-content: center;
  margin: 0 0 6px;
}

/* -------------------------------------------------------------- topo */
.conteudo {
  min-width: 0;
}
.topo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.titulo-tela {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.carimbo {
  margin-left: auto;
  color: var(--ink-4);
  font-size: 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* A faixa da coleta PARADA. Em dia, a mesma frase mora no rodapé do
   menu; parada, ela vira faixa, porque o dia em que ela grita é
   justamente o dia em que todo o resto da tela está mentindo por estar
   velho. */
.faixa-coleta {
  margin: 0;
  padding: 9px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--brick) 14%, var(--surface));
  color: var(--brick);
  font-size: 13px;
  font-weight: 500;
}

/* O "por que 0 BM?" do cartão da credencial: fechado por padrão, porque
   quem já sabe não precisa reler, e aberto explica as três causas. */
.por-que-zero {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-3);
}

.por-que-zero summary {
  cursor: pointer;
  color: var(--azul);
  width: fit-content;
}

.por-que-zero ol {
  margin: 6px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.por-que-zero p {
  margin: 6px 0 0;
}

/* ------------------------------------------------- as BMs da credencial */
/* Gaveta fechada dentro do cartão. O cartão dizia "88 BM(s)" e nada mais,
   e as BMs são o que uma credencial É: sem a lista, saber se um Facebook
   alcança uma BM exigia abrir a Saúde e adivinhar, e saber QUEM alcança
   uma BM não tinha caminho nenhum na tela.

   Fechada porque a maior credencial alcança 94: noventa e quatro nomes
   abertos em cada um de 92 cartões seria a rolagem infinita de novo,
   agora numa aba que ainda não a tinha. */
.bms-cred {
  margin-top: 10px;
  font-size: 13px;
}
.bms-cred > summary {
  cursor: pointer;
  color: var(--azul);
  width: fit-content;
}
.chips-bm {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chip-bm {
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-bm:hover {
  border-color: var(--acento);
  color: var(--ink);
}
/* Bloqueada pela Meta é o que muda a decisão de quem está lendo: a BM
   está na credencial e não serve para operar.

   O aviso é um PONTO, e não só a cor da borda, porque `casa` vem depois e
   reescreveria a borda: a BM bloqueada que casasse com a busca perderia
   justamente o sinal que importa. Dois sinais em canais diferentes
   convivem; dois na mesma propriedade, um apaga o outro. */
.chip-bm.bloqueada {
  border-color: var(--brick);
  color: var(--brick);
}
.chip-bm.bloqueada::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brick);
  margin-right: 6px;
  vertical-align: middle;
}
/* O que casou com a busca. Sem marcar, abrir a gaveta e varrer noventa
   nomes atrás dos três que interessam seria trabalho manual em cima de
   uma busca que já tinha a resposta. */
.chip-bm.casa {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  color: var(--ink);
}

/* A largura acompanha a tela em vez de parar em 1200px.
   Num monitor de 1440 sobrava uma faixa vazia à direita enquanto os
   quadros de BM ficavam apertados em quatro colunas; o teto agora é
   grande o bastante para caber seis, e a medida em `ch` mantém a linha
   de texto legível quando alguém abre isto num monitor ultrawide. */
.tela {
  padding: 20px 24px;
  max-width: 1720px;
  margin: 0 auto;
}

/* ------------------------------------------------------------ resumo */
/* O fundo do grid e a cor da SUPERFICIE, e as divisorias sao borda de
   cada celula. Enquanto o fundo era `--line` com `gap: 1px`, as celulas
   que faltavam para fechar a ultima linha viravam retangulos cinza --
   nove celulas em sete colunas deixavam cinco buracos, que liam como
   celula quebrada e nao como espaco vago. Assim a quantidade de celulas
   deixa de importar para o desenho. */
.numeros-topo {
  display: grid;
  /* No maximo CINCO colunas, por larga que seja a tela.
     Com `auto-fit` puro, um monitor de 1440 abria sete colunas de 190px e
     as celulas ficavam com o rotulo em duas linhas e o pe cortado; a
     medida `100%/5.5` cria um piso proporcional que impede a sexta coluna
     sem cravar breakpoint, e o `max()` mantem o piso de 190px quando a
     tela e estreita. */
  grid-template-columns: repeat(auto-fit, minmax(max(190px, 100% / 5.5), 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
/* A célula é um <button> porque leva a algum lugar, mas não deve PARECER
   um botão: o topo de um painel é leitura, e cinco botões laranja ali
   competiriam com o número, que é o que a pessoa veio ver. */
.celula {
  background: var(--surface);
  padding: 12px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: pointer;
  transition: background 0.12s ease;
}
.celula:hover:not(:disabled) {
  background: var(--raised);
}
/* Célula sem destino é LEITURA, e não botão desligado: o meio-tom do
   `button:disabled` deixava o número dela apagado, e em DataCrazy os
   quatro números do topo pareciam fora do ar. */
.celula:disabled {
  cursor: default;
  opacity: 1;
}
.celula:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.celula .rotulo {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.celula .valor {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.celula .valor.ruim {
  color: var(--brick);
}
.celula .valor.atencao {
  color: var(--amber);
}
.celula .valor.bom {
  color: var(--verde);
}
.celula .pe {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Os principais são CINCO, numa fileira só: é o que se lê de relance. Os
   outros seis e as roscas moram em "Mais indicadores", recolhido. */
/* Cinco colunas CRAVADAS, e não `auto-fit`: a 1024 o auto-fit dava quatro
   e uma, com um vão vazio do lado da quinta. O fio entre as células é o
   fundo do contêiner aparecendo pelo `gap`, e não a borda de cada uma: com
   borda, a última coluna desenhava um fio a mais colado no contorno, e
   qualquer outro arranjo (o celular, abaixo) teria de saber qual célula é
   a da ponta. */
.numeros-topo.principais {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  margin-bottom: 14px;
}
.numeros-topo.principais .celula {
  padding: 14px 16px;
  border: 0;
}
.numeros-topo.principais .celula .valor {
  font-size: 26px;
}
.mais-indicadores {
  margin-bottom: 16px;
}
.corpo-mais {
  padding: 14px;
}
.corpo-mais .numeros-topo {
  margin-bottom: 14px;
}
.corpo-mais .roscas {
  margin-bottom: 0;
}

/* -------------------------------------------- o que pede atenção agora */
/* Uma linha por pendência, com o número, o que é, o que fazer e o atalho.
   A tarja da esquerda é a mesma gramática dos quadros: tijolo é Meta,
   âmbar é trabalho nosso. */
/* O nome é `painel-atencao`, e não `atencao`: `.atencao` já é o TOM de
   meia dúzia de coisas nesta folha (o valor da célula, a linha da lista,
   o quadro, o resumo da ficha), e a primeira versão deste painel com
   esse nome pintou caixa e margem em todas elas -- a colisão que a
   gaveta e o `.grupo` já tinham ensinado. */
.painel-atencao {
  margin-bottom: 14px;
}
.linha-atencao {
  display: grid;
  grid-template-columns: 3px 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 0;
  border-top: 1px solid var(--line-soft);
}
.linha-atencao:first-of-type {
  border-top: 0;
}
.linha-atencao .tarja {
  align-self: stretch;
  background: var(--line);
}
.linha-atencao.ruim .tarja {
  background: var(--brick);
}
.linha-atencao.atencao .tarja {
  background: var(--amber);
}
.linha-atencao .quanto {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 500;
  text-align: right;
}
.linha-atencao.ruim .quanto {
  color: var(--brick);
}
.linha-atencao.atencao .quanto {
  color: var(--amber);
}
.linha-atencao .oque {
  min-width: 0;
}
.linha-atencao .oque strong {
  font-weight: 600;
  font-size: 13.5px;
}
.linha-atencao .oque .nota {
  display: block;
  margin: 1px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atencao-vazia {
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--verde);
}

/* ------------------------------------------------- faixas como pílulas */
/* As quatro faixas viram pílulas com o total, acima da busca: são o
   recorte que se faz toda vez, e escondido num seletor ele custava dois
   cliques e uma leitura de lista. O seletor continua, para as situações
   exatas e a verificação. */
.chips-faixa {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.chip-faixa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
}
.chip-faixa:hover {
  background: var(--raised);
}
.chip-faixa .n {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-4);
}
.chip-faixa.ativa {
  background: color-mix(in srgb, var(--acento) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  color: var(--ink);
}
.chip-faixa.ativa .n {
  color: var(--ink-2);
}

/* Lista ou quadros: dois botões numa pílula, o escolhido levantado. */
.alternar-vista {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.alternar-vista button {
  padding: 4px 12px;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-3);
}
.alternar-vista button.ativa {
  background: var(--raised);
  border-color: var(--line);
  color: var(--ink);
}

/* "Mais filtros" diz quantos estão valendo lá dentro: filtro escondido
   que recorta sem avisar é lista que parece ter sumido. */
.mais-filtros .n {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  background: color-mix(in srgb, var(--acento) 18%, transparent);
  color: var(--acento-texto);
}
.filtros-extra {
  margin-top: -4px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* ----------------------------------------------------- BMs em lista */
/* A lista é tabela de largura FIXA, com a largura de cada coluna escrita:
   no automático, uma BM de nome comprido esticava a coluna dela e
   espremia o "próximo passo" de todas as outras. */
.tabela-bms {
  table-layout: fixed;
  /* Abaixo disto a tabela ROLA dentro da gaveta em vez de espremer: com
     cinco colunas fixas, o nome da BM sairia com quatro letras. */
  min-width: 860px;
  border: 0;
  border-radius: 0;
}
.tabela-bms td {
  vertical-align: middle;
  padding-top: 8px;
  padding-bottom: 8px;
}
.tabela-bms tr.clicavel:focus-visible td {
  background: var(--raised);
}
.tabela-bms tr.clicavel:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
/* A tarja da situação na primeira célula, como a borda dos quadros: o
   estado se lê de longe, antes do texto. */
.tabela-bms td:first-child {
  box-shadow: inset 3px 0 0 var(--line);
}
.tabela-bms tr.bom td:first-child {
  box-shadow: inset 3px 0 0 var(--verde);
}
.tabela-bms tr.atencao td:first-child {
  box-shadow: inset 3px 0 0 var(--amber);
}
.tabela-bms tr.ruim td:first-child {
  box-shadow: inset 3px 0 0 var(--brick);
}
.bm-nome,
.bm-sub,
.bm-acontece {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-nome {
  font-weight: 600;
  font-size: 13.5px;
}
.bm-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 1px;
}
.bm-acontece {
  font-size: 12.5px;
  color: var(--ink-2);
}
.bm-mais {
  color: var(--ink-4);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
}
.bm-passo {
  font-size: 12.5px;
  color: var(--ink-2);
}
.tabela-bms .quadro-pontos {
  margin-top: 0;
  flex-wrap: nowrap;
}

/* ------------------------------------------------------- listas/cartão */
.lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cartao {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cartao h2 {
  margin: 0 0 4px;
  font-size: 15px;
}
.cartao h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.cartao form,
.corpo-gaveta form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
}
.corpo-gaveta {
  padding: 12px 16px 16px;
}
.form-credencial {
  margin-bottom: 16px;
}
.cabeca-cartao {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.linha-waba {
  border-top: 1px solid var(--line-soft);
  padding: 10px 0 2px;
}
.linha-waba:first-of-type {
  border-top: 0;
}

.selo {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  white-space: nowrap;
}
.selo.verde {
  color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 45%, transparent);
}
.selo.amarelo {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
}
.selo.vermelho {
  color: var(--brick);
  border-color: color-mix(in srgb, var(--brick) 45%, transparent);
  background: color-mix(in srgb, var(--brick) 10%, transparent);
}
.selo.azul {
  color: var(--azul-texto);
  border-color: color-mix(in srgb, var(--azul) 45%, transparent);
}

/* ------------------------------------------------------------ tabela */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 9px 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
td.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  /* Telefone não quebra: "+55 11 95880-" numa linha e "6041" na outra não
     se lê como número. A tabela rola dentro da caixa quando não couber. */
  white-space: nowrap;
}
tr:hover td {
  background: var(--raised);
}

.barra-filtro {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.barra-filtro input[type="text"],
.barra-filtro input:not([type]) {
  max-width: 320px;
}
.marcar {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.marcar input {
  width: auto;
}

/* ------------------------------------------------------ linha do tempo */
.evento {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.evento:first-child {
  border-top: 0;
}
.evento .quando {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-4);
  white-space: nowrap;
}
.evento.grave .oque {
  color: var(--brick);
}

/* A linha do tempo por dia (06/10/2026). O cabeçalho do dia diz quantas
   mudanças e quantas pioras ele teve; a hora fica na linha. */
.dia-linha + .dia-linha {
  margin-top: 18px;
}
.titulo-dia {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.titulo-dia::first-letter {
  text-transform: uppercase;
}
.titulo-dia .nota {
  margin: 0;
  font-weight: 400;
}
.titulo-dia .piora {
  color: var(--brick);
}
/* A BM do evento é um atalho para a ficha dela, e lê como nota: o que
   mudou é o principal da linha. */
.evento .de-quem {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink-4);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}
.evento .de-quem:hover {
  color: var(--ink-2);
  text-decoration-color: currentColor;
}
.evento.grave .de-quem {
  color: var(--ink-4);
}
#linha-tempo.atualizando {
  opacity: 0.55;
  transition: opacity 0.15s;
}
.mais-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}
.mais-linha .nota,
.ver-linha {
  margin: 0;
}
.ver-linha {
  margin-top: 10px;
}
.datas-linha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
}
.datas-linha[hidden] {
  display: none;
}
.datas-linha input[type="date"] {
  width: auto;
}

.vazio {
  color: var(--ink-3);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}

/* ------------------------------------------------------------- QR */
.qr {
  display: block;
  width: 232px;
  height: 232px;
  margin: 12px 0;
  /* O QR é preto sobre branco por definição: no tema escuro ele precisa
     do próprio fundo claro, senão o leitor não acha os cantos. */
  background: #fff;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.grupo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 6px;
  font-weight: 400;
}
.grupo:hover {
  background: var(--raised);
}
.grupo.escolhido {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}
.grupo .quantos {
  margin-left: auto;
  color: var(--ink-4);
  font-size: 12px;
  white-space: nowrap;
}
.busca-grupo {
  margin: 10px 0 8px;
  max-width: 320px;
}

/* O par do app fica dobrado: é a exceção, não o caminho de todo dia, e
   aberto por padrão empurraria o botão para fora da vista. */
.avancado {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}
.avancado summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-3);
}
.avancado[open] summary {
  margin-bottom: 8px;
}
.avancado label + label {
  margin-top: 8px;
}


/* --------------------------------------------------------- grade de BMs */

/* Quadros e não linhas: com onze BMs a lista rolava, e a pergunta "qual
   está ruim" se responde melhor varrendo com o olho do que rolando. A
   coluna mínima é 250px porque abaixo disso o nome da BM quebra em três
   linhas e o quadro deixa de ser quadro. */
.grade {
  display: grid;
  /* `auto-fill` e nao `auto-fit`: com poucas BMs filtradas, o `auto-fit`
     estica os sobreviventes ate a largura toda, e um unico quadro de
     1400px de largura nao e um quadro. */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

/* ---------------------------------------------- faixas e legenda da Saúde */
/* A grade de quadros passou a morar DENTRO de uma gaveta por faixa. Sem o
   respiro aqui ela encostaria na borda da gaveta, e o quadro mais alto
   ficaria colado no cabeçalho que diz a que faixa ele pertence. */
.gaveta > .grade {
  padding: 12px 14px;
}
.ver-mais-faixa {
  margin: 0 14px 14px;
  width: calc(100% - 28px);
}

/* A legenda nasce fechada: ela é consulta, não leitura de todo dia. Quem
   já sabe o que as palavras querem dizer não deve rolar por cima delas
   toda vez que abre o painel. */
.legenda {
  margin-bottom: 12px;
}
.corpo-legenda {
  padding: 4px 14px 14px;
}
.corpo-legenda > .nota {
  margin: 0 0 12px;
  max-width: 70ch;
}
.faixa-legenda {
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  margin-top: 10px;
}
.faixa-legenda:first-of-type {
  border-top: 0;
  margin-top: 0;
}
.faixa-legenda-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
/* O total da faixa no fim da linha, alinhado entre as faixas: é a coluna
   que o olho percorre para ver onde está o volume. */
.faixa-legenda-conta {
  margin-left: auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-2);
}
/* Rótulo à esquerda e regra à direita, como a ficha do número: é a forma
   que o olho lê uma definição sem precisar de cabeçalho de tabela. */
.regra-linha {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.5;
}
.regra-nome {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-weight: 500;
}
.regra-conta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
  font-size: 12px;
  margin-left: auto;
}
.regra-texto {
  color: var(--ink-3);
}
/* No celular a definição empilha: 200px de rótulo mais a regra ao lado
   não cabem em 390, e a regra sairia em coluna de três palavras. */
@media (max-width: 720px) {
  .regra-linha {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px 0;
  }
  .regra-nome {
    justify-content: space-between;
  }
}

.quadro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  padding: 14px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.quadro:hover {
  background: var(--raised);
  border-color: var(--ink-4);
}
.quadro:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
/* A tarja da esquerda é a leitura de longe: verde, âmbar ou tijolo dizem
   o estado antes de qualquer texto ser lido. */
.quadro.bom {
  border-left-color: var(--verde);
}
.quadro.atencao {
  border-left-color: var(--amber);
}
.quadro.ruim {
  border-left-color: var(--brick);
}

.quadro-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.quadro-nome {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
.quadro-pontos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
/* Os pontos contam números por cor. Número dentro do ponto, e não só a
   cor: quem não distingue verde de âmbar continua lendo a contagem. */
.ponto {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 26px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.ponto.verde {
  color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 45%, transparent);
  background: color-mix(in srgb, var(--verde) 10%, transparent);
}
.ponto.amarelo {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}
.ponto.vermelho {
  color: var(--brick);
  border-color: color-mix(in srgb, var(--brick) 45%, transparent);
  background: color-mix(in srgb, var(--brick) 12%, transparent);
}
.ponto.vazio-ponto {
  font-family: inherit;
  color: var(--ink-4);
}
.quadro-pe {
  font-size: 12px;
  color: var(--ink-3);
}
.quadro-alerta {
  font-size: 12px;
  color: var(--brick);
}

/* -------------------------------------------------------------- filtros */

.barra-filtro select {
  max-width: 220px;
  width: auto;
  cursor: pointer;
}
.conta-filtro {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- modal */

/* O véu escurece e desfoca o que está atrás. O desfoque é o limite: o
   véu continua sendo cor sólida, e nenhum painel do app ganha vidro por
   causa disto. */
/* O véu é mais leve que o de um modal no meio da tela: a gaveta abre à
   direita e a lista continua legível do lado, que é o motivo de ela ser
   gaveta. */
.veu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  /* A trilha é `minmax(0, 1fr)`, e não a automática: na automática ela
     cresce até o conteúdo mais largo da ficha (a tabela dos números), e no
     celular a gaveta passava da tela e levava o Fechar junto. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
  align-items: stretch;
  padding: 0;
  background: color-mix(in srgb, #000 30%, transparent);
  backdrop-filter: blur(1px);
}
.caixa {
  width: min(780px, 100%);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
}
.caixa-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.caixa-topo h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.navegar-ficha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.navegar-ficha button.mini {
  min-width: 30px;
  font-size: 15px;
  line-height: 1;
  padding: 4px 8px;
}
.posicao-ficha {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-3);
  min-width: 64px;
  text-align: center;
}
.caixa-corpo {
  flex: 1;
  padding: 14px 16px 24px;
  overflow-y: auto;
}

/* O resumo da ficha: a situação, o que fazer e as contas da BM, antes de
   qualquer tabela. A ficha abria direto nas contas, e a palavra que
   trouxe a pessoa até ali -- "conta banida" -- não estava em lugar
   nenhum dela. */
.resumo-ficha {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
}
.resumo-ficha.bom {
  border-left-color: var(--verde);
}
.resumo-ficha.atencao {
  border-left-color: var(--amber);
}
.resumo-ficha.ruim {
  border-left-color: var(--brick);
}
.resumo-ficha-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.resumo-ficha-topo strong {
  font-size: 14px;
}
.resumo-ficha .passo {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.resumo-ficha .passo b {
  font-weight: 600;
}
.contas-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-3);
}
.contas-ficha strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
  margin-right: 4px;
}
.contas-ficha .ruim strong {
  color: var(--brick);
}
.contas-ficha .bom strong {
  color: var(--verde);
}

/* As seções da ficha são gavetas, e cada uma lembra se estava aberta.
   Dentro da gaveta lateral o cabeçalho não gruda na barra de abas, que
   fica atrás do véu: gruda no topo da própria caixa que rola. */
.caixa-corpo .gaveta > summary {
  top: 0;
}
.caixa-corpo .gaveta > .corpo-secao {
  padding: 12px 14px;
}
.caixa-corpo .gaveta .bloco-conta:first-child {
  margin-top: 0;
}
.caixa-corpo .gaveta .lista-logins {
  margin-bottom: 0;
}
.caixa-corpo .gaveta .caixa-eventos {
  border: 0;
  padding: 0;
}

/* Os logins do Facebook da BM.
   Linha e não cartão: são três informações curtas (quem, login, senha) e
   uma pilha de cartões aqui empurraria os modelos recusados e o
   histórico para fora da primeira tela do modal. */
.lista-logins {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.linha-login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* Quem saiu da BM continua na lista, apagado: a senha guardada ainda
   pode valer, e sumir com a linha esconderia justamente a resposta de
   "por que não consigo mais entrar". */
.linha-login.saiu { opacity: 0.6; }
.login-quem { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.login-campo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.login-nota { flex-basis: 100%; margin: 0; }

/* Botão de linha: o mesmo desenho do secundário, na altura do texto ao
   lado. Sem isso a pílula de 8px de padding empurra a linha para 40px de
   altura e a lista deixa de caber na tela. */
button.mini {
  padding: 3px 9px;
  font-size: 12px;
  background: transparent;
  border-color: var(--line);
  color: var(--ink-2);
}
button.mini:hover { background: var(--raised); }

.form-login {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.form-login input {
  flex: 1 1 160px;
  min-width: 0;
}
.form-login button { padding: 6px 14px; font-size: 13px; }

/* O botao de acrescentar nao estica: num flex-column ele herdaria a
   largura da lista inteira e viraria uma barra, que le como area de
   destino de arrastar e nao como botao. */
.lista-logins > button { align-self: flex-start; }

/* O cadeado do portfólio, no topo da ficha da BM.
   Tom de ERRO e não de aviso, ao contrário de `.instrucao`: a restrição
   já aconteceu, e não é uma coisa a conferir. Sem cadeado, o mesmo bloco
   fica neutro -- pintar de verde "não está restrita" daria cor a um
   estado que é o normal de 300 BMs. */
.bloco-cadeado {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--brick) 45%, transparent);
  border-left: 3px solid var(--brick);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brick) 10%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.bloco-cadeado.sem {
  border-color: var(--line);
  border-left-color: var(--line);
  background: transparent;
}
.bloco-cadeado > * { margin: 0; }
.bloco-cadeado .nota { flex: 1 1 200px; }
.cadeado-titulo {
  flex-basis: 100%;
  font-weight: 600;
  color: var(--brick);
}
.cadeado-motivo { flex-basis: 100%; }

.bloco-conta {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  margin-top: 12px;
}
.bloco-conta:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.tabela-embutida {
  margin-top: 8px;
  font-size: 13px;
}
.titulo-bloco {
  margin: 18px 0 6px;
  font-size: 14px;
}

/* ----------------------------------------------------------- gavetas */
/* A gaveta que substituiu a rolagem infinita. O cabeçalho carrega o
   resumo daquele grupo, então a maior parte das perguntas se responde com
   ele fechado: abrir é para quando a resposta já apontou onde olhar.

   O nome é `gaveta` e não `grupo` porque `.grupo` JÁ EXISTIA nesta folha,
   para o botão de grupo de WhatsApp da aba Avisos, e aquele é
   `display: flex; align-items: center`. As duas regras casavam no mesmo
   <details> e a segunda não redeclara `display`, então a gaveta virava
   caixa flex: ao abrir, o cabeçalho ia para o LADO da tabela, centrado na
   altura dela, e o nome da BM aparecia no meio da tela. Colisão de nome
   de classe não dá erro em lugar nenhum -- ela sai como layout torto, e
   só depois de abrir. */
.gaveta {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
  /* `clip` e não `hidden`: os dois cortam a tabela no canto arredondado,
     mas `hidden` cria um contêiner de rolagem, e contêiner de rolagem que
     não rola mata o `position: sticky` do cabeçalho logo abaixo. */
  overflow: clip;
}
/* O cabeçalho GRUDA no topo enquanto a gaveta está aberta. Uma BM com 61
   números ocupa três telas, e sem isto o nome dela sai de cena na
   primeira rolagem: a pessoa fica lendo telefones sem saber de quem são.
   Ele para logo abaixo da barra de abas, cuja altura o painel mede em
   `--topo-alt` -- ela muda quando o cabeçalho quebra em mais de uma
   linha, e um valor chumbado aqui deixaria uma fresta ou uma sobreposição
   justamente na largura em que o cabeçalho quebra. */
.gaveta > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: sticky;
  top: var(--topo-alt, 58px);
  /* Fundo opaco: transparente, as linhas da tabela passariam por baixo do
     nome da BM enquanto rolam. */
  background: var(--surface);
  z-index: 3;
}
/* O fio embaixo é sombra e não borda: borda muda a altura do cabeçalho na
   hora de abrir, e a gaveta daria um pulo de um pixel. */
.gaveta[open] > summary {
  box-shadow: inset 0 -1px 0 var(--line);
}
.gaveta > summary::-webkit-details-marker {
  display: none;
}
/* O triângulo é desenhado aqui e gira ao abrir: o marcador nativo muda de
   forma entre navegadores e não aceita cor. */
.gaveta > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid var(--ink-4);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.12s ease;
}
.gaveta[open] > summary::before {
  transform: rotate(90deg);
}
.gaveta > summary:hover {
  background: var(--raised);
}
.gaveta > summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.gaveta-nome {
  font-weight: 500;
  font-size: 13.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gaveta-selos {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
/* A contagem fica no fim da linha, alinhada entre as gavetas: é a coluna
   que o olho percorre para achar a maior. */
.gaveta-conta {
  margin-left: auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--ink-3);
  flex: 0 0 auto;
}
/* A tabela larga rola DENTRO da gaveta, e não empurra a página de lado.
   O invólucro existe porque `display:block` numa <table> resolveria a
   rolagem e quebraria o alinhamento das colunas junto.

   Sem borda em cima: quem desenha o fio agora é a sombra do cabeçalho,
   que continua na tela enquanto a lista rola. */
.gaveta > .rolagem {
  overflow-x: auto;
}
.gaveta > .grade-modelos {
  padding: 12px 14px;
  margin-top: 0;
}
.caixa-eventos {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 12px;
  background: var(--surface);
}

/* A ficha é rótulo à esquerda e valor à direita, em linhas separadas por
   contorno: é a forma que o olho lê sem cabeçalho de tabela. */
.ficha {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ficha-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
}
.ficha-linha:first-child {
  border-top: 0;
}
.ficha-linha > span:first-child {
  color: var(--ink-3);
  font-size: 12px;
}

/* O id da Meta fica DEBAIXO do nome, em mono e apagado: ele é referência
   para cruzar com o painel dela e com o DataCrazy, não é o que se lê
   primeiro. `user-select: all` porque um clique tem de pegar os quinze
   dígitos inteiros -- id copiado pela metade acha a conta errada, e acha
   em silêncio. */
.id-meta {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink-4);
  user-select: all;
  word-break: break-all;
}
/* Sozinho na linha ele não é legenda de nada, então não leva o respiro
   nem fica mais apagado que o valor que está ali no lugar de um nome. */
.id-meta.so {
  margin-top: 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

tr.clicavel {
  cursor: pointer;
}
tr.clicavel:hover td {
  background: var(--raised);
}

/* ------------------------------------------------------------- celular */

/* No meio-termo (tablet, notebook pequeno) o menu já nasce recolhido pela
   largura, sem gravar escolha: 224 px de menu numa tela de 900 deixariam
   a lista de BMs com a coluna do nome espremida. */
@media (max-width: 1100px) and (min-width: 721px) {
  .painel:not(.aberto-a-mao) {
    --larg-lateral: 60px;
  }
  .painel:not(.aberto-a-mao) .marca,
  .painel:not(.aberto-a-mao) .rotulo-menu,
  .painel:not(.aberto-a-mao) .grupo-menu,
  .painel:not(.aberto-a-mao) .texto-coleta {
    display: none;
  }
  .painel:not(.aberto-a-mao) .lateral-topo {
    justify-content: center;
    padding: 2px 0 12px;
  }
  .painel:not(.aberto-a-mao) .abas button,
  .painel:not(.aberto-a-mao) .lateral-pe button {
    justify-content: center;
    padding: 8px 0;
  }
  .painel:not(.aberto-a-mao) .recolher svg {
    transform: rotate(180deg);
  }
  .painel:not(.aberto-a-mao) .contador {
    position: absolute;
    top: 5px;
    right: 7px;
    min-width: 0;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background: var(--brick);
  }
  .painel:not(.aberto-a-mao) .contador.amarelo {
    background: var(--amber);
  }
  .painel:not(.aberto-a-mao) .estado-coleta {
    justify-content: center;
    margin: 0 0 6px;
  }
}

/* A operação abre este painel do telefone para saber se um número caiu.
   Ali o menu deixa de ser coluna e vira a barra de cima, com os itens
   rolando de lado: uma coluna de 224 px numa tela de 390 deixaria o
   conteúdo com 166. */
@media (max-width: 720px) {
  .painel,
  .painel.recolhido {
    display: block;
    --larg-lateral: auto;
  }
  .lateral {
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  .lateral-topo {
    padding: 0;
  }
  .recolher,
  .grupo-menu {
    display: none;
  }
  .painel.recolhido .marca {
    display: block;
  }
  .painel.recolhido .abas .rotulo-menu {
    display: inline;
  }
  /* A barra de abas é BLOCO com nowrap, e não flex: como item flex ela
     não encolhia, e a largura da linha virava a do conteúdo, o que
     esticava o cabeçalho e fazia a página rolar de lado. Bloco com
     `max-width: 100%` tem a largura do pai, e as abas rolam DENTRO. */
  .abas {
    display: block;
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .abas::-webkit-scrollbar {
    display: none;
  }
  .abas button,
  .painel.recolhido .abas button {
    display: inline-flex;
    width: auto;
    padding: 6px 10px;
    margin-right: 2px;
  }
  .contador,
  .painel.recolhido .contador {
    position: static;
    width: auto;
    height: auto;
    min-width: 20px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
  }
  .lateral-pe {
    flex-direction: row;
    align-items: center;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }
  .lateral-pe button {
    width: auto;
  }
  .lateral-pe .rotulo-menu {
    display: none;
  }
  .estado-coleta {
    margin: 0 6px 0 0;
  }
  .texto-coleta {
    display: none;
  }
  .topo {
    position: static;
    padding: 10px 14px;
  }
  .faixa-coleta,
  .tela {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* A gaveta da ficha toma a tela inteira: 780 px não cabem, e um resto
     de véu de 20 px à esquerda seria um alvo de toque que fecha a ficha
     sem querer. */
  .caixa {
    width: 100%;
    border-left: 0;
  }
  /* O nome da BM ganha a linha inteira, e as setas e o Fechar descem
     para a segunda: lado a lado, sobravam 150 px para um nome que costuma
     ter CNPJ na frente. */
  .caixa-topo {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .caixa-topo h2 {
    flex-basis: 100%;
  }
  .caixa-topo #modal-fechar {
    margin-left: auto;
  }
  .linha-atencao {
    grid-template-columns: 3px 44px minmax(0, 1fr);
  }
  .linha-atencao .quanto {
    font-size: 17px;
  }
  .linha-atencao > button {
    grid-column: 3;
    justify-self: start;
  }
  .alternar-vista {
    margin-left: 0;
  }
  /* Uma coluna: com duas, cinco células deixavam uma lacuna cinza no fim,
     que lia como célula quebrada e não como espaço vago. */
  .numeros-topo {
    grid-template-columns: 1fr;
  }
  /* Os cinco principais em DUAS colunas, com o total de BMs na linha
     inteira: um embaixo do outro eles ocupavam a primeira tela toda, e a
     lista do que pede atenção ficava para depois da dobra. Com o primeiro
     ocupando as duas, as linhas fecham e não sobra vão. */
  .numeros-topo.principais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .numeros-topo.principais .celula:first-child {
    grid-column: 1 / -1;
  }
  .numeros-topo.principais .celula {
    padding: 10px 12px;
  }
  .numeros-topo.principais .celula .valor {
    font-size: 22px;
  }
  /* O selo da gaveta desce para a segunda linha: ao lado do nome ele
     cortava o próprio nome em "Travadas pel..." e passava por cima da
     contagem. */
  .gaveta > summary {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .gaveta > summary .gaveta-selos {
    order: 3;
    flex-basis: 100%;
    padding-left: 15px;
  }
  .gaveta-selos .selo {
    white-space: normal;
  }
  /* A lista de BMs vira FICHA por linha: cinco colunas fixas não cabem em
     390 px, e rolando de lado só se via o nome e a situação, que é
     justamente o que não diz o que fazer. Aqui cada BM é um bloco com o
     nome em cima, a situação e os números na mesma linha, e o que
     acontece embaixo; a tarja da situação passa da célula para a linha. */
  .tabela-bms {
    min-width: 0;
    display: block;
  }
  .tabela-bms colgroup,
  .tabela-bms thead {
    display: none;
  }
  .tabela-bms tbody {
    display: block;
  }
  .tabela-bms tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: inset 3px 0 0 var(--line);
  }
  .tabela-bms tr.bom {
    box-shadow: inset 3px 0 0 var(--verde);
  }
  .tabela-bms tr.atencao {
    box-shadow: inset 3px 0 0 var(--amber);
  }
  .tabela-bms tr.ruim {
    box-shadow: inset 3px 0 0 var(--brick);
  }
  /* `tr.clicavel` no seletor: a tarja do desktop é `tr.ruim
     td:first-child`, e com um seletor mais fraco ela continuava na célula
     e aparecia duas vezes, colada no texto. */
  .tabela-bms td,
  .tabela-bms tr.clicavel td,
  .tabela-bms tr.clicavel td:first-child {
    display: block;
    padding: 0;
    border: 0;
    box-shadow: none;
    min-width: 0;
  }
  .tabela-bms td:nth-child(1),
  .tabela-bms td:nth-child(4),
  .tabela-bms td:nth-child(5) {
    grid-column: 1 / -1;
  }
  /* O próximo passo sai daqui e fica na ficha, a um toque: dentro de uma
     faixa ele é quase sempre a mesma frase, e no celular repeti-la em
     cada BM dobraria a altura da lista. */
  .tabela-bms tr.clicavel td:nth-child(5) {
    display: none;
  }
  .grade,
  .roscas,
  .grade-modelos {
    grid-template-columns: 1fr;
  }
  .barra-filtro select,
  .barra-filtro input,
  .barra-filtro input:not([type]) {
    max-width: none;
    flex: 1 1 100%;
    /* Sem isto o seletor de BM fica da largura do nome mais longo da
       lista e passa da borda da tela. */
    min-width: 0;
    width: 100%;
  }
  /* As duas datas dividem a linha, e o "até" fica entre elas. */
  .datas-linha {
    flex: 1 1 100%;
  }
  .barra-filtro .datas-linha input {
    flex: 1 1 0;
    min-width: 0;
  }
  .conta-filtro {
    margin-left: 0;
  }
  /* A tabela larga rola dentro da própria caixa, e não empurra a página:
     página que rola de lado esconde o começo da linha sem avisar. */
  #tabela-numeros,
  #tabela-modelos,
  .caixa-corpo {
    overflow-x: auto;
  }
}

/* ---------------------------------------------------------- roscas */

.roscas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.rosca-caixa {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.rosca-titulo {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}
.rosca-linha {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rosca {
  width: clamp(96px, 9vw, 132px);
  height: clamp(96px, 9vw, 132px);
  flex: none;
  /* O arco começa no topo, e não às três horas: quem lê uma rosca espera
     a primeira fatia saindo de cima. */
  transform: rotate(-90deg);
}
.rosca .trilho {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 14;
}
.rosca .arco {
  fill: none;
  stroke-width: 14;
}
.rosca .arco.verde {
  stroke: var(--verde);
}
.rosca .arco.amarelo {
  stroke: var(--amber);
}
.rosca .arco.vermelho {
  stroke: var(--brick);
}
.rosca .arco.neutro {
  stroke: var(--ink-4);
}
.rosca .arco.escuro {
  stroke: var(--ink-2);
}
/* O texto do meio desgira, senão sairia deitado junto com o anel. */
.rosca text {
  transform: rotate(90deg);
  transform-origin: 60px 60px;
  text-anchor: middle;
  fill: var(--ink);
}
.rosca-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.rosca-pe {
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--ink-4);
}

.rosca-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-2);
  min-width: 0;
}
.rosca-legenda li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rosca-legenda strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.rosca-legenda .pct {
  color: var(--ink-4);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}
/* Quadrado e não bolinha: a bolinha colorida ao lado do rótulo é o
   maneirismo de dashboard de template que este projeto evita. */
.marca-cor {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 2px;
}
.marca-cor.verde {
  background: var(--verde);
}
.marca-cor.amarelo {
  background: var(--amber);
}
.marca-cor.vermelho {
  background: var(--brick);
}
.marca-cor.neutro {
  background: var(--ink-4);
}
.marca-cor.escuro {
  background: var(--ink-2);
}

/* O pé da célula do resumo pode carregar uma lista de nomes de BM: sem
   corte, uma conta com trinta BMs restritas esticaria a célula e
   desalinharia a fileira inteira. */
.celula .pe {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------------------------------------- modelos recusados */

.grade-modelos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.cartao-modelo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brick);
  border-radius: var(--radius);
  padding: 12px 14px;
}
/* O texto do modelo é citação, e se veste como tal: fundo de superfície
   levantada e barra à esquerda. Sem essa distinção, ele se confundiria
   com a explicação em volta, e é justamente o texto que precisa ser lido
   palavra por palavra para se entender a recusa. */
.texto-modelo {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--raised);
  border-left: 2px solid var(--line);
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  /* Modelo com texto longo rola dentro do cartão em vez de esticá-lo: o
     cartão mais alto da grade define a altura de toda a fileira. */
  max-height: 190px;
  overflow-y: auto;
}

/* ------------------------------------------------ diagnóstico da Meta */

.motivos {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.motivos li {
  padding: 8px 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.titulo-bloco {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* O aviso sobre o que a API do DataCrazy NÃO faz fica destacado: sem
   isso ele viraria mais um parágrafo cinza e alguém passaria uma tarde
   procurando as automações que não existem por lá. */
.aviso-dc {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
  background: var(--raised);
}

.ver-todas {
  margin-top: 12px;
  width: 100%;
}

/* ---------------------------------------------------- a conta (spec 034) */
.abas .item-menu {
  text-decoration: none;
  font-size: 14px;
}
.abas .item-menu svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* A conta vencida ou perto de vencer: tom de aviso, e não de erro -- o
   dado está certo, só parou de andar. */
.faixa-conta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
  color: var(--amber);
  font-size: 13px;
  font-weight: 500;
}
.faixa-conta button {
  padding: 4px 12px;
  font-size: 13px;
}
.primeiros-passos {
  margin-bottom: 16px;
}
.primeiros-passos ol {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.passo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.passo .marca-passo {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--paper);
}
.passo.feito .marca-passo {
  background: var(--verde);
  border-color: var(--verde);
}
.passo .texto-passo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--ink-3);
}
.passo .texto-passo strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}
.passo.feito .texto-passo strong {
  color: var(--ink-3);
  text-decoration: line-through;
}
#cartao-assinatura {
  max-width: 640px;
}
.preco-grande {
  margin: 10px 0 8px;
  font-family: "Paytone One", "IBM Plex Sans", sans-serif;
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
}
.preco-grande span {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  color: var(--ink-3);
}
.botoes-assinatura {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
#cartao-assinatura h3 {
  margin: 18px 0 8px;
}
#cartao-destinos {
  max-width: 720px;
  margin-bottom: 16px;
}
#cartao-destinos table {
  margin: 10px 0 14px;
}
.linha-form {
  flex-direction: row !important;
  align-items: flex-end;
  flex-wrap: wrap;
  max-width: none !important;
  margin-bottom: 12px;
}
.linha-form label {
  flex: 1 1 180px;
}
#lista-clientes td .nota {
  margin: 0;
}