/* Public documentation — the same palette as the product (dashboard and
   checkout), so the integrator does not feel they switched companies when
   opening the docs.

   THE COLORS COME FROM THE BRAND PACK. The build (scripts/build-docs-site.mjs)
   injects into every page a `:root{--background:…;--accent:…}` with the
   `theme.tokens` of brand.json, with the SAME variable name the dashboard uses
   (apps/dashboard/src/app/layout.tsx). This file is the same for every brand: it
   only translates the tokens to the site names and derives, with color-mix, what
   the pack did not bring. No literal color here — scripts/docs-site/check-marca.mjs
   fails if one appears (a fixed color is one brand's color inside another). */

:root {
  /* Required tokens of the pack (BRAND_REQUIRED_TOKENS in packages/common/src/brand/schema.ts). */
  --fundo: var(--background);
  --texto: var(--foreground);
  --acento: var(--accent);
  --sobre-acento: var(--on-accent);
  --raio: var(--radius);
  /* Optional: the pack token when it exists; otherwise derived from the
     required ones (--fundo-2 with the same math as the dashboard's --popover:
     background + 5% of the text). */
  --fundo-2: var(--popover, color-mix(in srgb, var(--foreground) 5%, var(--background)));
  --texto-2: var(--secondary-foreground, color-mix(in srgb, var(--foreground) 70%, var(--background)));
  /* Code block text: between the main and the secondary text. */
  --texto-codigo: color-mix(in srgb, var(--texto) 80%, var(--texto-2));
  /* Borders and translucent surfaces come from the text, not from white: they
     follow a light-background pack. */
  --borda: color-mix(in srgb, var(--texto) 8%, transparent);
  --borda-forte: color-mix(in srgb, var(--texto) 14%, transparent);
  --largura-lateral: 264px;
  --largura-sumario: 220px;
  --altura-topo: 60px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-topo) + 16px); }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.7 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

.pular {
  position: absolute; left: -9999px;
  background: var(--acento); color: var(--sobre-acento); padding: 10px 16px; border-radius: calc(var(--raio) - 2px); font-weight: 700;
}
.pular:focus { left: 12px; top: 12px; z-index: 100; }

/* ---- top ----------------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: var(--altura-topo);
  padding: 0 clamp(16px, 3vw, 28px);
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca img { width: 28px; height: 28px; object-fit: contain; }
.marca span { font-weight: 800; letter-spacing: 0.28em; font-size: 14px; }
.marca em {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  border-radius: 999px; padding: 2px 8px;
}
/* Language selector. Sits at the top, right of the brand: whoever lands on an
   English page must find the switch without hunting. */
.idiomas { display: flex; gap: 2px; margin-left: auto; padding: 2px; background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 999px; }
.idioma {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; color: var(--texto-2);
}
.idioma:hover { color: var(--texto); text-decoration: none; }
.idioma.ativo { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
/* Integration | Manual: same design as the language selector, glued to the brand. */
.idiomas.secoes-site { margin-left: 16px; }

.botao-topo {
  margin-left: 14px; font-size: 13px; font-weight: 700; color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 999px; padding: 7px 15px;
}
.botao-topo:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.alternar-menu {
  display: none; margin-left: auto;
  background: transparent; color: var(--texto); font: inherit; font-size: 13px; font-weight: 700;
  border: 1px solid var(--borda-forte); border-radius: 999px; padding: 7px 14px; cursor: pointer;
}

/* ---- structure ----------------------------------------------------------- */
.corpo {
  display: grid;
  grid-template-columns: var(--largura-lateral) minmax(0, 1fr) var(--largura-sumario);
  gap: clamp(20px, 3vw, 44px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 28px);
  align-items: start;
}

.lateral {
  position: sticky; top: var(--altura-topo);
  max-height: calc(100vh - var(--altura-topo));
  overflow-y: auto;
  padding: 28px 8px 48px 0;
  border-right: 1px solid var(--borda);
}
.busca {
  width: 100%; margin-bottom: 20px;
  background: var(--fundo-2); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 9px 12px; font: inherit; font-size: 13px;
}
.busca:focus { outline: none; border-color: var(--acento); }
.busca::placeholder { color: var(--texto-2); }

.grupo-nav { margin-bottom: 22px; }
.grupo-nav[hidden] { display: none; }
.titulo-nav {
  margin: 0 0 8px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2);
}
.lateral ul, .sumario ul { list-style: none; margin: 0; padding: 0; }
.lateral li a {
  display: block; padding: 6px 10px; border-radius: calc(var(--raio) - 2px);
  font-size: 14px; color: var(--texto-2); border-left: 2px solid transparent;
}
.lateral li a:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 4%, transparent); text-decoration: none; }
.lateral li a.ativo {
  color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, transparent); border-left-color: var(--acento); font-weight: 700;
}
.lateral li[hidden] { display: none; }

.conteudo { min-width: 0; padding: 32px 0 88px; }

/* Warning for a page still in English. Must be visible WITHOUT being an alarm:
   it is our debt, not the reader's mistake — and muting the language switch would
   make them think they lost their train of thought. */
.aviso-traducao {
  max-width: 780px; margin: 0 0 28px;
  padding: 13px 16px; border-radius: var(--raio);
  border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
  background: color-mix(in srgb, var(--acento) 7%, transparent);
  font-size: 13.5px; line-height: 1.6; color: var(--texto-2);
}
.aviso-traducao p { margin: 0; }
.aviso-traducao strong { color: var(--texto); }

.sumario {
  position: sticky; top: var(--altura-topo);
  max-height: calc(100vh - var(--altura-topo));
  overflow-y: auto; padding: 32px 0 48px;
}
.sumario li a { display: block; padding: 4px 0; font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.sumario li a:hover { color: var(--acento); text-decoration: none; }
.sumario li.n3 { padding-left: 12px; }
.sumario li a.ativo { color: var(--acento); font-weight: 700; }

/* ---- prose --------------------------------------------------------------- */
.prosa { max-width: 780px; }
.prosa h1 {
  margin: 0 0 20px; font-size: clamp(28px, 4vw, 40px); font-weight: 800;
  line-height: 1.15; letter-spacing: -0.02em; color: var(--texto);
}
.prosa h2 {
  margin: 44px 0 12px; padding-top: 16px; border-top: 1px solid var(--borda);
  font-size: 24px; font-weight: 800; color: var(--texto); letter-spacing: -0.01em;
}
.prosa h3 { margin: 30px 0 10px; font-size: 18px; font-weight: 700; color: var(--texto); }
.prosa h4 { margin: 22px 0 8px; font-size: 15px; font-weight: 700; color: var(--texto); }
.prosa p { margin: 14px 0; color: var(--texto-2); }
.prosa strong { color: var(--texto); font-weight: 700; }
.prosa ul, .prosa ol { margin: 14px 0; padding-left: 22px; color: var(--texto-2); }
.prosa li { margin: 6px 0; }
.prosa li::marker { color: var(--acento); }
.prosa hr { margin: 40px 0; border: 0; border-top: 1px solid var(--borda); }

.prosa a.anchor {
  float: left; margin-left: -22px; width: 22px;
  color: var(--texto-2); opacity: 0; font-weight: 400; text-decoration: none;
}
.prosa h2:hover .anchor, .prosa h3:hover .anchor, .anchor:focus { opacity: 1; }

.prosa :not(pre) > code {
  background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--acento);
  border-radius: calc(var(--raio) / 2); padding: 2px 6px; font-size: 0.88em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

blockquote {
  margin: 20px 0; padding: 14px 18px;
  border-left: 3px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 6%, transparent);
  border-radius: 0 var(--raio) var(--raio) 0;
}
blockquote p { margin: 6px 0; color: var(--texto); }
blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }

/* ---- code ---------------------------------------------------------------- */
.bloco-codigo {
  position: relative; margin: 20px 0;
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: calc(var(--raio) + 2px); overflow: hidden;
}
.bloco-codigo figcaption {
  padding: 7px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2);
  background: color-mix(in srgb, var(--texto) 3%, transparent); border-bottom: 1px solid var(--borda);
}
.bloco-codigo pre { margin: 0; padding: 16px; overflow-x: auto; }
.bloco-codigo code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.65; color: var(--texto-codigo); white-space: pre;
}
.copiar {
  position: absolute; top: 6px; right: 8px;
  background: color-mix(in srgb, var(--texto) 6%, transparent); color: var(--texto-2);
  border: 1px solid var(--borda); border-radius: calc(var(--raio) - 3px);
  padding: 4px 10px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  opacity: 0; transition: opacity 0.15s;
}
.bloco-codigo:hover .copiar, .copiar:focus { opacity: 1; }
.copiar:hover { color: var(--acento); border-color: var(--acento); }

/* ---- tables -------------------------------------------------------------- */
.rolagem-tabela { margin: 20px 0; overflow-x: auto; border: 1px solid var(--borda); border-radius: calc(var(--raio) + 2px); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; }
th { background: color-mix(in srgb, var(--texto) 3%, transparent); color: var(--texto); font-weight: 700; white-space: nowrap; }
td { color: var(--texto-2); border-top: 1px solid var(--borda); }

.rodape {
  max-width: 780px; margin-top: 56px; padding-top: 20px;
  border-top: 1px solid var(--borda); font-size: 13px; color: var(--texto-2);
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1120px) {
  .corpo { grid-template-columns: var(--largura-lateral) minmax(0, 1fr); }
  .sumario { display: none; }
}
@media (max-width: 820px) {
  .corpo { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .alternar-menu { display: inline-block; margin-left: 10px; }
  .botao-topo { display: none; }
  .idiomas { margin-left: auto; }
  .lateral {
    display: none; position: static; max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--borda); padding: 20px 0;
  }
  .lateral.aberta { display: block; }
  .prosa h1 { font-size: 28px; }
}