/* =============================================================================
 * componentes.css — o sistema visual do Thiago em componentes.
 *
 * ZERO literal de cor aqui: tudo sai de tokens.css, inclusive a palavra-chave de
 * fundo vazio, que vem como var(--transparente). Medida bruta em px aparece so onde e
 * geometria propria do componente (aresta de 1px, bola do interruptor), e comentada.
 *
 * Este arquivo e servido tal e qual como `public_html/css/app.css` do
 * app.thiagolucas.com: os dois sao o MESMO arquivo, copiado. Se divergirem, o
 * especime deixa de provar o app.
 *
 * Ordem: base, casca (lateral + cabecalho), texto, cartao, metrica, fila, item de
 * lista, nota 1-5, botao, chip, filtro e aba, campo e formulario, tabela, estado
 * vazio, aviso, estado (chip de status), indicador, interruptor, paginacao, celular.
 *
 * Motion: so transform e opacity, sempre com guarda de prefers-reduced-motion (no fim
 * do arquivo). Hover so dentro de @media (hover: hover), pra nao grudar no toque.
 * ============================================================================= */

/* ------------------------------------------------------------------------ base */

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

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: var(--altura-base);
  font-optical-sizing: auto;
  color: var(--tinta);
  background: var(--fundo);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Qualquer subarvore que declara tema refaz cor e fundo a partir dos tokens.
 * Sem esta regra, [data-tema] num container NAO funciona: a cor herdada de fora ja
 * foi resolvida em valor computado e atravessa a troca de tema (o titulo fica preto
 * no escuro). Achado olhando o render do especime, nao lendo o CSS. */
[data-tema] {
  color: var(--tinta);
  background-color: var(--fundo);
}

a {
  color: var(--tinta);
  text-decoration-color: var(--linha-campo);
  text-underline-offset: 2px;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

::selection {
  background: var(--realce-3);
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--anel-foco) solid var(--foco);
  outline-offset: 2px;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* pular pro conteudo: invisivel ate receber foco, e ai e um botao de verdade */
.pular {
  position: absolute;
  left: -9999px;
  z-index: 9;
}

.pular:focus {
  left: var(--e-4);
  top: var(--e-4);
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  padding: 0 var(--e-4);
  font-size: var(--t-menor);
  font-weight: var(--peso-forte);
  color: var(--tinta);
  background: var(--superficie);
  border: var(--borda) solid var(--linha-campo);
  border-radius: var(--raio-1);
  box-shadow: var(--sombra-levantado);
  text-decoration: none;
}

/* icone: sempre SVG inline com stroke=currentColor, nunca glifo unicode (LIC-012d) */
.icone {
  width: var(--icone);
  height: var(--icone);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* o conjunto de icones mora uma vez na pagina e cada uso e um <use> */
.sprite {
  display: none;
}

.icone--menor {
  width: var(--icone-2);
  height: var(--icone-2);
}

/* ----------------------------------------------------------------------- casca */

.quadro {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
}

/* A lateral nao tem fundo nem borda: e o proprio canvas, como no Afilia. O que separa
 * a navegacao do conteudo e o espaco e o cartao branco a direita, nao um filete. */
.lateral {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  height: 100vh;
  height: 100svh;
  padding: var(--e-5) var(--e-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 17/09/2026 (Thiago): "coloque alguma linha pra separar onde e a divisa entre ui e menu...
     precisa ser algo bem sutil": o token mais fraco que existe (--linha-fraca, o divisor
     interno de cartao). Nao subir pra --linha sem ele pedir. */
  border-right: 1px solid var(--linha-fraca);
}

.lateral-marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alvo-toque);
  padding: var(--e-2);
  border-radius: var(--raio-3);
  text-decoration: none;
  cursor: pointer;
  list-style: none; /* quando e <summary>: o triangulo nativo sai, a seta e nossa */
  /* 18/09/2026 (Thiago): o destaque de "botao" (superficie + hairline) e do seletor de
     painel, aqui em cima; o rodape .perfil fica sem cor. */
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
}

.lateral-marca::-webkit-details-marker {
  display: none;
}

/* ------------------------------------------- menu da marca ("Trocar de painel", 3.17.1)
 * A marca vira o seletor de painel quando a conta tem 2+ paineis (spec 3.17.1, V1): a
 * mesma receita do `.menu-perfil` (<details> nativo), so que abre PRA BAIXO (a marca fica
 * no topo da lateral) em vez de pra cima. `.menu-marca` e so o <details> relativo; a lista
 * reusa `.menu-perfil-lista` (mesmo desenho de cartao) com a direcao invertida logo abaixo. */
.menu-marca {
  position: relative;
}

.menu-marca > .menu-perfil-lista {
  top: calc(100% + var(--e-2));
  bottom: auto;
}

.marca-seta {
  margin-left: auto;
  color: var(--tinta-4);
}

.menu-marca[open] > .lateral-marca {
  background: var(--realce);
}

.menu-marca[open] > .lateral-marca .marca-seta {
  color: var(--tinta-2);
}

.marca-selo {
  display: grid;
  place-items: center;
  width: var(--e-7);
  height: var(--e-7);
  flex: none;
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
  font-weight: var(--peso-maximo);
  letter-spacing: var(--trilha-numero);
  color: var(--acento-tinta);
  background: var(--acento);
  border-radius: var(--raio-3);
}

.marca-nome {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--peso-maximo);
  letter-spacing: var(--trilha-titulo);
  line-height: var(--altura-apertada);
}

.marca-sub {
  display: block;
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
  line-height: var(--altura-apertada);
}

.lateral-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}

.grupo {
  display: flex;
  flex-direction: column;
  gap: 2px; /* aresta: 4px afasta demais itens de nav de 36px */
}

/* rotulo de grupo: 11px, 600, caixa alta, tracking 0,2em. E a medida do Afilia
 * (2,2px em 11px) e o gesto de personalidade do sistema. */
.grupo-rotulo {
  margin: 0 0 var(--e-2);
  padding: 0 var(--e-3);
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: var(--trilha-rotulo);
  color: var(--tinta-3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alvo);
  padding: 0 var(--e-3);
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  color: var(--tinta-2);
  text-decoration: none;
  border-radius: var(--raio-3);
}

.nav-item .icone {
  color: var(--tinta-4);
}

.nav-item-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* item ativo: tinta a 5%, radius 12, peso 600. Sem barra, sem borda, sem cor. */
.nav-item.atual {
  color: var(--tinta);
  font-weight: var(--peso-forte);
  background: var(--realce);
}

.nav-item.atual .icone {
  color: var(--tinta);
}

.conta {
  margin-left: auto;
  padding: var(--e-1) var(--e-2);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  line-height: 1;
  color: var(--tinta-2);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-pilula);
}

.conta.forte {
  color: var(--acento-tinta);
  background: var(--acento);
  border-color: var(--acento);
}

.lateral-rodape {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: auto;
  padding-top: var(--e-4);
  border-top: var(--borda) solid var(--linha);
}

.lateral-quem {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  font-size: var(--t-menor);
  color: var(--tinta-3);
}

.lateral-quem strong {
  font-weight: var(--peso-forte);
  color: var(--tinta-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lateral-botoes {
  display: flex;
  gap: var(--e-1);
}

/* ------------------------------------------- menu do perfil ("Trocar de painel")
 * O rodape da lateral vira menu quando a pessoa tem 2+ paineis no login unificado:
 * nome, a lista dos outros paineis e Sair. E um <details> nativo, entao abre no
 * clique e no teclado sem uma linha de JS, e fecha com Esc de graca.
 *
 * O `:not(.perfil)` em toda regra de <summary> daqui existe por uma razao so: desde a
 * 3.17.0 o gatilho do menu e o componente `.perfil` (logo abaixo), e regra de elemento
 * (0,1,1) venceria a classe (0,1,0) na cascata. Quem ainda nao migrou o markup (o
 * layout.php do app.thiagolucas.com, ate o Mac aplicar) continua atendido por estas
 * regras, sem tocar em nada la. Migrou o app: estas cinco linhas podem sair. */

.menu-perfil {
  position: relative;
  min-width: 0;
}

.menu-perfil > summary:not(.perfil) {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--alvo);
  padding: 0 var(--e-2);
  font-size: var(--t-menor);
  color: var(--tinta-2);
  border-radius: var(--raio-3);
  cursor: pointer;
  list-style: none;
}

.menu-perfil > summary:not(.perfil)::-webkit-details-marker {
  display: none;
}

.menu-perfil > summary:not(.perfil) strong {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--peso-forte);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-perfil > summary:not(.perfil) .icone {
  margin-left: auto;
  color: var(--tinta-4);
}

.menu-perfil[open] > summary:not(.perfil) {
  color: var(--tinta);
  background: var(--realce);
}

.menu-perfil-lista {
  position: absolute;
  bottom: calc(100% + var(--e-2));
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px; /* respiro de 2px entre itens, o mesmo do .grupo da lateral */
  /* 17/09/2026 (Thiago): "o popover atual e mais largo que a lateral e ela recorta o que
     passa". Largura PRESA ao pai (menu-perfil / menu-marca, que ja tem a largura exata da
     lateral): nunca mais larga que ela, entao nunca ha o que cortar (spec 3.17.1, V4). */
  width: auto;
  padding: var(--e-2);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-levantado), var(--sombra-interna);
}

.menu-perfil-lista .grupo-rotulo {
  margin: 0 0 var(--e-1);
}

.menu-perfil-lista .nav-item .icone {
  color: var(--tinta-4);
}

.menu-perfil-sep {
  width: 100%;
  height: var(--borda);
  margin: var(--e-1) 0;
  border: 0;
  background: var(--linha);
}

/* ---------------------------------------------- perfil (iniciais + nome + seta)
 * O bloco de quem esta logado, no rodape da lateral. Ate a 3.16 era so o nome em
 * negrito sem fundo, e o Thiago disse que "nao parece tocavel" (17/09/2026). Agora e
 * um bloco com superficie propria, hairline e 44px de altura: le como botao parado.
 *
 * Markup, o mesmo em qualquer app (catalogo, app.thiagolucas.com, Enok):
 *   <details class="menu-perfil">
 *     <summary class="perfil" aria-expanded="false">
 *       <span class="perfil-iniciais" aria-hidden="true">TH</span>
 *       <span class="perfil-nome">Thiago (piloto)</span>
 *       <svg class="icone icone--menor perfil-seta" aria-hidden="true">…</svg>
 *     </summary>
 *     <div class="menu-perfil-lista">…</div>
 *   </details>
 * Fora de um <details> o mesmo desenho vale num <button aria-expanded>.
 *
 * As INICIAIS sao 2 letras em caixa alta: a 1a do primeiro nome e a 1a do ultimo,
 * contando SO palavra alfabetica FORA de parenteses ("Thiago (piloto)" -> TH, nao TP).
 * Um nome so vira as duas primeiras letras dele ("Isabelle" -> IS). Quem deriva isso e
 * o servidor, nunca o CSS. O desenho e o mesmo selo `ca` da marca, em caixa alta. */

.perfil {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--alvo-toque); /* 44px mesmo no computador: e o alvo do pedido */
  padding: var(--e-2);
  font-size: var(--t-menor);
  color: var(--tinta-2);
  text-align: left;
  /* 18/09/2026 (Thiago): sem superficie nem borda; o destaque foi pra .lateral-marca */
  background: none;
  border: var(--borda) solid var(--fundo); /* mesma cor do canvas: invisivel, mas guarda a medida */
  border-radius: var(--raio-3);
  cursor: pointer;
  list-style: none; /* quando e <summary>: o triangulo nativo sai, a seta e nossa */
}

.perfil::-webkit-details-marker {
  display: none;
}

.perfil-iniciais {
  display: grid;
  place-items: center;
  width: var(--e-7);
  height: var(--e-7);
  flex: none;
  font-family: var(--fonte-mono);
  font-size: var(--t-menor);
  font-weight: var(--peso-maximo);
  letter-spacing: var(--trilha-numero);
  color: var(--fundo);
  background: var(--tinta);
  border-radius: var(--raio-3);
}

.perfil-nome {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--peso-forte);
  color: var(--tinta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perfil-seta {
  margin-left: auto;
  color: var(--tinta-4);
}

/* aberto: um passo a mais de superficie e a borda de controle, pra o bloco continuar
 * lendo como acionado enquanto a lista esta na tela. Vale pro <summary> e pro <button>:
 * quem diz que abriu e o aria-expanded, nao o [open] do pai. */
.perfil[aria-expanded="true"] {
  background: var(--superficie-2);
  border-color: var(--linha-campo);
}

.perfil[aria-expanded="true"] .perfil-seta {
  color: var(--tinta-2);
}

/* --------------------------------------------------- lateral colapsada (68px) */

[data-lateral="curta"] .quadro {
  grid-template-columns: var(--lateral-curta) minmax(0, 1fr);
}

[data-lateral="curta"] .lateral {
  padding: var(--e-5) var(--e-2);
  align-items: center;
}

[data-lateral="curta"] .marca-texto,
[data-lateral="curta"] .marca-seta,
[data-lateral="curta"] .nav-item-nome,
[data-lateral="curta"] .lateral-quem,
[data-lateral="curta"] .perfil-nome,
[data-lateral="curta"] .perfil-seta,
[data-lateral="curta"] .grupo-rotulo {
  display: none;
}

/* na lateral de 68px sobra o selo das iniciais, que ja e o alvo inteiro */
[data-lateral="curta"] .perfil {
  justify-content: center;
  padding: var(--e-1);
}

/* o popover (da marca OU do rodape) so tem a largura do proprio pai: em 68px isso vira uma
 * caixa minuscula e ilegivel. Mais simples que calcular posicao fixa (V4): a lateral curta
 * so mostra icone, entao o menu nem abre visualmente ali -- expandir de novo devolve o menu. */
[data-lateral="curta"] .menu-perfil-lista {
  display: none;
}

[data-lateral="curta"] .grupo {
  width: 100%;
}

[data-lateral="curta"] .grupo + .grupo {
  padding-top: var(--e-4);
  border-top: var(--borda) solid var(--linha);
}

[data-lateral="curta"] .nav-item {
  justify-content: center;
  padding: 0;
}

/* na lateral curta o contador nao cabe: vira ponto no canto do icone */
[data-lateral="curta"] .conta {
  position: absolute;
  margin: 0;
  padding: 0;
  width: var(--e-2);
  height: var(--e-2);
  overflow: hidden;
  text-indent: -9999px;
  background: var(--acento);
  border-color: var(--acento);
  transform: translate(var(--e-3), calc(-1 * var(--e-3)));
}

[data-lateral="curta"] .nav-item {
  position: relative;
}

[data-lateral="curta"] .lateral-rodape {
  width: 100%;
}

[data-lateral="curta"] .lateral-botoes {
  flex-direction: column;
  align-items: center;
}

/* -------------------------------------------------------------------- cabecalho */

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

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-7) var(--e-4);
  background: var(--fundo);
  border-bottom: var(--borda) solid var(--linha);
}

.cabecalho-texto {
  min-width: 0;
}

/* breadcrumb: contexto / secao, em mono caixa alta pequena (padrao do Nekt) */
.trilha {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-1);
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--trilha-kicker);
  color: var(--tinta-3);
}

.trilha a {
  color: inherit;
  text-decoration: none;
}

.trilha-sep {
  color: var(--tinta-4);
}

.titulo {
  margin: 0;
  font-size: var(--t-titulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-titulo);
  line-height: var(--altura-titulo);
  text-wrap: balance;
}

.cabecalho-sub {
  margin: var(--e-1) 0 0;
  font-size: var(--t-menor);
  color: var(--tinta-2);
}

.cabecalho-fim {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-left: auto;
}

/* a regra tem que ser mais forte que a do .botao, que vem depois neste arquivo */
.cabecalho .botao-gaveta {
  display: none;
}

.conteudo {
  width: 100%;
  max-width: var(--conteudo-max);
  padding: var(--e-6) var(--e-7) var(--e-10);
}

/* ----------------------------------------------------------------------- texto */

.subtitulo {
  margin: var(--e-7) 0 var(--e-3);
  font-size: var(--t-medio);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-titulo);
}

.conteudo > .subtitulo:first-child {
  margin-top: 0;
}

/* kicker: o rotulo em caixa alta que abre cartao e metrica */
.kicker {
  display: block;
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: var(--trilha-rotulo);
  color: var(--tinta-3);
}

/* cabeca de grupo por dia: rotulo, contagem e um filete que ocupa o resto da linha */
.dia {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-7) 0 var(--e-3);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: var(--trilha-rotulo);
  color: var(--tinta-3);
}

.dia::after {
  content: "";
  flex: 1;
  height: 1px; /* aresta */
  background: var(--linha);
}

.dia-conta {
  font-weight: var(--peso-medio);
  letter-spacing: var(--trilha-kicker);
  color: var(--tinta-4);
}

.fraco {
  font-size: var(--t-micro);
  color: var(--tinta-3);
}

.mono {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- numeros
 * A regra de numero do sistema mora AQUI, num lugar so, pra poder ser auditada de uma
 * olhada: tudo que a pessoa le como NUMERO (KPI, contador de badge, celula de tabela,
 * nota de 1 a 5, data, hora, pagina, codigo de erro) usa a --fonte-numero com
 * tabular-nums. Nenhum destes componentes declara familia por conta propria.
 *
 * A --fonte-mono fica so onde ela sempre foi boa: rotulo em caixa alta (kicker, rotulo
 * de grupo, cabecalho de tabela, chip de estado, trilha) e identificador tecnico
 * (origem do incidente, id, nome de cron, bloco de log). Isso e o pedido do Thiago de
 * 16/09/2026: o zero da JetBrains Mono tem ponto no meio e atrapalha ler numero.
 *
 * Trocar a fonte dos numeros do app inteiro = trocar --fonte-numero no tokens.css. */

.numero,
.metrica-numero,
.metrica-nota,
.conta,
.filtro-conta,
.dia,
.dia-conta,
.fila-sub,
.item-meta,
.nota-botao,
.paginacao-texto,
.codigo-erro,
.log-quando,
.log-repete,
.tabela--numeros tbody th,
.tabela--numeros tbody td {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
}

.lista-simples {
  margin: 0;
  padding-left: var(--e-5);
}

.codigo-erro {
  margin: 0;
  font-size: var(--t-display);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-numero);
  line-height: var(--altura-numero);
  color: var(--tinta-3);
}

/* ---------------------------------------------------------------------- cartao */

.cartao {
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-repouso), var(--sombra-interna);
}

.cartao-corpo {
  padding: var(--e-6);
}

.cartao-cabeca {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-6);
  border-bottom: var(--borda) solid var(--linha-fraca);
}

.cartao-titulo {
  margin: 0;
  font-size: var(--t-medio);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-titulo);
}

.cartao-fim {
  margin-left: auto;
}

.grade {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* --------------------------------------------------------------------- metrica */

.metrica {
  display: flex;
  flex-direction: column;
  /* a grade iguala a altura dos cartoes: sem isto sobra um vao morto embaixo do
     cartao mais curto (achado no render da v2) */
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-5);
  text-decoration: none;
}

.metrica-numero {
  display: block;
  font-size: var(--t-numero);
  font-weight: var(--peso-maximo);
  letter-spacing: var(--trilha-numero);
  line-height: var(--altura-numero);
}

.metrica-rotulo {
  display: flex;
  align-items: center;
  /* sem quebra, o chip de status ao lado do rotulo estourava a tela no celular
     (innerWidth 389 num viewport de 375, achado no diagnostico da v3) */
  flex-wrap: wrap;
  gap: var(--e-2);
  font-size: var(--t-menor);
  color: var(--tinta-2);
}

.metrica-rotulo .icone {
  margin-left: auto;
  color: var(--tinta-4);
}

.metrica-nota {
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}

/* -------------------------------------------------- fila "precisa de voce" */

.fila {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* mesma densidade de log da lista de incidentes: 8 de padding e o texto em duas linhas
 * apertadas dao ~54px por linha, contra os ~63 de antes */
.fila-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-6);
  color: inherit;
  text-decoration: none;
  border-top: var(--borda) solid var(--linha-fraca);
}

.fila li:first-child .fila-item {
  border-top: 0;
}

.fila-texto {
  min-width: 0;
}

.fila-titulo {
  display: block;
  font-size: var(--t-menor);
  font-weight: var(--peso-forte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fila-sub {
  display: block;
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}

/* a origem dentro da linha e identificador tecnico: continua na mono */
.fila-sub .mono,
.item-meta .mono {
  font-size: inherit;
}

.fila-fim {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-left: auto;
}

.fila-fim .icone {
  color: var(--tinta-4);
}

/* -------------------------------------------------------------- item de lista */

.lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.item {
  position: relative;
  padding: var(--e-5);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-repouso), var(--sombra-interna);
}

/* item ja visto: recua um passo (fundo afundado, sem sombra, titulo em tinta-2).
 * Nao usa opacity: texto apagado por opacity quebra o contraste medido. */
.item.visto {
  background: var(--fundo-afundado);
  box-shadow: none;
}

.item.visto .item-titulo {
  color: var(--tinta-2);
  font-weight: var(--peso-normal);
}

.item-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.item-titulo {
  margin: 0;
  font-size: var(--t-base);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-titulo);
  line-height: var(--altura-titulo);
}

/* ponto de "ainda nao visto": some quando o item e marcado */
.novo {
  display: inline-block;
  width: var(--e-2);
  height: var(--e-2);
  margin-right: var(--e-2);
  vertical-align: 0.1em;
  background: var(--acento);
  border-radius: var(--raio-pilula);
}

.item.visto .novo {
  display: none;
}

.item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-2) 0 0;
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}

.item-meta-sep {
  color: var(--tinta-4);
}

.item-meta .icone {
  color: var(--tinta-4);
  vertical-align: -0.15em;
}

.item-resumo {
  margin: var(--e-3) 0 0;
  font-size: var(--t-menor);
  color: var(--tinta-2);
}

.item-detalhe {
  margin: var(--e-3) 0 0;
  padding: var(--e-3);
  max-height: var(--detalhe-max);
  overflow: auto;
  overscroll-behavior: contain;
  font-family: var(--fonte-mono);
  font-size: var(--t-micro);
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--tinta-2);
  background: var(--superficie-2);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-2);
}

.item-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: var(--borda) solid var(--linha-fraca);
}

.item-acoes-fim {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-left: auto;
}

/* gravidade: filete de 4px na aresta esquerda do cartao, dentro do radius */
.item--erro {
  border-color: var(--erro-linha);
  box-shadow: inset var(--e-1) 0 0 var(--erro-tinta), var(--sombra-repouso);
}

.item--aviso {
  border-color: var(--aviso-linha);
  box-shadow: inset var(--e-1) 0 0 var(--aviso-tinta), var(--sombra-repouso);
}

.item--erro,
.item--aviso {
  padding-left: var(--e-6);
}

/* -------------------------------------------------------------------------- log
 * Lista densa de evento: UM cartao, uma linha por evento, divisor de 1px entre linhas.
 * O desenho e o do audit da Vide (chip + texto + alvo em mono + "quando" a direita,
 * 20px de padding na horizontal); a diferenca e que a acao fica no FIM DA LINHA, nao
 * abaixo dela. Pedido literal do Thiago em 16/09/2026: "os incidentes tem que parecer
 * mais log, ocupando menos espaco vertical, o botao pode ficar la no final".
 *
 * Altura da linha: 48px no computador (8 de padding em cima e embaixo + o botao pequeno
 * de 32) e 52px no toque, onde o botao vai pra 36. Quem manda na altura e o alvo do
 * controle, nao o texto: e por isso que o padding vertical e 8 e nao os 16 da Vide, que
 * ali abraca duas linhas de texto sem nenhum botao dentro.
 *
 * Nao usa <table>: cada linha e um artigo com acao propria e um bloco que abre embaixo;
 * tabela mentiria sobre a semantica e brigaria com o bloco que abre. */

.log {
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-repouso), var(--sombra-interna);
  overflow: hidden; /* sem isto o divisor da 1a e da ultima linha passa por fora do raio */
}

.log-item {
  border-top: var(--borda) solid var(--linha-fraca);
}

.log-item:first-child {
  border-top: 0;
}

/* evento ja tratado: recua um passo, igual ao item visto da lista. Nunca por opacity,
 * que quebraria o contraste medido. */
.log-item.visto {
  background: var(--fundo-afundado);
}

.log-item.visto .log-texto {
  color: var(--tinta-2);
  font-weight: var(--peso-normal);
}

/* Sobre o fundo afundado a --tinta-3 da 4,38:1 no tema claro, abaixo do alvo de 4,5 da
 * WCAG 1.4.3 (medido por ferramentas/contraste.py). Quem recua a linha e a superficie e
 * o peso do texto; o metadado so precisa continuar legivel, entao ele sobe pra tinta-2.
 * Mesma correcao no item de lista e nas notas de rodape de painel, logo abaixo. */
.log-item.visto .log-alvo,
.log-item.visto .log-quando,
.item.visto .item-meta {
  color: var(--tinta-2);
}

/* gravidade: filete de 4px na aresta esquerda da linha, como a marca de margem de um
 * log de verdade. O padding e o MESMO em toda linha, com ou sem filete: numa lista
 * densa, chip desalinhado entre linhas parece defeito. */
.log-item--erro {
  box-shadow: inset var(--e-1) 0 0 var(--erro-tinta);
}

.log-item--aviso {
  box-shadow: inset var(--e-1) 0 0 var(--aviso-tinta);
}

.log-linha {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-5);
}

/* o chip de severidade tem largura de COLUNA, nao de conteudo: com "grave", "aviso" e
 * "info" medindo diferente, a mensagem comecava em tres x diferentes e a lista densa
 * parecia torta (achado no render da v1) */
.log-linha > .estado {
  flex: none;
  justify-content: center;
  min-width: 4rem;
}

/* a mensagem: uma linha so, com reticencias. Quando ha o que abrir ela e <button>;
 * quando nao ha, e <span> e nao finge ser clicavel. */
/* base 0, nao `auto`: com base no conteudo, a mensagem longa nao cabia ao lado do chip e
 * o navegador quebrava a linha em tres (achado no render de 375 px da v1) */
.log-texto {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
  line-height: var(--altura-apertada);
  text-align: left;
  color: var(--tinta);
  background: var(--transparente);
  border: 0;
  padding: 0;
}

button.log-texto {
  cursor: pointer;
}

/* aberta, a mensagem inteira aparece: e o unico jeito de ler um erro de 300 caracteres
 * sem tirar a densidade das outras 49 linhas */
.log-item.aberta .log-texto {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

/* origem, repeticoes e "quando" andam juntos: no computador ficam no meio da linha; no
 * celular a caixa inteira desce pra segunda linha e o botao continua no fim da primeira */
.log-meta {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
}

/* origem: identificador tecnico, entao continua na mono */
.log-alvo {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}

/* contador de repeticoes: fica sempre na linha, vazio quando o evento aconteceu uma vez
 * so. E o que segura o alinhamento das colunas de uma linha pra outra. */
.log-repete {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-width: var(--e-7);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  color: var(--tinta-2);
}

.log-repete .icone {
  color: var(--tinta-4);
}

.log-quando {
  flex: none;
  white-space: nowrap;
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}

.log-acoes {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--e-1);
}

/* O `ligado` padrao vira o botao primario (preto solido). Numa lista de 50 linhas
 * tratadas isso vira uma coluna de blocos pretos e briga com a regra do proprio sistema
 * de UM primario por tela (visto no filtro "Tratados", rodada v3). No log o estado
 * ligado fala a linguagem de "ok" que o sistema ja tem no chip .estado--ok.
 * Pra voltar ao preto: apague este bloco e o hover dele la embaixo. */
.log-acoes .botao.ligado {
  color: var(--ok-tinta);
  background: var(--ok-fundo);
  border-color: var(--ok-linha);
}

.log-acoes .botao.ligado .icone {
  color: var(--ok-tinta);
}

/* o bloco que abre: mensagem inteira ja esta na linha, aqui entra o detalhe tecnico */
.log-detalhe {
  margin: 0 var(--e-5) var(--e-4);
  padding: var(--e-3);
  max-height: var(--detalhe-max);
  overflow: auto;
  overscroll-behavior: contain;
  font-family: var(--fonte-mono);
  font-size: var(--t-micro);
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--tinta-2);
  background: var(--superficie-2);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-2);
}

/* a regra do WhatsApp dita uma vez no rodape do cartao, em vez de repetida em 50 linhas.
 * A cor nao e a --tinta-3 da classe .fraco: sobre a --superficie-2 ela da 4,38:1 no tema
 * claro, abaixo do alvo de 4,5 (medido). Vale pro rodape da tabela tambem. */
.log-nota,
.tabela-nota {
  color: var(--tinta-2);
}

.log-nota {
  margin: 0;
  padding: var(--e-3) var(--e-5);
  border-top: var(--borda) solid var(--linha-fraca);
  background: var(--superficie-2);
}

/* ------------------------------------------------------------------ nota 1 a 5 */

.nota {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.nota-rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: var(--trilha-kicker);
  color: var(--tinta-3);
}

/* grupo segmentado: uma moldura, cinco celulas, divisor de 1px entre elas */
.nota-grupo {
  display: inline-flex;
  overflow: hidden;
  background: var(--superficie);
  border: var(--borda) solid var(--linha-campo);
  border-radius: var(--raio-1);
}

.nota-botao {
  width: var(--alvo);
  min-height: var(--alvo);
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
  color: var(--tinta-2);
  background: var(--transparente);
  border: 0;
  border-left: var(--borda) solid var(--linha);
  cursor: pointer;
}

.nota-botao:first-child {
  border-left: 0;
}

.nota-botao.ligado {
  color: var(--acento-tinta);
  background: var(--acento);
  font-weight: var(--peso-forte);
}

/* o anel de foco seria cortado pelo overflow do grupo: puxa pra dentro */
.nota-botao:focus-visible {
  outline-offset: -3px;
}

/* ---------------------------------------------------------------------- botao */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: var(--e-2);
  min-height: var(--alvo);
  padding: 0 var(--e-4);
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
  line-height: 1;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  background: var(--superficie);
  border: var(--borda) solid var(--linha-campo);
  border-radius: var(--raio-1);
  cursor: pointer;
}

.botao .icone {
  color: var(--tinta-3);
}

.botao--primario {
  color: var(--acento-tinta);
  background: var(--acento);
  border-color: var(--acento);
  font-weight: var(--peso-forte);
}

.botao--primario .icone {
  color: var(--acento-tinta);
}

.botao--fantasma {
  color: var(--tinta-2);
  background: var(--transparente);
  border-color: var(--transparente);
}

.botao--icone {
  width: var(--alvo);
  padding: 0;
}

.botao--pequeno {
  min-height: var(--e-7);
  padding: 0 var(--e-3);
  font-size: var(--t-rotulo);
}

/* estado ligado (visto, tratado, filtro preso): vira o primario */
.botao.ligado {
  color: var(--acento-tinta);
  background: var(--acento);
  border-color: var(--acento);
}

.botao.ligado .icone {
  color: var(--acento-tinta);
}

.botao[disabled] {
  color: var(--tinta-4);
  border-color: var(--linha);
  cursor: not-allowed;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}

/* ----------------------------------------------------------------------- chip */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
}

/* chip de atalho / etiqueta: pilula com superficie e hairline */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--e-7);
  padding: 0 var(--e-4);
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
  color: var(--tinta-2);
  text-decoration: none;
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-pilula);
}

.chip .icone {
  color: var(--tinta-4);
}

/* ------------------------------------------------------------- filtro e aba
 * Mesmo desenho pros dois (pilula fantasma quando inativa, branca com anel de 1px
 * quando ativa): e o padrao de abas do Afilia, e filtro e aba sao a mesma pergunta
 * feita em dois lugares. */

.filtros,
.abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.filtro,
.aba {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--alvo);
  padding: 0 var(--e-4);
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
  color: var(--tinta-2);
  text-decoration: none;
  background: var(--transparente);
  border: var(--borda) solid var(--transparente);
  border-radius: var(--raio-pilula);
  cursor: pointer;
}

.filtro.atual,
.aba.atual,
.aba[aria-selected="true"] {
  color: var(--tinta);
  font-weight: var(--peso-forte);
  background: var(--superficie);
  border-color: var(--linha);
  box-shadow: var(--sombra-repouso);
}

.filtro-conta {
  padding: 0 var(--e-1);
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}

.filtro.atual .filtro-conta,
.aba.atual .filtro-conta {
  color: var(--tinta-2);
}

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.barra-fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-left: auto;
}

/* campo no fim da barra nao cresce: crescendo, ele joga o botao pra linha de baixo */
.barra-fim .envelope {
  flex: 0 1 16rem;
}

/* Pedido do Thiago (17/09/2026): "o botao filtrar e buscar podem ficar ao lado do campo ao
 * inves de embaixo". O par campo + botao passa a ser indivisivel: quem quebra e a .barra
 * (o form inteiro desce pra linha de baixo quando nao cabe ao lado das abas), nunca o form
 * por dentro. Sem o `nowrap`, a caixa de origem dos incidentes empurrava o "Filtrar" pra
 * linha seguinte ate em 1280 px (medido: form de 280 px com 356 px de conteudo).
 *
 * O `margin-left` repete o que a `.barra-fim` ja pedia e que a `.busca` desfazia sem querer:
 * as duas tem a mesma especificidade e a `.busca` vem depois no arquivo, entao o
 * `margin: 0` dela vencia o `margin-left: auto` e o form ficava colado nas abas. */
.barra .busca {
  flex-wrap: nowrap;
}

.barra .busca.barra-fim {
  margin-left: auto;
}

/* ------------------------------------------------------- campo e formulario */

.formulario {
  display: grid;
  gap: var(--e-5);
  max-width: 36rem;
}

/* busca ocupa a largura toda: ela nao e campo de cadastro */
.formulario .busca {
  max-width: none;
}

.campo-grupo {
  display: grid;
  gap: var(--e-2);
}

/* larguras de campo: existem pra campo curto nao ficar do tamanho de campo longo numa
 * linha de acoes e mentir sobre o dado que ele pede */
.campo-grupo--curto {
  max-width: 9rem;
}

.campo-grupo--medio {
  max-width: 16rem;
}

.rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: var(--trilha-rotulo);
  color: var(--tinta-3);
}

.ajuda {
  font-size: var(--t-micro);
  color: var(--tinta-3);
}

.campo {
  width: 100%;
  min-height: var(--alvo);
  padding: 0 var(--e-3);
  font-size: var(--t-campo);
  color: var(--tinta);
  background: var(--superficie);
  border: var(--borda) solid var(--linha-campo);
  border-radius: var(--raio-1);
}

.campo::placeholder {
  color: var(--tinta-4);
}

/* select nativo so sai do desenho do sistema com borda E padding proprios
 * (LIC-037, item 1); a seta e SVG inline no envelope, nunca data-uri com cor. */
.campo--selecao {
  appearance: none;
  padding-right: var(--e-8);
  cursor: pointer;
}

textarea.campo {
  min-height: var(--e-10);
  padding: var(--e-3);
  line-height: var(--altura-base);
  resize: vertical;
}

/* campo de arquivo: MESMA armadilha do select (LIC-037, item 1). O botao de escolher e
 * desenhado pelo sistema operacional, entao no tema escuro ele nasce cinza-claro no meio
 * da tela preta. Achado olhando o render, nao lendo o CSS. A caixa em volta ganha padding
 * menor porque o botao ja tem altura propria. */
input[type="file"].campo {
  padding: var(--e-1) var(--e-2);
  line-height: var(--alvo);
}

.campo::file-selector-button {
  margin-right: var(--e-3);
  min-height: var(--alvo);
  padding: 0 var(--e-3);
  font-family: var(--fonte);
  font-size: var(--t-menor);
  font-weight: var(--peso-forte);
  color: var(--tinta);
  background: var(--superficie-2);
  border: var(--borda) solid var(--linha-campo);
  border-radius: var(--raio-1);
  cursor: pointer;
}

.envelope {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 14rem;
}

.envelope .icone {
  position: absolute;
  left: var(--e-3);
  color: var(--tinta-4);
  pointer-events: none;
}

.envelope--fim .icone {
  left: auto;
  right: var(--e-3);
}

.envelope .campo {
  padding-left: var(--e-8);
}

.envelope--fim .campo {
  padding-left: var(--e-3);
}

.busca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
}

/* --------------------------------------------------------------------- tabela */

.painel {
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-repouso), var(--sombra-interna);
  overflow: hidden;
}

.rolagem {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.tabela {
  width: 100%;
  min-width: var(--tabela-min);
  border-collapse: collapse;
  font-size: var(--t-menor);
}

.tabela caption {
  padding: var(--e-4) var(--e-5);
  text-align: left;
}

.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--e-3) var(--e-4);
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: var(--trilha-kicker);
  text-align: left;
  white-space: nowrap;
  color: var(--tinta-3);
  background: var(--superficie);
  border-bottom: var(--borda) solid var(--linha-forte);
}

.tabela tbody th,
.tabela tbody td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  border-top: var(--borda) solid var(--linha-fraca);
}

.tabela tbody th {
  font-weight: var(--peso-forte);
  white-space: nowrap;
}

/* Numero em coluna: a familia e o tabular-nums saem do bloco "numeros" la em cima, que
 * e o unico lugar que decide fonte de numero. O alinhamento da tabela nao muda: quem
 * faz a coluna parar de dançar aqui e o tabular-nums, nao o monoespacamento. */

.tabela tbody tr.alerta th,
.tabela tbody tr.alerta td {
  font-weight: var(--peso-forte);
  background: var(--erro-fundo);
}

/* filete de gravidade na primeira celula da linha em alerta */
.tabela tbody tr.alerta th:first-child,
.tabela tbody tr.alerta td:first-child {
  box-shadow: inset var(--e-1) 0 0 var(--erro-tinta);
}

.tabela-nota {
  margin: 0; /* <p> traz margem do navegador e abre uma faixa branca no painel */
  padding: var(--e-3) var(--e-5);
  border-top: var(--borda) solid var(--linha-fraca);
  background: var(--superficie-2);
}

/* --------------------------------------------------------------- estado vazio
 * Nunca so "nada aqui": icone, o que e, e o que fazer em seguida. */

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-9) var(--e-6);
  text-align: center;
  border: var(--borda) dashed var(--linha-forte);
  border-radius: var(--raio-4);
}

.vazio .icone {
  width: var(--e-7);
  height: var(--e-7);
  color: var(--tinta-4);
  stroke-width: 1.25;
}

.vazio-titulo {
  margin: 0;
  font-size: var(--t-medio);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-titulo);
}

.vazio-texto {
  margin: 0;
  max-width: 34rem;
  font-size: var(--t-menor);
  color: var(--tinta-2);
}

.vazio .acoes {
  justify-content: center;
  margin-top: var(--e-2);
}

/* ---------------------------------------------------------------------- aviso */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin: 0 0 var(--e-5);
  padding: var(--e-4);
  font-size: var(--t-menor);
  color: var(--tinta);
  background: var(--aviso-fundo);
  border: var(--borda) solid var(--aviso-linha);
  border-radius: var(--raio-3);
}

.aviso .icone {
  color: var(--aviso-tinta);
}

.aviso-texto {
  margin: 0;
}

.aviso strong {
  font-weight: var(--peso-forte);
}

.aviso--erro {
  background: var(--erro-fundo);
  border-color: var(--erro-linha);
}

.aviso--erro .icone {
  color: var(--erro-tinta);
}

.aviso--ok {
  background: var(--ok-fundo);
  border-color: var(--ok-linha);
}

.aviso--ok .icone {
  color: var(--ok-tinta);
}

/* ------------------------------------------------------- estado (chip de status) */

.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-2);
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-forte);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--trilha-kicker);
  color: var(--tinta-2);
  background: var(--superficie-2);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-pilula);
  white-space: nowrap;
}

.estado--erro {
  color: var(--erro-tinta);
  background: var(--erro-fundo);
  border-color: var(--erro-linha);
}

.estado--aviso {
  color: var(--aviso-tinta);
  background: var(--aviso-fundo);
  border-color: var(--aviso-linha);
}

.estado--ok {
  color: var(--ok-tinta);
  background: var(--ok-fundo);
  border-color: var(--ok-linha);
}

.estado--forte {
  color: var(--acento-tinta);
  background: var(--acento);
  border-color: var(--acento);
}

/* --------------------------------------------------------------- indicador */

.indicador {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-mono);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--trilha-kicker);
  color: var(--tinta-2);
}

.indicador::before {
  content: "";
  width: var(--e-2);
  height: var(--e-2);
  border-radius: var(--raio-pilula);
  background: var(--tinta-4);
}

.indicador--ok::before {
  background: var(--ok-tinta);
}

.indicador--aviso::before {
  background: var(--aviso-tinta);
}

.indicador--erro::before {
  background: var(--erro-tinta);
}

.indicador--vivo::before {
  animation: pulso 2.4s ease-in-out infinite;
}

@keyframes pulso {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* -------------------------------------------------------------- interruptor */

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alvo);
  font-size: var(--t-menor);
  cursor: pointer;
}

.interruptor input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.interruptor-trilho {
  position: relative;
  flex: none;
  width: var(--e-8);
  height: var(--e-6);
  background: var(--realce-2);
  border: var(--borda) solid var(--linha-campo);
  border-radius: var(--raio-pilula);
}

.interruptor-bola {
  position: absolute;
  top: 2px; /* aresta: metade da diferenca entre trilho e bola */
  left: 2px;
  width: var(--icone);
  height: var(--icone);
  background: var(--superficie);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-repouso);
  transition: transform var(--tempo) var(--curva);
}

.interruptor input:checked + .interruptor-trilho {
  background: var(--acento);
  border-color: var(--acento);
}

.interruptor input:checked + .interruptor-trilho .interruptor-bola {
  transform: translateX(var(--e-4));
}

.interruptor input:focus-visible + .interruptor-trilho {
  outline: var(--anel-foco) solid var(--foco);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ paginacao */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.paginacao-texto {
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}

/* ------------------------------------------------------- pagina sem menu (.solta)
 * Tela de entrar e afins: uma coluna centrada, o mesmo sistema visual do resto.
 * Sem centralizar por vh de proposito: com o teclado aberto em tela baixa o
 * formulario sairia pra fora. */

.solta {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(22px, 7vh, 80px) var(--e-5) var(--e-9);
}

.solta .marca-selo {
  margin-bottom: var(--e-4);
}

.solta h1 {
  margin: 0;
  font-size: var(--t-titulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-titulo);
}

.solta .sub {
  margin: var(--e-1) 0 var(--e-6);
  font-size: var(--t-menor);
  color: var(--tinta-2);
}

.solta h2 {
  margin: 0 0 var(--e-1);
  font-size: var(--t-medio);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-titulo);
}

.solta .formulario {
  max-width: none;
}

.solta .botao {
  width: 100%;
}

@media (max-height: 560px) {
  .solta {
    padding-top: var(--e-4);
  }

  .solta .sub {
    margin-bottom: var(--e-3);
  }
}

/* ------------------------------------------------- botao flutuante de feedback
 * Pilula fixa no canto inferior direito de toda tela logada (pedido do Thiago,
 * 17/09/2026). E um <a>, nao um <button>: leva a uma pagina, nao executa acao.
 *
 *   <a class="feedback-flutuante" href="/painel/feedback">
 *     <svg class="icone" aria-hidden="true">…</svg>Dar feedback</a>
 *
 * z-index 3 de proposito: acima do conteudo e no mesmo plano do cabecalho grudado,
 * ABAIXO da cortina (4) e da gaveta (5). Assim, com o menu aberto no celular, ele
 * fica atras da cortina em vez de boiar por cima do rodape da gaveta. */

.feedback-flutuante {
  position: fixed;
  right: var(--e-5);
  bottom: calc(var(--e-5) + env(safe-area-inset-bottom));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--alvo-toque);
  padding: 0 var(--e-4);
  font-size: var(--t-menor);
  font-weight: var(--peso-forte);
  color: var(--tinta);
  text-decoration: none;
  background: var(--superficie);
  border: var(--borda) solid var(--linha-campo);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-levantado), var(--sombra-interna);
}

.feedback-flutuante .icone {
  color: var(--tinta-3);
}

/* --------------------------------------------------------------------- hover
 * Tudo junto e no fim, dentro de @media (hover: hover): no celular, hover que
 * "cola" depois do toque e um bug classico. */

@media (hover: hover) {
  .nav-item:hover {
    color: var(--tinta);
    background: var(--realce);
  }

  .menu-perfil > summary:not(.perfil):hover {
    color: var(--tinta);
    background: var(--realce);
  }

  /* bloco de perfil: o hover troca a superficie (o realce sobre superficie some) e
   * acende a borda, que e o que diz "da pra tocar" antes do toque */
  .perfil:hover {
    background: var(--superficie-2);
    border-color: var(--linha-campo);
  }

  .perfil:hover .perfil-seta {
    color: var(--tinta-2);
  }

  .campo::file-selector-button:hover {
    background: var(--realce-2);
  }

  .feedback-flutuante:hover {
    background: var(--superficie-2);
  }

  .feedback-flutuante:hover .icone {
    color: var(--tinta);
  }

  .nav-item:hover .icone {
    color: var(--tinta-2);
  }

  .nav-item.atual:hover {
    background: var(--realce-2);
  }

  .botao:hover {
    background: var(--superficie-2);
  }

  .botao--primario:hover,
  .botao.ligado:hover {
    background: var(--acento-hover);
    border-color: var(--acento-hover);
  }

  .botao--fantasma:hover {
    color: var(--tinta);
    background: var(--realce);
    border-color: var(--transparente);
  }

  .botao[disabled]:hover {
    background: var(--superficie);
  }

  .filtro:hover,
  .aba:hover {
    color: var(--tinta);
    background: var(--realce);
  }

  .filtro.atual:hover,
  .aba.atual:hover {
    background: var(--superficie);
  }

  .chip:hover {
    color: var(--tinta);
    background: var(--superficie-2);
  }

  .nota-botao:hover {
    background: var(--realce);
  }

  .nota-botao.ligado:hover {
    background: var(--acento-hover);
  }

  .fila-item:hover,
  a.metrica:hover {
    background: var(--realce);
  }

  a.metrica:hover {
    border-color: var(--linha-forte);
  }

  .item:hover {
    box-shadow: var(--sombra-levantado), var(--sombra-interna);
  }

  /* no log a linha nao levanta (o cartao e um so): ela acende */
  .log-item:hover {
    background: var(--realce);
  }

  .log-item.visto:hover {
    background: var(--realce-2);
  }

  /* variante de botao definida por classe precisa da propria linha de hover, senao ela
     herda o hover do primario e o botao de "tratado" fica preto ao passar o cursor
     (LIC-037) */
  .log-acoes .botao.ligado:hover {
    background: var(--ok-fundo);
    border-color: var(--ok-tinta);
  }

  button.log-texto:hover {
    text-decoration: underline;
    text-decoration-color: var(--linha-campo);
    text-underline-offset: 2px;
  }

  .item.visto:hover {
    box-shadow: var(--sombra-repouso), var(--sombra-interna);
  }

  .tabela tbody tr:hover th,
  .tabela tbody tr:hover td {
    background: var(--realce);
  }

  .tabela tbody tr.alerta:hover th,
  .tabela tbody tr.alerta:hover td {
    background: var(--erro-fundo);
  }
}

/* ------------------------------------------------------------------- celular
 * A quebra e 800px, literal: media query nao le variavel CSS. */

.cortina {
  display: none;
}

@media (max-width: 800px) {
  .quadro {
    grid-template-columns: minmax(0, 1fr);
  }

  /* a lateral vira gaveta: fora da tela, entra por transform (nunca por width) */
  .lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: var(--lateral);
    max-width: 86vw;
    height: auto;
    padding: var(--e-4);
    background: var(--fundo);
    border-right: var(--borda) solid var(--linha);
    transform: translateX(-101%);
    transition: transform var(--tempo) var(--curva);
  }

  .lateral.aberta {
    transform: translateX(0);
    box-shadow: var(--sombra-levantado);
  }

  .cortina {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: block;
    background: var(--cortina);
    border: 0;
  }

  .cortina[hidden] {
    display: none;
  }

  /* na gaveta a lateral nunca e curta */
  [data-lateral="curta"] .quadro {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-lateral="curta"] .lateral {
    align-items: stretch;
    padding: var(--e-4);
  }

  [data-lateral="curta"] .marca-texto,
  [data-lateral="curta"] .nav-item-nome,
  [data-lateral="curta"] .lateral-quem,
  [data-lateral="curta"] .grupo-rotulo {
    display: revert;
  }

  [data-lateral="curta"] .nav-item {
    justify-content: flex-start;
    padding: 0 var(--e-3);
  }

  [data-lateral="curta"] .conta {
    position: static;
    width: auto;
    height: auto;
    padding: var(--e-1) var(--e-2);
    overflow: visible;
    text-indent: 0;
    color: var(--tinta-2);
    background: var(--superficie);
    border-color: var(--linha);
    transform: none;
  }

  [data-lateral="curta"] .conta.forte {
    color: var(--acento-tinta);
    background: var(--acento);
    border-color: var(--acento);
  }

  [data-lateral="curta"] .grupo + .grupo {
    padding-top: 0;
    border-top: 0;
  }

  [data-lateral="curta"] .lateral-botoes {
    flex-direction: row;
  }

  .cabecalho .botao-gaveta {
    display: inline-flex;
  }

  .cabecalho {
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
  }

  /* no celular a trilha e o indicador viram quebra de linha: o titulo e o menu
     lateral ja dizem onde a pessoa esta */
  .cabecalho .trilha,
  .cabecalho-fim .indicador,
  .cabecalho-fim .fraco {
    display: none;
  }

  /* o fim da pagina ganha a altura do flutuante de folga: sem isso a ultima acao da
   * tela (a barra de copiar, o botao de enviar) nasce embaixo da pilula */
  .conteudo {
    padding: var(--e-4) var(--e-4)
      calc(var(--e-9) + var(--alvo-toque) + env(safe-area-inset-bottom));
  }

  .feedback-flutuante {
    right: var(--e-4);
    bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
  }

  /* no toque, alvo de 44px */
  .botao,
  .filtro,
  .aba,
  .campo,
  .nota-botao,
  .nav-item {
    min-height: var(--alvo-toque);
  }

  .botao--icone,
  .nota-botao {
    width: var(--alvo-toque);
  }

  .botao--pequeno {
    min-height: var(--alvo);
  }

  .item,
  .metrica {
    padding: var(--e-4);
  }

  .cartao-corpo,
  .cartao-cabeca,
  .fila-item {
    padding-left: var(--e-4);
    padding-right: var(--e-4);
  }

  .item-acoes-fim {
    margin-left: 0;
  }

  /* No celular a linha de log vira duas: em cima o chip e a mensagem inteira, embaixo
     origem, repeticoes, hora e o botao NO FIM DA LINHA (que e o pedido; o que nao podia
     era virar bloco abaixo, como era no cartao antigo).
     Deixar a mensagem dividir a primeira linha com o botao daria 147 px de texto a
     375 px, que e meia duzia de palavras: a mensagem ganha a linha inteira e o botao
     fecha a segunda. */
  .log-linha {
    flex-wrap: wrap;
    /* entre as duas linhas basta o respiro de 4: 12 aqui custava 8 px em CADA linha da
       lista, e numa lista de 50 isso e meia tela (medido na v2) */
    row-gap: var(--e-1);
    padding: var(--e-3) var(--e-4);
  }

  /* no celular a coluna de repeticoes nao precisa reservar largura: aqui nao ha coluna
     pra alinhar, e os 32 px reservados estavam comendo a origem, que saia com
     reticencias sem motivo (achado no render de 375 px da v2) */
  .log-repete {
    min-width: 0;
  }

  /* quebra dura depois da mensagem: sem ela quem decide onde quebra e o navegador, e em
     375 px ele fazia tres linhas (v1) */
  .log-linha::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
  }

  .log-meta {
    order: 2;
    flex: 1 1 0;
  }

  .log-acoes {
    order: 3;
    margin-left: auto;
  }

  .log-detalhe,
  .log-nota {
    margin-left: var(--e-4);
    margin-right: var(--e-4);
  }

  .log-nota {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--e-4);
    padding-right: var(--e-4);
  }

  .titulo {
    font-size: var(--t-medio);
  }

  .metrica-numero {
    font-size: var(--t-medio);
  }

  .grade {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

/* ------------------------------------------------------------- tela estreita
 * 360 px e menos (o piso do checklist da casa e 260): a linha da nota de 1 a 5 e a
 * mais larga do app. Ali ela perde o rotulo e volta pro alvo de 36 px, que ainda e
 * tocavel nesse tamanho, em vez de empurrar a pagina pro lado. */

@media (max-width: 360px) {
  .nota-rotulo {
    display: none;
  }

  .nota-botao {
    width: var(--alvo);
    min-height: var(--alvo);
  }

  .item,
  .metrica,
  .cartao-corpo,
  .cartao-cabeca,
  .fila-item,
  .log-linha,
  .log-nota {
    padding-left: var(--e-3);
    padding-right: var(--e-3);
  }

  .log-detalhe {
    margin-left: var(--e-3);
    margin-right: var(--e-3);
  }

  .conteudo {
    padding-left: var(--e-3);
    padding-right: var(--e-3);
  }
}

/* -------------------------------------------------------------- motion off */

@media (prefers-reduced-motion: reduce) {
  .lateral,
  .interruptor-bola {
    transition: none;
  }

  .indicador--vivo::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
}