/* Tema Sudrel da /docs: a barra do topo, as páginas-guia e o Stoplight
   Elements (referência). Tokens do site (sudrel.com.br): marinho #1B2A4A,
   sinal #C2703A, papel #FBFAF8; Archivo nos títulos, Inter no texto, IBM Plex
   Mono no código.

   O tema vem de `data-theme` no <html> ("light" ou "dark"), que é também o
   que o Elements lê. Quem decide é o script no <head> dos moldes: a escolha
   guardada pela pessoa, senão a preferência do sistema. */

:root {
  --sd-topo: 60px;
  --sd-raio: 8px;
  --sd-fonte: "Inter", ui-sans-serif, system-ui, sans-serif;
  --sd-fonte-titulo: "Archivo", var(--sd-fonte);
  --sd-fonte-codigo: "IBM Plex Mono", ui-monospace, monospace;
}

:root,
[data-theme="light"] {
  --sd-logo: #1b2a4a;
  --sd-fundo: #fbfaf8;
  --sd-fundo-2: #f2f1ed;
  --sd-fundo-3: #e9e6df;
  --sd-borda: #e7e4de;
  --sd-texto: #16181c;
  --sd-texto-2: #4a4945;
  --sd-texto-3: #6b6a66;
  --sd-acento: #1b2a4a;
  --sd-acento-fundo: #e3e8f1;
  --sd-link: #2f5596;
  --sd-botao: #1b2a4a;
  --sd-botao-texto: #ffffff;
  --sd-botao-hover: #16223c;
  --sd-topo-fundo: rgba(251, 250, 248, 0.9);
  --sd-codigo-fundo: #f2f1ed;
}

[data-theme="dark"] {
  --sd-logo: #f2f1ed;
  --sd-fundo: #131a2b;
  --sd-fundo-2: #1a2338;
  --sd-fundo-3: #222d46;
  --sd-borda: #26324d;
  --sd-texto: #f2f1ed;
  --sd-texto-2: #c6cede;
  --sd-texto-3: #8fa0c0;
  --sd-acento: #e29a63;
  --sd-acento-fundo: #2a2420;
  --sd-link: #8fb0ea;
  --sd-botao: #e29a63;
  --sd-botao-texto: #131a2b;
  --sd-botao-hover: #ebab7b;
  --sd-topo-fundo: rgba(19, 26, 43, 0.9);
  --sd-codigo-fundo: #0f1524;
}

*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sd-fundo);
  color: var(--sd-texto);
  font-family: var(--sd-fonte);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sd-link); }
:focus-visible { outline: 2px solid var(--sd-acento); outline-offset: 2px; }

/* ---------- Barra do topo (as duas páginas) ---------- */
.sd-top {
  position: sticky; top: 0; z-index: 50;
  height: var(--sd-topo);
  display: flex; align-items: center; gap: 28px;
  padding: 0 20px;
  background: var(--sd-topo-fundo);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--sd-borda);
}
.sd-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--sd-texto); }
.sd-word { font-family: var(--sd-fonte-titulo); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.sd-pill {
  font-family: var(--sd-fonte-codigo); font-size: 11px; font-weight: 500;
  padding: 2px 7px; border-radius: 999px;
  color: #c2703a; background: rgba(194, 112, 58, 0.12); border: 1px solid rgba(194, 112, 58, 0.28);
}
.sd-nav { display: flex; gap: 22px; }
.sd-nav a, .sd-link { color: var(--sd-texto-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.sd-nav a:hover, .sd-link:hover, .sd-nav a[aria-current="page"] { color: var(--sd-texto); }
.sd-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sd-idiomas { display: flex; gap: 2px; }
.sd-idiomas a {
  font-family: var(--sd-fonte-codigo); font-size: 12px; font-weight: 500;
  padding: 4px 6px; border-radius: 6px; text-decoration: none; color: var(--sd-texto-2);
}
.sd-idiomas a:hover { color: var(--sd-texto); background: var(--sd-fundo-2); }
.sd-idiomas a[aria-current="page"] { color: var(--sd-texto); background: var(--sd-fundo-3); }
.sd-tema {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--sd-borda); border-radius: var(--sd-raio); background: transparent;
  color: var(--sd-texto-2); cursor: pointer;
}
.sd-tema:hover { color: var(--sd-texto); background: var(--sd-fundo-2); }
[data-theme="light"] .sd-tema-sol, [data-theme="dark"] .sd-tema-lua { display: none; }
.sd-cta {
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--sd-raio);
  background: var(--sd-botao); color: var(--sd-botao-texto);
}
.sd-cta:hover { background: var(--sd-botao-hover); }

@media (max-width: 960px) { .sd-nav, .sd-link { display: none; } }
@media (max-width: 560px) {
  .sd-top { padding: 0 12px; gap: 12px; }
  .sd-actions { gap: 8px; }
  .sd-pill { display: none; }
  .sd-cta { padding: 7px 10px; font-size: 13px; }
}
@media (max-width: 374px) { .sd-cta { display: none; } }

/* ---------- Referência (Stoplight Elements) ---------- */
elements-api {
  display: block;
  height: calc(100vh - var(--sd-topo));
  /* As variáveis do Elements, com as cores da Sudrel. */
  --font-ui: var(--sd-fonte);
  --font-prose: var(--sd-fonte);
  --font-mono: var(--sd-fonte-codigo);
  --color-primary: var(--sd-acento);
  --color-primary-dark: var(--sd-botao-hover);
  --color-primary-darker: var(--sd-botao-hover);
  --color-primary-light: var(--sd-link);
  --color-primary-tint: var(--sd-acento-fundo);
}
[data-theme="light"] elements-api { --color-canvas-50: #f6f4f0; --color-canvas-100: #f2f1ed; --color-canvas-pure: #fbfaf8; }
[data-theme="dark"] elements-api { --color-canvas-pure: #131a2b; --color-canvas-50: #0f1524; --color-canvas-100: #1a2338; }

/* ---------- Páginas-guia ---------- */
.sd-guia {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: calc(100vh - var(--sd-topo));
}
.sd-menu {
  position: sticky; top: var(--sd-topo);
  height: calc(100vh - var(--sd-topo)); overflow-y: auto;
  padding: 20px 14px 40px;
  background: var(--sd-fundo-2);
  border-right: 1px solid var(--sd-borda);
}
.sd-menu-ref {
  display: block; margin: 0 0 18px; padding: 9px 12px;
  border: 1px solid var(--sd-borda); border-radius: var(--sd-raio);
  background: var(--sd-fundo); color: var(--sd-texto); font-weight: 600; font-size: 14px; text-decoration: none;
}
.sd-menu-ref:hover { border-color: var(--sd-acento); }
.sd-menu h2 {
  margin: 18px 0 6px; padding: 0 10px;
  font: 600 11px/1.4 var(--sd-fonte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sd-texto-3);
}
.sd-menu ul { list-style: none; margin: 0; padding: 0; }
.sd-menu li a {
  display: block; padding: 6px 10px; border-radius: 6px;
  color: var(--sd-texto-2); font-size: 14px; text-decoration: none;
}
.sd-menu li a:hover { background: var(--sd-fundo-3); color: var(--sd-texto); }
.sd-menu li a[aria-current="page"] { background: var(--sd-acento-fundo); color: var(--sd-acento); font-weight: 600; }

.sd-conteudo { padding: 40px 48px 80px; max-width: 920px; width: 100%; }
.sd-migalha { margin: 0 0 8px; font-size: 13px; color: var(--sd-texto-3); }
.sd-migalha a { color: var(--sd-texto-3); }
.sd-conteudo h1 {
  margin: 0 0 8px; font: 700 34px/1.15 var(--sd-fonte-titulo); letter-spacing: -0.02em;
}
.sd-resumo-guia { margin: 0 0 32px; font-size: 17px; color: var(--sd-texto-2); }

.sd-texto { font-size: 15.5px; line-height: 1.65; color: var(--sd-texto); }
.sd-texto h2, .sd-texto h3 { font-family: var(--sd-fonte-titulo); letter-spacing: -0.01em; scroll-margin-top: calc(var(--sd-topo) + 16px); }
.sd-texto h2 { margin: 40px 0 12px; font-size: 24px; }
.sd-texto h3 { margin: 32px 0 10px; font-size: 19px; }
.sd-texto p, .sd-texto ul, .sd-texto ol { margin: 0 0 14px; }
.sd-texto li { margin: 4px 0; }
.sd-texto code {
  font-family: var(--sd-fonte-codigo); font-size: 0.88em;
  padding: 1px 5px; border-radius: 4px; background: var(--sd-codigo-fundo); border: 1px solid var(--sd-borda);
}
.sd-texto pre {
  margin: 0 0 18px; padding: 14px 16px; overflow-x: auto;
  border-radius: var(--sd-raio); background: var(--sd-codigo-fundo); border: 1px solid var(--sd-borda);
  font-size: 13px; line-height: 1.55;
}
.sd-texto pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.sd-texto blockquote {
  margin: 0 0 18px; padding: 10px 16px;
  border-left: 3px solid #c2703a; background: var(--sd-fundo-2); border-radius: 0 var(--sd-raio) var(--sd-raio) 0;
}
.sd-texto blockquote p:last-child { margin-bottom: 0; }
/* Tabela larga rola dentro dela: nunca alarga a página no celular. */
.sd-texto table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.sd-texto th, .sd-texto td { padding: 8px 12px; border: 1px solid var(--sd-borda); text-align: left; vertical-align: top; }
.sd-texto th { background: var(--sd-fundo-2); font-weight: 600; }
.sd-texto td:first-child code { white-space: nowrap; }

.sd-rotas { margin: 40px 0 0; padding: 18px 20px; border: 1px solid var(--sd-borda); border-radius: var(--sd-raio); }
.sd-rotas h2 { margin: 0 0 10px; font: 600 16px/1.3 var(--sd-fonte-titulo); }
.sd-rotas ul { list-style: none; margin: 0; padding: 0; }
.sd-rotas li { margin: 6px 0; font-size: 14px; }
.sd-rotas a { text-decoration: none; }
.sd-metodo {
  display: inline-block; min-width: 54px; margin-right: 8px;
  font: 600 11px/1.6 var(--sd-fonte-codigo); text-transform: uppercase; color: var(--sd-texto-3);
}
.sd-caminho { font-family: var(--sd-fonte-codigo); font-size: 13px; color: var(--sd-texto); }

.sd-paginacao { display: flex; justify-content: space-between; gap: 16px; margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--sd-borda); }
.sd-paginacao a {
  display: block; flex: 1; padding: 12px 14px; border: 1px solid var(--sd-borda); border-radius: var(--sd-raio);
  text-decoration: none; color: var(--sd-texto); font-weight: 600; font-size: 14px;
}
.sd-paginacao a span { display: block; font-weight: 400; font-size: 12px; color: var(--sd-texto-3); }
.sd-paginacao a:last-child { text-align: right; }
.sd-paginacao a:hover { border-color: var(--sd-acento); }

/* Celular: o menu vira uma lista recolhida acima do texto. */
.sd-menu-celular { display: none; }
@media (max-width: 900px) {
  .sd-guia { grid-template-columns: minmax(0, 1fr); }
  .sd-menu { display: none; }
  .sd-menu-celular { display: block; margin: 0 0 20px; border: 1px solid var(--sd-borda); border-radius: var(--sd-raio); background: var(--sd-fundo-2); }
  .sd-menu-celular summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 14px; }
  .sd-menu-celular .sd-menu { display: block; position: static; height: auto; border: 0; padding: 0 10px 12px; }
  .sd-conteudo { padding: 24px 16px 60px; }
  .sd-conteudo h1 { font-size: 28px; }
  .sd-paginacao { flex-direction: column; }
  .sd-paginacao a:last-child { text-align: left; }
}

/* Resumo para quem não roda JavaScript (só dentro de <noscript>). */
.sd-resumo { max-width: 920px; margin: 0 auto; padding: 24px 16px; line-height: 1.6; }