/* =====================================================================
   IAF 360 — componentes (Material Design 3)
   =====================================================================
   Cada bloco aqui e um componente do MD3 — botao, chip, card, campo de
   texto contornado, dialogo, snackbar, aba, drawer — desenhado em
   HTML/CSS puro sobre os tokens de tokens.css. Nao ha `@material/web`:
   o Material Web esta em manutencao, exige JS para renderizar e traria
   uma dependencia de build a um console que nao tem build. O que se
   adota e a ANATOMIA, os PAPEIS DE COR e as ESCALAS do MD3 (DA-26).

   Regras que valem em todo componente:
     - cor so por papel (`--md-sys-color-*`), sempre em par `X` / `on-X`;
     - hover, foco e pressionado sao CAMADA DE ESTADO (`color-mix` de
       `on-X` sobre `X`), nunca uma cor nova;
     - forma so por token de forma; tipo so por token de escala;
     - desabilitado e opacidade de 38% no conteudo, 12% no container.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Botoes
   ---------------------------------------------------------------------
   Os cinco botoes do MD3 por ordem de enfase: preenchido (filled) >
   tonal > elevado > contornado (outlined) > texto. O console usa quatro:

     .btn--primario   filled     `--acao-fundo` / on-primary — UM por tela
     .btn--destrutivo filled     error / on-error — nunca `primary`
     .btn--secundario outlined   borda `outline`, rotulo `primary`
     .btn / .btn--discreto  text  so o rotulo em `primary`

   Tamanho extra-pequeno (32px, `--ctrl-h`), pilula (`full`), rotulo em
   label-large. Ver a nota sobre escala de controle em tokens.css. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--ctrl-h); padding: 0 var(--e-3);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  border: 1px solid transparent; border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: var(--md-sys-color-primary);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
  text-decoration: none;
}
.btn:active:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-state-layer-opacity), transparent);
}
.btn:disabled {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent);
  cursor: not-allowed;
}

/* Preenchido: `--acao-fundo` — no claro o tom 49 da paleta terracota,
   o mesmo do item ativo do menu. O rotulo tem 14px, e a WCAG so
   dispensa 4,5:1 a partir de 18,66px em negrito; branco sobre T49 da
   4,64:1. */
.btn--primario {
  background: var(--acao-fundo); color: var(--md-sys-color-on-primary);
  padding-inline: var(--e-4);
  font-weight: var(--md-sys-typescale-emphasized-label-large-weight);
}
.btn--primario:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity), var(--acao-fundo));
  box-shadow: var(--md-sys-elevation-level1);
}
.btn--primario:active:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity), var(--acao-fundo));
  box-shadow: none;
}

/* Destrutivo usa `error`, NUNCA `primary`. A proximidade cromatica
   entre acao e erro e exatamente o risco num painel de inconsistencias. */
.btn--destrutivo {
  background: var(--md-sys-color-error); color: var(--md-sys-color-on-error);
  padding-inline: var(--e-4);
  font-weight: var(--md-sys-typescale-emphasized-label-large-weight);
}
.btn--destrutivo:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-on-error) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-error));
  box-shadow: var(--md-sys-elevation-level1);
}
.btn--destrutivo:active:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-on-error) var(--md-sys-state-pressed-state-layer-opacity), var(--md-sys-color-error));
  box-shadow: none;
}

/* Contornado: borda `outline` (o limite que informa, >= 3:1), rotulo
   `primary`. */
.btn--secundario { border-color: var(--md-sys-color-outline); padding-inline: var(--e-4); }
/* Rotulo em `error`: botao de ficar nos dialogos de sair sem gravar
   (ui.js, carga.js, vd-oportunidades.js) — nesses dialogos nao ha terracota. */
.btn--erro { color: var(--md-sys-color-error); }
.btn--erro:hover:not(:disabled)  { background: color-mix(in srgb, var(--md-sys-color-error) var(--md-sys-state-hover-state-layer-opacity), transparent); }
.btn--erro:active:not(:disabled) { background: color-mix(in srgb, var(--md-sys-color-error) var(--md-sys-state-pressed-state-layer-opacity), transparent); }
.btn--secundario:disabled {
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), transparent);
}

/* Texto: e o `.btn` puro. A classe fica pelo nome que o JS usa. */
.btn--discreto { color: var(--md-sys-color-primary); }

.btn--primario:disabled, .btn--destrutivo:disabled {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), transparent);
  box-shadow: none;
}

/* Acao por linha da tabela: botao de texto de 32px com ALVO de 48px.
   O alvo cresce por pseudo-elemento, como o `.touch` do botao de icone
   do Material Web: o clique num pseudo-elemento e clique no botao, e a
   linha da tabela nao precisa ter 48px para o alvo ter. */
.btn--linha { min-width: var(--ctrl-h); }
/* Lixeira: botao so de icone, em `error` (acao destrutiva). */
.btn--lixeira { min-width: var(--ctrl-h); padding: 0; color: var(--md-sys-color-error); }
.btn--lixeira:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-error) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.btn--linha::before {
  content: ""; position: absolute;
  /* `inset` parte da caixa de PADDING; o -1px compensa a borda do botao,
     senao o alvo fecha em 46px. */
  inset: calc((var(--alvo-min) - var(--ctrl-h)) / -2 - 1px) -1px;
}

/* ---------------------------------------------------------------------
   Abas — primary tabs do MD3
   ---------------------------------------------------------------------
   Recorte DENTRO de uma tela — nunca substituto de navegacao. A aba ativa
   se anuncia por tres coisas ao mesmo tempo: aria-selected, cor + peso
   do rotulo e o indicador de 3px em `primary`, com os cantos de cima
   arredondados (`full`), da largura do rotulo. Cor sozinha nao serve, e
   no alto contraste do Windows a borda vem da regra em base.css. */
.abas {
  display: flex; flex-wrap: wrap;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  margin-bottom: var(--e-4);
}
.aba {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--alvo-min); padding: 0 var(--e-4);
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  background: none; border: 0; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.aba:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
  color: var(--md-sys-color-on-surface);
}
.aba[aria-selected="true"] {
  color: var(--md-sys-color-primary);
  font-weight: var(--md-sys-typescale-emphasized-title-small-weight);
}
.aba[aria-selected="true"]:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
/* O indicador cobre o divisor da barra (bottom: -1px), na largura do
   rotulo (left/right = padding). */
.aba[aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--e-4); right: var(--e-4); bottom: -1px; height: 3px;
  background: var(--acao-fundo);
  border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0;
}
/* Contagem na propria aba: dispensa entrar para descobrir se tem algo.
   E o badge do MD3 (pilula, label-medium), em tom neutro; na aba ativa
   vira `secondary-container` — selecao, nao estado. */
.aba__contagem {
  padding: 1px var(--e-2); border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-variant-numeric: tabular-nums;
}
.aba[aria-selected="true"] .aba__contagem {
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
[role="tabpanel"]:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------------
   Cards do catalogo — elevated card do MD3
   --------------------------------------------------------------------- */
.familia { margin-bottom: var(--e-5); }
.familia:focus:not(:focus-visible) { outline: none; }
/* Titulo de familia: title-small em `on-surface-variant` — e placa de
   secao, nao item. */
.familia__titulo {
  font: var(--md-sys-typescale-title-small);
  font-weight: var(--md-sys-typescale-emphasized-title-small-weight);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface-variant); margin-bottom: var(--e-3);
}
/* Grade de feed do MD3: gutter de 16 (medio/expandido), 24 em janela
   grande, 8 no compacto. */
.cards { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Card elevado: `surface-container-low` + sombra de nivel 1, canto
   medium. Clicavel: no hover sobe para o nivel 2 e ganha camada de
   estado — nao e enfeite, e o que diz "isto aqui e clicavel" antes do
   clique. `prefers-reduced-motion` ja desliga a transicao (base.css). */
.card {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-4); min-height: 104px;
  /* A mesma superficie da caixa de filtros (pedido de 2026-09-28): card e
     filtro sao os dois blocos da tela, e dois brancos diferentes lado a
     lado se liam como defeito. */
  background: var(--md-sys-color-surface-container-lowest);
  /* Borda do bloco (`--bloco-borda`): transparente no claro, `outline-variant`
     no escuro, onde a sombra nao separa o card do fundo (2026-10-11). */
  border: 1px solid var(--bloco-borda);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level1);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
/* So o card que E acao (`<a>` no catalogo, `<button>` na ordem de carga)
   responde ao ponteiro. O `<article>` do catalogo das tabelas tem o
   botao dentro dele, e um card inteiro que se acende sem levar a lugar
   nenhum promete um clique que nao existe. */
.card:is(a, button):hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-surface-container-lowest));
  box-shadow: var(--md-sys-elevation-level2); text-decoration: none;
}
.card:is(a, button):active { box-shadow: var(--md-sys-elevation-level1); }
.card__topo { display: flex; align-items: flex-start; gap: var(--e-2); }
/* Titulo de card: title-medium. */
.card__nome {
  flex: 1;
  font: var(--md-sys-typescale-title-medium);
  font-weight: var(--md-sys-typescale-emphasized-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
/* Tabela fisica ao lado do rotulo. Peso normal e cor secundaria: e apoio
   para cruzar a tela com o banco, nao o nome da entidade. */
.card__tabela {
  display: block; margin-top: 2px;
  font: var(--md-sys-typescale-code); letter-spacing: 0;
  color: var(--md-sys-color-on-surface-variant);
}
/* O numero e o dado do card, em title-large e `secondary` (petroleo):
   ancora a leitura, e o rotulo ao lado deixa de competir com ele. */
.card__contagem {
  font: var(--md-sys-typescale-title-large);
  font-weight: var(--md-sys-typescale-emphasized-title-large-weight);
  color: var(--md-sys-color-secondary);
  font-variant-numeric: tabular-nums;
}
.card__rodape { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-top: auto; }
/* O estado de integridade e a PRIMEIRA linha do card, acima do nome
   (§11.10): posicao fixa, e a primeira coisa que se varre numa coluna
   de cards — "esta tudo bem aqui?" antes de "o que e isto?". */
.card__estado { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
/* Numeros do card (ui.js `numerosDoCard`): as mesmas linhas em todo card,
   uma embaixo da outra, rotulo a esquerda e numero alinhado a direita.
   Vao para o pe do card (`margin-top: auto`) para ficarem na mesma altura
   em cards lado a lado, qualquer que seja o tamanho da descricao. Zero
   fica em cor secundaria e peso normal: mesma posicao, menos tinta. */
.card__numeros {
  display: flex; flex-direction: column; gap: 2px; margin-top: auto;
  padding-top: var(--e-2); border-top: 1px solid var(--md-sys-color-outline-variant);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.card__numeros + .card__rodape { margin-top: 0; }
.card__numero { display: flex; justify-content: space-between; gap: var(--e-2); }
.card__numero strong { font-variant-numeric: tabular-nums; font-weight: 700; }
.card__numero--zero { color: var(--md-sys-color-on-surface-variant); }
.card__numero--zero strong { font-weight: 400; }
.card-dep--ativo .card__numeros { border-color: color-mix(in srgb, currentColor 30%, transparent); }
.card-dep--ativo .card__numero--zero { color: inherit; }

/* ---------------------------------------------------------------------
   Badges — sempre com TEXTO, nunca so cor
   ---------------------------------------------------------------------
   Fato ESTRUTURAL do modelo ("alimenta 6 fatos", "nao exclui", "carga
   manual"): pilula (`full`), label-medium enfatizado, container do
   estado com o texto em `on-container` — o par que o MD3 garante
   (7,19 a 7,26:1). Sem borda: no MD3 o container ja e o limite. */
.badge {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 2px var(--e-2); border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-medium);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  white-space: nowrap;
}
.badge--erro    { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.badge--alerta  { background: var(--md-extended-color-atencao-color-container); color: var(--md-extended-color-atencao-on-color-container); }
.badge--sucesso { background: var(--md-extended-color-sucesso-color-container); color: var(--md-extended-color-sucesso-on-color-container); }
.badge--neutro  { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
/* Somente leitura: e fato de politica, nao estado — container neutro,
   como `--neutro`, para manter os tres eixos que separam badge de selo
   (§11.10: o selo e o unico sem fundo). O cadeado e mascara em
   `currentColor` (o emoji tinha cor propria e mudava de desenho por SO). */
.badge--leitura { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.badge--leitura::before {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--icone-cadeado) center / contain no-repeat;
  mask: var(--icone-cadeado) center / contain no-repeat;
}
/* Ligacao direta com tabela de fato: o unico badge PREENCHIDO do card, e
   de proposito. Entre "quantos registros tem" e "de que jeito exclui",
   esta e a informacao que muda o que a pessoa pode fazer — mexer aqui
   mexe em pontuacao ja apurada. `secondary` (petroleo) porque e
   estrutura, nao estado: nao e erro nem alerta, e um fato do modelo. */
.badge--fato { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); }

/* ---------------------------------------------------------------------
   Selo — estado de integridade, sem gritar
   ---------------------------------------------------------------------
   Irma do badge, e de proposito diferente dele em TRES eixos, para que
   as duas nunca se confundam num rodape que mistura as duas:

     forma  canto extra-small (4px) contra a pilula do badge;
     peso   borda `outline-variant` e texto secundario, sem fundo, peso 500;
     cor    so o ICONE colora — nunca o texto, nunca o fundo.

   O motivo esta em `ui.js`: "sem inconsistencia" aparece em quase todo
   card, e um marcador que nao varia so tira espaco do que varia. O
   texto continua escrito por extenso ao lado do icone. Os icones do
   selo sao os tons T40 dos estados sobre superficie clara: >= 3:1
   (WCAG 1.4.11), verificado em tokens.css. */
.selo {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 1px var(--e-2) 1px 5px;
  border: 1px solid var(--md-sys-color-outline-variant);
  /* `small` (8px), o canto do chip do MD3 — era `extra-small` (4px), que
     ao lado das pilulas e dos cards se lia como canto vivo (2026-10-03). */
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  white-space: nowrap;
}
.selo__icone { flex: none; }
.selo--ok      .selo__icone { color: var(--md-extended-color-sucesso-color); }
.selo--atencao .selo__icone { color: var(--md-extended-color-atencao-color); }
/* No claro, verde e amarelo inteiros; no escuro, os tokens devolvem a
   caixinha discreta (§11.10). */
.selo--ok      { background: var(--selo-ok-fundo); color: var(--selo-ok-texto); border-color: var(--selo-ok-borda); }
.selo--atencao { background: var(--selo-atencao-fundo); color: var(--selo-atencao-texto); border-color: var(--selo-atencao-borda); }
/* Problema aberto nao vira caixinha discreta. Assume o container de
   erro do badge: e a unica coisa no card que precisa ser vista antes de
   qualquer outra. */
.selo--erro {
  background: var(--md-sys-color-error-container); border-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error-container);
}

/* ---------------------------------------------------------------------
   Tabela
   ---------------------------------------------------------------------
   O MD3 nao tem "data table" como componente; a tabela e uma lista:
   linhas divididas por `outline-variant`, cabecalho em title-small,
   celula em body-medium, hover por camada de estado. Densa: 8px de
   padding vertical, linha de ~36px. */
.tabela-rolagem { overflow-x: auto; }  /* a rolagem e do container, nao do body */
/* `position: relative` faz do container o bloco de conteudo dos absolutos
   de dentro: o `.oculto-visual` de cada dia da grade de atualizacoes tinha
   o <body> como referencia, escapava da rolagem e dava ~1000px de rolagem
   lateral na pagina em 375px (5px em 1280). */
.tabela-rolagem { position: relative; }
/* Dica de rolagem lateral (2026-10-11): uma tabela de 2.000px num painel de
   1.000 cortava "108,87" sem nada dizer que havia mais. Uma sombra em cada
   borda que ainda tem conteudo escondido, nos dois temas: camada de estado
   `dragged` (16%) sobre `on-surface`, nao sombra preta (que some no escuro).
   Sem JS: os pseudo-elementos sao itens de flex `sticky` nas bordas da
   area visivel, e a opacidade sai de uma animacao ligada a rolagem do
   proprio container (`scroll-timeline`) — sem rolagem, a linha do tempo
   fica inativa e a dica nao aparece. Navegador sem `animation-timeline`:
   sem dica, nada quebra. Com coluna presa (`.tabela--fixa`), a dica da
   esquerda nasce na borda direita da coluna presa (ver abaixo). */
.tabela-rolagem { display: flex; scroll-timeline: --rolagem x; }
.tabela-rolagem > table { flex: none; }
.tabela-rolagem::before, .tabela-rolagem::after,
.tabela--fixa:not(.tabela--com-id) tr:not(.calor__detalhe) > :first-child::after,
.tabela--fixa.tabela--com-id tr:not(.tabela__grupos) > :nth-child(2)::after {
  content: ""; pointer-events: none; opacity: 0;
  --dica: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-dragged-state-layer-opacity), transparent);
  animation-timing-function: linear; animation-fill-mode: both;
  animation-duration: auto; animation-timeline: --rolagem;
}
.tabela-rolagem::before, .tabela-rolagem::after {
  position: sticky; z-index: 3; flex: none; width: var(--e-4); align-self: stretch;
}
.tabela-rolagem::before {
  order: -1; left: 0; margin-right: calc(-1 * var(--e-4));
  background: linear-gradient(to right, var(--dica), transparent);
  animation-name: dica-esquerda;
}
.tabela-rolagem::after {
  right: 0; margin-left: calc(-1 * var(--e-4));
  background: linear-gradient(to left, var(--dica), transparent);
  animation-name: dica-direita;
}
.tabela-rolagem:has(> .tabela--fixa)::before { content: none; }
.tabela--fixa:not(.tabela--com-id) tr:not(.calor__detalhe) > :first-child::after,
.tabela--fixa.tabela--com-id tr:not(.tabela__grupos) > :nth-child(2)::after {
  position: absolute; top: 0; bottom: -1px; left: 100%; width: var(--e-3);
  background: linear-gradient(to right, var(--dica), transparent);
  animation-name: dica-esquerda;
}
@keyframes dica-esquerda { 0% { opacity: 0; } 2%, 100% { opacity: 1; } }
@keyframes dica-direita  { 0%, 98% { opacity: 1; } 100% { opacity: 0; } }
/* Nao e movimento (e a opacidade presa a rolagem): o `.01ms` do
   `prefers-reduced-motion` de base.css nao vale aqui. */
@media (prefers-reduced-motion: reduce) {
  .tabela-rolagem::before, .tabela-rolagem::after,
  .tabela--fixa:not(.tabela--com-id) tr:not(.calor__detalhe) > :first-child::after,
  .tabela--fixa.tabela--com-id tr:not(.tabela__grupos) > :nth-child(2)::after {
    animation-duration: auto !important;
  }
}
/* As ultimas 50 linhas no painel de um fato rolam dentro dele: sem
   altura maxima, o painel embutido na grade empurraria os cards da linha
   seguinte duas telas para baixo. O cabecalho acompanha (`top: 0`). */
/* `minmax(0, 1fr)`: trilha `auto` cresce ate a largura da tabela e a
   rolagem nunca liga (ver `estouro-lateral-grid-e-fieldset`). */
.ultimas-linhas {
  margin-top: var(--e-5); display: grid; gap: var(--e-2);
  grid-template-columns: minmax(0, 1fr);
}
.ultimas-linhas .tabela-rolagem { max-height: 420px; overflow: auto; }
.ultimas-linhas .tabela td { white-space: nowrap; }

.tabela {
  width: 100%; border-collapse: collapse;
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.tabela caption {
  text-align: left; padding: 0 0 var(--e-2);
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.tabela th, .tabela td {
  padding: var(--e-2) var(--e-3); text-align: left;
  border-bottom: 1px solid var(--md-sys-color-outline-variant); vertical-align: middle;
}
.tabela th:first-child, .tabela td:first-child { padding-left: var(--e-4); }
.tabela th:last-child,  .tabela td:last-child  { padding-right: var(--e-4); }
/* Coluna de acao ocupa o que precisa; sem isto ela herda uma fatia da
   largura e a acao fica a meio metro da linha que ela age. */
.tabela th:last-child, .tabela td:last-child { width: 1%; white-space: nowrap; }
/* Tabela de poucas colunas nao estica ate a borda: o texto acompanha a
   largura do conteudo e o resto fica em branco de proposito. */
.tabela td:not(.num) { max-width: 46ch; }
/* Divisor so ENTRE linhas: a ultima nao tem traco, nem no `th` preso. */
.tabela tbody tr:last-child :is(th, td) { border-bottom: 0; }
/* `top: 0`, NAO `var(--altura-topo)`. O scrollport do `thead` nunca e a
   viewport: `.tabela-rolagem` tem `overflow-x: auto` e, quando um eixo do
   overflow nao e `visible`, o outro passa a valer `auto` — o container da
   tabela vira a caixa de rolagem mais proxima (o mesmo vale para
   `.modelo-tabela` e `.problemas`, que rolam de verdade). Com `top: 56px`
   o sticky EMPURRA o cabecalho para baixo para satisfazer o offset, e
   ele cobre a primeira linha — foi o bug relatado em 2026-09-08. Com
   `top: 0` o cabecalho fica no lugar em tabela que nao rola e acompanha
   a rolagem nas que rolam. O fundo do cabecalho e o da superficie em
   que a tabela mora (`--campo-fundo`: painel, ou dialogo) — sem fundo,
   a linha que passa por baixo aparece atraves dele; com cor fixa, o
   cabecalho virava uma faixa branca dentro do dialogo cinza. */
.tabela thead th {
  background: var(--campo-fundo);
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.tabela tbody tr:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
/* Numero SEMPRE com tabular-nums: sem isso as colunas de pontuacao nao
   alinham e comparar duas linhas vira exercicio de contar digito. */
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Nome de coluna sempre centralizado (pedido de 2026-10-03); o numero da
   celula continua a direita, onde as casas se alinham. */
.tabela thead th, .tabela thead th.num { text-align: center; }
.tabela .inativo { color: var(--md-sys-color-on-surface-variant); }

.ordenar {
  background: none; border: 0; font: inherit; letter-spacing: inherit; color: inherit;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}
/* A seta inativa e o unico sinal de que o cabecalho ordena, entao e
   componente e precisa de 3:1: `outline` (o limite que informa), nunca
   opacidade — a 45% ficava em 2,26:1. */
.ordenar__seta { color: var(--md-sys-color-outline); }
.ordenar[aria-sort="ascending"] .ordenar__seta,
.ordenar[aria-sort="descending"] .ordenar__seta { color: var(--md-sys-color-primary); }

/* ---------------------------------------------------------------------
   Barra de ferramentas e paginacao
   --------------------------------------------------------------------- */
.ferramentas {
  display: flex; gap: var(--e-3) var(--e-4); align-items: flex-end; flex-wrap: wrap;
  padding: var(--e-4); border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
/* Filtro dentro da barra de ferramentas alinha pela base com a busca:
   com `align-items: center` o rotulo de um empurrava o campo do outro. */
.ferramentas .campo { min-width: 180px; }
.ferramentas:empty { display: none; }
/* A busca e a barra de busca do MD3 — pilula em `surface-container-high`,
   lupa a esquerda — com UMA diferenca em relacao ao spec: o rotulo
   continua visivel, flutuando sobre a borda de cima como no campo
   contornado. "Placeholder nunca e o unico rotulo" e decisao de
   acessibilidade (some quando a pessoa digita, e o texto dele aqui e o
   nome tecnico da coluna). O mecanismo e o mesmo do `.campo`:
   `--campo-fundo` recorta a pilula. */
.busca { position: relative; flex: 1 1 320px; min-width: 240px; max-width: 460px; padding-top: 8px; }
.busca > label {
  position: absolute; top: 0; left: var(--e-4); z-index: 1;
  padding: 0 var(--e-1);
  background: var(--campo-fundo);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.busca:has(input:focus-visible) > label { color: var(--md-sys-color-primary); }
.busca::before {
  content: ""; position: absolute; left: var(--e-3); top: calc(8px + (var(--ctrl-h) - 20px) / 2);
  width: 20px; height: 20px; pointer-events: none;
  background: var(--md-sys-color-on-surface-variant);
  -webkit-mask: var(--icone-busca) center / contain no-repeat;
  mask: var(--icone-busca) center / contain no-repeat;
}
.busca input {
  width: 100%; min-height: var(--ctrl-h);
  padding: 0 var(--e-4) 0 calc(var(--e-3) + 20px + var(--e-2));
  font: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.busca input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
.busca input:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-surface-container-high));
}
.busca input:focus-visible {
  outline: 2px solid var(--acao-fundo); outline-offset: -1px;
}
/* O `x` nativo do `type="search"` nao segue o tema; some. `Esc` limpa. */
.busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Dica da busca ao lado do campo, nao grudada nele. Em tela estreita ela
   cai para a linha de baixo em vez de espremer o campo. */
.busca-ajuda {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  padding-left: var(--e-1);
}

.paginacao {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-3) var(--e-4); border-top: 1px solid var(--md-sys-color-outline-variant);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.paginacao .espaco { flex: 1; }

/* ---------------------------------------------------------------------
   Formulario — outlined text field do MD3
   ---------------------------------------------------------------------
   O campo contornado do MD3: container com borda `outline`, rotulo
   FLUTUANTE cortando a borda de cima (body-small), texto digitado em
   body-large, texto de apoio embaixo em body-small. Foco = borda de 2px
   em `primary`; erro = borda, rotulo e apoio em `error`.

   O rotulo fica SEMPRE flutuando — nunca dentro do campo, nem vazio.
   Rotulo sempre visivel e decisao de acessibilidade (placeholder some
   quando a pessoa digita e some para leitor de tela), e no MD3 o
   rotulo flutuante e exatamente o estado "preenchido" do campo.

   Altura do container: 32px, nao os 56 do spec. E o que os tokens
   `--md-outlined-field-top-space` / `-bottom-space` do Material Web
   permitem, e e a escala de controle da DA-22 (ver tokens.css).

   O rotulo corta a borda com um fundo da cor da superficie atras do
   campo: `--campo-fundo`, que cada container que muda de superficie
   redefine (dialogo, busca solta na pagina). Sem isso o recorte deixa
   um retangulo visivel de outra cor. */
/* Formulario nao acompanha a largura da tela. Campo curto esticado por
   1200px e mais dificil de ler que o mesmo campo com 240px. */
.painel--form { max-width: var(--largura-form); }
.campos {
  display: grid; gap: var(--e-4) var(--e-5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.campo {
  position: relative;
  display: flex; flex-direction: column; gap: var(--e-1);
  /* Metade da altura do rotulo (16px) fica acima da borda do campo. */
  padding-top: 8px;
}
.campo--largo { grid-column: 1 / -1; }
/* `hidden` perde para o `display: flex` acima (mesma armadilha do `.btn`). */
.campo[hidden] { display: none; }

/* `fieldset` tem `min-inline-size: min-content` por padrao no navegador,
   e isso NAO e detalhe: significa que ele se recusa a encolher abaixo do
   texto mais largo que contem. Dentro de um dialogo de largura fixa, uma
   linha de ajuda comprida empurra a largura do fieldset, que empurra a
   do dialogo, e o resultado e a barra horizontal com o texto espremido
   numa coluna de dois caracteres. Zerar aqui e a correcao.
   Um grupo de opcoes nao e campo de texto: a borda e `outline-variant`
   (delimita, nao informa) com canto small, e a `legend` e placa de
   secao — label-medium enfatizado, como o titulo de grupo da nav. */
fieldset.campo {
  min-inline-size: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: var(--e-2) var(--e-3) var(--e-3); margin: 0;
}
fieldset.campo > legend {
  padding: 0 var(--e-1); margin-left: var(--e-2);
  font: var(--md-sys-typescale-label-medium);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* Rotulo flutuante: body-small, sobre a borda de cima, com fundo que
   corta a borda. `.escolha` e rotulo de OPCAO (radio/checkbox com
   texto) e fica de fora — ele e uma linha inteira, nao um rotulo de
   campo. */
/* Sem tracking e com 2px de recuo: o nome de coluna mais longo do DDL
   com "(obrigatorio)" atras ("atendimento uso indevido (obrigatorio)")
   tem de caber numa coluna de 268px — com os 0,4px de tracking do
   body-small ele passava de 259px e a reticencia comia justamente o
   "(obrigatorio)". A reticencia continua como ultimo recurso. */
.campo > label:not(.escolha) {
  position: absolute; top: 0; left: var(--e-2); z-index: 1;
  padding: 0 2px;
  background: var(--campo-fundo);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: 0;
  color: var(--md-sys-color-on-surface-variant);
  max-width: calc(100% - var(--e-3));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.campo__obrigatorio { font-weight: 400; }

.campo input, .campo select, .campo textarea {
  font: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  min-height: var(--ctrl-h); padding: 0 var(--e-3);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--campo-fundo); width: 100%;
  transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
/* `padding-block: 0` acima nao e descuido: com 8px em cima e embaixo, a
   linha de 24px do texto somava 40px de altura e o `min-height` de 32
   nunca chegava a valer. Altura de controle e o `min-height`; o texto
   centraliza sozinho. O textarea e a excecao, porque e o unico multilinha. */
.campo textarea {
  padding: var(--e-1) var(--e-3); min-height: calc(var(--ctrl-h) * 2);
}
.campo :is(input, select, textarea):hover:not(:disabled):not(:focus-visible) {
  border-color: var(--md-sys-color-on-surface);
}
/* Foco: a borda de 2px em `primary` do campo contornado. E `outline`
   (desenhado por dentro da borda de 1px), e nao `border-width`, para
   nao mexer no layout — e para o alto contraste do Windows continuar
   vendo um foco. O rotulo acompanha. */
.campo :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--acao-fundo); outline-offset: -1px;
  border-color: var(--acao-fundo);
}
.campo:has(:is(input, select, textarea):focus-visible) > label:not(.escolha) {
  color: var(--md-sys-color-primary);
}

/* `<select>`: seta propria em `currentColor` (mascara), no lugar da
   nativa, que nao segue o tema. O `padding-right` reserva o espaco. */
.campo select { appearance: none; padding-right: calc(var(--e-3) + 24px); cursor: pointer; }
.campo:has(> select)::after {
  content: ""; position: absolute; pointer-events: none;
  right: var(--e-3); top: calc(8px + (var(--ctrl-h) - 24px) / 2);
  width: 24px; height: 24px; background: var(--md-sys-color-on-surface-variant);
  -webkit-mask: var(--icone-seta) center / contain no-repeat;
  mask: var(--icone-seta) center / contain no-repeat;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.campo:has(> select:open)::after { transform: rotate(180deg); }

/* A LISTA de todo seletor e o menu do MD3, a mesma do combobox de PDV
   (`.combo__lista`): `--menu-fundo`, canto `small`, nivel 2, item de 40px
   com camada de estado, o escolhido em `secondary-container`. A lista
   nativa (Windows: fundo branco, destaque azul do sistema) era o segundo
   desenho de lista suspensa no mesmo filtro (2026-10-03). `base-select` e
   o select personalizavel (Chrome/Edge 135+); fora dele a lista continua
   a nativa, sem quebrar nada. */
@supports (appearance: base-select) {
  .campo select, .campo select::picker(select) { appearance: base-select; }
  /* Uma linha so, com reticencia: o `base-select` deixaria a opcao longa
     ("1.8 Satisfacao de Revendedores") quebrar dentro do campo de 32px. */
  /* `overflow: clip` na caixa de CONTEUDO: o texto da opcao fica num
     elemento interno, e com `hidden` ele so era cortado na borda de padding
     — passava por baixo da seta. */
  .campo select {
    display: block; align-content: center; white-space: nowrap;
    overflow: clip; overflow-clip-margin: content-box;
  }
  .campo select::picker-icon { display: none; }
  .campo select::picker(select) {
    margin-top: 2px; padding: var(--e-2) 0; max-height: 320px;
    border: 0; border-radius: var(--md-sys-shape-corner-small);
    background: var(--menu-fundo); color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level2);
    scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline) transparent;
  }
  .campo select option {
    display: flex; align-items: center; min-height: 40px; padding: 0 var(--e-3);
    font: var(--md-sys-typescale-body-medium);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  }
  .campo select option::checkmark { display: none; }
  .campo select option:hover, .campo select option:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
  }
  .campo select option:checked {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-weight: var(--md-sys-typescale-emphasized-label-large-weight);
  }
  .campo select option:checked:focus-visible {
    background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-secondary-container));
  }
}

/* Campo booleano: caixa de marcacao com o rotulo AO LADO, nao flutuando
   sobre nada. `width: 100%` acima vale para TODO input, e caixa de
   marcacao nao tem largura de campo de texto. */
.campo:has(> input[type="checkbox"]) {
  flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: var(--e-2) var(--e-3); min-height: var(--ctrl-h); padding-top: 0;
}
/* A ordem visual (caixa, rotulo, apoio) nao e a do DOM (rotulo, caixa,
   apoio): `order` a corrige sem mexer no HTML que o formulario gera. */
.campo:has(> input[type="checkbox"]) > input[type="checkbox"] { order: 0; }
.campo:has(> input[type="checkbox"]) > label { order: 1; }
.campo:has(> input[type="checkbox"]) > label {
  position: static; padding: 0; background: none; max-width: none;
  white-space: normal; overflow: visible;
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface);
}
.campo:has(> input[type="checkbox"]) > .campo__ajuda,
.campo:has(> input[type="checkbox"]) > .campo__erro { order: 2; flex-basis: 100%; padding-left: 0; }

.campo :is(input, select, textarea):disabled {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent);
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), transparent);
  cursor: not-allowed;
}
.campo:has(> :is(input, select, textarea):disabled) > label:not(.escolha) {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent);
}
/* Texto de apoio: body-small, com o recuo de 16 do MD3. */
.campo__ajuda {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  padding: 0 var(--e-4);
}

/* Erro em TEXTO + borda + aria-invalid. Cor nunca sozinha. */
.campo [aria-invalid="true"] { border-color: var(--md-sys-color-error); }
.campo [aria-invalid="true"]:focus-visible { outline-color: var(--md-sys-color-error); }
.campo:has([aria-invalid="true"]) > label:not(.escolha) { color: var(--md-sys-color-error); }
.campo__erro {
  display: flex; align-items: flex-start; gap: 4px;
  padding: 0 var(--e-4);
  color: var(--md-sys-color-error);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.campo__erro[hidden] { display: none; }

/* --- Caixa de marcacao e botao de opcao do MD3, desenhados em CSS ---
   Caixa de 18px, canto de 2px, borda de 2px em `on-surface-variant`;
   marcada, preenche em `primary` com a marca em `on-primary`. O radio
   e um circulo de 20px com o ponto em `primary`. `appearance: none`
   tira o desenho nativo; o comportamento (teclado, `:checked`, form)
   continua sendo o do navegador. */
/* Token de COMPONENTE (o unico dos tres CSS): o canto de 2dp da caixa de
   marcacao e valor do spec e nao existe na escala de forma do sistema. */
:root { --md-checkbox-container-shape: 2px; }
.campo input[type="checkbox"], .escolha input[type="checkbox"], .chip--escolha input[type="checkbox"],
.campo input[type="radio"], .escolha input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-checkbox-container-shape); background: transparent;
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.campo input[type="radio"], .escolha input[type="radio"] {
  width: 20px; height: 20px; border-radius: var(--md-sys-shape-corner-full);
}
:is(.campo, .escolha, .chip--escolha) input[type="checkbox"]:checked {
  background: var(--acao-fundo); border-color: var(--acao-fundo);
}
:is(.campo, .escolha, .chip--escolha) input[type="checkbox"]:checked::before {
  content: ""; width: 14px; height: 14px; background: var(--md-sys-color-on-primary);
  -webkit-mask: var(--icone-marca) center / contain no-repeat;
  mask: var(--icone-marca) center / contain no-repeat;
}
:is(.campo, .escolha) input[type="radio"]:checked { border-color: var(--acao-fundo); }
:is(.campo, .escolha) input[type="radio"]:checked::before {
  content: ""; width: 10px; height: 10px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--acao-fundo);
}
:is(.campo, .escolha, .chip--escolha) :is(input[type="checkbox"], input[type="radio"]):disabled {
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent);
  cursor: not-allowed;
}

.acoes-form {
  display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap;
  padding-top: var(--e-4); margin-top: var(--e-4); border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* ---------------------------------------------------------------------
   Varias linhas num formulario de criacao
   ---------------------------------------------------------------------
   Cada linha e um `fieldset` de verdade: o leitor de tela anuncia
   "Registro 3" ao entrar no grupo, e sem isso a pessoa que nao ve a tela
   perde a nocao de em qual bloco esta digitando. Cada linha e um card
   contornado. */
.linhas-form { display: flex; flex-direction: column; gap: var(--e-4); }

.linha-form {
  /* Ver a nota em `fieldset.campo`: sem `min-inline-size: 0` o fieldset
     se recusa a encolher e abre rolagem lateral na pagina. */
  min-inline-size: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--e-4); margin: 0;
}
.linha-form__titulo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-2);
  font: var(--md-sys-typescale-label-medium);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
/* O numero e o que permite falar da linha: a mensagem de erro diz "a
   linha 3 nao passou", e sem numero visivel isso nao localiza nada.
   E o badge grande do MD3, em `secondary`. */
.linha-form__numero {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);
  font: var(--md-sys-typescale-label-medium); font-variant-numeric: tabular-nums;
}
.linha-form__acoes {
  display: flex; gap: var(--e-2); flex-wrap: wrap;
  margin-top: var(--e-3); padding-top: var(--e-3);
  border-top: 1px dashed var(--md-sys-color-outline-variant);
}

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

/* ---------------------------------------------------------------------
   Estados obrigatorios de toda tela
   --------------------------------------------------------------------- */
.estado {
  padding: var(--e-6) var(--e-4); text-align: center;
  color: var(--md-sys-color-on-surface-variant);
}
.estado__titulo {
  font: var(--md-sys-typescale-title-medium);
  font-weight: var(--md-sys-typescale-emphasized-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  color: var(--md-sys-color-on-surface); margin-bottom: var(--e-2);
}
.estado__acao { margin-top: var(--e-4); display: flex; justify-content: center; gap: var(--e-2); flex-wrap: wrap; }
.estado--erro .estado__titulo { color: var(--md-sys-color-error); }

/* Indicador de progresso circular do MD3: traco de 4px em `primary`
   sobre trilha em `secondary-container`, 24px. */
.carregando { display: flex; align-items: center; justify-content: center; gap: var(--e-3); padding: var(--e-6); }
.girador {
  width: 24px; height: 24px; border-radius: var(--md-sys-shape-corner-full);
  border: 4px solid var(--md-sys-color-secondary-container); border-top-color: var(--acao-fundo);
  animation: girar 1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   Modal — o dialogo basico do MD3
   ---------------------------------------------------------------------
   `surface-container-high`, canto extra-large (28px), elevacao 3,
   titulo em headline-small, corpo em body-medium, acoes alinhadas a
   direita. Scrim: `scrim` a 32%. Entra com emphasized-decelerate. */
.fundo-modal {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
  display: flex; align-items: center; justify-content: center; padding: var(--e-4); z-index: 50;
}
.modal {
  --campo-fundo: var(--md-sys-color-surface-container-high);
  display: flex; flex-direction: column;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-sys-elevation-level3);
  min-width: min(280px, 100%); max-width: 560px; width: 100%; max-height: 86vh;
  /* `hidden` e nao `auto`: quem rola e o corpo. Rolando o dialogo
     inteiro, o botao de confirmar sai da vista em tela baixa e a pessoa
     nao acha como concluir. */
  overflow: hidden;
  animation: entrar-dialogo var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate);
}
@keyframes entrar-dialogo {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}
.modal__titulo {
  flex: none; padding: var(--e-5) var(--e-5) var(--e-4);
  font: var(--md-sys-typescale-headline-small);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  color: var(--md-sys-color-on-surface);
  /* Titulo longo (nome qualificado de tabela) quebra em vez de esticar
     o dialogo para fora da tela. */
  overflow-wrap: anywhere;
}
.modal__corpo {
  flex: 1 1 auto; min-height: 0;
  padding: 0 var(--e-5) var(--e-4);
  color: var(--md-sys-color-on-surface-variant);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  /* Texto de ajuda longo nao pode empurrar largura: sem isto, uma
     palavra grande abre barra horizontal no dialogo inteiro. */
  overflow-wrap: anywhere;
}
/* Acoes do dialogo. O MD3 usa botoes de texto por padrao e admite o
   preenchido quando a acao principal precisa de mais enfase — e aqui
   precisa: com `primary` terracota e `error` vermelho, "Manter" e
   "Excluir" em texto puro ficariam a um matiz de distancia, que e
   exatamente o risco que a regra dos tokens proibe. Entao a acao
   secundaria ("Manter", "Cancelar") vira botao de texto, e a que
   confirma ou destroi continua PREENCHIDA, na cor do papel dela. */
.modal__acoes {
  flex: none; flex-wrap: wrap;
  display: flex; gap: var(--e-2); justify-content: flex-end;
  padding: var(--e-2) var(--e-5) var(--e-5);
}
.modal__lista { margin: var(--e-3) 0; padding-left: var(--e-5); }
/* Formulario direto no corpo do dialogo (editor de catalogo, carga): sem
   a grade `.campos`, campo e fieldset encostavam um no outro e a legenda
   do segundo apoiava na borda do primeiro. */
.modal__corpo > form { display: flex; flex-direction: column; gap: var(--e-3); }
.modal__corpo > form > .nota { margin-bottom: 0; }
/* Nota de leitura dentro do dialogo: a superficie dela e a MESMA do
   dialogo, entao sobe um degrau e ganha borda para continuar sendo um
   aviso e nao um paragrafo. */
.modal .nota--leitura {
  background: var(--md-sys-color-surface-container-highest);
  border: 1px solid var(--md-sys-color-outline-variant);
}
/* Saida: emphasized-accelerate, 200ms (ui.js poe a classe e remove o
   elemento no `animationend`). */
.fundo-modal--saindo .modal {
  animation: sair-dialogo var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards;
}
@keyframes sair-dialogo {
  to { opacity: 0; transform: scale(.92); }
}

/* ---------------------------------------------------------------------
   Toast — o snackbar do MD3
   ---------------------------------------------------------------------
   `inverse-surface` com texto `inverse-on-surface`, canto extra-small,
   acao em `inverse-primary`, fechar como botao de icone. O tipo
   (sucesso, erro, alerta) entra pelo ICONE ao lado do titulo — o
   snackbar nao tem variante de cor no MD3, e o texto ja diz o que
   aconteceu. */
.toasts {
  position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 60;
  display: flex; flex-direction: column; gap: var(--e-2); max-width: 400px;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--e-2);
  padding: var(--e-3) var(--e-2) var(--e-3) var(--e-4);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-level3);
  min-height: 48px;
  animation: entrar-toast var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}
@keyframes entrar-toast {
  from { opacity: 0; transform: translateY(var(--e-3)); }
  to   { opacity: 1; transform: none; }
}
.toast__corpo   { flex: 1; min-width: 0; padding-top: 2px; }
.toast__titulo  {
  display: flex; align-items: center; gap: var(--e-2);
  font: var(--md-sys-typescale-body-medium);
  font-weight: var(--md-sys-typescale-emphasized-body-medium-weight);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  margin-bottom: 2px;
}
.toast__titulo::before {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--icone-info) center / contain no-repeat;
  mask: var(--icone-info) center / contain no-repeat;
}
/* Icone no papel INVERSO do estado (T80 no claro, T40 no escuro): e o par
   de `inverse-surface` nos dois esquemas. Um tom fixo da paleta sumiria
   no escuro (1,32:1). */
.toast--sucesso .toast__titulo::before { -webkit-mask-image: var(--icone-sucesso); mask-image: var(--icone-sucesso); color: var(--md-extended-color-sucesso-inverse-color); }
.toast--erro    .toast__titulo::before { -webkit-mask-image: var(--icone-erro);    mask-image: var(--icone-erro);    color: var(--md-sys-color-inverse-error); }
.toast--alerta  .toast__titulo::before { -webkit-mask-image: var(--icone-atencao); mask-image: var(--icone-atencao); color: var(--md-extended-color-atencao-inverse-color); }
.toast__texto   {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-inverse-on-surface);
}
/* Acoes do snackbar: botoes de TEXTO (`btn--discreto`, ui.js) em
   `inverse-primary`. Hover por sublinhado e nao por camada de estado:
   no escuro a camada escurecia o fundo claro e o rotulo caia a 4,47:1.
   O anel de foco global e `secondary`, que nao tem par com
   `inverse-surface` (2,02:1) — aqui ele e `inverse-on-surface`. */
.toast__acoes { margin-top: var(--e-2); display: flex; gap: var(--e-2); flex-wrap: wrap; }
.toast .btn--discreto { color: var(--md-sys-color-inverse-primary); }
.toast .btn--discreto:hover:not(:disabled) { background: transparent; text-decoration: underline; }
.toast .btn:focus-visible { outline-color: var(--md-sys-color-inverse-on-surface); }
/* O "x" de fechar vira botao de icone: 32px quadrado, sem texto visivel
   (o `aria-label` continua). O caractere `&times;` some da vista e a
   mascara desenha o icone. */
.toast > .btn[aria-label] {
  flex: none; width: var(--ctrl-h); min-width: var(--ctrl-h); padding: 0;
  color: var(--md-sys-color-inverse-on-surface); font-size: 0;
  /* O no de texto do `&times;` continua item de flex mesmo a 0px e
     recebia o `gap` de 8px: o icone ficava 4px fora do centro. */
  gap: 0;
}
/* Saida do snackbar: emphasized-accelerate, 200ms. */
.toast--saindo {
  animation: sair-toast var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards;
}
@keyframes sair-toast {
  to { opacity: 0; transform: translateY(var(--e-2)); }
}
.toast > .btn[aria-label]::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--icone-fechar) center / contain no-repeat;
  mask: var(--icone-fechar) center / contain no-repeat;
}

/* ---------------------------------------------------------------------
   Ajuda da tela — divulgacao progressiva
   ---------------------------------------------------------------------
   O "por que a tela e assim" nao pode ocupar o topo dela. Regra, ressalva
   e criterio de leitura sao lidos UMA vez, no primeiro contato; depois
   viram parede entre a pessoa e o dado. Fechado por padrao, e uma linha;
   aberto, e o texto inteiro que estava solto na pagina.

   Fechada, e um chip de assistencia do MD3 (contornado, canto small,
   label-large); aberta, um card contornado. Nao e `.nota`: nota e aviso,
   e tem limite de UM por tela. Isto e referencia. */
.ajuda-tela {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest); margin-bottom: var(--e-4);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  /* Fechada, a caixa tem a largura do proprio rotulo. Ocupando a linha
     inteira ela se le como aviso vazio — que e justamente o que esta
     tela tinha demais. */
  width: fit-content; max-width: 100%;
}
.ajuda-tela > summary {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: var(--ctrl-h); padding: var(--e-1) var(--e-3) var(--e-1) var(--e-2);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-on-surface);
  cursor: pointer; border-radius: var(--md-sys-shape-corner-small);
}
.ajuda-tela > summary:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
/* `display: flex` no summary apaga o triangulo nativo do Chrome. Sem
   nenhuma marca, a linha vira texto que ninguem clica. A seta e a
   mascara do MD3, em `currentColor`, e gira quando abre. */
.ajuda-tela > summary::marker, .ajuda-tela > summary::-webkit-details-marker { display: none; }
.ajuda-tela > summary::before {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--icone-seta) center / contain no-repeat;
  mask: var(--icone-seta) center / contain no-repeat;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.ajuda-tela[open] > summary::before { transform: rotate(180deg); }
.ajuda-tela[open] > summary {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0 0;
}
.ajuda-tela__corpo { padding: var(--e-3) var(--e-4); }
.ajuda-tela__corpo > p { max-width: 70ch; }
.ajuda-tela__corpo > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Detalhe
   --------------------------------------------------------------------- */
.pares { display: grid; gap: var(--e-4) var(--e-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.par__rotulo {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.par__valor  { font-weight: 500; word-break: break-word; }
.pares dd { margin: 0; }

/* A seta de expandir do console — UMA (2026-10-03). O `expand_more` do
   Material Symbols em mascara (`--icone-seta`), `currentColor`: para baixo
   fechado, gira 180° aberto. Era o desenho de quatro jeitos (mascara, SVG
   em traco, borda em L e o triangulo nativo do <details>); seletor,
   acordeao, "Como ler esta tela", botao de linha e combobox usam esta. */
.seta-expandir {
  display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--icone-seta) center / contain no-repeat;
          mask: var(--icone-seta) center / contain no-repeat;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
[aria-expanded="true"] > .seta-expandir { transform: rotate(180deg); }

/* Bloco recolhivel: item de lista do MD3 com seta a direita. */
.recolhivel > summary {
  cursor: pointer; padding: var(--e-3) var(--e-4); min-height: var(--alvo-min);
  font: var(--md-sys-typescale-title-small);
  font-weight: var(--md-sys-typescale-emphasized-title-small-weight);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  display: flex; align-items: center; gap: var(--e-2);
  list-style: none;
}
.recolhivel > summary::-webkit-details-marker { display: none; }
.recolhivel > summary::after {
  content: ""; margin-left: auto; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--icone-seta) center / contain no-repeat;
  mask: var(--icone-seta) center / contain no-repeat;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.recolhivel[open] > summary::after { transform: rotate(180deg); }
.recolhivel > summary:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}

.arvore-json {
  font: var(--md-sys-typescale-code); letter-spacing: 0; line-height: 1.6;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-small); padding: var(--e-3);
  overflow-x: auto;
}
.arvore-json .chave  { color: var(--md-sys-color-secondary); font-weight: 600; }
/* O valor mora sobre `surface-container-highest`: `primary` da 5,02:1
   ali. E a arvore da `memoria_calculo` — a tela que responde "por que
   recebemos essa pontuacao". */
.arvore-json .valor  { color: var(--md-sys-color-primary); }
.arvore-json ul { list-style: none; margin: 0; padding-left: var(--e-4); }

/* ---------------------------------------------------------------------
   Dependencias — ordem de carga e mapa de ligacoes
   ---------------------------------------------------------------------
   O diagrama e apoio; a lista e a informacao. Por isso nada aqui depende
   so de cor: obrigatoria/opcional aparece em TEXTO no badge e, no SVG,
   tambem em traco (cheio x tracejado). */

.etapa { margin-bottom: var(--e-5); }
.etapa__cabecalho {
  display: flex; align-items: baseline; gap: var(--e-3);
  flex-wrap: wrap; margin-bottom: var(--e-3);
}
/* Numero da etapa: badge em `primary-container`. */
.etapa__numero {
  display: inline-flex; align-items: center;
  padding: 2px var(--e-2); border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-medium);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  text-transform: uppercase;
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
}

/* Card do catalogo virou botao: sem o reset, herda a aparencia nativa e
   o texto centraliza. */
.card-dep {
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left; width: 100%;
  cursor: pointer;
}
/* Selecionado: `secondary-container`, como todo estado de selecao do
   MD3. Tambem por marca de texto: fundo sozinho some no alto contraste
   do Windows (a borda vem de base.css). */
.card-dep--ativo {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: var(--md-sys-elevation-level0);
}
.card-dep--ativo:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-secondary-container));
}
.card-dep--ativo .card__contagem, .card-dep--ativo .card__tabela { color: inherit; }
/* Sobre `secondary-container` as bordas neutras somem (1,0:1 no escuro):
   a borda passa a vir do proprio texto. */
.card-dep--ativo .selo, .card-dep--ativo .badge--leitura {
  border-color: color-mix(in srgb, currentColor 60%, transparent);
}
.card-dep--ativo .card__nome::after {
  content: " — no mapa"; font-weight: 500;
  font-size: var(--md-sys-typescale-body-small-size);
}

/* Mapa embutido na propria grade de cards: item de largura inteira, na
   linha seguinte a do card clicado. O painel morava no topo da pagina, e
   escolher um card da etapa 4 virava subir para ler e descer para
   escolher o proximo. A borda `secondary` repete a selecao do card
   ativo, para o painel se ler como continuacao dele e nao como bloco
   solto. */
.mapa-inline {
  grid-column: 1 / -1;
  border-color: var(--md-sys-color-secondary);
  scroll-margin-top: var(--e-5);
}

/* A legenda mora ao lado do que ela explica: sob o diagrama, dentro do
   painel do mapa. */
.legenda {
  display: flex; gap: var(--e-4); flex-wrap: wrap;
  margin: calc(var(--e-2) * -1) 0 var(--e-4);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.legenda__item { display: inline-flex; align-items: center; gap: 6px; color: var(--md-sys-color-on-surface-variant); }
.legenda__traco {
  display: inline-block; width: 22px; height: 0;
  border-top: 2px solid var(--md-sys-color-secondary);
}
.legenda__traco--opcional { border-top-style: dashed; }

/* --- Diagrama --- */
.mapa-rolagem { overflow-x: auto; margin-bottom: var(--e-4); }
.mapa { width: 100%; }
.mapa__coluna {
  font-size: var(--md-sys-typescale-label-medium-size); font-weight: 600;
  letter-spacing: .5px; fill: var(--md-sys-color-on-surface-variant);
}
.no rect { fill: var(--md-sys-color-surface-container-lowest); stroke: var(--md-sys-color-outline-variant); stroke-width: 1; rx: var(--md-sys-shape-corner-small); }
.no__rotulo { font-size: var(--md-sys-typescale-body-medium-size); font-weight: 600; fill: var(--md-sys-color-on-surface); }
.no__meta   { font-size: var(--md-sys-typescale-body-small-size); fill: var(--md-sys-color-on-surface-variant); }
.no--centro rect { fill: var(--md-sys-color-secondary-container); stroke: var(--md-sys-color-secondary); stroke-width: 2; }
.no--centro .no__rotulo, .no--centro .no__meta { fill: var(--md-sys-color-on-secondary-container); }
/* Entidade ainda sem registro: contorno tracejado ambar. O texto do no
   ja traz a contagem 0 — o tracejado so apressa a leitura. */
.no--vazio rect { stroke: var(--md-extended-color-atencao-color); stroke-dasharray: 4 3; }

.aresta { fill: none; stroke: var(--md-sys-color-secondary); stroke-width: 1.5; }
.aresta--opcional { stroke-dasharray: 5 4; stroke: var(--md-sys-color-outline); }
.seta { fill: var(--md-sys-color-secondary); }

/* --- Listas de ligacao --- */
.colunas-dep {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: var(--e-4);
}
.ligacoes { list-style: none; margin: 0; padding: 0; }
.ligacao {
  padding: var(--e-2) 0; border-bottom: 1px solid var(--md-sys-color-outline-variant);
  display: flex; flex-direction: column; gap: 2px;
}
.ligacao:last-child { border-bottom: 0; }
.ligacao__topo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* --- Cadeia completa de pre-requisitos --- */
.cadeia { margin: 0; padding-left: var(--e-5); }
.cadeia__item { padding: 2px 0; }
.cadeia__item--vazio > a::after {
  content: " (sem registro)"; color: var(--md-extended-color-atencao-color); font-weight: 600;
}
.cadeia__item--alvo { padding-top: var(--e-2); }

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
/* Duas linhas: a caixa centralizada e o rodape no fim da tela. */
.login {
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  min-height: 100vh; padding: var(--e-4);
}
.login .rodape { padding-top: var(--e-4); }
.login__caixa { width: 100%; max-width: 380px; }
.login__marca { text-align: center; margin-bottom: var(--e-5); }
.login__marca h1 { margin: 0 0 var(--e-1); font-weight: 400; }
.login__marca h1 strong { font-weight: 700; }
/* Logo propria do login (pedido de 2026-10-12), versao por tema em
   `--marca-logo-login`: colorida no claro, preta no escuro, como a da barra. */
.login__logo { display: block; width: 100%; max-width: 240px; aspect-ratio: 2339 / 753;
               margin: 0 auto var(--e-3); background: var(--marca-logo-login) center / contain no-repeat; }

/* Regras da senha no primeiro acesso (DA-36): a cor do icone acompanha o
   que ja foi atendido, e o texto diz o mesmo para quem nao ve a cor. */
.regras-senha {
  list-style: none; margin: var(--e-3) 0 var(--e-4); padding: 0;
  display: grid; gap: var(--e-1);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.regras-senha li { display: flex; align-items: center; gap: var(--e-2); }
.regras-senha li[data-ok="true"] { color: var(--md-sys-color-on-surface); }
.regras-senha li[data-ok="true"] .selo__icone { color: var(--md-extended-color-sucesso-color); }

/* ---------------------------------------------------------------------
   Proposito no card — por que a tabela existe
   ---------------------------------------------------------------------
   Duas linhas, com reticencia: o card precisa continuar comparavel com o
   vizinho. Frase de tamanho livre desalinha a grade inteira e o rodape
   de badges deixa de ficar na mesma altura em cards lado a lado. Quem
   quer o texto completo abre a tabela. Corpo de card = body-medium no
   MD3; aqui body-small, porque e apoio e nao conteudo. */
.card__proposito {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}

/* ---------------------------------------------------------------------
   Barra de filtros de catalogo
   ---------------------------------------------------------------------
   Fica ACIMA das abas, nao dentro de cada painel: o filtro vale para o
   recorte inteiro e refaze-lo a cada aba faria a pessoa filtrar duas
   vezes a mesma coisa. Controle e conteudo tem o mesmo desenho de bloco
   (o card elevado de `.painel`). Padding de 8 em cima: somado aos 8 do
   rotulo flutuante, o respiro visual fica 16 nos quatro lados. */
.filtros {
  box-shadow: var(--md-sys-elevation-level1);
  display: flex; gap: var(--e-3) var(--e-4); align-items: flex-end; flex-wrap: wrap;
  padding: var(--e-2) var(--e-4) var(--e-4); margin-bottom: var(--e-4);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--bloco-borda);
  border-radius: var(--md-sys-shape-corner-medium);
}
.filtros .campo { min-width: 200px; }
.filtros__resultado {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
/* O botao de limpar so aparece quando ha o que limpar: botao permanente
   desabilitado ocupa alvo de toque sem nunca fazer nada. */
.filtros__limpar { margin-left: auto; }
.filtros__limpar[hidden] { display: none; }
/* "N de M PDVs" (FiltrosPdv): dentro da caixa, ao fim, no eixo dos campos. */
.filtros__contagem { margin: 0 0 var(--e-2) auto; }
.filtros__contagem:empty { display: none; }
.filtros__contagem ~ .filtros__limpar { margin-left: 0; }

/* Busca sozinha na tela: campo e resultado, sem a caixa da barra de
   ferramentas. Um controle so dentro de `.filtros` desenha um retangulo
   de 1.200px com 360px de conteudo. O campo mora sobre a superficie da
   pagina: o rotulo flutuante recorta a borda com essa cor. */
.busca-tela {
  --campo-fundo: var(--md-sys-color-surface);
  display: flex; align-items: flex-end; gap: var(--e-3);
  flex-wrap: wrap; margin-bottom: var(--e-4);
}
.busca-tela .campo { --campo-fundo: var(--md-sys-color-surface); flex: 0 1 360px; }
.busca-tela p { margin: 0 0 var(--e-1); }

/* ---------------------------------------------------------------------
   Badges de carga (tela de fatos)
   ---------------------------------------------------------------------
   Manual x automatica e a informacao central da tela, entao ela nao pode
   depender de cor: cada badge carrega o texto inteiro. Manual usa
   atencao (alguem precisa agir), automatica usa neutro (nao ha o que
   fazer), motor usa `secondary` (estrutura, nao estado). */
.badge--manual     { background: var(--md-extended-color-atencao-color-container); color: var(--md-extended-color-atencao-on-color-container); }
.badge--automatica { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.badge--motor      { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
/* Meta e o unico badge em `primary` do console: e a familia que aceita
   escrita por arquivo, e por isso a unica onde o badge marca uma ACAO
   disponivel e nao um estado. O rotulo tem 12px, que a WCAG conta como
   texto NORMAL; `on-primary` sobre `--acao-fundo` (T49) da 4,64:1. */
.badge--meta       { background: var(--acao-fundo); color: var(--md-sys-color-on-primary); }
.badge--base100    { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* Chips de codigo de indicador dentro do card: chip de assistencia do
   MD3 compacto — contornado, canto small, label-medium, 24px de altura
   (o alvo minimo de ponteiro da WCAG 2.5.8; os 32 do spec dobrariam o
   rodape de um card com seis indicadores). */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 0 var(--e-2); border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline);
  font: var(--md-sys-typescale-label-medium);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface); text-decoration: none;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
a.chip:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   Grupos da navegacao lateral
   ---------------------------------------------------------------------
   Sete itens passam do limite de 5-7 sem hierarquia. Agrupados em quatro
   blocos com titulo, a lista volta a ser varrida por bloco em vez de item
   a item. O titulo e o "section header" do drawer do MD3 — mas em
   label-medium enfatizado e nao em title-small: o item do drawer aqui
   nao tem icone, e com titulo e item nos mesmos 14px o grupo se lia
   como mais um item (e era clicado, e nao acontecia nada). Um degrau
   abaixo, o titulo vira PLACA e o que se clica ganha. */
/* label-small desde 2026-09-29: o item desceu para label-medium, e o
   titulo desce junto para continuar um degrau abaixo dele. */
.nav__grupo { padding: var(--e-1) var(--e-4) 2px; }
.nav__grupo-titulo {
  font: var(--md-sys-typescale-label-small);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--casca-titulo); margin: 0;
}
/* O separador entre grupos NUNCA apareceu: a regra era
   `.nav__grupo + .nav__grupo`, e entre dois grupos existe um `<ul>`. Sem
   ele os quatro grupos escorriam como uma lista so de 8 itens. E o
   divisor do drawer, `outline-variant`. */
.nav__lista + .nav__grupo {
  margin-top: var(--e-1); padding-top: var(--e-2);
  border-top: 1px solid var(--casca-divisor);
}

/* ---------------------------------------------------------------------
   Tela de indicadores — que tabelas cada um consome
   ---------------------------------------------------------------------
   Cada indicador e um card contornado que abre. */
.indicador { margin-bottom: var(--e-3); }
.indicador > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-3) var(--e-4); min-height: var(--alvo-min);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.indicador > summary::-webkit-details-marker { display: none; }
.indicador > summary:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-surface-container-lowest));
}
.indicador[open] > summary {
  border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0;
  border-bottom-color: transparent;
}
/* Seta em mascara, nao em caractere: o triangulo nativo do details nao
   aceita cor nem tamanho e some no alto contraste. */
.indicador__seta {
  color: var(--md-sys-color-on-surface-variant); flex: none; font-size: 0;
  width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--icone-seta) center / contain no-repeat;
  mask: var(--icone-seta) center / contain no-repeat;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.indicador[open] .indicador__seta { transform: rotate(180deg); }
.indicador__codigo {
  font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.5ch;
  color: var(--md-sys-color-secondary);
}
.indicador__nome {
  flex: 1; min-width: 220px;
  font: var(--md-sys-typescale-title-medium);
  font-weight: var(--md-sys-typescale-emphasized-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.indicador__pontos { font-variant-numeric: tabular-nums; font-weight: 600; }
.indicador__corpo {
  padding: var(--e-4);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant); border-top: 0;
  border-radius: 0 0 var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium);
}

/* Uma coluna por papel: fato, dimensao, parametro. Sao tres perguntas
   diferentes ("o que eu carrego", "o que precisa estar cadastrado", "que
   regra converte em ponto") e misturar as tres numa lista so obrigava a
   ler o schema de cada linha para saber com qual delas se esta lidando. */
.papeis {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.papel__titulo {
  font: var(--md-sys-typescale-title-small);
  font-weight: var(--md-sys-typescale-emphasized-title-small-weight);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 var(--e-2); padding-bottom: var(--e-1);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.papel__lista { list-style: none; margin: 0; padding: 0; }
.papel__item {
  padding: var(--e-2) 0; border-bottom: 1px solid var(--md-sys-color-outline-variant);
  display: flex; flex-direction: column; gap: 2px;
}
.papel__item:last-child { border-bottom: 0; }
.papel__topo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.papel__topo a { font-weight: 600; }
.papel__via {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

/* ---------------------------------------------------------------------
   Guia dos checks
   ---------------------------------------------------------------------
   Tres campos por check e sempre na mesma ordem: o que pega, o que custa
   ignorar, como corrigir. A do meio e a que justifica o check existir e
   e a que nao cabia na descricao de uma linha do catalogo. */
.check { margin-bottom: var(--e-3); }
.check__cabecalho {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  margin-bottom: var(--e-2);
}
.check__id {
  font: var(--md-sys-typescale-code); font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.check__campos { display: grid; gap: var(--e-3); }
.check__campo { display: flex; flex-direction: column; gap: 2px; }
.check__rotulo {
  font: var(--md-sys-typescale-label-medium);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
/* A consequencia ganha o container de atencao: e o unico dos tres campos
   que responde "por que eu deveria me importar", e sem destaque ela se
   lia como mais uma linha de descricao. */
.check__campo--consequencia {
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-extended-color-atencao-color-container);
  color: var(--md-extended-color-atencao-on-color-container);
  padding: var(--e-2) var(--e-3);
}
.check__campo--consequencia .check__rotulo { color: inherit; }

/* ---------------------------------------------------------------------
   Carga de arquivo (tabelas de meta)
   --------------------------------------------------------------------- */
.solta {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  padding: var(--e-5) var(--e-4); text-align: center;
  border: 2px dashed var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low); cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
/* Hover e camada de estado; o container primario e so para o estado
   ARRASTADO (`--ativa`), que e selecao, e para o foco de teclado. */
.solta:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-surface-container-low));
}
.solta--ativa, .solta--ativa:hover {
  border-color: var(--acao-fundo);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
}
/* O input de arquivo sai da VISTA, nao da arvore: com `display: none` ele
   saia da ordem de foco e a carga — a unica acao da tela — nao era
   operavel por teclado. Enter/Espaco nele abre o seletor; o anel de foco
   aparece na area inteira. */
.solta { position: relative; }
.solta:has(> input:focus-visible) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.solta__titulo {
  font: var(--md-sys-typescale-title-small);
  font-weight: var(--md-sys-typescale-emphasized-title-small-weight);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  /* Nome de arquivo longo e sem espaco estourava a lateral em 360px: o
     min-content dele era o nome inteiro (§11.1). */
  overflow-wrap: anywhere;
}
.solta > * { min-width: 0; max-width: 100%; }
.solta input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.recolhivel + .solta, .modelo-tabela + .solta { margin-top: var(--e-4); }

.modelo-tabela { max-height: 220px; overflow: auto; margin-bottom: var(--e-3); }

/* Resultado da carga: numero grande, rotulo pequeno. Depois de enviar
   uma planilha, o que se procura e "quantas entraram" — e isso precisa
   ser lido de longe, nao garimpado numa frase. Cada caixa e um card
   preenchido (`surface-container-highest`). */
.resultado-carga {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  margin-bottom: var(--e-3);
}
.resultado-carga__caixa {
  padding: var(--e-3); text-align: center;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-highest);
}
.resultado-carga__numero {
  font: var(--md-sys-typescale-headline-small);
  font-weight: var(--md-sys-typescale-emphasized-headline-small-weight);
  font-variant-numeric: tabular-nums;
  display: block;
}
.resultado-carga__rotulo {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
}
.resultado-carga__caixa--erro { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.resultado-carga__caixa--erro .resultado-carga__rotulo { color: inherit; }
.resultado-carga__caixa--ok   { background: var(--md-extended-color-sucesso-color-container); color: var(--md-extended-color-sucesso-on-color-container); }
.resultado-carga__caixa--ok .resultado-carga__rotulo { color: inherit; }
/* Resumo do ranking da VD (pedido de 2026-09-29): terracota de
   preenchimento com `on-primary` — branco no claro, 4,64:1. */
.resultado-carga__caixa--acao { background: var(--acao-fundo); color: var(--md-sys-color-on-primary); }
.resultado-carga__caixa--acao :is(.resultado-carga__rotulo, .silencioso) { color: inherit; }

.problemas { max-height: 260px; overflow: auto; }

/* ---------------------------------------------------------------------
   Separacao dimensoes x fatos na tela de dependencias
   ---------------------------------------------------------------------
   A separacao e VISUAL e so vale para a lista de cards. As ligacoes do
   mapa continuam completas. */
.secao-dep { margin-bottom: var(--e-6); }
.secao-dep__cabecalho {
  display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap;
  padding-bottom: var(--e-2); margin-bottom: var(--e-4);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.secao-dep__titulo { margin: 0; }
.secao-dep--fato .secao-dep__cabecalho { border-bottom: 2px solid var(--md-sys-color-secondary); }

/* ---------------------------------------------------------------------
   Filtro de periodo (listagem de tabelas com data)
   --------------------------------------------------------------------- */
.periodo {
  display: flex; gap: var(--e-3); align-items: flex-end; flex-wrap: wrap;
}
.periodo .campo { min-width: 150px; }

/* --- Catalogo editavel (DA-20) --------------------------------------
   A tabela sem catalogo precisa SALTAR na grade. Ate a DA-20 ela nao
   aparecia em tela nenhuma; aparecer discretamente teria trocado um
   silencio por outro. Borda tracejada em atencao, e nao cor de erro: e
   pendencia de preenchimento, nao defeito. */
.card--alerta { border-color: var(--md-extended-color-atencao-color); border-style: dashed; }
.card__acoes { display: flex; gap: var(--e-2); margin-top: var(--e-3); flex-wrap: wrap; }

/* Compacto (< 600px): `minmax(260px, 1fr)` estoura em telas de menos de
   ~300px: a coluna nao encolhe e a pagina ganha rolagem lateral. `min()`
   deixa o card seguir a tela quando ela e menor que o piso. Gutter de 8. */
@media (max-width: 599px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--e-2); }
}
/* Janela grande (1200px+): gutter de 24. */
@media (min-width: 1200px) {
  .cards { gap: var(--e-5); }
}

/* Escolha com rotulo e explicacao embaixo: item de lista com controle a
   esquerda. Alvo de 48px inteiro, incluindo o texto: reduzir isso e o
   que falha primeiro em revisao de acessibilidade. */
.escolha {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-2); min-height: var(--alvo-min); border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.escolha:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
/* `min-width: 0` obrigatorio: item de flex nao encolhe abaixo do proprio
   conteudo sem isto, e a explicacao de cada opcao e uma frase inteira. */
.escolha > span {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; overflow-wrap: anywhere;
}
.escolha input, .chip--escolha input { margin-top: 1px; }

/* Opcao indisponivel mostra o MOTIVO no lugar da ajuda. Opcao cinza sem
   explicacao vira chamado de suporte. */
.escolha--bloqueada { cursor: not-allowed; }
.escolha--bloqueada > input, .escolha--bloqueada > span > strong {
  opacity: var(--md-sys-state-disabled-content-opacity);
}
.escolha--bloqueada:hover { background: none; }

/* Chip de filtro do MD3: contornado quando solto; marcado, vira
   `secondary-container` com a caixa de marcacao como icone de
   selecao. 32px de altura, canto small, label-large. */
.chips--escolha { gap: var(--e-2); }
.chip--escolha {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--ctrl-h); padding: var(--e-1) var(--e-3); cursor: pointer;
  font: var(--md-sys-typescale-label-large);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  /* O chip pode quebrar e nao pode passar da largura do dialogo: nome de
     indicador longo ("Representatividade de Pessoas Negras") esticava a
     linha inteira. */
  max-width: 100%; text-align: left;
}
.chip--escolha > span { overflow-wrap: anywhere; }
.chip--escolha:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.chip--escolha:has(input:checked) {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.chip--escolha:has(input:checked):hover {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) var(--md-sys-state-hover-state-layer-opacity), var(--md-sys-color-secondary-container));
}
.chip--escolha:has(input:checked) .silencioso { color: inherit; }

/* O formulario de catalogo tem cinco campos e uma lista de indicadores;
   na largura padrao do dialogo ele vira uma coluna de rolagem. */
.modal--largo { max-width: 720px; }

/* Compacto (< 600px): o dialogo ocupa a tela inteira, como o MD3 manda
   para a classe compacta. Um cartao de 720px centralizado com 8px de
   folga de cada lado nao e "responsivo": e o mesmo dialogo com barra
   horizontal. */
@media (max-width: 599px) {
  .fundo-modal { padding: 0; align-items: stretch; }
  .modal, .modal--largo { max-width: none; max-height: 100%; border-radius: var(--md-sys-shape-corner-none); }
  .modal__acoes { justify-content: stretch; }
  .modal__acoes .btn { flex: 1; justify-content: center; }
}


/* --- Rastro de alteracao ---------------------------------------------
   A data da ultima atualizacao de uma tabela. `--parcial` marca a data
   que vem so de `created_at`: ela ve a INCLUSAO e nao ve a edicao, e o
   sublinhado pontilhado existe para quem passa o olho perceber que ha
   uma ressalva no `title` antes de tomar a data como "nada mudou". */
.rastro { display: inline-block; }

.rastro--parcial {
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
  cursor: help;
}

/* ---------------------------------------------------------------------
   Grade de dias — painel de atualizacoes (atualizacoes.js)
   ---------------------------------------------------------------------
   A grade do Airflow: um quadrado por dia. O estado NAO e so cor: dia
   com atualizacao e quadrado CHEIO, dia sem e quadrado VAZADO (so a
   borda), e tabela sem coluna de data e tracejado — as tres formas
   sobrevivem ao alto contraste do Windows e a impressao em P&B. O texto
   de cada dia esta no `title` e em `.oculto-visual` para leitor de tela. */
.grade-dias th, .grade-dias td { white-space: nowrap; }
/* O nome quebra linha: e a coluna que cede para os dias caberem. */
.grade-dias tbody th { white-space: normal; min-width: 160px; }
/* A coluna de hoje e a ultima e a que mais importa: as celulas de dia
   sao estreitas para os 30 dias caberem sem rolar numa tela de 1280. */
.grade-dias .grade-dias__dia, .grade-dias .grade-dias__celula {
  padding: var(--e-2) 0; text-align: center; width: 1%; min-width: 15px;
  font-variant-numeric: tabular-nums;
}
.grade-dias thead .grade-dias__dia { font: var(--md-sys-typescale-label-small); }
.grade-dias__dia--hoje { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.dia {
  display: inline-block; width: 12px; height: 12px; vertical-align: middle;
  border-radius: 3px; border: 1.5px solid var(--md-sys-color-outline);
}
.dia--ok {
  background: var(--md-extended-color-sucesso-color);
  border-color: var(--md-extended-color-sucesso-color);
}
.dia--vazio { border-color: var(--md-extended-color-atencao-color); }
.dia--sem { border-style: dashed; }

/* ---------------------------------------------------------------------
   VD — ranking de oportunidades (DA-30)
   ---------------------------------------------------------------------
   A lista de combos pode passar de 50 itens: rola dentro de si, para os
   botoes de concluir nao irem parar a tres telas de distancia. */
.lista-escolhas {
  max-height: 360px; overflow: auto; padding: var(--e-1);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}
/* Linha de total da tabela por PDV: mesmo tom do cabecalho, peso 600. */
.tabela tfoot th, .tabela tfoot td {
  font-weight: 600; border-top: 1px solid var(--md-sys-color-outline-variant);
}
/* Listagem de revendedoras: 100 linhas por pagina, uma linha cada. O
   texto longo corta com reticencia (inteiro no `title`) em vez de quebrar
   em quatro linhas ou invadir a coluna vizinha. */
.tabela--uma-linha th, .tabela--uma-linha td { white-space: nowrap; }
.tabela--uma-linha td:not(.num) { overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
/* Compacta: listagem larga (revendedoras da VD, 11 colunas). Corpo e
   cabecalho em 12px — o piso da DA-22 — e metade do respiro lateral. */
.tabela--compacta, .tabela--compacta thead th {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
/* Cabecalho da compacta: label-medium no peso do papel (500), o mesmo eixo de
   enfase do cabecalho da tabela normal (title-small 500). */
.tabela--compacta thead th { font-weight: var(--md-sys-typescale-label-medium-weight); }
.tabela--compacta :is(th, td) { padding: 6px var(--e-2); }
/* A celula da borda com 16, alinhada ao titulo do painel. */
.tabela--compacta :is(th, td):first-child { padding-left: var(--e-4); }
.tabela--compacta :is(th, td):last-child  { padding-right: var(--e-4); }

/* ---------------------------------------------------------------------
   Painel IAF — Visao geral do CP (PRD-02 US-08, US-09)
   ---------------------------------------------------------------------
   A faixa de contexto e a barra de filtros (`.filtros`): ano, corte e
   "Apurado em". Os blocos lado a lado so a partir de 1200px; abaixo,
   coluna unica. Toda grade em `minmax(0, 1fr)` (§11.1). */
.faixa-contexto .campo { min-width: 160px; }
.faixa-contexto__apurado { margin: 0 0 var(--e-2) auto; }
/* Acumulado x somente o periodo (2026-10-10): cada botao de opcao com o seu
   seletor ao lado; `min-inline-size: 0` pelo mesmo motivo de `fieldset.campo`. */
.faixa-contexto__leitura {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  margin: 0; padding: 0; border: 0; min-inline-size: 0;
}
.faixa-contexto__opcao {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); min-width: 0; max-width: 100%;
}
/* Em 320–360px o seletor desce para baixo do botao e encolhe, sem passar da borda. */
.faixa-contexto__opcao .campo { min-width: 0; flex: 1 1 150px; }
.faixa-contexto__opcao .escolha { align-items: center; white-space: nowrap; }

/* 5.2 (2026-10-10): demonstrativos e lucratividade um abaixo do outro, em
   largura cheia; a pontuacao de cada quadro ao lado da tabela dele. */
.financeiro { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
.financeiro > .painel + .painel { margin-top: 0; }
.financeiro__corpo {
  display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: flex-start;
  padding: var(--e-4);
}
.financeiro__corpo > .tabela-rolagem { flex: 1 1 320px; min-width: 0; }
.financeiro__pontos { flex: 0 0 220px; max-width: 100%; }
.financeiro__pontos .card-principal__valor { font-weight: var(--md-sys-typescale-emphasized-headline-small-weight); }
.visao-geral {
  display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--e-4);
}
/* Titulo de secao solto ("Pilares"): 12 ate o conteudo; em cima, o topo da
   grade, alinhado ao titulo da Pontuacao (a regra antiga, de 4px, pegava
   tambem o `h2.painel__titulo` da Pontuacao). */
.visao-geral__pilares > h2 { margin: 0 0 var(--e-3); }
/* A Pontuacao e os Pilares tem a mesma altura (a linha da grade estica o
   mais baixo): o conteudo da Pontuacao fica centrado na altura que sobra, em
   vez de deixar o vazio todo embaixo do velocimetro (2026-10-11). */
.visao-geral > .painel:has(> .painel__corpo > .pontuacao) { display: flex; flex-direction: column; }
.visao-geral > .painel > .painel__corpo:has(> .pontuacao) {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
/* Lado a lado, o `.painel + .painel` de base.css desalinharia o segundo. */
.visao-geral > .painel + .painel { margin-top: 0; }
@media (min-width: 1200px) {
  .visao-geral { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .visao-geral--metades { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.visao-geral + .painel, .painel + .visao-geral { margin-top: var(--e-4); }
.visao-geral + .ajuda-tela { margin-top: 0; }

/* Pontuacao (2026-10-11): o velocimetro com o % e os pontos no centro, e
   abaixo o nivel e quanto falta para o proximo. */
.pontuacao { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
.pontuacao .velocimetro { width: 100%; max-width: 360px; }   /* o teto da §11.16 */
.pontuacao .grafico__legenda { justify-content: center; }
.pontuacao__leitura { min-width: 0; text-align: center; }
.pontuacao__leitura > p { margin-bottom: var(--e-2); }
.pontuacao__falta strong { color: var(--md-sys-color-on-surface); }
/* Velocimetro preenchido (referencia do BI): selo, % e pontos dentro do arco. */
.velocimetro__arco { position: relative; }
.velocimetro__centro {
  position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; pointer-events: none;
}
/* O maior numero da pagina (a resposta a "como estamos?"): display-small
   enfatizado; abaixo de 600px, headline-large, para caber dentro do arco. */
.velocimetro__valor {
  font: var(--md-sys-typescale-display-small);
  font-weight: var(--md-sys-typescale-emphasized-display-small-weight);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface);
}
@media (max-width: 599px) {
  .velocimetro__valor {
    font: var(--md-sys-typescale-headline-large);
    font-weight: var(--md-sys-typescale-emphasized-display-small-weight);
  }
}
.velocimetro__sub {
  font: var(--md-sys-typescale-body-medium); font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface-variant);
}
.velocimetro__corte { stroke: var(--md-sys-color-surface-container-lowest); stroke-width: 1.5; }
/* Rotulos do eixo (limites das faixas, 0 e o maximo) em HTML sobre o arco,
   posicionados em % da caixa: texto em pixel de verdade (label-medium, 12px)
   em qualquer largura. Dentro do SVG eles escalavam com o `viewBox` e
   chegavam a ~19px, maiores que o titulo do painel (2026-10-11). */
.velocimetro__rotulo {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  font: var(--md-sys-typescale-label-medium); letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); white-space: nowrap;
}

/* Pilares um abaixo do outro, esticados ate a altura da Pontuacao. */
.visao-geral__pilares { display: flex; flex-direction: column; min-width: 0; }
/* A coluna de pilares acompanha a altura da Pontuacao (pedido de 2026-10-11):
   por isso o vao entre eles fica em 8 em toda largura, e nao no gutter da
   grade (§11.6) — com 24, os cinco pilares passavam a ditar a altura e a
   Pontuacao esticava com um vazio embaixo. Excecao registrada. */
.cards.pilares { flex: 1; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--e-2); }
/* Padding de conteudo do card (16), como todo card. */
.pilar { justify-content: center; gap: var(--e-1); padding: var(--e-4); }
.pilar__linha {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--e-1) var(--e-3);
}
.pilar .medidor { margin-top: 0; }

/* Habilitador nao exigido: texto escrito, quieto pela cor secundaria — sem
   `opacity`, que no MD3 e so do desabilitado e derrubava o contraste a 4,05:1. */
.habilitador--nao-exige {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}
.evolucao__titulo {
  margin: 0 0 var(--e-2);
  font: var(--md-sys-typescale-title-small);
  color: var(--md-sys-color-on-surface-variant);
}
.visao-geral.evolucao { margin-bottom: 0; }
/* Lado a lado so com espaco para o grafico respirar; abaixo, um sobre o outro. */
.visao-geral--metades.evolucao { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) {
  .visao-geral--metades.evolucao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Ano acumulado x Por periodo: o segundo grupo (Mes | Ciclo + seletor) ao lado. */
.faixa-contexto__periodo { align-items: center; }
.faixa-contexto__periodo .campo { min-width: 160px; }
/* Visao Geral: so botoes de opcao e um seletor sem rotulo, entao a linha
   alinha pelo centro e o respiro e igual em cima e embaixo (2026-10-11). */
.faixa-contexto--recorte { align-items: center; padding: var(--e-3) var(--e-4); }
.faixa-contexto--recorte .faixa-contexto__leitura { align-items: center; }
.faixa-contexto--recorte .escolha { align-items: center; white-space: nowrap; }
.faixa-contexto--recorte .faixa-contexto__apurado { margin: 0 0 0 auto; }

/* Selo de nivel: cor do nivel + icone + nome (nunca so a cor). Fundo e
   texto sao os tokens `--iaf-nivel-*`, aplicados pelo JS. */
.nivel {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 2px var(--e-2); border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-medium);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  vertical-align: middle;
}

/* Selo de nivel CONTORNADO (listas de ranking, 2026-10-11): a barra ja tem
   a cor do nivel, entao o selo usa a anatomia do `.selo` (canto `small`, borda
   `outline-variant`, sem fundo, texto `on-surface-variant`) e so o icone leva
   a cor do nivel (`--iaf-nivel-*-fundo`, >= 3:1 como grafico no painel). O
   selo cheio fica no velocimetro, nos cards e na matriz. */
.selo.nivel-contorno .selo__icone { color: var(--nivel-cor); }

/* Medidor: UM componente para "quanto do maximo" (card de pilar e card de
   Atingimento). E grafico de dado (DA-35), nao o progresso de TAREFA do MD3
   (este sim `primary`, DA-26 §2): trilha um tom acima do card, preenchimento
   `secondary`. Com estado (o atingimento do CP), a cor e a da situacao — a
   mesma regra do selo, nunca "< 100% = atencao". O pilar fica neutro: mede
   pontos, nao situacao. */
.pilar { min-height: 0; }
.medidor {
  display: block; height: 8px; margin-top: auto;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest); overflow: hidden;
}
.medidor__valor { display: block; height: 100%; border-radius: inherit; background: var(--md-sys-color-secondary); }
.medidor__valor--ok      { background: var(--md-extended-color-sucesso-color); }
.medidor__valor--atencao { background: var(--md-extended-color-atencao-color); }
.medidor__valor--erro    { background: var(--md-sys-color-error); }

/* Grupo de pilar na tabela de indicadores. O primeiro encosta no titulo
   do painel, que ja traz a linha de baixo. */
/* Cada pilar e um bloco contornado com faixa de titulo em `secondary-container`
   (2026-10-11): com 28 linhas na tela, a hierarquia pilar > indicador
   precisa ser vista antes de lida. */
.grupos-pilar { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-4); }
.grupo-pilar {
  border: 1px solid var(--bloco-borda); box-shadow: var(--md-sys-elevation-level1);
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-medium); overflow: hidden;
}
.grupo-pilar > summary {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; border-top: 0;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.grupo-pilar > summary:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
}
.grupo-pilar__numero {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);
  font: var(--md-sys-typescale-label-large);
  font-weight: var(--md-sys-typescale-emphasized-label-large-weight);
}
.grupo-pilar__nome {
  font: var(--md-sys-typescale-title-medium);
  font-weight: var(--md-sys-typescale-emphasized-title-medium-weight);
}
.grupo-pilar__pontos {
  margin-left: auto; font: var(--md-sys-typescale-body-medium); font-variant-numeric: tabular-nums;
}
.grupo-pilar__pontos strong { font-weight: var(--md-sys-typescale-emphasized-body-medium-weight); }
/* A seta divide o `margin-left: auto` com a pontuacao: so a pontuacao empurra. */
.grupo-pilar > summary::after { margin-left: 0; }
/* Compacto: o pilar e o painel vizinho com o mesmo respiro de 12. */
@media (max-width: 599px) {
  .grupos-pilar { padding: var(--e-3); gap: var(--e-3); }
  .painel__corpo { padding: var(--e-3); }
}
.grupo-pilar[open] > summary { border-bottom: 1px solid var(--md-sys-color-outline-variant); }

/* Mesmas larguras em todo pilar; dados centralizados, o nome do indicador
   a esquerda. Abaixo de 640px a tabela rola dentro do bloco. */
.tabela--pilar { table-layout: fixed; min-width: 640px; }
.tabela--pilar .col-indicador { width: 40%; }
.tabela--pilar .col-habilitador { width: 17%; }
.tabela--pilar .col-atingimento, .tabela--pilar .col-pontos { width: 13%; }
.tabela--pilar .col-situacao { width: 17%; }
.tabela--pilar :is(th, td):last-child { width: auto; }
.tabela--pilar td, .tabela--pilar td.num { text-align: center; max-width: none; }
.tabela--pilar thead th:first-child, .tabela--pilar tbody th { text-align: left; }
.tabela--pilar tbody th a { overflow-wrap: anywhere; }
/* Nome de indicador ou de PDV com link na linha da tabela: peso de indice
   (body-medium enfatizado, 500), nao de manchete — os numeros e que pesam
   na linha. O codigo ("1.1") em label-large enfatizado e cor secundaria.
   O link segue `primary` e sublinha no hover e no foco (base.css). */
.tabela tbody th a { font-weight: var(--md-sys-typescale-emphasized-body-medium-weight); }
.tabela tbody th a strong {
  font-weight: var(--md-sys-typescale-emphasized-label-large-weight);
  color: var(--md-sys-color-on-surface-variant);
}

/* --- Graficos (graficos.js, DA-35) -------------------------------------
   `<figure>` sem a margem de 40px do navegador, que abriria rolagem
   lateral em 320px. Texto do grafico em tinta de texto, nunca na cor da
   serie (skill dataviz). */
.grafico { margin: 0; min-width: 0; }
.grafico__texto {
  font: var(--md-sys-typescale-body-small);
  fill: var(--md-sys-color-on-surface-variant);
}
.grafico__texto--forte { fill: var(--md-sys-color-on-surface); font-weight: var(--md-sys-typescale-emphasized-label-medium-weight); }
.grafico__grade { stroke: var(--md-sys-color-outline-variant); stroke-width: 1; }
.grafico__legenda {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
  list-style: none; margin: var(--e-2) 0 0; padding: 0;
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.grafico__legenda li { display: inline-flex; align-items: center; gap: var(--e-1); }
.legenda__amostra { width: 12px; height: 12px; border-radius: var(--md-sys-shape-corner-extra-small); flex: none; }
/* "Ver como tabela": botao de texto (o <summary> de um <details>). */
.grafico__tabela { margin-top: var(--e-2); }
.grafico__tabela > summary {
  display: inline-flex; align-items: center; min-height: var(--ctrl-h);
  padding: 0 var(--e-3); border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-primary); cursor: pointer; list-style: none;
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.grafico__tabela > summary::-webkit-details-marker { display: none; }
/* Alinhamento otico do botao de texto no fluxo do texto: o rotulo encosta na
   margem do conteudo e o padding de 12 fica para a camada de estado. */
.grafico__tabela > summary { margin-inline-start: calc(-1 * var(--e-3)); }
.grafico__tabela > summary:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.grafico__tabela[open] > summary { margin-bottom: var(--e-2); }
/* Aberto, o botao diz o que faz: "Ocultar tabela". */
.grafico__tabela[open] .grafico__mostrar,
.grafico__tabela:not([open]) .grafico__ocultar { display: none; }

.velocimetro__svg { display: block; width: 100%; height: auto; }
.velocimetro__ponteiro line { stroke: var(--md-sys-color-on-surface); }
.velocimetro__ponteiro circle {
  fill: var(--md-sys-color-on-surface); stroke: var(--md-sys-color-surface-container-lowest);
}

/* Barras horizontais: rotulo e valor em HTML (cortam com reticencia em
   qualquer largura), barra em SVG com largura em %. 12px de espessura. A
   partir de 600px, UMA linha por item (rotulo | barra | valor, 2026-10-11):
   o item cai de ~46 para ~28px. As tres colunas sao da lista (`subgrid`),
   para a barra de todo item comecar e terminar no mesmo x — com uma grade
   por item, o valor mais largo encurtaria so a barra dele. Abaixo de 600,
   duas linhas, como antes. */
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.barras__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e-3); }
.barras__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras__posicao {
  display: inline-block; min-width: 3ch; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--md-sys-color-on-surface-variant);
}
.barras__valor .selo__icone { margin-right: var(--e-1); vertical-align: -3px; }
.barras__valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras__trilho { grid-column: 1 / -1; display: block; }
.barras__barra { fill: var(--md-sys-color-secondary); }

/* Linha com faixas: as faixas de nivel sao um veu (16%) atras da serie. */
.linha__area { width: 100%; min-width: 0; }
.linha__area > svg { display: block; }
.linha__banda { opacity: .16; }
.linha__serie { stroke: var(--md-sys-color-secondary); }
.linha__marca { fill: var(--md-sys-color-secondary); stroke: var(--md-sys-color-surface-container-lowest); }

/* ---------------------------------------------------------------------
   Painel IAF — pagina do indicador (PRD-02 US-11) e filtros de PDV (US-07)
   ---------------------------------------------------------------------
   `.pilha`: os blocos da pagina um embaixo do outro com o mesmo vao, em
   grade `minmax(0, 1fr)` (§11.1) — tabela larga rola dentro do proprio
   painel, nunca na pagina. As margens proprias de nota e filtros zeram
   ali dentro, senao o vao dobra. */
.pilha { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
.pilha > * { margin: 0; }
/* O `.painel + .painel` de base.css e mais especifico que a linha acima: somaria ao gap. */
.pilha > .painel + .painel { margin-top: 0; }
.pilha > section > h2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); }
/* Titulo de secao solto ("CP · acumulado até…", "Por PDV"): proximidade —
   24 acima (o vao da pilha + 8) e 12 abaixo (o vao + -4), para ele se ler
   como titulo DO conteudo de baixo, e nao do bloco de cima (2026-10-11). */
section.pilha > h2:first-child { margin-bottom: calc(var(--e-3) - var(--e-4)); }
.pilha > section.pilha:not(:first-child):has(> h2:first-child) { margin-top: var(--e-2); }
/* Titulo de painel com o selo de referencia: em 320px o selo desce de
   linha, em vez de espremer o titulo palavra por palavra. */
.pilha .painel__titulo { flex-wrap: wrap; }
/* Titulo + "Exportar" (tabela-acoes.js): a barra herda a borda e o
   respiro do titulo, e o botao fica fora do <h2> — senao entraria no nome
   do titulo para o leitor de tela. */
.painel__barra {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2);
  padding: 0 var(--e-2) 0 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
/* Com e sem "Exportar", o titulo tem a mesma altura (48) e o botao fica no
   eixo dele: a margem do `h2` nao entra na barra. */
.painel__barra > .painel__titulo { flex: 1; border-bottom: 0; margin: 0; }
/* A seta ativa: o `aria-sort` mora no <th>, nao no botao. */
th[aria-sort="ascending"] .ordenar__seta,
th[aria-sort="descending"] .ordenar__seta { color: var(--md-sys-color-primary); }
/* A barra de filtros de PDV mora num <div> da pilha: a margem dela dobraria o vao. */
.pilha .filtros-pdv { margin-bottom: 0; }
/* Seletor do pilar: campo + "Abrir" (navegar no `change` fere a WCAG 3.2.2).
   Mora sobre o `surface` da pagina: o rotulo flutuante recorta com ele (§11.12). */
.seletor-indicador {
  --campo-fundo: var(--md-sys-color-surface);
  display: flex; align-items: flex-end; gap: var(--e-2);
  min-width: min(320px, 100%); max-width: 100%;
}
.seletor-indicador .campo { flex: 1 1 auto; min-width: 0; }

/* Linha da Visao geral que abre o indicador: o link e a 1a celula. */
.linha-clicavel { cursor: pointer; }

/* Cards de numero do PDV: o mesmo card de todo bloco de leitura (2026-10-11);
   o vao e o da grade de cards (§11.6). */
.cards.numeros { grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); }
.numero-card { min-height: 0; gap: var(--e-1); }
.numero-card__rotulo {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.numero-card .card__contagem { overflow-wrap: anywhere; }

/* "Como a pontuacao sai": a faixa aplicada em verde, com o selo escrito. */
.faixas .faixa--atual > * {
  background: var(--md-extended-color-sucesso-color-container);
  color: var(--md-extended-color-sucesso-on-color-container);
}
.regra { margin: var(--e-4) 0 0; }
.regra dd { margin: 0; }
.regra .silencioso { display: block; }
.lista-simples { margin: 0; padding-left: 1.2em; }

/* Tabela larga com a 1a coluna presa ao rolar de lado (tabela por PDV,
   mapa de calor). O fundo e o do container (`--campo-fundo`), senao a
   coluna que passa por baixo aparece atraves dela. */
.tabela--fixa :is(th, td):first-child {
  position: sticky; left: 0; z-index: 1; background: var(--campo-fundo);
}
.tabela--fixa thead th:first-child { z-index: 2; }
/* Numero e nome do PDV em colunas separadas (`docs/convencoes.md` §11): as
   duas ficam presas, o nome logo depois da largura fixa do numero. */
.tabela--com-id { --col-id: 4.5rem; }
/* Borda direita do cabecalho arrastavel (`ligarLarguraDeColuna`, ui.js). */
.tabela thead th.th--borda { cursor: col-resize; box-shadow: inset -2px 0 0 var(--md-sys-color-primary); }
html.redimensionando, html.redimensionando * { cursor: col-resize !important; user-select: none; }
.tabela--fixa.tabela--com-id tr:not(.tabela__grupos) > :first-child {
  width: var(--col-id); min-width: var(--col-id); max-width: var(--col-id);
}
.tabela--fixa.tabela--com-id tr:not(.tabela__grupos) > :nth-child(2) {
  position: sticky; left: var(--col-id); z-index: 1; background: var(--campo-fundo);
}
.tabela--fixa.tabela--com-id thead tr:not(.tabela__grupos) > :nth-child(2) { z-index: 2; }
/* Secoes de colunas (Cálculo, Habilitador...): o nome da secao como rotulo
   com regua (2026-10-11), nao pilula — a pilula tonal tinha cara de botao
   segmentado. label-medium enfatizado em `on-surface-variant`, centralizado
   (§11.7.1), e uma regua `outline` de 1px (informa a extensao: >= 3:1) da
   largura do grupo; o respiro lateral da celula separa uma regua da outra.
   A celula vazia (o grupo do PDV) nao tem rotulo nem regua. */
.tabela .grupo-inicio { padding-left: var(--e-4); }
.tabela__grupos th, .tabela__grupos td { padding: var(--e-2) var(--e-1) 0; border-bottom: 0; }
.tabela__grupo {
  display: block; padding: 0 0 var(--e-1); text-align: center;
  border-bottom: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-medium);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
.por-pdv thead th { vertical-align: bottom; }

/* Mapa de calor e celula de "falta": container do estado + texto
   `on-container` (o par do MD3) + icone — a cor nunca e o unico canal.
   O mapa so tem a largura das colunas (esticado, o PDV ficava longe da
   cor). `.calor`, e nao `.mapa`: `.mapa` e o diagrama da ordem de carga. */
.calor { width: auto; }
/* O `width: 1%` da ultima coluna de `.tabela` (coluna de acao) obriga a
   tabela de largura automatica a ocupar o container inteiro. */
.calor :is(th, td):last-child { width: auto; }
.calor__celula { white-space: nowrap; }
.calor__celula .selo__icone { vertical-align: -2px; margin-right: var(--e-1); }
.calor__celula .selo { border: 0; background: transparent; color: inherit; padding: 0; }
/* Estado bom fica quieto (§11.10), 2026-10-11: a celula "ok" nao tem fundo —
   texto `on-surface` e o icone no papel `color` do sucesso. So atencao e erro
   ficam no container pleno; o mapa passa a mostrar onde esta o problema (no
   escuro, o bloco vermelho de 1000x1100px vira leitura por celula). Nada de
   `color-mix`: os papeis gerados, como sao. A falta continua vermelha. */
.calor__celula--ok {
  background: transparent;
  color: var(--md-sys-color-on-surface);
}
.calor__celula--ok .selo__icone { color: var(--md-extended-color-sucesso-color); }
.calor__celula--atencao {
  background: var(--md-extended-color-atencao-color-container);
  color: var(--md-extended-color-atencao-on-color-container);
}
.calor__celula--erro {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.legenda__calor {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--md-sys-shape-corner-extra-small);
}
.legenda__calor .selo__icone { margin: 0; }

/* Selo de referencia do ponto de PDV: informativo, icone no papel `info`. */
.selo--info .selo__icone { color: var(--md-extended-color-info-color); }

/* Graficos novos (graficos.js): colunas + linhas e tracos de faixa. As
   duas series de coluna sao petroleo e neutro; a linha e terracota (texto
   `primary`), a meta e tracejada — a forma tambem distingue, nao so a cor. */
.serie-coluna--1 { fill: var(--md-sys-color-secondary); background: var(--md-sys-color-secondary); }
.serie-coluna--2 { fill: var(--md-sys-color-outline); background: var(--md-sys-color-outline); }
.serie-coluna--3 { fill: var(--md-sys-color-tertiary); background: var(--md-sys-color-tertiary); }
.serie-linha--1 { stroke: var(--md-sys-color-primary); }
.serie-linha--2 { stroke: var(--md-sys-color-on-surface-variant); }
.serie-marca--1 { fill: var(--md-sys-color-primary); stroke: var(--md-sys-color-surface-container-lowest); }
.grafico__legenda svg { flex: none; }

/* Series categoricas (linha do tempo das posicoes por GVO/GRVO): as oito
   `--iaf-cat-*` moram em tokens.css (excecao declarada la). Legenda e nome
   na ponta da linha: a cor nunca e o unico canal. */
.posicoes__serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.posicoes__marca { stroke: var(--md-sys-color-surface-container-lowest); }
.posicoes__grupo {
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
/* Passar o ponteiro (ou o foco) numa linha apaga as outras, poe o nome dela
   em negrito e mostra o % de cada periodo: com 8 linhas se cruzando, e o
   jeito de seguir uma so. O traco largo e invisivel e o alvo do ponteiro. */
.posicoes__alvo { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.linha__area:has(.posicoes__grupo:is(:hover, :focus)) .posicoes__grupo:not(:hover, :focus) { opacity: .2; }
.posicoes__grupo:focus { outline: none; }
.posicoes__grupo:focus-visible .posicoes__serie { stroke-width: 3; }
.posicoes__valor {
  display: none; font: var(--md-sys-typescale-label-medium);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking); font-variant-numeric: tabular-nums;
  fill: var(--md-sys-color-on-surface);
  stroke: var(--md-sys-color-surface-container-lowest); stroke-width: 3px; paint-order: stroke;
}
.posicoes__grupo:is(:hover, :focus) .posicoes__valor { display: inline; }
.posicoes__grupo:is(:hover, :focus) .posicoes__nome {
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight); fill: var(--md-sys-color-on-surface);
}

/* Subtitulo ao lado do titulo do painel ("os dois canais"): o separador e
   pseudo-elemento; no compacto o subtitulo desce inteiro, sem o "·" orfao. */
.painel__sub::before { content: "· "; }
@media (max-width: 599px) {
  .painel__titulo .painel__sub { flex-basis: 100%; }
  .painel__sub::before { content: none; }
}

/* Ranking por GVO/GRVO: os seletores (Ranking | Linha do tempo, Mês |
   Ciclo, Gráfico | Tabela) numa linha so, acima do conteudo. */
.ranking-grupo__barra {
  display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center;
  margin-bottom: var(--e-3);
}
/* Traco de faixa no ranking: mais fino e mais claro que a barra, sem sumir —
   `outline` (informa: >= 3:1), 1px. */
.barras__referencia { stroke: var(--md-sys-color-outline); stroke-width: 1; }
@media (min-width: 600px) {
  .barras {
    display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto;
    gap: var(--e-2) var(--e-3);
  }
  .barras__item { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
  .barras__rotulo { grid-column: 1; grid-row: 1; }
  .barras__trilho { grid-column: 2; grid-row: 1; }
  .barras__valor  { grid-column: 3; grid-row: 1; text-align: right; }
}
/* Legenda antes do desenho: 12 ate ele (encostava na 1a barra). */
.grafico__legenda:first-child { margin: 0 0 var(--e-3); }
.grafico__nota { margin: var(--e-2) 0 0; }

/* Ranking de oportunidades da VD (painel-vd.html, PRD-02 US-12): os tres
   blocos lado a lado quando cabem, em coluna unica abaixo de ~600px
   (§11.1: `min()` para a coluna nunca passar do container). */
.vd-blocos {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.vd-blocos > .painel { margin: 0; }
/* Velocimetro dos blocos no desenho da Visao geral (preenchido, % dentro
   do arco), menor: tres lado a lado, sem legenda nem tabela (2026-10-11). */
.vd-blocos .pontuacao .velocimetro { max-width: 240px; }
.vd-blocos .velocimetro__valor {
  font: var(--md-sys-typescale-headline-medium);
  font-weight: var(--md-sys-typescale-emphasized-display-small-weight);
}

/* Pagina do indicador (2026-10-03). Indice fora do minimo (habilitador do
   1.2 e do 1.8) e PDV nao habilitado: container de erro + icone + texto —
   a cor nunca e o unico canal. */
.por-pdv tr.linha--nao-habilitada > :first-child { box-shadow: inset 4px 0 0 var(--md-sys-color-error); }
/* "Como a pontuacao sai" recolhido no topo: o resumo e o titulo do painel. */
/* Sem o triangulo nativo: a seta do console a direita, como no `.recolhivel`. */
.painel--recolhivel > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  font: var(--md-sys-typescale-title-medium);
  font-weight: var(--md-sys-typescale-emphasized-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  border-radius: var(--md-sys-shape-corner-medium);
}
.painel--recolhivel > summary::-webkit-details-marker { display: none; }
.painel--recolhivel > summary::after {
  content: ""; flex: none; margin-left: auto; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--icone-seta) center / contain no-repeat;
          mask: var(--icone-seta) center / contain no-repeat;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.painel--recolhivel[open] > summary::after { transform: rotate(180deg); }
.painel--recolhivel > summary:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.painel--recolhivel[open] > summary {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0;
}
/* Valor escrito em cima de cada marca do grafico (colunas e pontos). */
/* Valor escrito no grafico: halo na cor da superficie, para nao sumir
   sobre a grade ou a coluna vizinha. */
.grafico__valor {
  font: var(--md-sys-typescale-label-medium); letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  fill: var(--md-sys-color-on-surface);
  paint-order: stroke; stroke: var(--md-sys-color-surface-container-lowest);
  stroke-width: 3px; stroke-linejoin: round;
}
/* O valor da linha numa pilula (o modelo do BI): fica por cima da linha. */
.grafico__pilula rect {
  fill: var(--md-sys-color-surface-container-lowest); stroke: var(--md-sys-color-outline-variant);
}
.grafico__pilula text {
  font: var(--md-sys-typescale-label-medium); letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  fill: var(--md-sys-color-on-surface); font-variant-numeric: tabular-nums;
}
.grafico__valor--forte { font-weight: var(--md-sys-typescale-emphasized-label-medium-weight); }
.grafico__pilula--forte rect { stroke: var(--md-sys-color-on-surface); }
.grafico__pilula--forte text { font-weight: var(--md-sys-typescale-emphasized-label-medium-weight); }

/* ---------------------------------------------------------------------
   CP da pagina do indicador (2026-10-03): cinco cards fixos + detalhes
   ---------------------------------------------------------------------
   Os 28 indicadores calculam de jeitos diferentes, mas a leitura e sempre
   a mesma: Realizado, Meta, Atingimento, Habilitador e Pontos. Card do
   sistema (`.card`, surface-container-lowest + nivel 1); rotulo em
   label-large, valor em headline-small `secondary` (o petroleo que ancora
   os numeros do console), apoio em body-small. */
.cards-principais {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(176px, 100%), 1fr));
}
.card-principal { min-height: 0; gap: var(--e-1); }
/* Duas metas (3.3): o realizado ocupa as duas linhas; em cada linha, a meta,
   o atingimento dela e, na ultima coluna, habilitador sobre pontos. No
   celular, uma coluna so, na ordem do HTML. */
.cards-principais--duas-metas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* O vao entre cards e o da grade (§11.6): 8 no compacto, 16, 24 a partir de 1200. */
@media (max-width: 599px) { :is(.cards-principais, .cards.numeros) { gap: var(--e-2); } }
@media (min-width: 1200px) { :is(.cards-principais, .cards.numeros) { gap: var(--e-5); } }
.card-principal--alto { grid-row: span 2; justify-content: center; }
@media (max-width: 599px) {
  .cards-principais--duas-metas { grid-template-columns: 1fr; }
  .card-principal--alto { grid-row: auto; }
}
.card-principal__rotulo {
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.card-principal__valor {
  display: flex; align-items: center; gap: var(--e-1); flex-wrap: wrap;
  font: var(--md-sys-typescale-headline-small);
  font-weight: var(--md-sys-typescale-emphasized-headline-small-weight);
  color: var(--md-sys-color-secondary);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.card-principal__de { font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface-variant); }
.card-principal__apoio {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}
.card-principal > .selo, .card-principal > .badge { align-self: flex-start; }
/* Card que nao se aplica ("Não exige"): texto, nao numero — title-large no
   peso do papel (400) e cor secundaria. O card fica no lugar e na altura. */
.card-principal--quieto .card-principal__valor {
  font: var(--md-sys-typescale-title-large);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
/* Habilitador que falhou: borda e valor em `error`, com o icone — a cor nao
   e o unico canal, o texto diz "Nao habilitado". */
.card-principal--falhou { border-color: var(--md-sys-color-error); }
.card-principal--falhou .card-principal__valor { color: var(--md-sys-color-error); }
/* Tempo (TME do 2.2): "0h 07min 53s" em `title-large`, para caber na linha. */
.card-principal--tempo .card-principal__valor {
  font: var(--md-sys-typescale-title-large);
  font-weight: var(--md-sys-typescale-emphasized-title-large-weight);
}

/* O atingimento no card do CP: o mesmo `.medidor` do card de pilar (um
   desenho so, 2026-10-11), na cor da situacao do selo vizinho. */
.card-principal__medidor { margin: var(--e-1) 0; }

/* Detalhes do calculo: o resumo numa linha de pares (rotulo em label-small
   sobre o valor em body-medium), separados por divisores `outline-variant`,
   e "Detalhes" (botao de texto) abrindo os indices e as variaveis em
   `surface-container-low`, como o card "Meta por UN" de referencia. */
.detalhe-calculo { min-height: 0; gap: var(--e-3); }
.detalhe-calculo__titulo {
  margin: 0;
  font: var(--md-sys-typescale-title-medium);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.pares-linha {
  display: flex; flex-wrap: wrap; align-items: stretch; row-gap: var(--e-3);
  padding-top: var(--e-3); border-top: 1px solid var(--md-sys-color-outline-variant);
}
.par-linha {
  display: flex; flex-direction: column; gap: 2px; min-width: 132px;
  padding: 0 var(--e-4); border-left: 1px solid var(--md-sys-color-outline-variant);
}
.par-linha:first-child { padding-left: 0; border-left: 0; }
.par-linha__rotulo {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.par-linha__valor {
  display: flex; align-items: center; gap: var(--e-1);
  font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
}
.par-linha__apoio { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.par-linha .selo { align-self: flex-start; margin-top: 2px; }
.par-linha--falhou .par-linha__valor { color: var(--md-sys-color-error); }
.par-linha--ok .par-linha__valor { color: var(--md-extended-color-sucesso-color); }
/* O valor avaliado: o que as faixas comparam, um degrau acima dos demais. */
.par-linha--destaque .par-linha__valor {
  font: var(--md-sys-typescale-title-medium); letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.detalhe-calculo__botao { margin-left: auto; align-self: center; }
.detalhe-calculo__mais {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-4); border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
}
.detalhe-calculo__mais[hidden] { display: none; }
.detalhe-calculo__grupo {
  padding: var(--e-3) var(--e-4); border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container-lowest);
}
.detalhe-calculo__subtitulo {
  margin: 0 0 var(--e-1); font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
}
.detalhe-calculo__grupo .pares-linha { border-top: 0; padding-top: var(--e-1); }
.detalhe-calculo__subtitulo { display: flex; align-items: center; gap: var(--e-1); }
.detalhe-calculo__subtitulo--ok { color: var(--md-extended-color-sucesso-color); }
.detalhe-calculo__subtitulo--falhou { color: var(--md-sys-color-error); }
.detalhe-calculo__descricao {
  margin: 0 0 var(--e-2); font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
}
@media (max-width: 599px) {
  /* Coluna unica: o divisor vertical vira horizontal. */
  .par-linha { min-width: 100%; padding: var(--e-2) 0 0; border-left: 0;
               border-top: 1px solid var(--md-sys-color-outline-variant); }
  .par-linha:first-child { border-top: 0; padding-top: 0; }
  .detalhe-calculo__botao { margin-left: 0; }
}

/* Check de faixa maxima a esquerda do atingimento: so o icone (o texto vai
   para o leitor de tela). */
.check-atingido { display: inline-flex; vertical-align: -2px; margin-right: var(--e-1);
  color: var(--md-extended-color-sucesso-color); }

/* Mapa de calor: a seta de cada PDV abre, logo abaixo, o grafico de linha
   dele. Botao de icone do MD3, seta gira ao abrir. Seta e numero do PDV na
   MESMA linha (2026-10-11): a linha cai de ~57 para ~33px. No mouse, 28
   visuais com alvo de 32 (`::before`, como o `.btn--linha`), para nao
   reabrir a altura da linha; no toque, o botao inteiro vai a 48 (`--ctrl-h`). */
.calor tbody tr:not(.calor__detalhe) > :first-child { white-space: nowrap; }
.calor__expandir {
  position: relative;
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: var(--e-1);
  vertical-align: middle; padding: 0; border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer;
}
.calor__expandir::before, .combo__abrir::before { content: ""; position: absolute; inset: -2px; }
@media (pointer: coarse) {
  .calor__expandir, .combo__abrir { width: var(--ctrl-h); height: var(--ctrl-h); }
}
.calor__expandir:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.calor .calor__detalhe > td {
  position: static; padding: var(--e-3) var(--e-4);
  background: var(--md-sys-color-surface-container-low);
}
.calor__grafico { min-width: 560px; }

/* Combobox de PDV (filtros): campo de texto + a mesma seta e o mesmo menu
   de todo seletor (`.campo select`): `--menu-fundo`, canto `small`, nivel
   2, item de 40px. O item ativo pelo teclado (`aria-selected`) e o
   escolhido do seletor: `secondary-container`. */
.combo { position: relative; }
.combo__caixa { position: relative; display: flex; }
.combo__caixa input { flex: 1; padding-right: calc(var(--e-3) + 24px); }
.combo__abrir {
  position: absolute; right: var(--e-2); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: var(--md-sys-shape-corner-full); background: transparent;
  color: var(--md-sys-color-on-surface-variant); cursor: pointer;
}
.combo__abrir:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.combo:has([aria-expanded="true"]) .seta-expandir { transform: rotate(180deg); }
.combo__lista {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 2px 0 0; padding: var(--e-2) 0;
  max-height: 320px; overflow-y: auto; list-style: none;
  background: var(--menu-fundo); color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-small); box-shadow: var(--md-sys-elevation-level2);
}
.combo__lista[hidden] { display: none; }
.combo__lista [role=option] {
  display: flex; align-items: center; gap: var(--e-3); min-height: 40px; padding: 0 var(--e-3);
  cursor: pointer; font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.combo__lista [role=option][hidden] { display: none; }
.combo__lista [role=option]:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.combo__lista [aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.combo__lista [aria-selected="true"] .combo__id { color: inherit; }
.combo__id { min-width: 6ch; color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Usuarios e acessos (DA-36)
   --------------------------------------------------------------------- */
/* Acoes da linha: texto, lado a lado, sem quebrar o rotulo. */
.tabela td.tabela__acoes { white-space: nowrap; text-align: right; }

/* A senha temporaria aparece uma vez: monoespacada (0/O e 1/l ja sairam
   do alfabeto, mas o leitor ainda compara caractere a caractere) e com o
   botao de copiar ao lado. */
.senha-gerada {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  margin: var(--e-3) 0;
}
.senha-gerada code {
  padding: var(--e-2) var(--e-3);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-title-medium);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .08em; user-select: all;
}

/* Arvore de permissoes: Area > pagina ou pilar, uma acao por item. A
   area e um `fieldset` cuja legenda e a caixa que marca tudo abaixo. */
.arvore { display: grid; gap: var(--e-3); }
.arvore__titulo {
  margin: 0;
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface);
}
.arvore__area {
  min-inline-size: 0; margin: 0;
  padding: var(--e-2) var(--e-3) var(--e-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}
.arvore__area > legend { padding: 0 var(--e-1); }
.arvore__itens { list-style: none; margin: 0; padding: 0; display: grid; }
.arvore__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-2) 0 var(--e-2) var(--e-5);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.arvore__item:first-child { border-top: 0; }
.arvore__item > label { display: flex; flex-direction: column; min-width: 0; color: var(--md-sys-color-on-surface); }
/* O select vai num `.campo` sem rotulo flutuante (o rotulo e o da linha):
   so o recuo de cima, que e do rotulo, sai. */
.arvore__acao { flex: none; width: 160px; padding-top: 0; }
@media (max-width: 599px) {
  .arvore__item { flex-direction: column; align-items: stretch; padding-left: var(--e-3); }
  .arvore__acao { width: 100%; }
}
/* Estado misto da caixa da area (alguns itens liberados): o traco do MD3. */
.escolha input[type="checkbox"]:indeterminate {
  background: var(--acao-fundo); border-color: var(--acao-fundo);
}
.escolha input[type="checkbox"]:indeterminate::before {
  content: ""; width: 10px; height: 2px; background: var(--md-sys-color-on-primary);
}

/* Olho de mostrar a senha (DA-36): dentro do campo, a direita, do tamanho
   da altura do campo; o texto digitado nao passa por baixo dele. */
.campo--senha > input { padding-right: calc(var(--e-2) + 32px); }
.olho {
  position: absolute; right: 2px; bottom: 0;
  /* a altura do campo: tudo menos o recuo de cima, que e do rotulo */
  height: calc(100% - 8px); width: 32px;
  display: inline-grid; place-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-small);
}
.olho:hover { color: var(--md-sys-color-on-surface); }
.olho:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; }
.olho svg { width: 18px; height: 18px; margin: 0; }
/* Com o erro embaixo do campo, a altura do `.campo` cresce: o olho fica no
   input, nao no meio do conjunto. */
.campo--senha:has(> .campo__erro:not([hidden])) > .olho { bottom: auto; top: 8px; height: 32px; }

/* Uso da plataforma (US-20): horario de pico. A intensidade vem do numero
   de sessoes da celula; o numero esta escrito, a cor so ajuda a achar o pico. */
.uso-horario th, .uso-horario td { white-space: nowrap; }
.uso-horario__celula {
  background: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--intensidade, 0%) * 0.6), transparent);
}