/*
 * Portal do desenvolvedor da API de parceiros da Vínculoo® (docs/integracoes/api-parceiros.md §7).
 *
 * TOKENS: todos os valores visuais abaixo foram COPIADOS de shared/src/theme/tokens.ts
 * (fonte única, ADR-003) em 05/11/2026. Esta pasta é estática e não passa pelo build do
 * web, então a ponte web/src/theme/apply-tokens.ts não roda aqui. Mudou um valor no
 * tokens.ts? Atualize a lista correspondente neste arquivo no mesmo PR. Nenhuma cor,
 * tamanho de fonte, espaçamento ou raio nasce neste arquivo: o que não existe no tokens.ts
 * está no bloco "Medidas de layout próprias do portal", marcado como tal.
 */

:root {
  /* palette.blue */
  --vinculoo-blue-50: #d4f5f8;
  --vinculoo-blue-100: #7dbcc4;
  --vinculoo-blue-300: #1097a9;
  --vinculoo-blue-500: #007e89;
  --vinculoo-blue-700: #00515e;
  --vinculoo-blue-900: #021d22;

  /* palette.neutral */
  --vinculoo-neutral-0: #fdfdfd;
  --vinculoo-neutral-25: #f8fbfb;
  --vinculoo-neutral-50: #e9eff0;
  --vinculoo-neutral-100: #d3e0e0;
  --vinculoo-neutral-200: #b0bfbf;
  --vinculoo-neutral-300: #899394;
  --vinculoo-neutral-500: #4c595b;
  --vinculoo-neutral-700: #21292a;
  --vinculoo-neutral-900: #111717;

  /* palette.green */
  --vinculoo-green-50: #e0f5ef;
  --vinculoo-green-100: #95e8cf;
  --vinculoo-green-300: #1fd19b;
  --vinculoo-green-500: #04a474;
  --vinculoo-green-700: #007552;
  --vinculoo-green-900: #003d2b;

  /* palette.yellow */
  --vinculoo-yellow-50: #fefbf0;
  --vinculoo-yellow-100: #fff5db;
  --vinculoo-yellow-300: #fadb80;
  --vinculoo-yellow-500: #ffc518;
  --vinculoo-yellow-700: #e09900;
  --vinculoo-yellow-900: #382205;

  /* palette.red */
  --vinculoo-red-50: #fbebe3;
  --vinculoo-red-100: #f3c9b4;
  --vinculoo-red-300: #e5793f;
  --vinculoo-red-500: #d14710;
  --vinculoo-red-700: #a5350b;
  --vinculoo-red-900: #4a1a06;

  /* colors (aliases semânticos) */
  --vinculoo-background: var(--vinculoo-neutral-25);
  --vinculoo-surface: var(--vinculoo-neutral-0);
  --vinculoo-border: var(--vinculoo-neutral-100);
  --vinculoo-text-primary: var(--vinculoo-blue-900);
  --vinculoo-text-secondary: var(--vinculoo-neutral-500);
  --vinculoo-text-muted: var(--vinculoo-neutral-300);
  --vinculoo-text-disabled: var(--vinculoo-neutral-200);
  --vinculoo-text-on-primary: #ffffff;
  --vinculoo-primary: var(--vinculoo-blue-500);
  --vinculoo-primary-hover: var(--vinculoo-blue-700);
  --vinculoo-primary-light: var(--vinculoo-blue-50);
  --vinculoo-yellow: var(--vinculoo-yellow-500);
  --vinculoo-yellow-light: var(--vinculoo-yellow-300);
  --vinculoo-yellow-pale: var(--vinculoo-yellow-100);
  --vinculoo-on-yellow: var(--vinculoo-yellow-900);
  --vinculoo-on-yellow-muted: var(--vinculoo-neutral-700);
  --vinculoo-success: #00ad8a;
  --vinculoo-success-soft: var(--vinculoo-green-50);
  --vinculoo-warning: var(--vinculoo-red-500);
  --vinculoo-warning-soft: var(--vinculoo-red-50);
  --vinculoo-error: var(--vinculoo-red-500);

  /* fonts: o mesmo mapeamento web de apply-tokens.ts (Albert Sans, carregada no index.html) */
  --vinculoo-font-sans: 'Albert Sans', system-ui, sans-serif;

  /* type (px → rem, como a ponte do web, para respeitar o tamanho de fonte do sistema) */
  --vinculoo-type-display: 3.75rem;
  --vinculoo-type-kpi: 2.25rem;
  --vinculoo-type-h1: 1.5rem;
  --vinculoo-type-h2: 1.25rem;
  --vinculoo-type-h3: 1.125rem;
  --vinculoo-type-body-lg: 1rem;
  --vinculoo-type-body: 0.9375rem;
  --vinculoo-type-label: 0.875rem;
  --vinculoo-type-small: 0.75rem;

  /* spacing (densidade confortável; a compacta entra abaixo, como aplicarDensidade do web) */
  --vinculoo-spacing-xs: 4px;
  --vinculoo-spacing-sm: 8px;
  --vinculoo-spacing-md: 12px;
  --vinculoo-spacing-lg: 16px;
  --vinculoo-spacing-xl: 24px;
  --vinculoo-spacing-xxl: 32px;
  --vinculoo-spacing-xxxl: 48px;

  /* radius */
  --vinculoo-radius-xs: 4px;
  --vinculoo-radius-sm: 8px;
  --vinculoo-radius-md: 12px;
  --vinculoo-radius-lg: 16px;
  --vinculoo-radius-xl: 28px;
  --vinculoo-radius-pill: 999px;

  /* touch.minTarget */
  --vinculoo-touch-min: 44px;

  /* shadow.cardHover (composto como em apply-tokens.ts) */
  --vinculoo-shadow-card-hover: 0 1px 8px rgba(0, 0, 0, 0.06);

  /*
   * Entrelinhas e pesos por nível: web/src/styles/index.css (@theme), que é onde o web os
   * amarra à escala do tokens.ts.
   */
  --portal-lh-titulo: 1.3;
  --portal-lh-corpo: 1.5;
  --portal-lh-label: 1.4;

  /*
   * Medidas de layout próprias do portal (NÃO existem no tokens.ts): larguras e alturas de
   * estrutura, não identidade visual. A largura máxima do conteúdo é a do PageHeader do web
   * (max-w-[1092px]). O tokens.ts não define fonte monoespaçada (o produto não tem bloco de
   * código): usamos a do sistema, sem valor de marca novo.
   */
  --portal-altura-topo: 64px;
  --portal-largura-nav: 288px;
  --portal-largura-conteudo: 1092px;
  --portal-largura-metodo: 64px;
  /* Raio do item do menu lateral do web quando acende (rounded-[34px], sidebar.tsx) e a altura
     da mascote como no Início (h-28). */
  --portal-raio-menu: 34px;
  --portal-altura-mascote: 112px;
  --portal-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Densidade COMPACTA (DS §7, ADR-045): mesma escala, um degrau mais justa em tela pequena.
   Os valores são os de spacingCompacto do tokens.ts. */
@media (max-width: 1199px), (max-height: 719px) {
  :root {
    --vinculoo-spacing-xs: 4px;
    --vinculoo-spacing-sm: 8px;
    --vinculoo-spacing-md: 8px;
    --vinculoo-spacing-lg: 12px;
    --vinculoo-spacing-xl: 16px;
    --vinculoo-spacing-xxl: 24px;
    --vinculoo-spacing-xxxl: 32px;
  }
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--vinculoo-background);
  color: var(--vinculoo-text-primary);
  font-family: var(--vinculoo-font-sans);
  font-size: var(--vinculoo-type-body);
  font-weight: 500;
  line-height: var(--portal-lh-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: var(--portal-lh-titulo);
  color: var(--vinculoo-text-primary);
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--vinculoo-type-h1);
  font-weight: 700;
}

h2 {
  font-size: var(--vinculoo-type-h2);
  font-weight: 600;
}

h3 {
  font-size: var(--vinculoo-type-h3);
  font-weight: 600;
}

h4 {
  font-size: var(--vinculoo-type-body);
  font-weight: 600;
}

p {
  margin: 0;
}

p + p,
.texto > * + * {
  margin-top: var(--vinculoo-spacing-sm);
}

a {
  color: var(--vinculoo-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--vinculoo-primary-hover);
}

ul,
ol {
  margin: 0;
  padding-left: var(--vinculoo-spacing-xl);
}

.texto li + li {
  margin-top: var(--vinculoo-spacing-xs);
}

.texto h2,
.texto h3 {
  margin-top: var(--vinculoo-spacing-xl);
  scroll-margin-top: calc(var(--portal-altura-topo) + var(--vinculoo-spacing-lg));
}

.texto h2:first-child,
.texto h3:first-child {
  margin-top: 0;
}

strong {
  font-weight: 700;
}

code,
pre {
  font-family: var(--portal-font-mono);
}

code {
  font-size: 0.92em;
  background: var(--vinculoo-neutral-50);
  border-radius: var(--vinculoo-radius-xs);
  padding: 1px var(--vinculoo-spacing-xs);
  overflow-wrap: anywhere;
}

/* Bloco de código no azul-escuro da marca (blue-900, a cor do texto principal) com o texto em
   neutral-0: o único elemento escuro da página, para o comando e o JSON se destacarem do resto. */
pre {
  margin: 0;
  padding: var(--vinculoo-spacing-md) var(--vinculoo-spacing-lg);
  background: var(--vinculoo-blue-900);
  color: var(--vinculoo-neutral-0);
  border-radius: var(--vinculoo-radius-sm);
  font-size: var(--vinculoo-type-label);
  line-height: var(--portal-lh-corpo);
  overflow: auto;
  tab-size: 2;
}

pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* Realce do JSON sobre o fundo escuro, com as cores da marca (todas acima de 8:1): só leitura,
   nenhuma informação depende da cor. */
.json-chave {
  color: var(--vinculoo-neutral-0);
  font-weight: 600;
}

.json-texto {
  color: var(--vinculoo-yellow-light);
}

.json-numero {
  color: var(--vinculoo-blue-100);
}

.json-literal {
  color: var(--vinculoo-neutral-200);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* Link "pular para o conteúdo": invisível até receber foco (teclado). */
.pular {
  position: absolute;
  left: var(--vinculoo-spacing-lg);
  top: var(--vinculoo-spacing-sm);
  z-index: 100;
  padding: var(--vinculoo-spacing-sm) var(--vinculoo-spacing-md);
  background: var(--vinculoo-primary);
  color: var(--vinculoo-text-on-primary);
  border-radius: var(--vinculoo-radius-sm);
  font-size: var(--vinculoo-type-label);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.pular:focus {
  transform: none;
}

/* ---------- Botões (DS §6: primary · secondary · subtle; sm 32 · md 40) ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vinculoo-spacing-sm);
  min-height: 40px;
  padding: 0 var(--vinculoo-spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--vinculoo-radius-sm);
  background: transparent;
  color: var(--vinculoo-text-primary);
  font: inherit;
  font-size: var(--vinculoo-type-label);
  font-weight: 600;
  line-height: var(--portal-lh-label);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.botao svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: currentColor;
}

.botao-primario {
  background: var(--vinculoo-primary);
  color: var(--vinculoo-text-on-primary);
}

.botao-primario:hover {
  background: var(--vinculoo-primary-hover);
  color: var(--vinculoo-text-on-primary);
}

.botao-secundario {
  border-color: var(--vinculoo-border);
}

.botao-secundario:hover,
.botao-sutil:hover {
  background: var(--vinculoo-neutral-50);
  color: var(--vinculoo-text-primary);
}

.botao-sutil {
  color: var(--vinculoo-text-secondary);
}

.botao-pequeno {
  min-height: 32px;
  padding: 0 var(--vinculoo-spacing-md);
}

/* Toque mínimo de 44px (regra 4) sem engordar o desenho de 32px: a área extra é transparente. */
.botao-pequeno::before {
  content: '';
  position: absolute;
  inset: -6px 0;
}

.botao-pequeno {
  position: relative;
}

/* ---------- Pílulas (Tag do DS §6: raio pill, fundo suave + texto escuro, AA) ---------- */

.pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--vinculoo-spacing-xs);
  padding: var(--vinculoo-spacing-xs) var(--vinculoo-spacing-sm);
  border-radius: var(--vinculoo-radius-pill);
  background: var(--vinculoo-neutral-50);
  color: var(--vinculoo-text-secondary);
  font-size: var(--vinculoo-type-small);
  font-weight: 600;
  line-height: var(--portal-lh-label);
  white-space: nowrap;
}

.pilula-primaria {
  background: var(--vinculoo-primary-light);
  color: var(--vinculoo-primary-hover);
}

.pilula-amarela {
  background: var(--vinculoo-yellow-pale);
  color: var(--vinculoo-on-yellow);
}

.pilula-sucesso {
  background: var(--vinculoo-success-soft);
  color: var(--vinculoo-green-700);
}

.pilula-alerta {
  background: var(--vinculoo-warning-soft);
  color: var(--vinculoo-red-700);
}

/* Método HTTP: uma cor por verbo, sempre com o nome escrito (nunca só a cor). */
.metodo {
  justify-content: center;
  min-width: var(--portal-largura-metodo);
  font-family: var(--portal-font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.metodo-get {
  background: var(--vinculoo-primary-light);
  color: var(--vinculoo-primary-hover);
}

.metodo-post {
  background: var(--vinculoo-success-soft);
  color: var(--vinculoo-green-700);
}

.metodo-delete {
  background: var(--vinculoo-warning-soft);
  color: var(--vinculoo-red-700);
}

.metodo-put,
.metodo-patch,
.metodo-webhook {
  background: var(--vinculoo-yellow-pale);
  color: var(--vinculoo-on-yellow);
}

/* ---------- Topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--vinculoo-surface);
  border-bottom: 1px solid var(--vinculoo-border);
}

.topo-interno {
  display: flex;
  align-items: center;
  gap: var(--vinculoo-spacing-md);
  min-height: var(--portal-altura-topo);
  padding: 0 var(--vinculoo-spacing-xl);
}

.marca {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--vinculoo-radius-xs);
}

.marca img {
  display: block;
  height: 28px;
  width: auto;
}

.topo-divisor {
  width: 1px;
  height: 24px;
  background: var(--vinculoo-border);
  flex-shrink: 0;
}

.topo-titulo {
  font-size: var(--vinculoo-type-body-lg);
  font-weight: 600;
  white-space: nowrap;
}

.topo-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--vinculoo-spacing-sm);
}

.botao-rotas {
  display: none;
}

/* ---------- Moldura: navegação + conteúdo ---------- */

.moldura {
  display: grid;
  grid-template-columns: var(--portal-largura-nav) minmax(0, 1fr);
  max-width: calc(var(--portal-largura-conteudo) + var(--portal-largura-nav) + 2 * var(--vinculoo-spacing-xxl));
  margin: 0 auto;
}

.nav {
  position: sticky;
  top: var(--portal-altura-topo);
  height: calc(100vh - var(--portal-altura-topo));
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--vinculoo-spacing-xl) var(--vinculoo-spacing-lg);
  border-right: 1px solid var(--vinculoo-border);
  background: var(--vinculoo-surface);
}

.nav-fundo {
  display: none;
}

.nav-grupo + .nav-grupo {
  margin-top: var(--vinculoo-spacing-xl);
}

.nav-grupo-titulo {
  margin: 0 0 var(--vinculoo-spacing-xs);
  padding: 0 var(--vinculoo-spacing-md);
  font-size: var(--vinculoo-type-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vinculoo-text-secondary);
}

.nav-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Item de navegação = item do menu lateral do web (`.item-menu`, web/src/styles/index.css):
   brilho radial amarelo que acende da esquerda no hover e no item atual, com o raio virando
   pílula. O amarelo é o `yellow` do tokens.ts com transparência. */
.nav-link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--vinculoo-spacing-sm);
  min-height: var(--vinculoo-touch-min);
  padding: var(--vinculoo-spacing-sm) var(--vinculoo-spacing-md);
  border-radius: var(--vinculoo-radius-xs);
  color: var(--vinculoo-neutral-700);
  font-size: var(--vinculoo-type-label);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: var(--portal-lh-label);
  text-decoration: none;
  transition: border-radius 0.3s ease-out, color 0.3s ease-out;
}

.nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    82.24% 160.67% at 0% 50%,
    color-mix(in srgb, var(--vinculoo-yellow) 50%, transparent) 14.54%,
    color-mix(in srgb, var(--vinculoo-yellow) 15%, transparent) 61.06%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.nav-link:hover,
.nav-link[aria-current] {
  border-radius: var(--portal-raio-menu);
  color: var(--vinculoo-blue-900);
}

.nav-link:hover::before,
.nav-link[aria-current]::before {
  opacity: 1;
}

.nav-link[aria-current] {
  font-weight: 600;
}

.nav-link .metodo {
  min-width: 0;
  width: 52px;
  padding: 2px var(--vinculoo-spacing-xs);
  font-size: 0.6875rem;
}

.nav-link code {
  background: transparent;
  padding: 0;
  font-size: var(--vinculoo-type-small);
  color: inherit;
}

.nav-caminho {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-resumo {
  font-size: var(--vinculoo-type-small);
  font-weight: 500;
  color: var(--vinculoo-text-secondary);
}

.nav-fechar {
  display: none;
}

/* ---------- Conteúdo ---------- */

.principal {
  min-width: 0;
}

.principal:focus {
  outline: none;
}

.principal-conteudo {
  padding: var(--vinculoo-spacing-xxl);
}

/* Faixa branca de cabeçalho de página (PageHeader do web): título à esquerda e a mascote do
   Início à direita, com os pés na borda de baixo da faixa. */
.faixa-pagina {
  background: var(--vinculoo-surface);
  border-bottom: 1px solid var(--vinculoo-border);
  padding: var(--vinculoo-spacing-xl) var(--vinculoo-spacing-xxl) 0;
}

.faixa-interno {
  max-width: var(--portal-largura-conteudo);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vinculoo-spacing-xl);
}

.faixa-interno .cabecalho-doc {
  min-width: 0;
  padding-bottom: var(--vinculoo-spacing-xl);
}

.mascote {
  display: block;
  height: var(--portal-altura-mascote);
  width: auto;
  flex-shrink: 0;
  margin-right: var(--vinculoo-spacing-xxl);
  object-fit: contain;
  object-position: bottom;
}

/* Números do contrato no desenho das estatísticas de lista do web (Estatistica): valor 16/700 em
   blue-700, rótulo pequeno em neutral-500, separador neutral-50 à direita. */
.estatisticas {
  list-style: none;
  margin: var(--vinculoo-spacing-lg) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--vinculoo-spacing-sm);
}

.estatistica {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-xs);
  padding: 0 var(--vinculoo-spacing-lg);
  border-right: 1px solid var(--vinculoo-neutral-50);
}

.estatistica:first-child {
  padding-left: 0;
}

.estatistica:last-child {
  border-right: 0;
}

.estatistica-valor {
  font-size: var(--vinculoo-type-body-lg);
  font-weight: 700;
  line-height: var(--portal-lh-corpo);
  color: var(--vinculoo-blue-700);
}

.estatistica-rotulo {
  font-size: var(--vinculoo-type-small);
  line-height: 1;
  color: var(--vinculoo-neutral-500);
  white-space: nowrap;
}

/* Selo amarelo com ícone: o badge do card de KPI e do cabeçalho de card do Início. */
.selo-amarelo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--vinculoo-radius-xs);
  background: var(--vinculoo-yellow-light);
  color: var(--vinculoo-text-primary);
}

.selo-amarelo svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.cartao-titulo {
  display: flex;
  align-items: center;
  gap: var(--vinculoo-spacing-sm);
}

.secao {
  scroll-margin-top: calc(var(--portal-altura-topo) + var(--vinculoo-spacing-lg));
}

.secao + .secao {
  margin-top: var(--vinculoo-spacing-xxxl);
}

.cabecalho-doc {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-md);
}

.cabecalho-doc .linha-versao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vinculoo-spacing-sm);
}

.resumo-doc {
  max-width: 48rem;
  color: var(--vinculoo-text-secondary);
  font-size: var(--vinculoo-type-body-lg);
}

/* Faixa de aviso (componente Aviso do web, tom "atenção"): gap 8, padding 12, raio 12,
   ícone 18, fundo pálido + contorno. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--vinculoo-spacing-sm);
  padding: var(--vinculoo-spacing-md);
  border: 1px solid var(--vinculoo-yellow-light);
  border-radius: var(--vinculoo-radius-md);
  background: var(--vinculoo-yellow-pale);
  font-size: var(--vinculoo-type-label);
  font-weight: 500;
  line-height: var(--portal-lh-label);
}

.aviso svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: var(--vinculoo-on-yellow);
}

.aviso strong {
  font-weight: 600;
}

.cartao {
  background: var(--vinculoo-surface);
  border: 1px solid var(--vinculoo-border);
  border-radius: var(--vinculoo-radius-md);
  padding: var(--vinculoo-spacing-lg);
}

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--vinculoo-spacing-lg);
  margin-top: var(--vinculoo-spacing-lg);
}

.cartao h2 {
  font-size: var(--vinculoo-type-h3);
}

.cartao .texto {
  margin-top: var(--vinculoo-spacing-sm);
  color: var(--vinculoo-text-secondary);
  font-size: var(--vinculoo-type-label);
}

.lista-enderecos {
  list-style: none;
  padding: 0;
  margin: var(--vinculoo-spacing-sm) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-sm);
}

.lista-enderecos li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lista-enderecos code {
  font-size: var(--vinculoo-type-label);
  width: fit-content;
}

.lista-enderecos span {
  color: var(--vinculoo-text-secondary);
  font-size: var(--vinculoo-type-label);
}

.intro-texto {
  margin-top: var(--vinculoo-spacing-xl);
  max-width: 48rem;
}

/* Título de seção com a divisória até a borda, como a linha de grupo das listas. */
.intro-texto h2 {
  display: flex;
  align-items: center;
  gap: var(--vinculoo-spacing-md);
}

.intro-texto h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--vinculoo-neutral-100);
}

.barra-grupos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vinculoo-spacing-md);
  margin-bottom: var(--vinculoo-spacing-lg);
}

.barra-grupos div {
  display: flex;
  gap: var(--vinculoo-spacing-sm);
}

.grupo-cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-sm);
  margin-bottom: var(--vinculoo-spacing-lg);
}

.grupo-cabecalho p {
  color: var(--vinculoo-text-secondary);
  padding-left: calc(24px + var(--vinculoo-spacing-md));
}

/* Linha de grupo das listas do web (GrupoColapsavel): título, contagem em pílula e divisória. */
.grupo-linha {
  display: flex;
  align-items: center;
  gap: var(--vinculoo-spacing-md);
}

.grupo-divisor {
  flex: 1;
  height: 1px;
  background: var(--vinculoo-neutral-100);
}

.lista-rotas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-md);
}

/* ---------- Rota (card expansível; <details> nativo para teclado e leitor de tela) ---------- */

.rota {
  background: var(--vinculoo-surface);
  border: 1px solid var(--vinculoo-border);
  border-radius: var(--vinculoo-radius-md);
  scroll-margin-top: calc(var(--portal-altura-topo) + var(--vinculoo-spacing-lg));
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Hover do card de lista (DS §6): borda amarela + sombra do token cardHover. */
.rota:has(> summary:hover) {
  border-color: var(--vinculoo-yellow);
  box-shadow: var(--vinculoo-shadow-card-hover);
}

.rota > summary {
  display: flex;
  align-items: center;
  gap: var(--vinculoo-spacing-md);
  min-height: var(--vinculoo-touch-min);
  padding: var(--vinculoo-spacing-md) var(--vinculoo-spacing-lg);
  border-radius: var(--vinculoo-radius-md);
  cursor: pointer;
  list-style: none;
}

.rota > summary::-webkit-details-marker {
  display: none;
}

.rota > summary:focus-visible {
  outline-offset: -2px;
}

.rota-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vinculoo-spacing-xs) var(--vinculoo-spacing-md);
  min-width: 0;
  flex: 1;
  font-size: var(--vinculoo-type-body-lg);
  font-weight: 600;
}

.rota-caminho {
  font-family: var(--portal-font-mono);
  font-size: var(--vinculoo-type-body);
  font-weight: 600;
  background: transparent;
  padding: 0;
}

.rota-caminho .parametro {
  color: var(--vinculoo-primary-hover);
}

.rota-resumo {
  font-size: var(--vinculoo-type-label);
  font-weight: 500;
  color: var(--vinculoo-text-secondary);
}

/* Caixa do chevron (GrupoColapsavel do web): gira 180° quando abre. */
.chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--vinculoo-neutral-100);
  border-radius: var(--vinculoo-radius-sm);
  background: var(--vinculoo-surface);
  color: var(--vinculoo-primary);
}

.chevron svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform 0.3s ease-out;
}

.rota[open] > summary .chevron svg {
  transform: rotate(180deg);
}

.rota-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-xl);
  padding: 0 var(--vinculoo-spacing-lg) var(--vinculoo-spacing-lg);
  border-top: 1px solid var(--vinculoo-border);
  padding-top: var(--vinculoo-spacing-lg);
  margin: 0 0 0 0;
}

.rota-corpo > .texto {
  max-width: 48rem;
}

.bloco {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-md);
}

.bloco-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vinculoo-spacing-sm);
}

.bloco-titulo h4 {
  font-size: var(--vinculoo-type-body-lg);
}

.bloco-nota {
  color: var(--vinculoo-text-secondary);
  font-size: var(--vinculoo-type-label);
}

/* ---------- Esquema em árvore ---------- */

.props {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--vinculoo-border);
  border-radius: var(--vinculoo-radius-sm);
  background: var(--vinculoo-surface);
}

.prop {
  padding: var(--vinculoo-spacing-md) var(--vinculoo-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-xs);
}

.prop + .prop {
  border-top: 1px solid var(--vinculoo-border);
}

.prop-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vinculoo-spacing-sm);
}

.prop-nome {
  font-size: var(--vinculoo-type-label);
  font-weight: 600;
  background: transparent;
  padding: 0;
  color: var(--vinculoo-text-primary);
}

.prop-tipo {
  font-size: var(--vinculoo-type-small);
  font-weight: 500;
  color: var(--vinculoo-text-secondary);
}

.prop-desc {
  color: var(--vinculoo-text-primary);
  font-size: var(--vinculoo-type-label);
  font-weight: 500;
  max-width: 48rem;
}

.prop-desc code {
  font-size: 0.95em;
}

.prop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vinculoo-spacing-xs) var(--vinculoo-spacing-lg);
  margin: 0;
  font-size: var(--vinculoo-type-small);
  color: var(--vinculoo-text-secondary);
}

.prop-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vinculoo-spacing-xs);
}

.prop-meta dt {
  font-weight: 600;
}

.prop-meta dt::after {
  content: ':';
}

.prop-meta dd {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--vinculoo-spacing-xs);
}

.prop-meta code {
  font-size: inherit;
}

.prop-aninhado {
  margin-top: var(--vinculoo-spacing-xs);
}

.prop-aninhado > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--vinculoo-spacing-xs);
  min-height: 32px;
  padding: 0 var(--vinculoo-spacing-sm) 0 var(--vinculoo-spacing-xs);
  border-radius: var(--vinculoo-radius-xs);
  color: var(--vinculoo-primary);
  font-size: var(--vinculoo-type-label);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.prop-aninhado > summary::-webkit-details-marker {
  display: none;
}

.prop-aninhado > summary:hover {
  background: var(--vinculoo-neutral-50);
  color: var(--vinculoo-primary-hover);
}

.prop-aninhado > summary svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.2s ease-out;
}

.prop-aninhado[open] > summary svg {
  transform: rotate(90deg);
}

.prop-aninhado > .props,
.prop-aninhado > .prop-folha {
  margin-top: var(--vinculoo-spacing-sm);
  margin-left: var(--vinculoo-spacing-sm);
  border-left: 2px solid var(--vinculoo-neutral-100);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}

.prop-aninhado > .props > .prop {
  padding-right: 0;
}

.esquema-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vinculoo-spacing-sm);
  font-size: var(--vinculoo-type-label);
  color: var(--vinculoo-text-secondary);
}

.esquema-cabecalho .texto {
  width: 100%;
  color: var(--vinculoo-text-primary);
  max-width: 48rem;
}

.prop-folha {
  padding: var(--vinculoo-spacing-md) var(--vinculoo-spacing-lg);
  border: 1px solid var(--vinculoo-border);
  border-radius: var(--vinculoo-radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-xs);
}

/* ---------- Abas (SegmentedControl do DS §7: ativo em amarelo-pálido e negrito) ---------- */

.abas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--vinculoo-spacing-xs);
  padding: var(--vinculoo-spacing-xs);
  border: 1px solid var(--vinculoo-border);
  border-radius: var(--vinculoo-radius-sm);
  background: var(--vinculoo-surface);
  max-width: 100%;
}

.aba {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--vinculoo-spacing-md);
  border: 0;
  border-radius: var(--vinculoo-radius-xs);
  background: transparent;
  color: var(--vinculoo-text-secondary);
  font: inherit;
  font-size: var(--vinculoo-type-label);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.aba:hover {
  background: var(--vinculoo-neutral-50);
  color: var(--vinculoo-text-primary);
}

.aba[aria-selected='true'] {
  background: var(--vinculoo-yellow-pale);
  color: var(--vinculoo-text-primary);
  font-weight: 600;
}

.painel-aba {
  margin-top: var(--vinculoo-spacing-md);
}

/* ---------- Respostas ---------- */

.lista-respostas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-md);
}

.resposta {
  border: 1px solid var(--vinculoo-border);
  border-radius: var(--vinculoo-radius-sm);
  padding: var(--vinculoo-spacing-md) var(--vinculoo-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-md);
}

.resposta-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vinculoo-spacing-sm) var(--vinculoo-spacing-md);
}

.resposta-linha .texto {
  flex: 1;
  min-width: 12rem;
  font-size: var(--vinculoo-type-label);
}

.status {
  font-family: var(--portal-font-mono);
  min-width: 48px;
  justify-content: center;
}

.cabecalhos-resposta {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-xs);
  font-size: var(--vinculoo-type-small);
  color: var(--vinculoo-text-secondary);
}

.cabecalhos-resposta code {
  font-size: inherit;
}

/* ---------- Bloco de código com botão de copiar ---------- */

.codigo {
  position: relative;
}

.codigo .botao-copiar {
  position: absolute;
  top: var(--vinculoo-spacing-sm);
  right: var(--vinculoo-spacing-sm);
  min-height: 32px;
  padding: 0 var(--vinculoo-spacing-sm);
  background: var(--vinculoo-surface);
  border-color: var(--vinculoo-border);
  font-size: var(--vinculoo-type-small);
}

.codigo pre {
  padding-right: calc(var(--vinculoo-spacing-md) + 5.5rem);
}

/* ---------- Estados e rodapé ---------- */

.estado {
  padding: var(--vinculoo-spacing-xl);
  color: var(--vinculoo-text-secondary);
}

.estado-erro {
  border: 1px solid var(--vinculoo-red-100);
  border-radius: var(--vinculoo-radius-md);
  background: var(--vinculoo-warning-soft);
  color: var(--vinculoo-red-700);
}

.rodape {
  border-top: 1px solid var(--vinculoo-border);
  background: var(--vinculoo-surface);
  padding: var(--vinculoo-spacing-xl) var(--vinculoo-spacing-xxl);
  color: var(--vinculoo-text-secondary);
  font-size: var(--vinculoo-type-small);
}

.rodape-interno {
  max-width: calc(var(--portal-largura-conteudo) + var(--portal-largura-nav) + 2 * var(--vinculoo-spacing-xxl));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vinculoo-spacing-sm) var(--vinculoo-spacing-xl);
}

.rodape-marca {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vinculoo-spacing-sm) var(--vinculoo-spacing-md);
}

.rodape-marca img {
  display: block;
  height: 20px;
  width: auto;
}

/* ---------- Celular e tablet: navegação recolhida numa gaveta ---------- */

@media (max-width: 960px) {
  :root {
    --portal-altura-topo: 56px;
  }

  .topo-interno {
    padding: 0 var(--vinculoo-spacing-lg);
  }

  .topo-titulo,
  .topo-divisor {
    display: none;
  }

  .botao-rotas {
    display: inline-flex;
    min-width: var(--vinculoo-touch-min);
    min-height: var(--vinculoo-touch-min);
    padding: 0 var(--vinculoo-spacing-md);
    margin-left: calc(-1 * var(--vinculoo-spacing-sm));
  }

  .moldura {
    display: block;
  }

  .nav {
    position: fixed;
    top: var(--portal-altura-topo);
    bottom: 0;
    left: 0;
    z-index: 30;
    width: min(320px, 86vw);
    height: auto;
    border-right: 1px solid var(--vinculoo-border);
    transform: translateX(-100%);
    visibility: hidden;
    /* Ao fechar, a visibilidade só muda depois do deslize; ao abrir, muda na hora, senão o
       foco não consegue entrar na gaveta enquanto ela ainda está "hidden". */
    transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
  }

  .nav[data-aberta='true'] {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease-out, visibility 0s;
  }

  .nav-fundo {
    display: block;
    position: fixed;
    inset: var(--portal-altura-topo) 0 0 0;
    z-index: 20;
    background: color-mix(in srgb, var(--vinculoo-blue-900) 40%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0s linear 0.2s;
  }

  .nav-fundo[data-aberta='true'] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s, visibility 0s;
  }

  .nav-fechar {
    display: inline-flex;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: var(--vinculoo-spacing-md);
  }

  .principal-conteudo {
    padding: var(--vinculoo-spacing-xl) var(--vinculoo-spacing-lg);
  }

  .faixa-pagina {
    padding: var(--vinculoo-spacing-xl) var(--vinculoo-spacing-lg) 0;
  }

  .mascote {
    display: none;
  }

  .rodape {
    padding: var(--vinculoo-spacing-xl) var(--vinculoo-spacing-lg);
  }

  .rota > summary {
    padding: var(--vinculoo-spacing-md);
  }

  .rota-corpo {
    padding-left: var(--vinculoo-spacing-md);
    padding-right: var(--vinculoo-spacing-md);
  }

  .prop,
  .resposta {
    padding-left: var(--vinculoo-spacing-md);
    padding-right: var(--vinculoo-spacing-md);
  }

  .codigo pre {
    padding-right: var(--vinculoo-spacing-md);
    padding-top: calc(var(--vinculoo-spacing-md) + 36px);
  }
}

@media (max-width: 480px) {
  .marca img {
    height: 24px;
  }

  .topo-acoes .botao span {
    display: none;
  }

  .topo-acoes .botao {
    min-width: var(--vinculoo-touch-min);
    padding: 0 var(--vinculoo-spacing-md);
  }
}

/* ---------- Movimento reduzido (DS §8) ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Impressão ---------- */

@media print {
  .topo,
  .nav,
  .nav-fundo,
  .botao-copiar,
  .barra-grupos,
  .pular {
    display: none !important;
  }

  .moldura {
    display: block;
  }

  .principal-conteudo {
    padding: 0;
  }

  .mascote {
    display: none;
  }

  pre {
    background: none;
    color: inherit;
    border: 1px solid var(--vinculoo-border);
  }

  .rota {
    break-inside: avoid;
  }
}

/* ---------- Login da documentação (entrar.html; api/src/docs-sessao.ts) ---------- */
/* Só tokens já copiados acima. A largura do cartão é medida de layout própria do portal. */

.entrar-pagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vinculoo-spacing-lg);
  box-sizing: border-box;
}

.entrar {
  width: 100%;
  max-width: 440px; /* medida de layout própria do portal */
}

.entrar-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-lg);
  padding: var(--vinculoo-spacing-xxl);
  background: var(--vinculoo-surface);
  border: 1px solid var(--vinculoo-border);
  border-radius: var(--vinculoo-radius-lg);
}

.entrar-logo {
  height: 28px;
  width: auto;
  align-self: flex-start;
}

.entrar-titulo {
  margin: 0;
  font-size: var(--vinculoo-type-h2);
  font-weight: 700;
  line-height: var(--portal-lh-titulo);
}

.entrar-texto,
.entrar-rodape {
  margin: 0;
  color: var(--vinculoo-text-secondary);
}

.entrar-rodape {
  font-size: var(--vinculoo-type-small);
}

.entrar-aviso {
  margin: 0;
  padding: var(--vinculoo-spacing-md) var(--vinculoo-spacing-lg);
  border-radius: var(--vinculoo-radius-sm);
  background: var(--vinculoo-primary-light);
  color: var(--vinculoo-text-primary);
  font-size: var(--vinculoo-type-label);
}

.entrar-aviso-erro {
  background: var(--vinculoo-warning-soft);
  color: var(--vinculoo-red-700);
}

.entrar-form {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-lg);
}

.entrar-campo {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-xs);
}

.entrar-campo label {
  font-size: var(--vinculoo-type-label);
  font-weight: 600;
}

.entrar-campo input {
  min-height: var(--vinculoo-touch-min);
  padding: 0 var(--vinculoo-spacing-md);
  border: 1px solid var(--vinculoo-border);
  border-radius: var(--vinculoo-radius-sm);
  background: var(--vinculoo-surface);
  color: var(--vinculoo-text-primary);
  font: inherit;
  font-size: var(--vinculoo-type-body);
}

/* O código: números grandes e espaçados, fáceis de conferir com o e-mail. */
#codigo {
  font-family: var(--portal-font-mono);
  font-size: var(--vinculoo-type-h2);
  letter-spacing: 0.3em;
}

.entrar-etapa {
  display: flex;
  flex-direction: column;
  gap: var(--vinculoo-spacing-lg);
}

.entrar-etapa[hidden] {
  display: none;
}

.entrar-link {
  align-self: flex-start;
  min-height: var(--vinculoo-touch-min);
  display: inline-flex;
  align-items: center;
  color: var(--vinculoo-primary);
  font-size: var(--vinculoo-type-label);
  font-weight: 600;
}

.entrar-campo input:focus-visible {
  outline: 2px solid var(--vinculoo-primary);
  outline-offset: 1px;
  border-color: var(--vinculoo-primary);
}

.entrar-botao {
  min-height: var(--vinculoo-touch-min);
}

/* Quem está logado, no topo do portal (preenchido por portal.js a partir de /docs/sessao). */
.topo-sessao {
  color: var(--vinculoo-text-secondary);
  font-size: var(--vinculoo-type-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px; /* medida de layout própria do portal */
}

.topo-sair {
  margin: 0;
}

@media (max-width: 720px) {
  .topo-sessao {
    display: none;
  }
}