/*
 * BASE DO PAINEL — largura cheia, porcentagem, sem coluna central.
 *
 * PROPÓSITO DE NEGÓCIO: a tela aproveita o monitor inteiro, lado a lado. Regra de Paulo
 *   (~15 anos de CSS, com precedência): o conteúdo nunca fica "pingando no meio" numa
 *   coluna estreita.
 *
 * INVARIANTES:
 *   1. `width:100%` + padding lateral em `%`. NUNCA `max-width` + `margin:0 auto`.
 *   2. Grid que preenche: `repeat(auto-fit, minmax(Xrem, 1fr))` — `auto-fit`, nunca
 *      `auto-fill`, que cria colunas vazias e cola os cartões à esquerda.
 *   3. Full-bleed sem `100vw`: o `100vw` inclui a barra de rolagem e cria barra
 *      horizontal. A trava é `html,body{overflow-x:hidden;max-width:100%}`.
 *   4. `px` só em borda fina, sombra e breakpoint de @media. Todo o resto em
 *      `%`, `rem` ou `vmin`.
 *
 * FALHA: nenhuma — é folha de estilo. O que ela impede é o layout quebrar em resolução
 *   diferente da de quem escreveu.
 */

/* =============================================================================
 * `[hidden]` PRECISA DESTA LINHA PARA FUNCIONAR. Não é redundância com o
 * navegador.
 *
 * O QUE ELA CONSERTA, medido em 03/09/2026 em `/desastres/mapa`: o script
 * escondia 480 dos 500 cartões com `item.hidden = true` — o mecanismo padrão, e
 * a escolha certa. A página continuava com 52.204px de altura, CINQUENTA E OITO
 * TELAS de rolagem, com vinte cartões à mostra e quatrocentos e oitenta
 * invisíveis ocupando espaço.
 *
 * A razão: a folha do NAVEGADOR traz `[hidden] { display: none }`, e QUALQUER
 * declaração de `display` escrita por nós vence essa regra — estilo de autor
 * ganha da folha do agente, independentemente de especificidade. Bastou
 * `.mapa-item { display: flex }` para o atributo virar decoração.
 *
 * E o defeito é MUDO nos dois lados: o JavaScript está correto e o CSS está
 * correto; só a combinação falha. `querySelectorAll('[hidden]')` conta 480 e
 * confirma que "está escondido", enquanto a tela mostra os 480.
 *
 * `!important` aqui é deliberado e é o uso legítimo dele: esta linha existe
 * para vencer declarações de componente, e sem ele ela perde para a próxima
 * `.qualquer-coisa { display: flex }` que alguém escrever. É o mesmo motivo
 * pelo qual normalize.css e todo reset sério carregam esta regra.
 * ============================================================================= */
[hidden] { display: none !important; }

:root {
  --cor-fundo: #0d1117;
  --cor-superficie: #161b22;
  --cor-borda: #30363d;
  --cor-texto: #e6edf3;
  --cor-texto-fraco: #9198a1;
  --cor-destaque: #2dd4bf;
  --cor-alerta: #ff9f43;
}

* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------------- cabeçalho */
.cabecalho {
  width: 100%;
  padding: 1.2rem 2%;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2%;
}

/* A marca (icone + texto) esta declarada UMA vez, na secao "A MARCA" mais
   abaixo. Havia aqui um `.cabecalho-marca { flex-direction: column }` que
   empilhava o icone SOBRE o texto: o bloco de baixo redeclarava `display` e nao
   `flex-direction`, e no CSS a regra posterior sobrepoe SO o que repete — a
   coluna sobrevivia 670 linhas depois, calada. Medido em 03/09/2026 com
   `getComputedStyle`: `flex-direction=column`, imagem.right=399 e
   texto.left=247, ou seja o texto comecava ANTES do fim da imagem.
   NAO reintroduzir um segundo bloco para este seletor. */

.marca-titulo {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.marca-fonte {
  font-size: 0.8rem;
  color: var(--cor-texto-fraco);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* ------------------------------------------------------------------ relógio */
.relogio {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  padding: 0.5rem 1.5%;
  border: 1px solid var(--cor-borda);
  border-radius: 0.4rem;
  background: var(--cor-fundo);
}

.relogio-linha { display: flex; align-items: baseline; gap: 0.5rem; }

.relogio-rotulo {
  min-width: 3.2rem;
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.relogio-valor { color: var(--cor-destaque); }

.relogio-fuso { color: var(--cor-texto-fraco); font-size: 0.7rem; }

/* ------------------------------------------------------------------ idiomas */
.idiomas { display: flex; gap: 0.5rem; align-items: center; }

.bandeira {
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: 0.25rem;
  padding: 0.2rem;
  cursor: pointer;
  line-height: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.bandeira:hover, .bandeira:focus-visible {
  border-color: var(--cor-destaque);
  transform: translateY(-1px);
  outline: none;
}

/* ----------------------------------------------------------------- conteúdo */
.conteudo {
  width: 100%;
  flex: 1 1 auto;
  padding: 2rem 2%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.secao { width: 100%; }

.secao-titulo {
  margin: 0 0 0.6rem 0;
  font-size: 1.35rem;
  font-weight: 600;
}

/* Numa linha de topo (título + contadores + atalhos), o título não tem margem
   inferior: quem espaça é o `gap` da linha, e a margem sozinha desalinharia o
   título em relação aos botões ao lado dele. */
.linha-topo .secao-titulo { margin-bottom: 0; }

.secao-texto {
  margin: 0;
  max-width: 100%;
  color: var(--cor-texto);
}

/* Grid que PREENCHE a largura: auto-fit, nunca auto-fill. */
.cartoes {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5%;
  row-gap: 1rem;
}

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 0.5rem;
  padding: 1.1rem 1.3%;
}

.cartao-titulo {
  margin: 0 0 0.4rem 0;
  font-size: 1.02rem;
  color: var(--cor-destaque);
}

.cartao-texto { margin: 0; color: var(--cor-texto-fraco); font-size: 0.92rem; }

/* -------------------------------------------------------------------- rodapé */
.rodape {
  width: 100%;
  padding: 1rem 2%;
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto-fraco);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2%;
}

.rodape-atribuicao { font-family: ui-monospace, Consolas, monospace; }

/* Indicador de requisição do HTMX: sem ele o operador clica duas vezes achando
   que não funcionou — a lente de boa-fé, e ela cobra caro. */
.htmx-indicator { opacity: 0; transition: opacity 0.2s ease; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request { opacity: 0.55; }

@media (max-width: 720px) {
  .cabecalho { flex-direction: column; align-items: flex-start; }
  .relogio { width: 100%; }
}

/* -------------------------------------------------------------------------
 * MENU DAS SEÇÕES.
 *
 * Mora aqui, e não numa pasta de página, porque é MOLDURA: aparece em todas as
 * telas e corrigi-lo aqui conserta todas. A regra "cada página tem o seu CSS"
 * vale para o que é DA página — não para o que é do sistema inteiro.
 *
 * O item ativo é marcado no servidor. Descobri-lo no navegador faria o menu
 * aparecer sem destaque até o JavaScript rodar, e ficar sem destaque nenhum se
 * ele falhasse.
 * ------------------------------------------------------------------------- */
.menu {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 2%;
  gap: 0.25rem;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.menu-item {
  padding: 0.85rem 1.4rem;
  color: var(--cor-texto-fraco);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}

.menu-item:hover,
.menu-item:focus-visible {
  color: var(--cor-texto);
  border-bottom-color: var(--cor-borda);
}

.menu-item-ativo,
.menu-item-ativo:hover {
  color: var(--cor-destaque);
  border-bottom-color: var(--cor-destaque);
}

/* -------------------------------------------------------------------------
 * COMPONENTES COMPARTILHADOS — botão, campo, aviso.
 *
 * ONDE ESTÁ A LINHA, já que a regra é "cada página tem o seu CSS":
 *   - é DA PÁGINA o que só existe nela: o desenho da lista de clientes, a
 *     grade do formulário de cadastro, o mapa dos desastres;
 *   - é DO SISTEMA o que aparece em toda tela: botão, campo, aviso, menu.
 *
 * Botão definido em seis pastas viraria seis botões ligeiramente diferentes, e
 * ninguém saberia qual é o certo. O erro do legado não foi ter um arquivo
 * comum — foi ter APENAS um, com as 801 linhas de todas as treze telas dentro.
 * ------------------------------------------------------------------------- */
.botao {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--cor-borda);
  border-radius: 0.4rem;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.botao:hover,
.botao:focus-visible { border-color: var(--cor-destaque); color: var(--cor-destaque); }

.botao-principal {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: #06231f;
}
.botao-principal:hover,
.botao-principal:focus-visible { background: #5ee9d6; border-color: #5ee9d6; color: #06231f; }

.botao-discreto { padding: 0.45rem 0.85rem; font-size: 0.9rem; }

/* Perigo NÃO é vermelho só por estética: é a única cor que faz a mão parar
   antes de clicar, e estes botões ficam ao lado de "Alterar". */
.botao-perigo { border-color: #f8717155; color: #fca5a5; }
.botao-perigo:hover,
.botao-perigo:focus-visible { background: #7f1d1d; border-color: #f87171; color: #fff; }

.campo-formulario {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--cor-borda);
  border-radius: 0.4rem;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font: inherit;
}
.campo-formulario:focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: 1px; }

/* Campo com erro: a borda muda E a mensagem aparece. Só cor não serve — quem
   não distingue vermelho de cinza ficaria sem nenhuma informação. */
.campo-formulario-erro { border-color: #f87171; }

.aviso {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-alerta);
  border-radius: 0.4rem;
  background: var(--cor-superficie);
  margin: 0 0 1rem;
}
.aviso-erro { border-left-color: #f87171; }
.aviso-sucesso { border-left-color: var(--cor-destaque); }

/* -------------------------------------------------------------------------
 * FORMULÁRIO — grade e campo rotulado.
 *
 * Está aqui porque cadastrar e alterar usam o MESMO formulário, e amanhã
 * contato usa outro igual. Três cópias em três pastas divergiriam na primeira
 * vez que alguém ajustasse o espaçamento de uma delas.
 * ------------------------------------------------------------------------- */
.formulario {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem 1.5rem;
  align-items: start;
}

/* O bloco que ocupa a linha inteira: botões, avisos, campos longos. */
.formulario-linha-cheia { grid-column: 1 / -1; }

.formulario-campo { display: flex; flex-direction: column; gap: 0.35rem; }

.formulario-rotulo {
  color: var(--cor-texto-fraco);
  font-size: 0.85rem;
  font-weight: 600;
}

/*
 * O TRACEJADO DA DICA NÃO PODE ATRAVESSAR O CAMPO INTEIRO.
 *
 * Visto na tela em 02/09/2026: `<label>` é elemento de bloco, então a
 * `border-bottom` do `.dica` esticava por toda a largura da coluna. O
 * resultado não parecia "há explicação aqui" — parecia a borda de cima de um
 * campo de entrada quebrado, logo acima do campo de verdade. Dois retângulos
 * empilhados, um deles falso.
 *
 * `width: fit-content` faz o risco abraçar SÓ O TEXTO, que é o que ele
 * sublinha. `align-self: start` mantém isso dentro do flex da coluna.
 */
.formulario-rotulo.dica {
  width: fit-content;
  max-width: 100%;
  align-self: start;
}

/* A dica fica SEMPRE visível, não só depois do erro: dizer o formato antes
   evita o erro; dizer depois só explica o que já incomodou. */
.formulario-dica { color: var(--cor-texto-fraco); font-size: 0.78rem; }

.formulario-erro-campo { color: #fca5a5; font-size: 0.8rem; }

.formulario-acoes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
 * FILTROS, VAZIO E PAGINAÇÃO — componentes do sistema.
 *
 * Estão aqui porque desastres, estatísticas, alertas e as telas de cliente
 * usam os mesmos. É a mesma linha de sempre: é DA PÁGINA o que só existe nela;
 * é DO SISTEMA o que aparece em várias.
 * ------------------------------------------------------------------------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--cor-borda);
  border-radius: 0.5rem;
  background: var(--cor-superficie);
}

.filtro { display: flex; flex-direction: column; gap: 0.3rem; min-width: 9rem; flex: 0 1 auto; }
.filtro-caixa { min-width: 16rem; }

.rotulo-caixa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.55rem 0;
}

/*
 * `align-items: center` centralizava o botao na ALTURA TOTAL da linha — e a
 * linha fica mais alta quando um dos campos tem texto de ajuda embaixo. O
 * resultado, visto na tela: o botao "Recalcular" flutuando no meio, sem
 * alinhar nem com o campo nem com a base da linha.
 *
 * `flex-end` alinha o botao com a BASE DO CAMPO, que e onde o olho espera —
 * a mesma linha de base do `.filtros`, que ja usa `align-items: flex-end`.
 */
.filtros-acoes { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }

/*
 * O texto de ajuda sai do FLUXO DA ALTURA da linha: ele e explicacao, nao
 * campo, e deixa-lo empurrar a linha faz os campos vizinhos — que nao tem
 * ajuda — parecerem desalinhados por defeito. Visto no cadastro de cliente,
 * onde a ajuda do CPF deixava a coluna dele um degrau abaixo das outras tres.
 */
.filtro .formulario-dica, .campo .formulario-dica { margin-top: 0.3rem; }

.carregando { color: var(--cor-destaque); font-size: 0.85rem; }

.vazio {
  width: 100%;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--cor-borda);
  border-radius: 0.5rem;
  text-align: center;
  color: var(--cor-texto-fraco);
}
.vazio .botao { margin-top: 1rem; }
.vazio-dica { font-size: 0.9rem; }

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin-top: 1.2rem;
}
.paginacao-atual { color: var(--cor-texto-fraco); font-size: 0.9rem; }

/* Contadores do topo das telas de desastre. */
/*
 * Os contadores ficam COLADOS no título sem esta margem — visto na tela: o
 * "Desastres naturais" e o "21542 na base" corriam juntos, e o olho lia os
 * dois como uma frase só. O respiro separa o nome da tela do dado dela.
 */
.desastres-numeros {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 1.2rem;
}

.numero {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-texto-fraco);
  font-size: 0.85rem;
}
.numero strong { color: var(--cor-texto); }
.numero-ativo { border-color: var(--cor-alerta); }
.numero-ativo strong { color: var(--cor-alerta); }

.desastres-atalhos { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }

.aviso-nota { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--cor-texto-fraco); }

/* ==========================================================================
 * ÍCONES
 *
 * O SVG vem do catálogo `Icones.java`, com `stroke: currentColor` e `1em` de
 * lado. As duas escolhas são a razão de não haver CSS por ícone aqui: ele
 * herda a COR do texto ao redor e o TAMANHO da fonte ao redor. Um ícone dentro
 * de um botão de perigo fica vermelho sozinho; um dentro de um título fica
 * grande sozinho.
 *
 * `1em` também é o que atende à regra de porcentagem — `em` escala com a
 * fonte, `px` trava.
 * ========================================================================== */

.icone {
  display: inline-block;
  vertical-align: -0.125em;   /* alinha o traço com a linha de base do texto */
  flex: none;                 /* dentro de flex, ícone não estica nem encolhe */
}

/* Ícone colado no texto ao lado dele. O gap fica no PAI para o espaço não
   aparecer quando o ícone estiver sozinho. */
.com-icone {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.icone-grande { font-size: 1.4em; }
.icone-fraco  { color: var(--cor-texto-fraco); }

/* ==========================================================================
 * DICA AO PASSAR O MOUSE  (`data-dica="o que este campo faz"`)
 *
 * PROPÓSITO: explicar o que cada campo faz, sem gastar a tela com um parágrafo
 * ao lado de cada rótulo. Quem já sabe não lê; quem não sabe descobre.
 *
 * POR QUE NÃO O ATRIBUTO `title` NATIVO. Ele parece resolver, e não resolve:
 *   1. leva ~1,5s para aparecer, e some sozinho depois de alguns segundos;
 *   2. não aparece NUNCA no teclado — quem navega por Tab jamais o vê;
 *   3. não aparece em toque nenhum no celular;
 *   4. não se pode estilizar, e fica ilegível sobre tema escuro.
 * Nenhum desses é opinião de estética: 2 e 3 são gente que simplesmente não
 * recebe a informação.
 *
 * POR QUE `:focus-visible` ESTÁ AQUI JUNTO DE `:hover`, E NÃO É OPCIONAL.
 * Uma dica que só responde ao mouse existe só para quem usa mouse. O elemento
 * que a carrega precisa ser focável — `<button>`, `<a>`, `<input>` já são; um
 * `<span>` precisa de `tabindex="0"`, e é por isso que o marcador `[data-dica]` é
 * quase sempre posto num `<abbr tabindex="0">` ou num rótulo de campo.
 *
 * FALHA: `data-dica` ausente ⇒ o `content` fica vazio e NADA é desenhado —
 * sem caixa preta flutuando com nada dentro.
 * ========================================================================== */

/*
 * O SELETOR É O ATRIBUTO, NÃO UMA CLASSE — e é decisão, não estilo.
 *
 * A primeira versão exigia `class="dica"` JUNTO de `data-dica="..."`. Eu mesmo
 * esqueci a classe no primeiro arquivo em que usei o componente (o menu do
 * layout, 02/09/2026): o atributo estava lá, a explicação estava escrita, e
 * nada aparecia na tela. Sem erro, sem aviso — só uma dica que não existe.
 *
 * Se quem acabou de escrever o componente esquece a metade, todo mundo esquece.
 * Com `[data-dica]`, escrever a explicação É ligá-la: não sobra segunda metade
 * para esquecer.
 */
[data-dica] {
  position: relative;
  cursor: help;
}

/*
 * O TRACEJADO ANUNCIA que há explicação. Sem ele a dica existe e ninguém
 * descobre — passar o mouse por acaso é sorte, não descoberta.
 *
 * É classe SEPARADA porque nem todo portador de dica pode receber sublinhado:
 * um item de menu já tem borda inferior própria marcando a seção ativa, e um
 * risco tracejado por baixo viraria enfeite confuso. Em texto corrido, ao
 * contrário, o tracejado é a única pista de que ali há algo a descobrir.
 */
.dica { border-bottom: 1px dashed var(--cor-borda); }

[data-dica]::after {
  content: attr(data-dica);
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.5em;
  z-index: 50;

  /* Largura em `ch`: a medida de UMA LINHA DE TEXTO, que é o que a caixa
     contém. Em `%` ela seria relativa ao elemento — e um rótulo de 3 letras
     daria uma caixa de 3 letras de largura com vinte linhas de altura. */
  width: max-content;
  max-width: 32ch;

  padding: 0.5em 0.7em;
  border: 1px solid var(--cor-borda);
  border-radius: 0.4em;
  background: #0b0e14;
  color: var(--cor-texto);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  text-transform: none;   /* o pai pode ser um cabeçalho em maiúsculas */
  letter-spacing: normal;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);

  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25em);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

/* A setinha, que liga a caixa ao elemento. Sem ela, com dois campos vizinhos
   não se sabe de qual dos dois a explicação está falando. */
[data-dica]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 1em;
  z-index: 51;
  border: 0.4em solid transparent;
  border-top-color: var(--cor-borda);
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease, visibility .14s;
}

[data-dica]:hover::after,  [data-dica]:focus-visible::after,
[data-dica]:hover::before, [data-dica]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Perto da borda direita a caixa sairia da tela. `.dica-esquerda` ancora pela
   direita — é o mesmo componente, virado. */
[data-dica].dica-esquerda::after { left: auto; right: 0; }
[data-dica].dica-esquerda::before { left: auto; right: 1em; }

/* Numa tabela, a dica no cabeçalho abriria para fora do topo da tela quando a
   tabela está no alto. `.dica-abaixo` abre para baixo. */
[data-dica].dica-abaixo::after {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 0.5em;
}
[data-dica].dica-abaixo::before {
  bottom: auto;
  top: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--cor-borda);
}

/* Um `?` discreto para pendurar a dica onde não há texto sublinhável. */
.dica-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  border: 1px solid var(--cor-borda);
  border-radius: 50%;
  color: var(--cor-texto-fraco);
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  border-bottom-style: solid;   /* sem o tracejado do `[data-dica]`; o círculo já anuncia */
}
.dica-marca:hover, .dica-marca:focus-visible {
  border-color: var(--cor-destaque);
  color: var(--cor-destaque);
  outline: none;
}

/* Quem prefere menos movimento na tela não recebe a transição. É configuração
   de sistema operacional, e ignorá-la causa enjoo de verdade em quem a liga. */
@media (prefers-reduced-motion: reduce) {
  [data-dica]::after, [data-dica]::before { transition: none; }
}

/* ==========================================================================
 * EFEITOS AO PASSAR O MOUSE
 *
 * Todos combinam com `:focus-visible` pela mesma razão da dica: um realce que
 * só responde ao mouse deixa quem navega por teclado sem saber onde está.
 * ========================================================================== */

/* Cartão que sobe de leve e acende a borda. */
.realce {
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.realce:hover, .realce:focus-within {
  border-color: var(--cor-destaque);
  transform: translateY(-2px);
}

/* Linha de tabela e item de lista: só o fundo muda. Mover uma linha de tabela
   no hover desalinha a coluna vizinha e atrapalha a leitura. */
.realce-linha { transition: background .14s ease; }
.realce-linha:hover, .realce-linha:focus-within { background: var(--cor-fundo); }

@media (prefers-reduced-motion: reduce) {
  .realce, .realce-linha { transition: none; }
  .realce:hover, .realce:focus-within { transform: none; }
}

/*
 * A CAIXA DE MARCAR alinha pela BASE do campo ao lado, não pelo meio da linha.
 * Visto na tela: com `align-items: center` no pai, a caixa flutuava entre o
 * rótulo e o campo vizinho, sem alinhar com nenhum dos dois.
 */
.filtros .rotulo-caixa { align-self: flex-end; padding-bottom: 0.55rem; }

/*
 * A AUTORIA — duas linhas, e não mais que isso.
 *
 * Primeira: quem fez. Segunda: com o quê, e onde está o código. A versão
 * anterior punha nome e pilha na mesma linha e o link embaixo, e em tela
 * estreita aquilo quebrava em quatro — um rodapé mais alto que a informação.
 */
.rodape-autoria {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
}

.rodape-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
}

.rodape-linha-fraca { color: var(--cor-texto-fraco); font-size: 0.9em; }

/* O separador é `aria-hidden`: leitor de tela lendo "ponto" entre a pilha e o
   endereço não acrescenta nada e interrompe a leitura. */
.rodape-separador { opacity: 0.5; }

.rodape-repositorio { color: var(--cor-destaque); text-decoration: none; }
.rodape-repositorio:hover, .rodape-repositorio:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
 * A MARCA — ícone à esquerda, texto ao lado
 * ========================================================================== */

.cabecalho-marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.marca-icone {
  /* Tamanho em `rem`: ele acompanha a fonte, e no telefone encolhe junto com o
     título em vez de ficar um bloco desproporcional ao lado de texto pequeno.

     `object-fit: cover` e a borda vem do binmapper: sem o recorte, um PNG que
     não seja exatamente quadrado entra esticado; sem a borda, um ícone de fundo
     claro se dissolve no cabeçalho escuro e deixa de parecer uma marca. */
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.55rem;
  flex: 0 0 2.6rem;
  object-fit: cover;
  display: block;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-painel);
}

.marca-texto { display: flex; flex-direction: column; }

/* O nome inteiro é um link para a home. O realce no hover é sutil de propósito:
   ele é a marca, não um botão. */
.cabecalho-marca:hover .marca-titulo,
.cabecalho-marca:focus-visible .marca-titulo { color: var(--cor-destaque); }

/* ==========================================================================
 * MENU E RODAPÉ CENTRALIZADOS
 *
 * ATENÇÃO À REGRA DO PROJETO: `max-width` + `margin: 0 auto` continua PROIBIDO,
 * e não é isso que está acontecendo aqui. A barra segue com `width: 100%` e
 * padding lateral em `%`; o que se centraliza é o CONTEÚDO dentro dela, com
 * `justify-content`.
 *
 * A diferença é grande: a coluna estreita centralizada deixa metade da tela em
 * branco (o defeito do binmapper); conteúdo centralizado numa barra de largura
 * cheia usa a tela toda e só equilibra o que está dentro.
 * ========================================================================== */

.menu { justify-content: center; }

.rodape { justify-content: center; text-align: center; }

/* Em tela estreita o menu volta a alinhar à esquerda: centralizado, com os
   itens quebrando em três linhas, cada linha fica com um recuo diferente e a
   lista deixa de ser varrível de cima a baixo. */
@media (max-width: 720px) {
  .menu { justify-content: flex-start; }
  .rodape { justify-content: flex-start; text-align: left; }
  .rodape-autoria, .rodape-linha { align-items: flex-start; justify-content: flex-start; }
}

/* ==========================================================================
 * CARTÕES DE FUNÇÃO — o que dá para fazer no sistema
 *
 * Cada um é um LINK, e por isso é um `<a>`: assim ele já é alcançável por Tab,
 * abre com Enter, aceita clique do meio para nova aba e é anunciado como link
 * por leitor de tela. Um `<div>` com `onclick` perde as quatro coisas.
 * ========================================================================== */

.funcoes {
  display: grid;
  /* `auto-fit`, nunca `auto-fill`: com `auto-fill` sobram colunas vazias à
     direita e os cartões ficam colados na esquerda. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  width: 100%;
  margin-top: 1.2rem;
}

.funcao {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--cor-borda);
  /* A cor da função entra pela BORDA SUPERIOR, e não no fundo: fundo colorido
     em oito cartões diferentes vira um mosaico que compete com o texto. */
  border-top: 3px solid var(--cor-funcao, var(--cor-destaque));
  border-radius: 0.5rem;
  background: var(--cor-superficie);
  color: inherit;
  text-decoration: none;
}

.funcao-icone {
  /* O ícone herda a cor da função por `currentColor` — é a mesma mecânica do
     catálogo de ícones, e por isso não há CSS por ícone aqui. */
  color: var(--cor-funcao, var(--cor-destaque));
  font-size: 1.6rem;
  line-height: 1;
}

.funcao-titulo { font-weight: 700; font-size: 1.02rem; }

.funcao-texto {
  color: var(--cor-texto-fraco);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* A "marca" é a frase curta que dá a razão de clicar. Ela acende no hover
   junto com a borda: o cartão inteiro responde como uma coisa só. */
.funcao-marca {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--cor-texto-fraco);
  font-size: 0.75rem;
  font-style: italic;
}

.funcao:hover, .funcao:focus-visible {
  border-color: var(--cor-funcao, var(--cor-destaque));
  background: color-mix(in srgb, var(--cor-funcao, var(--cor-destaque)) 8%, var(--cor-superficie));
  outline: none;
}
.funcao:hover .funcao-titulo,
.funcao:focus-visible .funcao-titulo { color: var(--cor-funcao, var(--cor-destaque)); }
.funcao:hover .funcao-marca,
.funcao:focus-visible .funcao-marca { color: var(--cor-funcao, var(--cor-destaque)); }

/* O foco de teclado precisa ser VISÍVEL: sem ele, quem navega por Tab não sabe
   em qual dos oito cartões está. O `realce` do base.css já move; isto marca. */
.funcao:focus-visible { box-shadow: 0 0 0 2px var(--cor-funcao, var(--cor-destaque)); }

/* =============================================================================
   SESSÃO — o controle de entrar/sair no cabeçalho.

   Medidas em `rem`, nunca em `px`: é a regra que a guarda-css-porcentagem impõe,
   e ela existe porque `px` de layout ignora o tamanho de fonte escolhido por
   quem enxerga mal — a pessoa aumenta a fonte e o botão continua do mesmo
   tamanho, espremendo o texto para fora.
   ============================================================================= */
.sessao { display: flex; align-items: center; gap: 0.6rem; }

.sessao-quem {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  color: var(--cor-texto-fraco);
}

.sessao-botao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--cor-borda);
  border-radius: 0.3rem;
  font-size: 0.85rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sessao-botao:hover,
.sessao-botao:focus-visible { border-color: var(--cor-destaque); }

/* O contraste do botão de entrar é maior que o de sair de propósito: entrar é a
   ação que o visitante procura; sair é a que ele já sabe onde está. */
.sessao-botao-github { background: var(--cor-fundo-painel); font-weight: 600; }