/* =====================================================================
   IAF 360 — base: reset, tipografia, casca do aplicativo, foco
   =====================================================================
   Material Design 3 (DA-26). Tudo o que e cor, tipo, forma e movimento
   vem de tokens.css; aqui so ha papel de sistema (`--md-sys-*`), nunca
   valor literal. A anatomia da casca — barra do topo, coluna de
   navegacao, conteudo — segue a DA-23, que continua valendo: o que
   mudou foi a pele, nao a estrutura.
   ===================================================================== */

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

/* `scroll-padding-top`: a barra do topo e fixa e cobre os primeiros 64px
   da viewport. Sem isto, Shift+Tab para um elemento acima da vista rola
   a pagina so ate a borda de cima — que esta DEBAIXO da barra — e o botao
   focado fica 100% escondido (WCAG 2.4.11). Vale para focus(), ancora e
   scrollIntoView. */
html { font-size: 100%; scroll-padding-top: calc(var(--altura-topo) + var(--e-2)); }

body {
  margin: 0;
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  -webkit-font-smoothing: antialiased;
}

/* h1 20 -> h2 16 -> h3 14 virou title-large 22 -> title-medium 16 ->
   title-small 14: a escala do MD3, no peso ENFATIZADO (600) — o
   Expressive da a title exatamente o peso que a marca pede para titulo.
   Sem pular degrau (§11.9). */
h1, h2, h3 { margin: 0 0 var(--e-3); text-wrap: balance; }
h1 {
  font: var(--md-sys-typescale-title-large);
  font-weight: var(--md-sys-typescale-emphasized-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
}
h2 {
  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);
}
h3 {
  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);
}
p  { margin: 0 0 var(--e-3); }

/* Link e `primary`, como o botao de texto do MD3 — e `primary` e o tom
   40 da paleta terracota, que passa (5,02 a 6,47:1) sobre TODAS as
   superficies do esquema, inclusive as tingidas onde o terracota-escuro
   antigo reprovava. Um token so para link, seta de ordenacao e valor
   do JSON, em vez dos tres de antes. */
a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* ---------------------------------------------------------------------
   FOCO — o anel de foco do MD3: 3px em `secondary`, 2px afastado.
   `outline: none` sem substituto torna o console inutilizavel sem
   mouse; e o erro mais comum da lista. `secondary` (petroleo) da 5,03
   a 6,48:1 contra qualquer superficie, e a barra do topo agora e
   superficie tambem — a excecao do anel branco deixou de existir.
   --------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

/* Alto contraste do Windows (forced-colors) apaga fundo e sombra e forca
   toda cor para as cores do sistema; desenha borda e outline. Tres
   coisas somem sem estas regras, e nenhuma se parece com a causa:
     1. o que se marca por FUNDO (item ativo, chip marcado, aba ativa,
        card selecionado) — ganha borda;
     2. todo icone desenhado por mascara (`background: currentColor` +
        `mask`): o background e forcado a Canvas e o icone vira um
        retangulo invisivel — `forced-color-adjust: none` mantem o
        `currentColor`, que ali ja e a cor de texto do sistema;
     3. caixa de marcacao e radio marcados, que ficam iguais aos
        desmarcados — recebem Highlight/HighlightText;
   e dialogo, snackbar e nota, que so se delimitam por fundo e sombra,
   ganham uma borda. */
@media (forced-colors: active) {
  .nav__item a[aria-current],
  .aba[aria-selected="true"],
  .chip--escolha:has(input:checked),
  .card-dep--ativo { outline: 2px solid; outline-offset: -2px; }

  .nota::before, .busca::before, .campo:has(> select)::after,
  .ajuda-tela > summary::before, .recolhivel > summary::after, .indicador__seta,
  .nav__pilar > summary::after, .seta-expandir, .painel--recolhivel > summary::after,
  .toast__titulo::before, .toast > .btn[aria-label]::before,
  .badge--leitura::before, .tema__icone { forced-color-adjust: none; background: currentColor; }
  /* Fundo que e o dado (medidor do pilar) e amostra da legenda do grafico. */
  .medidor__valor { forced-color-adjust: none; background: currentColor; }
  .legenda__amostra { forced-color-adjust: none; }
  :is(.tema__opcao, .segmentado__opcao)[aria-checked="true"] { outline: 2px solid; outline-offset: -2px; }

  :is(.campo, .escolha, .chip--escolha) input[type="checkbox"]:checked,
  :is(.campo, .escolha) input[type="radio"]:checked {
    forced-color-adjust: none; border-color: Highlight;
  }
  :is(.campo, .escolha, .chip--escolha) input[type="checkbox"]:checked { background: Highlight; }
  :is(.campo, .escolha, .chip--escolha) input[type="checkbox"]:checked::before { background: HighlightText; }
  :is(.campo, .escolha) input[type="radio"]:checked { background: Canvas; }
  :is(.campo, .escolha) input[type="radio"]:checked::before { background: Highlight; }

  .modal, .toast, .nota, .badge, .selo--erro, .etapa__numero, .topo__perfil,
  .resultado-carga__caixa, .nivel { border: 1px solid CanvasText; }
}

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-none);
}
.pular-para-conteudo:focus { left: 0; }

/* ---------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------- */
/* `minmax(0, 1fr)` na coluna (§11.1): o titulo da barra e `nowrap`, e
   com a coluna implicita (`auto`) o min-content dele alargava a pagina
   inteira em 390px em vez de a reticencia agir. */
/* A casca em tres areas de grade (pedido de 2026-10-03, §11.14): a barra
   lateral ocupa a altura inteira, com a marca no topo dela, e o cabecalho
   fica so sobre o conteudo — como no sistema de referencia. Abaixo de
   840px as areas empilham (cabecalho, faixa, conteudo). */
.app {
  display: grid; min-height: 100vh;
  grid-template-columns: var(--largura-nav) minmax(0, 1fr);
  grid-template-rows: var(--altura-topo) 1fr;
  grid-template-areas: "nav topo" "nav conteudo";
}
.topo { grid-area: topo; }
.nav { grid-area: nav; }
.conteudo { grid-area: conteudo; }

/* Cabecalho: a "small top app bar" do MD3 — 64px, na superficie da pagina
   (branco no claro, quase preto no escuro, `--topo-fundo`) e com sombra de
   nivel 2 para nao se misturar ao conteudo que passa por baixo (pedido de
   2026-10-03; ate entao era petroleo, a casca). Fica (sticky); `z-index`
   acima do painel para o diagrama do mapa nao passar por cima dela. */
.topo {
  display: flex; align-items: center; gap: var(--e-4);
  padding-inline: var(--e-5);
  background: var(--topo-fundo); color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level2);
  position: sticky; top: 0; z-index: 20;
  /* O rotulo flutuante do ano corta a borda com a cor do cabecalho (§11.12). */
  --campo-fundo: var(--topo-fundo);
}
/* Casca azul no claro (§11.14): o anel `secondary` some sobre o petroleo.
   O cabecalho e superficie e fica com o anel de sempre. */
.nav :focus-visible { outline-color: var(--casca-foco); }
.topo__titulo {
  font: var(--md-sys-typescale-title-large);
  font-weight: var(--md-sys-typescale-emphasized-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A marca: a logo IAF 360 (simbolo GV no menu recolhido). No topo da lateral de 840px
   para cima, na altura do cabecalho; abaixo, no proprio cabecalho. */
.topo__marca, .nav__marca {
  min-width: 0; display: flex; align-items: center; gap: var(--e-3);
  font: var(--md-sys-typescale-title-large);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  white-space: nowrap;
}
.topo__marca { color: var(--md-sys-color-secondary); }
/* Com a logo, a faixa cresce para ela ocupar a largura da lateral, centrada
   (pedido de 2026-10-11); recolhida volta aos 64px, so com o simbolo. */
.nav__marca {
  min-height: var(--altura-topo); padding: var(--e-3); justify-content: center; margin: calc(var(--e-2) * -1) 0 var(--e-2);
  color: var(--casca-texto); border-bottom: 1px solid var(--casca-divisor);
}
:is(.topo__marca, .nav__marca) strong { font-weight: 700; }
@media (min-width: 840px) { .topo__marca { display: none; } }
@media (max-width: 839px) { .nav__marca { display: none; } }
/* O simbolo GV (vault_iaf/_ref/icon-gv.svg) como MASCARA: o arquivo e
   petroleo cheio e sumiria na casca petroleo; pela mascara ele toma a cor
   do texto em volta nos dois temas. */
.topo__icone {
  flex: none; width: 32px; height: 32px; background: currentColor;
  -webkit-mask: url("../assets/marca/icon-gv.svg") center / contain no-repeat;
          mask: url("../assets/marca/icon-gv.svg") center / contain no-repeat;
}
/* A logo IAF 360 (simbolo + nome, versao por tema em `--marca-logo`) toma o
   lugar do simbolo e do texto; o simbolo GV so volta quando a logo some —
   menu recolhido e cabecalho compacto. */
.marca__logo {
  flex: none; height: 40px; aspect-ratio: 2339 / 753;
  background: var(--marca-logo) center / contain no-repeat;
}
:is(.topo__marca, .nav__marca) .topo__icone { display: none; }
.nav__marca .marca__logo { width: 100%; height: auto; }
/* Recolher/expandir o menu: botao de icone contornado do MD3. */
.topo__menu {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium);
}
.topo__menu:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
@media (max-width: 839px) { .topo__menu { display: none; } }
.topo__espaco { flex: 1; }

/* Troca de area: "Painel de Controle" no Painel IAF, "Voltar ao Painel
   IAF" no console (PRD-02 §2.2). E o botao contornado do console
   (`.btn--secundario`); aqui so nao encolhe. Visivel a partir de 320px:
   abaixo de 600 o titulo sai da vista (§11.6) e a seta some, para o
   rotulo inteiro caber ao lado do perfil. */
.topo__acao { flex: none; }

/* Ano no Painel IAF: vale para a pagina inteira (pilares e indicadores
   mudam de ano para ano), entao fica no cabecalho. E o MESMO campo
   contornado de todo seletor do painel (`.campo`, rotulo flutuando), e nao
   mais uma pilula propria: um desenho de lista suspensa so. */
.topo__ano { flex: none; width: 112px; }
.topo__ano[hidden] { display: none; }
/* Quatro digitos so: respiro interno menor, para caber em 92px no celular. */
.topo__ano select { padding: 0 calc(var(--e-2) + 24px) 0 var(--e-2); }
.topo__ano::after { right: var(--e-2); }

/* ---------------------------------------------------------------------
   Perfil — botao redondo com as iniciais, e o painel que ele abre
   ---------------------------------------------------------------------
   Nome, tipo de acesso, tema e "Sair" moravam soltos na barra do topo, e
   era isso que a apertava: abaixo de 840 o tema sumia, abaixo de 600 a
   pilula do perfil sumia e o nome truncava. Tudo foi para dentro de um
   botao de 40px (o avatar do MD3), que cabe em qualquer largura — e o
   painel mostra tudo sempre, inclusive o tema no celular. */
.perfil { position: relative; flex: none; }
.perfil__botao, .perfil__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--acao-fundo); color: var(--md-sys-color-on-primary);
  font: var(--md-sys-typescale-label-large);
  font-weight: var(--md-sys-typescale-emphasized-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  flex: none;
}
/* Sem anel, a pedido (2026-09-28): o circulo terracota, como no sistema
   irmao. */
.perfil__botao { border: 0; cursor: pointer; padding: 0; }
.perfil__botao:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity), var(--acao-fundo));
}
.perfil__botao[aria-expanded="true"] { outline: 2px solid var(--md-sys-color-secondary); outline-offset: 2px; }
@media (pointer: coarse) { .perfil__botao { width: var(--alvo-min); height: var(--alvo-min); } }

/* O painel e um menu do MD3 (surface-container, canto extra-small,
   elevacao 2), mas NAO e `role="menu"` — ver `ligarPerfil` em ui.js. */
.perfil__menu {
  position: absolute; right: 0; top: calc(100% + var(--e-2)); z-index: 30;
  width: min(320px, calc(100vw - 2 * var(--e-3)));
  padding: var(--e-4);
  background: var(--menu-fundo);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level2);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2);
}
.perfil__menu[hidden] { display: none; }
.perfil__quem { display: flex; align-items: center; gap: var(--e-3); width: 100%; margin-bottom: var(--e-2); }
.perfil__identidade { display: flex; flex-direction: column; min-width: 0; }
.perfil__nome, .perfil__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil__nome {
  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);
}
.perfil__email {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.perfil__rotulo {
  margin: var(--e-2) 0 0;
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.perfil__menu .tema { display: flex; width: 100%; }
/* Transparencia da coleta de uso (PRD-02 §4.7, LGPD). */
.perfil__aviso {
  margin: var(--e-2) 0 0;
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.perfil__menu .tema__opcao { flex: 1; padding: 0 var(--e-2); }
/* "Trocar senha" (DA-36): acao de texto, acima do Sair, ocupando a linha. */
.perfil__senha { align-self: stretch; margin-top: var(--e-3); justify-content: flex-start; }
.perfil__senha + .perfil__sair { margin-top: 0; }
.perfil__sair { align-self: stretch; margin-top: var(--e-3); }

/* Pilula do perfil: label-medium, `secondary-container` — e um fato
   sobre a pessoa (selecao/estado), nao uma acao. */
.topo__perfil {
  padding: 2px var(--e-2); border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  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;
}

/* `minmax(0, 1fr)` e nao `1fr` na coluna do conteudo (`.app`): `1fr` tem
   minimo `auto`, que e o min-content da coluna — ou seja, a coluna se
   RECUSA a encolher abaixo do texto mais largo que contem. Numa tabela
   larga ou numa lista de navegacao horizontal, isso empurra a pagina
   inteira e abre rolagem lateral no `<html>`, longe do elemento culpado.
   A barra lateral encosta na borda esquerda da tela, sempre (DA-23); o
   `.conteudo` se centraliza DENTRO da coluna que sobra. */

/* Coluna de navegacao: o "standard navigation drawer" do MD3 —
   `surface-container` (a superficie propria que a DA-23 exigiu, agora
   como TOM e nao como cor avulsa), sem borda: no MD3 quem separa a
   coluna do fundo e a diferenca de tom, nao um traco.

   `min-height` alem do `max-height`: sem ele a coluna terminava onde
   acabava o ultimo item e o resto virava fundo de pagina — o menu
   parecia cortado no meio da tela. Agora ocupa a altura da tela inteira,
   do topo (onde mora a marca) ao fim. */
.nav {
  background: var(--casca-fundo);
  padding: var(--e-2) var(--e-3);
  position: sticky; top: 0; align-self: start;
  min-height: 100vh; max-height: 100vh;
  overflow-y: auto;
}
.nav__lista { list-style: none; margin: 0; padding: 0; }
/* Item do drawer: pilula (`full`), label-large, `on-surface-variant`.
   32px por item, nao os 56 do spec: o menu tem 8 itens em 4 grupos, a
   56px ele ocuparia 600px de altura para 8 palavras, e "muito espacado"
   foi a razao de a DA-22 existir. 48px continua valendo em
   `pointer: coarse`, porque la o alvo e o dedo — e o proprio `--ctrl-h`
   ja faz essa troca. */
/* Desde 2026-09-29: 32px e label-medium (eram 40px e label-large), para
   os 16 itens caberem sem rolar num 1920x1080 com zoom de 125% do
   Windows. No toque o alvo volta a 40px (regra logo abaixo). */
.nav__item a {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 32px;
  padding: 0 var(--e-3);
  border-radius: var(--md-sys-shape-corner-medium);
  font: var(--md-sys-typescale-label-medium);
  color: var(--casca-texto-variante); text-decoration: none;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
/* Hover e camada de estado: 8% do texto da casca por cima dela. */
.nav__item a:hover {
  background: color-mix(in srgb, var(--casca-texto) var(--md-sys-state-hover-state-layer-opacity), var(--casca-fundo));
  color: var(--casca-texto); text-decoration: none;
}
/* Item ativo: indicador `secondary-container` + peso enfatizado +
   aria-current. Cor nunca e o unico indicador; no alto contraste do
   Windows a borda vem da regra `forced-colors` acima. */
@media (pointer: coarse) { .nav__item a { min-height: 40px; } }
.nav__icone { flex: none; }
.nav__rotulo { min-width: 0; }
/* No claro, o item ativo e o bloco terracota com sombra do sistema irmao;
   no escuro, a pilula `secondary-container` de sempre (tokens `--casca-ativo-*`). */
.nav__item + .nav__item { margin-top: 1px; }
/* `[aria-current]` e nao so "page": na faixa do Painel IAF o pilar do
   indicador aberto e `aria-current="true"` (o item leva ao 1o indicador). */
.nav__item a[aria-current] {
  background: var(--casca-ativo-fundo);
  color: var(--casca-ativo-texto);
  box-shadow: var(--casca-ativo-sombra);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
}
.nav__item a[aria-current]:hover {
  background: color-mix(in srgb, var(--casca-ativo-texto) var(--md-sys-state-hover-state-layer-opacity), var(--casca-ativo-fundo));
}

/* `margin-inline: auto`: o conteudo se centraliza dentro da propria coluna
   do grid — a barra lateral continua ancorada em `x=0`, e o vazio que
   sobra alem do teto de leitura se divide entre os dois lados do texto.
   Revisao pedida pelo usuario em 2026-09-04, depois da DA-23: em monitor
   largo isso reabre um vao entre menu e texto, e e o efeito desejado.
   O teto de largura continua: e medida de leitura, nao estetica.
   Margem de layout de 24 (classe de janela media ou maior). */
/* Menu recolhido (so de 840px para cima; abaixo e a faixa): a coluna
   estreita dos icones. O rotulo sai da VISTA, nao da arvore — o link
   continua nomeado para o leitor de tela, e o `title` mostra o nome no
   ponteiro. O titulo do grupo vira traco, como na faixa. */
@media (min-width: 840px) {
  .app--nav-recolhida {
    grid-template-columns: var(--largura-nav-recolhida) minmax(0, 1fr);
  }
  .app--nav-recolhida :is(.nav__item a, .nav__marca) { justify-content: center; padding: 0; }
  .app--nav-recolhida .nav__marca .topo__icone { display: block; }
  .app--nav-recolhida :is(.nav__rotulo, .nav__grupo, .nav__marca-texto) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .app--nav-recolhida .nav__lista:not(:first-of-type) {
    margin-top: var(--e-1); padding-top: var(--e-1);
    border-top: 1px solid var(--casca-divisor);
  }
}

.conteudo {
  padding: var(--e-5) var(--e-5) var(--e-7);
  overflow-x: hidden;
  width: 100%;
  max-width: calc(var(--largura-conteudo) + 2 * var(--e-5));
  margin-inline: auto;
}
/* Ultimo bloco da pagina nao encosta no fim: o respiro final e o que diz
   "acabou aqui" em vez de "a pagina cortou". */
.conteudo > :last-child { margin-bottom: 0; }
.conteudo > #conteudo > :last-child { margin-bottom: 0; }

/* Barra de pagina — mora FORA de `#conteudo` porque cada tela reescreve
   o `innerHTML` do conteudo e apagaria o botao junto. Vazia, nao ocupa
   espaco: `:empty` evita o vao em branco no topo das telas que nao tem
   de onde voltar. */
.barra-pagina { margin-bottom: var(--e-3); }
.barra-pagina:empty { display: none; }
.btn--voltar { padding-left: var(--e-3); gap: var(--e-2); }

.conteudo__cabecalho {
  display: flex; align-items: flex-start; gap: var(--e-4);
  margin-bottom: var(--e-4); flex-wrap: wrap;
}
.conteudo__cabecalho .espaco { flex: 1; }
.conteudo__cabecalho h1 { margin-bottom: var(--e-1); }

/* Divisor sob o titulo da PAGINA — e so dela: `:first-child` de
   `#conteudo`. A mesma classe serve de cabecalho de secao no meio da
   tela (o "Etapas" da ordem de carga), e ali a linha diria que a pagina
   recomecou. Divisor e `outline-variant`, nunca `outline`. */
#conteudo > .conteudo__cabecalho:first-child {
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* ---------------------------------------------------------------------
   Trilha — todo degrau que nao e o atual e clicavel, e com area de
   clique de verdade. Texto de 12px tem 16px de altura: como alvo de
   mouse isso e um fio, e era o que fazia a trilha parecer "meio
   clicavel". O MD3 nao tem breadcrumb; cada degrau e um botao de texto
   em miniatura (pilula, camada de estado no hover).
   --------------------------------------------------------------------- */
.trilha {
  display: flex; align-items: center; flex-wrap: wrap;
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 var(--e-2) calc(var(--e-2) * -1);
}
.trilha__degrau, .trilha__atual {
  display: inline-flex; align-items: center; min-height: 28px;
  padding: 0 var(--e-2); border-radius: var(--md-sys-shape-corner-full);
}
.trilha__degrau { color: var(--md-sys-color-on-surface-variant); }
.trilha__degrau: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); text-decoration: none;
}
.trilha__atual {
  color: var(--md-sys-color-on-surface);
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
}
.trilha__sep { color: var(--md-sys-color-outline); }

/* Rotulo que so o leitor de tela precisa. Fora da tela, mas no fluxo de
   acessibilidade — `display:none` sumiria para os dois. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Alvo de ancora nao pode ficar colado no topo da area rolavel. */
.familia[id] { scroll-margin-top: var(--e-5); }

/* Painel: um desenho para todo bloco de leitura (decisao B' de 2026-10-11,
   sobre o pedido de 2026-10-03 "todo bloco se le como card"): o card
   ELEVADO do MD3 — `surface-container-lowest`, canto medium, nivel 1 e
   borda `--bloco-borda`, transparente no claro (o card elevado nao tem
   contorno; a borda continua para a caixa nao mudar) e `outline-variant`
   no escuro, onde a sombra some sobre o fundo. O mesmo de `.card`,
   `.filtros` e `.grupo-pilar`. */
.painel {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--bloco-borda);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level1);
}
.painel__titulo {
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--md-sys-color-outline-variant);
  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);
  display: flex; align-items: center; gap: var(--e-2);
  /* Sem a margem de `h2`: o titulo de painel tem uma altura so (48 + o
     divisor), com ou sem "Exportar" ao lado (2026-10-11). */
  margin: 0;
}
.painel__corpo { padding: var(--e-4); }
.painel + .painel, .painel + .nota, .nota + .painel { margin-top: var(--e-4); }

/* Nota: o aviso da tela — UM por tela (§11.7). O MD3 nao tem banner;
   isto e um card preenchido na cor de container do estado, com o icone
   do estado a esquerda em `currentColor` (mascara CSS, nao fonte de
   icones — ver tokens.css). Texto em `on-X-container`, o par garantido.
   A cor nunca e o unico canal: o icone e o texto dizem o mesmo. */
.nota {
  /* Conteudo da nota e INLINE (strong, texto, link): `display: flex`
     aqui viraria cada `<strong>` e cada `<a>` num item de flex lado a
     lado. O icone entra por posicao absoluta e a nota reserva o espaco
     dele a esquerda; o texto continua fluindo. */
  position: relative;
  padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 20px + var(--e-3));
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-extended-color-info-color-container);
  color: var(--md-extended-color-info-on-color-container);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  margin-bottom: var(--e-4);
}
.nota::before {
  content: ""; position: absolute; left: var(--e-4); top: var(--e-3);
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--icone-info) center / contain no-repeat;
  mask: var(--icone-info) center / contain no-repeat;
}
.nota > :last-child { margin-bottom: 0; }
/* Link dentro de nota herda a cor do container — e o unico par que o
   MD3 garante ali. O sublinhado e o que o distingue do texto. */
.nota a { color: inherit; text-decoration: underline; }
.nota--leitura {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}
.nota--leitura::before { -webkit-mask-image: var(--icone-leitura); mask-image: var(--icone-leitura); }
.nota--erro {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.nota--erro::before { -webkit-mask-image: var(--icone-erro); mask-image: var(--icone-erro); }
.nota--atencao {
  background: var(--md-extended-color-atencao-color-container);
  color: var(--md-extended-color-atencao-on-color-container);
}
.nota--atencao::before { -webkit-mask-image: var(--icone-atencao); mask-image: var(--icone-atencao); }
.nota--sucesso {
  background: var(--md-extended-color-sucesso-color-container);
  color: var(--md-extended-color-sucesso-on-color-container);
}
.nota--sucesso::before { -webkit-mask-image: var(--icone-sucesso); mask-image: var(--icone-sucesso); }

/* Icones de estado como mascara: um `data:` SVG por estado, sem cor
   propria (a cor vem de `currentColor` via `background`). Tracos de
   Material Symbols simplificados, viewBox 0 0 24 24. */
:root {
  --icone-info:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 17h2v-6h-2v6Zm1-8q.425 0 .713-.288T13 8q0-.425-.288-.712T12 7q-.425 0-.712.288T11 8q0 .425.288.713T12 9Zm0 13q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Z'/%3E%3C/svg%3E");
  --icone-leitura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20H4Zm0-2h16V6H4v12Zm2-2h8v-2H6v2Zm0-4h12v-2H6v2Zm0-4h12V6H6v2Z'/%3E%3C/svg%3E");
  --icone-erro:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17q.425 0 .713-.288T13 16q0-.425-.288-.712T12 15q-.425 0-.712.288T11 16q0 .425.288.713T12 17Zm-1-4h2V7h-2v6Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Z'/%3E%3C/svg%3E");
  --icone-atencao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21 12 2l11 19H1Zm3.45-2h15.1L12 6 4.45 19ZM12 18q.425 0 .713-.288T13 17q0-.425-.288-.712T12 16q-.425 0-.712.288T11 17q0 .425.288.713T12 18Zm-1-3h2v-5h-2v5Z'/%3E%3C/svg%3E");
  --icone-sucesso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4 4.25 4.25ZM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Z'/%3E%3C/svg%3E");
  --icone-fechar:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19Z'/%3E%3C/svg%3E");
  --icone-seta:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 6 9.4l1.4-1.4 4.6 4.6 4.6-4.6L18 9.4l-6 6Z'/%3E%3C/svg%3E");
  --icone-busca:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.6 21 13.3 14.7q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.887T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3-1.4 1.4ZM9.5 14q1.875 0 3.188-1.312T14 9.5q0-1.875-1.312-3.187T9.5 5Q7.625 5 6.313 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z'/%3E%3C/svg%3E");
  --icone-tema-sistema: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 18q-.825 0-1.412-.587T2 16V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v10q0 .825-.587 1.413T20 18h-6v2h-4v-2H4Zm0-2h16V6H4v10Zm8-1q1.65 0 2.825-1.175T16 11q0-1.65-1.175-2.825T12 7v8Z'/%3E%3C/svg%3E");
  --icone-tema-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15Zm0 2q-2.075 0-3.537-1.463T7 12q0-2.075 1.463-3.537T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.462 3.537T12 17ZM2 13q-.425 0-.712-.288T1 12q0-.425.288-.712T2 11h2q.425 0 .713.288T5 12q0 .425-.287.712T4 13H2Zm18 0q-.425 0-.712-.288T19 12q0-.425.288-.712T20 11h2q.425 0 .713.288T23 12q0 .425-.287.712T22 13h-2Zm-8-8q-.425 0-.712-.287T11 4V2q0-.425.288-.712T12 1q.425 0 .713.288T13 2v2q0 .425-.287.713T12 5Zm0 18q-.425 0-.712-.288T11 22v-2q0-.425.288-.712T12 19q.425 0 .713.288T13 20v2q0 .425-.287.712T12 23ZM5.65 7.05 4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7q-.275.3-.687.288T5.65 7.05ZM18 19.425l-1.05-1.075q-.275-.3-.275-.712t.275-.688q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.287.688t-.287.712L6 19.425q-.275.3-.7.288t-.725-.288Z'/%3E%3C/svg%3E");
  --icone-tema-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1Q7.425 6.5 6.213 8.25T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z'/%3E%3C/svg%3E");
  --icone-cadeado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22H6Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.587T14 15q0-.825-.587-1.412T12 13q-.825 0-1.412.588T10 15q0 .825.588 1.413T12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6v2Z'/%3E%3C/svg%3E");
  --icone-marca:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z'/%3E%3C/svg%3E");
}

.silencioso {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* O corte e a classe de janela do MD3: "expandida" comeca em 840px, e
   e a partir dela que o spec mostra o drawer padrao; abaixo, rail ou
   barra. Nao ha outra conta por tras do numero (em 840 a coluna de 232
   ja ocupa 27,6%; sobram 608px de conteudo, e tabela larga rola dentro
   do painel — DA-26 §9). O console usa uma FAIXA horizontal no lugar do
   rail/barra, que e a decisao da DA-23 (o drawer modal do MD3 ficou
   registrado la como alternativa, para quando passar de ~12 itens). */
@media (max-width: 839px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--altura-topo) auto 1fr;
    grid-template-areas: "topo" "nav" "conteudo";
  }

  /* UMA faixa que rola de lado, nao quatro listas empilhadas. Cada grupo
     tinha titulo proprio e lista propria, um embaixo do outro: 316px de
     menu antes de qualquer dado, e num telefone de 844px isso era a tela
     inteira — o titulo da pagina comecava em y=436 e o primeiro card em
     y=930. Quem rola agora e a faixa; a pagina continua comecando no
     conteudo. A faixa mantem a superficie do drawer (`surface-container`)
     e os itens continuam pilulas: e o mesmo componente, deitado. */
  .nav {
    display: flex; align-items: center; gap: var(--e-1);
    padding: var(--e-1) var(--e-2);
    min-width: 0;
    position: static; min-height: 0; max-height: none;
    overflow-x: auto; overflow-y: hidden;
  }

  /* O titulo do grupo sai da VISTA, nao da arvore: cada `<ul>` o aponta
     por `aria-labelledby`, entao ele continua nomeando o grupo para o
     leitor de tela. Na faixa ele so faria a rolagem ficar duas vezes mais
     longa — "ENTENDER O MODELO" ocupa mais que os dois itens que rotula. */
  .nav__grupo {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .nav__lista { display: flex; flex: none; gap: var(--e-1); }
  /* A divisao entre grupos vira um traco, ja que o rotulo saiu. Nao da
     para usar `ul + ul`: entre duas listas existe o `<div>` do titulo.
     `:first-of-type` conta so entre os `<ul>` irmaos, que e o que se
     quer. Divisor e `outline-variant`. */
  .nav__lista:not(:first-of-type) {
    border-left: 1px solid var(--casca-divisor);
    padding-left: var(--e-1); margin-left: var(--e-1);
  }
  .nav__item a { white-space: nowrap; padding: 0 var(--e-3); }
}

/* Classe compacta do MD3 (< 600px): margem de layout de 16, e o
   cabecalho tambem tem de caber — nome de usuario longo empurrava a
   barra inteira, e a barra empurra a pagina. */
@media (max-width: 599px) {
  .conteudo { padding: var(--e-4) var(--e-4) var(--e-6); }
  /* O `.espaco` empurra os badges para a direita, o que so faz sentido
     quando titulo e badges dividem a mesma linha. Quebrando a linha, ele
     joga os badges para o canto oposto ao texto que eles qualificam. */
  .conteudo__cabecalho .espaco { display: none; }
  .conteudo__cabecalho { gap: var(--e-2); }

  .topo { gap: var(--e-2); padding-inline: var(--e-3); }
  .topo__ano { width: 96px; }
  .topo__marca .topo__icone { display: block; }
  :is(.topo__titulo, .topo__marca-texto) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .topo__acao-seta { display: none; }
  .topo__acao { padding-inline: var(--e-3); }
}
/* 320-399px: o simbolo sai e o cabecalho aperta, para ano, troca de area
   e perfil caberem inteiros (medido em 320). */
@media (max-width: 399px) {
  .topo { gap: var(--e-1); padding-inline: var(--e-2); }
  .topo__marca { display: none; }
  .topo__ano { width: 92px; }
}


/* ---------------------------------------------------------------------
   Seletor de tema — botao segmentado do MD3
   ---------------------------------------------------------------------
   Tres opcoes e escolha unica: e exatamente o caso do segmented button
   (o MD3 o define para 2 a 5 opcoes relacionadas). Contorno unico em
   `outline`, divisorias entre os segmentos, o escolhido em
   `secondary-container` com o icone de confirmacao a esquerda — a mesma
   marca de selecao dos chips e do item de navegacao.

   Por que TRES e nao um interruptor: "Sistema" e o padrao e precisa
   continuar alcancavel. Um interruptor de dois estados obrigaria quem
   nunca pensou no assunto a escolher, e tiraria a unica opcao que
   acompanha o computador da pessoa ao anoitecer.

   Mora no painel do perfil desde 2026-09-28, e por isso vale em qualquer
   largura. Antes ficava solto na barra do topo e sumia abaixo de 840px,
   porque ali a estourava. */
/* `.segmentado` (painel.js): o mesmo botao segmentado, generico — Mes | Ciclo,
   Ranking | Linha do tempo, Grafico | Tabela (2026-10-11). Um desenho, duas
   classes: `.tema` continua sendo o do perfil. */
.tema, .segmentado {
  display: inline-flex; align-items: center;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden; flex: none;
}
:is(.tema__opcao, .segmentado__opcao) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1);
  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);
  color: var(--md-sys-color-on-surface-variant);
  background: transparent; border: 0; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
:is(.tema__opcao, .segmentado__opcao) + :is(.tema__opcao, .segmentado__opcao) {
  border-left: 1px solid var(--md-sys-color-outline);
}
:is(.tema__opcao, .segmentado__opcao):hover:not(:disabled) {
  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);
}
:is(.tema__opcao, .segmentado__opcao)[aria-checked="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
:is(.tema__opcao, .segmentado__opcao)[aria-checked="true"]: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));
}
/* Anel de foco por dentro: o segmento encosta no vizinho, e um anel com
   `outline-offset` positivo cobriria o botao ao lado. */
:is(.tema__opcao, .segmentado__opcao):focus-visible { outline-offset: -3px; }
/* Opcao sem dado (Mes ou Ciclo ainda nao apurado): conteudo desabilitado do MD3. */
.segmentado__opcao:disabled {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent);
}
.tema__icone {
  flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;   mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.tema__opcao[data-tema="sistema"] .tema__icone { -webkit-mask-image: var(--icone-tema-sistema); mask-image: var(--icone-tema-sistema); }
.tema__opcao[data-tema="claro"]   .tema__icone { -webkit-mask-image: var(--icone-tema-claro);   mask-image: var(--icone-tema-claro); }
.tema__opcao[data-tema="escuro"]  .tema__icone { -webkit-mask-image: var(--icone-tema-escuro);  mask-image: var(--icone-tema-escuro); }

/* ---------------------------------------------------------------------
   Rodape — na casca (fim de `.conteudo`) e no login
   ---------------------------------------------------------------------
   `.conteudo` e coluna flex com altura minima da tela util: em pagina
   curta o rodape encosta no fim da tela, nao no fim do texto. */
.conteudo { display: flex; flex-direction: column; min-height: calc(100vh - var(--altura-topo)); }

/* Barra de rolagem fina, nas cores do tema: a padrao do Windows traz as
   setinhas de rolar, mais um desenho de seta na tela (2026-10-03). */
html, .nav, .tabela-rolagem, .combo__lista { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline) transparent; }
.nav { scrollbar-color: var(--casca-divisor) transparent; }

/* Alvo de foco que nao e controle (`#conteudo`, painel de aba, familia):
   recebe foco por programa ou pelo "Pular para o conteudo", e o anel em
   volta da pagina inteira a cada clique se lia como defeito (2026-10-03).
   Botao, link e campo continuam com o anel. */
:is(div, section, main, article)[tabindex="-1"]:focus { outline: none; }
.rodape {
  margin-top: auto; padding-top: var(--e-6);
  text-align: center;
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* ---------------------------------------------------------------------
   Menu do Painel IAF: os pilares (ui.js `menuDoPainel`)
   ---------------------------------------------------------------------
   De 840px para cima, um acordeao: um <details> por pilar, o sumario no
   tom do item e a seta do `.recolhivel`; o indicador e o item, com o
   codigo no lugar do icone (28 icones iguais nao diriam nada). Abaixo de
   840 o acordeao sai e fica a faixa com um item por pilar (decisao de
   2026-10-01) — sem gaveta modal. */
.nav__pilar > summary {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 32px; padding: 0 var(--e-3); cursor: pointer; list-style: none;
  border-radius: var(--md-sys-shape-corner-medium);
  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(--casca-texto);
}
.nav__pilar > summary::-webkit-details-marker { display: none; }
.nav__pilar > summary::after {
  content: ""; flex: none; margin-left: auto; width: 18px; height: 18px; 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);
}
.nav__pilar[open] > summary::after { transform: rotate(180deg); }
.nav__pilar > summary:hover {
  background: color-mix(in srgb, var(--casca-texto) var(--md-sys-state-hover-state-layer-opacity), var(--casca-fundo));
}
@media (pointer: coarse) { .nav__pilar > summary { min-height: 40px; } }
.nav__pilar .nav__lista { padding-left: var(--e-2); margin-top: var(--e-1); }
/* Respiro entre pilares e entre indicadores (pedido de 2026-10-10: "muito curto"). */
.nav__pilar + .nav__pilar { margin-top: var(--e-2); }
.nav__pilar[open] { padding-bottom: var(--e-1); }
.nav__pilar .nav__item + .nav__item { margin-top: 4px; }
/* As paginas do Painel IAF (Visao geral, Desempenho por PDV...) com o mesmo
   respiro dos indicadores. So no painel: o console mantem os 32px da DA-22. */
.nav--painel .nav__item + .nav__item { margin-top: 4px; }
.nav--painel .nav__item a { padding-block: 6px; line-height: 1.35; }
.nav__pilar > summary { padding-block: 6px; line-height: 1.35; }
/* Nome de indicador quebra em duas linhas ("Alcance de Meta de Receita PEF
   Loja"): sem respiro vertical, as duas linhas encostavam na borda do item. */
.nav__pilar .nav__item a { padding-block: 6px; line-height: 1.35; }
.nav__codigo {
  flex: none; min-width: 2.6em; font-variant-numeric: tabular-nums;
  font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
}
@media (min-width: 840px) {
  .nav__pilares {
    margin-top: var(--e-1); padding-top: var(--e-2);
    border-top: 1px solid var(--casca-divisor);
  }
  .nav__pilares-faixa { display: none; }
}
@media (max-width: 839px) {
  .nav__pilar { display: none; }
  .nav__pilares {
    display: flex; flex: none;
    border-left: 1px solid var(--casca-divisor);
    padding-left: var(--e-1); margin-left: var(--e-1);
  }
}