/*
 * Folha de estilo única do painel.
 *
 * Os valores seguem os tokens do design system do QuintoAndar (Cozy, geração
 * "next"), lidos do CSS público de quintoandar.com.br em 15/09/2026: a paleta
 * base (blue, blue-gray, green, red, yellow), os raios (8px em campo, alerta e
 * etiqueta; 16px em cartão; pílula no botão), a escala tipográfica sobre 15px e
 * o anel de foco rosa. O nome de cada token do QuintoAndar vai em comentário ao
 * lado, para que um ajuste futuro possa ser conferido na fonte.
 *
 * A fonte deles (Oatmeal) é proprietária e não é usada aqui; a pilha do sistema
 * ocupa o lugar com métricas parecidas.
 *
 * Tema claro fixo: fundo branco em todas as telas e o Azul Quinto como cor de
 * estrutura (barra do topo, cabeçalho de tabela, indicadores). Não há tema
 * escuro — com ele, quem usa o sistema operacional no escuro via o painel
 * inteiro cinza-chumbo, fora da identidade.
 *
 * Organização: tokens → base → estrutura → componentes → formulários →
 * telas avulsas → utilitários.
 */

/* ============================================================
 * Tokens
 * ============================================================ */

:root {
  /* marca */
  --primaria: #3957bd;          /* blue-400 — Azul Quinto */
  --primaria-hover: #1b43a6;    /* blue-500 */
  --primaria-ativa: #07358f;    /* blue-600 */
  --primaria-clara: #f0f3ff;    /* blue-00 — surface-primary-low */
  --primaria-media: #d2dbf8;    /* blue-50 */
  --marinho: #000d38;           /* blue-900 — surface-inverse-ground */

  /* superfícies e texto */
  --fundo: #ffffff;             /* gray-00 — surface-neutral-ground */
  --papel: #ffffff;             /* gray-00 */
  --papel-destaque: #f7f7f9;
  --borda: #d7d7dd;             /* blue-gray-100 — border-neutral-on-ground */
  --borda-leve: #e4e4e8;        /* blue-gray-50 */
  --texto: #000000;             /* gray-900 — text-neutral-on-ground */
  --suave: #575763;             /* blue-gray-600 — text-neutral-on-ground-lighter */
  --apagado: #737380;           /* blue-gray-500 */

  /* estados */
  --ok: #124813;                /* green-800 — text-positive-on-positive */
  --ok-forte: #407a40;          /* green-500 */
  --ok-fundo: #ecf7eb;          /* green-00 */
  --ok-borda: #dbebda;          /* green-50 */
  --erro: #6b290c;              /* red-700 — text-critical-on-critical */
  --erro-forte: #b23f19;        /* red-400 */
  --erro-fundo: #ffe9e6;        /* red-00 */
  --erro-borda: #f5b8ac;        /* red-50 */
  --espera: #504012;            /* yellow-800 */
  --espera-forte: #80661e;      /* yellow-600 */
  --espera-fundo: #fff8e6;      /* yellow-00 */
  --espera-borda: #fce4a1;      /* yellow-50 */
  --neutro-fundo: #e4e4e8;      /* blue-gray-50 — surface-secondary-low */

  --foco: #fa7c90;              /* pink-200 — border-focus-visible */

  /* forma */
  --raio-xs: 4px;               /* border-radius-100 */
  --raio-sm: 8px;               /* border-radius-200 — campo, alerta, etiqueta */
  --raio-md: 16px;              /* border-radius-300 — cartão */
  --raio-pilula: 100px;         /* border-radius-600 — botão */
  --sombra: 0 1px 2px rgba(0, 13, 56, .06), 0 2px 4px rgba(0, 13, 56, .04);

  /* tipografia — base de 15px, como a deles */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --t-legenda: 12px;            /* size-1200 */
  --t-legenda-media: 13px;      /* size-1300 */
  --t-corpo: 15px;              /* size-1500 */
  --t-subtitulo: 20px;          /* size-2000 */
  --t-titulo: 24px;             /* size-2400 */
  --t-titulo-grande: 28px;      /* size-2800 */

  --largura: 1280px;
  color-scheme: light;
}

/* ============================================================
 * Base
 * ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 var(--t-corpo)/1.6 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; margin: 0; }

h1 { font-size: var(--t-titulo); line-height: 1.2; letter-spacing: -0.01em; color: var(--marinho); }

h2 {
  color: var(--marinho);
  font-size: var(--t-corpo);
  line-height: 1.4;
  margin: 32px 0 12px;
}

p { margin: 0 0 12px; }

a { color: var(--primaria); font-weight: 600; text-decoration: none; }
a:hover { color: var(--primaria-hover); text-decoration: underline; text-underline-offset: 2px; }

strong { font-weight: 600; }

code {
  font: 12px/1.5 var(--fonte-mono);
  background: var(--neutro-fundo);
  color: var(--texto);
  padding: 1px 6px;
  border-radius: var(--raio-xs);
  white-space: nowrap;
}

pre {
  margin: 0;
  padding: 12px 14px;
  background: var(--papel-destaque);
  border: 1px solid var(--borda-leve);
  border-radius: var(--raio-sm);
  overflow-x: auto;
  font: 12px/1.55 var(--fonte-mono);
}

summary { cursor: pointer; color: var(--primaria); font-weight: 600; }
summary:hover { color: var(--primaria-hover); }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ============================================================
 * Estrutura
 * ============================================================ */

/* barra do topo em Azul Quinto, texto branco — a marca presente em toda tela */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--primaria);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 13, 56, .18);
}

.topo .barra {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 64px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--texto);
}
.marca::before {
  content: "";
  width: 10px;
  height: 22px;
  border-radius: 2px;
  background: var(--primaria);
}
.marca .produto { color: var(--suave); font-weight: 400; }
.topo .marca { color: #fff; }
.topo .marca::before { background: #fff; }
.topo .marca .produto { color: rgba(255, 255, 255, .78); }

.navegacao {
  display: flex;
  gap: 4px;
  flex: 1;
  align-self: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.navegacao a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}
.navegacao a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .08); }
.navegacao a.ativo { color: #fff; border-bottom-color: #fff; }

.quem {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-legenda-media);
  white-space: nowrap;
}
.quem .nome { color: rgba(255, 255, 255, .78); }
.quem a { color: #fff; }
.quem a:hover { color: #fff; }
.topo .etiqueta.marca-rede { background: #fff; color: var(--primaria); }
.topo :focus-visible { outline-color: #fff; }

.conteudo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.cabecalho-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.cabecalho-pagina .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .topo .barra { flex-wrap: wrap; gap: 0 16px; padding: 0 16px; }
  .marca { min-height: 52px; flex: 1; }
  .navegacao { order: 3; flex-basis: 100%; min-height: 44px; margin: 0 -12px; }
  .conteudo { padding: 24px 16px 40px; }
}

/* ============================================================
 * Componentes
 * ============================================================ */

/* --- recados (alert: raio 8px, fundo low + texto on-color) --- */

.recado, .aviso {
  display: block;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--raio-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: var(--t-legenda-media);
  line-height: 1.5;
}
.recado.ok   { background: var(--ok-fundo);     color: var(--ok);     border-color: var(--ok-borda);     border-left-color: var(--ok-forte); }
.recado.erro { background: var(--erro-fundo);   color: var(--erro);   border-color: var(--erro-borda);   border-left-color: var(--erro-forte); }
.aviso       { background: var(--espera-fundo); color: var(--espera); border-color: var(--espera-borda); border-left-color: var(--espera-forte); }
.recado a, .aviso a { color: inherit; text-decoration: underline; }

/* --- cartões de indicador (card: raio 16px) --- */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cartao {
  position: relative;
  background: var(--papel);
  border: 1px solid var(--borda-leve);
  border-radius: var(--raio-md);
  padding: 20px;
  box-shadow: var(--sombra);
}
.cartao .numero {
  color: var(--primaria);
  font-size: var(--t-titulo-grande);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.cartao .numero.menor { font-size: var(--t-corpo); line-height: 1.9; }
.cartao .rotulo { color: var(--suave); font-size: var(--t-legenda-media); margin-top: 4px; }
.cartao.destaque-ok     .numero { color: var(--ok-forte); }
.cartao.destaque-erro   .numero { color: var(--erro-forte); }
.cartao.destaque-espera .numero { color: var(--espera-forte); }

/* --- painel e tabela --- */

.painel {
  background: var(--papel);
  border: 1px solid var(--borda-leve);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.rolagem { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
th {
  text-align: left;
  padding: 12px 16px;
  background: var(--primaria-clara);
  color: var(--primaria-hover);
  font-size: var(--t-legenda);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--primaria-media);
  white-space: nowrap;
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda-leve);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--primaria-clara); }
tbody tr:hover td.vazio { background: transparent; }
th.numero, td.numero { text-align: right; white-space: nowrap; }
td pre { margin-top: 6px; }

.vazio {
  padding: 48px 24px;
  text-align: center;
  color: var(--suave);
}

/* --- etiquetas (tag: raio 8px, padding 3×8, legenda forte) --- */

.etiqueta {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--raio-sm);
  font-size: var(--t-legenda);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--neutro-fundo);
  color: var(--suave);
  vertical-align: baseline;
}
.etiqueta + .etiqueta { margin-left: 4px; }
.etiqueta.ok     { background: var(--ok-fundo);     color: var(--ok); }
.etiqueta.erro   { background: var(--erro-fundo);   color: var(--erro); }
.etiqueta.espera { background: var(--espera-fundo); color: var(--espera); }
.etiqueta.marca-rede { background: var(--primaria-clara); color: var(--primaria); }

/* --- botões (button: pílula, padding 12×16, corpo forte) --- */

button, .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 20px;
  border: 1px solid var(--primaria);
  border-radius: var(--raio-pilula);
  background: var(--primaria);
  color: #fff;
  font: 600 14px/1.2 var(--fonte);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
button:hover, .botao:hover {
  background: var(--primaria-hover);
  border-color: var(--primaria-hover);
  color: #fff;
  text-decoration: none;
}
button:active, .botao:active { background: var(--primaria-ativa); border-color: var(--primaria-ativa); }

/* secundário: contorno escuro sobre fundo, como o "secondary" deles */
button.secundario, .botao.secundario {
  background: transparent;
  border-color: var(--texto);
  color: var(--texto);
}
button.secundario:hover, .botao.secundario:hover { background: var(--neutro-fundo); color: var(--texto); }

button.compacto, .botao.compacto { min-height: 32px; padding: 4px 14px; font-size: var(--t-legenda-media); }

/*
 * perigo: contorno vermelho para ação que o público enxerga e que não se
 * desfaz sozinha — hoje, despublicar um contexto no QuintoAndar. Contorno e não
 * preenchimento sólido: ela fica dentro de uma tabela, ao lado de "Reenviar", e
 * um botão vermelho cheio puxaria o olho para a ação destrutiva.
 */
button.perigo, .botao.perigo {
  background: transparent;
  border-color: var(--erro-forte);
  color: var(--erro);
}
button.perigo:hover, .botao.perigo:hover {
  background: var(--erro-fundo);
  border-color: var(--erro-forte);
  color: var(--erro);
}

/* --- paginação --- */

.paginacao {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 14px;
}

/* --- blocos recolhíveis --- */

.recolhivel {
  margin-top: 16px;
  background: var(--papel);
  border: 1px solid var(--borda-leve);
  border-radius: var(--raio-sm);
  padding: 12px 16px;
}
.recolhivel[open] summary { margin-bottom: 12px; }

.detalhe-requisicao { margin-top: 10px; min-width: 340px; }
.detalhe-requisicao h3 {
  font-size: var(--t-legenda);
  color: var(--suave);
  margin: 14px 0 6px;
}
.detalhe-requisicao h3:first-child { margin-top: 0; }

/*
 * A tradução do código de negócio deles, acima do JSON cru. Destacada porque é
 * a única linha do bloco escrita para ser lida por quem opera — o resto é
 * material de diagnóstico.
 */
.detalhe-requisicao .explicacao {
  display: block;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--primaria);
  background: var(--neutro-fundo);
  font-size: var(--t-legenda-media);
}

/* --- textos auxiliares de tabela --- */

.linha-secundaria { display: block; color: var(--suave); font-size: var(--t-legenda-media); }
.url-requisicao { color: var(--suave); font-size: var(--t-legenda); word-break: break-all; }
.identificadores { font-size: var(--t-legenda); }
.identificadores div + div { margin-top: 2px; }

.nota-rodape {
  margin-top: 16px;
  color: var(--suave);
  font-size: var(--t-legenda-media);
  max-width: 80ch;
}

.subtitulo-pagina { color: var(--suave); margin: -12px 0 24px; }

/* ============================================================
 * Filtros e formulários
 * ============================================================ */

input[type=text], input[type=email], input[type=url], input[type=number],
input[type=password], input[type=search], select, textarea {
  min-height: 40px;
  padding: 8px 12px;
  background: var(--papel);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font: 400 14px/1.4 var(--fonte);
  transition: border-color .12s, box-shadow .12s;
}
textarea { resize: vertical; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: var(--apagado); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px var(--primaria-media);
}
input::placeholder, textarea::placeholder { color: var(--apagado); }
input[type=checkbox], input[type=radio] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primaria);
  cursor: pointer;
}

form.filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
form.filtros label { font-size: var(--t-legenda-media); }
form.filtros input[type=search] { min-width: 240px; }

fieldset {
  background: var(--papel);
  border: 1px solid var(--borda-leve);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
  padding: 20px 24px 8px;
  margin: 0 0 16px;
  min-width: 0;
}
legend {
  float: left;
  width: 100%;
  padding: 0 0 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--borda-leve);
  color: var(--marinho);
  font-size: var(--t-corpo);
  font-weight: 600;
}
legend + * { clear: both; }
fieldset h3 {
  font-size: var(--t-legenda-media);
  color: var(--suave);
  margin: 0 0 12px;
}

.formulario { padding: 24px; }
.formulario.estreito { max-width: 640px; }

.campo { margin-bottom: 16px; }
.campo > label { display: block; font-size: var(--t-legenda-media); font-weight: 600; margin-bottom: 6px; }
.campo input[type=text], .campo input[type=email], .campo input[type=url],
.campo input[type=number], .campo select, .campo textarea { width: 100%; }
.campo small, small.nota {
  display: block;
  color: var(--suave);
  font-size: var(--t-legenda);
  line-height: 1.5;
  margin-top: 6px;
}
small.nota { margin: -4px 0 16px; }

.dupla      { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tripla     { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quintupla  { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ocupa-2    { grid-column: span 2; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.opcao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.campo > .opcao { margin-bottom: 0; }

.caixa-alta { text-transform: uppercase; }

.lista-rolavel {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--borda-leve);
  border-radius: var(--raio-sm);
  margin-bottom: 16px;
}
.lista-rolavel table { font-size: var(--t-legenda-media); }
.lista-rolavel th { position: sticky; top: 0; z-index: 1; }
.lista-rolavel td { padding: 8px 16px; vertical-align: middle; }
.lista-rolavel .coluna-marca { width: 90px; text-align: center; }

.acoes-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0 16px;
}

@media (max-width: 820px) {
  .dupla, .tripla, .quintupla { grid-template-columns: minmax(0, 1fr); }
  .ocupa-2 { grid-column: auto; }
  form.filtros input[type=search] { min-width: 0; flex: 1; }
}

/* ============================================================
 * Telas avulsas (login, sem acesso)
 * ============================================================ */

body.avulsa {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px;
  border-top: 6px solid var(--primaria);
}
body.avulsa .marca { font-size: var(--t-subtitulo); color: var(--primaria); }
body.avulsa .marca::before { height: 28px; width: 12px; }

.caixa {
  width: 100%;
  max-width: 400px;
  background: var(--papel);
  border: 1px solid var(--borda-leve);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
  padding: 32px;
}
.caixa.larga { max-width: 460px; text-align: center; }
.caixa h1 { font-size: var(--t-subtitulo); margin-bottom: 4px; }
.caixa .sub { color: var(--suave); font-size: 14px; margin: 0 0 24px; }
.caixa .campo input { width: 100%; }
.caixa button[type=submit] { width: 100%; min-height: 48px; font-size: var(--t-corpo); }
.caixa .recado { margin-bottom: 20px; }
.caixa .lembrar { display: flex; align-items: center; gap: 8px; margin: 4px 0 24px; font-size: 14px; }
.caixa .lembrar label { font-weight: 400; cursor: pointer; }
.caixa .rodape { margin-top: 20px; font-size: var(--t-legenda-media); color: var(--suave); text-align: center; }

/* ============================================================
 * Utilitários
 * ============================================================ */

.suave { color: var(--suave); }

/* ============================================================
 * Auto-cadastro e passo a passo da integração
 * ============================================================ */

/*
 * `ampla` e não `larga`: a `larga` centraliza o texto, o que serve ao aviso de
 * "sem acesso" e atrapalha um formulário de duas colunas.
 */
.caixa.ampla { max-width: 620px; }
.caixa.ampla .aviso { margin-bottom: 24px; }

.caixa .secao {
  font-size: var(--t-legenda-media);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--suave);
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borda-leve);
}
.caixa .secao:first-of-type { margin-top: 20px; }

.opcional { font-weight: 400; color: var(--suave); }

/*
 * A escada de passos. O estado de cada um é dado pela cor do marcador à
 * esquerda, e não só pelo texto: numa lista de seis, ler seis frases para achar
 * onde parou é o que a tela existe para evitar.
 */
.passos { list-style: none; margin: 0; padding: 0; }

.passo {
  position: relative;
  padding: 0 0 24px 40px;
  border-left: 2px solid var(--borda-leve);
  margin-left: 11px;
}
.passo:last-child { border-left-color: transparent; padding-bottom: 0; }

.passo::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 2px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--borda-leve);
}

.passo.concluido { border-left-color: var(--ok-forte); }
.passo.concluido::before {
  background: var(--ok-forte);
  border-color: var(--ok-forte);
  /* o "visto" é desenhado na borda para não depender de fonte de ícones */
  content: '\2713';
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
.passo.atual::before { border-color: var(--primaria); border-width: 6px; }
.passo.atual > .passo-titulo { color: var(--primaria); }
.passo.pendente { opacity: .62; }

.passo-titulo { font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.passo-detalhe { color: var(--suave); font-size: var(--t-legenda-media); margin: 0; max-width: 68ch; }

/* De quem se está esperando — a informação que evita o chamado de suporte. */
.responsavel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--borda-leve);
  color: var(--suave);
  white-space: nowrap;
}
.responsavel.voce        { border-color: var(--primaria); color: var(--primaria); }
.responsavel.quintoandar { border-color: var(--espera-forte); color: var(--espera); }

/* Divisor de seção dentro de um formulário do painel. */
.formulario .secao-form {
  font-size: var(--t-legenda-media);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--suave);
  margin: 32px 0 6px;
  padding-top: 20px;
  border-top: 1px solid var(--borda-leve);
}
.formulario .nota-secao { color: var(--suave); font-size: var(--t-legenda-media); margin: 0 0 16px; max-width: 68ch; }

/* Bloco recolhível de ação secundária dentro de uma célula de tabela. */
.recolhivel { margin-top: 6px; }
.recolhivel > summary {
  cursor: pointer;
  font-size: var(--t-legenda-media);
  color: var(--erro-forte);
}
.recolhivel[open] { padding: 10px 0 4px; }
.recolhivel .campo { margin-bottom: 8px; }

/* Aviso de cadastros esperando aprovação, na navegação. */
.navegacao a.pendentes { display: inline-flex; align-items: center; gap: 6px; }
.navegacao a.pendentes .contador {
  background: var(--espera-forte);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
}