/*
 * The knowledge base, inside the store theme.
 *
 * Everything is scoped under .kb because this markup lands in the middle of
 * somebody else's page: the storefront's header, footer and cart are around
 * it, and none of their styles should move because a tutorial loaded.
 */
.kb {
  --kb-navy: #0c1226;
  --kb-green: #05784a;
  --kb-ink: #101828;
  --kb-muted: #667085;
  --kb-line: #e4e7ec;
  --kb-soft: #f8f9fb;

  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 72px;
  color: var(--kb-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

.kb a { color: var(--kb-green); text-decoration: none; }
.kb a:hover { text-decoration: underline; }

.kb-crumbs { font-size: 13px; color: var(--kb-muted); margin-bottom: 24px; }
.kb-crumbs span { margin: 0 7px; }
.kb-crumbs [aria-current] { color: var(--kb-ink); }

.kb-hero { border-bottom: 1px solid var(--kb-line); padding-bottom: 22px; margin-bottom: 30px; }
.kb-hero h1 { font-size: 30px; line-height: 1.25; margin: 0 0 8px; color: var(--kb-navy); font-weight: 700; }
.kb-hero p { margin: 0; color: var(--kb-muted); font-size: 16px; }

/* Index ------------------------------------------------------------------ */
.kb-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kb-card { border: 1px solid var(--kb-line); border-radius: 12px; padding: 22px; background: #fff; }
.kb-card h2 { font-size: 17px; margin: 0 0 2px; }
.kb-card h2 a { color: var(--kb-navy); }
.kb-count { margin: 0 0 14px; font-size: 12px; color: var(--kb-muted); text-transform: uppercase; letter-spacing: .04em; }
.kb-card ul { list-style: none; margin: 0; padding: 0; }
.kb-card li { padding: 5px 0; font-size: 14px; }
.kb-more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; }

/* Category --------------------------------------------------------------- */
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list li { padding: 16px 0; border-bottom: 1px solid var(--kb-line); }
.kb-list li a { font-size: 16px; font-weight: 600; color: var(--kb-navy); }
.kb-list li p { margin: 4px 0 0; color: var(--kb-muted); font-size: 14px; }

/* Article ---------------------------------------------------------------- */
.kb-article-grid { display: grid; gap: 40px; grid-template-columns: 220px minmax(0, 1fr) 200px; align-items: start; }
.kb-side, .kb-toc { position: sticky; top: 20px; font-size: 13px; }
.kb-side-title { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--kb-muted); }
.kb-side ul, .kb-toc ul { list-style: none; margin: 0; padding: 0; }
.kb-side li, .kb-toc li { padding: 4px 0; }
.kb-side a, .kb-toc a { color: var(--kb-muted); }
.kb-side .is-current a { color: var(--kb-navy); font-weight: 600; }
.kb-toc .level-3 { padding-left: 12px; }

.kb-body { min-width: 0; }
.kb-body h1 { font-size: 28px; line-height: 1.25; margin: 0 0 6px; color: var(--kb-navy); font-weight: 700; }
.kb-meta { margin: 0 0 26px; font-size: 13px; color: var(--kb-muted); }
.kb-body h2 { font-size: 20px; margin: 34px 0 10px; color: var(--kb-navy); scroll-margin-top: 90px; }
.kb-body h3 { font-size: 16px; margin: 26px 0 8px; color: var(--kb-navy); scroll-margin-top: 90px; }
.kb-body p, .kb-body li { font-size: 15px; }
.kb-body img { max-width: 100%; height: auto; border: 1px solid var(--kb-line); border-radius: 8px; margin: 14px 0; display: block; }
.kb-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.kb-body th, .kb-body td { border: 1px solid var(--kb-line); padding: 8px 10px; text-align: left; }

.kb-notice {
  margin: 0 0 24px; padding: 10px 14px; border-left: 3px solid var(--kb-green);
  background: var(--kb-soft); font-size: 14px; color: var(--kb-muted);
}

/* Code — the reason the old markup had to go. Commands were tables of
   line numbers with one <code> per token; now they are one block you can
   select, copy and read on a phone. */
.kb-code { position: relative; margin: 18px 0; }
.kb-code pre {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  background: var(--kb-navy); border-radius: 10px;
}
.kb-code code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px; line-height: 1.6; color: #e6edf3; white-space: pre;
}
.kb-copy {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px;
  background: rgba(255, 255, 255, .08); color: #cdd5e0;
  font: inherit; font-size: 11px; cursor: pointer;
}
.kb-copy:hover { background: rgba(255, 255, 255, .16); color: #fff; }

@media (max-width: 1024px) {
  .kb-article-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kb-side, .kb-toc { position: static; }
}

/* Charts ------------------------------------------------------------------
   Inline SVG rather than an image: it stays sharp, it costs nothing to
   fetch, and the numbers in it are selectable text. One series, so no
   legend — the caption names it — and every plateau is directly labelled,
   which is also what makes the colour non-load-bearing. */
.kb-figura { margin: 22px 0; }
.kb-grafico { width: 100%; height: auto; display: block;
              font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.kb-figura figcaption { margin-top: 8px; font-size: 13px; color: var(--kb-muted); }

.kb-grid { stroke: #eaecf0; stroke-width: 1; }
.kb-eje-linea { stroke: #d0d5dd; stroke-width: 1; }
.kb-tick { stroke: #d0d5dd; stroke-width: 1; }
.kb-eje { fill: #667085; font-size: 12px; }
.kb-eje-titulo { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }

.kb-area { fill: #05784a; fill-opacity: .10; }
.kb-linea { fill: none; stroke: #05784a; stroke-width: 2;
            stroke-linejoin: round; stroke-linecap: round; }
.kb-valor { fill: #101828; font-size: 14px; font-weight: 600; }

.kb-hoy { stroke: #98a2b3; stroke-width: 1; stroke-dasharray: 3 3; }
.kb-hoy-txt { fill: #667085; font-size: 11px; }

/* No dark-mode block here on purpose. The storefront is light in every theme
   setting, so honouring prefers-color-scheme would paint a dark chart onto a
   white page — which is exactly what it did, for anyone whose OS asks for
   dark. The chart is light because the page it lives in is. */