/* ==========================================================================
   AvaliService — documentação da API
   Mesmos tokens do site (site-redesign/styles.css): papel técnico frio no claro,
   tinta no escuro, azul como cor de ação, laranja só na marca.
   Bricolage Grotesque (títulos) · Archivo (corpo) · Spline Sans Mono (rota, dado, código).
   ========================================================================== */

:root {
  --papel: #F3F5F7;
  --folha: #FFFFFF;
  --folha-2: #EDF0F4;
  --tinta: #16202B;
  --tinta-2: rgba(22, 32, 43, .70);
  --tinta-3: rgba(22, 32, 43, .66);   /* .52 dava 3.3:1 sobre o papel; .66 dá 5.2:1 */
  --azul: #123C8F;
  --azul-forte: #0E3072;
  --azul-fraco: rgba(18, 60, 143, .09);
  --laranja: #E8551F;                 /* marca: traço e ícone, nunca texto pequeno */
  --laranja-texto: #B03E15;           /* o mesmo laranja em versão que passa AA como texto */
  --verde: #1E7F4F;
  --ambar: #B97D0A;
  --ambar-texto: #8A5D00;             /* âmbar de texto/pastilha: AA sobre papel e com branco */
  --vermelho: #BF3B2B;
  --borda: rgba(22, 32, 43, .11);
  --borda-forte: rgba(22, 32, 43, .24);
  --sombra: 0 1px 2px rgba(22, 32, 43, .05), 0 8px 24px -14px rgba(22, 32, 43, .28);

  --display: 'Bricolage Grotesque', 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --topo-h: 56px;
  --nav-w: 268px;
  --painel-w: 396px;
  --raio: 9px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #111A23;
    --folha: #16202B;
    --folha-2: #1C2733;
    --tinta: #E9EDF2;
    --tinta-2: rgba(233, 237, 242, .72);
    --tinta-3: rgba(233, 237, 242, .58);
    --azul: #8FB3F5;
    --azul-forte: #AFC8FA;
    --azul-fraco: rgba(143, 179, 245, .13);
    --laranja: #F5834F;
    --laranja-texto: #F5834F;
    --verde: #4FBF87;
    --ambar: #E0AC48;
    --ambar-texto: #E0AC48;
    --vermelho: #F08273;
    --borda: rgba(233, 237, 242, .13);
    --borda-forte: rgba(233, 237, 242, .26);
    --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* `display` de classe vence o atributo `hidden` — sem isto a caixa de login nasce aberta. */
[hidden] { display: none !important; }

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

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--azul);
}

::selection { background: var(--azul); color: var(--folha); }
:focus-visible { outline: 2.5px solid var(--azul); outline-offset: 2px; border-radius: 3px; }

* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

a { color: var(--azul); text-decoration-color: color-mix(in srgb, var(--azul) 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

.pular {
  position: absolute; left: 12px; top: -120%; z-index: 200;
  background: var(--tinta); color: var(--papel);
  padding: .55rem 1rem; border-radius: 0 0 8px 8px; text-decoration: none; font-weight: 600;
}
.pular:focus { top: 0; }

/* ---------------------------------------------------------------- cabeçalho */
.topo {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: .65rem;
  height: var(--topo-h); padding: 0 1.1rem;
  background: color-mix(in srgb, var(--folha) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; }
.marca img { border-radius: 7px; display: block; }
.marca-nome { font-family: var(--display); font-size: 1.04rem; font-weight: 500; letter-spacing: -.015em; }
.marca-nome strong { font-weight: 700; }
.topo-risco { width: 1px; height: 20px; background: var(--borda); }
.topo-titulo { font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--azul); }
.topo-base { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--tinta-3); }
.topo-menu {
  display: none; align-items: center; gap: .4rem; margin-left: auto;
  font: inherit; font-size: .8rem; font-weight: 500; color: var(--tinta);
  background: var(--folha-2); border: 1px solid var(--borda); border-radius: 7px;
  padding: .34rem .6rem; cursor: pointer;
}

/* ---------------------------------------------------------------- moldura */
.quadro {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  align-items: start;
}

/* ---------------------------------------------------------------- navegação */
.nav {
  position: sticky; top: var(--topo-h);
  height: calc(100vh - var(--topo-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem .7rem 3rem;
  border-right: 1px solid var(--borda);
  background: var(--papel);
}
.busca { position: relative; margin-bottom: .9rem; }
.busca svg { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.busca input {
  width: 100%; font: inherit; font-size: .82rem; color: var(--tinta);
  background: var(--folha); border: 1px solid var(--borda-forte); border-radius: 7px;
  padding: .45rem .6rem .45rem 2rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.busca input::placeholder { color: var(--tinta-3); }
.busca input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fraco); outline: none; }
.busca input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.nav-grupo + .nav-grupo { margin-top: 1.05rem; }
.nav-grupo > h2 {
  font-family: var(--mono); font-size: .625rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinta-3);
  padding: 0 .55rem .3rem;
}
.nav-item {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .26rem .55rem; border-radius: 6px;
  color: var(--tinta-2); text-decoration: none; font-size: .815rem;
  transition: background-color .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--azul-fraco); color: var(--azul); }
.nav-item[aria-current="true"] { background: var(--azul-fraco); color: var(--azul); font-weight: 600; }
.nav-item .verbo { font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .06em; color: var(--tinta-3); flex: none; width: 2.2em; }
.nav-item[aria-current="true"] .verbo { color: var(--azul); }
.nav-item .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-vazio { padding: .8rem .55rem; font-size: .82rem; color: var(--tinta-3); }

/* ---------------------------------------------------------------- conteúdo */
.conteudo { padding: 0 0 6rem; min-width: 0; }
.carregando { padding: 4rem 2rem; color: var(--tinta-3); font-size: .9rem; }

.bloco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--painel-w);
  gap: 2.2rem;
  padding: 2.3rem 2.2rem;
  border-bottom: 1px solid var(--borda);
  scroll-margin-top: var(--topo-h);
}
.prosa { max-width: 68ch; min-width: 0; }

/* abertura */
.abertura h1 {
  font-family: var(--display); font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance;
  margin-bottom: .55rem;
}
.abertura .lede { font-size: 1.02rem; color: var(--tinta-2); max-width: 62ch; }

/* markdown */
.md h2 { font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; margin: 1.9rem 0 .5rem; text-wrap: balance; }
.md h3 { font-family: var(--display); font-size: .98rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
.md p { margin: .55rem 0; color: var(--tinta-2); }
.md ul, .md ol { margin: .55rem 0 .55rem 1.15rem; color: var(--tinta-2); }
.md li { margin: .2rem 0; }
.md li::marker { color: var(--tinta-3); }
.md strong { color: var(--tinta); font-weight: 600; }
.md code { font-family: var(--mono); font-size: .84em; background: var(--folha-2); border: 1px solid var(--borda); border-radius: 5px; padding: .06em .32em; color: var(--tinta); }
.md pre { margin: .7rem 0; background: var(--folha); border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem .9rem; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; font-size: .8rem; line-height: 1.55; }
.md table { border-collapse: collapse; margin: .7rem 0; font-size: .86rem; width: 100%; }
.md th, .md td { border-bottom: 1px solid var(--borda); padding: .38rem .7rem .38rem 0; text-align: left; vertical-align: top; color: var(--tinta-2); }
.md th { font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; }
.md td:first-child { white-space: nowrap; width: 1%; font-family: var(--mono); color: var(--tinta); }
.md > :first-child { margin-top: 0; }

/* cabeçalho do endpoint */
.endpoint-topo { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .45rem; }
.secao-nome { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-3); }
.endpoint h2.titulo { font-family: var(--display); font-size: 1.36rem; font-weight: 700; letter-spacing: -.024em; line-height: 1.2; margin: 0 0 .5rem; text-wrap: balance; }

.rota {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--folha); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: .4rem .55rem; margin-bottom: .9rem;
  font-family: var(--mono); font-size: .8rem;
}
.rota .verbo {
  font-size: .64rem; font-weight: 600; letter-spacing: .07em;
  padding: .16rem .4rem; border-radius: 5px; color: var(--folha); background: var(--azul);
}
.rota .verbo[data-verbo="get"] { background: var(--verde); }
.rota .verbo[data-verbo="put"] { background: var(--ambar); }
.rota .verbo[data-verbo="delete"] { background: var(--vermelho); }
@media (prefers-color-scheme: dark) { .rota .verbo { color: #0D141C; } }
.rota .caminho { color: var(--tinta); word-break: break-all; }
.rota .copiar { margin-left: auto; }

.rotulo-campo {
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinta-3);
  margin: 1.5rem 0 .4rem;
}

/* parâmetros */
.params { border-top: 1px solid var(--borda); }
.param { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); gap: .3rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--borda); }
.param dt { font-family: var(--mono); font-size: .82rem; color: var(--tinta); word-break: break-word; }
.param .marca-obrig { display: block; font-family: var(--sans); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--laranja-texto); margin-top: .1rem; }
.param .opcional { display: block; font-family: var(--sans); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-top: .1rem; }
.param dd { font-size: .86rem; color: var(--tinta-2); }
.param dd .exemplo { display: block; margin-top: .3rem; font-family: var(--mono); font-size: .76rem; color: var(--tinta-3); }
.param dd .exemplo b { font-weight: 500; color: var(--tinta-2); }

/* respostas */
.respostas { display: grid; gap: .1rem; }
.resposta-linha { display: grid; grid-template-columns: 4.2ch minmax(0, 1fr); gap: .9rem; padding: .42rem 0; border-bottom: 1px solid var(--borda); font-size: .86rem; }
.codigo { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.codigo[data-familia="2"] { color: var(--verde); }
.codigo[data-familia="4"] { color: var(--ambar-texto); }
.codigo[data-familia="5"] { color: var(--vermelho); }
.resposta-linha p { color: var(--tinta-2); margin: 0; }

/* ---------------------------------------------------------------- painel */
.painel { position: sticky; top: calc(var(--topo-h) + 1.4rem); min-width: 0; }
.cartao { background: var(--folha); border: 1px solid var(--borda); border-radius: 11px; box-shadow: var(--sombra); overflow: hidden; }
.cartao + .cartao { margin-top: .85rem; }
.cartao-topo {
  display: flex; align-items: center; gap: .3rem;
  padding: .3rem .4rem; border-bottom: 1px solid var(--borda); background: var(--folha-2);
}
.cartao-titulo {
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinta-3); padding: .28rem .4rem;
}

.aba {
  font: inherit; font-size: .74rem; font-weight: 500; color: var(--tinta-2);
  background: none; border: 0; border-radius: 6px; padding: .28rem .5rem; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.aba:hover { background: var(--azul-fraco); color: var(--azul); }
.aba[aria-selected="true"] { background: var(--azul); color: var(--folha); }
@media (prefers-color-scheme: dark) { .aba[aria-selected="true"] { color: #0D141C; } }

.copiar {
  display: inline-flex; align-items: center; gap: .3rem;
  font: inherit; font-size: .7rem; font-family: var(--sans); color: var(--tinta-3);
  background: none; border: 1px solid transparent; border-radius: 6px; padding: .2rem .4rem; cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.copiar:hover { color: var(--azul); border-color: var(--borda); background: var(--folha); }
.copiar[data-feito="1"] { color: var(--verde); }

pre.codigo-bloco { margin: 0; padding: .75rem .85rem; overflow-x: auto; background: var(--folha); }
/* O painel tem 396 px e as URLs de exemplo são longas: quebrar é melhor que cortar.
   A indentação de continuação mantém a linha legível depois da quebra. */
pre.codigo-bloco code {
  font-family: var(--mono); font-size: .755rem; line-height: 1.6; color: var(--tinta);
  white-space: pre-wrap; overflow-wrap: anywhere;
  display: block; padding-left: 1.4em; text-indent: -1.4em;
}
.tok-url { color: var(--azul); }
.tok-txt { color: var(--verde); }
.tok-cmt { color: var(--tinta-3); }
.tok-fun { color: var(--laranja); }

/* testar */
.testar { padding: .8rem .85rem .9rem; display: grid; gap: .7rem; }
.campo { display: grid; gap: .25rem; }
.campo > label { font-size: .73rem; font-weight: 600; color: var(--tinta-2); display: flex; align-items: baseline; gap: .4rem; }
.campo > label .dica { font-weight: 400; font-size: .68rem; color: var(--tinta-3); }
.campo input {
  width: 100%; font-family: var(--mono); font-size: .78rem; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--borda-forte); border-radius: 7px; padding: .42rem .55rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input::placeholder { color: var(--tinta-3); font-family: var(--sans); }
.campo input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fraco); outline: none; }
.campo .elo {
  font: inherit; font-size: .68rem; color: var(--azul); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-left: auto;
}

.entrar { display: grid; gap: .45rem; padding: .6rem; border: 1px dashed var(--borda-forte); border-radius: 8px; background: var(--papel); }
.entrar p { font-size: .72rem; color: var(--tinta-3); margin: 0; }
.entrar input {
  width: 100%; font-family: var(--sans); font-size: .8rem; color: var(--tinta);
  background: var(--folha); border: 1px solid var(--borda-forte); border-radius: 7px; padding: .42rem .55rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.entrar input::placeholder { color: var(--tinta-3); }
.entrar input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fraco); outline: none; }
.entrar .acao { margin-top: .1rem; }

.acao {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  color: var(--folha); background: var(--azul); border: 1px solid var(--azul);
  border-radius: 8px; padding: .5rem .9rem; cursor: pointer; width: 100%;
  transition: background-color .14s ease, border-color .14s ease, transform .14s cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark) { .acao { color: #0D141C; } }
.acao:hover:not(:disabled) { background: var(--azul-forte); border-color: var(--azul-forte); }
.acao:active:not(:disabled) { transform: translateY(1px); }
.acao:disabled { opacity: .5; cursor: not-allowed; }
.acao.secundaria { color: var(--tinta); background: var(--folha-2); border-color: var(--borda-forte); }

.aviso-custo {
  display: flex; gap: .45rem; font-size: .71rem; line-height: 1.45; color: var(--tinta-3);
  border-top: 1px solid var(--borda); padding-top: .6rem;
}
.aviso-custo svg { flex: none; margin-top: .15rem; color: var(--laranja); }

/* resposta do teste */
.saida { border-top: 1px solid var(--borda); }
.saida-topo { display: flex; align-items: center; gap: .55rem; padding: .5rem .85rem; background: var(--folha-2); }
.pastilha {
  font-family: var(--mono); font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: .14rem .42rem; border-radius: 5px; color: var(--folha); background: var(--tinta-3);
}
.pastilha[data-familia="2"] { background: var(--verde); }
.pastilha[data-familia="4"] { background: var(--ambar-texto); }
.pastilha[data-familia="5"] { background: var(--vermelho); }
@media (prefers-color-scheme: dark) { .pastilha { color: #0D141C; } }
.saida-tempo { font-family: var(--mono); font-size: .7rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.saida-corpo { max-height: 340px; overflow: auto; }
.saida-corpo pre { margin: 0; padding: .7rem .85rem; }
.saida-corpo code { font-family: var(--mono); font-size: .735rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

.animar-saida { animation: surgir .38s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .animar-saida { animation: none; } }

/* JSON dobrável */
.json { font-family: var(--mono); font-size: .735rem; line-height: 1.55; }
.json-caixa { max-height: 420px; overflow: auto; }
.json details { margin: 0; }
.json summary { cursor: pointer; list-style: none; color: var(--tinta-2); }
.json summary::-webkit-details-marker { display: none; }
.json summary::before { content: '▸'; display: inline-block; width: 1em; color: var(--tinta-3); transition: transform .14s ease; }
.json details[open] > summary::before { transform: rotate(90deg); }
.json .filhos { padding-left: 1.05rem; border-left: 1px solid var(--borda); margin-left: .28rem; }
.json .chave { color: var(--azul); }
.json .txt { color: var(--verde); }
.json .num { color: var(--laranja); }
.json .bool, .json .nulo { color: var(--tinta-3); }
.json .resumo { color: var(--tinta-3); }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 1240px) {
  .bloco { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .painel { position: static; max-width: 640px; }
}
@media (max-width: 900px) {
  :root { --nav-w: 0px; }
  .quadro { grid-template-columns: minmax(0, 1fr); }
  .topo-titulo, .topo-risco, .topo-base { display: none; }
  .topo-menu { display: inline-flex; }
  .nav {
    position: fixed; top: var(--topo-h); left: 0; z-index: 55;
    width: min(320px, 86vw); height: calc(100vh - var(--topo-h));
    transform: translateX(-102%); transition: transform .26s cubic-bezier(.16, 1, .3, 1);
    box-shadow: var(--sombra);
  }
  .nav[data-aberta="1"] { transform: none; }
  @media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
  .bloco { padding: 1.7rem 1rem; }
  .abertura h1 { font-size: 1.7rem; }
}