/* VAZOU — componentes.

   Mesma linguagem do projeto irmão: uma só altura de botão, um só raio, três
   pesos de hierarquia; selos retangulares de canto curto, cada um com moldura da
   própria cor, para que o estado continue legível sem enxergar cor; tabela para
   conjunto de esquema fixo e quantidade variável, nunca cartão. */

/* ------------------------------------------------------------------ */
/* Campo de pesquisa                                                   */
/* ------------------------------------------------------------------ */

.pesquisa { margin: 0; }
.pesquisa-linha { position: relative; display: block; }

.pesquisa-campo {
  width: 100%;
  /* Espaço à direita reservado para a seta, que fica por cima. */
  padding: 1rem 3.6rem 1rem 1.1rem;
  font: inherit; font-size: 1.05rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.pesquisa-campo::placeholder { color: var(--texto-tenue); }
.pesquisa-campo:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.pesquisa-campo:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo), var(--sombra-media);
}
.pesquisa-campo[aria-invalid="true"] { border-color: var(--erro); }
.pesquisa-campo[aria-invalid="true"]:focus-visible {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px var(--erro-fundo);
}

/* Seta de envio: a ação do campo, dentro dele, com área de toque de 42 px.
   Ganha peso de botão quando o campo tem foco. */
.pesquisa-enviar {
  position: absolute; top: 50%; right: .5rem;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  border: 0; border-radius: var(--raio-pequeno);
  background: none; color: var(--texto-suave);
  cursor: pointer;
  transition: color .14s ease, background-color .14s ease;
}
.pesquisa-enviar svg { width: 1.3rem; height: 1.3rem; display: block; }
.pesquisa-enviar:hover:not(:disabled) { color: #fff; background: var(--acento); }
.pesquisa-enviar:disabled { opacity: .45; cursor: progress; }
.pesquisa-campo:focus-visible ~ .pesquisa-enviar:not(:disabled) { color: #fff; background: var(--acento); }

/* A dica só existe depois que o usuário digita. Enquanto está vazia não ocupa
   nada: reservar altura para ela deixava um vão em branco logo abaixo do campo,
   visível já na primeira pintura. */
.pesquisa-dica { margin: .45rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pesquisa-dica:empty { margin: 0; }

.dica-tipo {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: var(--raio-selo);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  background: var(--acento-fundo); color: var(--acento-forte);
}
.dica-texto { font-size: .86rem; color: var(--texto-suave); }

/* O erro não depende só da cor: tem moldura própria, peso maior e um sinal
   antes do texto. */
.erro-entrada {
  display: flex; align-items: baseline; gap: .45rem;
  margin: .55rem 0 0; padding: .55rem .75rem;
  font-size: .9rem; font-weight: 500; color: var(--erro);
  background: var(--erro-fundo);
  border: 1px solid currentColor;
  border-left-width: 3px;
  border-radius: var(--raio-pequeno);
}
.erro-entrada::before { content: '!'; font-weight: 700; flex: none; }

.acoes-pesquisa { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }

/* ------------------------------------------------------------------ */
/* Botões                                                              */
/* ------------------------------------------------------------------ */

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem;
  min-height: 2.5rem;
  padding: .55rem 1.05rem;
  font: inherit; font-size: .93rem; font-weight: 550;
  color: var(--texto); text-decoration: none;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.botao:hover:not(:disabled) { background: var(--superficie-2); border-color: var(--texto-tenue); }
.botao:active:not(:disabled) { background: var(--borda); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
/* `aria-busy` sozinho não é visível. */
.botao[aria-busy="true"] { cursor: progress; opacity: .75; }

.botao-principal {
  color: #fff; background: var(--acento); border-color: var(--acento);
  font-weight: 600; box-shadow: var(--sombra);
}
.botao-principal:hover:not(:disabled) { background: var(--acento-forte); border-color: var(--acento-forte); }
.botao-principal:active:not(:disabled) { background: var(--azul-900); border-color: var(--azul-900); }

.botao-discreto { font-size: .88rem; min-height: 2.25rem; padding: .4rem .8rem; }

.link { color: var(--acento); text-decoration: none; }
.link:hover { text-decoration: underline; }
.link-externo { font-size: .8em; opacity: .7; margin-left: .15em; }

/* ------------------------------------------------------------------ */
/* Selos                                                               */
/* ------------------------------------------------------------------ */

/* Retangulares de canto curto, como os terminais das letras. Cada um tem
   moldura da própria cor: o estado continua legível sem enxergar cor. */
.selo {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: var(--raio-selo);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
  background: var(--neutro-fundo); color: var(--neutro);
}
.selo-ok, .selo-falha, .selo-aviso, .selo-externo { box-shadow: inset 0 0 0 1px currentColor; }
.selo-ok { background: var(--ok-fundo); color: var(--ok); }
.selo-vazio { background: var(--neutro-fundo); color: var(--neutro); }
.selo-falha { background: var(--erro-fundo); color: var(--erro); }
.selo-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.selo-externo { background: var(--acento-fundo); color: var(--acento-forte); }
.selo-neutro { background: var(--neutro-fundo); color: var(--neutro); }

/* ------------------------------------------------------------------ */
/* Avisos                                                              */
/* ------------------------------------------------------------------ */

.aviso {
  padding: .9rem 1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--borda);
  border-left-width: 3px;
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
  font-size: .93rem;
}
.aviso p { margin: 0 0 .4rem; }
.aviso p:last-child { margin-bottom: 0; }
.aviso .botao { margin-top: .6rem; }
.aviso-titulo { font-weight: 650; }

.aviso-erro { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
.aviso-erro .nota { color: inherit; opacity: .85; }
.aviso-atencao { background: var(--aviso-fundo); border-color: var(--aviso); color: var(--aviso); }
.aviso-neutro { background: var(--superficie-2); border-color: var(--borda-forte); color: var(--texto-suave); }
.aviso-ok { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }
.aviso-acento { background: var(--acento-fundo); border-color: var(--acento); color: var(--acento-forte); }

/* ------------------------------------------------------------------ */
/* Indicadores                                                         */
/* ------------------------------------------------------------------ */

/* Uma faixa de números, não uma parede de cartões: moldura única, divisores
   finos e o rótulo dizendo exatamente o que cada número é. O filete da marca
   assina o topo do bloco.

   A grade é FIXA em quatro colunas, não `auto-fit`. São sempre quatro
   indicadores, e `repeat(auto-fit, minmax(…))` decide o número de colunas
   olhando só para a largura — não sabe quantos itens existem, e por isso produz
   um bloco sozinho na última linha em algumas larguras. Com quatro itens e
   quebras de 4 → 2 → 1, isso não acontece em largura nenhuma. */
.indicadores {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 1.25rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.indicadores::before {
  content: '';
  position: absolute; inset: 0 0 auto;
  height: 3px;
  background: var(--faixa-marca);
}

.indicador {
  padding: 1.15rem 1.1rem 1rem;
  border-left: 1px solid var(--borda);
  min-width: 0;
}
.indicador:first-child { border-left: 0; }

.indicador-valor {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  font-weight: 650;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  overflow-wrap: anywhere;
}
/* Categoria cuja leitura falhou: marca em vez de número. Não há o que contar, e
   um zero ali afirmaria ausência. */
.indicador-valor.falhou { font-size: .95rem; font-weight: 600; color: var(--erro); letter-spacing: 0; }

.indicador-rotulo {
  margin: .3rem 0 0;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.indicador-nota { margin: .3rem 0 0; font-size: .8rem; color: var(--texto-suave); }

/* ------------------------------------------------------------------ */
/* Campos                                                              */
/* ------------------------------------------------------------------ */

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .1rem 2rem;
  margin: 0;
}

.campo {
  display: flex; flex-direction: column;
  padding: .55rem 0;
  border-bottom: 1px solid var(--borda);
  min-width: 0;
}
.campo dt {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.campo dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.ausente { color: var(--texto-tenue); font-style: italic; }
.campo-nota { margin: .2rem 0 0; font-size: .76rem; color: var(--texto-tenue); }

/* ------------------------------------------------------------------ */
/* Tabelas                                                             */
/* ------------------------------------------------------------------ */

.tabela-envolve {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }

.tabela caption {
  caption-side: top;
  padding: .75rem .8rem;
  text-align: left;
  font-size: .86rem;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
}

/* O cabeçalho é a linha mais densa da tabela: caixa-alta pequena, fundo próprio
   e uma borda de 2 px que a separa dos dados. */
.tabela th {
  position: sticky; top: 0;
  text-align: left;
  padding: .65rem .8rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border-bottom: 2px solid var(--borda-forte);
  white-space: nowrap;
}

.tabela td { padding: .7rem .8rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover > td { background: var(--superficie-2); }
.tabela .numerica { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* O título da linha é um botão: abre o detalhe no lugar, sem tirar quem lê da
   lista. Parece texto porque é o nome do registro, não um controle à parte. */
.celula-registro { display: grid; gap: .1rem; }

.celula-titulo {
  padding: 0; margin: 0;
  font: inherit; font-weight: 600; text-align: left;
  color: var(--acento-forte);
  background: none; border: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.celula-titulo:hover { text-decoration: underline; }
.celula-nota { display: block; line-height: 1.3; font-size: .82rem; color: var(--texto-tenue); }

.tabela tr.linha-aberta > td { background: var(--acento-fundo); }
.tabela tr.linha-aberta:hover > td { background: var(--acento-fundo); }

/* A linha de detalhe ocupa a largura toda e some do fluxo de colunas: é o
   registro se abrindo, não mais uma linha da lista. */
.tabela-linha-detalhe > td {
  padding: 0;
  background: var(--superficie-2);
  border-top: 0;
}
.tabela-linha-detalhe:hover > td { background: var(--superficie-2); }

/* O detalhe é o único bloco que abre a partir de outro: a faixa da marca à
   esquerda diz de onde ele veio. */
.linha-detalhe {
  padding: 1.1rem;
  border-left: 3px solid var(--marca);
}
.linha-detalhe > :first-child { margin-top: 0; }
.linha-detalhe .subtitulo { margin-top: .9rem; }

/* ------------------------------------------------------------------ */
/* Dados expostos                                                      */
/* ------------------------------------------------------------------ */

/* Os tipos de dado são uma lista de termos curtos, e aparecem como marcadores
   em linha — não como tabela nem como lista com ponto, que ocupariam uma linha
   cada para dizer duas palavras. */
.marcadores { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
/* O item é o próprio item flexível. `display: contents` resolveria o mesmo
   alinhamento, mas em vários navegadores ele remove a semântica de lista da
   árvore de acessibilidade — o leitor de tela deixaria de anunciar quantos
   tipos de dado existem. */
.marcadores > li { display: inline-flex; min-width: 0; }

/* Lista de itens curtos de uma linha. Recuo mínimo: o marcador já indica a
   lista, e um recuo grande afastaria o texto da coluna que o contém. */
.lista-simples { margin: 0; padding-left: 1.15rem; }
.lista-simples > li { margin-bottom: .3rem; overflow-wrap: anywhere; }

/* Nome de endpoint: é um identificador, não prosa. Monoespaçado para distinguir
   do texto ao redor, e sem quebra — o hífen de "breach-analytics" é ponto de
   quebra legítimo para o navegador, e parti-lo faria o nome parecer dois. */
.rotulo-endpoint { font-family: var(--fonte-mono); font-size: .9em; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Recolhível                                                          */
/* ------------------------------------------------------------------ */

.recolhivel {
  margin-top: 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
}
.recolhivel > summary {
  padding: .6rem .95rem;
  cursor: pointer;
  font-size: .88rem; font-weight: 550;
  color: var(--texto-suave);
  list-style-position: inside;
}
.recolhivel > summary:hover { color: var(--texto); }
.recolhivel[open] > summary { border-bottom: 1px solid var(--borda); color: var(--texto); }
.recolhivel > *:not(summary) { margin: .85rem .95rem; }
.recolhivel .tabela-envolve { border: 0; border-radius: 0; box-shadow: none; margin: 0; }

/* As seções da abertura: filete acima do resumo, marcador próprio que vira
   menos ao abrir. */
.sobre { border-bottom: 1px solid var(--borda); }
.sobre > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0;
  cursor: pointer;
  font-size: .95rem; font-weight: 550; color: var(--texto-suave);
  list-style: none;
  transition: color .14s ease;
}
.sobre > summary::-webkit-details-marker { display: none; }
.sobre > summary::after {
  content: '+';
  flex: none;
  font-size: 1.15rem; line-height: 1; color: var(--texto-tenue);
}
.sobre[open] > summary { color: var(--texto); }
.sobre[open] > summary::after { content: '\2212'; color: var(--acento); }
.sobre > summary:hover { color: var(--texto); }
.sobre > summary:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--raio-pequeno);
}
.sobre-corpo { padding-bottom: 1rem; color: var(--texto-suave); font-size: .92rem; }
.sobre-corpo p { margin: 0 0 .8rem; }
.sobre-corpo p:last-child { margin-bottom: 0; }
.sobre-corpo ul { margin: 0 0 .8rem; padding-left: 1.15rem; }
.sobre-corpo li { margin-bottom: .3rem; }

/* ------------------------------------------------------------------ */
/* Fontes consultadas                                                  */
/* ------------------------------------------------------------------ */

/* Área compacta de transparência: uma linha por fonte, com estado próprio e o
   detalhe técnico recolhido. Não é uma seção enorme repetindo a mesma
   informação — é a prova de o que foi lido e de o que não foi. */
.fontes { list-style: none; margin: 0; padding: 0; }
.fontes > li + li { margin-top: .45rem; }

.fonte-linha {
  padding: .7rem .9rem;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--superficie);
}
.fonte-linha.estado-ok { border-left-color: var(--ok); }
.fonte-linha.estado-vazio { border-left-color: var(--neutro); }
.fonte-linha.estado-falha { border-left-color: var(--erro); }
.fonte-linha.estado-aviso { border-left-color: var(--aviso); }
.fonte-linha.estado-neutro { border-left-color: var(--borda-forte); }

.fonte-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.fonte-nome { font-weight: 650; }
.fonte-detalhe { margin: .4rem 0 0; font-size: .88rem; color: var(--texto-suave); }
.fonte-linha .recolhivel { margin-top: .6rem; }

/* ------------------------------------------------------------------ */
/* Verificação de senha                                                */
/* ------------------------------------------------------------------ */

.painel {
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra);
}
.painel > :first-child { margin-top: 0; }

.campo-linha { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; }

.campo-texto {
  flex: 1 1 18rem; min-width: 0;
  padding: .6rem .8rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: .98rem;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.campo-texto::placeholder { color: var(--texto-tenue); }
.campo-texto:hover { border-color: var(--texto-tenue); }
.campo-texto:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}
.campo-texto.mono { font-family: var(--fonte-mono); font-size: .9rem; }

.campo-rotulo {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: .1rem;
}

.resultado-senha { margin-top: 1rem; }
.resultado-senha:empty { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Progresso                                                           */
/* ------------------------------------------------------------------ */

.carregando {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 0;
  color: var(--texto-suave); font-size: .93rem;
}

/* O giro usa as duas cores estruturais da identidade: o arco que gira é verde
   sobre a trilha azul-clara, não um cinza qualquer. */
.girando {
  width: 1.05rem; height: 1.05rem; flex: none;
  border: 2px solid var(--acento-fundo);
  border-top-color: var(--marca);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.progresso {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 1.25rem 0 0;
  padding: .55rem .95rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  background: var(--superficie-2);
}
.progresso:empty { display: none; }
.progresso .carregando { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .girando { animation-duration: 2.4s; }
  * { scroll-behavior: auto !important; }
}