/* ===========================================================================
   TAREFIX — tokens do laboratório de layout
   ===========================================================================

   A base sóbria compartilhada pelos três dashboards de teste. É o arquivo
   que responde à queixa que motivou tudo isto: o dashboard atual tem 42
   cores distintas no <style> e usa 21 classes de cor do Tailwind espalhadas
   por 8 famílias de matiz — azul, verde, laranja, roxo, vermelho, rosa,
   teal e amarelo, todas na mesma tela. Oito matizes brigando é o que tira a
   seriedade; não é falta de efeito.

   A regra que orienta tudo aqui:

     COR É SINAL, NÃO DECORAÇÃO.

   O padrão da tela é cinza e branco. Cor entra em pedaço pequeno — um
   filete de 3px, um ponto de 6px, um número — e só quando quer dizer algo
   que exige ação. Um card inteiro vermelho grita a mesma coisa que um ponto
   vermelho, mas cansa a pessoa que olha a tela oito horas por dia.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   `[hidden]` TEM DE GANHAR SEMPRE. Esta é a primeira regra do arquivo e a
   única com `!important` do laboratório inteiro.

   O navegador aplica `[hidden] { display: none }`, mas com a MENOR
   especificidade que existe — qualquer `display:` que uma folha nossa
   escreva no mesmo elemento a derruba. O resultado é o elemento marcado como
   escondido no HTML aparecendo na tela, e o defeito não parece de CSS:
   parece que o JavaScript não rodou.

   Aconteceu SEIS vezes nesta base — a grade de emoji nascendo aberta por
   cima da conversa, a linha "nenhuma empresa neste status" aparecendo com a
   tabela cheia, e o mesmo com `[popover]`. Toda vez o conserto foi reescrever
   `.classe[hidden] { display: none }` na folha da vez, e toda vez a folha
   seguinte repetiu o erro.

   `!important` aqui é o uso legítimo: `hidden` é semântica do HTML, não
   estilo — quem escreve `hidden` está dizendo "isto não existe agora", e
   nenhuma folha deveria ter voz nessa decisão. Um elemento que precise
   aparecer escondido (nunca precisou) usa outra marca.
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

:root {
  /* --- Cinzas: a base de tudo -------------------------------------------
     Oito degraus, do papel ao quase-preto. Números grandes usam --tinta;
     rótulos usam --tinta-fraca. Não há preto puro: #0f1115 cansa menos que
     #000 em tela clara e parece mais caro. */
  --papel:        #ffffff;
  --papel-fundo:  #fafafa;
  --papel-sutil:  #f5f5f6;
  --linha:        #e8e8ea;   /* filete divisor — quase invisível, de propósito */
  --linha-forte:  #d6d6da;
  /* ESCURECIDA em 23/08/2026, de #8a8a94 para #6b6b75, e o motivo é medido:
     no valor antigo ela dava 3,42 sobre o papel branco e 3,06 sobre o fundo
     de acento — abaixo dos 4,5 que texto pede, em 450 lugares. Era a maior
     dívida de leitura do produto, e ninguém tinha olhado porque não havia
     com o que comparar: ela só apareceu quando o tema escuro precisou de um
     piso de comparação (`sonda_tema_escuro.py --claro`).
     Hoje: 5,27 no papel, 5,05 no chão, 4,84 no sutil, 4,72 no acento. A
     escada de tinta continua com três degraus (17,3 / 7,3 / 5,3). */
  --tinta-fraca:  #6b6b75;   /* rótulo, legenda, unidade */
  --tinta-media:  #56565f;   /* texto corrido */
  --tinta:        #1a1a1f;   /* número grande, título */

  /* --- Marca -------------------------------------------------------------
     Reaproveita o roxo do tarefix-ui.css quando ele estiver carregado; o
     fallback existe para os layouts que rodam com moldura própria. Aqui o
     roxo NÃO é enfeite: marca ação, item selecionado e navegação. */
  --acento:        var(--roxo, #4c2882);
  --acento-fundo:  #f4f1fa;
  --acento-linha:  #e0d8f0;

  /* O ROXO DO HOVER, e a sombra curta de repouso. Existem para o botão cheio
     (`.b-btn--forte`), que antes clareava com `filter: brightness(1.1)` — um
     efeito que quase não se via sobre um roxo já escuro, e que ainda por cima
     mudava de uma vez, porque `filter` não estava na lista de transições.
     Aqui a cor é declarada, não calculada: dá para medir. Branco sobre
     #5d3399 = 8,7:1, bem acima do mínimo.
     A sombra é ROXA, não cinza: sombra colorida sob um botão colorido parece
     luz da própria peça; cinza parece sujeira embaixo dela. */
  --acento-vivo:      #5d3399;
  --sombra-acento:    0 1px 2px rgba(var(--rgb-acento), .18);

  /* O LARANJA DA LOGO. A segunda cor da marca, e a única que o laboratório
     usa sem ser para estado — o roxo diz "aqui é ação", o laranja diz "aqui é
     Tarefix". Por isso ele aparece pouco e sempre em toque: sublinhado que
     nasce no hover, estrela de destaque, selo.
     Estava escrito à mão como `var(--laranja, #f7941d)` em dois lugares, com
     o fallback fazendo o trabalho porque a variável nunca existiu. Agora
     existe, e os dois usos passam a receber a cor pela porta da frente. */
  --laranja:       #f7941d;
  --laranja-forte: #d97706;   /* sobre branco, para texto: o #f7941d puro não
                                 alcança contraste de leitura */

  /* --- Toques suaves de cor ---------------------------------------------
     Versões dessaturadas, para pintar filete e ponto — nunca fundo de card
     inteiro. O par `-suave` é para tarja discreta; o sólido, para o ponto e
     para o texto do número quando ele é a informação crítica. */
  --alerta:        #b4472e;   /* atrasado, vencido */
  --alerta-suave:  #fbf1ee;
  /* Um degrau mais escura (era #9a6b16), pelo mesmo motivo: sobre o próprio
     fundo âmbar dela o valor antigo dava 4,35. */
  --atencao:       #916515;   /* vence hoje, vencendo */
  --atencao-suave: #fdf6e9;
  /* Mesmo âmbar, com mais saturação, SÓ para marca pequena: um ícone de 12px
     precisa de mais croma que uma superfície para transmitir a mesma cor.
     Com o `--atencao` normal, o relógio de "pendente" na matriz lia como
     marrom-acinzentado e não cumpria o papel de saltar aos olhos.
     Não usar em fundo, tarja ou texto corrido — ali ele grita. */
  --atencao-marca: #d1830f;
  --ok:            #2f6b46;   /* em dia, concluído */
  --ok-suave:      #eef5f0;
  /* O VERDE DO ✓✓ DE LEITURA, escolhido pelo dono. O `--ok` acima é um verde
     sóbrio, feito para tarja e texto de estado, onde ele convive com o resto
     da tela sem chamar atenção. Num glifo de 14px sobre o lilás do balão ele
     perde o matiz e lê como cinza escuro, e a marca deixa de informar o que
     existe para informar. Este é mais saturado justamente porque tem pouca
     tinta para se fazer entender. Não usar em fundo nem em texto corrido. */
  --ok-visto:      #159948;
  /* O verde da CÉLULA CONCLUÍDA da matriz, e por que ele não é o `--ok-suave`.
     Aquele fica a um passo do branco: numa matriz com 277 concluídas na tela,
     o campo inteiro lia como vazio e a pessoa perdia a resposta que a tela
     existe para dar, que é onde ainda falta. Este é o mesmo verde, com
     saturação suficiente para formar bloco sem competir com o âmbar do
     pendente — que é quem precisa ser visto primeiro. */
  --ok-celula:     #d9ece1;
  --ok-celula-alt: #c6e2d3;   /* o mesmo, um degrau abaixo, para o hover */
  --ok-celula-tinta: #215135; /* o visto sobre ele */
  /* O ÍCONE DE COMENTÁRIO VAZIO sobre a célula concluída. Ele é cinza-claro
     (`--linha-forte`) porque foi calibrado para sumir discretamente NO
     BRANCO; sobre o verde ele sumia de vez, por luminância parecida demais.
     Medido: o cinza sobre o branco dá razão de contraste 1,45; o mesmo cinza
     sobre este verde cai para 1,18. Este tom devolve 1,48 -- a MESMA
     discrição de antes, não mais chamativo. O ícone é uma dica de que dá
     para comentar, não um pedido de ação. */
  --ok-celula-icone: #a8c7b4;
  --neutro-ponto:  #b8b8c0;

  /* Roxo muito escuro da navegação. É a marca (#4c2882) puxada para o quase
     preto — continua lendo como roxo, mas sem competir com o conteúdo.
     Preto puro pareceria mais barato; roxo cheio, pesado demais numa faixa
     que fica na tela o dia inteiro. Está bem fechado de propósito: a
     luminosidade é próxima do preto, e o matiz roxo só aparece quando a
     faixa é grande — que é exatamente o caso de uma barra de altura total. */
  --nav-fundo:     #150925;
  /* A TINTA DA TRILHA E BRANCA NOS DOIS TEMAS, porque o fundo dela e
     escuro nos dois. Ela pedia `--papel` emprestado, e no tema claro isso
     funcionava por coincidencia: papel branco e tinta branca sao o mesmo
     valor. No escuro os dois se separam. */
  --nav-tinta:     #ffffff;

  /* --- Tipografia --------------------------------------------------------
     Uma escala só, sem tamanhos avulsos. `--num-*` usa tabular-nums para os
     dígitos não dançarem quando o valor muda. */
  --txt-micro: 11px;
  --txt-mini:  12px;
  --txt-base:  13.5px;
  --txt-medio: 15px;
  --txt-titulo: 19px;
  --num-grande: 40px;
  --num-medio:  26px;

  /* --- Tipografia: tres papeis ------------------------------------------
     `--fonte` continua sendo o texto corrido. As outras duas entraram em
     22/08/2026, vindas do site publico, e o motivo e hierarquia: com uma
     familia so, um numero de 31px e um rotulo de 10px tem a mesma textura, e
     a tela fica plana por mais peso que se ponha nela.

     ONDE CADA UMA VALE esta logo abaixo, em `.lab-num` e `.lab-rotulo`. Sao
     classes compartilhadas por todas as telas do produto, entao trocar aqui
     troca no sistema inteiro — que foi o pedido. Quem mexer nisto roda o
     `docs/ui_check/medir_paginas.py` antes e depois: sao 22 telas, e a
     mudanca alcanca as 22. */
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --fonte-dado: 'JetBrains Mono', ui-monospace, 'Consolas', monospace;

  /* --- Espaçamento: escala de 4 --------------------------------------------
     O que dá sensação de "caro" numa interface é o espaço em branco, não o
     enfeite. Os três layouts usam esta escala e nenhum valor fora dela. */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px;  --e6: 32px;  --e7: 48px;  --e8: 64px;

  /* Largura da trilha lateral, citada pela grade dos dois layouts. */
  --trilha-larg: 56px;


  /* --- Superficie de AVISO (toast e pastilha de estado) -------------------
     Quatro estados, quatro papeis cada: o fundo, a borda, a tinta e o icone.
     Estavam escritos a mao no `toast.css`, dezesseis hexadecimais soltos.
     Viraram token em 22/08/2026 porque um tema escuro precisa trocar os
     dezesseis de uma vez, e cor escrita na regra nao acompanha tema nenhum. */
  --ok-aviso:            #d5e9dd;
  --ok-aviso-linha:      #9fc9b0;
  --ok-aviso-tinta:      #17402a;
  --ok-aviso-icone:      #4a6b57;

  --atencao-aviso:       #faeac4;
  --atencao-aviso-linha: #e2c283;
  --atencao-aviso-tinta: #5c3f0b;
  --atencao-aviso-icone: #7d6229;

  --alerta-aviso:        #f7d9cf;
  --alerta-aviso-linha:  #e5ab98;
  --alerta-aviso-tinta:  #6d2818;
  --alerta-aviso-icone:  #8c5342;

  --acento-aviso:        #f3eefa;
  --acento-aviso-linha:  #ddd3ee;
  --acento-aviso-tinta:  #3a1e66;
  --acento-aviso-icone:  #6d5a8f;

  /* --- A BORDA que acompanha cada fundo `*-suave` ------------------------
     O fundo ja era token; a borda ao lado dele nao era, e as duas sempre
     aparecem juntas (pastilha, chip, resultado de importacao). */
  --ok-linha:            #cfe6db;
  --ok-linha-forte:      #bcd6c6;
  --alerta-linha:        #e8c9c9;
  --alerta-linha-forte:  #e0b4b4;
  --atencao-linha:       #f0e2c6;
  --atencao-linha-forte: #e6d3ab;
  --acento-fundo-forte:  #ebe5f7;
  /* Dois tons que eu quase encostei nos vizinhos e nao sao eles. O
     `--acento-fundo-medio` esta a 15 de distancia do `--acento-fundo-forte`,
     e o `--alerta-linha-suave` a 50 do `--alerta-linha`: encostar teria
     mudado a tela clara, que e exatamente o que esta migracao nao pode
     fazer. O `comparar_pixels.py` pegou os dois. */
  --acento-fundo-medio:  #e7e2f2;
  --alerta-linha-suave:  #f0dede;

  /* Os quatro ultimos tons soltos do produto, achados pela
     `sonda_cor_crua.py`. Nascem com o hexadecimal exato que estava na regra:
     esta migracao nao inventa cor. */
  --papel-neutro:        #f1f1f2;
  --alerta-fundo-claro:  #fdf2f2;
  --atencao-fundo-claro: #fff8ec;
  --alerta-linha-media:  #dd8888;
  --alerta-fundo-suave:  #fdecea;
  --atencao-fundo-forte: #fbeed3;

  /* --- BOTAO de acao com peso (confirmar e apagar) ----------------------- */
  --ok-botao:            #2e7d5b;
  --ok-botao-claro:      #45a377;
  --ok-botao-escuro:     #276a4d;
  --alerta-botao:        #d06a50;
  --alerta-botao-escuro: #983a26;
  --alerta-forte:        #b4232b;


  /* --- O triplo RGB de sombra e brilho -----------------------------------
     Sem parenteses de proposito: `rgba(var(--rgb-tinta), .08)` deixa a
     transparencia na regra, que e onde ela varia, e a cor no token, que e
     onde ela precisa acompanhar o tema.

     A SOMBRA ROXA FOI UNIFICADA. Ela estava escrita com oito triplos
     ligeiramente diferentes (24,16,46 / 20,14,40 / 30,20,60 / 20,10,50 /
     17,12,30 / 26,20,45 / 20,16,30 / 16,10,34), todos querendo dizer a mesma
     coisa. Vinte e duas ocorrencias foram unificadas, e o custo foi MEDIDO
     pelo `comparar_pixels.py`, nao suposto: 728 pixels de diferenca numa
     unica tela (a do setor), com desvio maximo de 1 em 255. As outras nove
     telas ficaram em zero ou dentro do piso de ruido delas.

     Um em 255 e imperceptivel, e era a pergunta: unificar sombra e decisao
     de desenho, e decisao de desenho que muda a tela sem alguem ver e o tipo
     de coisa que este repositorio ja pagou caro. */
  --rgb-papel:          255, 255, 255;
  --rgb-tinta:          28, 28, 31;
  --rgb-preto:          0, 0, 0;
  --rgb-sombra:         24, 16, 46;
  --rgb-acento:         76, 40, 130;
  --rgb-acento-escuro:  58, 30, 102;
  --rgb-alerta:         180, 71, 46;
  --rgb-alerta-forte:   179, 38, 30;
  --rgb-alerta-escuro:  109, 40, 24;
  --rgb-atencao:        209, 131, 15;
  --rgb-atencao-escuro: 92, 63, 11;
  --rgb-ok-escuro:      23, 64, 42;

  --raio:      10px;
  --raio-mini: 6px;

  /* --- Movimento ---------------------------------------------------------
     Os três tempos abaixo são os que o projeto JÁ usa mais no style.css
     (.15s, .2s e .3s, nessa ordem de frequência). Existiam sem nome; aqui
     ganham um. A curva é a mesma do padrão do sistema. */
  --mov-rapido: .15s;
  --mov-base:   .2s;
  --mov-lento:  .32s;
  --mov-curva:  cubic-bezier(.22, 1, .36, 1);
}

/* ===========================================================================
   Elementos comuns aos três layouts
   =========================================================================== */

.lab-tela {
  font-family: var(--fonte);
  color: var(--tinta-media);
  font-size: var(--txt-base);
  -webkit-font-smoothing: antialiased;
}

/* Número grande. `tabular-nums` é o detalhe que faz diferença: sem ele, o
   valor "11" ocupa menos largura que "88" e a linha inteira se mexe quando
   o dado atualiza. */
.lab-num {
  font-family: var(--fonte-titulo);
  font-size: var(--num-grande);
  font-weight: 700;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.lab-num--medio { font-size: var(--num-medio); }
.lab-num--alerta { color: var(--alerta); }

/* O ROTULO E MONOESPACADO desde 22/08/2026. Ele e sempre curto, sempre em
   caixa alta e sempre acompanha um numero: a mono deixa claro que ali e
   etiqueta de dado, e nao texto que se le. */
.lab-rotulo {
  font-family: var(--fonte-dado);
  font-size: var(--txt-micro);
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* ===========================================================================
   Onde cada fonte vale, no produto inteiro
   ===========================================================================

   A primeira leva pegou só `.lab-num` e `.lab-rotulo`, e o efeito foi que o
   painel mudou de cara e o resto das telas continuou igual: em Minhas
   Tarefas, Clientes, Certificados e companhia, só o título da barra branca
   trocava. O dono viu na hora.

   A regra é a mesma de antes, agora aplicada onde ela faltava:

     · ARCHIVO no que é TÍTULO. Cabeçalho de tela, de cartão e de bloco.
     · INTER no que é TEXTO. Continua sendo o corpo de tudo, e não muda.
     · MONO no que é DADO. CNPJ, código de ERP, contagem, porcentagem,
       fração. É a fonte que diz "isto aqui é um valor, não uma frase" — e é
       o que faltava para as telas de lista parecerem do mesmo produto que o
       painel.

   Os seletores são de CLASSES COMPARTILHADAS. Nenhuma tela ganhou regra
   própria: se uma delas precisar de exceção, ela pede uma linha na folha
   dela, não uma cópia disto.
   =========================================================================== */

/* TODO CONTROLE HERDA A FONTE DA PÁGINA. O navegador dá a `input`, `select`,
   `textarea` e `button` uma fonte própria do sistema, e ela só não aparecia
   porque quase todos já tinham `font-family` escrito à mão em algum lugar.
   Uma auditoria em 22 telas achou onze que escaparam: caixas de seleção,
   campos ocultos e botões só de ícone. Nenhum deles mostra texto hoje, então
   não havia defeito para ver — havia defeito esperando o dia em que alguém
   puser uma palavra dentro de um deles.

   `inherit` e não `var(--fonte)`: assim um controle dentro de um bloco que
   trocou de fonte acompanha o bloco, em vez de voltar ao corpo. */
.lab-tela input,
.lab-tela select,
.lab-tela textarea,
.lab-tela button {
  font-family: inherit;
}

.lab-tela h1,
.lab-tela h2,
.lab-tela h3 {
  font-family: var(--fonte-titulo);
  letter-spacing: -.012em;
}

/* O NOME DA COISA na lista é título dela: nome de empresa, de obrigação, de
   pessoa, de bloco. Em Archivo eles ganham o mesmo peso que os títulos de
   cartão, e a lista para de ser um bloco uniforme de Inter. */
.mzb-nome,
.lista-nome,
.exp-nome,
.pnl-bloco-nome,
.lem-obr-nome,
.pen-gente-nome,
.usr-check-nome,
.pop-item-titulo,
.mod-secao-titulo,
.pd-titulo,
.pl-guia-titulo,
.pen-gente-titulo,
.pen-titulo,
.doc-empresa,
.lem-empresa,
.lem-obr,
.avi-grupo-titulo,
.avi-conta {
  font-family: var(--fonte-titulo);
  letter-spacing: -.01em;
}

/* E O DADO EM MONO. `tabular-nums` junto: sem ele o "11" ocupa menos largura
   que o "88" e a coluna dança quando o valor muda. */
.mzc-id,
.mzb-sub,
.mz-conta,
.mz-pct,
.mzb-inicial {
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.lab-unidade {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-mini);
  font-weight: 600;
  color: var(--tinta-fraca);
  margin-left: 3px;
}

/* O ponto de status: 6px é o suficiente para ser visto e pequeno o
   bastante para não virar o assunto da tela. */
.lab-ponto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neutro-ponto);
  flex-shrink: 0;
  display: inline-block;
}
.lab-ponto--alerta  { background: var(--alerta); }
.lab-ponto--atencao { background: var(--atencao); }
.lab-ponto--ok      { background: var(--ok); }

/* Barra de proporção. Fundo neutro sempre; só o preenchimento é que muda de
   cor, e mesmo assim em tom fechado. */
.lab-barra {
  height: 4px;
  border-radius: 2px;
  background: var(--linha);
  overflow: hidden;
}
.lab-barra i {
  display: block;
  height: 100%;
  background: var(--acento);
  border-radius: 2px;
  transition: width var(--mov-lento) var(--mov-curva);
}
.lab-barra i.e-alerta  { background: var(--alerta); }
.lab-barra i.e-atencao { background: var(--atencao); }
.lab-barra i.e-ok      { background: var(--ok); }

.lab-vazio {
  color: var(--tinta-fraca);
  font-size: var(--txt-mini);
  padding: var(--e5) var(--e3);
  text-align: center;
}

/* ===========================================================================
   Barra de utilidades — sininho, mensagens, lembretes, notas, usuário
   ===========================================================================
   Ver `_utilidades.html`. Os layouts de moldura própria perderam esses ícones
   ao trocar a barra roxa por menu lateral; aqui eles voltam.
   =========================================================================== */

.ut { display: flex; align-items: center; gap: 2px; }

.ut-icone {
  position: relative;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--tinta-fraca);
  text-decoration: none;
  font-size: 16px;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease;
  /* Três destes ícones são <button> e dois são <a>. Sem zerar a moldura
     padrão do navegador, os botões vinham com borda e fundo cinza e os
     links não — era o "quadrado em volta" que aparecia só em alguns. */
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ut-icone:hover { background: var(--papel-sutil); color: var(--acento); }
/* Foco por teclado continua marcado — tirar a moldura do mouse não pode
   apagar a de quem navega sem ele. */
.ut-icone:focus { outline: none; }
.ut-icone:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* O selo fica no canto e NÃO empurra o ícone: `position:absolute` com o
   ícone `relative`. Assim a barra não muda de largura quando chega
   notificação, que é o tipo de salto que assusta quem está clicando. */
.ut-selo {
  position: absolute;
  top: 1px; right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--alerta);
  color: var(--papel);
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ut-selo--laranja { background: var(--laranja, #f7941d); }

.ut-risco { width: 1px; height: 18px; background: var(--linha); margin: 0 6px; }

.ut-usuario {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--mov-rapido) ease;
}
.ut-usuario:hover { background: var(--papel-sutil); }
.ut-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--papel);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* A variante com FOTO. `object-fit: cover` porque foto de perfil quase nunca
   é quadrada, e sem isto ela entra esticada — um rosto achatado no canto da
   barra é pior do que a inicial que estava lá antes. */
.ut-avatar--foto { object-fit: cover; background: var(--linha); }
.ut-nome { font-size: var(--txt-mini); font-weight: 600; color: var(--tinta-media); }
@media (max-width: 700px) { .ut-nome { display: none; } }

/* ---------------------------------------------------------------------------
   O MENU DA CONTA — desce DA BARRA, não flutua perto dela.

   A diferença não é de gosto. Um cartão solto, com cantos redondos e sombra
   por todos os lados, lê como "uma janela apareceu por cima". Este painel
   nasce colado na borda inferior do cabeçalho, herda o papel dele e continua
   o mesmo filete: lê como "a barra cresceu para baixo". É a mesma ideia da
   trilha lateral — a moldura é uma peça só, não um monte de caixas.

   COMO ELE SE ANCORA. O pai posicionado é o `.b-topo`, que já é `sticky` —
   `sticky` cria bloco de contenção, então `top: 100%` cai exatamente na borda
   de baixo dele, seja qual for a altura do botão. Ancorar no botão exigiria
   adivinhar a folga com um `calc()`, e ela mudaria junto com o `padding` do
   cabeçalho.

   Por isso `.ut-conta` NÃO pode ser `position: relative`: seria ele o bloco
   de contenção, e o painel voltaria a pendurar no botão.
   --------------------------------------------------------------------------- */
.ut-conta { position: static; }

.ut-usuario {
  /* O gatilho é <button>: zera o que o navegador põe num botão. */
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.ut-seta {
  font-size: 10px;
  color: var(--tinta-fraca);
  transition: transform var(--mov-rapido, 140ms) ease;
}
.ut-usuario[aria-expanded="true"] { background: var(--papel-sutil); }
.ut-usuario[aria-expanded="true"] .ut-seta { transform: rotate(180deg); }

.ut-menu {
  position: absolute;
  top: 100%;
  /* Alinha pela mesma folga lateral do cabeçalho (`padding: 10px var(--e5)`),
     então a borda direita do painel cai na borda direita do conteúdo. */
  right: var(--e5);
  /* -1px COME o filete de baixo da barra. Sem isto sobra uma linha dupla no
     encontro — a borda da barra mais a borda do painel — e é justamente ela
     que denuncia que são duas peças. */
  margin-top: -1px;
  z-index: 20;

  min-width: 212px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-top-color: transparent;   /* o topo é a barra, não uma borda nova */
  /* Só os cantos de baixo: os de cima estão encostados na barra. */
  border-radius: 0 0 var(--raio) var(--raio);
  /* Sombra só para BAIXO. Uma sombra em volta faria o painel parecer solto no
     ar; assim ele apenas cobre o conteúdo por onde passa. */
  box-shadow: 0 10px 24px -8px rgba(var(--rgb-sombra), .18);
  padding: var(--e1) 0;
  overflow: hidden;

  animation: ut-desce var(--mov-rapido, 140ms) ease-out;
}
/* Nasce "de dentro" da barra: sobe 6px e desce. Curto de propósito — menu que
   demora a abrir dá a impressão de sistema lento. */
@keyframes ut-desce {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ut-menu { animation: none; }
  .ut-seta { transition: none; }
}

.ut-menu a {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 9px var(--e3);
  font-size: var(--txt-mini);
  color: var(--tinta-media);
  text-decoration: none;
  transition: background var(--mov-rapido, 140ms) ease;
}
.ut-menu a i { font-size: 14px; color: var(--tinta-fraca); width: 16px; }
.ut-menu a:hover { background: var(--papel-sutil); color: var(--tinta); }
.ut-menu a:hover i { color: var(--acento); }
.ut-menu-risco { height: 1px; background: var(--linha); margin: var(--e1) 0; }

/* O PÉ faz o papel do rodapé, que o layout B não tem.

   SUAVE POR FALTA DE ESTRUTURA, não por falta de contraste. A primeira versão
   tinha fundo rebaixado e filete no topo — virava um rodapé dentro do menu,
   com peso visual de seção. Tirando os dois, sobra uma linha quieta de texto,
   que é o que ela deve ser.

   A COR NÃO BAIXA MAIS QUE ISTO. `--tinta-fraca` sobre papel já está em ~3,4:1,
   abaixo do mínimo de leitura para texto pequeno; clarear tornaria "Termos" e
   "Privacidade" difíceis de ler — e são links que, por serem o contrato e a
   política de dados, precisam estar legíveis. Suavidade se ganha com espaço e
   tamanho, não apagando a tinta. */
.ut-menu-pe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px var(--e3) 9px;
  font-size: 10px;
  color: var(--tinta-fraca);
}
/* Os separadores somem quase de vez: só as PALAVRAS precisam ser lidas, e é a
   pontuação que enchia a linha. */
.ut-menu-pe > span { color: var(--linha-forte); }
.ut-menu-pe a {
  display: inline;            /* anula o flex dos itens do menu acima */
  padding: 0;
  font-size: inherit;
  font-weight: 400;
  color: var(--tinta-fraca);
}
/* O laranja da logo, no único lugar do menu onde ele cabe: um toque no hover.
   É o que o token descreve — "o roxo diz aqui é ação, o laranja diz aqui é
   Tarefix". */
.ut-menu-pe a:hover { color: var(--laranja-forte); background: none; text-decoration: underline; }

/* O PONTO DE "TEM VERSÃO NOVA" — 5px de laranja, e nada mais.

   Vive SÓ dentro do menu, ao lado de "Novidades". Houve uma versão com um
   ponto também no gatilho (é o que a produção faz), e ela saiu: a barra do
   layout B fica na tela o dia inteiro, e uma marca laranja permanente nela
   contraria o que este layout foi feito para resolver.

   SEM PULSO, também ao contrário da produção — lá a bolinha late num halo que
   expande. Aqui a regra da casa é "cor é sinal, não decoração": um ponto de
   5px já é o idioma que este layout usa para dizer "olhe aqui", e animação
   infinita numa interface de trabalho vira ruído que se aprende a ignorar. */
.ut-novo {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--laranja);
  pointer-events: none;
}
.ut-novo--linha {
  display: inline-block;
  margin-left: auto;          /* empurra para a direita do item */
}

/* ===========================================================================
   Calendário compacto (visualização rápida do mês)
   ===========================================================================
   Grade de 7 colunas montada à mão — ver `_calendario_mini.html`. Não usa o
   FullCalendar: ele traz ~90 KB, impõe o próprio HTML e a própria folha, e
   brigaria com a densidade destes layouts.
   =========================================================================== */

.cal { font-size: var(--txt-micro); }

.cal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  margin-bottom: var(--e2);
}
.cal-mes {
  font-size: var(--txt-mini);
  font-weight: 700;
  color: var(--tinta);
  text-transform: capitalize;
}
.cal-nav {
  border: none;
  background: none;
  color: var(--tinta-fraca);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--raio-mini);
  font-size: 12px;
  line-height: 1;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease;
}
.cal-nav:hover { background: var(--papel-sutil); color: var(--acento); }

.cal-semana,
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); }

.cal-semana span {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
  padding-bottom: 4px;
}

.cal-grade { gap: 1px; }

/* A célula reserva o espaço do ponto SEMPRE (o `i` só é criado quando há
   tarefa). Sem essa reserva, a linha inteira muda de altura quando os dados
   chegam e a grade "pula" na frente de quem está olhando. */
.cal-dia {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--raio-mini);
  color: var(--tinta-media);
  position: relative;
  transition: background var(--mov-rapido) ease;
}
.cal-dia b { font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.cal-dia .lab-ponto { width: 4px; height: 4px; }
.cal-dia::after { content: ''; display: block; height: 4px; }
.cal-dia .lab-ponto ~ ::after,
.cal-dia.tem::after { display: none; }
.cal-dia.tem { color: var(--tinta); font-weight: 600; cursor: default; }
.cal-dia.tem:hover { background: var(--papel-sutil); }

/* CONTORNO NO DIA QUE TEM COISA.
   O ponto sozinho era discreto demais: 4px num mês de 31 células é a menor
   marca da tela, e quem bate o olho de longe não distingue dia cheio de dia
   vazio. O contorno dá ao dia INTEIRO a cor do pior item que há ali dentro —
   a mesma escala do ponto, só que legível a um metro de distância.

   É `box-shadow: inset`, não `border`: a grade tem 31 células de 1px de gap e
   `aspect-ratio: 1`, e uma borda de verdade mudaria a caixa e faria o mês
   inteiro se remexer quando os dados chegam. A sombra não ocupa espaço.

   O fundo é o tom suave da paleta, não uma cor nova. E o grau 0 (dia com
   coisa, mas sem urgência conhecida) fica em cinza de linha: existe, marca
   presença, e não compete com quem está vencido. */
.cal-dia.e-grau-3 { box-shadow: inset 0 0 0 1px var(--alerta);        background: var(--alerta-suave); }
.cal-dia.e-grau-2,
.cal-dia.e-grau-1 { box-shadow: inset 0 0 0 1px var(--atencao-marca); background: var(--atencao-suave); }
.cal-dia.e-grau-0 { box-shadow: inset 0 0 0 1px var(--linha-forte); }

/* O hover mantém o contorno e só escurece o miolo — sem isto o `background`
   do hover apagaria o tom do grau justamente quando a pessoa mira o dia. */
.cal-dia.e-grau-3:hover { background: color-mix(in srgb, var(--alerta) 14%, var(--papel)); }
.cal-dia.e-grau-2:hover,
.cal-dia.e-grau-1:hover { background: color-mix(in srgb, var(--atencao-marca) 16%, var(--papel)); }

/* HOJE continua roxo e ganha o contorno do grau por cima: os dois fatos são
   independentes ("é hoje" e "tem coisa vencida"), e apagar um para mostrar o
   outro esconderia metade da informação no dia que mais importa. */
.cal-dia.e-hoje.e-grau-3 { background: var(--alerta-suave); color: var(--alerta); }
.cal-dia.e-hoje.e-grau-2,
.cal-dia.e-hoje.e-grau-1 { background: var(--atencao-suave); color: var(--atencao); }
.cal-dia.e-hoje {
  background: var(--acento-fundo);
  color: var(--acento);
  font-weight: 700;
}

.cal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin-top: var(--e3);
  padding-top: var(--e2);
  border-top: 1px solid var(--linha);
  font-size: 10px;
  color: var(--tinta-fraca);
}
.cal-legenda span { display: inline-flex; align-items: center; gap: 4px; }
.cal-legenda .lab-ponto { width: 5px; height: 5px; }

/* ===========================================================================
   Janelinha (<dialog> nativo)
   ===========================================================================
   Ver `_popup.html`. O ::backdrop é o fundo escurecido que o navegador
   desenha sozinho — dá para estilizar, então o desfoque sai sem gambiarra
   de div extra.
   =========================================================================== */

/* ATENÇÃO ao `display`. A mesma armadilha do <dialog> vale para o popover:
   o navegador esconde o popover fechado com regra própria, e um `display`
   solto na classe vence essa regra — resultado, a janela fica visível na
   página depois de fechada. Por isso o display mora no `:popover-open`.

   `position: fixed` + `margin: 0` + `inset: auto`: sem isso o popover nasce
   centralizado pelo navegador e o cálculo de posição não tem efeito. */
.pop {
  position: fixed;
  margin: 0;
  inset: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0;
  width: min(420px, calc(100vw - 24px));
  /* O TETO SUBIU DE `min(70vh, 560px)` quando o Painel de Controle ganhou a
     sexta linha e a janelinha passou a rolar. Um menu de seis itens curtos
     que rola é um menu que esconde a última opção justamente de quem ainda
     não sabe que ela existe — e foi assim que Preferências nasceu invisível.
     78vh continua deixando a janela claramente menor que a tela (ela é um
     painel ao lado do ícone, não um modal), e o teto em pixels acompanha. */
  max-height: min(78vh, 620px);
  box-shadow: 0 18px 48px -12px rgba(var(--rgb-sombra), .28);
  color: var(--tinta-media);
  font-family: var(--fonte);
  font-size: var(--txt-base);
  overflow: hidden;
}
.pop:popover-open { display: flex; flex-direction: column; }

/* Sem fundo escurecido: a janela é um painel do lado do ícone, não um modal
   que sequestra a tela. O ::backdrop existe, mas fica transparente. */
.pop::backdrop { background: transparent; }

/* --- Janela CENTRALIZADA -------------------------------------------------
   Ancorar no clique só faz sentido para a barra do topo, onde a janela é o
   desdobramento daquele ícone e a pessoa precisa ver de onde veio.

   Para um dia do calendário ou um número da tira, ancorar atrapalha: a
   janela nasce em qualquer canto da tela conforme onde a pessoa clicou, e
   quem lê nunca sabe onde ela vai aparecer. Conteúdo é conteúdo — vai ao
   centro, com o fundo escurecido.

   O centro sai da propriedade `translate`, e NÃO de `transform`, de
   propósito: no layout B o Motion anima o `transform` na abertura, e se o
   deslocamento do centro estivesse ali a animação o apagaria e a janela
   pularia para o canto. São propriedades independentes. */
.pop--centro { left: 50%; top: 50%; translate: -50% -50%; }
.pop--centro::backdrop {
  background: rgba(var(--rgb-sombra), .38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Janela LARGA para conteúdo de lista longa (as atrasadas). */
.pop--largo { width: min(560px, calc(100vw - 24px)); }

/* A BARRA DE TÍTULO É UMA ETIQUETA, NÃO UM CABEÇALHO.
   Ela tinha 59px de altura — quase um sexto da janela gasto para dizer uma
   frase — e um fundo a 4,5% de preto, que sobre branco dá #f4f4f4 contra os
   #fafafa da página: perto demais para o olho separar as duas superfícies, e
   aí a janela parecia um pedaço da tela em vez de uma coisa por cima dela.

   Três ajustes pequenos, na mesma direção:
   · folga menor (16/24px → 10/18px);
   · título no tamanho do corpo, mantendo o negrito — o que faz um título é o
     peso, não o corpo da letra;
   · fundo de 4,5% para 7,5% e o filete de baixo no cinza forte. Continua uma
     etiqueta discreta, mas agora se distingue da página sem virar faixa
     colorida. */
.pop-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: 10px var(--e4) 10px 18px;
  /* Os mesmos 10% dos outros dois cabeçalhos (`dashboard-b.css` e
     `formulario.css`), e não os 7,5% de antes. Três cabeçalhos com três
     intensidades era a mesma pergunta com três respostas conforme a tela. */
  /* 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);
  border-bottom: 1px solid var(--linha-forte);
  flex-shrink: 0;
}
.pop-titulo {
  margin: 0;
  font-size: var(--txt-base);
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.01em;
}
/* O X manda na altura da barra: ele é mais alto que o título, então encolher
   só a folga do topo não adiantava — a barra parava em 47px porque o botão
   media 26. Menor, ela fecha em ~40, e o alvo de clique continua confortável
   (21px de área, mais a folga de 10px em volta). */
.pop-fechar {
  border: none;
  background: none;
  color: var(--tinta-fraca);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px;
  border-radius: var(--raio-mini);
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease;
}
.pop-fechar:hover { background: var(--papel-sutil); color: var(--tinta); }

/* O corpo acompanha a folga lateral do topo (18px), senão o título fica
   recuado em relação ao conteúdo que ele nomeia. */
/* `overscroll-behavior: contain` para a rolagem PARAR no fim da lista em vez
   de continuar na pagina atras. Sem isso, chegar ao ultimo item e girar mais
   um pouco a roda rolava o documento, e a janela ancorada se fecha quando a
   pagina rola (`_popup.html`) — a pessoa perdia a lista tentando ver o fim
   dela. */
.pop-corpo {
  padding: var(--e3) 18px var(--e4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------------
   A BARRA DE ROLAGEM DE QUEM ROLA DENTRO DE UMA CAIXA.

   A do sistema tem quase 17px e ainda desenha duas setas nas pontas. Numa
   janelinha de 380px ela come 5% da largura e é a coisa mais escura da tela,
   competindo com os nomes que a lista existe para mostrar.

   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 DAS CAIXAS. A barra do documento inteiro fica como está: mexer
   nela mudaria toda página do sistema, e não é disso que se trata.

   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 — e nestas listas
   (dezenove empresas num dia, cem linhas num arquivo do portal) saber que há
   mais coisa é metade da informação.

   A REGRA VIVE AQUI, num lugar só, e não colada em cada caixa que rola. Ela
   nasceu na gaveta de notas rápidas e já ia virar a terceira cópia. Caixa
   nova que role entra nesta lista, e não escreve a sua. */
.pop-corpo,
.doc-rolagem,
.pl-rolagem,
.pl-falta-lista,
.lote-senhas,
.exp-corpo,
.b-card--fila > .b-card-corpo,
.b-card--demandas > .b-card-corpo {
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
.pop-corpo::-webkit-scrollbar,
.doc-rolagem::-webkit-scrollbar,
.pl-rolagem::-webkit-scrollbar,
.pl-falta-lista::-webkit-scrollbar,
.lote-senhas::-webkit-scrollbar,
.exp-corpo::-webkit-scrollbar,
.b-card--fila > .b-card-corpo::-webkit-scrollbar,
.b-card--demandas > .b-card-corpo::-webkit-scrollbar { width: 6px; height: 6px; }

.pop-corpo::-webkit-scrollbar-track,
.doc-rolagem::-webkit-scrollbar-track,
.pl-rolagem::-webkit-scrollbar-track,
.pl-falta-lista::-webkit-scrollbar-track,
.lote-senhas::-webkit-scrollbar-track,
.exp-corpo::-webkit-scrollbar-track,
.b-card--fila > .b-card-corpo::-webkit-scrollbar-track,
.b-card--demandas > .b-card-corpo::-webkit-scrollbar-track { background: transparent; }

.pop-corpo::-webkit-scrollbar-thumb,
.doc-rolagem::-webkit-scrollbar-thumb,
.pl-rolagem::-webkit-scrollbar-thumb,
.pl-falta-lista::-webkit-scrollbar-thumb,
.lote-senhas::-webkit-scrollbar-thumb,
.exp-corpo::-webkit-scrollbar-thumb,
.b-card--fila > .b-card-corpo::-webkit-scrollbar-thumb,
.b-card--demandas > .b-card-corpo::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border-radius: 999px;
}
.pop-corpo::-webkit-scrollbar-thumb:hover,
.doc-rolagem::-webkit-scrollbar-thumb:hover,
.pl-rolagem::-webkit-scrollbar-thumb:hover,
.pl-falta-lista::-webkit-scrollbar-thumb:hover,
.lote-senhas::-webkit-scrollbar-thumb:hover,
.exp-corpo::-webkit-scrollbar-thumb:hover,
.b-card--fila > .b-card-corpo::-webkit-scrollbar-thumb:hover,
.b-card--demandas > .b-card-corpo::-webkit-scrollbar-thumb:hover { background: var(--tinta-fraca); }

/* As setinhas das pontas somem: existem para rolar de uma em uma, gesto que
   ninguém usa numa lista curta, e são metade da grossura da barra. */
.pop-corpo::-webkit-scrollbar-button,
.doc-rolagem::-webkit-scrollbar-button,
.pl-rolagem::-webkit-scrollbar-button,
.pl-falta-lista::-webkit-scrollbar-button,
.lote-senhas::-webkit-scrollbar-button,
.exp-corpo::-webkit-scrollbar-button,
.b-card--fila > .b-card-corpo::-webkit-scrollbar-button,
.b-card--demandas > .b-card-corpo::-webkit-scrollbar-button { display: none; }

/* O CANTINHO onde as duas barras se encontram, nas caixas que rolam nos dois
   eixos (a tabela do lote). Sem isto ele fica um quadrado cinza do sistema. */
.doc-rolagem::-webkit-scrollbar-corner,
.pl-rolagem::-webkit-scrollbar-corner { background: transparent; }

.pop-item {
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linha);
}
.pop-item:last-child { border-bottom: none; }
.pop-item-titulo { color: var(--tinta); font-weight: 600; }
.pop-item-sub { font-size: var(--txt-mini); color: var(--tinta-fraca); margin-top: 2px; }

/* A CIFRA À DIREITA DO TÍTULO — a fração e a porcentagem de "onde a
   competência está presa".

   `flex` no título e `margin-left: auto` na cifra: assim ela encosta na
   borda direita seja qual for o tamanho do nome da obrigação, e nomes longos
   ("Declaração de Substituição Tributária") não a empurram para fora.

   `tabular-nums` para os números ficarem alinhados de uma linha para a
   outra. Numa lista ordenada por taxa, algarismo dançando na vertical
   atrapalha justamente a comparação que a lista existe para permitir.

   `white-space: nowrap` porque "6/38 · 16%" quebrado ao meio deixa de ser
   uma cifra e vira duas. */
.pop-item-titulo { display: flex; align-items: baseline; gap: 8px; }
.pop-cifra {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--txt-mini);
  font-weight: 700;
  color: var(--tinta-fraca);
}
/* O AVISO É UM ALVO DE DUAS LINHAS, e o realce precisa ser do tamanho dele.
   Antes só o título mudava de cor: o mouse podia estar sobre a segunda linha
   — a que traz tarefa, cliente e mês — sem nada acender, e a linha inteira
   não parecia clicável. Agora responde o bloco todo.

   A SANGRIA de 10px devolvida como `padding` é o que faz o realce envolver o
   texto em vez de encostar nele: o corpo da janelinha tem 18px de folga
   lateral, e um fundo que começasse na primeira letra pareceria um erro de
   alinhamento. */
.pop-item--link {
  display: block;
  position: relative;
  text-decoration: none;
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: var(--raio-mini, 6px);
  transition: background var(--mov-rapido, .15s) ease;
}
/* O FILETE cresce da esquerda, e é o que diferencia "passei o mouse por cima"
   de "este é o item". Fundo sozinho, numa lista de avisos parecidos, some
   quando há dois seguidos. */
.pop-item--link::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--acento);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--mov-rapido, .15s) ease;
}
.pop-item--link:hover { background: var(--acento-fundo); }
.pop-item--link:hover::before { transform: scaleY(1); }
.pop-item--link:hover .pop-item-titulo { color: var(--acento); }
/* Quem chega por teclado precisa do mesmo sinal — e do anel, que o hover não
   dá porque o mouse já diz onde está. */
.pop-item--link:focus-visible {
  background: var(--acento-fundo);
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.pop-item--link:focus-visible::before { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .pop-item--link, .pop-item--link::before { transition: none; }
}

/* Grupo dentro da janelinha -- usado pelas Mensagens, que juntam duas
   origens (marcacoes e suporte) e precisam dizer qual e qual. */
.pop-grupo { margin-bottom: var(--e3); }
.pop-grupo:last-of-type { margin-bottom: 0; }
.pop-grupo-rotulo {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 4px;
}
.pop-vazio { font-size: var(--txt-mini); color: var(--tinta-fraca); padding: var(--e3) 0; margin: 0; }

/* --- Filtro de setor dentro da janelinha ---------------------------------- */
/* ---------------------------------------------------------------------------
   O FILTRO DE SETOR: uma linha por setor.

   Era uma fileira de pílulas, e o nome do setor mandava na largura do
   controle: com "FISCAL - SANTOS" ao lado de "PESSOAL", cada escolha
   remontava as fileiras e o bloco mudava de forma a cada clique. O
   selecionado, pintado de roxo sólido, deixava metade da janela roxa.

   Na lista toda linha tem a mesma altura e começa no mesmo ponto, então o
   olho desce reto e o nome comprido não mexe em nada. E ela cresce sem
   desarrumar: com vinte setores vira uma lista que rola.
   --------------------------------------------------------------------------- */
.pop-lst-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding-bottom: var(--e2);
  margin-bottom: var(--e1);
  border-bottom: 1px solid var(--linha);
}
.pop-lst-conta { font-size: var(--txt-micro); color: var(--tinta-fraca); }
.pop-lst-todos {
  border: 0;
  background: none;
  padding: 2px 4px;
  margin: -2px -4px;
  font: inherit;
  font-size: var(--txt-micro);
  font-weight: 600;
  color: var(--acento);
  cursor: pointer;
  border-radius: 4px;
}
.pop-lst-todos:hover { background: var(--acento-fundo); }
.pop-lst-todos:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* O "?" fica ENTRE a contagem e o "selecionar todos", encostado no que ele
   explica. `margin-right: auto` empurra o resto para a direita e mantém o
   par contagem + ajuda junto, à esquerda. */
.pop-lst-ajuda {
  flex: none;
  margin-right: auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta-fraca);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease,
              border-color var(--mov-rapido) ease;
}
.pop-lst-ajuda:hover,
.pop-lst-ajuda.ativo { background: var(--acento); border-color: var(--acento); color: var(--papel); }
.pop-lst-ajuda:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* `overflow: hidden` porque a abertura anima a ALTURA: sem ele o texto
   escaparia da caixa enquanto ela cresce. Em repouso não recorta nada, já
   que a altura é automática. E `box-sizing` para a altura medida incluir a
   borda e o respiro, senão o último quadro fica alguns pixels curto e o
   texto dá um pulinho no fim. */
.pop-lst-explica {
  margin: 0 0 var(--e2);
  padding: var(--e2) 10px;
  border-radius: 8px;
  background: var(--acento-fundo);
  border: 1px solid var(--acento-linha);
  overflow: hidden;
  box-sizing: border-box;
}
.pop-lst-explica p { margin: 0 0 5px; font-size: var(--txt-micro); color: var(--tinta-media); }
.pop-lst-explica p:last-child { margin-bottom: 0; }
.pop-lst-explica b { color: var(--tinta); }

/* TETO DE ALTURA, e não a lista inteira: a janela já tem o seu (`.pop`), mas
   sem este a lista empurraria os botões para fora dela num escritório com
   muitos setores, e o Aplicar sumiria justamente de quem mais precisa
   filtrar. */
.pop-lst { max-height: 232px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.pop-lst-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  transition: background var(--mov-rapido) ease;
}
.pop-lst-item:hover { background: var(--acento-fundo); }
.pop-lst-item:focus-within { background: var(--acento-fundo); }

/* `appearance: none` não resolve aqui porque a caixa nativa continua sendo
   quem recebe o clique do <label>: ela fica escondida e este quadradinho é
   só o desenho. É o mesmo arranjo das pílulas antigas. */
.pop-lst-caixa {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--linha-forte);
  background: var(--papel);
  display: grid;
  place-items: center;
  transition: background var(--mov-rapido) ease, border-color var(--mov-rapido) ease;
}
.pop-lst-caixa::after {
  content: '';
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-left: 2px solid var(--papel);
  border-bottom: 2px solid var(--papel);
  transform: rotate(-45deg) scale(.4);
  opacity: 0;
  transition: opacity var(--mov-rapido) ease, transform var(--mov-rapido) ease;
}
.pop-lst-item.ativo .pop-lst-caixa { background: var(--acento); border-color: var(--acento); }
.pop-lst-item.ativo .pop-lst-caixa::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.pop-lst-nome {
  flex: 1;
  min-width: 0;
  font-size: var(--txt-mini);
  font-weight: 600;
  color: var(--tinta-media);
}
.pop-lst-item.ativo .pop-lst-nome { color: var(--tinta); }

/* "Só este" aparece com o mouse na linha. Ele existe o tempo todo no
   documento (só invisível) para o teclado alcançá-lo: `display: none` o
   tiraria da ordem de tabulação. */
.pop-lst-so {
  flex: none;
  border: 0;
  background: none;
  padding: 2px 6px;
  border-radius: 4px;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acento);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--mov-rapido) ease, background var(--mov-rapido) ease;
}
.pop-lst-item:hover .pop-lst-so,
.pop-lst-so:focus-visible { opacity: 1; }
.pop-lst-so:hover { background: var(--acento-fundo); }

/* O rodapé: filete e botões CENTRADOS. Alinhados à esquerda eles brigavam
   com a lista, que também começa na esquerda, e a janela terminava com dois
   blocos de peso parecido disputando o mesmo eixo. */
.pop-lst-pe { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); }
.pop-lst-pe .pop-acoes { justify-content: center; }
.pop-lst-pe .pop-nota { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pop-lst-item, .pop-lst-caixa, .pop-lst-caixa::after, .pop-lst-so { transition: none; }
}

/* A caixa de marcar de VERDADE fica escondida: quem responde pelo estado é
   ela (o `idsMarcados` lê os checkboxes), e quem o mostra é o quadradinho
   desenhado ao lado. Duas caixas visíveis para o mesmo estado confundiriam. */
.pop-lst-item input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

.pop-acoes { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pop-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-mini);
  background: var(--papel);
  color: var(--tinta-media);
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--mov-base) ease, color var(--mov-base) ease;
}
.pop-btn:hover { border-color: var(--acento); color: var(--acento); }
.pop-btn:disabled { opacity: .5; cursor: default; }
.pop-btn--forte { background: var(--acento); border-color: var(--acento); color: var(--papel); }
.pop-btn--forte:hover { filter: brightness(1.1); color: var(--papel); }
.pop-btn .bi-star-fill { color: var(--laranja, #f7941d); }

/* A ETIQUETA DE SETOR no cabeçalho da obrigação (Fila de Trabalho).

   Discreta de propósito: ela responde "de quem é isto" e não pode competir
   com o nome da obrigação, que é o assunto da linha.

   O `flex-shrink: 0` NÃO É ZELO. Quem empurra a contagem para a direita é o
   `flex: 1` do `.exp-nome` — não há `margin-left: auto` nenhum aqui. Sem
   travar o encolhimento, a etiqueta entraria na disputa por espaço com o
   nome e sairia cortada no meio de uma palavra em nome de obrigação longo. */
.exp-setor {
  font-size: var(--txt-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  background: var(--papel-sutil);
  border: 1px solid var(--linha);
  padding: 1px 7px;
  border-radius: var(--raio-mini);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- O SETOR na janelinha "Atrasadas" -------------------------------------
   Só aparece quando há mais de um setor na lista; com um só, o nível a mais
   seria uma caixa envolvendo tudo.

   É A MESMA FORMA DA FAIXA DE URGÊNCIA da Fila de Trabalho
   (`.b-faixa-topo`/`.b-faixa-nome`/`.b-faixa-conta`): caixa alta miúda à
   esquerda, contagem em pastilha à direita, filete embaixo. As duas listas
   mostram as mesmas tarefas agrupadas por eixos diferentes — dar formas
   diferentes ao mesmo papel faria a pessoa achar que são coisas distintas.

   TUDO EM TOKEN, nenhum hexadecimal: é o que faz o modo noturno acompanhar
   sem uma linha a mais. */
.pop-setor + .pop-setor { margin-top: var(--e3); }
.pop-setor-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;
}
.pop-setor-nome {
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.pop-setor-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;
}
/* ---------------------------------------------------------------------------
   O CABEÇALHO DO SETOR RECOLHE (janelinha "Conclusão").

   Ele é `summary` LÁ e continua `div` nas Atrasadas, e por isso todo seletor
   desta seção cita o elemento: `cursor: pointer` num cabeçalho que não clica
   promete um gesto que não existe, e é o tipo de coisa que se descobre
   clicando e não acontecendo nada.

   O NOME EMPURRA O RESTO (`margin-right: auto`) em vez de o contentor
   distribuir. Com a seta na frente, o `justify-content: space-between` que
   servia a dois filhos passa a ter três e joga o nome para o MEIO da faixa,
   solto entre a seta e a taxa.
   --------------------------------------------------------------------------- */
.pop-setor-nome { margin-right: auto; }

summary.pop-setor-topo {
  cursor: pointer;
  list-style: none;                 /* tira o triângulo padrão (Firefox) */
  -webkit-user-select: none;
  user-select: none;
  border-radius: var(--raio-mini, 6px);
  transition: background var(--mov-rapido, .15s) ease;
}
summary.pop-setor-topo::-webkit-details-marker { display: none; }   /* WebKit */
summary.pop-setor-topo:hover { background: var(--acento-fundo); }
summary.pop-setor-topo:hover .pop-setor-nome { color: var(--acento); }
summary.pop-setor-topo:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* `display: inline-block` NÃO é enfeite: `transform` não se aplica a elemento
   inline não substituído, e a seta é um `<i>`. Sem isto ela simplesmente não
   gira, e não há erro nenhum para explicar por quê. */
.pop-setor-seta {
  display: inline-block;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--tinta-fraca);
  transition: transform var(--mov-base) var(--mov-curva);
}
details.pop-setor[open] > summary > .pop-setor-seta { transform: rotate(90deg); }

/* A SETA VOLTA NO PRIMEIRO QUADRO DO FECHAMENTO, e não no último.
   Quem fecha mantém `open` verdadeiro durante a animação — é o que deixa o
   conteúdo visível para ele deslizar —, então a regra `[open]` acima ainda
   valeria e a seta ficaria apontando para baixo até o bloco já ter sumido. */
details.pop-setor.e-fechando > summary > .pop-setor-seta,
.exp.e-fechando > .exp-topo > .exp-seta { transform: none; }


.pop-nota { font-size: 10px; color: var(--tinta-fraca); margin: var(--e2) 0 0; }
.pop-ok   { font-size: var(--txt-micro); font-weight: 600; color: var(--ok); }
.pop-erro { font-size: var(--txt-micro); font-weight: 600; color: var(--alerta); }

.pop-rodape {
  display: block;
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--linha);
  font-size: var(--txt-mini);
  font-weight: 600;
  color: var(--acento);
  text-decoration: none;
}
.pop-rodape:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   O TUTORIAL DE PRIMEIRO ACESSO (`_tutorial.html`, `tarefas/tutorial.py`)
   ---------------------------------------------------------------------------
   Mora AQUI, e não numa folha de tela, porque a moldura o inclui em toda
   página do produto — e a folha que toda página carrega é esta. Só tokens:
   o bloco `:root[data-tema="escuro"]` redefine cada um, e o tema escuro vem
   de graça. Os botões são próprios (`.tut-btn`) e não `.b-btn`: aquele mora
   no `dashboard-b.css`, que nem toda tela carrega. */

/* O item da janelinha e o alvo da ação, apontados pelo passo atual. */
.pop-item--link.e-tutorial { background: var(--acento-fundo); }
.pop-item--link.e-tutorial::before { transform: scaleY(1); }
.pop-item--link.e-tutorial .pop-item-titulo { color: var(--acento); }
.b-btn.e-tutorial,
.tut-alvo.e-tutorial {
  box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--acento);
}

/* As boas-vindas: uma camada fixa que centraliza a caixa. A caixa reusa a
   casca do `dialogo.css` (`.lab-dlg`), mas o elemento NÃO é um `<dialog>`:
   o fundo escuro vem do FOCO (abaixo), que deixa o ícone do Painel de
   Controle iluminado. Sem foco (`e-com-foco` ausente), a camada escurece
   sozinha. O z-index é alto porque a camada precisa cobrir a trilha (30),
   o cartão-guia (40) e qualquer janelinha aberta. */
.tut-bv {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(var(--rgb-sombra), .55);
}
.tut-bv[hidden] { display: none; }
.tut-bv.e-com-foco { background: transparent; }
.tut-bv .lab-dlg { position: relative; z-index: 2; margin: 0; }
/* O foco: transparente por dentro, e a sombra de 100vmax pinta todo o resto
   da tela. Fica ABAIXO da caixa e ACIMA da trilha, e recebe o clique de
   propósito: o ícone é para ser visto, não aberto por baixo das boas-vindas.
   O anel é o mesmo pulso do ícone aceso pelo guia. */
.tut-bv-foco {
  position: fixed;
  z-index: 1;
  border-radius: var(--raio-mini);
  box-shadow: 0 0 0 100vmax rgba(var(--rgb-sombra), .62);
  pointer-events: auto;
}
.tut-bv-foco[hidden] { display: none; }
.tut-bv-foco::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--laranja);
}
.tut-bv-foco::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--laranja);
  animation: tut-pulso 1.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tut-bv-foco::after { display: none; }
}
.tut-dlg-onde {
  display: flex;
  gap: var(--e2);
  align-items: flex-start;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--raio-mini);
  border: 1px solid var(--linha);
  background: var(--papel-sutil);
  font-size: var(--txt-mini);
  line-height: 1.5;
  color: var(--tinta-media);
}
.tut-dlg-onde[hidden] { display: none; }
.tut-dlg-onde i { color: var(--laranja); font-size: 15px; margin-top: 1px; }
.tut-dlg-onde b { color: var(--tinta); }

/* O diálogo de boas-vindas: a casca é a do `dialogo.css`; aqui só o corpo. */
.tut-dlg { width: min(560px, calc(100vw - 32px)); }
.tut-dlg-corpo {
  display: grid;
  gap: var(--e3);
  padding: var(--e5) var(--e5) var(--e4);
  max-height: 62vh;
  overflow: auto;
}
.tut-dlg-texto {
  margin: 0;
  font-size: var(--txt-mini);
  line-height: 1.6;
  color: var(--tinta-media);
}
/* NUMERADA porque É uma sequência: a ordem é o caminho que o painel ensina. */
.tut-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tut;
  display: grid;
  gap: 6px;
}
.tut-lista {
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.tut-lista li {
  display: flex;
  align-items: center;
  gap: var(--e2);
  counter-increment: tut;
  font-size: var(--txt-mini);
  line-height: 1.5;
  color: var(--tinta-media);
}
@media (max-width: 480px) { .tut-lista { grid-template-columns: 1fr; } }
.tut-lista li::before {
  content: counter(tut);
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--acento-fundo);
  color: var(--acento);
  font-size: var(--txt-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tut-lista li i { color: var(--acento); }
.tut-lista li b { color: var(--tinta); }

/* O véu: escurece a página por um instante quando o cartão-guia aparece.
   Fica ABAIXO do cartão (39 < 40) e não recebe clique; a animação sobe,
   segura e desce sozinha, e o script o esconde pelo relógio. Sem
   `prefers-reduced-motion` o script nem o mostra. */
.tut-veu {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(var(--rgb-sombra), .55);
  pointer-events: none;
  animation: tut-veu 1.6s ease-in-out both;
}
.tut-veu[hidden] { display: none; }
@keyframes tut-veu {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { opacity: 0; }
}
.tut-guia.e-entrando { animation: tut-entra .55s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes tut-entra {
  from { transform: translateY(14px) scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* O cartão-guia: fixo no canto inferior ESQUERDO, colado à trilha (56px).
   Era no direito, e o direito é onde todo formulário do produto põe
   "Cancelar" e "Salvar": o cartão cobria o botão de gravar. À esquerda o que
   há embaixo é conteúdo que rola, nunca uma ação. `z-index` abaixo da camada
   de topo dos `<dialog>` e popovers, que não têm número: qualquer janelinha
   aberta fica por cima dele. */
.tut-guia {
  position: fixed;
  left: calc(56px + 18px);
  bottom: 18px;
  z-index: 40;
  width: min(360px, calc(100vw - 24px));
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--acento);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 12px 32px rgba(var(--rgb-sombra), .18);
  font-size: var(--txt-mini);
}
.tut-guia.e-compacto { width: min(300px, calc(100vw - 24px)); }
/* No telefone a trilha vira barra no topo, e o canto esquerdo é só a borda. */
@media (max-width: 700px) {
  .tut-guia, .tut-guia.e-compacto { left: 12px; right: 12px; width: auto; }
}
/* RECOLHIDO: fica a linha do passo, com o nome ao lado do número, e a
   setinha vira "abrir". O resto some por `display`, não por altura, porque
   aqui não há o que animar: é um gesto de tirar da frente. */
.tut-guia.e-recolhido > :not(.tut-guia-topo) { display: none; }
.tut-guia.e-recolhido { width: auto; max-width: min(360px, calc(100vw - 24px)); padding: 10px 14px; }
.tut-guia-topo-nome { display: none; font-weight: 700; color: var(--tinta); }
.tut-guia.e-recolhido .tut-guia-topo-nome { display: inline; }
.tut-guia.e-recolhido .tut-guia-num::after { content: ' ·'; }
.tut-guia-min {
  margin-left: auto;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--raio-mini);
  background: none;
  color: var(--tinta-fraca);
  font-size: 13px;
  cursor: pointer;
}
.tut-guia-min:hover { background: var(--papel-sutil); color: var(--tinta); }
.tut-guia-min i { transition: transform var(--mov-rapido) ease; }
.tut-guia.e-recolhido .tut-guia-min i { transform: rotate(180deg); }
/* A LINHA DO TOPO É A PEGA: o cartão se arrasta por ela (pedido do dono), e
   o lugar fica lembrado na sessão. `touch-action: none` para o dedo não
   rolar a página enquanto arrasta. */
.tut-guia-topo { display: flex; align-items: center; gap: var(--e2); cursor: grab; touch-action: none; user-select: none; }
.tut-guia.e-arrastando { transition: none; }
.tut-guia.e-arrastando .tut-guia-topo { cursor: grabbing; }

/* O CAMPO EM FOCO na explicação campo a campo: o mesmo anel do alvo da ação,
   posto no campo (ou no bloco, quando o "campo" é um conjunto de opções). */
.e-tutorial-campo {
  box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--acento) !important;
  border-radius: var(--raio-mini);
}
.tut-guia-campo-num {
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.tut-guia-num {
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acento);
}
.tut-guia-feito {
  margin-left: auto;
  font-size: var(--txt-micro);
  font-weight: 700;
  color: var(--ok);
}
.tut-guia-feito + .tut-guia-min { margin-left: 0; }
.tut-guia-nome {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--txt-base);
  font-weight: 700;
}
.tut-guia-nome i { color: var(--acento); }
.tut-guia-frase { margin: 0; line-height: 1.55; color: var(--tinta-media); }
.tut-guia-ex {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--raio-mini);
  background: var(--papel-sutil);
  font-size: var(--txt-micro);
  line-height: 1.5;
  color: var(--tinta-media);
}
.tut-guia-ex b { color: var(--tinta); font-weight: 700; }
.tut-guia-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e1);
}
.tut-guia-dica { flex-basis: 100%; font-size: var(--txt-micro); color: var(--tinta-fraca); }
.tut-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-mini);
  background: var(--papel);
  color: var(--tinta-media);
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease,
              border-color var(--mov-rapido) ease;
}
.tut-btn:hover { background: var(--papel-sutil); color: var(--tinta); }
.tut-btn.e-forte { border-color: transparent; background: var(--acento); color: var(--papel); }
.tut-btn.e-forte:hover { background: var(--roxo-escuro, #3b1f66); }
/* Desativado por COR, não por `opacity`: opacidade em texto é falha de
   contraste que a sonda não vê (lição do tema claro). */
.tut-btn:disabled {
  background: var(--papel-sutil);
  border-color: var(--linha);
  color: var(--tinta-fraca);
  cursor: not-allowed;
}
.tut-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* O pé: Voltar e Sair, os dois como texto. Voltar não é botão cheio porque
   não é o caminho principal; e não some, porque tutorial só para a frente
   obriga a sair e refazer para reler um passo. */
.tut-guia-pe { display: flex; gap: var(--e4); align-items: center; }
.tut-guia-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--txt-micro);
  color: var(--tinta-fraca);
  text-decoration: underline;
  cursor: pointer;
}
.tut-guia-link:hover { color: var(--tinta); }
.tut-guia-link i { font-size: 15px; line-height: 1; }
@media print { .tut-guia { display: none; } }

/* ---------------------------------------------------------------------------
   Expandir (<details>/<summary> nativo)
   ---------------------------------------------------------------------------
   Nome da obrigação + quantas empresas; clicou, abre a lista das empresas.
   O navegador cuida do estado, do teclado e do leitor de tela — um acordeão
   à mão seria mais código para fazer pior.
   --------------------------------------------------------------------------- */

.exp { border-bottom: 1px solid var(--linha); }
.exp:last-of-type { border-bottom: none; }

.exp-topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e2);
  cursor: pointer;
  list-style: none;          /* tira o triângulo padrão (Firefox) */
  border-radius: var(--raio-mini);
  transition: background var(--mov-rapido) ease;
}
.exp-topo::-webkit-details-marker { display: none; }   /* idem (WebKit) */

/* ---------------------------------------------------------------------------
   UM REALCE SÓ PARA TODA LINHA CLICÁVEL DE JANELINHA.

   O popup de um dia do calendário mostra três coisas que se clicam: o grupo
   de uma obrigação, cada empresa dentro dele e cada pendência. Cada uma
   nasceu numa época e ganhou o seu — cinza aqui, lilás ali, nome roxo em uma
   e não na outra. Lado a lado, no MESMO dia, isso lê como se fossem coisas de
   naturezas diferentes; e não são: as três levam a algum lugar.

   O desenho escolhido é o mesmo dos avisos (`.pop-item--link`): fundo lilás
   na faixa toda e um filete crescendo da esquerda. Vale a pena repetir por
   que o filete existe — fundo sozinho some quando há duas linhas parecidas
   seguidas, e é justamente esse o caso aqui.

   ESTÁ NUM BLOCO SÓ, com os três seletores, e não copiado três vezes: foi a
   cópia que deixou os três divergirem em primeiro lugar.
   --------------------------------------------------------------------------- */
.exp-topo,
.exp-linha--link,
.pop-item.lem-linha-item {
  position: relative;
  border-radius: var(--raio-mini, 6px);
  transition: background var(--mov-rapido, .15s) ease;
}
/* A sangria devolvida como recuo faz o fundo envolver o texto em vez de
   encostar nele. Os dois recuos são diferentes porque as linhas moram em
   caixas com folgas diferentes: a da pendência é filha direta do corpo da
   janelinha (18px), a da empresa mora dentro do expansor. */
/* OS DOIS TÍTULOS DE PRIMEIRO NÍVEL COMEÇAM NA MESMA COLUNA.
   O grupo de uma obrigação tem a setinha do expansor antes do nome; a
   pendência não tem nada. Lado a lado no mesmo dia, um começava um dedo à
   frente do outro e a lista parecia torta — sem que nada explicasse por quê.
   A pendência ganha o recuo da seta (largura + a folga que a separa do
   texto), calculado e não chutado, para acompanhar se a seta mudar. */
.pop-item.lem-linha-item {
  margin: 0 -10px;
  padding-left: calc(10px + 11px + var(--e2));
  padding-right: 10px;
}
.pop-item.lem-linha-item::before { left: 10px; }

.exp-linha--link { margin: 0 -6px; padding-left: 6px; padding-right: 6px; }

.exp-topo::before,
.pop-item.lem-linha-item::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--acento);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--mov-rapido, .15s) ease;
}

.exp-topo:hover,
.exp-linha--link:hover,
.pop-item.lem-linha-item:hover,
.exp-linha--link:focus-visible,
.pop-item.lem-linha-item:focus-within { background: var(--acento-fundo); }

.exp-topo:hover::before,
.pop-item.lem-linha-item:hover::before,
.pop-item.lem-linha-item:focus-within::before { transform: scaleY(1); }

/* A LINHA DA EMPRESA NÃO LEVA FILETE, e é a única das três sem ele.
   Ela é FILHA do grupo: já nasce recuada, e o filete cairia rente à primeira
   letra do nome — encostando nela, não ao lado. Aqui quem diz "isto leva a
   algum lugar" é a seta que aparece à direita, que as outras duas não têm. */

/* O texto que nomeia a linha acompanha. Com a faixa acesa o sublinhado sai:
   dois sinais para o mesmo estado é ruído, e era ele que fazia a linha
   "piscar" ao passar o mouse. */
.exp-topo:hover .exp-nome,
.exp-linha--link:hover .exp-empresa,
.exp-linha--link:focus-visible .exp-empresa { color: var(--acento); }
.pop-item.lem-linha-item:hover .lem-abrir { color: var(--acento); text-decoration: none; }
/* A linha inteira leva à conversa (ver o ouvinte no `_calendario_mini.html`):
   o cursor diz isso onde houver para onde ir. */
.pop-item.lem-linha-item:has(.lem-abrir) { cursor: pointer; }
.exp-nome, .exp-empresa { transition: color var(--mov-rapido, .15s) ease; }

@media (prefers-reduced-motion: reduce) {
  .exp-topo, .exp-linha--link, .pop-item.lem-linha-item,
  .exp-topo::before, .pop-item.lem-linha-item::before {
    transition: none;
  }
}

.exp-seta {
  color: var(--tinta-fraca);
  font-size: 11px;
  flex-shrink: 0;
  transition: transform var(--mov-base) var(--mov-curva);
}
.exp[open] > .exp-topo > .exp-seta { transform: rotate(90deg); }

.exp-nome {
  flex: 1;
  min-width: 0;
  color: var(--tinta);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exp-conta {
  font-size: var(--txt-micro);
  font-weight: 700;
  color: var(--tinta-media);
  background: var(--papel-sutil);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.exp-corpo { padding: 0 var(--e2) var(--e3) var(--e5); }
.exp-linha {
  display: flex;
  align-items: center;
  gap: var(--e2);
  /* A sangria devolvida como recuo faz o fundo do hover ENVOLVER o texto em
     vez de encostar nele. Mesmos 6px do `.exp-linha--link`, para as duas
     linhas ficarem na mesma coluna quando aparecem na mesma janelinha. */
  margin: 0 -6px;
  padding: 5px 6px;
  border-radius: var(--raio-mini, 6px);
  font-size: var(--txt-mini);
  transition: background var(--mov-rapido, .15s) ease;
}
/* A LINHA REAGE AO MOUSE, e antes daqui ela não reagia: a lista de empresas
   dentro de um grupo era texto impresso. Numa janelinha com 25 nomes, sem
   realce é fácil ler o prazo da linha de cima achando que é o da de baixo.

   SÓ FUNDO E COR DO NOME, sem filete à esquerda. O filete existe nas linhas de
   PRIMEIRO nível (o grupo da obrigação, a pendência); aqui ele cairia rente à
   primeira letra, e dentro do card da fila seria o terceiro traço vertical no
   mesmo lugar, competindo com o da faixa de urgência. */
.exp-linha:hover { background: var(--acento-fundo); }
.exp-linha:hover .exp-empresa { color: var(--acento); }

/* --- O MARCADOR DA LINHA --------------------------------------------------
   Era um disco cheio de 6px, e em vinte e cinco linhas seguidas ele pesava
   mais que os nomes. Vira um CHEVRON, e a troca não é só de peso: a linha
   LEVA à tarefa, e o chevron diz isso antes do clique — coisa que um ponto
   nunca disse.

   A COR CONTINUA SIGNIFICANDO O MESMO: vermelha para o atraso longo, âmbar
   para o curto. Só muda o desenho que a carrega.

   ESCOPADO A `.exp-linha`, e é o que impede o estrago: `.lab-ponto` também é
   o pontinho dentro das células do calendário e o da legenda, e ali ele
   precisa continuar sendo um ponto — naquele quadriculado ele é marca de
   densidade, não marcador de linha.

   O glifo vem da fonte do Bootstrap Icons pelo codepoint, como o `.b-metrica`
   já faz: assim nenhum dos seis templates que desenham esta linha precisa
   trocar de marcação. */
.exp-linha > .lab-ponto {
  width: 11px;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--tinta-fraca);
  font-family: 'bootstrap-icons';
  font-size: 11px;
  line-height: 1;
  text-align: center;
  opacity: .55;
  transition: opacity var(--mov-rapido, .15s) ease,
              transform var(--mov-base, .22s) var(--mov-curva, cubic-bezier(.2,.7,.3,1));
}
.exp-linha > .lab-ponto::before { content: '\F285'; }   /* bi-chevron-right */
.exp-linha > .lab-ponto--alerta  { color: var(--alerta); }
.exp-linha > .lab-ponto--atencao { color: var(--atencao); }
.exp-linha:hover > .lab-ponto { opacity: 1; transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .exp-linha, .exp-linha > .lab-ponto { transition: none; }
  .exp-linha:hover > .lab-ponto { transform: none; }
}
.exp-empresa { flex: 1; min-width: 0; color: var(--tinta-media); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-meta { color: var(--tinta-fraca); font-size: var(--txt-micro); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Aviso: qualquer coisa clicável precisa parecer clicável. Sem isto, o
   usuário não descobre que o dia do calendário abre a lista. */
.e-clicavel { cursor: pointer; }

/* ===========================================================================
   Entrada ao rolar
   ===========================================================================
   O elemento nasce deslocado e opaco; o JS (IntersectionObserver, em
   lab_movimento.js) só acrescenta a classe `.aparece` quando ele entra na
   tela. É o efeito do site de referência, sem biblioteca.

   Os dois estados moram aqui e não no JS de propósito: se o JS falhar ou
   demorar, o conteúdo precisa aparecer assim mesmo. Por isso o fallback
   `.sem-js` — ver o <noscript> nos templates.
   =========================================================================== */

.lab-entra {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--mov-lento) var(--mov-curva),
              transform var(--mov-lento) var(--mov-curva);
}
.lab-entra.aparece { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Quem pediu menos movimento no sistema operacional recebe o conteúdo
     pronto, sem transição nenhuma. O projeto já respeita isso em 8 arquivos;
     aqui não seria diferente. */
  .lab-entra { opacity: 1; transform: none; transition: none; }
  .lab-barra i { transition: none; }
}


/* ===========================================================================
   Notas rápidas (dentro da janelinha)
   =========================================================================== */

.nt-form { margin-bottom: 6px; }
.nt-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-mini);
  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;
}
.nt-input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }

.nt-dica {
  font-size: var(--txt-micro);
  color: var(--tinta-fraca);
  text-align: center;
  margin: 0 0 var(--e3);
}
.nt-dica i { margin-right: 3px; }

.nt-item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 7px 4px;
  border-bottom: 1px solid var(--linha);
}
.nt-item:last-child { border-bottom: none; }

.nt-check {
  width: 17px; height: 17px;
  flex-shrink: 0;
  border: 1.5px solid var(--linha-forte);
  border-radius: 5px;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--papel);
  padding: 0;
  transition: background var(--mov-rapido) ease, border-color var(--mov-rapido) ease;
}
.nt-check:hover { border-color: var(--acento); }
.nt-item.feita .nt-check { background: var(--ok); border-color: var(--ok); }

.nt-texto { flex: 1; min-width: 0; color: var(--tinta); word-break: break-word; }
/* Concluída fica riscada e apagada — some do caminho sem sumir da lista. */
.nt-item.feita .nt-texto { text-decoration: line-through; color: var(--tinta-fraca); }

/* O TEXTO DA NOTA ABERTA SE CORRIGE NO LUGAR, clicando nele. O cursor é a
   única pista, e basta: a linha inteira mostra `grab`, então a mudança para
   `text` bem em cima das palavras diz onde o clique escreve e onde ele
   arrasta. Um lápis ali seria um terceiro botão numa fileira que já tem dois.
   Concluída não convida — ela também não abre. */
.nt-item:not(.feita) .nt-texto { cursor: text; }

/* O CAMPO TEM DE PARECER A LINHA, não um formulário que apareceu: a nota não
   sai do lugar nem muda de altura ao abrir para edição, senão a lista pula
   embaixo do cursor. Daí zerar borda e fundo e herdar a fonte — o que muda é
   só o filete de baixo, que diz "isto agora aceita digitação". */
.nt-editar {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--tinta);
  background: none;
  border: none;
  border-bottom: 1px solid var(--acento);
  border-radius: 0;
  padding: 0 0 1px;
  margin: 0;
  outline: none;
}

.nt-apagar {
  border: none;
  background: none;
  color: var(--linha-forte);
  cursor: pointer;
  padding: 3px 4px;
  font-size: 11px;
  flex-shrink: 0;
  transition: color var(--mov-rapido) ease;
}
.nt-apagar:hover { color: var(--alerta); }


/* ===========================================================================
   Notas rápidas — gaveta que entra pela esquerda
   ===========================================================================
   Igual à do sistema de hoje (`.notas-painel`, style.css): encostada na
   borda esquerda, altura inteira, deslizando para dentro. Rascunho pessoal
   não é uma janelinha de aviso — é um bloco de notas ao lado da tela, e a
   pessoa escreve várias seguidas.

   Continua sendo `popover`, então vem de graça: fechar clicando fora,
   fechar no Esc, e camada de topo (passa por cima do menu lateral).

   A animação exige `allow-discrete` e `@starting-style` porque o popover
   alterna `display: none`, e sem isso o navegador pula direto para o estado
   final — a gaveta apareceria de uma vez, sem deslizar. Onde o navegador
   não suportar, ela simplesmente aparece: perde o deslize, não a função.
   =========================================================================== */

.ntp {
  position: fixed;
  inset: 0 auto 0 0;              /* topo, base e esquerda coladas */
  margin: 0;
  width: min(340px, 86vw);
  /* Altura explícita porque o navegador aplica `height: fit-content` a todo
     popover, e com isso a gaveta parava na altura do conteúdo (uma caixinha
     de 230px encostada no canto) em vez de ir do topo à base. */
  height: 100vh;
  max-height: none;
  border: none;
  border-right: 1px solid var(--linha);
  border-radius: 0;
  padding: 0;
  background: var(--papel);
  color: var(--tinta-media);
  font-family: var(--fonte);
  font-size: var(--txt-base);
  box-shadow: 0 0 40px rgba(var(--rgb-sombra), .18);
  transform: translateX(-100%);
  transition: transform var(--mov-lento, .32s) var(--mov-curva),
              overlay var(--mov-lento, .32s) allow-discrete,
              display var(--mov-lento, .32s) allow-discrete;
}
.ntp:popover-open { display: flex; flex-direction: column; transform: translateX(0); }
@starting-style { .ntp:popover-open { transform: translateX(-100%); } }

.ntp::backdrop {
  background: rgba(var(--rgb-sombra), .3);
  opacity: 0;
  transition: opacity var(--mov-lento, .32s) ease,
              overlay var(--mov-lento, .32s) allow-discrete,
              display var(--mov-lento, .32s) allow-discrete;
}
.ntp:popover-open::backdrop { opacity: 1; }
@starting-style { .ntp:popover-open::backdrop { opacity: 0; } }

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

/* O ESQUELETO acaba aqui. A aparência de dentro (topo, campo, linhas) é
   própria de cada layout e mora no CSS dele — `dashboard-b.css` e
   `dashboard-c.css`. Layout que aposta em espaço não pode ter a mesma gaveta
   de um que aposta em densidade; seria comparar dois layouts com uma peça
   emprestada de fora dos dois. */

/* ===========================================================================
   Trilha de navegação — a barra lateral fina, só de ícones
   ===========================================================================
   Compartilhada pelos layouts B e C. Estava dentro do `dashboard-c.css` com
   nome `.c-*` enquanto era só do C; virou peça dos dois, e nome que diz
   "isto é do layout C" numa peça usada por dois layouts é o tipo de mentira
   que só se descobre mexendo.

   56px é o mínimo confortável para um alvo de clique de 40px com folga.
   =========================================================================== */
/* --- Trilha de ícones ------------------------------------------------------
   56px é o mínimo confortável para um alvo de clique de 40px com folga.
   O rótulo aparece num balão no hover — mantém a densidade sem transformar
   a navegação em adivinhação de ícone. */
.nav-trilha {
  background: var(--nav-fundo);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--e3) 0;
  gap: var(--e1);
  position: sticky;
  top: 0;
  height: 100vh;
  /* O balão de rótulo do ícone SAI da largura da trilha e invade o conteúdo.
     Sem z-index aqui, a trilha (position:sticky) cria um contexto de
     empilhamento que fica ABAIXO dos painéis, e o balão aparece atrás de
     tudo — o z-index de 20 no ::after não resolve, porque ele só ordena
     dentro do contexto da própria trilha. Quem precisa subir é a trilha. */
  z-index: 30;
}
/* Sem caixa e sem filtro: quem resolve o contraste aqui é o ARQUIVO. A
   trilha usa o "ícone 01", a variante da marca para fundo escuro — ver a
   nota no `_nav_trilha.html`. */
.nav-marca { margin-bottom: var(--e4); }
.nav-marca img { width: 26px; height: auto; display: block; }

.nav-icone {
  position: relative;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-mini);
  color: rgba(var(--rgb-papel), .5);
  text-decoration: none;
  font-size: 15px;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease;
}
.nav-icone:hover { background: rgba(var(--rgb-papel), .1); color: var(--nav-tinta); }
/* O botão de notas é <button>, não <a>: precisa zerar o visual de botão. */
.nav-icone { border: none; background: none; font-family: inherit; cursor: pointer; }
.nav-icone.ativo { background: var(--acento); color: var(--papel); }

/* --- O TUTORIAL DE PRIMEIRO ACESSO ACENDE UM ÍCONE --------------------------
   Anel laranja que pulsa. Laranja porque é a cor que a trilha já usa para
   "olhe aqui" (`.ut-selo--laranja`) e porque a trilha é escura nos dois temas:
   o roxo do acento sumiria nela. O pulso é um `::before` que cresce e some,
   não uma sombra animada — sombra animada repinta a trilha inteira a cada
   quadro. Com `prefers-reduced-motion` o pulso sai e o anel fica parado: o
   sinal continua, só não se mexe. A classe vem do servidor
   (`_nav_trilha.html`) e, no celular, do script do `_tutorial.html` para o
   botão de "mais" quando o ícone aceso está dentro da gaveta. */
.nav-icone.e-tutorial,
.nav-mais.e-tutorial {
  position: relative;
  color: var(--nav-tinta);
  box-shadow: 0 0 0 2px var(--laranja);
}
.nav-icone.e-tutorial::before,
.nav-mais.e-tutorial::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--laranja);
  pointer-events: none;
  animation: tut-pulso 1.6s ease-out infinite;
}
@keyframes tut-pulso {
  from { transform: scale(1);   opacity: .9; }
  to   { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-icone.e-tutorial::before,
  .nav-mais.e-tutorial::before { display: none; }
}

/* --- O ASTRO DO MODO NOTURNO -----------------------------------------------
   Um ícone só, que se transforma. Dois ícones trocando de lugar contam que
   houve uma troca; um que vira o outro conta O QUE mudou.

   COMO A LUA APARECE: não há segundo desenho. A mordida é uma bolha preta
   dentro de uma `<mask>`, estacionada fora do disco enquanto é sol. Ao
   escurecer ela desliza para cima do disco e recorta a crescente. O sol, ao
   mesmo tempo, recolhe os raios girando -45° e encolhendo até o centro.

   SÓ `transform` E `opacity`, as duas propriedades que o navegador resolve na
   placa de vídeo sem recalcular layout. Animar `r`, `cx` ou `width` faria o
   mesmo desenho custando um reflow por quadro.

   `transform-box: view-box` é obrigatório aqui: sem ele o `transform-origin`
   de um elemento SVG conta a partir da origem do documento, e o `rotate` dos
   raios giraria em torno do canto da tela em vez do centro do astro.

   A CURVA É A MESMA DO PINO da matriz (`cubic-bezier(.34, 1.4, .5, 1)`, que
   passa de 1 no meio e por isso dá o quique). Um produto com duas curvas de
   mola diferentes parece dois produtos. */
.tema-botao .tema-astro {
  width: 18px;
  height: 18px;
  display: block;
  /* Os raios encostam na borda do viewBox; sem isto o anti-serrilhado corta
     a ponta deles. */
  overflow: visible;
}
.tema-corpo {
  fill: currentColor;
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform .5s cubic-bezier(.34, 1.4, .5, 1);
}
.tema-mordida-bolha {
  transform-box: view-box;
  transform-origin: 12px 12px;
  /* Estacionada longe: a esta distância ela não encosta no disco, e o sol é
     um disco inteiro. */
  transform: translate(8px, -8px);
  transition: transform .5s cubic-bezier(.34, 1.4, .5, 1);
}
.tema-raios {
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform .5s cubic-bezier(.34, 1.4, .5, 1),
              opacity .28s ease;
}

:root[data-tema="escuro"] .tema-mordida-bolha { transform: translate(0, 0); }
/* A lua fica um pouco maior que o sol: sem os raios, um disco do mesmo
   tamanho parece ter encolhido. */
:root[data-tema="escuro"] .tema-corpo { transform: scale(1.18); }
:root[data-tema="escuro"] .tema-raios {
  transform: rotate(-45deg) scale(.35);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tema-corpo, .tema-mordida-bolha, .tema-raios { transition: none; }
}

/* --- A ONDA DA TROCA DE TEMA ------------------------------------------------
   O navegador fotografa a tela antes e depois da mudança e empilha as duas. A
   nova fica INTEIRA embaixo; a antiga, por cima, se abre num círculo que nasce
   no centro do botão.

   POR QUE A ANTIGA É QUE ABRE, e não a nova que cresce. Foi a segunda
   construção, e ela é melhor por dois motivos:

     · a foto NOVA nunca é recortada, então nenhuma falha de desenho pode
       produzir um pedaço de tela sem conteúdo (foi exatamente esse o primeiro
       defeito: um vazio fora do círculo);
     · uma máscara de gradiente ESFUMAÇA a borda, o que um `clip-path` não faz.

   A BORDA ESFUMAÇADA É O CONSERTO PRINCIPAL, e o motivo é medido. A transição
   real roda a ~30 quadros por segundo (a foto de tela inteira é cara de
   recortar; medido: 23 quadros em 580ms, com falhas de até 66ms). Numa borda
   NÍTIDA a essa taxa, o olho persegue a linha e vê os degraus — 176 pixels de
   salto no pico da curva anterior. Não lê como movimento, lê como piscada.
   Uma borda de 110px de degradê não tem linha para perseguir: o mesmo salto
   deixa de ser visível. É como o cinema sempre escondeu taxa de quadros
   baixa.

   A CURVA É RETA, e agora por um motivo aritmético. Toda cauda macia obriga a
   correr no meio para cobrir a mesma distância no mesmo tempo — medido, o
   pico sobe para 1,5 a 1,9 vezes a média, e é justamente o pico que vira
   salto. A reta vale 1,00 por definição. Com 950ms, o pior salto cai para
   ~76px por quadro, contra os 176px de antes.

   `mix-blend-mode: normal` corrige o padrão `plus-lighter`, que serve ao
   esmaecimento cruzado e sujaria a borda do degradê.

   AS QUATRO PEÇAS DECLARAM A MESMA DURAÇÃO — o grupo, o par e as duas fotos.
   Isto não é arrumação: as animações padrão do navegador duram 250ms, e são
   elas que mantêm a transição viva. Uma peça mais curta encerra a festa cedo,
   e o resto da tela aparece de uma vez. */

/* --- O CROMO DO NAVEGADOR, e por que ele tem atributo PRÓPRIO -------------
   `color-scheme` decide a cor do que NÃO é desenhado por esta folha: a barra
   de rolagem, a lista que abre num `<select>`, o calendário de um campo de
   data. Sem declarar, o navegador desenha tudo isso claro — um retângulo
   branco que salta no meio da tela escura no instante do clique.

   ELE NÃO PODE SEGUIR O `data-tema`, e a razão é a onda. A barra de rolagem
   fica FORA da foto da transição: ela é do navegador, não da página. Presa ao
   `data-tema`, ela trocava de cor no primeiro instante do clique — a barra já
   escura ao lado de uma tela ainda clara, enquanto a onda levava quase um
   segundo para chegar.

   Daí o `data-cromo`, gêmeo do `data-tema` e atrasado de propósito: o
   servidor estampa os dois iguais, e o JavaScript só move este quando a onda
   TERMINA. O cromo do navegador vira junto com o último pedaço da tela, e não
   antes dela.

   O preço, e ele é pequeno: durante a onda, um `<select>` já revelado ainda
   aparece com o cromo antigo, porque a foto foi tirada antes. São poucos
   controles nativos por tela, e eles se acertam no mesmo instante em que a
   barra vira. A barra de rolagem está em TODA tela, o tempo inteiro. */
/* Dentro de `@media screen` pelo mesmo motivo dos tokens: na impressão o
   `color-scheme` não deve dizer "escuro", senão o navegador desenha os
   controles nativos da prévia de impressão com cromo escuro sobre a folha
   branca. Fora da tela, o padrão do navegador é o certo. */
@media screen {
  :root[data-cromo="claro"] { color-scheme: light; }
  :root[data-cromo="escuro"] { color-scheme: dark; }
}

/* A posição da frente da onda. Precisa ser REGISTRADA: sem o `@property` o
   navegador trata uma variável como texto, e texto não interpola — a
   animação saltaria de 0 ao fim, sem quadros no meio. */
@property --onda-p {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* A ONDA É ESCOPADA POR `.e-onda-tema`, e isso deixou de ser detalhe.
   Estas regras falam de `::view-transition-*(root)`, que é o nome do
   instantâneo da PÁGINA INTEIRA — e ele é o mesmo para uma transição de tema e
   para uma transição de NAVEGAÇÃO. Enquanto só o tema usava a API, não havia
   com quem colidir. Quando o BackOffice ligou o `@view-transition` de
   navegação, sem escopo cada clique num link passaria a rodar a onda de 950ms
   com o círculo no meio da tela: um limpa-vidros em vez de uma troca de
   página. A classe é posta pelo `_botao_tema.html` logo antes de chamar o
   `startViewTransition` e retirada quando ele termina. */
:root.e-onda-tema::view-transition-group(root),
:root.e-onda-tema::view-transition-image-pair(root),
:root.e-onda-tema::view-transition-group(nav-astro),
:root.e-onda-tema::view-transition-image-pair(nav-astro) {
  animation-duration: 950ms;
}

:root.e-onda-tema::view-transition-old(root),
:root.e-onda-tema::view-transition-new(root) { mix-blend-mode: normal; }

/* A foto NOVA fica quieta e inteira, do começo ao fim: ela é o fundo sobre o
   qual a onda avança. A animação existe só para mantê-la viva os 950ms. */
:root.e-onda-tema::view-transition-new(root) {
  z-index: 1;
  animation: onda-segura 950ms linear both;
}
:root.e-onda-tema::view-transition-old(root) {
  z-index: 2;
  /* Transparente no miolo (já passou), opaca fora (ainda é dia), e entre os
     dois a faixa de degradê que faz a borda. */
  mask-image: radial-gradient(circle at var(--onda-x, 50%) var(--onda-y, 50%),
                              transparent var(--onda-p),
                              #000 calc(var(--onda-p) + 110px));
  animation: onda-abre 950ms linear both;
}
@keyframes onda-segura { from, to { opacity: 1; } }
@keyframes onda-abre {
  /* Começa em -110px para a faixa de degradê já nascer inteira dentro da
     tela; senão o primeiro quadro mostra um miolo transparente de 110px de
     raio, e a onda parece começar já grande. */
  from { --onda-p: -110px; }
  to   { --onda-p: var(--onda-r, 150vmax); }
}

/* O BOTÃO SAI DA FOTO e ganha camada própria. Sem isto ele congela junto com
   o resto da tela, e o sol vira lua escondido atrás da onda — a pessoa clica
   no ícone e não vê o ícone responder. Fora da foto, ele faz o próprio giro
   por cima dela, e as duas coisas viram um gesto só: a mão gira, e a noite
   sai dali. */
/* A classe é `tema-botao` e não `nav-tema` porque este botão existe em
   DUAS cascas: a trilha do produto do cliente e o topo do BackOffice.
   Presa ao nome da trilha, a segunda nasceria com o sol sem tamanho. */
/* O NOME SÓ EXISTE DURANTE A ONDA. Se ele valesse sempre, o botão viraria um
   grupo próprio também nas transições de NAVEGAÇÃO — e o sol giraria 80° a
   cada link clicado, porque as duas regras abaixo são as dele. */
:root.e-onda-tema .tema-botao { view-transition-name: nav-astro; }
:root.e-onda-tema::view-transition-old(nav-astro) {
  animation: astro-sai 950ms cubic-bezier(.4, 0, .2, 1) both;
}
:root.e-onda-tema::view-transition-new(nav-astro) {
  animation: astro-entra 950ms cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes astro-sai {
  0%   { opacity: 1; transform: rotate(0) scale(1); }
  60%  { opacity: 0; transform: rotate(-80deg) scale(.45); }
  100% { opacity: 0; transform: rotate(-80deg) scale(.45); }
}
@keyframes astro-entra {
  0%   { opacity: 0; transform: rotate(80deg) scale(.45); }
  60%  { opacity: 1; transform: rotate(0) scale(1); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

/* O PLANO B, para navegador sem View Transitions (o Firefox, até hoje).
   Ligado por 380ms e desligado em seguida pelo JavaScript — nunca fica, e é
   por isso que o `*` com `!important` aqui é aceitável: uma transição de cor
   em toda a árvore é cara demais para viver permanentemente, e barata para
   viver menos de meio segundo. */
:root.e-amaciando,
:root.e-amaciando *,
:root.e-amaciando *::before,
:root.e-amaciando *::after {
  transition: background-color 380ms ease, border-color 380ms ease,
              color 380ms ease, fill 380ms ease, stroke 380ms ease,
              box-shadow 380ms ease !important;
  transition-delay: 0s !important;
}
/* ...menos o astro, que tem o movimento dele e seria atropelado pela regra
   acima (o `!important` do `*` vence a especificidade de qualquer classe). */
:root.e-amaciando .tema-corpo,
:root.e-amaciando .tema-mordida-bolha,
:root.e-amaciando .tema-raios {
  transition: transform .5s cubic-bezier(.34, 1.4, .5, 1),
              opacity .28s ease !important;
}

/* Aqui NÃO se escopa: quem pediu menos movimento pediu para TODAS as
   transições, a da onda e a da navegação. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Balão de rótulo. `pointer-events:none` para o balão nunca engolir o
   clique do próprio ícone. */
.nav-icone::after {
  content: attr(data-nome);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--nav-fundo);
  color: var(--nav-tinta);
  font-size: var(--txt-micro);
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--raio-mini);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mov-rapido) ease, transform var(--mov-rapido) ease;
  z-index: 20;
}
.nav-icone:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* O `margin-top: auto` empurra este grupo para o pé da trilha. O fio acima
   dele conta POR QUE ele está separado: acima ficam os lugares para onde se
   vai, aqui ficam os ajustes do ambiente de trabalho — tema, som e ajuda. Sem
   o fio, a folga sozinha parecia sobra de espaço, e não divisa.

   Ele é um `::before` e não um `border-top` porque precisa ser mais estreito
   que a trilha: um fio de ponta a ponta encosta nas duas bordas e vira um
   corte; recuado, lê como pausa. */
.nav-fim {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e1);
}
.nav-fim::before {
  content: "";
  width: 22px;
  height: 1px;
  margin-bottom: var(--e2);
  background: rgba(var(--rgb-papel), .16);
}

/* --- O sanduíche e a gaveta ----------------------------------------------
   Fora do telefone o botão não existe (não é `visibility`, não é opacidade:
   ele some do documento), e a gaveta nunca chega a ter conteúdo, porque quem
   move os itens para lá é o script, e só abaixo de 700px. */

.nav-mais {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  padding: 0;
  font-size: 19px;
  color: var(--nav-icone-cor, rgba(var(--rgb-papel), .72));
  background: none;
  border: none;
  border-radius: var(--raio-mini);
  cursor: pointer;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease;
}

.nav-mais:hover,
.nav-mais[aria-expanded="true"] {
  color: var(--nav-tinta);
  background: rgba(var(--rgb-papel), .12);
}

/* --- As três barras, e o X ------------------------------------------------
   A do meio some encolhendo pelo centro; as de fora andam até o meio e
   giram. É o mesmo caminho na ida e na volta, e é isso que faz o botão
   parecer um objeto e não dois ícones se revezando. */

.nav-mais-caixa {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

.nav-mais-barra {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .26s var(--mov-curva),
              opacity .16s ease,
              top .26s var(--mov-curva);
}

.nav-mais-barra:nth-child(1) { top: 0; }
.nav-mais-barra:nth-child(2) { top: 6px; }
.nav-mais-barra:nth-child(3) { top: 12px; }

.nav-mais[aria-expanded="true"] .nav-mais-barra:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.nav-mais[aria-expanded="true"] .nav-mais-barra:nth-child(2) {
  opacity: 0;
  transform: scaleX(.2);
}
.nav-mais[aria-expanded="true"] .nav-mais-barra:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.nav-gaveta {
  position: absolute;
  z-index: 60;
  top: 100%;
  right: var(--e3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  max-width: min(320px, calc(100vw - 24px));
  padding: var(--e3);
  background: var(--nav-fundo, #1b1430);
  border: 1px solid rgba(var(--rgb-papel), .12);
  border-radius: var(--raio);
  box-shadow: 0 14px 40px rgba(var(--rgb-preto), .38);
}

.nav-gaveta[hidden] { display: none; }

/* --- A abertura ----------------------------------------------------------
   A gaveta CRESCE DA QUINA DO BOTÃO, não do centro dela: `transform-origin`
   no canto superior direito é o que amarra o painel ao gesto que o abriu.
   Sem isso ele parece aparecer de lugar nenhum.

   E a escala é curta (.96), com um empurrão de 8px. Painel que salta de
   `scale(.7)` chama atenção para si mesmo; este só precisa dizer de onde
   veio e sair da frente. */

.nav-gaveta {
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transition: opacity .18s ease,
              transform .22s var(--mov-curva);
}

.nav-gaveta.e-aberta {
  opacity: 1;
  transform: none;
}

/* OS ITENS ENTRAM EM CASCATA, e o `--i` de cada um vem do script, porque só
   ele sabe a ordem final depois de mover os nós. O atraso é curto de
   propósito: com dez itens a 18ms, o último chega em 180ms, dentro do tempo
   da própria gaveta. Cascata que termina depois do painel parece travamento. */
.nav-gaveta > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .24s var(--mov-curva);
}

.nav-gaveta.e-aberta > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 18ms);
}

/* Fechando, todos saem juntos: escalonar a saída faz a gaveta demorar a
   sumir, e ninguém quer ver um menu se despedindo. */
.nav-gaveta:not(.e-aberta) > * { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  .nav-gaveta,
  .nav-gaveta > *,
  .nav-mais-barra {
    transition: none;
  }
  .nav-gaveta { opacity: 1; transform: none; }
  .nav-gaveta > * { opacity: 1; transform: none; }
}

/* Dentro da gaveta o ícone volta a ter tamanho de alvo de toque, e a barra
   de utilidades deixa de ser uma linha para caber na grade de ícones. */
.nav-gaveta .nav-icone { width: 42px; height: 42px; }
.nav-gaveta .ut { display: contents; }

/* O HOVER DE DENTRO DA GAVETA É UM SÓ. Os itens que vêm da trilha usam
   `.nav-icone` (fundo claro sobre o escuro); o relógio dos lembretes e a
   conta vêm da barra branca e usam `.ut-icone`, cujo hover é o inverso:
   fundo cinza-claro e tinta roxa, desenhado para papel. Dentro da gaveta,
   que é escura, ele aparecia apagado e diferente de todos os vizinhos.

   Aqui eles passam a responder igual. Fora da gaveta cada um continua com
   o seu, porque cada um está sobre o fundo para o qual foi desenhado. */
.nav-gaveta .ut-icone:hover,
.nav-gaveta .ut-usuario:hover {
  background: rgba(var(--rgb-papel), .1);
  color: var(--nav-tinta);
}

/* O TRAÇO SEPARADOR NÃO SEPARA NADA AQUI. Na barra branca ele dividia os
   ícones da conta; na gaveta, onde a ordem é outra e os itens se envolvem em
   duas fileiras, ele vira um risco solto no meio. */
.nav-gaveta .ut-risco { display: none; }

@media (max-width: 700px) {
  /* Em tela estreita a trilha deita e vira uma faixa de ícones no topo. O
     balão de rótulo some: em toque não existe hover, e ele ficaria preso
     aberto depois do primeiro toque.

     OS ÍCONES SE EMBOLAVAM AQUI, e eram três causas somadas:

       · sem `flex-shrink: 0`, o flex espremia cada ícone para caber todos na
         largura do telefone, e eles encostavam um no outro;
       · o `margin-left: auto` do `.nav-fim` empurrava os dois últimos para a
         ponta direita de um container que já estava rolando, e eles
         terminavam empilhados fora da fileira;
       · e a barra de rolagem horizontal aparecia por cima da fileira.

     Agora a fileira não encolhe ninguém, rola de verdade quando não cabe, e
     o `.nav-fim` continua no fluxo, separado por uma folga em vez de por um
     empurrão. */
  /* O fio some no telefone: ali o grupo vira horizontal e um traço de 22px
     deitado no meio da fileira não separa nada. E ele PRECISA ser desligado
     à mão — `display: contents` (logo abaixo) apaga a caixa do elemento, mas
     os pseudo-elementos dele continuam sendo gerados, e o fio reapareceria
     como mais um item da fileira. */
  .nav-fim::before { display: none; }
  .nav-trilha {
    flex-direction: row;
    height: auto;
    position: relative;
    /* SÃO POUCOS ÍCONES AGORA, então eles se distribuem em vez de ficarem
       encostados à esquerda. Antes eram doze e a fileira rolava; com quatro,
       a marca fica na ponta esquerda, o sanduíche na direita, e os quatro
       ocupam o meio com folga igual entre si.

       O `overflow-x` saiu junto: ele existia para os doze caberem, e uma
       fileira que rola sem precisar é uma fileira que escorrega no toque. */
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--e2);
    padding: var(--e2) var(--e3);
  }

  /* O grupo de ícones toma o espaço entre a marca e o sanduíche, e se
     distribui dentro dele. */
  .nav-trilha .nav-icone--chave { flex: 1 1 auto; max-width: 76px; }
  .nav-marca { flex: 0 0 auto; margin-right: var(--e2); }

  /* OS DOIS LINKS QUE A BARRA DE UTILIDADES JÁ COBRE somem no telefone. Não
     é o botão que some: é o link da trilha, que leva à página inteira de
     Mensagens ou de Lembretes. O botão continua ali e abre a janelinha, que
     é o gesto mais rápido e o que a pessoa quer nove em cada dez vezes. */
  .nav-trilha .nav-icone--dobra { display: none; }

  /* O botão de mensagens, quando o script o traz para a fileira, precisa do
     mesmo tamanho de alvo dos vizinhos. */
  .nav-trilha .ut-icone { width: 42px; height: 42px; display: flex;
                          align-items: center; justify-content: center; }
  .nav-trilha > * { flex: 0 0 auto; }
  .nav-icone::after { display: none; }
  .nav-fim { margin-top: 0; margin-left: var(--e3); }

  /* NO TELEFONE FICAM QUATRO À MOSTRA e o resto vai para a gaveta. Doze
     ícones numa fileira que rola de lado é o pior tipo de navegação: quem
     não sabe que a rolagem existe nunca descobre o que está fora da vista. */
  .nav-mais { display: flex; }
  .nav-fim { display: contents; }
}


/* ===========================================================================
   Anel de conclusao
   ===========================================================================
   Marca ONDE a coisa aconteceu. Numa tela com centenas de celulas iguais,
   mudar a cor de uma delas nao basta: o olho registra que "algo mudou" e
   perde qual. O anel sai do ponto do clique e some — dura menos de meio
   segundo e nao deixa nada para tras.

   Ele e um elemento descartavel criado pelo JavaScript (`_festejo.html`), e
   por isso mora aqui: qualquer tela que queira o mesmo retorno reaproveita a
   classe sem copiar regra nenhuma. O pai precisa ser `position: relative`.
   =========================================================================== */
.lab-anel {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  /* `2px solid` some quando o anel cresce (a borda nao escala junto de forma
     visivel); a sombra em anel cresce com o elemento. */
  box-shadow: 0 0 0 2px var(--ok, #2e7d5b);
  /* Cliques atravessam: o anel fica POR CIMA do botao que acabou de ser
     apertado, e por 900ms ele engoliria um segundo clique. */
  pointer-events: none;
  opacity: 0;
}
.lab-anel.e-forte { box-shadow: 0 0 0 3px var(--ok, #2e7d5b); }

@media (prefers-reduced-motion: reduce) {
  .lab-anel { display: none; }
}

/* O seletor de som vive AQUI, e não na folha do painel: o alto-falante está
   na barra de utilidades, que aparece em TODA tela do laboratorio. Na folha
   do painel, a janelinha abriria sem estilo em Minhas Tarefas. */
/* ---------------------------------------------------------------------------
   ESCOLHER O SOM — o conteúdo da janelinha aberta pelo alto-falante
   --------------------------------------------------------------------------- */
.som-lista { display: flex; flex-direction: column; gap: 2px; min-width: 240px; }

.som-chave {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--linha, #ececee);
  font-size: var(--txt-mini, 12px);
  font-weight: 600;
  color: var(--tinta, #1a1a1f);
  cursor: pointer;
}
.som-chave input { accent-color: var(--acento, #4c2882); cursor: pointer; }

.som-op {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: none;
  border-radius: var(--raio-mini, 6px);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--tinta-media, #56565f);
  transition: background .12s ease;
}
.som-op:hover { background: var(--papel-sutil, #f5f5f6); }
.som-op.ativo { background: var(--acento-fundo, #f4f1fa); color: var(--acento, #4c2882); }
.som-op > i:first-child { font-size: 13px; flex-shrink: 0; }
.som-op-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.som-op-txt b { font-size: var(--txt-mini, 12px); color: var(--tinta, #1a1a1f); }
.som-op.ativo .som-op-txt b { color: var(--acento, #4c2882); }
.som-op-txt small { font-size: var(--txt-micro, 11px); color: var(--tinta-fraca, #6b6b75); }
/* O "play" é lembrete de que clicar TOCA, não só marca — sem ele a pessoa
   escolhe às cegas e só descobre o som na próxima tarefa concluída. */
.som-op-ouvir { flex-shrink: 0; font-size: 12px; opacity: .35; }
.som-op:hover .som-op-ouvir { opacity: .8; }

.som-dica {
  margin: 6px 4px 0;
  font-size: var(--txt-micro, 11px);
  color: var(--tinta-fraca, #6b6b75);
}

.ut-icone.e-mudo { color: var(--tinta-fraca, #6b6b75); }

/* A barra de "o painel mudou" vive AQUI, na folha compartilhada, e nao na do
   painel: ela aparece tambem em Minhas Tarefas, que nao carrega a outra. E a
   mesma armadilha do seletor de som — regra: o que aparece em mais de uma
   tela mora na folha que todas carregam. */
/* ---------------------------------------------------------------------------
   "O PAINEL MUDOU" — a barra que oferece atualizar

   Fica no rodapé, flutuando, e não no topo: o topo é onde estão os números
   que ela diz estarem velhos, e cobri-los seria tapar justamente o que a
   pessoa precisa olhar para decidir se atualiza agora ou depois.

   Âmbar, não vermelho: nada está errado — a tela só está atrasada.
   --------------------------------------------------------------------------- */
.sinal {
  position: fixed;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--atencao-marca, #d1830f);
  border-radius: 999px;
  background: var(--papel, #fff);
  box-shadow: 0 10px 28px rgba(var(--rgb-sombra), .16);
  font-size: var(--txt-mini, 12px);
  color: var(--tinta, #1a1a1f);
}
.sinal[hidden] { display: none; }
.sinal > i:first-child { color: var(--atencao-marca, #d1830f); font-size: 14px; }

.sinal-btn {
  padding: 5px 12px;
  border: none;
  border-radius: 999px;
  background: var(--acento, #4c2882);
  color: var(--papel);
  font-family: inherit;
  font-size: var(--txt-micro, 11px);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.sinal-btn:hover { background: var(--roxo-escuro, #3b1f66); }

/* Dispensar existe porque quem está no meio de uma conferência não quer
   recarregar agora — e um aviso que não some vira estorvo. */
.sinal-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-fraca, #6b6b75);
  font-size: 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sinal-x:hover { background: var(--papel-sutil, #f5f5f6); color: var(--tinta, #1a1a1f); }

/* --- Aviso dos certificados do escritório (janelinha de Mensagens) --------
   Fora da lista e antes dela. Não é uma notificação: notificação se lê uma
   vez e some, e certificado vencendo só deixa de ser problema quando é
   renovado. Por isso tem forma própria — bloco, não linha. */
.pop-cert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--atencao-marca, #b26a00);
  border-radius: var(--raio-mini);
  background: var(--atencao-suave, #fff6e6);
  color: var(--atencao, #8a5200);
  text-decoration: none;
  transition: background var(--mov-rapido) ease, transform var(--mov-rapido) ease;
}
.pop-cert:hover { transform: translateX(2px); }
.pop-cert > i:first-child { font-size: 1.25rem; flex-shrink: 0; }
.pop-cert > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pop-cert b { font-size: var(--txt-mini); font-weight: 700; }
.pop-cert span { font-size: var(--txt-micro); opacity: .9; line-height: 1.45; }
.pop-cert-mais { display: inline-block; margin-left: 4px; }
.pop-cert > i:last-child { font-size: 12px; opacity: .7; }

/* VENCIDO é outro assunto: já não é aviso, é uma porta fechada. */
.pop-cert.e-vencido {
  border-color: var(--alerta);
  background: var(--alerta-suave, #fdecea);
  color: var(--alerta);
  animation: pop-cert-pulsa 2.6s ease-in-out infinite;
}
@keyframes pop-cert-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-alerta-forte), .22); }
  50%      { box-shadow: 0 0 0 4px rgba(var(--rgb-alerta-forte), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pop-cert, .pop-cert.e-vencido { transition: none; animation: none; }
}


/* --- Impressão --------------------------------------------------------------
   UMA FOLHA PRÓPRIA, montada pelo `_folha_impressao.html`. A regra de impressão
   é UMA: some tudo o que não for a folha.

   A primeira versão enumerava o que esconder (trilha, cards, filtros...) e
   perdia por natureza: cada elemento novo na tela vira um `display:none` novo
   aqui, e basta esquecer um para a folha sair com a barra roxa atravessada.
   Foi o que aconteceu. Invertendo — esconde tudo, mostra só a folha — telas
   novas não quebram o papel. */
.folha { display: none; }

@media print {
  /* Some TUDO. `body > *` alcança a tela do app, as janelas, os toasts e
     qualquer coisa que uma tela futura acrescente. */
  body > *:not(#folha-impressao) { display: none !important; }

  body.e-imprimindo #folha-impressao { display: block; }
  @page { margin: 14mm 12mm; }
  body { background: #fff !important; }
}


/* ==========================================================================
   O TEMA ESCURO (Ardósia)
   ==========================================================================

   SÓ TOKEN. Nenhuma regra de layout, nenhum seletor de componente. Se uma tela
   sair errada no escuro, a causa é cor escrita fora de token, e o conserto é
   lá, não aqui. Foi para isto que a migração de cor veio antes: a
   `sonda_cor_crua.py` zera nas folhas do produto, então este bloco basta.

   POR QUE ELE MORA DENTRO DE `@media screen`
   ------------------------------------------
   Para a IMPRESSÃO continuar clara, e sem duplicar valor nenhum.

   A folha impressa consome tokens: a folha do painel usa `--acento` e
   `--papel-fundo`, e o `@media print` do `ajuda.css` usa mais sete. Com o tema
   escuro valendo, ela sairia com zebra grafite e roxo claro — e papel é branco
   em qualquer horário.

   A saída óbvia seria repetir os valores claros dentro de um `@media print`,
   mas `:root[data-tema="escuro"]` (0,2,0) ganha de `:root` (0,1,0) mesmo dentro
   de uma media query, então a repetição teria de ser dos 76 tokens, e
   envelheceria no primeiro que alguém ajustasse.

   `@media screen` resolve pelo outro lado: na impressão estes tokens
   simplesmente NÃO EXISTEM, e o `:root` claro volta a valer sozinho. Uma linha,
   zero duplicação, impossível de ficar desatualizado.

   A LÓGICA DE CADA FAMÍLIA
   ------------------------
     SUPERFÍCIE  a escada inverte mantendo a ordem. O chão continua abaixo do
                 cartão; os dois é que desceram.
     TINTA       inverte junto, mantendo a mesma ordem de força.
     ESTADO      o tom CLAREIA (um verde escuro some no escuro) e a superfície
                 suave dele ESCURECE. O significado não muda: verde continua
                 verde, vermelho continua vermelho.
     TRIPLO RGB  o que escurecia passa a clarear. `rgba(var(--rgb-tinta), .04)`
                 pinta o cabeçalho do cartão um degrau mais escuro no claro; no
                 escuro o mesmo gesto só funciona com branco.

   O QUE NÃO MUDA, e é decisão
   ---------------------------
   · O LARANJA DA MARCA. Ela é a mesma de dia e de noite.
   · A TINTA DA TRILHA (`--nav-tinta`). A trilha é escura nos dois temas.
   · A FAIXA VERMELHA DO MODO SUPORTE. Ela escreve `#b4472e` cru no `<style>`
     do próprio `_faixa_suporte.html`, então não segue token e não clareia
     junto. Isso é o certo: ela existe para avisar que a tela não é sua, e
     precisa saltar em qualquer tema. Não a "conserte" trocando por token.

   Todo contraste abaixo foi MEDIDO sobre o cartão, não julgado: o menor é o
   acento, em 4.87. A `--tinta-fraca` subiu de #7e8695 para #8b93a1 justamente
   por isso — no primeiro valor ela dava 4.35, e rótulo e legenda vivem nela.
   ========================================================================== */

@media screen {
  :root[data-tema="escuro"] {


    /* --- Superfície: a escada, invertida ----------------------------------- */
    --papel-fundo:           #171a21;
    --papel:                 #1e222b;
    --papel-sutil:           #252a34;
    --papel-neutro:          #2a303a;
    --linha:                 #2b313c;
    --linha-forte:           #3a4150;

    /* --- Tinta ------------------------------------------------------------- */
    --tinta:                 #e6e9ef;
    --tinta-media:           #a9b0bd;
    --tinta-fraca:           #939ba8;
    --neutro-ponto:          #545c6b;

    /* --- Acento ------------------------------------------------------------ */
    --acento:                #b29aec;
    --acento-vivo:           #c8b6f5;
    --acento-fundo:          #242a3c;
    --acento-fundo-medio:    #2a3145;
    --acento-fundo-forte:    #2b3247;
    --acento-linha:          #3a4360;
    --acento-aviso:          #262c3f;
    --acento-aviso-linha:    #3b4460;
    --acento-aviso-tinta:    #c6b3f2;
    --acento-aviso-icone:    #8f83b8;

    /* --- Verde ------------------------------------------------------------- */
    --ok:                    #5fc98d;
    --ok-suave:              #152c22;
    --ok-linha:              #2b4636;
    --ok-linha-forte:        #36573f;
    --ok-visto:              #4fd685;
    --ok-celula:             #1b3529;
    --ok-celula-alt:         #224232;
    --ok-celula-tinta:       #8ee0ad;
    --ok-celula-icone:       #3d6553;
    --ok-aviso:              #172c22;
    --ok-aviso-linha:        #2c4a38;
    --ok-aviso-tinta:        #8fdcaf;
    --ok-aviso-icone:        #5e8a70;
    --ok-botao:              #3f9c73;
    --ok-botao-claro:        #52b487;
    --ok-botao-escuro:       #2f7a58;

    /* --- Vermelho ---------------------------------------------------------- */
    --alerta:                #ff8a6e;
    --alerta-forte:          #ff7a72;
    --alerta-suave:          #331f1e;
    --alerta-fundo-claro:    #2e1d1c;
    --alerta-fundo-suave:    #331f1e;
    --alerta-linha:          #55322b;
    --alerta-linha-forte:    #6b3d33;
    --alerta-linha-media:    #8a4a3e;
    --alerta-linha-suave:    #452a25;
    --alerta-aviso:          #331f1e;
    --alerta-aviso-linha:    #58332c;
    --alerta-aviso-tinta:    #f2ab95;
    --alerta-aviso-icone:    #a4705f;
    --alerta-botao:          #c2604a;
    --alerta-botao-escuro:   #a04a34;

    /* --- Âmbar ------------------------------------------------------------- */
    --atencao:               #e5b25c;
    --atencao-marca:         #e5a13a;
    --atencao-suave:         #33291a;
    --atencao-fundo-claro:   #2e2618;
    --atencao-fundo-forte:   #3a2f1c;
    --atencao-linha:         #574627;
    --atencao-linha-forte:   #6a5730;
    --atencao-aviso:         #33291a;
    --atencao-aviso-linha:   #574627;
    --atencao-aviso-tinta:   #e9c98a;
    --atencao-aviso-icone:   #9c8452;

    /* --- A marca e a trilha ------------------------------------------------ */
    --laranja:               #f7941d;
    --laranja-forte:         #ffae4d;
    --nav-fundo:             #11141a;

    /* --- Os triplos RGB de sombra e brilho --------------------------------- */
    --rgb-tinta:             255, 255, 255;
    --rgb-sombra:            0, 0, 0;
    --rgb-preto:             0, 0, 0;
    --rgb-papel:             255, 255, 255;
    --rgb-acento:            178, 154, 236;
    --rgb-acento-escuro:     146, 122, 208;
    --rgb-alerta:            255, 138, 110;
    --rgb-alerta-forte:      255, 122, 114;
    --rgb-alerta-escuro:     196, 96, 74;
    --rgb-atencao:           229, 178, 92;
    --rgb-atencao-escuro:    186, 148, 82;
    --rgb-ok-escuro:         95, 201, 141;
  }
}

/* sonda-cor: ignorar
   ====================================================================
   DAQUI ATE O FIM DO ARQUIVO E A FOLHA DE IMPRESSAO, e a cor dela e dura
   de proposito: papel e branco em qualquer horario, e uma folha que
   seguisse o modo noturno sairia preta e comeria a tinta do cliente.

   A marca `sonda-cor: ignorar` existe porque a `sonda_cor_crua.py` nao tem
   como adivinhar isso sozinha: estas regras estao FORA de um `@media print`
   (elas montam um documento proprio, com unidades em `pt`). Sem a marca, o
   placar de divida acusava seis cores que ninguem deve tocar, e placar que
   nunca zera e placar que se aprende a ignorar.
   ==================================================================== */

/* A folha em si. Fora do `@media print` de propósito: assim dá para conferi-la
   na tela durante o desenvolvimento tirando o `display:none` acima, sem
   depender da janela de impressão do navegador. */
.folha { color: #111; font-size: 9.5pt; }

.folha-topo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--acento);
}
/* O TETO DE LARGURA não é zelo: a logo deixou de ser a nossa, de proporção
   conhecida, e passou a ser a que o escritório subir. Uma marca horizontal sem
   limite empurra o `<h1>` para fora do centro que a nota abaixo explica ter
   sido conquistado. `contain` preserva a proporção dentro do teto. */
.folha-topo img { height: 30px; max-width: 190px; object-fit: contain; }
/* O TÍTULO FICA CENTRADO na folha, entre a logo e a data. Encostado na logo
   ele lia como legenda dela; no meio, é o assunto do documento — que é o que
   quem recebe a folha procura primeiro.

   As duas pontas (logo e data) têm largura própria, então o meio é o que
   sobra: o texto fica centrado no PAPEL, não entre as duas pontas, porque a
   logo e a data têm larguras parecidas. */
.folha-topo > div { text-align: center; }
.folha-topo h1 { margin: 0; font-size: 15pt; font-weight: 800; color: var(--acento); }
.folha-topo p { margin: 2px 0 0; font-size: 9pt; color: #555; }
.folha-quando { text-align: right; white-space: nowrap; }

.folha table { width: 100%; border-collapse: collapse; }
.folha th {
  padding: 6px 8px;
  background: #f1eef7;
  border-bottom: 1.5px solid var(--acento);
  text-align: left;
  font-size: 8.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--acento);
}
.folha td {
  padding: 5px 8px;
  border-bottom: .5pt solid #ddd;
}
/* Zebra bem clara: no papel ela ajuda a percorrer a linha sem gastar tinta. */
.folha tbody tr:nth-child(even) td { background: var(--papel-fundo); }
/* Empresa cortada entre duas folhas é o defeito clássico de tabela impressa. */
.folha tr { break-inside: avoid; }
/* O cabeçalho se repete em cada página — sem isso, da segunda folha em diante
   ninguém sabe qual coluna é qual. */
.folha thead { display: table-header-group; }

.folha-pe {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 6px;
  border-top: .5pt solid #ddd;
  font-size: 8pt;
  color: #777;
}

/* ===========================================================================
   O ENDEREÇO COLADO NUMA CONVERSA
   ===========================================================================
   Mora AQUI, nos tokens, e não na folha de uma das telas: o mesmo link aparece
   na conversa da demanda (produto do cliente) e no diário do projeto
   (BackOffice), e as duas árvores só se encontram neste arquivo. Duas cópias
   divergiriam, e a primeira coisa a divergir seria o sublinhado.

   SUBLINHADO, e não só cor. Cor sozinha não é acessível — quem não distingue o
   matiz não vê link nenhum — e num balão de conversa, onde já há nome, horário
   e citação, um texto só colorido some no meio do resto. */
.lab-link {
  color: var(--acento);
  text-decoration: underline;
  /* O sublinhado desencostado da letra: colado, ele corta as descidas do `g`
     e do `p` e o endereço fica mais difícil de ler justamente por causa do
     enfeite que deveria ajudar. */
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.lab-link:hover { text-decoration-thickness: 2px; }


/* ===========================================================================
   O FAROL DO BOTÃO CHEIO
   ===========================================================================
   Um clarão que segue o ponteiro POR DENTRO do botão. Nasceu nas telas de erro
   e subiu para cá porque funciona: ele transforma "mudou de cor" em "respondeu
   ao toque".

   MORA AQUI, e não na folha do BackOffice, porque esta é carregada pelas duas
   árvores (`lab_base_solta.html` é a moldura do produto do cliente E a base da
   casca do painel). Se um dia o cliente quiser o mesmo efeito em algum botão,
   ele já está aqui — basta a classe.

   ═══ E POR QUE ELE **NÃO** VAI NO `.b-btn--forte` ═══

   Porque aquele botão JÁ TEM uma resposta ao cursor, e ela é melhor: um fio
   laranja que se fecha ao redor dele, vindo de `inset: -7px` para `-3px`. Está
   escrito no `dashboard-b.css` e é deliberado — inclusive a nota sobre manter
   o fio (e tirar só o fechamento) em `prefers-reduced-motion`.

   Pôr o farol ali custaria duas coisas, e as duas foram medidas antes de
   escrever esta linha:
     · os dois efeitos disputam o MESMO `::after`, e o `dashboard-b.css` carrega
       depois — o farol perderia em silêncio;
     · o `overflow: hidden` que o farol precisa RECORTARIA o fio, que vive FORA
       do botão. O efeito bom morreria para o ruim não aparecer.

   EM 25/08/2026 O BOTÃO DO CLIENTE GANHOU O FAROL ASSIM MESMO, e as duas
   objeções acima continuam corretas — o que mudou foi o desenho que as
   contornou: lá o farol mora no `::before` (livre) e se recorta pela PRÓPRIA
   curva (`border-radius: inherit`), então não precisa de `overflow: hidden` e
   o fio laranja sobrevive inteiro. A implementação fica no `dashboard-b.css`,
   junto do fio, porque as duas peças do mesmo botão têm de ser lidas juntas.

   Duas respostas para a mesma pergunta na mesma tela é o que este repositório
   evita em toda parte. O botão do cliente tem a dele; o do painel não tinha
   nenhuma, e passou a ter esta.

   AS COORDENADAS VÊM DO JS em duas variáveis (`--fx`/`--fy`). Sem elas o
   gradiente fica no centro e simplesmente não se nota — não quebra, só não
   acontece, o que é o desfecho certo onde o script não rodar. */
.stb-botao,
.e-farol { position: relative; overflow: hidden; }

.stb-botao > *,
.e-farol > * { position: relative; z-index: 1; }

.stb-botao::after,
.e-farol::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120px circle at var(--fx, 50%) var(--fy, 50%),
                              rgba(var(--rgb-farol, 255, 255, 255), .26), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.stb-botao:hover::after,
.e-farol:hover::after { opacity: 1; }

/* NO ESCURO O FAROL INVERTE, como a tinta. O preenchimento vira roxo luminoso,
   e um clarão branco por cima dele lava o botão em vez de iluminá-lo — o texto
   perde contraste justamente sob o cursor. É a mesma lição da
   `--stb-tinta-no-cheio`, agora aplicada à luz. */
:root[data-tema="escuro"] {
  --rgb-farol: 23, 26, 33;
}

@media (prefers-reduced-motion: reduce) {
  .stb-botao::after,
  .e-farol::after { transition: none; }
}