/* ===========================================================================
   LAYOUT B — "Workspace"
   ===========================================================================

   A ideia: o painel não informa, ele dá trabalho a fazer. A coluna principal
   é uma FILA — o que exige ação hoje, em ordem de urgência — e não um
   apanhado de indicadores. Quem abre já sabe por onde começar.

   Estrutura de SaaS moderno: menu lateral fixo no lugar da barra roxa do
   topo. A navegação lateral ganha porque o olho lê de cima para baixo e a
   lista de seções não compete com o conteúdo; e porque sobra a faixa
   superior inteira para o contexto da tela (competência, filtros).

   Cards sem sombra, só borda de 1px. Sombra empilhada em vinte elementos é
   o que dá aquele aspecto de "muita coisa flutuando".

   Movimento: biblioteca Motion. É aqui que se mede se ela vale o peso.
   =========================================================================== */

/* A barra lateral é a mesma TRILHA fina do layout C (`.nav-trilha`, nos
   tokens). Era uma barra de 232px que recolhia para 60px num botão; virou
   56px fixos, e o nome de cada ícone aparece no hover.

   Com isso saiu bastante coisa: a escolha guardada no navegador, o botão do
   chevron, o escalonamento dos rótulos ao abrir, as duas artes de logo e as
   ~90 linhas de CSS do estado recolhido. Menu que tem dois estados é menu
   que precisa ficar certo nos dois. */
.b-tela {
  display: grid;
  grid-template-columns: var(--trilha-larg) 1fr;
  min-height: 100vh;
  background: var(--papel-fundo);
}
@media (max-width: 700px) { .b-tela { grid-template-columns: 1fr; } }

/* --- Área principal -------------------------------------------------------- */
.b-principal { min-width: 0; display: flex; flex-direction: column; }

/* Faixa de contexto: título da tela à esquerda, filtros à direita. Fica
   grudada no topo porque a competência é a informação que muda o
   significado de todo o resto da tela. */
.b-topo {
  /* A ALTURA DO CABEÇALHO, PUBLICADA. Ele é `sticky` no topo, então tudo o
     que também gruda precisa saber onde ele termina — senão gruda ATRÁS
     dele. Foi o que aconteceu com o crachá de Minha conta: parava a 16px do
     alto da janela, e os 53px de cabeçalho passavam por cima cortando a foto.
     Medir "53px" à mão em cada tela seria o mesmo número copiado em vários
     lugares, esperando a hora em que o cabeçalho mudar de tamanho. */
  --altura-topo: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  /* Enxuta de proposito: eram 24px em cima e embaixo, com o titulo grande e
     um subtitulo por baixo. Virou uma linha so -- titulo, competencia e
     filtro lado a lado -- e devolveu ~26px de conteudo em toda tela. Barra
     de contexto nao e capa de revista. */
  padding: 10px var(--e5);
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* ALINHADO PELA LINHA DE BASE -- inclusive os botoes.
   Medido nos PIXELS DESENHADOS, que foi a unica medida confiavel aqui (sondas
   de baseline no DOM davam numero errado, porque o rotulo contem um
   inline-flex):
     center                 -> titulo e rotulo com 2,1px de diferenca
     baseline               -> 0,0px, e o rotulo da pastilha tambem em 0,0px
     baseline + align-self  -> conserta o texto e joga o botao 2,1px para o
                               outro lado
   O terceiro caso foi meu: eu tinha "protegido" os botoes com
   `align-self: center` achando que pilula nao deve alinhar por base. Deve --
   o que assenta na linha e o TEXTO dentro dela, e e isso que o olho compara.
   Sem excecao nenhuma, os tres caem na mesma linha. */
.b-topo-quem { display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap; min-width: 0; }

/* O ICONE DO ASSUNTO mora AQUI, e nao no painel.css, porque ele e da
   MOLDURA: as treze telas do laboratorio o usam, e so as nove do painel
   carregam aquela folha. Deixado la, ele saia com 13x16px nas outras --
   o HTML existia e o estilo nao chegava. */
/* --- O ÍCONE DO ASSUNTO, NO CABEÇALHO ------------------------------------
 *
 * As nove telas do painel têm o mesmo cabeçalho e mudam só a palavra. Sem um
 * símbolo, saber onde se está exige LER — e quem circula entre elas o dia
 * inteiro relê o mesmo título dezenas de vezes. Com o ícone, reconhece.
 *
 * É o MESMO desenho que a régua do topo e a janelinha da trilha usam para
 * aquela página; o valor vem de `PAINEL_PAGINAS`, não escrito no template.
 *
 * A forma é a da `.lista-inicial` (quadrado arredondado de canto suave), só
 * que maior e na cor da marca: é a mesma família visual das linhas logo
 * abaixo, um degrau acima na hierarquia.
 */
.b-topo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* `align-self: center` NÃO é escolha de gosto: `.b-topo-quem` alinha por
     `baseline`, e uma caixa de 42px participando disso arrasta a linha de
     base para o fundo dela — o título ia parar 58px abaixo do ícone, cada um
     numa altura. Com `align-self`, este item sai do grupo de baseline e o
     alinhamento volta a ser entre o texto e o quadrado. */
  align-self: center;
  /* 32px, e o teto é o CABEÇALHO: ele é enxuto de propósito (`--altura-topo`
     de 53px, documentado no `dashboard-b.css`) e tudo o que gruda no topo
     conta com essa medida. Um quadrado maior que o bloco de texto empurra a
     barra para baixo e o ícone deixa de ser marcador para virar cartaz. */
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--raio-mini);
  background: var(--acento-fundo);
  border: 1px solid var(--acento-linha);
  color: var(--acento);
  font-size: .95rem;
}

/* E O BLOCO DE TEXTO PRECISA PODER ENCOLHER.
 *
 * `.b-topo-quem` é `flex-wrap: wrap`, e `.b-encolhe` chega com largura de
 * conteúdo — a do subtítulo inteiro. Num contêiner que quebra linha, quebrar
 * vem ANTES de encolher: o ícone não cabia ao lado e ia parar numa linha
 * própria, 62px acima do título. Parecia problema de alinhamento vertical e
 * era o texto ocupando a faixa toda.
 *
 * `flex: 1 1 0` zera a base: o bloco entra na linha do ícone e cresce com o
 * que sobrar. A regra é adjacente de propósito — vale só onde há ícone, e
 * não mexe nas telas em que `.b-encolhe` divide a barra com outra coisa.
 */
.b-topo-icone + .b-encolhe { flex: 1 1 0; min-width: 0; }

/* E O LIMITE TEM DE ESTAR UM NÍVEL ACIMA, senão a correção vira outro
 * defeito. Com o `flex: 1 1 0` de cima, o bloco de texto cresce até onde o
 * pai deixar — e `.b-topo-quem` se dimensiona pelo conteúdo, ou seja, pela
 * barra inteira. Resultado: o título ocupava a largura toda e os botões
 * ("Novo grupo de clientes", o sininho, a conta) desciam para uma segunda
 * linha. Consertei a quebra do ícone e criei a quebra da barra.
 *
 * `flex: 1 1 0` também aqui: o bloco de quem-somos passa a pedir o espaço
 * que SOBRA depois das ações, em vez de pedir tudo e empurrá-las para baixo.
 *
 * `:has()` para valer só nas telas com ícone — as outras do laboratório
 * dividem esta mesma `.b-topo-quem` e não têm por que mudar de
 * comportamento por causa daqui.
 */
.b-topo:has(.b-topo-icone) .b-topo-quem { flex: 1 1 0; min-width: 0; }

/* E O ALINHAMENTO PASSA A SER PELO CENTRO, nao pela linha de base.
 *
 * `baseline` existe aqui para casar o titulo com a etiqueta pequena ao lado,
 * e funciona enquanto tudo na barra e TEXTO. O quadrado de 32px nao tem linha
 * de base util: ele e mais alto que o grupo de texto, entao o grupo se
 * encosta no alto da linha e o icone fica visivelmente acima do titulo.
 *
 * `align-self: center` no icone nao resolve — ele so tira o icone do grupo de
 * baseline; quem continua desencontrado e o texto. Alinhar a caixa inteira
 * pelo centro resolve os dois de uma vez, e entre um titulo de 19px e uma
 * etiqueta de 11px a diferenca entre centro e linha de base e imperceptivel.
 *
 * So onde ha icone: as telas sem ele seguem com o `baseline` de sempre.
 */
.b-topo:has(.b-topo-icone) .b-topo-quem { align-items: center; }

/* No celular ele sai. A largura ali é toda do título, e um quadrado de 42px
   ao lado empurra o nome da página para duas linhas — trocar informação por
   enfeite é o contrário do que o ícone veio fazer. */
@media (max-width: 560px) {
  .b-topo-icone { display: none; }
}

/* O SEPARADOR entre o titulo e o que vem depois.
   Alinhar dois textos de tamanhos diferentes lado a lado nunca fica bom: o
   titulo e 15px em caixa mista, a etiqueta e 11px em caixa alta, e mesmo com
   as linhas de base coincidindo o olho procura uma relacao entre eles que nao
   existe. O filete resolve dizendo que sao DUAS COISAS: dai em diante nao ha
   mais o que alinhar, ha uma divisao.
   Vale para toda tela da moldura, e por isso mora aqui e nao em cada folha --
   o titulo seguido de uma etiqueta e o padrao da barra, nao a excecao. */
.b-topo-quem > h1 + * { position: relative; }
.b-topo-quem > h1 + *::before {
  content: '';
  position: absolute;
  left: calc(var(--e4) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: var(--linha-forte);
}

/* UM REGISTRO TIPOGRAFICO SO ao lado do titulo.
   Os controles que acompanham o h1 nesta barra ("Ver procuracoes", "Novo
   orgao", "Voltar", a pastilha do escritorio) sao todos a mesma coisa:
   etiqueta pequena de apoio. Quando cada tela escolhia a propria caixa e o
   proprio espacamento, o resultado era o que se ve de longe -- itens
   geometricamente centrados no mesmo pixel e ainda assim lidos como
   desalinhados, porque caixa alta e caixa mista ocupam alturas opticas
   diferentes.
   A regra vive AQUI, junto da barra, e nao em cada folha de tela: e a mesma
   licao do .cad-hero escrito a mao em 11 templates, que divergiu em tres
   larguras antes de virar folha unica.
   O h1 fica de fora, e os span tambem -- em Clientes o titulo e o nome da
   empresa e o span ao lado e o CNPJ, que nao sao etiqueta de apoio. */
.b-topo-quem > a,
.b-topo-quem > button,
.b-topo-quem .lab-rotulo {
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .88px;
  text-transform: uppercase;
  line-height: 1.3;
}
/* O TÍTULO DA PÁGINA É O MAIOR TEXTO DA TELA, e não era.
 *
 * Ele usava `--txt-medio` (15px) — o mesmo token do corpo de um artigo de
 * ajuda, e só 3px acima da linha de uma lista. Numa tela de leitura isso
 * ficou visível na cara: os títulos DENTRO do texto passavam o título DA
 * PÁGINA, e a escala inteira parecia invertida — o que se lia como "as fontes
 * estão grandes" era, na verdade, o topo estando pequeno.
 *
 * 19px é o teto da moldura: acima disso a barra passa dos 55px e o ícone de
 * 32px deixa de ser o que define a altura. Fora do token de propósito — não
 * existe `--txt-grande`, e criar um para um uso só seria dar nome de sistema
 * a uma exceção.
 */
/* A ARCHIVO ENTROU AQUI em 22/08/2026. O peso do titulo deixou de vir de
   `font-weight` sozinho e passa a vir do desenho da letra, que e o que
   permitiu afrouxar o resto da tela sem ela ficar sem espinha. */
.b-topo h1 {
  font-family: var(--fonte-titulo);
  margin: 0;
  position: relative;
  font-size: 19px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.015em;
  white-space: nowrap;
  /* O título não é clicável em nenhuma tela: o cursor continua sendo o de
     texto, senão o filete abaixo promete um link que não existe. */
  cursor: default;
  /* E A CAIXA ABRAÇA A PALAVRA — sem isto o filete de baixo sai errado em
     metade das telas, e o motivo não é dele.
     Onde o `h1` é item de flex (Ajuda, Mensagens, o artigo), ele já encolhe
     até o texto sozinho. Onde ele mora dentro do `.b-encolhe` (Clientes,
     Setores, o painel inteiro), é um BLOCO: ocupa a largura toda do bloco,
     e o `::after` com `left/right: 0` acompanha a caixa, não a palavra —
     saía um risco atravessando a barra até os botões.
     `fit-content` faz as duas situações se comportarem igual. O `max-width`
     é a rede: título comprido continua limitado pelo pai em vez de empurrar
     a barra. */
  width: fit-content;
  max-width: 100%;
  /* E O ESPAÇO DO FILETE É RESERVADO AQUI DENTRO, com padding, em vez de o
     filete ficar pendurado para fora (`bottom: -4px`). Pendurado, ele não
     ocupava lugar nenhum no layout e ia parar EM CIMA do subtítulo nas telas
     que têm um — Clientes, Setores, o painel inteiro. Reservado, o próprio
     título carrega o espaço de que precisa, e nenhum vizinho futuro tem de
     saber que ele existe.
     3px, e não mais: é o que deixa o filete perto o bastante para ler como
     sublinhado DAQUELA palavra. Afastado, ele vira uma linha divisória solta
     e a barra ainda cresce junto. */
  padding-bottom: 3px;
}

/* O FILETE LARANJA DO TÍTULO — o único uso da segunda cor da marca.
 *
 * A divisão entre as duas cores é esta: o roxo diz "isto é ação" (botão, item
 * selecionado, navegação) e o laranja diz "isto é Tarefix". Se o laranja
 * virasse cor de estado, as duas passariam a competir e nenhuma significaria
 * coisa alguma. Por isso ele aparece aqui, num toque, e em quase nenhum outro
 * lugar.
 *
 * É CSS, NÃO MOTION, e isto não é preguiça. A biblioteca é para animação de
 * ENTRADA; usada em hover, ela grava o último quadro no `style` do elemento,
 * e estilo inline vence folha sem `!important` — a propriedade animada
 * congela e o `:hover` para de funcionar, sem erro nenhum no console. É a
 * armadilha que o CLAUDE.md já documenta, e o `transition` faz o mesmo
 * trabalho sem cair nela.
 *
 * A PRIMEIRA VERSÃO PESOU, e ficam escritos os dois motivos:
 *
 *   · O título inteiro trocava de cor. Vinte caracteres em 19px saindo do
 *     quase-preto para o laranja é meia barra mudando de uma vez — vira
 *     alerta, não acabamento. Agora o texto não se mexe; quem responde ao
 *     ponteiro é só o filete.
 *
 *   · O filete aparecia cheio. De `scaleX(0)` a `scaleX(1)` com a cor já em
 *     100%, uma barra sólida atravessava o título. Agora começa em 40% da
 *     largura E transparente: trajeto curto e cor entrando junto, então o que
 *     se vê é algo surgindo, não algo passando.
 *
 * Nasce da ESQUERDA e some para a esquerda: crescer do meio para os lados
 * chama mais atenção do que um título merece, e da esquerda ele acompanha a
 * direção da leitura.
 */
.b-topo h1::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;      /* dentro do padding do h1 — ver o comentário lá em cima */
  /* ALTURA INTEIRA, e este é o motivo: com 1,5px a linha ENGROSSAVA no fim da
     animação. Enquanto o `scaleX` corre, o navegador desenha o elemento numa
     camada composta e arredonda o meio-pixel para baixo; quando a transição
     acaba, ele devolve o elemento ao fluxo normal e arredonda para cima. A
     espessura mudava sozinha no último quadro, sem ninguém ter pedido.
     Qualquer valor fracionário faz isso — o conserto não é escolher outro
     meio-pixel, é não usar meio-pixel. Por isso "mais fino" aqui só pode ser
     1px: entre 1 e 2 não existe espessura que não volte a piscar no fim. */
  height: 1px;
  border-radius: 2px;
  background: var(--laranja);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left;
  /* .55s, e não os .34s da primeira tentativa. Devagar aqui é o que separa
     "acabamento" de "aviso": num elemento que não é clicável, o filete não
     precisa alcançar o ponteiro — ele pode chegar depois. A opacidade sobe um
     pouco mais rápido que a largura (.45 contra .55) para o filete não passar
     um instante visível ainda encolhido. */
  transition: transform .55s cubic-bezier(.22, 1, .36, 1),
              opacity .45s ease;
}
/* Opacidade cheia agora que a linha tem 1px: os .85 existiam para segurar uma
   linha de 2px, e mantidos num fio de 1px o filete quase sumia. Metade da
   espessura pede a cor inteira para o peso final continuar o mesmo. */
.b-topo h1:hover::after { opacity: 1; transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  /* Sem o deslizar, mas o filete continua aparecendo: quem pediu menos
     movimento não pediu menos retorno. */
  .b-topo h1::after { transition: none; transform: scaleX(1); }
}
.b-topo-sub { font-size: var(--txt-mini); color: var(--tinta-fraca); }
.b-topo-acoes { display: flex; align-items: center; gap: var(--e2); }

.b-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 7px 13px;
  border-radius: var(--raio-mini);
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  color: var(--tinta-media);
  font-size: var(--txt-mini);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  /* A LISTA TEM DE INCLUIR TUDO O QUE O HOVER MUDA, e é aqui que estava o
     defeito do botão cheio: ele clareava com `filter`, e `filter` não estava
     nesta lista — então a única coisa animada era o que ele NÃO mudava, e a
     cor trocava de um quadro para o outro. Um hover que troca instantâneo não
     é "rápido", é seco: não há nada ligando o antes ao depois, e o botão
     parece piscar em vez de responder. */
  transition: border-color var(--mov-base) ease,
              color        var(--mov-base) ease,
              background   var(--mov-base) var(--mov-curva),
              box-shadow   var(--mov-base) var(--mov-curva),
              transform    var(--mov-rapido) var(--mov-curva);
}
.b-btn:hover { border-color: var(--acento); color: var(--acento); }

/* O BOTÃO DESLIGADO TEM DE PARECER DESLIGADO.
   Não havia regra nenhuma para `:disabled` em todo o laboratório B, e há 23
   telas com botão que nasce assim. O efeito era sempre o mesmo relato: "clico
   e simplesmente nada acontece, nenhum aviso" — o botão continuava roxo,
   sólido, com o cursor de mão e o brilho do hover, e o sistema estava fazendo
   a coisa certa em silêncio. Silêncio, aqui, é indistinguível de defeito.
   O `pointer-events` fica de fora de propósito: sem ele o `title` do botão
   ainda aparece ao passar o mouse, e é lá que mora a explicação. */
.b-btn:disabled,
.b-btn[disabled],
.b-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.35);
}
.b-btn:disabled:hover,
.b-btn[disabled]:hover {
  border-color: var(--linha-forte);
  color: var(--tinta-media);
}
.b-btn--forte:disabled:hover,
.b-btn--forte[disabled]:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel);
}
/* O fio de luz do `--forte` é convite para clicar. Num botão que não aceita
   clique, ele é a própria mentira. */
.b-btn--forte:disabled::after,
.b-btn--forte[disabled]::after { display: none; }

/* O BOTÃO CHEIO — a ação principal de vinte telas.

   O HOVER É UM FIO LARANJA QUE SE FECHA EM VOLTA DELE, e não um deslocamento.
   Chegou a subir um pixel; deslocar tem dois problemas num botão que a pessoa
   atravessa dezenas de vezes por dia. O primeiro é que o layout inteiro parece
   respirar quando o cursor passa por cima. O segundo é mais sutil e pior: se o
   botão sobe e o cursor fica na borda de baixo, ele sai de debaixo do cursor —
   o hover desliga, o botão desce, o cursor volta a alcançá-lo, e ele pisca.

   O fio não move nada. Ele nasce um pouco maior e transparente e se fecha até
   3px do botão, o que se lê como um contorno SE FORMANDO em vez de aparecer
   pronto. É desenhado num `::after`, fora do fluxo, então nada em volta se
   mexe.

   LARANJA, e é a única cor que podia ser: o roxo é a cor da própria peça — um
   fio roxo em volta de um botão roxo é engorda de borda, não destaque. O
   laranja é a segunda cor da marca e existe justamente para o toque curto.
   Aqui ele nunca encosta em texto, então o contraste baixo do #f7941d, que
   proibiu o laranja como cor de letra, não se aplica.

   O `:active` fecha o fio contra a borda. É o gesto inteiro: o contorno se
   forma ao aproximar e colapsa ao apertar.

   TUDO ISTO É CSS, e não `animate()`. O Motion grava o último quadro no
   `style` do elemento, e estilo inline congelaria a propriedade e mataria o
   próprio hover — o defeito que o `_motion_ajuda.html` documenta. */
.b-btn--forte {
  position: relative;
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel);
  box-shadow: var(--sombra-acento);
  /* A LUZ DESTE BOTÃO É BRANCA NOS DOIS TEMAS. Ver a tabela medida abaixo. */
  --rgb-farol-no-cheio: 255, 255, 255;
  /* PARA O FAROL PODER FICAR ATRÁS DO TEXTO. Ver a nota do `::before` logo
     abaixo: sem um contexto de empilhamento próprio, um `z-index: -1` não para
     no botão — ele desce até o fundo do ancestral posicionado mais próximo e o
     farol simplesmente some atrás do cartão. */
  isolation: isolate;
}

/* O FAROL TAMBÉM AQUI (25/08/2026). Ele estava de fora, e a nota do
   `tokens-sobrio.css` dava duas razões — as duas verdadeiras, e as duas com
   saída:

   1. "OS DOIS EFEITOS DISPUTAM O MESMO `::after`". Disputavam. O fio laranja
      fica no `::after`; o farol foi para o `::before`, que estava livre.

   2. "O `overflow: hidden` QUE O FAROL PRECISA RECORTARIA O FIO", que vive
      FORA do botão. Precisava no desenho antigo, em que o gradiente era o
      fundo de um `::after` sem curva própria. Aqui ele é o fundo de um
      `::before` com `border-radius: inherit`, e FUNDO JÁ É RECORTADO PELA
      CURVA DO PRÓPRIO ELEMENTO. Sem `overflow: hidden` no botão, o fio
      continua inteiro.

   O `z-index: -1` é o que o mantém ATRÁS DO TEXTO sem precisar embrulhar o
   conteúdo. Na ordem de pintura, descendente com z-index negativo entra depois
   do fundo do elemento e ANTES do texto; com `z-index: 0` ele entraria depois
   do texto e apagaria a letra sob o cursor. É por isso que o `.e-farol` do
   sistema precisa do `> * { z-index: 1 }` e este não: lá o conteúdo é
   embrulhado, aqui o texto é nó solto e não há o que levantar.

   A COR NÃO INVERTE, E ISSO CONTRARIA O QUE EU IA ESCREVER. A regra do
   `--rgb-farol` do sistema é "no escuro a luz escurece", e ela existe porque
   lá o preenchimento vira claro e um clarão branco o lavaria. Medi antes de
   copiar, e aqui dá o contrário:

     tema     preenchimento      tinta      farol branco   farol escuro
     claro    roxo escuro        branca         5,19            —
     escuro   roxo LUMINOSO      ESCURA         8,49          4,17

   O que decide não é o preenchimento: é a TINTA. No escuro a tinta deste botão
   é `--papel`, que ali é escuro; um farol escuro puxa o fundo NA DIREÇÃO DA
   TINTA e as duas se aproximam — 4,17, abaixo da régua. O branco afasta, e o
   contraste SOBE. Por isso o token daqui é próprio e não é redefinido no
   escuro: a luz é branca nos dois, e nos dois ela lê como luz.

   (Vale conferir se o `--rgb-farol` do BackOffice não tem o mesmo problema
   pelo mesmo motivo. Não foi mexido aqui: é outra árvore.) */
.b-btn--forte::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120px circle at var(--fx, 50%) var(--fy, 50%),
                              rgba(var(--rgb-farol-no-cheio), .26), transparent 70%);
  opacity: 0;
  transition: opacity var(--mov-base) ease;
  pointer-events: none;
}
.b-btn--forte:hover::before,
.b-btn--forte:focus-visible::before { opacity: 1; }

/* Botão desligado não acende: farol num botão que não faz nada é promessa. */
.b-btn--forte:disabled::before,
.b-btn--forte[disabled]::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .b-btn--forte::before { transition: none; }
}
.b-btn--forte::after {
  content: '';
  position: absolute;
  /* Começa maior que o botão: é de onde o fio "vem". */
  inset: -7px;
  border: 1px solid var(--laranja);
  border-radius: calc(var(--raio-mini) + 6px);
  opacity: 0;
  pointer-events: none;
  transition: inset var(--mov-base) var(--mov-curva),
              opacity var(--mov-base) ease,
              border-radius var(--mov-base) var(--mov-curva);
}
.b-btn--forte:hover::after,
.b-btn--forte:focus-visible::after {
  inset: -3px;
  border-radius: calc(var(--raio-mini) + 2px);
  opacity: 1;
}
.b-btn--forte:hover,
.b-btn--forte:focus-visible {
  background: var(--acento-vivo);
  border-color: var(--acento-vivo);
  color: var(--papel);
}
.b-btn--forte:active::after {
  inset: -1px;
  transition-duration: var(--mov-rapido);
}

/* QUEM PEDIU MENOS MOVIMENTO CONTINUA VENDO O FIO — ele só não se fecha, já
   aparece no lugar. O contorno é a informação ("este é o botão sob o cursor");
   o fechamento é o enfeite, e é o enfeite que dá enjoo em quem tem
   labirintite. Tirar os dois deixaria a pessoa sem retorno nenhum. */
@media (prefers-reduced-motion: reduce) {
  .b-btn { transition-property: background, border-color, color, box-shadow; }
  .b-btn--forte::after { inset: -3px; border-radius: calc(var(--raio-mini) + 2px); transition-property: opacity; }
}

/* BOTÃO SÓ COM O ÍCONE — quadrado, para ação secundária cujo símbolo já é
   conhecido (imprimir, compartilhar). O rótulo NÃO sai do HTML: fica
   escondido aqui, porque há código que o procura para trocar o texto de
   retorno, e há leitor de tela que o lê. Quem usa isto tem de pôr `title`
   E `aria-label` — sem palavra na tela, é só o que resta para saber o que o
   botão faz. */
.b-btn--so-icone {
  gap: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  justify-content: center;
}
.b-btn--so-icone span { display: none; }
.b-btn--so-icone i { font-size: 14px; }

.b-corpo { padding: var(--e5); display: grid; grid-template-columns: 1fr 320px; gap: var(--e5); align-items: start; }
/* A variante de UMA COLUNA mora AQUI, colada no `.b-corpo` que ela modifica —
   e não na folha da tela que a usou primeiro.
   Ela nasceu no `avisos.css` (Mensagens e Lembretes), e o efeito foi que toda
   tela nova de uma coluna só funcionava se lembrasse de carregar a folha de
   OUTRA tela. Certificados não lembrou: a tabela apareceu espremida num terço
   da largura, com um vazio de 320px ao lado, e o defeito parece de desenho
   quando é de arquivo faltando.
   Regra geral: modificador anda junto do que modifica. */
.b-corpo--unico { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .b-corpo { grid-template-columns: 1fr; } }

/* --- Dois cartões lado a lado --------------------------------------------
   Usado por "Próximos dias" + "Suas pendências", abaixo da fila. Os dois são
   listas curtas: um embaixo do outro desperdiçava a largura da coluna e
   empurrava o segundo para fora da tela.

   `align-items: start` é o que impede o cartão de duas linhas de esticar até
   a altura do de sete — sem ele, a grade iguala as alturas e sobra um vazio
   branco embaixo da lista curta.

   Quebra em 900px, e não nos 1100px do `.b-corpo`: aqui a coluna lateral já
   saiu, então a de trabalho ocupa a tela inteira e ainda cabem dois. */
.b-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5);
  align-items: start;
  margin-bottom: var(--e5);
}
.b-par > .b-card { margin-bottom: 0; }

@media (max-width: 900px) { .b-par { grid-template-columns: 1fr; } }

/* --- Métricas em faixa ----------------------------------------------------
   Quatro números no topo da coluna de trabalho, sem caixa individual: uma
   caixa só, dividida por filete. Menos bordas, menos ruído. */
.b-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: var(--e5);
}
.b-metrica { position: relative; padding: var(--e4) var(--e5) calc(var(--e4) + 2px); border-left: 1px solid var(--linha); }
/* O FILETE SAI DO PRIMEIRO QUE SE VÊ, e não do primeiro do DOM.
   `:first-child` é do documento: com a ordem trocada pelo usuário, o fio
   apareceria no meio da faixa e sumiria da ponta — e escondendo o
   primeiro cartão, sobraria um fio solto na borda do painel. O
   `data-pos` vem contado entre os cartões VISÍVEIS, então ele segue o
   que o olho vê nos dois casos. */
.b-metrica[data-pos="0"] { border-left: none; }
.b-metrica .lab-rotulo { display: block; margin-bottom: var(--e2); }
.b-metrica-valor { display: flex; align-items: baseline; gap: 5px; }

/* DOIS destes números abrem uma janelinha e o resto não abre nada. Sem
   marcar quais, a pessoa clica em todos uma vez, descobre que a maioria não
   faz nada, e para de clicar — inclusive nos dois que funcionam.

   A seta fica sempre à vista, apagadinha, e acende no hover: é o que diz
   "aqui tem mais" antes de a pessoa tentar. O hover só existe em quem é
   clicável — dar realce a quem não responde é prometer o que não se cumpre. */
.b-metrica.e-clicavel {
  cursor: pointer;
  transition: background var(--mov-rapido) ease;
}
/* DOIS DELES VIRARAM `<a>` de verdade (Empresas e Usuários ativos), e link
   traz sublinhado e cor azul do navegador. A regra nunca precisou disto
   enquanto todos eram `<div>` com JS. Quem diz "isto é clicável" aqui é o
   chevron do canto e o realce do hover, não um sublinhado no meio de uma
   fileira de números. */
a.b-metrica { text-decoration: none; color: inherit; }
a.b-metrica:hover { text-decoration: none; }
.b-metrica.e-clicavel::after {
  content: '\F285';                       /* bi-chevron-right */
  font-family: 'bootstrap-icons';
  position: absolute;
  top: var(--e4); right: var(--e4);
  font-size: 10px;
  color: var(--linha-forte);
  transition: color var(--mov-rapido) ease, transform var(--mov-base) var(--mov-curva);
}
/* O CARD SOBE UM FIO, e isto só passou a acontecer em 22/08/2026. A regra
   existia; o que não deixava era o `transform` que o Motion gravava inline e
   nunca soltava. Um pixel é de propósito: são seis lado a lado, e mais que
   isso vira onda quando o mouse atravessa a fileira. */
.b-metrica.e-clicavel {
  transition: background var(--mov-rapido) ease,
              transform var(--mov-base) var(--mov-curva);
}
.b-metrica.e-clicavel:hover {
  background: var(--papel-sutil);
  transform: translateY(-1px);
}
.b-metrica.e-clicavel:hover::after { color: var(--acento); transform: translateX(2px); }
.b-metrica.e-clicavel:hover .lab-num { color: var(--acento); }
.b-metrica.e-clicavel:hover .lab-num--alerta { color: var(--alerta); }

/* --- A unidade embaixo do número ------------------------------------------
   TODO NÚMERO DA FAIXA DIZ DE QUE ELE É, e isso passou a importar quando os
   três primeiros ganharam verso: um card virado fica ao lado de dois normais,
   e sem a palavra embaixo `18` e `263` são o mesmo tipo de coisa na tela.

   Ela está nos SEIS, e não só nos três que viram — senão as alturas da fileira
   ficariam desiguais (é uma linha de grade só, então o mais alto manda) e
   sobraria um vazio embaixo de três números.

   `--tinta-media` e não a fraca: é informação, não legenda. E o card é `--papel`
   no claro, a superfície mais clara que existe — a régua invertida do tema
   claro é justamente onde a tinta fraca reprova. */
.b-metrica-unidade {
  display: block;
  margin-top: 5px;
  font-size: var(--txt-micro);
  line-height: 1.35;
  color: var(--tinta-media);
}

/* --- Os cards que viram ---------------------------------------------------
   `perspective` mora no PAI, nunca no elemento que gira: no próprio elemento
   ela é ignorada, e a rotação sai chapada sem erro nenhum. */
.b-metrica.e-vira { perspective: 1400px; }

/* AS DUAS FACES EMPILHAM POR GRADE, na mesma célula — não por
   `position: absolute`. Assim a caixa se dimensiona sozinha pela face mais
   alta; altura escrita à mão aqui é o que corta a segunda linha no dia em que
   o número ganha um dígito. */
.b-metrica-giro {
  display: grid;
  transform-style: preserve-3d;
  /* 420ms E A CURVA DE TRAVESSIA. Os tokens `--mov-*` da casa são calibrados
     para RESPOSTA (150 a 320ms): a esta distância eles viram lampejo — a coisa
     acontece e não se vê. É a mesma lição do vidro que atravessa o cartão da
     lista de demandas. */
  transition: transform 420ms cubic-bezier(.12, .10, .62, 1);
}
.b-metrica.e-virado .b-metrica-giro { transform: rotateY(180deg); }

.b-metrica-face {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.b-metrica-face.e-verso { transform: rotateY(180deg); }

/* --- O botão de virar -----------------------------------------------------
   ALVO PRÓPRIO, NO CANTO DE BAIXO. Dois destes cards já abrem uma janelinha ao
   clique, e virar não pode roubar esse clique; o canto de cima já é do chevron
   que anuncia a janelinha. E o botão é CRIADO PELO JAVASCRIPT: sem ele, não
   aparece botão nenhum — afordância que promete o que não cumpre é pior que
   afordância nenhuma. */
.b-metrica-virar {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-fraca);
  font-size: 12px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(.9);
  transition: opacity var(--mov-rapido) ease, transform var(--mov-rapido) ease,
              background var(--mov-rapido) ease, color var(--mov-rapido) ease;
}
.b-metrica:hover .b-metrica-virar,
.b-metrica-virar:focus-visible { opacity: 1; transform: scale(1); }
.b-metrica-virar:hover { background: var(--papel-sutil); color: var(--acento); }
/* O CARD VIRADO MANTÉM O BOTÃO À VISTA. Apagado, ele seria um estado sem
   saída para quem chegou até aqui pelo teclado. */
.b-metrica.e-virado .b-metrica-virar { opacity: 1; transform: scale(1); color: var(--acento); }
/* Sem hover não há como revelá-lo: no toque ele nasce visível. */
@media (hover: none) {
  .b-metrica-virar { opacity: .6; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .b-metrica-giro, .b-metrica-virar { transition: none; }
}

/* --- Card ------------------------------------------------------------------ */
.b-card {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  margin-bottom: var(--e5);
  overflow: hidden;
}
/* Faixa cinza translúcida no cabeçalho, mesmo recurso do C: com filete de
   1px sobre branco os blocos não se separavam.
   O tom subiu de .045 para .07 porque o título parecia claro — e o título já
   está na tinta mais escura da paleta, então o que estava lavado era a FAIXA,
   não a letra. Escurecer a letra não teria para onde ir. */
/* O TOPO DEIXOU DE SER FAIXA PREENCHIDA. Era um bloco cinza atras do titulo;
   virou titulo sobre um fio. Com sete cartoes na tela, sete faixas cinzas
   pesavam mais que o conteudo que elas anunciavam. */
.b-card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  background: transparent;
  /* DEZ POR CENTO, e eram sete.
     A sete a faixa quase não se separava do branco do corpo: o cabeçalho do
     card existe para dizer onde uma coisa começa, e com esse contraste era
     preciso procurar a linha divisória para saber. A dez ela se lê de
     relance, e o campo de busca que mora dentro dela ganha contorno próprio.
     Mais escura que isso (treze, dezessete) ela começa a competir com o conteúdo e
     passa a parecer cabeçalho de planilha.

     O MESMO VALOR NOS TRÊS CABEÇALHOS do laboratório — este, o do bloco de
     formulário (`formulario.css`) e o da janelinha (`tokens-sobrio.css`).
     Subir um e deixar os outros é como o produto passa a ter duas
     intensidades de cabeçalho, e ninguém sabe qual é a certa. */
  /* QUATRO POR CENTO, e eram dez, desde 22/08/2026.
     A dez a faixa era um bloco cinza atras do titulo. No painel sao sete
     cartoes na tela, e sete faixas dessas pesavam mais que o conteudo que
     elas anunciavam. A quatro ela ainda separa, e quem faz o trabalho de
     dizer onde uma coisa comeca passou a ser a LINHA DE BAIXO, que continua
     em `--linha-forte`.

     O MESMO VALOR NOS QUATRO CABECALHOS do laboratorio: este, o do painel de
     controle (`painel.css`), o do bloco de formulario (`formulario.css`) e o
     da janelinha (`tokens-sobrio.css`). Mudar um e deixar os outros e como o
     produto passa a ter duas intensidades de cabecalho, e ninguem sabe qual
     e a certa. Foi por isso que os quatro desceram juntos. */
  background: rgba(var(--rgb-tinta), .04);
  /* A linha de baixo sobe junto: na cor antiga ela sumia dentro da faixa mais
     escura, e o cabeçalho perdia a borda que o separa do conteúdo. */
  border-bottom: 1px solid var(--linha-forte);
}
.b-card-titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-medio);
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
}
.b-card-corpo { padding: var(--e2) var(--e3); }
/* ---------------------------------------------------------------------------
   O TETO DA FILA DE TRABALHO

   Nenhum cartão do painel tinha `max-height`, e a Fila é a que paga por isso:
   com 18 obrigações ela mede ~800px, e abrir uma sanfona de 38 empresas soma
   ~1060px. Ela empurrava "Como está o mês" e tudo o que vem depois para fora
   da tela, sem limite nenhum. Medido no painel de hoje: 629px de uma janela
   de 860 (73%) eram atravessados antes da primeira linha em que se pode agir.

   O NÚMERO É RELATIVO À JANELA, E NÃO `calc(100vh - custo do que vem antes)`.
   A segunda forma aproveita mais a tela e só funciona enquanto a Fila for o
   primeiro cartão da coluna — e ela vai deixar de ser, porque a ordem passa a
   ser do usuário. Um teto que depende da posição fica errado no dia em que
   alguém arrasta o cartão, e ninguém sabe dizer por quê.

   48vh SAIU DE MEDIÇÃO, e o critério é o cartão SEGUINTE. O teto existe para
   a Fila não esconder o que vem depois dela; se o próximo cartão nunca aparece
   na primeira tela, o teto falhou no que veio fazer. Medido em três janelas,
   com "Como está o mês" logo abaixo:

     teto    768px        860px        1080px
     44vh    354 (58%)    394 (65%)    491 (81%)   seguinte aparece nos três
     48vh    385 (64%)    429 (71%)    534 (88%)   seguinte aparece nos três
     52vh    415 (68%)    463 (76%)    578 (95%)   SOME no notebook de 768
     56vh    446 (74%)    498 (82%)    606 (100%)  some em 768 e em 860

   48vh é o maior valor que passa nos três. O piso de 280px vale abaixo de
   583px de janela (~5 linhas, que ainda é uma lista); o teto de 620px vale
   acima de ~1290px, onde a lista inteira já cabe e crescer mais não mostra
   mais nada.

   `overscroll-behavior: contain` não é zelo: sem ele, chegar ao fim da lista
   passa a rolar a PÁGINA, e quem estava lendo a fila perde o lugar sem ter
   pedido nada.
   --------------------------------------------------------------------------- */
.b-card--fila > .b-card-corpo {
  max-height: clamp(280px, 48vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* O canto direito do cabeçalho do card, quando há mais de uma coisa ali —
   hoje o rótulo de contagem e o botão de imprimir. Sem isto os dois viravam
   dois filhos do `space-between` e o título ficava espremido entre eles. */
.b-card-acoes { display: inline-flex; align-items: center; gap: var(--e2); }
/* ---------------------------------------------------------------------------
   "COMO ESTÁ O MÊS": duas vistas do mesmo cartão

   Os velocímetros por setor e as barras por pessoa eram dois cartões
   empilhados, custando ~570px da coluna para responder a MESMA pergunta em
   dois cortes. Aqui eles são um cartão com um seletor.

   O SELETOR É GÊMEO DO Mês/Semana DO CALENDÁRIO, e de propósito: dois
   seletores de duas posições no mesmo painel, com formas diferentes,
   obrigariam a pessoa a aprender duas vezes. O que ele NÃO herda é o arquivo
   — aquele mora no `lembrete.css`, escopado ao calendário.
   --------------------------------------------------------------------------- */
.b-vistas {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--papel-sutil);
  border: 1px solid var(--linha);
}

/* A LARGURA E A POSIÇÃO SÃO MEDIDAS, e não 50%.
   Em contentor `inline-flex`, que se ajusta ao conteúdo, `flex: 1 1 0` NÃO
   iguala botões de largura própria — "Setores" e "Pessoas" têm larguras
   diferentes, e uma pastilha de metade sobra de um lado e falta do outro. O
   JS mede o botão ativo e escreve `--pilula-x` e `--pilula-w`; a folha só os
   consome, então rótulo novo ou tradução continuam certos sozinhos. É a mesma
   lição que o `.cal-troca` já pagou, com os mesmos dois nomes. */
.b-vistas::before {
  content: "";
  position: absolute;
  top: 2px; bottom: 2px;
  left: 0;
  width: var(--pilula-w, 50%);
  transform: translateX(var(--pilula-x, 2px));
  border-radius: 999px;
  background: var(--papel);
  box-shadow: 0 1px 2px rgba(var(--rgb-sombra), .12);
  transition: transform var(--mov-lento) cubic-bezier(.16, 1, .3, 1),
              width var(--mov-lento) cubic-bezier(.16, 1, .3, 1);
}
.b-vista-op {
  position: relative;   /* acima da pastilha, que desliza por baixo */
  z-index: 1;
  padding: 3px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-fraca);
  font-family: inherit;
  font-size: var(--txt-micro);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--mov-rapido) ease;
}
/* O ativo só troca de TINTA: o fundo e a sombra são da pastilha. Mantidos
   aqui, apareceriam dois retângulos brancos durante o deslize. */
.b-vista-op.ativo { color: var(--acento); }
.b-vista-op:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* O PALCO NÃO TEM PADDING, e é ele que a altura anima. O padding mora nos
   dois corpos, dentro dele: com padding no elemento animado, altura zero
   ainda deixa o padding na tela, e `box-sizing: border-box` não resolve —
   ele ELEVA a altura ao padding em vez de recortar. */
.b-vista-palco { position: relative; }
.b-vista[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .b-vistas::before { transition: none; }
}


/* "e mais 14 — imprimir a lista completa": o rodapé do card de próximos dias,
   quando o corte de sete escondeu alguma coisa. */
.b-agenda-mais {
  margin: var(--e2) 0 0;
  padding: var(--e2) var(--e2) 0;
  border-top: 1px dashed var(--linha);
  font-size: var(--txt-mini);
  color: var(--tinta-fraca);
}
/* Um BOTÃO com cara de link. É botão porque a ação acontece na própria
   página (abre o diálogo de impressão) e não leva a lugar nenhum — um `<a>`
   sem destino é o que faz leitor de tela anunciar um link que não vai
   dar em nada. */
.b-elo {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--acento);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.b-elo:hover { color: var(--acento-vivo); }
.b-elo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; }
.b-card-corpo--liso { padding: var(--e4) var(--e5); }

/* --- Fila de trabalho -----------------------------------------------------
   O coração deste layout. Cada linha é um item acionável; o filete colorido
   da esquerda é a única cor, e some quando o item não é urgente. */
.b-fila-item {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  gap: var(--e3);
  align-items: center;
  padding: var(--e3);
  border-radius: var(--raio-mini);
  transition: background var(--mov-rapido) ease;
  cursor: default;
}
.b-fila-item:hover { background: var(--papel-sutil); }
.b-fila-marca { align-self: stretch; border-radius: 2px; background: var(--linha-forte); }
.b-fila-item.urg-alta   .b-fila-marca { background: var(--alerta); }
.b-fila-item.urg-media  .b-fila-marca { background: var(--atencao); }
.b-fila-texto { min-width: 0; }
.b-fila-titulo {
  color: var(--tinta);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b-fila-sub { font-size: var(--txt-mini); color: var(--tinta-fraca); margin-top: 1px; }
.b-fila-selo {
  font-size: var(--txt-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-media);
  background: var(--papel-sutil);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.b-fila-selo.e-alerta  { color: var(--alerta);  background: var(--alerta-suave); }
.b-fila-selo.e-atencao { color: var(--atencao); background: var(--atencao-suave); }

/* A LINHA QUE ABRE UMA JANELINHA É UM `<button>`, e o navegador traz junto
   uma folha inteira que não combina com nada aqui: borda, fundo cinza, fonte
   própria (menor e de outra família), texto centralizado e largura do
   conteúdo. Sem zerar isso, as cinco linhas do cartão "Empresas com mais
   atraso" viram cinco botões de sistema empilhados.

   `font: inherit` E NÃO `font-family` sozinho: o tamanho também vem da folha
   do navegador (13,33px no Chrome), e só a família deixaria a linha menor que
   as vizinhas por um motivo que ninguém acharia.

   `text-align: left` porque o botão centraliza, e a grade de três colunas
   esconde metade do sintoma — só as duas linhas de texto sairiam centradas
   dentro da coluna do meio.

   A LARGURA É 100% porque o botão é `grid` e não `block`: sem ela, ele encolhe
   até o conteúdo e o selo da direita para de encostar na borda do cartão. */
button.b-fila-item {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.b-fila-item:hover .b-fila-titulo { color: var(--acento); }
button.b-fila-item:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}

/* A LINHA QUE NÃO LEVA A LUGAR NENHUM VOLTA A TER PONTO.

   O `.exp-linha > .lab-ponto` do `tokens-sobrio` troca o disco por um chevron
   de propósito, e a folha diz o motivo em texto: a linha LEVA à tarefa, e a
   seta diz isso antes do clique. Na janelinha de uma empresa a linha é só
   leitura — dezenove setas apontando para nada são pior que nenhuma.

   TRÊS CLASSES NO SELETOR (0,3,0) e não duas: com (0,2,0) o desempate passaria
   a ser a ordem em que as duas folhas são carregadas, e a linha ficaria certa
   ou errada conforme o dia em que alguém reordenar os `<link>`. */
.exp-linha.e-parada > .lab-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neutro-ponto);
  font-size: 0;
  opacity: 1;
}
.exp-linha.e-parada > .lab-ponto::before { content: none; }
.exp-linha.e-parada > .lab-ponto--alerta  { background: var(--alerta); }
.exp-linha.e-parada > .lab-ponto--atencao { background: var(--atencao); }
.exp-linha.e-parada:hover > .lab-ponto { transform: none; }

/* "SUAS DEMANDAS" TEM TETO DE SEIS, e rola por dentro.

   Ele passou a ABRIR a coluna, na frente da Fila. Sem teto, uma pessoa com
   vinte demandas empurraria a Fila inteira para fora da primeira tela — o
   mesmo defeito que a Fila já pagou e que o teto dela veio corrigir, só que
   um cartão acima.

   A CONTA ESTÁ ESCRITA, e não o resultado dela: seis linhas de 55px (medido)
   mais os 16px de folga vertical do corpo. Um `346px` cru envelheceria calado
   no dia em que a linha mudasse de altura, e ninguém saberia de onde o número
   tinha saído.

   O PREÇO CONHECIDO: um título que quebra em duas linhas deixa a linha mais
   alta, e aí cabem cinco e meia em vez de seis. Meia linha aparecendo é, de
   quebra, o sinal mais claro de que há mais coisa embaixo — e a alternativa
   (medir o sétimo filho no navegador) é maquinaria demais para um cartão que
   raramente passa de meia dúzia. */
.b-card--demandas > .b-card-corpo {
  --dem-linha: 55px;
  max-height: calc(var(--dem-linha) * 6 + 16px);
  overflow-y: auto;
  /* Sem isto, chegar ao fim da lista passa a rolar a PÁGINA, e quem estava
     lendo perde o lugar sem ter pedido nada. Mesma regra da Fila. */
  overscroll-behavior: contain;
}

/* --- Coluna da direita ----------------------------------------------------- */
.b-agenda-item {
  display: flex;
  gap: var(--e3);
  align-items: center;
  padding: var(--e3);
  border-radius: var(--raio-mini);
  transition: background var(--mov-rapido) ease;
}
.b-agenda-item:hover { background: var(--papel-sutil); }
.b-agenda-data {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--raio-mini);
  background: var(--papel-sutil);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}
.b-agenda-dia { font-size: 15px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.b-agenda-mes { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--tinta-fraca); text-transform: uppercase; }
.b-agenda-nome { font-size: var(--txt-mini); color: var(--tinta); font-weight: 500; line-height: 1.35; }
.b-agenda-setor { font-size: var(--txt-micro); color: var(--tinta-fraca); }

.b-barra-item { padding: var(--e3); }
.b-barra-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); margin-bottom: 6px; }
.b-barra-nome { font-size: var(--txt-mini); color: var(--tinta); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-barra-valor { font-size: var(--txt-micro); color: var(--tinta-fraca); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 900px) {
  /* A trilha já se vira sozinha em tela estreita (deita e vira faixa de
     ícones, regra nos tokens). Aqui só sobra apertar o respiro do conteúdo. */
  .b-corpo, .b-topo { padding: var(--e4); }
}


/* ===========================================================================
   Notas rápidas — a gaveta no layout B
   ===========================================================================
   O mecanismo (entrar pela esquerda, fechar no Esc, fechar clicando fora)
   está no `tokens-sobrio.css`. Aqui é só a aparência, e ela segue a aposta
   deste layout: ESPAÇO.

   Topo claro com filete, campo grande de canto arredondado, linha alta com
   caixa de marcar redonda. Uma nota respira, como uma linha da fila do
   painel — não é uma lista de conferência.
   =========================================================================== */

/* ESTREITA. Eram 370px de gaveta para linhas de bilhete de uma frase: sobrava
   branco à direita de tudo, e a gaveta cobria metade da tela por trás dela.
   O limite de 280 caracteres da nota já dizia que a coluna não precisa ser
   larga. */
/* LARGURA. Eram 370px e sobrava branco; 300px cortava nome de empresa no
   meio, que é justamente o que a nota costuma carregar ("SABOR CARIOCA -
   Registro e Rescisão"). 340px é onde a maioria dos bilhetes cabe em duas
   linhas sem a gaveta invadir a tela de trás. */
.ntp--b { width: min(340px, 86vw); }

/* A BARRA DE TÍTULO, baixa e em lilás.
   Ela tinha `--e5` em cima e `--e4` embaixo — quase 60px de altura para uma
   palavra, num painel cuja razão de existir é caber muita linha curta. Cada
   pixel de cabeçalho é uma nota a menos visível sem rolar.
   O lilás é o mesmo `--acento-fundo` das linhas clicáveis do produto: separa
   o cabeçalho da lista sem precisar de um filete escuro atravessando. */
.ntp--b .ntp-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e2) var(--e3) var(--e2) var(--e4);
  background: var(--acento-fundo);
  border-bottom: 1px solid var(--acento-linha, var(--linha));
  flex-shrink: 0;
}
.ntp--b .ntp-titulo {
  margin: 0;
  font-size: var(--txt-base);
  font-weight: 700;
  color: var(--acento);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.ntp--b .ntp-titulo i { color: var(--acento); font-size: 15px; }
.ntp--b .ntp-conta {
  font-size: var(--txt-micro);
  font-weight: 700;
  color: var(--acento);
  /* Fundo branco sobre o lilás da barra, e não o cinza de antes: sobre lilás
     o cinza somia, e a pílula virava um borrão. */
  background: var(--papel);
  border: 1px solid var(--acento-linha, var(--linha));
  padding: 2px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ntp--b .ntp-fechar {
  border: none; background: none; cursor: pointer;
  color: var(--tinta-fraca);
  font-size: 13px; line-height: 1; padding: 7px;
  border-radius: 999px;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease;
}
.ntp--b .ntp-fechar:hover { background: var(--papel); color: var(--acento); }

/* A FOLGA DA ESQUERDA ENCOLHEU. Somavam-se duas: o `padding` do corpo e o do
   próprio item, e o resultado era um recuo grande antes da bolinha, com o
   texto começando quase no meio. Aqui fica a folga da gaveta; a do item foi
   a zero (logo abaixo). */
.ntp--b .ntp-corpo { padding: var(--e3) var(--e3) var(--e4) var(--e2); overflow-y: auto; flex: 1; }
.ntp--b .nt-item { padding-left: 2px; padding-right: 2px; }

/* A BARRA DE ROLAGEM, fina e apagada. A do sistema tem quase 17px de largura
   e ainda desenha duas setas — numa gaveta estreita ela come 5% da coluna e
   é a coisa mais escura da tela, competindo com o texto das notas.

   As duas declarações são necessárias e não são alternativas: `scrollbar-*`
   é o padrão (Firefox e Chrome novo), `::-webkit-scrollbar` cobre o Chrome e
   o Edge que ainda não o entendem. Uma sem a outra deixa metade dos
   navegadores com a barra grossa.

   Só dentro da gaveta: mexer na barra do documento inteiro mudaria a
   aparência de toda página do sistema, o que não foi pedido.

   Ela aparece o tempo todo, e não só no hover: barra que só surge ao passar o
   mouse esconde de quem chegou que ainda há lista embaixo. */
.ntp--b .ntp-corpo {
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
.ntp--b .ntp-corpo::-webkit-scrollbar { width: 6px; }
.ntp--b .ntp-corpo::-webkit-scrollbar-track { background: transparent; }
.ntp--b .ntp-corpo::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border-radius: 999px;
}
.ntp--b .ntp-corpo::-webkit-scrollbar-thumb:hover { background: var(--tinta-fraca); }
/* As setinhas das pontas somem: elas existem para clicar de uma em uma, um
   gesto que ninguém usa numa lista curta, e são metade da grossura. */
.ntp--b .ntp-corpo::-webkit-scrollbar-button { display: none; }
.ntp--b .nt-form,
.ntp--b .nt-dica { margin-left: 2px; margin-right: 2px; }

.ntp--b .nt-input {
  padding: 11px 14px;
  border-radius: var(--raio);
  background: var(--papel-fundo);
}
.ntp--b .nt-dica { text-align: left; margin: var(--e2) 0 var(--e4); padding-left: 2px; }

.ntp--b .nt-item {
  padding: var(--e3) 6px;
  gap: var(--e3);
  border-bottom: 1px solid var(--linha);
  border-radius: var(--raio-mini);
  transition: background var(--mov-rapido) ease;
}
.ntp--b .nt-item:hover { background: var(--papel-sutil); }
.ntp--b .nt-check { width: 19px; height: 19px; border-radius: 50%; }
.ntp--b .nt-texto { line-height: 1.4; }

/* ---------------------------------------------------------------------------
   MOVIMENTO — entrar, riscar, sair.

   Tudo em CSS, e não com o Motion que o layout B carrega. A razão está no
   `_motion_ajuda.html`: o `animate()` grava o último quadro NO ELEMENTO, e
   estilo inline vence folha — o `:hover` da linha animada pararia de
   funcionar, sem erro no console. Aqui a lista é redesenhada a cada ação,
   então seriam dezenas de elementos a "soltar" um a um.

   Keyframe puro não deixa resto: acaba, e o elemento volta a ser o que a
   folha diz.

   Quem pede movimento reduzido não recebe nenhum. Isto não é enfeite
   opcional de acessibilidade — para quem tem sensibilidade vestibular,
   movimento não pedido dá enjoo de verdade.
   --------------------------------------------------------------------------- */

/* ENTRAR: desce um pouco e clareia. Vem de cima porque é lá que fica o campo
   de escrever — a nota "cai" de onde foi digitada. */
@keyframes nt-entrando {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ntp--b .nt-entra { animation: nt-entrando .28s var(--mov-curva, ease) both; }

/* RISCAR: o instante entre clicar e a linha mudar de lugar. Encolhe e apaga,
   para o sumiço ter causa visível. */
/* SEGURA, DEPOIS SAI. Os primeiros 60% do tempo a linha fica inteira, para o
   tique verde dar tempo de ser visto; só então ela apaga e encolhe.
   Era um apagão de 240ms direto, e o verde nunca chegava aos olhos — a nota
   simplesmente sumia. */
@keyframes nt-riscando {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: .15; transform: scale(.97); }
}
.ntp--b .nt-riscando {
  animation: nt-riscando .6s ease both;
  pointer-events: none;   /* evita clicar duas vezes durante o gesto */
}
/* O tique entra crescendo, para o verde CHEGAR em vez de aparecer pronto. */
@keyframes nt-tique {
  from { transform: scale(.4); }
  to   { transform: scale(1); }
}
.ntp--b .nt-riscando .nt-check { animation: nt-tique .22s var(--mov-curva, ease) both; }

/* CHEGAR NO LUGAR NOVO: um pulso lilás de meio segundo, que responde "foi
   para cá". Sem ele a nota reaparece dentro da sanfona sem nada apontando
   para onde ela foi parar. */
@keyframes nt-mudou {
  0%   { background: var(--acento-fundo); }
  100% { background: transparent; }
}
.ntp--b .nt-muda { animation: nt-mudou .9s ease both; }

/* SAIR: encolhe a própria altura antes de desaparecer, para a lista abaixo
   subir junto em vez de dar um salto. */
@keyframes nt-saindo {
  from { opacity: 1; max-height: 90px; }
  to   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
}
.ntp--b .nt-saindo {
  animation: nt-saindo .22s ease both;
  overflow: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ntp--b .nt-entra,
  .ntp--b .nt-riscando,
  .ntp--b .nt-riscando .nt-check,
  .ntp--b .nt-muda,
  .ntp--b .nt-saindo { animation: none; }
}

/* ---------------------------------------------------------------------------
   ARRASTAR PARA REORDENAR.

   A linha aberta ganha `cursor: grab` para anunciar o gesto — sem isso ele
   existe e ninguém descobre. A concluída não: ela não se arrasta.

   `touch-action: pan-y` deixa o dedo rolar a lista normalmente; é o
   `pointermove` que decide, depois de 5px, se aquilo era rolagem ou arrasto.
   --------------------------------------------------------------------------- */
.ntp--b .nt-item:not(.feita) { cursor: grab; touch-action: pan-y; }
.ntp--b .nt-item.nt-pegando {
  cursor: grabbing;
  background: var(--papel);
  box-shadow: 0 6px 18px rgba(var(--rgb-sombra), .16);
  border-radius: var(--raio-mini);
  border-bottom-color: transparent;
  position: relative;
  z-index: 2;
  /* Sem transição: o item tem de colar no ponteiro. Com ela, ele "persegue" a
     mão com atraso e o arrasto parece escorregadio. */
  transition: none;
}
/* O texto não é selecionável enquanto se arrasta — o JS também trava isto no
   `body`, e as duas coisas juntas cobrem o caso de o ponteiro sair da gaveta. */
.ntp--b .nt-item.nt-pegando .nt-texto { user-select: none; }

/* ---------------------------------------------------------------------------
   A SANFONA DAS CONCLUÍDAS. Fechada por padrão — a gaveta responde "o que
   falta", e o que já foi feito só interessa a quem for procurar.
   --------------------------------------------------------------------------- */
/* OS DOIS TÍTULOS DE GRUPO usam a mesma régua — versalete pequeno, roxo,
   com a contagem numa pílula à direita. É o que faz "A fazer" e "Concluídas"
   lerem como duas seções da mesma lista, e não como uma lista e um rodapé.
   Só um deles é clicável, e a seta é o que diz qual. */
.ntp--b .nt-grupo-topo,
.ntp--b .nt-feitas-topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) 2px;
  font-size: var(--txt-micro);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--acento);
}
.ntp--b .nt-grupo-conta {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--acento-fundo);
  color: var(--acento);
  border-radius: 999px;
  padding: 1px 8px;
}

.ntp--b .nt-feitas { margin-top: var(--e3); border-top: 1px solid var(--linha); }
.ntp--b .nt-feitas-topo {
  cursor: pointer;
  list-style: none;
  border-radius: var(--raio-mini);
  transition: color var(--mov-rapido) ease, background var(--mov-rapido) ease;
}
.ntp--b .nt-feitas-topo::-webkit-details-marker { display: none; }
.ntp--b .nt-feitas-topo:hover { background: var(--acento-fundo); }
.ntp--b .nt-feitas-seta {
  font-size: 10px;
  transition: rotate var(--mov-rapido) ease;
}
.ntp--b .nt-feitas[open] .nt-feitas-seta { rotate: 90deg; }


/* "Tudo riscado" — a linha que ocupa o lugar das abertas quando não há
   nenhuma. Sem ela, a gaveta com dez concluídas parecia vazia. */
.ntp--b .nt-tudo-feito {
  margin: var(--e4) 0;
  text-align: center;
  font-size: var(--txt-mini);
  color: var(--tinta-fraca);
}
.ntp--b .nt-tudo-feito i { color: var(--ok); margin-right: 4px; }

/* ===========================================================================
   Notas rápidas — a gaveta no layout C
   =========================================================================== */


/* ===========================================================================
   Competencia e filtro de setor (ver `_filtros_dash.html`)
   =========================================================================== */

.fdash { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; min-width: 0; }
.fdash-comp { position: relative; display: flex; align-items: center; gap: 6px; }
.fdash-rotulo {
  font-size: var(--txt-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.fdash-mes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--txt-mini);
  cursor: pointer;
  transition: border-color var(--mov-base) ease, color var(--mov-base) ease;
}
.fdash-mes:hover { border-color: var(--acento); color: var(--acento); }
.fdash-mes i { font-size: 10px; color: var(--tinta-fraca); }

/* O campo nativo fica POR CIMA do botao, invisivel. Assim o clique cai nele
   em navegador que ignora `showPicker`, e o seletor de mes do sistema aparece
   no lugar certo -- sem reimplementar calendario. */
.fdash-input-mes {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  opacity: 0;
  border: none;
  pointer-events: none;
}

/* O FUNIL E O "ORGANIZAR" SÃO O MESMO BOTÃO.

   Eles ficam lado a lado e fazem a mesma coisa — um ícone que abre o rótulo
   no hover. Enquanto o funil teve regras PRÓPRIAS de tamanho, os dois não
   fechavam: medido, 30x28 contra 30x24, com ícone de 14px contra 12px e a
   borda em alturas diferentes. E não havia como acertar isso mantendo duas
   listas de medidas — elas voltariam a divergir na primeira mudança.

   POR ISSO O FUNIL VIROU UM `.b-card-btn` DE VERDADE, no HTML. Daqui para
   baixo esta folha escreve só o que ele tem A MAIS: o pontinho de filtro
   ativo e o rótulo que abre.

   DUAS CLASSES EM TUDO O QUE SOBRESCREVE, porque o `lembrete.css` (onde o
   `.b-card-btn` mora) é carregado DEPOIS desta folha — no empate de
   especificidade ele ganha. Já custou o `.b-padrao` aparecendo fora do modo
   de organizar e o ícone do "Organizar" fora do centro. */
.b-card-btn.fdash-funil {
  position: relative;
  gap: 0;
  padding: 4px 8px;
}

/* O ÍCONE DOS DOIS, no mesmo tamanho e maior que a letra do rótulo. O
   `.b-card-btn` define `font-size: 11px` para o TEXTO, e o ícone herdava
   isso: 11px de glifo é pequeno demais para ser o único conteúdo de um botão
   recolhido. É o mesmo 13px que o `.b-card-btn--icone` já usa nos botões de
   imprimir da Fila. */
.b-card-btn.fdash-funil > .fdash-funil-marca > i,
.b-card-btn.b-organizar > i { font-size: 13px; line-height: 1; }

/* A ALTURA DE UM BOTÃO SAI DA CAIXA DE LINHA DO CONTEÚDO, e nenhum dos dois
   tinha `line-height` declarado. Medido: 24px de um lado e 27px do outro,
   com o mesmo padding e a mesma borda — a diferença inteira vinha do
   `line-height: normal`, que o navegador calcula a partir da FONTE de cada
   elemento e por isso muda quando o ícone e o rótulo têm tamanhos
   diferentes.

   Com `1` nos quatro (os dois ícones e os dois rótulos), a altura passa a
   ser o maior conteúdo real mais o padding, que é o mesmo nos dois. */
/* A LETRA E A ALTURA DOS DOIS RÓTULOS, declaradas e não herdadas.

   MEDIDO: "Organizar" saía em CAIXA ALTA, 700 e com 0,88px de espacejamento
   — tudo herdado de uma regra da barra do topo —, e "Filtrar" saía em caixa
   mista, 600 e sem espacejamento. Dois botões idênticos abrindo rótulos de
   tipografias diferentes leem como dois componentes parecidos, que é o
   contrário do que se quis aqui.

   E A ALTURA DO BOTÃO SAI DA CAIXA DE LINHA DO CONTEÚDO: sem `line-height`
   declarado, ela era 24px de um lado e 27px do outro com o mesmo padding e a
   mesma borda. O `normal` é calculado pelo navegador a partir da FONTE de
   cada elemento, então mudava junto com o tamanho do ícone.

   DECLARAR PRENDE O PAR: herança muda quando alguém mexe no ancestral — sem
   erro, e só num dos dois. */
.fdash-funil-rotulo,
.b-card-btn.b-organizar > span {
  line-height: 1;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
}

/* O INVÓLUCRO DO ÍCONE É QUEM ANCORA O PONTINHO. Ancorado no botão, ele
   viajaria até o fim do rótulo aberto e largaria o funil que marca. */
.fdash-funil-marca {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* MESMA MECÂNICA DO RÓTULO DO "ORGANIZAR": `max-width` (que transiciona) e
   não `display` (que não), e o espaço entre ícone e texto vem do
   `margin-left` do próprio rótulo, para o botão recolhido não guardar folga
   de uma palavra que não está na tela.

   O `:focus-visible` ABRE JUNTO: quem chega pelo Tab veria um quadrado com
   um funil e nada dizendo o que ele faz. */
.fdash-funil-rotulo {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width var(--mov-base, .22s) var(--mov-curva, cubic-bezier(.2,.7,.3,1)),
              opacity var(--mov-rapido, .15s) ease,
              margin-left var(--mov-base, .22s) var(--mov-curva, cubic-bezier(.2,.7,.3,1));
}
.fdash-funil:hover .fdash-funil-rotulo,
.fdash-funil:focus-visible .fdash-funil-rotulo {
  max-width: 7rem;
  opacity: 1;
  margin-left: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .fdash-funil-rotulo { transition: none; }
}

.fdash-ponto {
  position: absolute;
  top: -2px; right: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--laranja, #f7941d);
}

.fdash-tarja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--acento-fundo);
  border: 1px solid var(--acento-linha);
  color: var(--acento);
  font-size: var(--txt-micro);
  font-weight: 600;
}
.fdash-tarja a { color: inherit; text-decoration: none; font-size: 14px; line-height: 1; opacity: .6; }
.fdash-tarja a:hover { opacity: 1; }

/* A SEGUNDA TRAVA, além dos dois nomes que o template já corta: um único
   setor de nome muito comprido ainda estouraria a barra sozinho. Aqui ele
   vira reticências em vez de fazer o cabeçalho crescer uma fileira. */
.fdash-tarja-nomes {
  min-width: 0;
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdash-tarja-mais {
  flex: none;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--papel);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
}
.fdash-estrela { color: var(--laranja, #f7941d); }

/* ===========================================================================
   Faixa de alertas -- certificados e procuracoes
   ===========================================================================
   Vencido e vencendo sao coisas diferentes: vencido ja custa (a empresa nao
   transmite), vencendo e aviso. Dai o vermelho e o ambar -- num filete de
   3px, nunca no card inteiro. Quatro cards pintados na primeira dobra e
   exatamente o "colorido demais" que este laboratorio existe para resolver.
   =========================================================================== */

.b-alertas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e5);
}
.b-alerta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e3) var(--e4);
  padding-left: calc(var(--e4) + 3px);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding-left: calc(var(--e4) + 14px);
  text-decoration: none;
  transition: border-color var(--mov-base) ease, transform var(--mov-base) var(--mov-curva);
}
/* O HOVER destes cards estava quase mudo: subia 1px e trocava o tom da
   borda. Como eles quase sempre marcam ZERO, o card parecia decoração — e
   ninguém descobria que é um link para a tela de controle.
   Agora o fundo clareia e o ÍCONE assume a cor do assunto: vermelho onde já
   venceu, âmbar onde vence em 30 dias. */
.b-alerta { transition: border-color var(--mov-base) ease,
                        background var(--mov-base) ease,
                        transform var(--mov-base) var(--mov-curva); }
.b-alerta:hover {
  transform: translateY(-1px);
  border-color: var(--linha-forte);
  background: var(--papel-sutil);
}
.b-alerta > i { transition: color var(--mov-base) ease; }

/* HOVER NÃO ACENDE COR DE SEVERIDADE — só intensifica a que já existe.
 *
 * Havia aqui um par de regras presas a `e-tom-*`, uma classe que o HTML punha
 * SEMPRE, com ou sem quantidade. O efeito: passar o mouse num card marcando
 * ZERO o pintava de vermelho ou âmbar. E o comentário que as acompanhava dizia
 * "onde JÁ há registro, o filete também acende" — a intenção era essa, mas o
 * seletor não filtrava nada. Código e comentário discordavam.
 *
 * O certo é o hover dizer "isto é clicável", não "isto é urgente". Essa parte
 * o card já faz sem cor: sobe 1px, muda o fundo e escurece a borda.
 *
 * E zero não precisa de tom próprio para se distinguir do vizinho: o que separa
 * "Certificados vencidos" de "Certificados vencendo (30d)" é o RÓTULO. Cor ali
 * seria redundante — e cor redundante é o que este layout existe para reduzir.
 *
 * Agora os seletores dependem de `e-alerta`/`e-atencao`, que o template só
 * escreve quando o número é maior que zero. Card zerado permanece neutro em
 * repouso E no hover.
 *
 * SÓ O ÂMBAR TEM O QUE INTENSIFICAR. Em repouso o card de "vencendo" usa
 * `--atencao`, e existe um `--atencao-marca` mais saturado para marca pequena;
 * no hover ele entra. O vermelho já está em `--alerta` no repouso e não tem
 * variante mais forte — escrever uma regra de hover para ele seria repetir a
 * mesma cor e enganar quem lesse depois.
 *
 * E QUEM INTENSIFICA É A TINTA, NUNCA A BORDA. Havia aqui um
 * `border-left-color: var(--atencao-marca)` no hover, e ele era RESTO da tarja
 * de 3px que virou ponto (a nota está logo abaixo, no `::before`). Sem a
 * tarja, o que ele pintava era um lado só de uma caixa de 1px: medido no
 * hover, três lados em rgb(214,214,218) e o esquerdo em rgb(209,131,15). Isso
 * não lê como reforço, lê como borda desalinhada — e foi assim que o dono
 * relatou. A cor do assunto já está no ponto e no número. */
.b-alerta.e-atencao:hover > strong,
.b-alerta.e-atencao:hover > i { color: var(--atencao-marca); }
.b-alerta > strong {
  font-size: var(--num-medio);
  font-weight: 700;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
/* `> i` E NÃO `i`, e o filho direto é a regra inteira.

   Como descendente, isto alcançava QUALQUER ícone dentro do cartão — e o modo
   de organizar acrescenta dois, um em cada botão da barra. Os dois eram
   arrancados do fluxo e iam parar no canto onde mora o ícone do próprio
   cartão, sobrepostos a ele e ao rótulo. O sintoma foi *"ainda está quebrado,
   somente na linha dos certificados e procurações"*, e a linha era exatamente
   a única com um seletor assim: as pastilhas apareciam sem ícone e havia dois
   fantasmas por cima do texto.

   NADA DISSO DAVA ERRO. A regra foi escrita quando o único `<i>` do cartão era
   o dela, e continuou correta até o dia em que alguém pôs outro lá dentro. É a
   razão de o filho direto ser o padrão: ele não envelhece. */
.b-alerta > i {
  position: absolute;
  right: var(--e4); top: var(--e4);
  font-size: 16px;
  color: var(--linha-forte);
}
/* O ÍCONE FLUTUA, ENTÃO O TEXTO PRECISA DESVIAR DELE.
   Como ele é `absolute`, não ocupa lugar nenhum no fluxo: em tela larga o
   rótulo cabia numa linha e nada acontecia, mas assim que a coluna aperta e
   "Certificados vencendo (30d)" quebra em duas linhas, a primeira passa POR
   BAIXO do ícone e as letras encavalam no desenho.
   A folga reservada é a largura do ícone (16px) mais o respiro dele até a
   borda — texto e ícone deixam de disputar o mesmo canto em qualquer
   largura, sem precisar mover o ícone só em telas pequenas. */
.b-alerta .lab-rotulo { padding-right: calc(16px + var(--e3)); }
/* O ESTADO VIROU PONTO. A tarja de 3px na lateral esquerda dizia a mesma
   coisa gritando: quatro blocos lado a lado, dois deles com uma barra
   vermelha inteira. O ponto de 7px diz igual e para de disputar com o
   numero, que e o que a pessoa veio ler.

   E ele e `::before`, nao um elemento novo: isto e troca de pele, e nenhum
   template precisou mudar por causa dela. */
.b-alerta::before {
  content: "";
  position: absolute;
  left: var(--e4);
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--linha-forte);
  transition: background var(--mov-base) ease, transform var(--mov-base) var(--mov-curva);
}
.b-alerta:hover::before { transform: scale(1.35); }

.b-alerta.e-alerta::before { background: var(--alerta); }
.b-alerta.e-alerta > strong, .b-alerta.e-alerta > i { color: var(--alerta); }
.b-alerta.e-atencao::before { background: var(--atencao-marca, var(--atencao)); }
.b-alerta.e-atencao > strong, .b-alerta.e-atencao > i { color: var(--atencao); }

/* ===========================================================================
   Fila em faixas de urgencia
   =========================================================================== */

.b-faixa { margin-bottom: var(--e3); }
.b-faixa:last-child { margin-bottom: 0; }
.b-faixa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: 6px var(--e2);
  border-bottom: 2px solid var(--linha);
  margin-bottom: 2px;
}
.b-faixa-nome {
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.b-faixa-conta {
  font-size: var(--txt-micro);
  font-weight: 700;
  color: var(--tinta-media);
  background: var(--papel-sutil);
  padding: 2px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.b-faixa.e-alerta  .b-faixa-topo { border-bottom-color: var(--alerta); }
.b-faixa.e-alerta  .b-faixa-nome { color: var(--alerta); }
.b-faixa.e-atencao .b-faixa-topo { border-bottom-color: var(--atencao); }
.b-faixa.e-atencao .b-faixa-nome { color: var(--atencao); }

.b-corte {
  font-size: var(--txt-micro);
  color: var(--tinta-fraca);
  text-align: center;
  padding: var(--e3) 0 var(--e2);
  margin: 0;
}
.b-corte a { color: var(--acento); font-weight: 600; text-decoration: none; }

/* ===========================================================================
   Velocimetros (ver `_velocimetros.html`)
   =========================================================================== */

/* Largura FIXA por mostrador, e não coluna elástica. Com `1fr` os três
   setores dividiam a largura do card e cada mostrador virava um prato de
   300px — um velocímetro do tamanho de um card não é um indicador, é um
   pôster. 104px é o tamanho em que o arco ainda se lê de relance.

   Flex com quebra, então: sobrando espaço, sobra espaço; faltando, eles
   descem para a linha de baixo. */
/* CENTRALIZADOS. Com três setores num card largo, encostados à esquerda eles
   deixavam dois terços de branco à direita — a tela lia como se algo tivesse
   faltado carregar. Centrados, o vazio se divide nos dois lados e vira
   respiro em vez de buraco.
   Escritórios com muitos setores continuam preenchendo a linha e quebrando
   para baixo, como antes: `center` só aparece quando sobra espaço. */
.vel-grade {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e4) var(--e5);
}
.vel { position: relative; margin: 0; text-align: center; width: 104px; }

/* --- O HOVER DO MOSTRADOR --------------------------------------------------
   O ATRASO ESTÁ NAS DUAS PONTAS, e é ele que faz o movimento parecer calmo em
   vez de nervoso. São três mostradores lado a lado com pouca folga entre eles:
   sem atraso, atravessar a fileira com o mouse dispara e desfaz três animações
   em meio segundo, e o card inteiro "pisca". Com 90ms de espera, passar reto
   não acende nada — só acende quando alguém realmente PARA sobre um setor.

   `transition-delay` sem `:hover` no seletor vale para a ida E para a volta,
   que é exatamente o que se quer aqui: some com a mesma calma com que apareceu.

   O QUE SE MEXE: o mostrador sobe 4px, o arco engrossa, a pista escurece e o
   número cresce um tico. Nada muda de cor — a cor aqui carrega informação
   (verde acima de 80%, âmbar abaixo de 50%), e mexer nela no hover seria dizer
   que o setor mudou de estado porque o mouse passou por cima.
   ------------------------------------------------------------------------ */
/* A COR DO SETOR, UMA VEZ SÓ. O mostrador já pinta o arco e o número conforme
   a faixa; o halo e o brilho do hover precisam da mesma cor, e escrevê-la
   quatro vezes é como os três estados divergem depois. */
.vel              { --vel-cor: var(--acento); }
.vel.e-ok         { --vel-cor: var(--ok); }
.vel.e-atencao    { --vel-cor: var(--atencao); }

.vel {
  transition: transform 420ms var(--mov-curva) 90ms;
}
.vel:hover { transform: translateY(-5px); }

/* A COROA DE MARCAÇÕES. Nada de degradê e nada de desfoque: a primeira versão
   deste hover usava um halo radial e o resultado ficou esfumaçado — parecia
   brilho de foto, não instrumento.

   Aqui a graduação é LINHA. O tracejado corta a curva em traços curtos, e ela
   entra girando 8° até se encaixar: gira e para, como um seletor que trava na
   posição. Contínua ela viraria "carregando".

   O `pathLength="100"` está no ATRIBUTO do `<path>`, e não aqui: `pathLength`
   é do SVG, não do CSS — escrito como propriedade ele é simplesmente
   descartado, sem erro nenhum, e o tracejado sairia com o espaçamento errado.
   Com ele, o `dasharray` fala em centésimos do arco: 25 marcações, e continuam
   25 se o raio mudar. */
.vel-coroa {
  fill: none;
  stroke: var(--vel-cor);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.7 3.3;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50px 50px;
  transform: rotate(-8deg);
  transition: opacity 260ms ease 90ms,
              transform 460ms var(--mov-curva) 90ms;
}
.vel:hover .vel-coroa { opacity: .85; transform: rotate(0deg); }

/* O ARCO engrossa, e só. Sem `drop-shadow`: sombra colorida em volta de um
   traço é exatamente o esfumaçado que saiu daqui. */
.vel-arco {
  transition: stroke-width 380ms var(--mov-curva) 90ms;
}
.vel:hover .vel-arco { stroke-width: 5.5; }
/* A PISTA RECUA enquanto o arco avança. Os dois mexendo em direções opostas é
   o que faz a fatia preenchida "ganhar terreno" aos olhos, mesmo sem o número
   ter mudado. */
.vel-pista { transition: stroke-width 420ms var(--mov-curva) 90ms, stroke 380ms ease 90ms; }
.vel:hover .vel-pista { stroke-width: 2.4; stroke: var(--linha); }

/* O `translateY(-50%)` do repouso PRECISA estar escrito nos dois estados.
   Sem ele no hover, o `scale` substituiria a transformação inteira e o número
   saltaria meio velocímetro para baixo no instante do hover.

   ATRASO MAIOR QUE O DO ARCO (170ms contra 90ms): as partes chegam em
   sequência, halo e arco primeiro, número depois. É esse escalonamento de
   oitenta milésimos que separa "animado" de "tudo se mexeu junto". */
.vel-centro {
  transition: transform 420ms var(--mov-curva) 170ms;
}
.vel:hover .vel-centro { transform: translateY(-50%) scale(1.09); }

/* A contagem sai da sombra por último. */
.vel-conta { transition: color 340ms ease 210ms; }
.vel:hover .vel-conta { color: var(--tinta-media); }

.vel-nome { transition: color 340ms ease 210ms; }
.vel:hover .vel-nome { color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  .vel, .vel-coroa, .vel-arco, .vel-pista, .vel-centro,
  .vel-conta, .vel-nome { transition: none; }
  .vel:hover { transform: none; }
  .vel-coroa, .vel:hover .vel-coroa { transform: rotate(0deg); }
  .vel:hover .vel-centro { transform: translateY(-50%); }
}
.vel-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* O TRACO EMAGRECEU de 9 para 3.2. O arco continua sendo o mesmo desenho e
   dizendo o mesmo numero; o que sai e o peso. O hover, que engrossa o arco e
   recua a pista, continua valendo — so os valores desceram junto. */
.vel-pista, .vel-arco {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
}
.vel-pista { stroke: var(--linha); }
.vel-arco  { stroke: var(--acento); }
.vel.e-ok      .vel-arco { stroke: var(--ok); }
.vel.e-atencao .vel-arco { stroke: var(--atencao); }

/* O numero vai POR CIMA do arco, no centro do mostrador -- nao embaixo. E o
   valor, nao uma legenda. */
.vel-centro {
  position: absolute;
  left: 0; right: 0;
  top: 46%;
  transform: translateY(-50%);
  line-height: 1.1;
  pointer-events: none;
}
.vel-num {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.vel-num i { font-size: 11px; font-style: normal; color: var(--tinta-fraca); margin-left: 1px; }
.vel-conta { font-size: 10px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.vel.e-ok      .vel-num { color: var(--ok); }
.vel.e-atencao .vel-num { color: var(--atencao); }

/* O nome QUEBRA em duas linhas em vez de cortar. Em 104px, "Departamento
   Pessoal" virava "Departamento Pe..." — e nome de setor cortado é
   exatamente a informação que o mostrador precisa entregar junto com o
   número. Duas linhas cabem; a partir da terceira aí sim corta, e o `title`
   no elemento mostra o nome inteiro no hover.

   `min-height` reserva as duas linhas sempre, senão os mostradores de nome
   curto sobem e a fileira fica desalinhada. */
.vel-nome {
  font-size: var(--txt-micro);
  font-weight: 600;
  color: var(--tinta-media);
  /* FOLGA DE VERDADE, e antes era margem NEGATIVA (-2px).
     Com nome curto ela não incomodava: o nome cai sob a abertura do arco, que
     é vazia. Com nome de duas linhas, não — a primeira linha é larga e sobe
     justamente onde estão as PONTAS do arco, que descem até a base do
     desenho. Era ali que "Departamento Pessoal" encostava no mostrador.
     Os 7px são a folga que separa as maiúsculas das pontas do traço. */
  margin-top: 7px;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* --- Ajustes que estavam em `style=` no HTML -------------------------------
   Eram sete atributos soltos no `dashboard_b.html`. Estilo no HTML nao passa
   pelo whitenoise (nao ganha hash nem compressao), nao pode ser reaproveitado
   e some das buscas quando se procura de onde vem uma regra — entao vieram
   para ca com nome.

   `min-width: 0` aparece tanto porque e o conserto classico do flex: um item
   flex nao encolhe abaixo do proprio conteudo sem isso, e o texto longo
   estoura a caixa em vez de cortar com reticencias.

   O QUE FICA no HTML sao os tres `width: {{ porcentagem }}%` das barras de
   progresso — aquilo e DADO, muda por linha, e nao existe classe que
   carregue um numero vindo do banco. */
.b-encolhe { min-width: 0; }

/* ---------------------------------------------------------------------------
   A ORDEM DOS CARTÕES É DO USUÁRIO

   `order` só existe em item de flex ou de grid. As duas faixas de cima já são
   grid; as duas COLUNAS eram bloco, e por isso ganham `flex` aqui.

   O SELETOR CITA O `.b-corpo >` DE PROPÓSITO. A classe `.b-encolhe` também é
   usada DENTRO de cartões, como invólucro que encurta texto — e ali ela é
   filha de um flex horizontal. Tornar toda `.b-encolhe` uma coluna flex
   quebraria essas, e o sintoma apareceria longe daqui.

   NÃO HÁ `gap`, e a ausência é a decisão: o `.b-card` já traz
   `margin-bottom: var(--e5)`, e num flex a margem NÃO colapsa. Somar um `gap`
   dobraria o espaço entre todos os cartões — que é exatamente o defeito que
   apareceu quando as duas faixas de números saíram da coluna, em 22/08/2026.
   --------------------------------------------------------------------------- */
.b-corpo > .b-encolhe {
  display: flex;
  flex-direction: column;
}

/* O CARTÃO ESCONDIDO PRECISA DISTO. O atributo `hidden` vale por
   `display: none` na folha do navegador, e QUALQUER regra de autor com
   `display` a vence — o `.b-alerta` declara `display: flex`, então esconder
   um alerta não escondia nada. Sem erro, e sem nada na tela dizendo por quê. */
.b-metrica[hidden],
.b-alerta[hidden],
.b-card[hidden] { display: none; }
/* ---------------------------------------------------------------------------
   O MODO DE ORGANIZAR

   Fora dele, NADA muda: nem cursor, nem contorno, nem botão a mais. Estes
   cartões já são clicáveis — "Atrasadas" abre janelinha, "Empresas" é link, e
   os três primeiros viram no clique — e com o arrastar sempre ligado um clique
   que escorregue três pixels reordena em vez de abrir.
   --------------------------------------------------------------------------- */
/* O "ORGANIZAR" É UM ÍCONE QUE ABRE NO HOVER.

   Ele estava escrito por extenso numa barra que já carrega a competência, o
   funil e o título da tela. É uma ação ocasional pesando como as
   permanentes.

   O RÓTULO ABRE POR `max-width` E NÃO POR `display`, e a diferença é o
   motivo de a animação existir: `display: none` não transiciona, e `width`
   pede um número em pixels que envelhece na primeira vez que a palavra
   mudar. O teto é folgado de propósito — ele só precisa caber, e a curva
   sobre um teto maior que o texto só encurta o tempo útil, não quebra nada.

   O `:focus-visible` ABRE JUNTO, e isso não é zelo: sem ele, quem chega ao
   botão pelo Tab vê um quadrado com um ícone e nada dizendo o que ele faz. O
   `aria-label` resolve para o leitor de tela e não resolve para quem
   ENXERGA a tela e não usa o mouse.

   E LIGADO, O RÓTULO FICA. Ali ele deixa de ser decoração e passa a ser a
   SAÍDA do modo ("Pronto"): recolhido, a única pista de que o painel está em
   outro estado seria a cor do botão. */
/* O `gap` DA PÍLULA VAI A ZERO, e o espaço volta como `margin-left` do
   rótulo. Com o `gap: 5px` do `.b-card-btn`, o botão recolhido ficaria 5px
   mais largo que um botão de ícone — espaço guardado para uma palavra que
   não está na tela, e desalinhado do vizinho ao lado. */
/* O `gap` DA BARRA SEPARA COISAS DIFERENTES; o funil e o "Organizar" são A
   MESMA COISA. A `.b-topo-quem` usa `--e4` entre o título, a competência e o
   filtro — assuntos distintos, que precisam de ar. Estes dois são os dois
   controles do painel, e 16px entre eles os faziam parecer de famílias
   diferentes.

   O RECUO NEGATIVO É CALCULADO A PARTIR DO PRÓPRIO TOKEN, e não um `-10px`
   escrito à mão: assim o dia em que `--e4` mudar de valor, a distância
   continua sendo os 6px que se quis aqui, em vez de virar outro número que
   ninguém saberia explicar. */
/* DUAS CLASSES OUTRA VEZ, e pelo mesmo motivo do `.b-padrao` logo abaixo.

   MEDIDO COM UMA SÓ: o `gap: 5px` e o `padding: 4px 10px` do `.b-card-btn`
   continuavam valendo, e o `gap` reservava 5px à DIREITA do ícone para um
   rótulo de largura zero. O ícone ficava a 11px da borda esquerda e a 16px da
   direita, e o relato foi exatamente esse. A regra vale para tudo o que esta
   folha escrever sobre um `.b-card-btn`: o `lembrete.css` é carregado DEPOIS
   desta, então empate de especificidade ela perde. */
.b-card-btn.b-organizar {
  gap: 0;
  padding: 4px 8px;
  margin-left: calc(6px - var(--e4));
}
.b-organizar > span {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width var(--mov-base, .22s) var(--mov-curva, cubic-bezier(.2,.7,.3,1)),
              opacity var(--mov-rapido, .15s) ease,
              margin-left var(--mov-base, .22s) var(--mov-curva, cubic-bezier(.2,.7,.3,1));
}
.b-organizar:hover > span,
.b-organizar:focus-visible > span,
.b-organizar[aria-pressed="true"] > span {
  max-width: 9rem;
  opacity: 1;
  margin-left: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .b-organizar > span { transition: none; }
}

.b-organizar[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--tinta-no-cheio, #fff);
}

/* O "VOLTAR AO PADRÃO" SÓ EXISTE DENTRO DO MODO DE ORGANIZAR.

   Ele apaga a ordem, a coluna e os escondidos de uma vez. Como botão
   permanente na barra do topo, seria uma ação rara e destrutiva a um clique
   de distância o dia inteiro — e um erro desses não dá erro nenhum, só
   apaga trabalho em silêncio.

   `display: none` E NÃO `visibility`/`opacity`: escondido pelos outros dois
   ele continuaria ocupando o lugar dele na barra e, pior, continuaria
   alcançável pelo Tab. */
/* DUAS CLASSES NO SELETOR, e não `!important`.

   MEDIDO COM UMA SÓ: o botão aparecia FORA do modo de organizar, que é o
   contrário de tudo o que está escrito aqui em cima. `.b-padrao` (0,1,0)
   empata com o `.b-card-btn` (0,1,0) do `lembrete.css`, que declara
   `display: inline-flex` — e no empate quem decide é a ORDEM DAS FOLHAS. O
   `dashboard_b.html` carrega esta primeiro e a outra logo depois, pelo
   `_css_janela_criar.html`, então a outra ganhava.

   É a mesma armadilha do `.pop-item.pen-pop-lista`, e a saída é a mesma: uma
   classe a mais (0,2,0) vence sem depender de quem carrega primeiro. Vale
   para QUALQUER regra de `display` que esta folha escreva sobre um
   `.b-card-btn`. */
.b-card-btn.b-padrao { display: none; }
.b-organizando .b-card-btn.b-padrao { display: inline-flex; }

/* O CARTÃO ABRE ESPAÇO NO TOPO quando o modo liga, e isso foi visto na
   maquete: com a pega e o olho flutuando no canto, os dois COBRIAM o título
   de "Calendário", de "Suas demandas" e os botões de imprimir da Fila. Uma
   afordância que tapa o nome do que ela move não ajuda ninguém. */
/* O ESPACO ABRE NO CARTAO, e nao no contentor. Posto no contentor, a pega e
   o olho continuam ancorados em CADA cartao (que e quem tem `position:
   relative`) e caem por cima do rotulo dele: medido, "ATRASADAS" virava
   "mover" e "CERTIFICADOS VENCIDOS" virava "IFICADOS VENCIDOS". */
.b-organizando .b-card,
.b-organizando .b-metrica,
.b-organizando .b-alerta { padding-top: 30px; }

/* O CARTÃO RESPONDE AO PONTEIRO, e o que se move é só ele.

   São `transform` e `box-shadow`, que o navegador compõe sem refazer o
   layout — nada aqui empurra vizinho. A subida é de 2px: mais que isso, e o
   cartão passa a "pular" a cada passagem do mouse numa faixa de seis. */
.b-organizando .b-metrica,
.b-organizando .b-alerta,
.b-organizando .b-card {
  position: relative;
  cursor: grab;
  transition: transform var(--mov-base) var(--mov-curva),
              box-shadow var(--mov-base) var(--mov-curva),
              opacity var(--mov-rapido) ease;
}
/* O HOVER MEXE NA SOMBRA E NÃO NO `transform`: o tremor JÁ é uma animação de
   `transform`, e animação vence transição. Uma subida de 2px declarada aqui
   simplesmente não aconteceria, e o defeito seria invisível — nada no console,
   nada na folha, só um hover que não responde. */
.b-organizando .b-metrica:hover,
.b-organizando .b-alerta:hover,
.b-organizando .b-card:hover {
  box-shadow: 0 6px 16px -6px rgba(var(--rgb-sombra), .26);
  z-index: 2;                       /* a sombra por cima do vizinho, não sob */
}
.b-organizando .b-metrica:hover .b-org-veu,
.b-organizando .b-alerta:hover .b-org-veu,
.b-organizando .b-card:hover .b-org-veu {
  box-shadow: inset 0 0 0 1px var(--acento);
}

/* O QUE ESTÁ NA MÃO ENCOLHE UM POUCO. É o retorno de "peguei": sem ele, o
   único sinal de que o arrasto começou é a opacidade, e ela também serve para
   outras coisas. */
/* NA MÃO, O TREMOR PARA. Um cartão que continua tremendo enquanto está sendo
   arrastado não se deixa mirar, e o `animation: none` é também o que devolve
   o `transform` para a transição poder usá-lo. */
.b-organizando .b-metrica:active,
.b-organizando .b-alerta:active,
.b-organizando .b-card:active,
.b-organizando .e-arrastando {
  cursor: grabbing;
  animation: none;
  transform: scale(.98);
  box-shadow: none;
}
.b-organizando .e-arrastando { opacity: .5; }


/* O CARTÃO TREME DE LEVE, E É ISSO QUE DIZ "PODE SER MOVIDO".

   TRÊS TENTATIVAS ANTES DESTA, e as duas primeiras foram recusadas por quem
   usa, com razão:

     1. contorno tracejado PARADO: lê-se como seleção, como erro de validação,
        ou como nada;
     2. tracejado ANDANDO (marching ants), desenhado com quatro
        `repeating-linear-gradient`. O relato foi *"o serrilhado está
        grosseiro e está sendo cortado"*, e as duas metades são verdade: um
        gradiente é reto, então o canto arredondado o RECORTA — os traços
        somem nas quatro quinas —, e um traço de 1,5px com passo de 14px é
        grosseiro ao lado de uma folha que separa tudo com fio de 1px;
     3. o VÉU CINZA por cima do cartão. *"O fundo cinza não ficou bom"*, e o
        motivo é o que ele diz: escurecer conteúdo é a linguagem de
        DESATIVADO. O painel ficava com cara de bloqueado justamente no
        momento em que ele está mais vivo.

   O que sobrou é o mais simples e o único sem ambiguidade: o cartão se MEXE.
   Nada que se mexe sozinho lê-se como desativado, e a metáfora já está na
   cabeça de todo mundo desde o iOS.

   O ÂNGULO É POR TAMANHO, e não um só. Um grau num cartão de 216px move a
   quina 2px; no cartão da Fila, que mede 952px, move 8px — e aí deixa de ser
   tremor e vira balanço de barco. Os grandes tremem por DESLOCAMENTO, que não
   cresce com a largura.

   O COMPASSO É CURTO. A primeira versão usava 1,5s por sentido, o que com
   `alternate` dá um ciclo INTEIRO de três segundos: não lia como tremor, lia
   como o cartão boiando. O relato foi *"estão mexendo muito devagar"*. O iOS
   gira em torno de 0,25s por sentido, e é dessa ordem que se trata.

   E AS FASES SÃO DESENCONTRADAS por `nth-child`: com todos no mesmo compasso a
   tela inteira pulsa junta, que é hipnótico e nauseante. O atraso é NEGATIVO
   para o cartão começar no meio do ciclo em vez de esperar a vez — e ele é
   uma FRAÇÃO DA DURAÇÃO: mudando uma sem a outra, os atrasos caem em ciclos
   inteiros adiante e todos voltam a coincidir. */
@keyframes b-org-tremer {
  from { transform: rotate(-.45deg); }
  to   { transform: rotate(.45deg); }
}
@keyframes b-org-tremer-grande {
  from { transform: translate(-1.5px, -1px); }
  to   { transform: translate(1.5px, 1px); }
}

.b-organizando .b-metrica,
.b-organizando .b-alerta {
  animation: b-org-tremer .38s ease-in-out infinite alternate;
}
.b-organizando .b-card {
  animation: b-org-tremer-grande .46s ease-in-out infinite alternate;
}
.b-organizando .b-metrica:nth-child(4n+2),
.b-organizando .b-alerta:nth-child(4n+2) { animation-delay: -.09s; }
.b-organizando .b-metrica:nth-child(4n+3),
.b-organizando .b-alerta:nth-child(4n+3) { animation-delay: -.19s; }
.b-organizando .b-metrica:nth-child(4n+4),
.b-organizando .b-alerta:nth-child(4n+4) { animation-delay: -.28s; }
.b-organizando .b-card:nth-child(2n) { animation-delay: -.23s; }

/* O VÉU NÃO PINTA NADA POR CIMA: ele é só o ANEL.

   `box-shadow` inset segue o `border-radius` sem nenhum esforço — que é
   exatamente o que o gradiente não fazia —, e por ser inset ele não invade o
   cartão vizinho, que na faixa de números fica a um fio de distância.

   UM PIXEL, e não 1,5: a folha inteira separa com fio de 1px, e um anel mais
   grosso que isso seria a única linha gorda da tela. O hover troca só a COR —
   com espessura diferente também, o cartão "engrossa" ao passar o mouse e a
   faixa inteira parece mexer. */
.b-org-veu {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--acento-linha);
}
.b-organizando .b-org-veu { display: block; }

/* O ANEL DO CARTÃO DA FAIXA RECUA, e só o dela.

   A faixa de números é UMA caixa arredondada com `overflow: hidden`, e os
   cartões dentro dela não têm raio próprio — são retangulares e encostam nas
   bordas. O anel desenhado a zero fica exatamente sobre a curva da faixa, e
   nos cartões das PONTAS ela o corta na diagonal: *"os cards das pontas na
   primeira linha estão com recortes nas bordas"*. Os do meio não mostram nada,
   porque ali não há curva.

   CURVA CONCÊNTRICA: interno = externo − recuo. Com 4px de recuo e raio
   `--raio` menos 4, o centro do arco do anel coincide com o centro do arco da
   faixa — ele passa a correr por dentro dela em toda a volta, e não só nas
   quinas. É a mesma regra que a tela do projeto no BackOffice já usa.

   O `.b-card` e o `.b-alerta` NÃO precisam disto: cada um é a própria caixa
   de recorte, e o anel herda o raio deles. Quem recorta o cartão da faixa é o
   PAI. */
.b-metrica > .b-org-veu {
  inset: 4px;
  border-radius: calc(var(--raio) - 4px);
}
.b-organizando .e-destino .b-org-veu {
  box-shadow: inset 0 0 0 1.5px var(--acento);
  background: var(--acento-fundo);
}

/* A COLUNA INTEIRA COMO ALVO, para o cartão que ATRAVESSA.

   Ela acende quando o ponteiro está sobre a coluna e não sobre um cartão dela
   — inclusive quando a coluna está VAZIA, que é o caso em que não há nenhum
   cartão para acender e mesmo assim é preciso dizer que ali se pode largar.

   O TRACEJADO É DESENHADO POR `outline` E NÃO POR `border`: as duas colunas
   são caixas de fluxo sem largura própria de borda, e 2px de `border` mudam a
   posição de tudo o que está dentro no instante em que a marca aparece — um
   salto de layout no meio do arrasto, que é justamente quando a pessoa está
   mirando. O `outline` é desenhado por fora e não ocupa espaço.

   O RECUO É NEGATIVO para o traço correr por fora dos cartões, e não colado
   neles. */
.b-organizando .e-destino-lista {
  outline: 2px dashed var(--acento);
  outline-offset: 6px;
  border-radius: var(--raio);
}

/* UMA COLUNA VAZIA PRECISA TER ALTURA, ou ela não pode ser alvo de nada.

   Mandado o último cartão para o outro lado, a coluna vira uma caixa de zero
   pixel: não há o que apontar, e o cartão não tem como voltar. O piso vale só
   dentro do modo de organizar, então fora dele nada muda. */
.b-organizando .b-corpo > .b-encolhe { min-height: 140px; }

/* OS DOIS CONTROLES FICAM NA MESMA BARRA, e no canto ESQUERDO.
   O olho estava sozinho no canto direito e caía em cima do ícone do próprio
   cartão — o `.b-alerta i` é absoluto ali. Dois ícones empilhados leem como um
   símbolo único, e o relato foi exatamente esse: *"o símbolo de proibido está
   muito feio"*. Não era um símbolo: eram dois. */
.b-org-barra {
  position: absolute;
  top: 4px;
  left: 8px;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 6px;
}
.b-organizando .b-org-barra { display: inline-flex; }

.b-org-pega,
.b-org-esconder {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--txt-micro);
  font-family: inherit;
  font-weight: 600;
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  cursor: pointer;
  padding: 3px 10px;
  color: var(--acento);
  /* A sombra tira a pastilha do cartão: sem ela as duas ficam no mesmo plano
     e o realce se perde. */
  box-shadow: 0 1px 3px rgba(var(--rgb-sombra), .22);
  transition: transform var(--mov-rapido) ease,
              border-color var(--mov-rapido) ease,
              color var(--mov-rapido) ease;
}
.b-org-pega:hover,
.b-org-esconder:hover { transform: translateY(-1px); }
.b-org-pega:active,
.b-org-esconder:active { transform: scale(.94); }
.b-org-esconder { color: var(--tinta-media); }
.b-org-pega:hover { border-color: var(--acento); }
.b-org-esconder:hover { border-color: var(--alerta); color: var(--alerta); }
.b-org-pega:focus-visible,
.b-org-esconder:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   A FAIXA DO QUE ESTÁ ESCONDIDO
   --------------------------------------------------------------------------- */
.b-escondidos {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  background: var(--acento-fundo);
  border: 1px dashed var(--acento-linha);
  border-radius: var(--raio-mini, 6px);
  font-size: var(--txt-mini);
  color: var(--tinta-media);
  /* ELA ENTRA DE CIMA, e empurra a página inteira ao aparecer: sem o
     movimento, o painel dá um pulo de 48px e quem clicou em "esconder" perde
     a referência de onde estava. */
  animation: b-escondidos-entra var(--mov-lento) var(--mov-curva);
}
.b-escondidos[hidden] { display: none; }
@keyframes b-escondidos-entra {
  from { opacity: 0; transform: translateY(-8px); }
}
.b-escondidos-rotulo { font-weight: 600; }
.b-escondido-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: 3px 10px;
}
.b-escondido-chip button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--acento);
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.b-escondido-chip button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .b-organizando .b-metrica,
  .b-organizando .b-alerta,
  .b-organizando .b-card { transition: none; }
  /* A SERRA PARA, E CONTINUA SENDO MOLDURA. Uma animação infinita é
     exatamente o que `prefers-reduced-motion` existe para desligar — e sem
     ela o tracejado ainda diz "este cartão está no modo de organizar". */
  /* O TREMOR É O PRIMEIRO A SAIR: animação infinita em dezessete elementos é
     exatamente o que `prefers-reduced-motion` existe para desligar. O ANEL
     continua, e ele sozinho já diz que o modo está ligado. */
  .b-organizando .b-metrica,
  .b-organizando .b-alerta,
  .b-organizando .b-card { animation: none; }
  .b-escondidos { animation: none; }
  .b-org-pega,
  .b-org-esconder { transition: none; }
  .b-organizando .b-metrica:hover,
  .b-organizando .b-alerta:hover,
  .b-organizando .b-card:hover { transform: none; }
}

.b-encolhe.e-cresce { flex: 1; }
.b-agenda-item.e-junto { gap: var(--e2); }
.b-fila-titulo.e-mini { font-size: var(--txt-mini); }

/* ============================================================================
   TARJA DO CERTIFICADO DO ESCRITÓRIO (topo do painel)

   Aparece a dez dias do vencimento, ou depois dele. É a única tarja de largura
   inteira do laboratório, e ela existe porque o assunto é o único vencimento
   do produto que derruba TODOS os clientes de uma vez.
   ========================================================================= */
/* DENTRO do `.b-corpo`, ocupando as duas colunas. Fora dele a tarja ficaria
   colada nas bordas da janela -- o respiro lateral da tela vem do padding do
   `.b-corpo`, e duplica-lo aqui seria a mesma folga escrita em dois lugares. */
.b-corpo > .faixa-cert { grid-column: 1 / -1; }

.faixa-cert {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e4);
  padding: 12px var(--e4);
  border: 1px solid var(--atencao-marca, #d1830f);
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--atencao-suave, #fdf6e9);
  color: var(--atencao, #916515);
  text-decoration: none;
  transition: transform var(--mov-rapido) ease, box-shadow var(--mov-rapido) ease;
  animation: faixa-cert-entra .38s cubic-bezier(.22, 1, .36, 1);
}
.faixa-cert:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--rgb-sombra), .08); }

/* A tarja que NAO leva a lugar nenhum (`_faixa_sem_setor.html`): quem a ve
   nao tem permissao na tela que resolveria, entao ela e aviso, nao atalho.
   Sem isto o hover a levantaria igual a irma clicavel, prometendo um clique
   que nao existe. */
.faixa-cert--parada { cursor: default; }
.faixa-cert--parada:hover { transform: none; box-shadow: none; }

/* A entrada por cima: a tarja empurra o painel para baixo, e sem o movimento
   o conteúdo parece ter saltado sozinho ao carregar. */
@keyframes faixa-cert-entra {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faixa-cert-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(var(--rgb-atencao), .14);
  font-size: 1.05rem;
}

.faixa-cert-txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.faixa-cert-txt > b { font-size: var(--txt-base); font-weight: 700; }
.faixa-cert-txt > span { font-size: var(--txt-micro); opacity: .92; line-height: 1.5; }

.faixa-cert-ir {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--atencao-marca, #d1830f);
  color: var(--papel);
  font-size: var(--txt-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: transform var(--mov-rapido) ease;
}
.faixa-cert:hover .faixa-cert-ir { transform: translateX(2px); }

/* --- Os degraus -----------------------------------------------------------
   Âmbar até sete dias; a partir daí, vermelho. A tarja não muda de tamanho
   entre um e outro — o que muda é a cor e a palavra, que é o que se lê de
   longe sem parar o que se está fazendo. */
.faixa-cert.e-urgente,
.faixa-cert.e-vencido {
  border-color: var(--alerta, #b4472e);
  background: var(--alerta-suave, #fbf1ee);
  color: var(--alerta, #b4472e);
}
.faixa-cert.e-urgente .faixa-cert-icone,
.faixa-cert.e-vencido .faixa-cert-icone { background: rgba(var(--rgb-alerta), .14); }
.faixa-cert.e-urgente .faixa-cert-ir,
.faixa-cert.e-vencido .faixa-cert-ir { background: var(--alerta, #b4472e); }

/* VENCIDO pulsa. É o único estado que pulsa, e de propósito: a partir daqui
   não é mais um prazo se aproximando, é trabalho que já não passa. */
.faixa-cert.e-vencido { animation: faixa-cert-entra .38s cubic-bezier(.22,1,.36,1), faixa-cert-pulsa 2.6s ease-in-out .4s infinite; }
@keyframes faixa-cert-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-alerta), .26); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--rgb-alerta), 0); }
}

@media (max-width: 700px) {
  .faixa-cert { flex-wrap: wrap; }
  .faixa-cert-ir { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .faixa-cert, .faixa-cert.e-vencido { animation: none; transition: none; }
  .faixa-cert:hover .faixa-cert-ir { transform: none; }
}

/* O selo do contador em vermelho, quando o que há lá dentro é certificado
   vencido. O mesmo número em roxo diria "tem três mensagens", e não é isso. */
.ut-selo--alerta { background: var(--alerta, #b4472e); color: var(--papel); }

/* ============================================================================
   CONTROLES COMPARTILHADOS — nasceram em Certificados, hoje sao de todos

   Botao, pilula ao lado do titulo, tabela, selo e o vazio. Estavam no
   `documentos.css`, que so Certificados e Procuracoes carregam; Ajuda e
   Assinatura passaram a usar os mesmos nomes e o resultado foi o botao com a
   borda `outset` cinza do navegador no meio de uma tela com marca propria --
   defeito que parece de desenho e e de arquivo faltando. Nona vez que essa
   familia de erro aparece nesta base.

   Aqui e o lugar certo: o `dashboard-b.css` e carregado por TODA tela do
   laboratorio (conferido nas 14), entao a proxima tela que usar `.doc-btn`
   entra estilizada sem ninguem lembrar de nada.

   OS NOMES `doc-*` FICAM. Renomear obrigaria a mexer em vinte usos espalhados
   por seis templates -- e o precedente dos `.cad-*` no CLAUDE.md e claro: nome
   legado que continua valendo custa um comentario; renomear em massa custa uma
   tela desestilizada que ninguem abriu.
   ========================================================================= */
.doc-irma {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--acento);
  font-weight: 600;
  text-decoration: none;
}
.doc-irma:hover { text-decoration: underline; }
.doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-mini);
  background: var(--papel);
  color: var(--tinta-media);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease,
              border-color var(--mov-rapido) ease;
}
.doc-btn:hover { background: var(--acento); border-color: var(--acento); color: var(--papel); }
.doc-btn--limpar { color: var(--tinta-fraca); }
.doc-btn--limpar:hover { background: var(--papel); color: var(--alerta); border-color: var(--alerta); }
.doc-rolagem { overflow-x: auto; }
.doc-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-mini);
}
.doc-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px var(--e4);
  background: var(--papel-sutil);
  border-bottom: 1px solid var(--linha);
  text-align: left;
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.doc-tabela td {
  padding: 9px var(--e4);
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-media);
  vertical-align: middle;
}
.doc-tabela tbody tr:last-child td { border-bottom: none; }
.doc-tabela tbody tr:nth-child(even) td { background: var(--papel-sutil); }
.doc-linha { transition: background var(--mov-rapido) ease; }
/* O HOVER PRECISA DO MESMO PESO DA ZEBRA, e sem isso ele só funcionava em
   metade das linhas.

   `.doc-tabela tbody tr:nth-child(even) td` pesa (0,2,3); `.doc-linha:hover td`
   pesava (0,2,1). Empatam nas classes, e aí decidem os TIPOS: três contra um,
   a zebra ganha. Resultado: nas linhas ímpares (fundo branco) o realce
   aparecia, nas pares (fundo cinza) não — e o relato foi exato, "só funciona
   nas linhas brancas".

   O defeito é do tipo que passa por qualquer conferência rápida: quem testa
   passa o mouse numa linha, vê o realce e segue em frente. Ele só se mostra
   quando o olho compara duas linhas vizinhas.

   A correção é escrever o seletor no mesmo nível da zebra, e não jogar um
   `!important` — que resolveria hoje e cobraria na próxima regra. */
.doc-tabela tbody tr.doc-linha:hover td { background: var(--acento-fundo); }
.doc-linha[data-ir] { cursor: pointer; }
.doc-empresa { font-weight: 600; color: var(--tinta); }
.doc-cnpj { font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-col-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--txt-micro);
  font-weight: 700;
  white-space: nowrap;
}
.doc-selo.e-alerta  { background: var(--alerta-fundo-suave); color: var(--alerta); }
.doc-selo.e-atencao { background: var(--atencao-suave); color: var(--atencao); }
.doc-selo.e-ok      { background: var(--ok-suave, #e8f5ec); color: var(--ok, #1e7a3c); }
/* O selo NEUTRO fica com a tinta média, não com a fraca: o fundo dele é a
   `--linha`, a superfície mais escura do tema claro, e ali até a
   `--tinta-fraca` já escurecida para em 4,31. Os três irmãos acima seguem a
   mesma forma — superfície suave mais a tinta FORTE daquele estado. */
.doc-selo.e-neutro  { background: var(--linha); color: var(--tinta-media); }
.doc-vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--e5) var(--e4);
  font-size: var(--txt-mini);
  color: var(--tinta-fraca);
  text-align: center;
}
.doc-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--acento);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.doc-novo-orgao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px dashed var(--linha-forte);
  border-radius: 999px;
  background: none;
  color: var(--tinta-media);
  font-family: inherit;
  font-size: var(--txt-micro);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--mov-rapido) ease, color var(--mov-rapido) ease,
              background var(--mov-rapido) ease;
}
.doc-novo-orgao:hover {
  border-style: solid;
  border-color: var(--acento);
  background: var(--acento-fundo);
  color: var(--acento);
}
.doc-btn-forte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--e2);
  padding: 9px 18px;
  border: none;
  border-radius: var(--raio-mini);
  background: var(--acento);
  color: var(--papel);
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--mov-rapido) ease, transform var(--mov-rapido) ease;
}
.doc-btn-forte:hover { background: var(--acento-escuro, #3d2069); transform: translateY(-1px); }
.doc-btn--mini { width: 28px; height: 28px; font-size: 11px; }
.doc-btn--x:hover { background: var(--alerta); border-color: var(--alerta); }


/* ============================================================================
   LISTA — a fileira de fichas, usada por Clientes e por Usuários

   Nasceu no `clientes-b.css` e era exatamente o que a tela de Usuários
   precisava: uma LINHA por item, com rosto à esquerda, nome grande, apoio
   embaixo, pastilhas à direita e a seta que acende no hover. Escrever de novo
   com outro prefixo seria a segunda cópia de duzentas linhas — e a segunda
   cópia começa igual e termina diferente.

   Os nomes foram renomeados de `.cli-*` para `.lista-*`, ao contrário do que
   se fez com os `.doc-*`. A diferença é a pegada: `doc-` estava em vinte usos
   por seis arquivos e o CLAUDE.md desaconselha renomear em massa; este
   vocabulário vivia em três arquivos. E `cli-` quer dizer "cliente" — lê-lo
   numa lista de pessoas manda a mensagem errada.

   O que é de UMA tela continua na folha dela: a pastilha de tributação segue
   no `clientes-acoes.css`, o medidor de assentos no `usuarios.css`.
   ========================================================================= */
/* ===========================================================================
   CLIENTES — layout B ("Workspace")
   ===========================================================================

   A aposta deste layout: dar ESPAÇO a cada cliente. Uma linha alta, com a
   razão social em destaque e o resto como apoio. Cabem ~12 na tela.

   Serve quem procura UM cliente e quer reconhecê-lo de relance. É o oposto
   da versão C, que espreme trinta linhas na mesma altura para quem varre a
   lista inteira. Comparar as duas lado a lado é o ponto do laboratório.
   =========================================================================== */

.lista-corpo {
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-width: 0;
}

/* --- Barra de busca --------------------------------------------------------
   Formulário GET comum. O endereço com o filtro aplicado pode ser guardado e
   mandado para outra pessoa — coisa que filtro só no navegador não permite. */
/* Alinhamento pela BASE, e não pelo centro.
   O bloco "Organizar" tem rótulo em cima do campo, então ele é mais alto que
   a busca e os botões. Centralizado, o campo dele descia e ficava fora da
   linha dos outros; pela base, todos terminam na mesma altura e a barra lê
   como uma fileira só. */
.lista-barra {
  display: flex;
  align-items: flex-end;
  gap: var(--e3);
  flex-wrap: wrap;
}

.lista-busca {
  position: relative;
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
}
.lista-busca > i {
  position: absolute;
  left: 13px;
  color: var(--tinta-fraca);
  font-size: 14px;
  pointer-events: none;
}
.lista-busca input {
  width: 100%;
  padding: 10px 38px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--papel);
  font-family: inherit;
  font-size: var(--txt-base);
  color: var(--tinta);
  outline: none;
  transition: border-color var(--mov-base) ease, box-shadow var(--mov-base) ease;
}
.lista-busca input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
.lista-busca input::placeholder { color: var(--tinta-fraca); }

.lista-limpar {
  position: absolute;
  right: 10px;
  color: var(--tinta-fraca);
  font-size: 12px;
  padding: 5px;
  border-radius: 999px;
  line-height: 1;
  text-decoration: none;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease;
}
.lista-limpar:hover { background: var(--papel-sutil); color: var(--tinta); }

.lista-select {
  padding: 10px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--papel);
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: 600;
  color: var(--tinta-media);
  cursor: pointer;
  outline: none;
}
.lista-select:focus { border-color: var(--acento); }

/* O botão da barra acompanha a ALTURA dos campos. O `.b-btn` do layout tem
   folga menor (é feito para a barra do topo, onde fica sozinho); aqui ele
   divide a fileira com campos de 39px, e 8px a menos aparecem. Alinhar só a
   base não bastava: o topo continuava fora. */
.lista-barra .b-btn { padding-top: 10px; padding-bottom: 10px; }

/* --- A lista ---------------------------------------------------------------
   Cada cliente é uma LINHA, não uma célula de tabela. Numa tabela, a razão
   social compete de igual para igual com o número do ERP; aqui ela é o texto
   grande e o resto desce para uma faixa de apoio.

   Filete de 1px entre linhas, dentro de um cartão só. Sombra de card por
   linha (a moda de "cada item é um cartão flutuante") multiplicaria trezentas
   sombras numa tela e deixaria tudo agitado. */
.lista-caixa {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}

.lista-linha {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background var(--mov-rapido) ease;
}
.lista-linha:last-child { border-bottom: none; }
.lista-linha:hover { background: var(--papel-sutil); }

/* Filete de acento à esquerda no hover: aparece de dentro, sem empurrar o
   conteúdo (é `::before` absoluto, não borda, que mudaria a largura). */
.lista-linha::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--acento);
  transform: scaleY(0);
  transition: transform var(--mov-base) var(--mov-curva);
}
.lista-linha:hover::before { transform: scaleY(1); }

/* A inicial existe para o reconhecimento ser por FORMA antes de ser por
   leitura: depois de uma semana a pessoa acha o cliente pelo bloco, sem ler
   o nome inteiro. Cinza, não colorida — trinta iniciais coloridas trariam de
   volta exatamente a poluição que este laboratório existe para tirar. */
.lista-inicial {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--raio-mini);
  background: var(--papel-sutil);
  border: 1px solid var(--linha);
  color: var(--tinta-media);
  font-size: var(--txt-medio);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mov-base) ease, color var(--mov-base) ease,
              border-color var(--mov-base) ease;
}
.lista-linha:hover .lista-inicial {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel);
}
/* Quando o item TEM foto (é o caso das pessoas, em Usuários), a imagem ocupa
   o bloco inteiro e as iniciais dão lugar a ela. `object-fit: cover` porque
   foto de perfil raramente é quadrada, e esticar o rosto é pior que cortar
   a borda. */
.lista-inicial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.lista-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lista-nome {
  font-size: var(--txt-medio);
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lista-meta {
  font-size: var(--txt-mini);
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lista-mono { font-variant-numeric: tabular-nums; }
.lista-sep { margin: 0 5px; opacity: .5; }

/* A unidade do setor, editável na própria linha. Discreta em repouso e com
   borda ao passar o mouse: ela é um campo, mas a linha é para LER, e um
   seletor com cara de formulário em cada linha transforma a lista num
   cadastro. `flex-shrink: 0` porque o nome do setor já encolhe antes dela. */
.lista-unidade {
  flex-shrink: 0;
  max-width: 170px;
  margin-left: auto;
  font-size: var(--txt-micro);
  color: var(--tinta-media);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 3px 6px;
  cursor: pointer;
}
.lista-unidade:hover { border-color: var(--linha); background: var(--papel-sutil); }
.lista-unidade:focus-visible { border-color: var(--acento); outline: none; }

.lista-marcas { display: flex; align-items: center; gap: var(--e2); flex-shrink: 0; }
.lista-chip {
  font-size: var(--txt-micro);
  font-weight: 600;
  color: var(--tinta-media);
  background: var(--papel-sutil);
  border: 1px solid var(--linha);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.lista-seta {
  color: var(--linha-forte);
  font-size: 12px;
  flex-shrink: 0;
  transition: color var(--mov-base) ease, transform var(--mov-base) var(--mov-curva);
}
.lista-linha:hover .lista-seta { color: var(--acento); transform: translateX(3px); }

.lista-vazio {
  padding: var(--e8) var(--e5);
  text-align: center;
  color: var(--tinta-fraca);
}
.lista-vazio i { font-size: 30px; color: var(--linha-forte); display: block; margin-bottom: var(--e3); }
.lista-vazio p { margin: 0 0 var(--e4); font-size: var(--txt-medio); }

@media (max-width: 760px) {
  .lista-corpo { padding: var(--e4); }
  .lista-marcas { display: none; }   /* o nome e o CNPJ é que importam no celular */
  .lista-linha { gap: var(--e3); }
}

/* ============================================================================
   MATRIZ E FILIAL
   ============================================================================
   Matriz e filial têm a MESMA razão social por lei. Sem uma marca, as duas
   aparecem como linhas idênticas e só o CNPJ as distingue, o que obriga a
   comparar 14 dígitos para achar a certa. O número sai do próprio CNPJ
   (posições 9 a 12, a "ordem" do estabelecimento), então não depende de
   ninguém ter preenchido campo nenhum.

   A MARCA SÓ APARECE NAS FILIAIS. Matriz é a esmagadora maioria: se toda
   linha dissesse "Matriz", a palavra viraria ruído e pararia de significar
   qualquer coisa justamente onde importa.

   VIVE AQUI, e não na folha de Clientes onde nasceu, porque a mesma marca
   vale em cinco telas e só esta folha é carregada por todas. Duas cópias da
   mesma pastilha é como as telas passam a mostrar cores diferentes para o
   mesmo fato.
   ------------------------------------------------------------------------ */
.selo-filial {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--atencao-linha);
  background: var(--atencao-suave);
  color: var(--atencao);
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

/* A VARIANTE DISCRETA, para tela densa.
   Em Minhas Tarefas cada linha já carrega nome, CNPJ, ERP, unidade, nota,
   contagem, barra e a fileira de tarefas. Uma pastilha preenchida ali disputa
   atenção com o que a tela existe para mostrar, que é o que está pendente.
   Aqui o contorno basta: distingue as duas linhas sem gritar. */
.selo-filial.e-discreto {
  border-color: var(--linha-forte);
  background: transparent;
  color: var(--tinta-fraca);
  font-weight: 600;
}

/* ===========================================================================
   As duas faixas de números atravessam a grade
   ===========================================================================

   Elas moravam dentro do `.b-encolhe`, a coluna da esquerda, e por isso
   ficavam com dois terços da largura enquanto o calendário ocupava o topo
   direito: onze números espremidos ao lado de um calendário que não tem
   pressa. Agora são filhas diretas do `.b-corpo` e ocupam a linha inteira; o
   calendário começa na altura do primeiro cartão.

   `1 / -1` e não `span 2`: a grade tem duas colunas hoje e uma só abaixo de
   1100px. `1 / -1` diz "da primeira à última", e continua certo nos dois.
   =========================================================================== */

.b-corpo > .b-metricas,
.b-corpo > .b-alertas { grid-column: 1 / -1; }

/* E A MARGEM DELAS ZERA AQUI. Quando moravam dentro da coluna da esquerda,
   o `margin-bottom: 24px` de cada uma era o único espaço entre elas. Agora
   são células da grade, e a grade já tem `gap: 24px`: a margem SOMAVA ao gap
   e o vão entre as faixas ficava com 48px, quase o dobro do resto da tela.

   Some a margem, fica o gap. É a mesma regra de sempre: um espaço, um dono. */
.b-corpo > .b-metricas,
.b-corpo > .b-alertas { margin-bottom: 0; }

/* ===========================================================================
   O telefone
   ===========================================================================

   Três defeitos que só apareciam abaixo de 500px, e os três da mesma
   família: coisa dimensionada para caber, não para ser lida.
   =========================================================================== */

@media (max-width: 620px) {

  /* 1. O RÓTULO PARAVA DE CABER e quebrava em duas linhas ("Usuários
        ativos", "Certificados vencendo (30d)"). Como só alguns quebravam, os
        números da mesma fileira ficavam em alturas diferentes, e a faixa
        inteira parecia torta. Com duas colunas fixas cabe em uma linha, e o
        `align-items: start` alinha o que ainda quebrar pelo topo. */
  .b-metricas { grid-template-columns: repeat(2, 1fr); }
  .b-metrica  { padding: var(--e3) var(--e4); }
  .b-metrica .lab-rotulo { font-size: 10px; letter-spacing: .06em; }

  .b-alertas { grid-template-columns: 1fr; }

  /* 2. O NÚMERO DESCE UM DEGRAU. A 26px o `391` ao lado de um rótulo de 10px
        já não precisava do mesmo peso do desktop para se impor. */
  .b-metrica .lab-num { font-size: 22px; }

}

/* ===========================================================================
   A BARRA BRANCA DO TOPO, no telefone
   ===========================================================================

   Ela é a mesma em todas as telas do produto, mas o que cai dentro dela
   varia muito: no painel são título, competência e dois ícones; na tela de
   um setor são título, competência, o botão "Gerar tarefas do mês", os
   ícones, o avatar E o campo de busca. Numa fileira só, no telefone, isso
   quebrava onde desse: o botão aterrissava entre a competência e os ícones,
   e a busca sobrava numa terceira linha meio torta.

   A regra abaixo não esconde nada. Ela só diz ONDE cada coisa quebra, em
   vez de deixar o flex decidir: o título ocupa a primeira linha inteira, os
   controles dividem a segunda, e a busca fica com a terceira inteira.

   Vive aqui, e não numa media query da tela do setor, porque `.b-topo` é
   desta folha e todas as telas do lab a carregam.
   =========================================================================== */

/* NENHUM `order` NO DESKTOP, e isto é decisão, não esquecimento.

   A busca saiu de dentro do `.b-topo-quem` e virou irmã da barra, para poder
   descer no telefone. A ordem do DOM que sobrou é exatamente a que o desktop
   quer: nome da tela, busca, ações, utilidades.

   A primeira tentativa aqui ordenava os três primeiros à mão. O resultado foi
   que o `.ut` (sininho, mensagens e a conta), que não recebeu `order` nenhum,
   ficou valendo zero e foi parar ANTES do título — no painel os ícones e o
   avatar apareceram à esquerda do nome da tela. Regra que fica: num flex, ou
   TODOS os irmãos têm `order`, ou NENHUM tem. Ordenar alguns é ordenar todos,
   com os que faltam indo para a frente.
   =========================================================================== */

@media (max-width: 820px) {
  .b-topo {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2) var(--e3);
    padding: var(--e3) var(--e4);
  }

  /* O NOME DA TELA DIVIDE A PRIMEIRA LINHA COM A AÇÃO. Ele já tomou a linha
     inteira por um tempo, e o efeito foi jogar o botão "Gerar tarefas do
     mês" para uma linha só dele, com um vazio à esquerda. Agora o título e a
     competência ficam à esquerda, o botão à direita, e sobra uma linha a
     menos de barra.

     `1 1 auto` com um piso: o título encolhe até 150px e depois empurra o
     botão para a linha de baixo, em vez de espremer os dois. Numa tela em
     que o setor tem nome longo, a quebra é melhor que a aperto.

     O SELETOR REPETE O `:has(.b-topo-icone)` de propósito. A regra da linha
     148 usa esse caminho e vale (0,3,0); um `.b-topo-quem` solto aqui vale
     (0,1,0) e perdia calado, com o `flex-basis` continuando em zero. Medido:
     a coluna ficava com 72px de largura numa tela de 430. */
  .b-topo:has(.b-topo-icone) .b-topo-quem,
  .b-topo-quem { flex: 1 1 auto; min-width: 150px; }

  /* TODOS OS IRMÃOS RECEBEM `order` AQUI, inclusive o `.ut`. Ver a nota logo
     acima do bloco: deixar um sem é mandá-lo para a frente da fila. */

  /* TRÊS LINHAS, e cada uma com um assunto: o nome da tela, a ação, e a
     busca. O botão vai para a DIREITA porque ele é a ação da tela, e ação
     mora na ponta em que o polegar chega — a mesma ponta em que o `Entrar`
     e o `Salvar` do produto já ficam. */
  /* O `:has()` repete o caminho da regra da linha 148 pelo mesmo motivo de
     sempre nesta folha: sem ele o seletor vale (0,1,0) e perde calado. */
  .b-topo:has(.b-topo-icone) .b-topo-quem,
  .b-topo-quem   { order: 1; }
  .b-topo-acoes  { order: 2; margin-left: auto; }

  /* A BUSCA VAI PARA BAIXO E TOMA A LINHA INTEIRA. O `width: auto` é
     necessário: o `tarefas-b.css` a fixa em 160px abaixo de 1180px, e essa
     folha carrega DEPOIS desta na tela do setor. Num campo de texto, meia
     largura é pior que nenhuma: ali se digita nome de empresa e CNPJ. */
  .b-topo .mzb-topo-busca { flex: 1 0 100%; width: auto; min-width: 0; order: 9; }
  .mzb-topo-busca input { width: 100%; }

  /* A barra de utilidades sai daqui: o script da trilha a leva para a gaveta
     do sanduíche. Esta regra existe para o caso de o script não rodar — sem
     ela o sininho e a conta ficariam sozinhos numa quarta linha. */
  .b-topo .ut { order: 2; }
}

/* ===========================================================================
   Em tela estreita o calendário sobe
   ===========================================================================

   Abaixo de 1100px a grade vira uma coluna só, e a ordem do documento manda:
   primeiro a coluna da esquerda inteira (conclusão por setor e a fila, que
   tem até 50 itens), e só depois o `aside` com calendário, empresas em atraso
   e por unidade. Na prática o calendário ia parar no fim de tudo.

   O `order` o traz para logo depois das faixas de números, que é onde ele
   está no desktop. Isso não mexe na ordem do DOM: leitor de tela e navegação
   por teclado continuam encontrando as coisas na sequência em que foram
   escritas.
   =========================================================================== */

@media (max-width: 1100px) {
  /* AS DUAS COLUNAS TÊM A MESMA CLASSE: a da esquerda é `div.b-encolhe` e a
     da direita é `aside.b-encolhe`. Um `.b-corpo > .b-encolhe` (0,2,0) para a
     esquerda vencia o `.b-corpo > aside` (0,1,1) da direita, e o aside
     continuava em último. Por isso as duas trazem o nome do elemento junto:
     assim as regras têm o mesmo peso e quem decide é o que está escrito. */
  .b-corpo > .b-metricas      { order: 1; }
  .b-corpo > .b-alertas       { order: 2; }
  .b-corpo > aside.b-encolhe  { order: 3; }
  .b-corpo > div.b-encolhe    { order: 4; }
}