/* =============================================================================
   POMAR — componentes. Nenhum hex aqui; nenhum font-size literal aqui.
   Convencao: portugues semantico para estilo (.ficha, .campo), js- para gancho de
   JavaScript, data- para estado. Classe de estilo pode ser renomeada a vontade.
   ============================================================================= */

/* A fonte, auto-hospedada. Fica FORA de @layer de proposito: @font-face nao e uma regra que
   compete por especificidade, e o lugar dela e antes de tudo que a usa.

   Um arquivo so, com o eixo de peso variavel: o sistema usa 400, 550, 600 e 700, e quatro
   arquivos estaticos custariam quatro vezes a rede para entregar a mesma coisa. Subset latin —
   cobre o portugues inteiro (a, e, i, o, u com til, cedilha e acento vivem em U+00C0-00FF) mais
   travessao e reticencias (U+2000-206F). Nao cobre a seta U+2192, e o sistema ja sabia disso:
   o "→" do historico e um simbolo do sprite, e nao um caractere.

   Inter v4, SIL Open Font License 1.1. A licenca vai junto, em fonte/LICENSE-Inter.txt, porque
   a OFL exige que acompanhe o arquivo redistribuido. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  /* A faixa inteira do eixo: e o que autoriza o navegador a interpolar o 550 que os botoes
     pedem, em vez de arredondar para 500 ou 600. */
  font-weight: 100 900;
  font-display: swap;
  /* format("woff2") e nao format("woff2-variations"): o segundo e sintaxe legada e nao-padrao,
     e um motor que nao a reconheca DESCARTA a fonte inteira e cai no fallback sem avisar — o
     mesmo modo de falha silencioso que este arquivo acabou de sair. Fonte variavel carrega
     normalmente com o format simples; quem decide o eixo e o font-weight acima. */
  src: url("/fonte/inter-latin-variavel.woff2") format("woff2");
}

@layer base, componentes, telas, utilidades;

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

  html { font-size: 16px; }

  body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--fonte-ui);
    font-size: var(--t-base);
    line-height: var(--lh-base);
    color: var(--tinta);
    background: var(--fundo);
    font-feature-settings: "cv05" 1, "zero" 1;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, p, dl, dd, dt, ol, ul, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }

  /* O atributo hidden so age pela folha do NAVEGADOR, e qualquer display de autor o
     anula — .aba-painel { display: grid } deixaria os paineis das abas sempre visiveis.
     !important na PRIMEIRA camada vence todas as outras: hidden volta a ser lei. */
  [hidden] { display: none !important; }

  /* A UNICA excecao a regra de cima, e ela mora AQUI por causa da mesma mecanica que o
     comentario anterior explica: para declaracoes !important a ordem das camadas se INVERTE, e
     um !important na primeira camada vence o de qualquer camada posterior. Escrever esta excecao
     em "componentes" nao teria efeito nenhum — e nao teria mesmo, foi o primeiro lugar em que ela
     foi escrita.

     O que ela faz: os paineis de aba ocupam a MESMA celula de grade, e o escondido continua
     ocupando o espaco dele, invisivel. Assim o container mede sempre o painel mais alto e o modal
     PARA DE PULAR DE TAMANHO a cada clique de aba — um dialogo que muda de altura embaixo do
     cursor move o botao de gravar para onde a mao ja nao esta. O preco e espaco vazio na aba mais
     curta, e ele e menor que o do salto.

     visibility: hidden, e nao opacity: o painel invisivel sai do foco e do leitor de tela junto,
     que e o que o atributo hidden prometia.

     So vale depois que o JS assumiu: o :has() testa o tablist ter deixado de ser hidden, porque
     ele nasce assim e quem o revela e o pomar.js. Sem JavaScript os paineis empilham de verdade,
     um debaixo do outro, e sobrepo-los ali seria ilegivel. */
  .formulario:has(> .abas:not([hidden])) .abas-paineis > .aba-painel[hidden] {
    display: block !important;
    visibility: hidden;
  }

  .formulario:has(> .abas:not([hidden])) .abas-paineis > .aba-painel { grid-area: 1 / 1; }

  button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
  a { color: var(--marca-texto); text-underline-offset: 2px; }

  /* Anel de foco sempre instantaneo e sempre com folga. Agora que --foco e ambar (a razao
     inteira esta escrita ao lado do token, em tokens.css), o offset deixou de ser conforto e
     passou a ser o que sustenta a regra: encostado no --marca o anel mede 2,11:1 no claro e
     1,00:1 no escuro — la ele e literalmente a MESMA cor do botao, e sumiria por completo.
     Os 2px de vao sao pintados pela superficie, e e contra ela que os 3:1 da 1.4.11 valem.
     Zerar este offset apaga o foco do botao da marca, e nada no CSS reclamaria. */
  :focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
    border-radius: var(--r1);
  }

  .pular-para-conteudo {
    position: absolute; left: -9999px; top: var(--e2); z-index: var(--z-pular);
    background: var(--superficie); color: var(--tinta);
    padding: var(--e2) var(--e3); border-radius: var(--r1); box-shadow: var(--elev-2);
  }
  .pular-para-conteudo:focus { left: var(--e2); }

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

@layer componentes {

  /* ---------- tipografia ---------- */
  .t-tela {
    font-family: var(--fonte-display);
    font-size: var(--t-tela); line-height: var(--lh-tela); font-weight: 600; letter-spacing: -.01em;
  }
  .t-secao   { font-size: var(--t-secao); line-height: var(--lh-secao); font-weight: 600; letter-spacing: -.006em; }
  .t-legenda { font-size: var(--t-apoio); line-height: var(--lh-apoio); }

  /* As duas que faltavam. Os tokens --t-destaque e --t-mini existiam desde o comeco e nenhuma
     classe os consumia: o Style Guide escrevia class="t-destaque" e class="t-mini", as duas
     linhas saiam no tamanho herdado do pai, e a pagina que existe para PROVAR a escala era
     justamente onde a escala nao valia. Defeito de manual, e do pior tipo — quem confere confia.

     Ficam aqui, junto das outras .t-*, e nao na camada base: partir uma familia em duas camadas
     faria o vencedor de um class="t-secao t-mini" deixar de ser a ultima regra escrita e passar
     a ser a ordem das camadas. Precedencia invisivel dentro de uma escala que se le como uma so. */
  .t-destaque { font-size: var(--t-destaque); line-height: var(--lh-destaque); font-weight: 600; }
  .t-mini     { font-size: var(--t-mini); line-height: var(--lh-mini); }
  .t-micro {
    font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
  }
  .t-num { font-variant-numeric: tabular-nums lining-nums; }

  /* ---------- shell ---------- */
  /* Uma linha so: o palco. A barra do topo saiu, e a coluna da esquerda virou a casca inteira do
     sistema. A pagina NUNCA rola — quem rola e a regiao dos cards, la dentro, e o miolo da
     lateral. E o que garante que a marca, a navegacao e a conta nao saem da tela.

     O position: relative e o que torna a frase acima VERDADE, e nao enfeite. overflow: hidden so
     recorta o descendente que se apoia NESTA caixa — um filho com position: absolute sem nenhum
     ancestral posicionado se apoia no viewport, e passa por baixo do recorte. E o caso do
     .so-leitor, que e absoluto e aparece dezenas de vezes nas views: dentro do .corpo, que rola, a
     posicao estatica dele fica la embaixo, onde o conteudo esta — na Style Guide, a 3288px —, e
     como ele escapa do recorte, quem cresce ate la e o DOCUMENTO. Isso dava uma SEGUNDA barra de
     rolagem, colada a direita da barra do .corpo, rolando uma pagina inteira de nada.
     Com o relative esta caixa vira o bloco de contencao, o absoluto volta a ser recortado aqui, e
     sobra uma barra so: a dos cards. */
  .app {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    height: 100dvh;
    overflow: hidden;
    position: relative;
  }

  /* ---------- o que sobrou da casca ----------
     A barra horizontal do topo nao existe mais nas telas de trabalho: a marca, o tema, o sair e a
     conta moram na lateral, que e canvas. O que continua aqui e o topo da tela de INICIO, que
     reusa estas pecas (.casca-nome, .casca-pe, .nav-item, .dica, .avatar) sobre a superficie
     dela — e a tela de ENTRADA, que segue sendo casca de verdade, escura nos dois temas. */
  .landing-marca {
    display: flex; align-items: center; gap: var(--e3); flex-shrink: 0;
    height: 34px; padding: 0 var(--e2); border-radius: var(--r1);
    text-decoration: none;
  }
  .casca-nome {
    color: var(--casca-tinta);
    font-size: var(--t-medio); font-weight: 700; letter-spacing: .06em;
  }

  /* A marca do POMAR e um disco ambar com um broto saindo de um livro — e as folhas
     ULTRAPASSAM o disco. Por isso ela nao ganha fundo circular nem recorte: o simbolo ja
     traz a propria forma, e enquadra-lo num circulo cortaria as folhas.
     A largura de 22px e SO da barra: a tela de entrada usa o simbolo em 44px. */
  .marca-simbolo { display: block; height: auto; }
  .lateral-marca .marca-simbolo, .landing-marca .marca-simbolo { width: 22px; }

  .nav-item {
    position: relative; height: 34px; padding: 0 var(--e3);
    display: inline-flex; align-items: center; gap: var(--e2);
    border-radius: var(--r1); white-space: nowrap;
    color: var(--casca-tinta-2); font-size: var(--t-apoio); font-weight: 550;
    transition: background var(--ms-1) var(--curva), color var(--ms-1) var(--curva);
  }
  .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
  .nav-item:hover { background: var(--casca-fundo-2); color: var(--casca-tinta); }
  .nav-item:focus-visible { outline-offset: -2px; outline-color: var(--casca-foco); }

  /* Botao so-icone (tema, sair): o rotulo vira dica abaixo, porque aqui o nome e obvio. */
  .nav-item-icone { width: 34px; padding: 0; justify-content: center; }
  .nav-item .dica {
    position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
    white-space: nowrap;
    background: var(--casca-fundo-2); color: var(--casca-tinta);
    padding: var(--e1) var(--e2); border-radius: var(--r1); font-size: var(--t-mini);
    border: 1px solid var(--casca-borda); box-shadow: var(--elev-2);
    opacity: 0; pointer-events: none; transition: opacity var(--ms-1); z-index: var(--z-dica);
  }
  .nav-item:hover .dica, .nav-item:focus-visible .dica { opacity: 1; }

  .casca-pe { margin-left: auto; display: flex; align-items: center; gap: var(--e2); flex-shrink: 0; }
  .avatar {
    width: 28px; height: 28px; border-radius: var(--r-pill);
    background: var(--casca-ativo); color: var(--casca-tinta);
    display: grid; place-items: center;
    font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em;
  }

  /* ---------- palco: a coluna permanente + a tela ---------- */
  .palco {
    display: grid;
    grid-template-columns: var(--lateral) minmax(0, 1fr);
    min-height: 0;
  }

  /* A lateral e CANVAS, e nao casca, mesmo tendo herdado a marca e a conta da barra que morreu:
     o que mora nela em maior quantidade sao campo, seletor e botao de formulario, que falam
     tokens de canvas. Uma coluna escura nos dois temas obrigaria uma segunda pele para cada um
     deles — e e exatamente a duplicacao de design system que este projeto existe para nao ter.

     Tres faixas: a marca, o miolo que ROLA, e o pe com a conta. So o miolo rola, entao a saida
     do sistema nunca depende de rolar uma lista de filtros ate o fim. */
  .lateral {
    min-height: 0;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    display: flex; flex-direction: column;
  }

  /* A marca ocupa a altura que a barra do topo ocupava (--alt-topo): o mesmo respiro de antes,
     agora numa faixa que nao custa altura da area de trabalho. */
  .lateral-marca {
    flex-shrink: 0; min-height: var(--alt-topo);
    display: flex; align-items: center; gap: var(--e3);
    padding: 0 var(--e4); text-decoration: none;
    border-bottom: 1px solid var(--borda);
    transition: background var(--ms-1) var(--curva);
  }
  .lateral-marca:hover { background: var(--superficie-2); }
  .lateral-marca:focus-visible { outline-offset: -2px; }
  .lateral-marca-nome {
    color: var(--tinta); font-size: var(--t-medio); font-weight: 700; letter-spacing: .06em;
  }

  .lateral-rolo {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: var(--e4);
    display: flex; flex-direction: column; gap: var(--e4);
  }
  .lateral-grupo { display: grid; gap: var(--e-pilha); align-content: start; }

  /* Os grupos da lateral sao SECOES, e por isso ha uma linha entre eles. Antes era uma pilha
     unica separada so por respiro: identidade, acoes e filtros chegavam com o mesmo peso, e a
     coluna lia como uma lista comprida de controles em vez de tres blocos com assuntos
     diferentes.

     A linha vai no irmao SEGUINTE, e nao um border-bottom em cada grupo: assim o ultimo bloco
     nunca termina numa linha solta pairando sobre o vazio do rodape da coluna. */
  .lateral-rolo > * + * { border-top: 1px solid var(--borda); padding-top: var(--e4); }

  /* O pe: quem esta logado, o tema e a saida — o que era o canto direito da barra do topo. */
  .lateral-pe {
    flex-shrink: 0; padding: var(--e3) var(--e4);
    border-top: 1px solid var(--borda);
    display: grid; gap: var(--e2);
  }
  .lateral-pe-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
  .conta { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
  /* O disco das iniciais e o irmao canvas do .avatar da casca: mesma forma, tokens que viram com
     o tema — na barra escura ele podia ser --casca-ativo, aqui embaixo nao. */
  .conta-disco {
    width: 28px; height: 28px; border-radius: var(--r-pill); flex-shrink: 0;
    background: var(--superficie-3); color: var(--tinta);
    display: grid; place-items: center;
    font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em;
  }
  /* Nome por extenso, cortado com reticencias quando nao cabe: "Maria das Gracas do Nascimento"
     existe, e 264px nao sao negociaveis. O nome inteiro continua no title e no so-leitor. */
  .conta-nome {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--t-apoio); color: var(--tinta-2);
  }

  /* O rotulo de cada grupo em caixa alta e espacado, como o da doca. E o que distingue "FILTROS"
     — que nomeia uma SECAO da coluna — de um titulo de conteudo no mesmo corpo de 11px. */
  .lateral .t-micro {
    color: var(--tinta-3); letter-spacing: .06em; text-transform: uppercase;
  }

  /* A identidade da SECAO no alto da coluna: o mesmo disco colorido da doca, na mesma cor da
     secao, com o nome ao lado. Responde "onde eu estou" sem repetir o h1 — o h1 nomeia a TELA e
     este nomeia a secao a que ela pertence —, e chega pela cor antes de chegar pela palavra,
     que e exatamente o que a doca da tela de inicio ensinou. */
  .lateral-cabeca { display: flex; align-items: center; gap: var(--e2); }
  .lateral-cabeca-nome {
    font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
  }
  /* Mesma construcao do disco da doca, em tamanho de rotulo: a cor da secao em background-COLOR
     e o verniz em background-image, nunca o atalho «background», que apagaria o verniz so nesta
     secao. E a armadilha que .doca-icone tem teste para impedir, e ela vale igual aqui. */
  .lateral-cabeca-disco {
    width: 26px; height: 26px; border-radius: var(--r1);
    display: grid; place-items: center; flex-shrink: 0;
    background-color: var(--doca-usuarios); color: var(--doca-tinta);
    background-image: var(--verniz);
    box-shadow: var(--verniz-relevo);
  }
  .lateral-cabeca[data-cor="super"] .lateral-cabeca-disco { background-color: var(--doca-super); }
  .lateral-cabeca[data-cor="aparencia"] .lateral-cabeca-disco { background-color: var(--doca-aparencia); }
  .lateral-cabeca[data-cor="trabalho"] .lateral-cabeca-disco { background-color: var(--doca-trabalho); }
  .lateral-cabeca-disco svg { width: 15px; height: 15px; }

  /* Trocador de tela da secao: Usuarios e Perfis sao uma secao so na doca, e a troca entre as
     duas acontece AQUI — do mesmo lado em que ficam as acoes e os filtros. A linha que o separa
     do que vem depois e a regra geral dos grupos, la em cima. */
  .lateral-secao { display: grid; gap: var(--e0); }
  .secao-item {
    position: relative;
    height: var(--alt-controle); padding: 0 var(--e3);
    display: flex; align-items: center; gap: var(--e2);
    border-radius: var(--r1); text-decoration: none;
    color: var(--tinta-2); font-size: var(--t-base); font-weight: 550;
    transition: background var(--ms-1) var(--curva), color var(--ms-1) var(--curva);
  }
  .secao-item svg { width: 17px; height: 17px; flex-shrink: 0; }
  .secao-item-nome { flex: 1 1 auto; min-width: 0; }
  .secao-item:hover { background: var(--superficie-2); color: var(--tinta); }

  /* O item ABERTO e onde a tela esta nomeada — o h1 saiu do alto do conteudo justamente porque
     repetia esta palavra na area mais nobre da tela. Entao ele nao pode ser "o mesmo item, um
     pouco mais escuro": alem do fundo e do peso, ha o trilho colorido a esquerda, na cor da
     secao, que e a mesma do disco logo acima. Tres sinais, e nenhum deles e so cor — quem nao
     distingue a cor continua tendo fundo, peso e o aria-current que o leitor de tela anuncia. */
  .secao-item[aria-current="page"] {
    background: var(--superficie-3); color: var(--tinta); font-weight: 600;
  }
  .secao-item[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
    width: 3px; height: 20px; border-radius: var(--r-pill);
    background: var(--doca-usuarios);
  }
  .lateral-secao[data-cor="super"] .secao-item[aria-current="page"]::before { background: var(--doca-super); }
  .lateral-secao[data-cor="aparencia"] .secao-item[aria-current="page"]::before { background: var(--doca-aparencia); }
  .lateral-secao[data-cor="trabalho"] .secao-item[aria-current="page"]::before { background: var(--doca-trabalho); }

  /* Quantos registros a tela esta mostrando AGORA — com filtro, e o que sobrou dele. Era uma
     frase debaixo do titulo ("4 pessoa(s) cadastrada(s)"), e virou o numero ao lado do nome:
     mesma informacao, sem gastar a primeira linha do conteudo. Tabular para o numero nao dancar
     de largura quando a lista muda. */
  .secao-conta {
    flex-shrink: 0; font-size: var(--t-mini); font-weight: 600;
    color: var(--tinta-3); font-variant-numeric: tabular-nums;
  }
  .lateral .filtros .campo { min-width: 0; }
  .lateral-acoes { display: grid; gap: var(--e2); }

  /* ---------- botoes ---------- */
  /* O .btn veste <button> e <a>: navegacao vestida de acao ("Nova comunidade" abre modal por
     link). Sem esta linha a ancora chega com o sublinhado do navegador e o botao ganha
     tipografia de link — a roupa nao pode denunciar a tag que esta por baixo. */
  .btn {
    height: var(--alt-controle); border-radius: var(--r1); padding: 0 var(--e3);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
    font-size: var(--t-base); font-weight: 550; white-space: nowrap; text-decoration: none;
    transition: background var(--ms-1) var(--curva), border-color var(--ms-1) var(--curva);
  }
  .btn svg { width: 16px; height: 16px; }
  .btn:disabled { cursor: not-allowed; color: var(--tinta-4); border-color: var(--borda); background: var(--superficie); }

  /* :active existia em zero lugares no arquivo. O clique nao dava nenhum retorno — e a
     diferenca entre "cliquei" e "acho que cliquei" e a razao pela qual as pessoas clicam duas
     vezes. Deslocar 1px custa nada e responde na hora; sob reducao de movimento some junto
     com o resto do deslocamento, e o escurecimento do fundo continua respondendo. */
  .btn:active:not(:disabled) { translate: 0 1px; }

  /* aria-busy, e nao uma classe: o estado ja precisa existir para o leitor de tela, entao
     nao ha razao para inventar um segundo lugar onde a mesma verdade e escrita. */
  .btn[aria-busy="true"] { cursor: progress; }

  /* Repouso um degrau acima do container, como o .controle logo abaixo — botao da mesma cor da
     lateral era contorno puro. A escada inteira sobe junto: hover -3, pressionado -4. */
  .btn-fantasma { border: 1px solid var(--borda-forte); color: var(--tinta); background: var(--superficie-2); }
  .btn-fantasma:hover:not(:disabled) { background: var(--superficie-3); }
  .btn-fantasma:active:not(:disabled) { background: var(--superficie-4); }

  /* A UNICA superficie ambar da tela: a acao que cria. Sempre com contorno. */
  .btn-marca {
    background: var(--marca); color: var(--marca-tinta);
    border: 1px solid var(--marca-borda); font-weight: 600;
  }
  .btn-marca:hover:not(:disabled) { background: var(--marca-forte); }
  .btn-marca:active:not(:disabled) { background: var(--marca-borda); }

  /* Destruir nunca e ambar. E precisa de hover: este e o botao de TODA confirmacao, inclusive
     das que nao destroem nada, e um botao cheio que nao responde ao ponteiro parece travado. */
  .btn-perigo { background: var(--erro-cheio); color: var(--erro-cheio-tinta); border: 1px solid var(--erro-cheio); }
  .btn-perigo:hover:not(:disabled) { background: var(--erro); border-color: var(--erro); }
  .btn-perigo:active:not(:disabled) { filter: brightness(.92); }

  .btn-bloco { width: 100%; }

  /* A acao da lateral (o "Filtrar" de seis telas) pesa mais que um fantasma comum. Ela divide a
     coluna com os campos, e depois que o contorno deles virou hairline os dois nao podiam continuar
     vestidos igual: o campo recebe, o botao faz. Um degrau a mais de preenchimento e o peso da
     letra bastam — gastar o ambar aqui quebraria a regra de UMA superficie ambar por tela, que na
     tela de Comunidades ja e o "Nova comunidade". */
  .lateral-acoes .btn-fantasma {
    background: var(--superficie-3); font-weight: 600;
  }
  .lateral-acoes .btn-fantasma:hover:not(:disabled) { background: var(--superficie-4); }
  /* A escada acabou: subindo um degrau no repouso, o pressionado deste botao empatava com o hover
     em --superficie-4, e o clique voltava a nao ter retorno de cor sob reducao de movimento — que
     e exatamente o que a regra do .btn:active existe para evitar. O escurecimento e o mesmo idioma
     do .btn-perigo, e nao um quinto valor de superficie inventado para um botao so. */
  .lateral-acoes .btn-fantasma:active:not(:disabled) {
    background: var(--superficie-4); filter: brightness(.94);
  }

  /* Botao de linha de tabela. Menor, nunca mais baixo que 28px: alvo de toque tem piso. */
  .btn-mini { height: 28px; padding: 0 var(--e2); font-size: var(--t-mini); }
  .btn-mini svg { width: 14px; height: 14px; }

  /* ---------- botao so-icone ---------- */
  /* Estava reimplementado quatro vezes, em quatro tamanhos e com tres conjuntos de estado
     (.btn-fechar, .nav-item-icone, .landing-enviar, .doca-item). Este e o do CANVAS; a casca
     mantem o seu, porque la os tokens sao outros por contrato. */
  .btn-icone {
    width: var(--alt-controle); height: var(--alt-controle); flex-shrink: 0;
    display: inline-grid; place-items: center;
    border-radius: var(--r1); color: var(--tinta-3);
    transition: background var(--ms-1) var(--curva), color var(--ms-1) var(--curva);
  }
  .btn-icone svg { width: 16px; height: 16px; }
  .btn-icone:hover:not(:disabled) { background: var(--superficie-2); color: var(--tinta); }
  .btn-icone:active:not(:disabled) { background: var(--superficie-3); }
  .btn-icone:disabled { color: var(--tinta-4); cursor: not-allowed; }

  /* ---------- menu de acoes ---------- */
  /* O "..." que o briefing pede e que nao existia em nenhuma tela: a acao de linha era um
     botao de CRUD repetido em cada uma. Como a doca, e um <details> — abre no clique e no
     Enter, fecha no Esc, e funciona sem uma linha de JavaScript. O JS so acrescenta o
     fechar-ao-clicar-fora, que <details> nao faz sozinho.

     E alcancavel por teclado de verdade: nao aparece no hover, aparece no foco. Menu que so
     existe sob o ponteiro e menu que nao existe para quem navega por Tab. */
  .menu { position: relative; display: inline-block; }
  .menu-gatilho {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: var(--r1); color: var(--tinta-3);
    cursor: pointer; list-style: none;
    transition: background var(--ms-1) var(--curva), color var(--ms-1) var(--curva);
  }
  .menu-gatilho::-webkit-details-marker { display: none; }
  .menu-gatilho::marker { content: ""; }
  .menu-gatilho svg { width: 16px; height: 16px; }
  .menu-gatilho:hover, .menu[open] .menu-gatilho { background: var(--superficie-3); color: var(--tinta); }
  .menu-gatilho:focus-visible { outline-offset: -2px; }

  .menu-lista {
    position: absolute; right: 0; top: calc(100% + var(--e1));
    z-index: var(--z-menu); width: max-content; min-width: 168px; max-width: 260px;
    display: grid; gap: var(--e0); padding: var(--e1);
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r2); box-shadow: var(--elev-2);
  }
  /* Perto do fim da tabela o menu abriria para fora do quadro, que rola. Ancorado para cima,
     ele volta para dentro sem precisar de calculo em JavaScript. */
  .menu-acima .menu-lista { top: auto; bottom: calc(100% + var(--e1)); }

  .menu-item {
    display: flex; align-items: center; gap: var(--e2);
    padding: var(--e2) var(--e3); border-radius: var(--r1);
    width: 100%; text-align: left;
    color: var(--tinta); font-size: var(--t-apoio); font-weight: 550; text-decoration: none;
    white-space: nowrap;
    transition: background var(--ms-1) var(--curva);
  }
  .menu-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--tinta-3); }
  .menu-item:hover { background: var(--superficie-2); }
  .menu-item:active { background: var(--superficie-3); }
  /* A acao destrutiva NAO ganha fundo vermelho: dentro de um menu ela ficaria mais pesada que
     a acao que a pessoa veio fazer. E letra vermelha, que ja distingue sem gritar. */
  .menu-item-perigo { color: var(--erro); }
  .menu-item-perigo svg { color: var(--erro); }
  .menu-separador { height: 1px; background: var(--borda); margin: var(--e1) 0; }

  /* ---------- dialogo ---------- */
  /* Elemento nativo: foco preso, Esc e fundo inerte sem uma linha de biblioteca. */
  .dialogo {
    border: 1px solid var(--borda); border-radius: var(--r3);
    background: var(--superficie); color: var(--tinta);
    box-shadow: var(--elev-3); padding: 0;
    width: min(420px, calc(100vw - var(--e5)));
  }
  .dialogo::backdrop { background: var(--veu); }
  .dialogo-corpo { display: grid; gap: var(--e3); padding: var(--e5); }
  .dialogo-pe { display: flex; gap: var(--e2); justify-content: flex-end; }

  /* O modal de formulario: novo, editar e redefinir senha abrem AQUI, por cima da lista.
     O conteudo e o MESMO formulario da pagina inteira, buscado e injetado — sem JavaScript
     o link navega para a pagina e nada se perde. So o cabecalho fica; o miolo rola inteiro,
     acoes do formulario incluidas. */
  .dialogo-form {
    width: min(640px, calc(100vw - var(--e6)));
    max-height: min(88dvh, 900px);
    display: flex; flex-direction: column;
  }
  .dialogo-form:not([open]) { display: none; }
  .dialogo-form-largo { width: min(880px, calc(100vw - var(--e6))); }
  .dialogo-cabecalho {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--borda);
    flex-shrink: 0;
  }
  .dialogo-cabecalho h2 { flex: 1; min-width: 0; }
  .btn-fechar {
    width: 32px; height: 32px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--r1); color: var(--tinta-3);
    transition: background var(--ms-1) var(--curva), color var(--ms-1) var(--curva);
  }
  .btn-fechar svg { width: 16px; height: 16px; }
  .btn-fechar:hover { background: var(--superficie-2); color: var(--tinta); }
  .dialogo-conteudo {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: var(--e5);
  }
  .dialogo-ocupado { color: var(--tinta-3); font-size: var(--t-apoio); padding: var(--e5); }

  /* ---------- campo ---------- */
  .campo { display: grid; gap: var(--e-fino); }
  .campo > label { font-size: var(--t-apoio); line-height: var(--lh-apoio); font-weight: 550; color: var(--tinta-2); }

  .controle {
    width: 100%; height: var(--alt-controle); padding: 0 var(--e3);
    border-radius: var(--r1);
    /* O contorno em repouso e --borda-campo: uma hairline, deliberadamente abaixo do que a 1.4.11
       pede — a razao inteira esta escrita ao lado do token, em tokens.css. O que devolve o contorno
       forte e o INTERESSE: hover sobe para --borda-forte, foco vai para --foco. 1px continua sendo
       a linha mais fina que o navegador desenha; daqui para baixo so existe tirar a borda. */
    border: 1px solid var(--borda-campo);
    /* Um degrau ACIMA da superficie onde o campo mora (lateral, dialogo, bloco — tudo
       --superficie): preenchido com a mesma cor do container, o campo era so-contorno, e dentro
       e fora liam como a mesma coisa. O degrau e o que marca "aqui se escreve". */
    /* background-COLOR, e nao o atalho: o atalho zera background-image junto, e a seta do
       <select> logo abaixo e desenhada exatamente ali. Com o atalho ela sumia. */
    background-color: var(--superficie-2); color: var(--tinta);
    font: inherit; appearance: none;
  }
  .controle::placeholder { color: var(--tinta-3); }
  /* --borda-forte, e nao --tinta-3: com o repouso agora em hairline, saltar direto para 5,8:1
     fazia o campo piscar de "quase nada" para "quase texto". O hover para no contorno funcional,
     que e o degrau imediatamente acima. */
  /* O :focus-visible esta EXCLUIDO do hover de proposito, e nao por gosto de escrever seletor
     comprido. Sem isso o hover ganhava a disputa por especificidade — `:hover:not(:disabled)` e
     (0,3,0) contra (0,2,0) do foco — e a borda do campo recem-clicado voltava para o cinza
     enquanto o ponteiro continuasse em cima dele, que e exatamente onde o ponteiro esta depois
     de um clique. O anel de fora salvava a leitura, mas a borda de dentro dizia "hover" num
     campo que estava com o cursor piscando.
     Escrito como exclusao, e nao empatando a especificidade com um :not(:disabled) decorativo
     no foco: assim o arquivo declara QUEM manda quando os dois estados sao verdade ao mesmo
     tempo, em vez de depender da ordem das linhas. */
  .controle:hover:not(:disabled, :focus-visible) { border-color: var(--borda-forte); }
  .controle:focus-visible { border-color: var(--foco); }

  /* Faltava, e duas views ja renderizavam campo desabilitado (o nome e o nivel de um perfil de
     sistema): eles ficavam identicos a um campo editavel, e a pessoa so descobria ao digitar e
     nada acontecer. O cinza tem 3,75:1, que e o piso para elemento inativo — e a regra de nao
     comunicar so por cor esta cumprida pelo proprio cursor e pelo disabled nativo, que o leitor
     de tela anuncia. */
  .controle:disabled {
    /* Desce PARA a cor do container, e nao um degrau acima: com o campo editavel agora marcado
       em -2, o desabilitado se marca por afundar de volta — ele deixa de parecer um lugar onde
       se escreve. Tinta e borda apagadas e o cursor continuam dizendo o mesmo. */
    background-color: var(--superficie); color: var(--tinta-4);
    border-color: var(--borda); cursor: not-allowed;
  }

  /* A seta do <select> e NOSSA, e nao a do sistema. A nativa do Chrome no Windows e um chevron
     grosso, com peso e tamanho que nao existem em nenhum outro lugar da interface: ao lado de um
     campo de texto da mesma altura, o select parecia vir de outro programa. Esta e o mesmo
     triangulo pequeno e cinza que o Grajau desenha nos selects dele.

     Sao dois quadrados de 4px encostados, cada um cortado na diagonal por um degrade de duas
     paradas: o da esquerda fica com a metade de cima-direita, o da direita com a de cima-esquerda,
     e juntos formam um triangulo de 8x4 apontando para baixo. Feito assim, e nao com um SVG em
     data:, porque o triangulo precisa mudar de cor com o tema — url() nao aceita var(), e o hex
     dentro do data: seria hex fora do tokens.css, que e a regra da casa (e ha teste cobrando).

     O padding da direita abre 32px para o texto da opcao nunca passar por baixo da seta. */
  select.controle {
    appearance: none; cursor: pointer;
    padding-right: var(--e6);
    background-image:
      linear-gradient(45deg,  transparent 50%, var(--tinta-3) 50%),
      linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%);
    background-position: right 14px center, right 10px center;
    background-size: 4px 4px;
    background-repeat: no-repeat;
  }
  /* A seta acompanha a tinta do campo desabilitado: em --tinta-3 ela ficava mais viva que a
     propria opcao escrita ao lado, e um controle apagado anunciava um menu que nao abre. */
  select.controle:disabled {
    background-image:
      linear-gradient(45deg,  transparent 50%, var(--tinta-4) 50%),
      linear-gradient(135deg, var(--tinta-4) 50%, transparent 50%);
  }

  /* ="true", e nao so [data-erro]: o seletor de atributo casa com atributo VAZIO, entao um
     data-erro="" — que aparece na hora em que alguem devolve string em vez de null — pintaria
     de vermelho um formulario recem-aberto, sem uma mensagem sequer para explicar. Exigir o
     valor faz o acidente ser impossivel, e nao apenas improvavel. */
  .campo[data-erro="true"] .controle {
    border-color: var(--erro);
    box-shadow: inset 0 0 0 1px var(--erro); /* 2px sem mexer na altura do controle */
  }
  .campo-ajuda { font-size: var(--t-apoio); line-height: var(--lh-apoio); color: var(--tinta-3); }
  .campo-erro  { font-size: var(--t-apoio); line-height: var(--lh-apoio); color: var(--erro); display: flex; gap: var(--e-fino); align-items: flex-start; }
  .campo-erro svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

  .campo-opcional { color: var(--tinta-3); font-weight: 400; }

  /* ---------- grade de campos ---------- */
  /* Um cadastro com 26 campos em quatro abas nao cabe numa coluna: a aba mais cheia passa da
     altura do modal, e rolar DENTRO de modal e onde o botao de salvar sai de vista — a pessoa
     preenche tudo e nao acha como gravar.

     Duas colunas quando ha largura, uma quando nao ha. E o par bool+texto ("tem energia" ao lado
     de "como funciona") passa a dividir a MESMA linha, que e onde ele foi desenhado para ficar:
     no vagalume os dois estao a uma linha de distancia no servico e em pontas opostas da tela, e
     o resultado e que ninguem preenche o segundo. */
  .campos { display: grid; gap: var(--e3); align-items: start; }

  /* CONTAINER query, e nao media query, e a diferenca e a coisa toda: o mesmo formulario aparece
     em duas larguras muito diferentes — 880px dentro do modal e 620px em pagina inteira —, e o
     que decide se cabem duas colunas e a largura DISPONIVEL, nao a da janela. Com @media, um
     dialogo estreito numa tela larga continuaria em duas colunas e vazaria para fora.

     So o bloco que de fato tem uma grade de campos vira container: containment e barato, mas nao
     e de graca, e nao ha motivo para impo-lo a todo .bloco do sistema. */
  .bloco:has(> .campos) { container-type: inline-size; }

  @container (min-width: 480px) {
    .campos { grid-template-columns: 1fr 1fr; }

    /* Campo que toma a linha inteira: nome, texto longo, textarea. */
    .campos > .campo-largo { grid-column: 1 / -1; }
  }

  .abas-paineis { display: grid; }

  /* O alvo de toque tem piso de 24x24 (WCAG 2.2, 2.5.8) e a caixa desenhada tem 16px. Em vez
     de inchar o desenho, o proprio rotulo entra no alvo: <label for> ja alterna a caixa, entao
     a area clicavel real e caixa + palavra. O padding vertical garante os 24px mesmo quando o
     rotulo e curto. */
  .escolha { display: flex; align-items: center; gap: var(--e2); min-height: 24px; }
  .escolha input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--marca-borda); margin: 0; flex-shrink: 0; }
  .escolha label { font-size: var(--t-apoio); color: var(--tinta-2); padding: var(--e1) 0; cursor: pointer; }
  .escolha input[type="checkbox"]:disabled + label { cursor: not-allowed; }

  /* ---------- resumo de erro ---------- */
  /* Faixa dentro do corpo, com foco movido para ela. Nunca um toast que some.
     A forma vem do bloco abaixo, junto com .faixa: sao o mesmo componente. */
  .alerta-erro ul { display: grid; gap: var(--e0); }

  /* ---------- faixa de recado ---------- */
  /* .alerta-erro e .faixa eram o MESMO componente escrito duas vezes, e ja tinham divergido
     (uma ganhou tres tons, a outra ficou so no vermelho). Agora a forma e declarada uma vez e
     o tom e um modificador. Vive no fluxo do conteudo: recado que evapora em tres segundos e
     recado que quem estava lendo outra coisa nunca viu — e e por isso que o POMAR nao tem
     toast, apesar de o briefing pedir um. */
  .faixa, .alerta-erro {
    border: 1px solid var(--borda); border-radius: var(--r1);
    padding: var(--e2) var(--e3); display: flex; gap: var(--e2); align-items: flex-start;
    font-size: var(--t-apoio); line-height: var(--lh-apoio); color: var(--tinta);
  }
  .faixa svg, .alerta-erro svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

  .faixa-ok     { background: var(--sucesso-fundo); border-color: var(--sucesso); }
  .faixa-ok svg { color: var(--sucesso); }
  .faixa-recusa, .alerta-erro { background: var(--erro-fundo); border-color: var(--erro); }
  .faixa-recusa svg, .alerta-erro svg { color: var(--erro); }
  .faixa-nota     { background: var(--info-fundo); border-color: var(--info); }
  .faixa-nota svg { color: var(--info); }
  /* A quarta, que faltava. Nasceu porque o log completo precisava avisar "perdi N linhas": nao e
     erro (o sistema esta funcionando) e nao e nota (nao e informacao neutra) — e aviso. Sem ela a
     view usava .faixa-aviso, que nao existia, e a faixa saia sem cor nenhuma em silencio. */
  .faixa-aviso     { background: var(--aviso-fundo); border-color: var(--aviso); }
  .faixa-aviso svg { color: var(--aviso); }

  /* O recuo de PAGINA nao mora no componente. Ele morava, e a tela de inicio precisava desfazer
     (.landing > .faixa { margin: 0 }) — sinal de que a regra estava no lugar errado: quem sabe
     o recuo e o contexto, nao o recado. */
  .tela > .faixa {
    margin: var(--e4) var(--e5) 0;
    max-width: calc(var(--largura-max) - 2 * var(--e5));
  }

  /* ---------- selo ---------- */
  /* Nunca ambar: selo e dado, e o ambar do sistema e preenchimento de UMA acao por tela.
     Perdeu o contorno e a forma de pilula: eram tres sinais simultaneos (fundo + borda +
     capsula) para dizer uma palavra. O briefing pede selo discreto, e o texto ja carrega o
     estado — "ativo"/"inativo" se leem sem depender da cor, que e o que 1.4.1 cobra. */
  .selo {
    display: inline-flex; align-items: center; gap: var(--e1);
    height: 18px; padding: 0 var(--e-fino); border-radius: var(--r1);
    background: var(--superficie-3); color: var(--tinta-2);
    font-size: var(--t-micro); line-height: 18px; font-weight: 600; white-space: nowrap;
    vertical-align: 1px;
  }
  .selo-ok    { background: var(--sucesso-fundo); color: var(--sucesso); }
  .selo-aviso { background: var(--aviso-fundo);   color: var(--aviso); }
  .selo-fraco { background: var(--superficie-2);  color: var(--tinta-3); }

  /* ---------- tabela ---------- */
  /* O quadro rola SOZINHO no eixo x. Sem isto, uma tabela larga empurra a pagina inteira e a
     casca sai da tela junto — e o trilho e o unico jeito de sair da pagina. */
  .quadro {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r2); overflow-x: auto;
  }
  /* separate + spacing 0, e nao collapse: no modo collapse a borda pertence a TABELA e fica
     para tras quando o thead sticky gruda no topo — o cabecalho colado perdia o divisor. */
  .tabela { width: 100%; border-collapse: separate; border-spacing: 0; }
  .tabela th, .tabela td {
    text-align: left; padding: var(--e2) var(--e3);
    border-bottom: 1px solid var(--borda); vertical-align: middle;
  }
  /* height em celula age como minimo — e o unico jeito de a DENSIDADE alcancar a tabela:
     min-height em table-cell e ignorado pelos navegadores. O padding vertical cai para e1
     de proposito: com e2 o piso de conteudo (8+20+8) ja passaria da densidade compacta, e o
     seletor viraria decoracao. O respiro visivel volta pelo proprio height minimo. */
  .tabela tbody th, .tabela tbody td {
    height: var(--alt-linha);
    padding-top: var(--e1); padding-bottom: var(--e1);
  }
  .tabela thead th {
    font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
    background: var(--superficie-2); white-space: nowrap;
    position: sticky; top: 0; z-index: var(--z-colado);
  }
  .tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }
  .tabela tbody tr:hover { background: var(--superficie-2); }
  .tabela .col-num { text-align: right; }
  .tabela .col-acoes { text-align: right; white-space: nowrap; width: 1%; }

  /* A LINHA INTEIRA e o alvo, e nao so o nome. A linha ja acendia no hover mas so o nome
     levava a algum lugar: o realce prometia uma area clicavel que nao existia, e a pessoa
     clicava no meio da linha e nada acontecia.

     O link continua sendo um <a> de verdade no nome — ele e que da o destino, o foco e o
     menu de contexto do navegador. O ::after so estende a area do MESMO link ate as bordas da
     linha; nao ha JavaScript de clique, nem div fingindo ser link. Os controles reais da
     linha (o menu de acoes) sobem acima dele com position: relative. */
  .tabela tbody tr { position: relative; }
  .linha-alvo::after {
    content: ""; position: absolute; inset: 0;
    /* Nao rouba o anel de foco: o :focus-visible continua desenhando no proprio <a>. */
  }
  .tabela td > .menu, .tabela th > .menu { position: relative; z-index: var(--z-colado); }

  /* Cabecalho que ordena. O estado vem do servidor em aria-sort, que e a mesma verdade que o
     leitor de tela anuncia — sem classe paralela dizendo a mesma coisa em outro lugar. */
  .tabela thead th a {
    display: inline-flex; align-items: center; gap: var(--e1);
    color: inherit; text-decoration: none; white-space: nowrap;
  }
  .tabela thead th a:hover { color: var(--tinta); }
  .ordenador-seta { width: 12px; height: 12px; opacity: 0; flex-shrink: 0; }
  .tabela thead th[aria-sort] a { color: var(--tinta); }
  .tabela thead th[aria-sort] .ordenador-seta { opacity: 1; }
  .tabela thead th[aria-sort="descending"] .ordenador-seta { rotate: 180deg; }
  .tabela thead th a:hover .ordenador-seta { opacity: .5; }
  .tabela thead th[aria-sort] a:hover .ordenador-seta { opacity: 1; }

  /* A linha selecionada — o token existia desde o inicio e nenhum componente o consumia. */
  .tabela tbody tr[aria-selected="true"] { background: var(--marca-suave); }

  /* ---------- esqueleto ---------- */
  /* Para o intervalo entre abrir o modal e o formulario chegar. O token --esqueleto tambem
     estava declarado, documentado e sem consumidor desde o comeco.

     aria-hidden porque isto nao e conteudo: quem anuncia a espera e o aria-busy do container.
     Uma barra cinza lida em voz alta e ruido, nao informacao. */
  .esqueleto {
    display: grid; gap: var(--e3); padding: var(--e5);
  }
  .esqueleto-linha {
    height: 12px; border-radius: var(--r1); background: var(--esqueleto);
    animation: pulsar 1.4s ease-in-out infinite;
  }
  .esqueleto-linha:nth-child(2) { width: 76%; }
  .esqueleto-linha:nth-child(3) { width: 54%; }
  .esqueleto-campo { height: var(--alt-controle); border-radius: var(--r1); background: var(--esqueleto); }

  @keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

  /* A primeira celula e um <th scope="row">: quem usa leitor de tela ouve de quem e a linha
     antes de cada valor, em vez de "ativo, 14/08/2026" sem sujeito. */
  .celula-titulo { font-weight: 550; }
  .celula-titulo a { color: var(--tinta); text-decoration: none; }
  .celula-titulo a:hover { text-decoration: underline; }
  .celula-apoio { display: block; color: var(--tinta-3); font-size: var(--t-mini); font-weight: 400; }
  /* Uma linha, com reticencias. Nasceu para o User-Agent do log de acessos: 120 caracteres numa
     celula empurram a tabela para fora da tela, e o valor inteiro fica no title. */
  .celula-cortada { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- abas de TELA (visoes da mesma tela, por URL) ---------- */
  /* Diferente de .abas: aquelas trocam painel dentro de um formulario, com JavaScript. Estas sao
     links de verdade para telas de servidor — favoritavel, e o botao voltar funciona. */
  .abas-de-tela { display: flex; gap: var(--e1); margin-left: auto; align-self: flex-end; }
  .aba-de-tela {
    height: var(--alt-controle); padding: 0 var(--e3); border-radius: var(--r1);
    display: inline-flex; align-items: center;
    color: var(--tinta-2); font-size: var(--t-apoio); font-weight: 550; text-decoration: none;
    transition: background var(--ms-1) var(--curva), color var(--ms-1) var(--curva);
  }
  .aba-de-tela:hover { background: var(--superficie-2); color: var(--tinta); }
  .aba-de-tela[aria-current="page"] {
    background: var(--superficie-3); color: var(--tinta); font-weight: 600;
  }

  /* ---------- grafico de barras por dia ---------- */
  /* Barras em CSS puro: o projeto nao carrega CDN, e trinta barras nao justificam uma biblioteca.
     A altura de cada uma chega em --altura, calculada no ViewModel. */
  .grafico {
    margin: 0; display: grid; gap: var(--e2);
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r2); padding: var(--e4);
  }
  .grafico > figcaption { color: var(--tinta-3); }
  /* preserveAspectRatio="none" no SVG: o desenho estica para a largura do bloco, e a geometria
     das barras vem em atributo — nao ha style= em view neste projeto, e a regra e boa. */
  .grafico-desenho { display: block; width: 100%; height: 96px; }
  .grafico-barra { fill: var(--marca-borda); transition: fill var(--ms-1) var(--curva); }
  .grafico-barra:hover { fill: var(--marca); }
  .grafico-eixo {
    display: flex; justify-content: space-between;
    color: var(--tinta-3); font-size: var(--t-mini);
  }

  /* ---------- barra de proporcao dentro de celula ---------- */
  .barra {
    display: block; width: 100%; max-width: 120px; height: 4px; margin-top: var(--e1);
    border-radius: 2px; background: var(--superficie-3);
  }
  .barra-cheia { fill: var(--marca-borda); }

  /* ---------- vitrine (o catalogo de componentes) ---------- */
  /* As unicas classes que existem SO para a pagina de referencia. Ficam aqui, e nao numa folha
     separada, porque uma segunda folha de estilo para demonstrar a primeira e o comeco de duas
     verdades sobre o mesmo visual. */
  .amostra-linha { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
  .amostra-estreita { max-width: 420px; }
  .amostra-cores { display: flex; flex-wrap: wrap; gap: var(--e2); }
  .amostra {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 0 var(--e3); border-radius: var(--r1);
    font-size: var(--t-apoio); font-weight: 600;
  }
  /* Cada amostra usa o PAR do token, e nunca duas variaveis escolhidas na hora: e a mesma regra
     que vale no resto do sistema, e demonstra-la aqui e parte do ponto desta pagina. */
  .amostra-marca   { background: var(--marca);        color: var(--marca-tinta); }
  .amostra-sucesso { background: var(--sucesso-fundo); color: var(--sucesso); border: 1px solid var(--sucesso); }
  .amostra-aviso   { background: var(--aviso-fundo);   color: var(--aviso);   border: 1px solid var(--aviso); }
  .amostra-erro    { background: var(--erro-fundo);    color: var(--erro);    border: 1px solid var(--erro); }
  .amostra-info    { background: var(--info-fundo);    color: var(--info);    border: 1px solid var(--info); }

  /* A doca demonstrada. O involucro repete o container da tela de inicio de proposito: la a doca
     e filha de um flex COLUMN, e e isso que faz o align-self: center dela encolher a moldura ate
     a largura dos discos. Num div comum a moldura esticaria de ponta a ponta e a amostra mostraria
     uma faixa que nao existe em tela nenhuma — a pagina de referencia mentindo sobre a referencia.

     O recuo de cima reserva a altura do menu, que abre PARA CIMA. Sem ele, o primeiro clique de
     quem confere a pagina joga o menu por cima da legenda do bloco: o comportamento certo do
     componente apareceria como defeito da pagina que o demonstra.

     O numero e medido, e nao escolhido: o maior menu da amostra e o de Usuarios, com tres telas,
     e na densidade confortavel ele mede 129px mais os 16 que o separam do disco. Os 152 daqui
     cobrem isso com folga de 7px. Quem acrescentar uma QUARTA tela a Usuarios precisa subir este
     recuo junto — o menu passa a 168px e volta a cobrir a legenda, sem nada reclamando. */
  .amostra-doca {
    display: flex; flex-direction: column;
    padding-top: calc(var(--e8) * 2 + var(--e5));
  }

  /* ---------- filtros ---------- */
  /* Vivem na lateral, empilhados. O rotulo agora e visivel: numa coluna ha espaco, e
     "Todos os perfis" sozinho nao diz qual pergunta o seletor responde. */
  .filtros { display: grid; gap: var(--e3); align-content: start; }

  /* Os filtros de uso raro, recolhidos num <details> por assunto (lugar, pessoa). A lista de
     voluntarios chegou a doze seletores empilhados com o mesmo peso — a coluna virava um
     formulario comprido, e o ano, que muda tudo, ficava igual ao genero. O grupo abre sozinho
     quando algum filtro dele esta em uso, e o numero no titulo diz quantos. */
  .filtros-grupo { border-top: 1px solid var(--borda); padding-top: var(--e3); }
  .filtros-grupo > summary {
    display: flex; align-items: center; gap: var(--e2);
    cursor: pointer; list-style: none;
    color: var(--tinta-2); font-size: var(--t-apoio); font-weight: 600;
  }
  .filtros-grupo > summary::-webkit-details-marker { display: none; }
  .filtros-grupo > summary::after {
    content: ""; margin-left: auto; width: 7px; height: 7px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--ms-1) var(--curva);
  }
  .filtros-grupo[open] > summary::after { transform: rotate(-135deg); }
  .filtros-grupo > summary:hover { color: var(--tinta); }
  .filtros-grupo > .filtros { margin-top: var(--e3); }
  .filtros-grupo-conta {
    min-width: 18px; padding: 0 var(--e1); border-radius: var(--r-pill);
    background: var(--superficie-3); color: var(--tinta);
    font-size: var(--t-micro); text-align: center;
  }

  .paginacao { display: flex; gap: var(--e3); align-items: center; justify-content: flex-end; flex-shrink: 0; }

  /* ---------- ficha ---------- */
  .ficha { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: var(--e2) var(--e4); }
  .ficha dt { color: var(--tinta-3); font-size: var(--t-mini); line-height: var(--lh-apoio); }
  .ficha dd { color: var(--tinta); font-size: var(--t-apoio); line-height: var(--lh-apoio); overflow-wrap: anywhere; }

  /* ---------- trilha (o historico de alteracoes de UM registro) ---------- */
  /* O prefixo NAO e .historico-*, e a distancia entre as duas coisas justifica o nome novo:
     .historico-* e o painel de perguntas anteriores da tela de inicio, e nada nele se parece com
     isto. Duas listas diferentes sob o mesmo prefixo e o comeco de um CSS em que mexer numa tela
     estraga outra sem que o nome avise ninguem.

     Um EVENTO por bloco, com o diff dentro dele. O contra-exemplo e o vagalume, que transpoe o
     historico numa tabela de ~60 linhas (uma por campo) por N colunas (uma por versao), sem
     realce nenhum: quem le procura com o olho qual das 60xN celulas mudou, e tipicamente mudou
     UMA. Aqui so o que mudou e desenhado, e o que nao mudou nem ocupa espaco.

     Sem largura declarada: ela vive no modal largo (.dialogo-form-largo, 880px), e quem manda na
     largura de um dialogo e o dialogo. O historico e sempre o historico DE alguma coisa, entao
     abrir por cima da lista e voltar sem navegar e parte do desenho. */
  .trilha { display: grid; gap: var(--e4); align-content: start; }

  /* Superficie-2 e borda, sem sombra: o dialogo ja e --superficie com elevacao, e um cartao com
     sombra dentro de um cartao com sombra empilha duas profundidades para dizer uma. */
  .trilha-evento {
    background: var(--superficie-2); border: 1px solid var(--borda);
    border-radius: var(--r2); padding: var(--e3);
    display: grid; gap: var(--e2); align-content: start;
  }

  /* Selo da operacao, quem fez, e a data empurrada para a direita pela .empurra da view.
     Envolve (flex-wrap) porque "Maria das Gracas do Nascimento" existe e nao pode espremer a
     data ate ela quebrar no meio da hora. */
  .trilha-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
  .trilha-quando {
    font-size: var(--t-apoio); line-height: var(--lh-apoio); color: var(--tinta-3);
    /* Tabular: numa pilha de eventos as datas ficam uma embaixo da outra, e digito de largura
       variavel faz cada uma comecar num lugar. */
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* "por planilha - comunidades-agosto.xlsx". So a IMPORTACAO ganha etiqueta: edicao pela tela e
     o caso comum, e etiquetar tambem o comum faria a lista inteira virar etiqueta e nenhuma
     linha se destacar. */
  .trilha-origem {
    font-size: var(--t-mini); line-height: var(--lh-mini); color: var(--tinta-3);
    overflow-wrap: anywhere;
  }

  /* Sem esta regra o icone de "por planilha" sai no tamanho INTRINSECO do svg — um <use> sem
     width/height ocupa o padrao de replaced element (300x150) e engole o cartao inteiro. Todo
     icone inline do sistema tem a dupla width/height por isso. */
  .trilha-origem svg {
    width: 13px; height: 13px; flex-shrink: 0;
    vertical-align: -2px; margin-right: 2px;
  }

  .trilha-campos { display: grid; gap: var(--e1); }

  .trilha-campo {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2);
    font-size: var(--t-apoio); line-height: var(--lh-apoio); min-width: 0;
  }
  /* O rotulo e o mesmo do formulario, em tinta-2: negrito ja o separa, e deixa-lo na tinta cheia
     poria o nome do campo com o mesmo peso do valor NOVO, que e o que a pessoa veio ler. */
  .trilha-rotulo { font-weight: 600; color: var(--tinta-2); }

  /* A seta e um simbolo do sprite, nunca o caractere U+2192: o subset latin da Inter nao o cobre,
     e glifo ausente cai para outra fonte — a seta sairia com outro peso e outra altura, ou como
     um retangulo vazio, conforme o sistema. Isso ja esta escrito em _Icones.cshtml. */
  .trilha-campo svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tinta-3); }

  /* O risco e o unico lugar do sistema em que text-decoration carrega significado. Ele nao esta
     sozinho: a ordem (antes, seta, depois) e a tinta ja dizem a mesma coisa, e e por isso que a
     linha continua legivel para quem nao enxerga o risco. */
  .trilha-de   { color: var(--tinta-3); text-decoration: line-through; overflow-wrap: anywhere; }
  .trilha-para { color: var(--tinta); overflow-wrap: anywhere; }

  /* O traco de "estava em branco", e ele NAO leva o risco: riscar um traco produz um rabisco que
     nao se le como coisa nenhuma. Vazio tambem nao e "0" nem "nao" — no vagalume as tres coisas
     viram a mesma, porque o campo que a planilha nao trouxe e gravado como "nao". */
  .trilha-vazio { color: var(--tinta-3); }

  /* Estreito: a mudanca empilha. Em linha, o valor antigo termina onde o novo comeca e os dois
     viram um texto so — "(68) 99999-0000(68) 98812-4477" e pior do que nao mostrar nada, porque
     parece um numero. Empilhada, a seta gira e continua dizendo o que dizia. */
  @media (max-width: 639px) {
    .trilha-campo { flex-direction: column; align-items: flex-start; gap: var(--e0); }
    .trilha-campo svg { rotate: 90deg; }
  }

  /* ---------- contadores (o resumo de uma conferencia) ---------- */
  /* Os quatro numeros que respondem "o que acontece se eu aplicar": quantas entram, quantas
     mudam, quantas ja batem com o banco e quantas linhas o arquivo perdeu.

     auto-fit com minimo de 140px, e nao quatro colunas fixas: quatro cabem numa tela de trabalho
     e dois por linha num telefone, sem media query e sem nenhum numero espremido. */
  .contadores {
    display: grid; gap: var(--e3);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* A borda esquerda ja nasce com 3px em TODOS, na cor da hairline. Sem isso, o cartao que tem
     tom ficaria 2px mais estreito por dentro que os vizinhos e o numero dele sairia do
     alinhamento por 1px — o tipo de diferenca que ninguem consegue nomear e todo mundo enxerga. */
  .contador {
    background: var(--superficie-2); border: 1px solid var(--borda);
    border-left: 3px solid var(--borda);
    border-radius: var(--r2); padding: var(--e3);
    display: grid; gap: var(--e1); justify-items: center; text-align: center;
  }
  .contador-valor {
    font-size: var(--t-destaque); line-height: var(--lh-destaque); font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .contador-rotulo {
    font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
  }

  /* SO a cor da borda esquerda muda. Quatro cartoes com fundo colorido lado a lado viram um
     semaforo: tudo grita junto, nada chama atencao, e o vermelho de "3 linhas recusadas" acaba
     com o mesmo peso do verde de "2 comunidades novas" — que e exatamente a leitura errada.

     A cor tambem nao carrega informacao sozinha: o rotulo esta escrito embaixo de cada numero,
     entao no Alto Contraste do Windows, onde todo tom de autor desaparece, nada se perde — e por
     isso este componente nao precisa de regra propria la embaixo. */
  .contador[data-tom="ok"]     { border-left-color: var(--sucesso); }
  .contador[data-tom="aviso"]  { border-left-color: var(--aviso); }
  .contador[data-tom="recusa"] { border-left-color: var(--erro); }

  /* O contador que filtra a tabela. Continua lendo como numero, nao como botao: o que o denuncia
     e o hover e o cursor. O aberto ganha fundo e borda cheia — e diz o mesmo pelo aria-current,
     para quem nao ve a cor. */
  .contador-filtro {
    color: inherit; text-decoration: none; cursor: pointer;
    transition: background var(--ms-1) var(--curva), border-color var(--ms-1) var(--curva);
  }
  .contador-filtro:hover { background: var(--superficie-3); }
  .contador-filtro[aria-current="true"] {
    background: var(--superficie-3); border-color: var(--tinta-3);
  }
  .contador-filtro[aria-current="true"] .contador-rotulo { color: var(--tinta); }

  /* ---------- grade de capacidades ---------- */
  .grupo-capacidades, .grupo-leitura { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-fino); }
  .grupo-capacidades legend, .grupo-leitura h3 { padding: 0; color: var(--tinta-3); }
  .escolha-capacidade { min-height: 24px; }
  .escolha-capacidade label { color: var(--tinta); display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
  .escolha input[type="checkbox"]:disabled { accent-color: var(--tinta-4); cursor: not-allowed; }
  .escolha input[type="checkbox"]:disabled + label { color: var(--tinta-3); }

  /* A barra de filtro e de lote. Nasce hidden no HTML e o JS a revela — ver a nota na view. */
  .capacidades-barra {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
    padding-bottom: var(--e3); border-bottom: 1px solid var(--borda);
  }
  .capacidades-filtro { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 0; }
  .capacidades-filtro-icone {
    position: absolute; left: var(--e2); width: 16px; height: 16px;
    color: var(--tinta-3); pointer-events: none;
  }
  .capacidades-filtro .controle { padding-left: var(--e6); }
  .capacidades-lote { display: flex; gap: var(--e1); flex-wrap: wrap; }

  /* Linha propria, sempre. Com margin-left:auto ele ficava a direita enquanto cabia e, no
     primeiro width em que nao cabia, quebrava sozinho para baixo — ainda alinhado a direita,
     encalhado longe do controle que o explica. Uma linha de status embaixo dos controles nao
     depende de caber. */
  .capacidades-conta {
    flex: 1 0 100%; margin: 0; color: var(--tinta-3); font-size: var(--t-mini);
    font-variant-numeric: tabular-nums;
  }

  /* O estado do botao de alternancia sai de aria-pressed, e nao de uma classe paralela: uma
     classe a mais e uma segunda verdade que dessincroniza do que o leitor de tela anuncia. */
  .capacidades-barra [aria-pressed="true"] {
    background: var(--superficie-3); border-color: var(--borda-forte); color: var(--tinta);
  }

  /* Quantas colunas couberem. Com o catalogo crescendo, coluna unica vira rolagem sem fim. */
  .capacidades-grade {
    display: grid; gap: var(--e4); align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .grupo-capacidades legend, .grupo-leitura h3 {
    display: flex; align-items: center; gap: var(--e2); width: 100%;
  }
  .grupo-conta { margin-left: auto; color: var(--tinta-4); font-variant-numeric: tabular-nums; }

  /* Filtrar ESCONDE, nunca remove — e o display precisa ser dito.
     [hidden] vale display:none pela folha do navegador, e .escolha/.grupo-capacidades declaram
     flex e grid: estilo de autor vence o do navegador, entao sem estas duas linhas a caixa
     "escondida" continuaria na tela. Remover do DOM seria pior que continuar aparecendo: caixa
     marcada fora do formulario nao e enviada, e o servidor leria a ausencia como "desligue" —
     o filtro apagaria permissao em silencio, que e o modo de falha que esta tela mais teme. */
  .escolha-capacidade[hidden], .grupo-capacidades[hidden] { display: none; }
  .capacidades-vazio { color: var(--tinta-3); font-size: var(--t-apoio); }

  .lista-capacidades { display: grid; gap: var(--e1); }
  .capacidade { display: flex; align-items: center; gap: var(--e2); color: var(--tinta-3); font-size: var(--t-apoio); }
  .capacidade svg { width: 16px; height: 16px; flex-shrink: 0; }
  /* Concedida e o estado que salta; nao concedida fica em tinta fraca. O atributo so existe
     quando e verdade — Razor omite atributo com valor null, e nunca com string vazia. */
  .capacidade[data-marcada] { color: var(--tinta); }
  .capacidade[data-marcada] svg { color: var(--sucesso); }
}

@layer telas {

  /* ---------- entrada ---------- */
  /* Duas colunas: foto a esquerda, painel a direita. A tela inteira vive na casca — nao tem
     tema, e e por isso que nao existe um segundo arquivo de CSS paralelo no POMAR. */
  .entrada {
    min-height: 100dvh;
    background: var(--casca-fundo);
    display: grid;
    /* A foto e a personagem principal: fica com o que sobrar depois de reservar a largura
       CONFORTAVEL do formulario -- por volta de 70% em telas comuns. Reservar a coluna do
       formulario em px (e nao em fracao) e o que impede o campo de esticar em monitor largo. */
    grid-template-columns: minmax(0, 1fr) clamp(400px, 30%, 520px);
  }

  .entrada-hero {
    position: relative;
    overflow: hidden;
    display: flex; align-items: flex-end;
    padding: var(--e7);
    isolation: isolate;
    color-scheme: dark;  /* so o hero e sempre escuro; o painel acompanha o tema */
  }

  /* A foto num pseudo-elemento proprio para o veu escuro nao depender de opacity nela: o texto
     precisa de contraste garantido, e escurecer a imagem inteira apaga o rio. */
  .entrada-hero-foto {
    position: absolute; inset: 0; z-index: -2;
    background-image: url("/img/amazonia.jpg");
    background-size: cover;
    background-position: center 35%;
  }
  .entrada-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(
      to top,
      var(--casca-veu-1) 0%,
      var(--casca-veu-2) 26%,
      var(--casca-veu-3) 62%,
      var(--casca-veu-4) 100%);
  }

  .entrada-hero-texto { max-width: 30ch; display: grid; gap: var(--e3); }
  .entrada-hero-olho {
    font-size: var(--t-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--casca-marca);           /* ambar como TINTA — 9,80:1 sobre o veu */
  }
  .entrada-hero-titulo {
    font-family: var(--fonte-display);
    font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; font-weight: 600;
    letter-spacing: -.015em; color: var(--casca-tinta);
  }
  .entrada-hero-linha {
    font-size: var(--t-base); line-height: var(--lh-leitura); color: var(--casca-tinta-2);
  }

  /* Vaga-lumes: o nome da organizacao virando gesto. Seis, nao dez — sobre uma foto, poucos
     leem como luz; muitos leem como sujeira na tela. */
  .vagalume {
    position: absolute; width: 5px; height: 5px; border-radius: var(--r-pill);
    background: var(--casca-marca);
    box-shadow: 0 0 10px 2px var(--casca-brilho);
    opacity: 0;
    animation: brilho 7s ease-in-out infinite;
  }
  .vagalume-1 { left: 14%; top: 62%; animation-delay: 0s;   }
  .vagalume-2 { left: 27%; top: 44%; animation-delay: 1.6s; }
  .vagalume-3 { left: 46%; top: 71%; animation-delay: 3.1s; }
  .vagalume-4 { left: 63%; top: 38%; animation-delay: 2.2s; }
  .vagalume-5 { left: 76%; top: 66%; animation-delay: 4.4s; }
  .vagalume-6 { left: 88%; top: 51%; animation-delay: 5.6s; }

  @keyframes brilho {
    0%, 100% { opacity: 0;   transform: translate3d(0, 0, 0); }
    18%      { opacity: .95; }
    50%      { opacity: .35; transform: translate3d(10px, -16px, 0); }
    82%      { opacity: .9;  }
  }

  /* A COLUNA e a superficie, e nao um cartao dentro dela.
     Isto nao e so estetica: os campos usam tokens de canvas (--superficie, --tinta-2), e era o
     cartao que fornecia essa superficie. Tirar a moldura e deixar o formulario direto sobre a
     casca faria os rotulos sumirem no tema claro. Promovendo a coluna inteira a superficie, a
     moldura some E os tokens continuam validos. */
  .entrada-painel {
    background: var(--superficie); color: var(--tinta);
    display: grid; align-content: center; justify-items: center;
    padding: var(--e7) var(--e6);
  }

  .entrada-cartao {
    width: min(360px, 100%);
    display: grid; gap: var(--e4);
  }

  /* Abaixo de 1024px a foto sai: numa tela estreita ela empurraria o formulario para baixo
     da dobra, e formulario de entrada abaixo da dobra e defeito, nao estilo. */
  @media (max-width: 1023px) {
    .entrada { grid-template-columns: minmax(0, 1fr); }
    .entrada-hero { display: none; }
  }
  .entrada-marca { display: flex; align-items: center; gap: var(--e3); justify-content: center; }
  /* O logotipo oficial escreve POMAR numa sans geometrica pesada, nao numa serifa. A palavra
     ao lado da marca imita a marca; a serifa do sistema fica para titulo de tela. */
  .entrada-nome {
    font-size: var(--t-marca); line-height: var(--lh-marca); font-weight: 700;
    letter-spacing: .04em; color: var(--tinta);
  }

  .entrada-titulo { text-align: center; display: grid; gap: var(--e1); }
  .entrada-titulo p { color: var(--tinta-2); font-size: var(--t-apoio); line-height: var(--lh-apoio); }

  .entrada form { display: grid; gap: var(--e3); }

  /* O rodape agora vive sobre a superficie do painel, e nao sobre a casca: tokens de canvas. */
  .entrada-rodape {
    margin-top: var(--e6); text-align: center;
    color: var(--tinta-3); font-size: var(--t-mini); line-height: var(--lh-apoio);
  }
  .entrada-rodape a { color: var(--marca-texto); }

  /* ---------- inicio (a landing com o assistente) ---------- */
  /* Vive no CANVAS, e segue o tema.
     Ela morava na casca, escura nos dois temas, como a tela de entrada. Nao se sustentou no uso:
     quem escolhe o tema claro chega ao inicio e encontra a unica tela que ignora a escolha, e o
     assistente — que e a tela mais usada do sistema — era justamente a que parecia de outro
     produto. A tela de ENTRADA continua na casca, e ali a razao e outra: ela e uma capa sobre uma
     foto, sem tema para seguir porque ninguem esta logado ainda.

     A consequencia direta: o ambar deixa de ser TINTA aqui. #F5B500 da 9,80:1 no escuro e ~1,9:1
     sobre o fundo claro — o nome na saudacao viraria um borrao. Quem assume e --marca-texto, que
     existe exatamente para a marca como LETRA no canvas (7,06:1 no claro, 11,13:1 no escuro).
     O ambar continua sendo PREENCHIMENTO numa superficie so: o botao de enviar. */
  .landing-pagina {
    min-height: 100dvh;
    background: var(--fundo); color: var(--tinta);
    display: grid; grid-template-rows: auto minmax(0, 1fr);
  }
  .landing-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e4); padding: var(--e3) var(--e4);
  }

  /* O topo da landing REUSA os componentes da casca (.casca-nome, .nav-item, .dica, .avatar), e
     eles falam --casca-*: tinta quase branca, feita para fundo escuro. Com a landing no canvas,
     deixa-los como estao poe #F2EFE8 sobre #F2F0E9 — o nome POMAR e os botoes de tema e sair
     sumiriam no tema claro. Nao vale duplicar os componentes: eles sao os mesmos, o que mudou foi
     a superficie embaixo. Entao aqui, e SO dentro da landing, eles passam a falar canvas. */
  .landing-pagina .casca-nome { color: var(--tinta); }
  .landing-pagina a.landing-marca:hover { background: var(--superficie-2); }
  .landing-pagina .nav-item { color: var(--tinta-2); }
  .landing-pagina .nav-item:hover { background: var(--superficie-2); color: var(--tinta); }
  .landing-pagina .nav-item .dica {
    background: var(--superficie); color: var(--tinta); border-color: var(--borda);
  }
  .landing-pagina .avatar { background: var(--superficie-3); color: var(--tinta); }

  /* Flex, e nao grid de duas linhas: quando ha um recado (a faixa de "Fulano cadastrado"), o
     <main> recebe TRES filhos, e com linhas fixas a faixa ocupava a linha do 1fr — virava uma
     tarja do tamanho da tela e empurrava a saudacao para o rodape. Em flex, filho a mais so
     entra na coluna e o miolo continua tomando a sobra. */
  .landing {
    display: flex; flex-direction: column;
    gap: var(--e5); padding: 0 var(--e4) var(--e5); min-height: 0;
  }
  .landing > .faixa { flex: 0 0 auto; align-self: stretch; }
  .landing-miolo {
    flex: 1 1 auto;
    display: grid; align-content: center; justify-items: center;
    gap: var(--e4); padding: var(--e6) 0; text-align: center;
  }

  .landing-saudacao { display: grid; gap: var(--e2); justify-items: center; }
  .landing-titulo {
    font-family: var(--fonte-display);
    font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; font-weight: 600;
    letter-spacing: -.015em; color: var(--tinta);
  }
  /* A marca como LETRA no canvas — ver a nota em .landing-pagina sobre por que nao e --marca. */
  .landing-nome { color: var(--marca-texto); }
  .landing-data { color: var(--tinta-3); font-size: var(--t-apoio); }

  .landing-busca {
    width: min(680px, 100%);
    display: flex; align-items: center; gap: var(--e2);
    background: var(--superficie); border: 1px solid var(--borda-forte);
    border-radius: var(--r-pill); padding: var(--e2) var(--e2) var(--e2) var(--e4);
  }
  /* O anel fica no contorno inteiro, e nao no campo de dentro: e o conjunto que le como um
     controle so. Por isso o input renuncia ao proprio outline. */
  .landing-busca:focus-within {
    border-color: var(--foco);
    outline: 2px solid var(--foco); outline-offset: 1px;
  }
  .landing-busca-icone { width: 18px; height: 18px; color: var(--tinta-3); flex-shrink: 0; }
  .landing-campo {
    flex: 1; min-width: 0; height: 40px; border: 0; background: none;
    color: var(--tinta); font: inherit; font-size: var(--t-medio);
  }
  .landing-campo:focus-visible { outline: none; }
  .landing-campo::placeholder { color: var(--tinta-3); }
  /* A UNICA superficie ambar da tela de inicio, e agora com o par do CANVAS.
     Aqui morava o par de acao da casca, e a razao escrita era boa enquanto durou: --marca-forte e
     mais escuro que --marca no tema claro e mais claro no escuro, entao numa tela SEMPRE ESCURA o
     hover do canvas apagaria o botao para quem estivesse no tema claro. Essa premissa caiu junto
     com a tela: agora ela segue o tema, o fundo acompanha, e o par de canvas passa a significar o
     que promete — o hover escurece no claro e clareia no escuro, na direcao do fundo de cada um. */
  .landing-enviar {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-pill);
    display: grid; place-items: center;
    background: var(--marca); color: var(--marca-tinta);
    border: 1px solid var(--marca-borda);
    transition: background var(--ms-1) var(--curva), border-color var(--ms-1) var(--curva);
  }
  .landing-enviar svg { width: 18px; height: 18px; }
  .landing-enviar:hover {
    background: var(--marca-forte); border-color: var(--marca-forte);
  }
  .landing-enviar:active { background: var(--marca); }

  .landing-resposta {
    width: min(680px, 100%); text-align: left;
    display: grid; gap: var(--e3);
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r2); padding: var(--e4); box-shadow: var(--elev-1);
    color: var(--tinta); font-size: var(--t-base); line-height: var(--lh-leitura);
  }
  .landing-resposta p { white-space: pre-line; }
  .landing-resposta-links { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
  .landing-fontes { color: var(--tinta-3); font-size: var(--t-mini); }

  /* O botao do caminho indicado. NAO e ambar: o ambar preenchido desta tela ja e o botao de
     enviar, a poucos pixels daqui, e a regra da casa e uma superficie ambar por tela. Usar
     .btn-marca aqui punha as duas lado a lado.
     O contorno usa --borda-forte, e nao --borda: aqui a linha IDENTIFICA um controle, e a
     hairline decorativa nao cumpre os 3:1 da 1.4.11. */
  .landing-ir {
    background: var(--superficie-2); color: var(--tinta);
    border: 1px solid var(--borda-forte); font-weight: 600;
  }
  .landing-ir:hover { background: var(--superficie-3); }

  .landing-chips {
    display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center; max-width: 680px;
  }
  .chip {
    display: inline-flex; align-items: center; gap: var(--e-fino);
    height: 32px; padding: 0 var(--e3); border-radius: var(--r-pill);
    border: 1px solid var(--borda-forte); background: var(--superficie);
    color: var(--tinta-2); font-size: var(--t-apoio); font-weight: 550; text-decoration: none;
    transition: background var(--ms-1) var(--curva), color var(--ms-1) var(--curva);
  }
  .chip:hover { background: var(--superficie-2); color: var(--tinta); }

  .landing-aviso { color: var(--tinta-3); font-size: var(--t-mini); max-width: 60ch; }

  /* ---------- doca ---------- */
  /* As secoes do sistema, e o jeito de sair do inicio. A primeira e Usuarios. Secao sem
     nenhuma tela alcancavel nao e desenhada: botao que leva a acesso negado e pior que
     botao ausente — a mesma regra que vale para a barra do topo.

     align-self: center e o que faz a moldura ter a largura dos icones. Sem ele, sendo filha de
     um flex column, ela esticaria de ponta a ponta da tela e viraria uma faixa. */
  .doca {
    align-self: center;
    display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r3); padding: var(--e3); box-shadow: var(--elev-1);
  }

  /* Cada secao e um <details>: o menu abre no clique e no Enter e fecha no Esc, de graca. */
  .doca-secao { position: relative; }
  .doca-item {
    display: grid; justify-items: center; gap: var(--e-fino);
    min-width: 132px; padding: var(--e3) var(--e5);
    border-radius: var(--r2); text-decoration: none; color: var(--tinta-3);
    cursor: pointer; list-style: none;
    transition: background var(--ms-1) var(--curva);
  }
  /* O triangulo nativo do <summary> desalinharia a grade; o sinal de menu e o proprio disco. */
  .doca-item::-webkit-details-marker { display: none; }
  .doca-item::marker { content: ""; }
  .doca-item:hover, .doca-secao[open] .doca-item { background: var(--superficie-2); }
  .doca-item:focus-visible { outline-offset: -2px; }

  .doca-icone {
    width: 46px; height: 46px; border-radius: var(--r-pill);
    display: grid; place-items: center;
    /* A cor da secao. O par fundo+tinta vem declarado junto em tokens.css — nenhum componente
       combina duas variaveis de cor na hora, que e a regra que impede o par ilegivel. */
    background-color: var(--doca-usuarios); color: var(--doca-tinta);
    /* background-COLOR, e nao o atalho background — aqui e nas tres variantes abaixo. O atalho
       reescreve background-image junto, entao um "background: var(--doca-super)" numa regra mais
       especifica apagaria o verniz SO NAQUELA secao: Usuarios, que herda o valor desta regra,
       continuaria lustroso, e as outras tres ficariam foscas. Tres discos diferentes de um, sem
       nada reclamando — e ninguem procura a palavra "atalho" quando vai investigar. Ha teste
       exigindo que nenhuma regra de .doca-icone use o atalho. */
    background-image: var(--verniz);
    box-shadow: var(--verniz-relevo);
  }
  .doca-secao[data-cor="super"] .doca-icone { background-color: var(--doca-super); }
  .doca-secao[data-cor="aparencia"] .doca-icone { background-color: var(--doca-aparencia); }
  .doca-secao[data-cor="trabalho"] .doca-icone { background-color: var(--doca-trabalho); }
  .doca-icone svg { width: 22px; height: 22px; }

  .doca-nome { color: var(--tinta); font-size: var(--t-base); font-weight: 600; }
  .doca-apoio {
    font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--tinta-3);
  }

  /* O menu suspenso, ancorado ACIMA: a doca mora no rodape, e um menu para baixo sairia da tela.
     O afastamento e e4 (e nao e2) para o menu limpar a moldura da doca: com e2 ele terminava
     dentro do padding dela e cruzava a borda. */
  .doca-menu {
    position: absolute; bottom: calc(100% + var(--e4)); left: 50%; translate: -50% 0;
    z-index: var(--z-menu); min-width: 100%; width: max-content; max-width: 260px;
    display: grid; gap: var(--e0); padding: var(--e1);
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r2); box-shadow: var(--elev-3);
  }
  .doca-link {
    display: block; padding: var(--e2) var(--e3); border-radius: var(--r1);
    color: var(--tinta); font-size: var(--t-apoio); font-weight: 550; text-decoration: none;
    white-space: nowrap;
    transition: background var(--ms-1) var(--curva);
  }
  .doca-link:hover { background: var(--superficie-2); }

  /* ---------- historico ---------- */
  /* O painel das perguntas anteriores, a esquerda, como no Grajau. */
  .historico {
    position: fixed; left: var(--e4); top: 64px; bottom: var(--e4); width: 232px;
    display: flex; flex-direction: column; gap: var(--e2);
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r2); padding: var(--e3); box-shadow: var(--elev-1);
    overflow: hidden;
  }
  .historico > .t-micro { color: var(--tinta-3); flex-shrink: 0; }
  .historico-lista {
    display: grid; gap: var(--e0); align-content: start;
    overflow-y: auto; min-height: 0;
  }
  .historico-item {
    display: grid; gap: var(--e0); padding: var(--e2); border-radius: var(--r1);
    color: var(--tinta-2); text-decoration: none;
    transition: background var(--ms-1) var(--curva), color var(--ms-1) var(--curva);
  }
  .historico-item:hover { background: var(--superficie-2); color: var(--tinta); }
  .historico-pergunta {
    font-size: var(--t-apoio); line-height: var(--lh-apoio);
    /* Duas linhas e reticencias: pergunta longa nao pode empurrar as outras para fora. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .historico-quando { font-size: var(--t-micro); color: var(--tinta-3); }

  /* Abaixo de 1200px o painel sairia por cima do miolo: ele vira parte do fluxo, no topo. */
  @media (max-width: 1199px) {
    .historico {
      position: static; width: auto; max-height: 168px;
      order: -1; margin-bottom: var(--e2);
    }
  }

  /* ---------- medidor (orcamento da IA) ---------- */
  .medidor { display: flex; align-items: center; gap: var(--e2); }
  .medidor-valor { font-size: var(--t-destaque); line-height: var(--lh-destaque); font-weight: 600; }
  /* <progress> nativo: a proporcao e atributo, e nao style= inline. */
  .medidor-barra {
    flex: 1; height: 8px; border: 0; border-radius: var(--r-pill);
    background: var(--superficie-3); appearance: none;
  }
  .medidor-barra::-webkit-progress-bar { background: var(--superficie-3); border-radius: var(--r-pill); }
  .medidor-barra::-webkit-progress-value { background: var(--sucesso); border-radius: var(--r-pill); }
  .medidor-barra::-moz-progress-bar { background: var(--sucesso); border-radius: var(--r-pill); }
  .medidor-barra[data-estourado]::-webkit-progress-value { background: var(--erro); }
  .medidor-barra[data-estourado]::-moz-progress-bar { background: var(--erro); }

  /* ---------- tela ---------- */
  /* Cabecalho fixo em cima; o .corpo e a UNICA regiao que rola. Cards de cima para baixo. */
  .tela { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  .pagina-cabecalho {
    min-height: var(--alt-cabecalho); padding: var(--e5) var(--e5) var(--e3);
    display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
    flex-shrink: 0;
  }
  .pagina-contexto { color: var(--tinta-2); font-size: var(--t-apoio); line-height: var(--lh-apoio); }
  /* O recuo de cima e do CORPO, e nao mais so do cabecalho: as telas de lista perderam o
     cabecalho (o titulo delas mora na lateral) e o conteudo encostaria na casca. Onde o
     cabecalho existe, ele continua dando o recuo e o corpo zera o dele — a soma nao muda. */
  .corpo {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: var(--e5); max-width: var(--largura-max);
  }
  .pagina-cabecalho + .corpo { padding-top: 0; }

  /* Tela de conferencia de planilha: rola como ficha, mas o miolo e uma TABELA larga. Pelo mesmo
     motivo do .corpo-lista, o teto de texto nao vale aqui — com ele o corpo parava em 1440px e a
     barra de rolagem ficava solta no meio da janela, com uma faixa morta a direita. */
  .corpo-largo { max-width: none; }

  /* Tela de lista: aqui quem rola e o QUADRO da tabela, por dentro, com o thead sticky
     visivel — o corpo nao rola, para a paginacao nunca sair da tela. */
  .corpo-lista {
    display: flex; flex-direction: column; gap: var(--e3); overflow: hidden;
    /* Sem o teto de --largura-max. Ele existe para TEXTO: linha longa demais e ruim de ler, e
       por isso ficha e formulario continuam limitados. Tabela e o contrario — cada pixel a mais
       e uma coluna que cabe sem apertar — e num monitor largo o teto deixava uma faixa morta de
       quase 200px a direita do quadro, que parecia defeito de alinhamento. */
    max-width: none;
  }

  /* Na LARGURA o quadro ocupa tudo; na ALTURA ele para no conteudo.
     0 1 auto e a diferenca: com 1 1 auto um unico registro virava 700px de moldura vazia — o
     contorno prometia uma area de trabalho que nao existia. Encolhendo, o card termina na
     ultima linha e o fundo da tela fica fundo de tela. O 1 no meio (shrink) e o que segura a
     lista cheia: quando as linhas passam da altura disponivel, o quadro para de crescer e o
     scroll acontece POR DENTRO dele, com o cabecalho grudado e a paginacao sempre a vista. */
  .corpo-lista .quadro { flex: 0 1 auto; min-height: 0; overflow: auto; }

  /* O quadro de RESUMO — a consolidacao que mora ACIMA da lista, como o custo por servico no uso
     da IA — nao disputa altura com ela: sao meia duzia de linhas, e o flex encolhendo os dois
     espremia o resumo a uma linha com rolagem propria, que parece defeito. flex: none da a ele a
     altura do conteudo; quem rola continua sendo o quadro da lista. */
  .corpo-lista .quadro-resumo { flex: none; }

  /* As acoes que criam/editam moram na LATERAL — a unica superficie ambar da tela e o botao
     que cria, la. Se aparecerem duas superficies ambar numa tela, uma esta errada. */
  .pagina-titulo { display: grid; gap: var(--e0); }
  .pagina-cabecalho h1 .selo { vertical-align: middle; }

  /* ---------- abas de formulario ---------- */
  /* Sem JavaScript os paineis ficam empilhados (nada nasce escondido do servidor);
     com JavaScript um painel por vez, e o historico de cada aba mora NELA. */
  /* flex-wrap NAO e enfeite: sem ele a largura MINIMA da barra e a soma das abas, e como ela e
     item de uma grade (.pilha), essa largura vira o piso do FORMULARIO INTEIRO. Com quatro abas
     isso da 416px, e num modal de celular o formulario passava a vazar para fora — os campos
     inteiros, nao so a barra. Envolver, e nao rolar: numa barra de quatro secoes, esconder duas
     atras de um gesto horizontal e pior do que ocupar uma segunda linha.

     So apareceu agora porque Comunidades e o primeiro formulario com quatro abas; com as duas de
     Perfis a soma sempre coube. */
  .abas {
    display: flex; flex-wrap: wrap; gap: var(--e1);
    border-bottom: 1px solid var(--borda);
  }
  .aba {
    position: relative; height: var(--alt-controle); padding: 0 var(--e3);
    display: inline-flex; align-items: center; gap: var(--e2);
    border-radius: var(--r1) var(--r1) 0 0;
    color: var(--tinta-2); font-size: var(--t-base); font-weight: 550;
    transition: background var(--ms-1) var(--curva), color var(--ms-1) var(--curva);
  }
  .aba:hover { background: var(--superficie-2); color: var(--tinta); }
  .aba[aria-selected="true"] { color: var(--tinta); }
  .aba[aria-selected="true"]::after {
    content: ""; position: absolute; left: var(--e2); right: var(--e2); bottom: -1px;
    height: 2px; border-radius: 2px 2px 0 0; background: var(--tinta);
  }
  .aba-painel { display: grid; gap: var(--e3); }

  .historico-aba {
    display: flex; gap: var(--e2); align-items: flex-start;
    border-top: 1px solid var(--borda); padding-top: var(--e3);
    color: var(--tinta-3); font-size: var(--t-mini); line-height: var(--lh-apoio);
  }
  .historico-aba svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

  .volta {
    display: inline-flex; align-items: center; gap: var(--e-fino);
    color: var(--tinta-3); font-size: var(--t-mini); text-decoration: none;
  }
  .volta svg { width: 14px; height: 14px; }
  .volta:hover { color: var(--tinta-2); text-decoration: underline; }

  /* Conteudo principal a esquerda, ficha a direita. Numa tela estreita vira uma coluna so, e a
     ordem do HTML ja e a ordem de leitura certa. */
  .duas-colunas { display: grid; gap: var(--e4); align-items: start; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1024px) {
    .duas-colunas { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
  }

  /* Formulario nao estica com o monitor: linha longa demais e ruim de ler e de preencher. */
  .formulario { max-width: 620px; }
  /* Estreita o CONTROLE, e nao o campo.
     Era `.campo-estreito { max-width: 160px }`, o que encolhia a grade inteira — rotulo, ajuda e
     erro junto. Uma ajuda de duas linhas virava uma coluna de 160px com oito linhas, mais alta
     que o proprio campo que ela explica. O numero curto continua curto; o texto ao redor volta a
     ter a largura do formulario. */
  .campo-estreito > .controle { max-width: 160px; }
  .acoes-do-formulario { display: flex; gap: var(--e2); align-items: center; }

  .bloco {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r2); padding: var(--e4); display: grid; gap: var(--e3);
  }

  /* ---------- estado vazio ---------- */
  /* Zero ambar: estado vazio nao e oportunidade de marca. */

  /* E um CARD, e nao um paragrafo solto no canto esquerdo. A lista cheia desenha um quadro com
     moldura; a lista vazia desenhava tres linhas encostadas na margem, e a mesma tela parecia
     dois produtos diferentes conforme o banco tivesse ou nao registro. Com a moldura, o LUGAR da
     lista continua existindo quando nao ha lista — e o que mora dentro dele e a explicacao de
     por que esta vazio, no centro, onde a pessoa ja esta olhando.

     O icone e o do ASSUNTO da tela (comunidade, pessoa, log), em --tinta-4: presenca de forma,
     sem virar ilustracao com cor propria — a regra do zero ambar continua valendo. Quando o
     vazio e resultado de FILTRO, o icone e a lupa: "nao achei" e "nao existe ainda" sao dois
     estados diferentes e nao podem chegar com o mesmo desenho. */
  .vazio {
    display: grid; justify-items: center; align-content: center; gap: var(--e2);
    text-align: center; padding: var(--e7) var(--e5); min-height: 240px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r2);
  }
  .vazio-icone { width: 40px; height: 40px; color: var(--tinta-4); }
  .vazio-titulo { font-family: var(--fonte-display); font-size: var(--t-tela); line-height: var(--lh-tela); font-weight: 600; }
  /* O teto em ch, e nao em px: e medida de TEXTO. O card vai de ponta a ponta, e sem isto a
     frase de apoio viraria uma linha de noventa caracteres no monitor largo. */
  .vazio p { color: var(--tinta-2); max-width: 46ch; }
}

/* No maximo um punhado de utilitarios. O vagalume tem 226 style= inline e 86 hexes numa
   unica view — isso nao foi acidente, foi ausencia de barreira. O teste ViewsLimpasTests
   reprova style= em .cshtml e hex fora de tokens.css. */
@layer utilidades {
  .oculto  { display: none !important; }

  /* O corpo injetado no modal veio de uma pagina inteira: aqui ele perde recuo e teto.
     Mora NESTA camada de proposito — o .corpo e o .formulario originais estao na camada
     telas, que venceria qualquer reset declarado antes dela, por maior que fosse a
     especificidade. Camada posterior ganha; e a regra do jogo que o @layer estabelece. */
  .dialogo-conteudo .corpo { padding: 0; overflow: visible; max-width: none; }
  .dialogo-conteudo .formulario { max-width: none; }
  /* align-content: start e a correcao do "buraco" da lista: sem ele, num container mais
     alto que o conteudo, o grid ESTICA as linhas auto e o miolo afunda na tela. */
  .pilha   { display: grid; gap: var(--e3); align-content: start; }
  .linha   { display: flex; align-items: center; gap: var(--e2); }
  .empurra { margin-left: auto; }
  .t-fraco { color: var(--tinta-3); }
}

/* Tela estreita: o shell fixo esmagaria o conteudo, entao a pagina volta a rolar inteira
   e a lateral vira uma faixa acima do conteudo. E fallback, nao o desenho principal. */
@media (max-width: 1023px) {
  .app { height: auto; overflow: visible; }
  .palco { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .lateral { border-right: 0; border-bottom: 1px solid var(--borda); }
  .lateral-rolo { overflow: visible; }
  .tela { min-height: auto; }
  .corpo, .corpo-lista { overflow: visible; }
  .corpo-lista .quadro { overflow: auto; }
}

/* Sob reducao de movimento o sistema nao perde INFORMACAO: so o deslocamento morre.
   Era o que o comentario dizia e nao era o que o codigo fazia: as 18 transicoes do sistema
   usavam --ms-1, e zerar --ms-1 apagava junto toda a transicao de COR. Hover, foco e estado
   passavam a trocar em salto seco — que e perda de feedback, nao ganho de conforto. Quem pede
   menos movimento nao esta pedindo menos resposta.

   Fica de fora do @layer de proposito: dentro de uma camada, esta regra perderia para as
   camadas posteriores e a reducao de movimento sairia do ar em silencio. */
@media (prefers-reduced-motion: reduce) {
  :root { --ms-2: 0ms; --ms-3: 0ms; }
  * { animation: none !important; }
  .dica { transition: none !important; }
}

/* No Alto Contraste do Windows o sistema substitui TODA cor de autor pela paleta do usuario.
   O efeito colateral e que a hierarquia desenhada em cor desaparece de uma vez: a acao
   primaria fica identica as secundarias, e o selo de estado perde o fundo que o separava do
   texto ao redor. O conserto nao e devolver cor — e devolver FORMA, que o modo preserva. */
@media (forced-colors: active) {
  /* ButtonBorder e uma cor do sistema, nao um hex: continua valendo a paleta de quem usa. */
  .btn-marca { border: 2px solid ButtonBorder; }
  .selo { border: 1px solid ButtonBorder; }
  .quadro, .bloco, .menu-lista, .vazio { border: 1px solid ButtonBorder; }
  /* O anel de foco do sistema e removido junto com o outline de autor em alguns motores. */
  :focus-visible { outline: 2px solid Highlight; }
  /* A linha selecionada perde --marca-suave; o contorno mantem a informacao. */
  .tabela tbody tr[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  /* Mesma perda no item aberto da navegacao: o modo apaga --superficie-3 e o trilho colorido, e
     sobraria so o peso da fonte para dizer em que tela a pessoa esta. */
  .secao-item[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .esqueleto-linha, .esqueleto-campo { border: 1px solid GrayText; }
  /* O verniz e decoracao pura: o modo forca a cor do disco, e o degrade branco por cima viraria
     uma mancha sobre uma cor que nao e mais a nossa. O disco continua sendo disco pela FORMA,
     que e o que este bloco inteiro faz. */
  .doca-icone, .lateral-cabeca-disco { background-image: none; box-shadow: none; }
}