/* ═══════════════════════════════════════════════════════════════════════
   S1 · Páginas de lectura — E2 «Riel» (términos, privacidad, /privacy, /en, /agents y /para-agentes).
   La barra de la portada en su piel sólida (tier 2: raised + hairline, la píldora con la página actual en caja), fija
   arriba; debajo, un riel izquierdo con el índice de la página que marca dónde estás (caja raised que se desliza por
   transform, Tabs/Nav «Caja») y una columna de lectura compacta: título h1 30, la referencia de herramientas de /agents
   como tabla «Caja» a lo ancho y el código en una caja siempre oscura. En móvil el riel se vuelve una tira de fichas
   pegada arriba. Solo tokens --ds-* (ds.css); no depende de styles.css. Sin selector de tema: data-theme lo pone el
   guion del <head> desde localStorage['df-theme'] (dark de fábrica, D-013). reading.js solo añade el scrollspy: sin
   guion el índice es una lista de enlaces normal.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
}

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

:root {
  --lp-bar-h: calc(var(--ds-control-h) + 2 * var(--ds-space-3));
  /* Lo que tapa la barra fija: los saltos del índice, el del enlace «Saltar al contenido» y el foco al tabular hacia
     atrás caen por debajo de ella (en móvil, por debajo de la tira de fichas). */
  scroll-padding-top: calc(var(--lp-bar-h) + var(--ds-space-6));
  scrollbar-color: color-mix(in oklab, var(--ds-text) 26%, transparent) var(--ds-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Solo el salto del índice se desliza (reading.js pone lp-glide un momento al pulsar una entrada). El foco con Tab, el
   «Saltar al contenido» y los #hash llegan al instante: con el scroll suave global, un Tab dado durante la animación
   dejaba el foco fuera de la vista en WebKit. Con reduced-motion, nada se desliza. */
@media (prefers-reduced-motion: no-preference) {
  :root.lp-glide {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
}

body.lp-read {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

.lp-read ::selection {
  background: color-mix(in oklab, var(--ds-accent) 30%, transparent);
  color: var(--ds-text);
}

.lp-read :focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

.lp-skip {
  position: fixed;
  top: var(--ds-space-3);
  left: var(--ds-space-3);
  z-index: var(--ds-z-tooltip);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  background: var(--ds-cta);
  color: var(--ds-cta-fg);
  font-size: var(--ds-text-ui);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--ds-space-6)));
  transition: transform var(--ds-dur-fast) var(--ds-ease-exit);
}

.lp-skip:focus-visible {
  transform: none;
  transition: transform var(--ds-dur-base) var(--ds-ease-enter);
}

/* ── Lockup «Bandas» en curvas (las de src/shared/ds/brand/assets/lockup*.svg; el color lo pone brand.css por tema) ── */
.lp-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text);
  text-decoration: none;
}

.lp-brand__lockup {
  display: block;
  flex: none;
  width: auto;
  height: 24px;
}

.lp-brand__word {
  fill: var(--ds-text);
}

.lp-brand__by {
  fill: var(--ds-text-muted);
}

.lp-brand__tag {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-muted);
  white-space: nowrap;
}

/* ── Barra: la de la portada en su piel sólida (raised + hairline), fija; píldora sunken con la página actual en caja ── */
.lp-bar {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-sticky);
  background: var(--ds-surface-raised);
  border-bottom: 1px solid var(--ds-border);
}

.lp-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ds-space-4);
  width: min(1240px, 100% - 2 * var(--ds-space-8));
  height: var(--lp-bar-h);
  margin-inline: auto;
}

.lp-bar__brand {
  justify-self: start;
}

.lp-pill {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-1);
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface-sunken);
  outline: 1px solid var(--ds-border-strong);
  outline-offset: -1px;
}

.lp-pill a {
  display: inline-flex;
  align-items: center;
  height: var(--ds-control-h-sm);
  padding: 0 var(--ds-space-4);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-ui);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ds-dur-fast) var(--ds-ease-enter);
}

.lp-pill a:hover {
  color: var(--ds-text);
}

.lp-pill a[aria-current="page"] {
  background: var(--ds-surface-raised);
  outline: 1px solid var(--ds-border-strong);
  outline-offset: -1px;
  color: var(--ds-text);
  font-weight: var(--ds-weight-semibold);
}

/* El hairline de la página actual es un outline: el anillo de foco va después para no quedar tapado. */
.lp-pill a:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: var(--ds-focus-offset);
}

.lp-bar__actions {
  display: flex;
  justify-self: end;
  gap: var(--ds-space-2);
}

.lp-bar__actions a {
  text-decoration: none;
}

/* ── Documento: riel (índice) + columna de lectura; la referencia de herramientas usa todo el ancho de la columna ── */
.lp-docs {
  display: grid;
  grid-template-columns: [rail] 15rem [content] minmax(0, 1fr);
  column-gap: var(--ds-space-16);
  width: min(1240px, 100% - 2 * var(--ds-space-8));
  margin-inline: auto;
  padding-block: var(--ds-space-12) var(--ds-space-20);
}

.lp-rail {
  grid-column: rail;
  min-width: 0;
}

.lp-toc {
  position: sticky;
  top: calc(var(--lp-bar-h) + var(--ds-space-8));
  max-height: calc(100vh - var(--lp-bar-h) - var(--ds-space-12));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.lp-toc__list,
.lp-toc__sub {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-toc__sub {
  margin: 2px 0 var(--ds-space-1);
}

.lp-toc a {
  display: block;
  padding: 6px var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-ui);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-snug);
  color: var(--ds-text-muted);
  text-decoration: none;
  transition: color var(--ds-dur-fast) var(--ds-ease-enter), background-color var(--ds-dur-fast) var(--ds-ease-enter);
}

.lp-toc a:hover {
  background: var(--ds-surface-sunken);
  color: var(--ds-text);
}

.lp-toc a[aria-current="true"] {
  color: var(--ds-text);
  font-weight: var(--ds-weight-semibold);
}

.lp-toc a[aria-current="true"]:hover {
  background: transparent;
}

/* El índice tiene scroll propio (recorta lo que sale de su caja): el anillo de foco va por dentro del enlace. */
.lp-toc a:focus-visible {
  outline-offset: -2px;
}

.lp-toc__sub a {
  padding-left: var(--ds-space-6);
  font-size: var(--ds-text-sm);
}

.lp-toc .lp-num {
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}

/* El parámetro entre paréntesis salta de línea entero («(» no se separa de lo que abre). */
.lp-toc code {
  font-family: var(--ds-font-mono);
  font-size: 0.92em;
  white-space: nowrap;
}

/* Indicador único (Nav «Caja»: raised + hairline fuerte) que se desliza al activo: transform en 240 ms; la altura cambia sin transición. */
.lp-toc__ind {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 0;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised);
  outline: 1px solid var(--ds-border-strong);
  outline-offset: -1px;
  opacity: 0;
  pointer-events: none;
  transition: transform var(--ds-dur-base) var(--ds-ease-enter), opacity var(--ds-dur-base) var(--ds-ease-exit);
}

.lp-toc__ind.is-on {
  opacity: 1;
  transition: transform var(--ds-dur-base) var(--ds-ease-enter), opacity var(--ds-dur-base) var(--ds-ease-enter);
}

/* ── Columna de lectura ── */
.lp-doc {
  grid-column: content;
  min-width: 0;
}

.lp-doc > :not(.agents-tools) {
  max-width: 44rem;
}

.lp-doc__title {
  margin: 0;
  font-size: var(--ds-text-h1);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-h1);
  text-wrap: balance;
}

.lp-doc .lp-doc__meta {
  margin: var(--ds-space-3) 0 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}

.lp-doc .lp-doc__lede {
  margin: var(--ds-space-5) 0 var(--ds-space-10);
  font-size: var(--ds-text-lede);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

.lp-doc h2 {
  margin: var(--ds-space-12) 0 var(--ds-space-3);
  font-size: var(--ds-text-h2);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight);
  text-wrap: balance;
}

.lp-doc h2 .lp-num {
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}

.lp-doc h3 {
  margin: var(--ds-space-10) 0 var(--ds-space-3);
  font-size: var(--ds-text-h3);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight);
}

.lp-doc p {
  margin: 0 0 var(--ds-space-4);
}

.lp-doc strong {
  font-weight: var(--ds-weight-bold);
}

.lp-doc em {
  font-style: normal;
  font-weight: var(--ds-weight-semibold);
}

.lp-doc a {
  color: var(--ds-accent);
  font-weight: var(--ds-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--ds-accent) 45%, transparent);
  text-underline-offset: 3px;
  transition: color var(--ds-dur-fast) var(--ds-ease-enter), text-decoration-color var(--ds-dur-fast) var(--ds-ease-enter);
}

.lp-doc a:hover {
  color: var(--ds-accent-strong);
  text-decoration-color: currentColor;
}

.lp-doc ul:not([class]),
.lp-doc ol:not([class]) {
  display: grid;
  gap: var(--ds-space-2);
  margin: 0 0 var(--ds-space-5);
  padding-left: var(--ds-space-6);
}

.lp-doc ul:not([class]) {
  list-style: disc;
}

.lp-doc ol:not([class]) {
  list-style: decimal;
}

.lp-doc li::marker {
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Nota = Alert neutro «Caja» (raised + hairline fuerte, radio 10, UI 14); sus enlaces en accent-strong (AA sobre raised en dark). */
.lp-note {
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised);
  font-size: var(--ds-text-ui);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
}

.lp-doc .lp-note {
  margin: var(--ds-space-4) 0 var(--ds-space-6);
}

.lp-doc .lp-note a {
  color: var(--ds-accent-strong);
}

/* Código en línea: pozo con hairline. En bloque: caja siempre oscura (data-theme="dark" en el <pre>: los tokens del
   tema oscuro dentro, en los dos temas), JetBrains Mono. En móvil la URL parte línea en vez de esconder su final tras
   un scroll horizontal que el teclado no alcanza (con scroll, «?features=all» quedaba fuera de la vista). */
.lp-doc code {
  padding: 0.08em 0.35em;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  background: var(--ds-surface-sunken);
  font-family: var(--ds-font-mono);
  font-size: 0.86em;
  font-weight: var(--ds-weight-medium);
  overflow-wrap: anywhere;
}

.lp-code {
  margin: var(--ds-space-3) 0 var(--ds-space-6);
  padding: var(--ds-space-4) var(--ds-space-5);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-ui);
  line-height: var(--ds-leading-normal);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.lp-doc .lp-code code {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-accent-strong);
  font-size: inherit;
}

/* Referencia de herramientas de /agents = Table «Caja» (hairline, radio 14, filas por hairline, texto de tabla 13,5):
   nombre y efecto a la izquierda, título y descripción a la derecha, sin relleno (el texto muted queda sobre --ds-bg).
   Las clases agents-* son las que emite scripts/gen-tools-reference.mjs: esa región no se edita a mano (su --check la
   compara byte a byte), así que la tabla se arma sobre su marcado. Columna izquierda colgada (floats en el padding) para
   que el título siga en línea con su descripción, como en la maqueta. */
.agents-tools {
  --lp-ref-name: 13rem;
  margin: var(--ds-space-2) 0 var(--ds-space-8);
  padding: 0;
  list-style: none;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}

.agents-tools > li {
  display: flow-root;
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-3) calc(var(--ds-space-4) + var(--lp-ref-name) + var(--ds-space-5));
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-text-table);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
  /* Las descripciones traen tokens sin espacios (la cerca <<<UNTRUSTED_DATA_…>>>, nombres de tool): sin esto desbordan en móvil. */
  overflow-wrap: anywhere;
}

.agents-tools > li:first-child {
  border-top: 0;
}

.lp-doc .agents-tools > li > code,
.agents-tools > li > .agents-hint {
  float: left;
  clear: left;
  margin-left: calc(-1 * (var(--lp-ref-name) + var(--ds-space-5)));
}

.lp-doc .agents-tools > li > code {
  width: var(--lp-ref-name);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

.agents-tools > li > .agents-hint {
  margin-top: var(--ds-space-2);
}

.agents-tools b {
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
}

/* Efecto = Badge «Caja» (el mismo que .ds-badge: radio 6, xs semibold, tinte + hairline del tono): neutro para
   «read only», acento para «write», danger para «destructive». */
.agents-hint {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--ds-space-2);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-raised);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  line-height: 1;
  color: var(--ds-text-muted);
  white-space: nowrap;
}

.agents-hint--write {
  border-color: var(--ds-accent-tint);
  background: var(--ds-accent-tint);
  color: var(--ds-accent-strong);
}

.agents-hint--destructive {
  border-color: var(--ds-danger-tint);
  background: var(--ds-danger-tint);
  color: var(--ds-danger);
}

/* ── Pie: alineado con la columna de lectura ── */
.lp-foot {
  border-top: 1px solid var(--ds-border);
}

.lp-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3) var(--ds-space-6);
  width: min(1240px, 100% - 2 * var(--ds-space-8));
  margin-inline: auto;
  padding: var(--ds-space-8) 0 var(--ds-space-10) calc(15rem + var(--ds-space-16));
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

.lp-foot a {
  color: var(--ds-text);
  font-weight: var(--ds-weight-medium);
  text-decoration: none;
  transition: color var(--ds-dur-fast) var(--ds-ease-enter);
}

.lp-foot a:hover {
  color: var(--ds-accent-strong);
}

/* ── Móvil y tableta: la barra deja de ser fija y el riel pasa a una tira de fichas pegada arriba ── */
@media (max-width: 1023px) {
  :root {
    scroll-padding-top: calc(var(--ds-control-h-sm) + var(--ds-space-8));
  }

  .lp-bar {
    position: static;
  }

  .lp-docs {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding-top: 0;
  }

  .lp-rail {
    grid-column: 1;
    position: sticky;
    top: 0;
    z-index: var(--ds-z-sticky);
    background: var(--ds-bg);
    border-bottom: 1px solid var(--ds-border);
  }

  .lp-toc {
    position: static;
    max-height: none;
    padding: var(--ds-space-2) var(--ds-space-4);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-padding-inline: var(--ds-space-4);
  }

  .lp-toc::-webkit-scrollbar {
    display: none;
  }

  .lp-toc__list {
    display: flex;
    gap: var(--ds-space-1);
    width: max-content;
  }

  .lp-toc__sub,
  .lp-toc__ind {
    display: none;
  }

  .lp-toc a {
    padding: 6px var(--ds-space-3);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-text-sm);
    white-space: nowrap;
  }

  .lp-toc a[aria-current="true"],
  .lp-toc a[aria-current="true"]:hover {
    background: var(--ds-surface-raised);
    outline: 1px solid var(--ds-border-strong);
    outline-offset: -1px;
  }

  .lp-toc a:focus-visible,
  .lp-toc a[aria-current="true"]:focus-visible {
    outline: 2px solid var(--ds-focus);
    outline-offset: -2px;
  }

  .lp-doc {
    grid-column: 1;
    width: min(44rem, 100% - 2 * var(--ds-space-8));
    margin-inline: auto;
    padding-top: var(--ds-space-10);
  }

  .lp-foot__inner {
    padding-left: 0;
  }
}

/* Entre 721 y 880 px la píldora centrada en la página pisaba la marca (con «for agents»): se centra en el hueco libre. */
@media (max-width: 880px) {
  .lp-bar__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .lp-pill {
    justify-self: center;
  }
}

@media (max-width: 720px) {
  .lp-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--ds-space-2);
    width: calc(100% - 2 * var(--ds-space-4));
    height: auto;
    padding-block: var(--ds-space-3);
  }

  /* Si las páginas no caben en una fila (las cuatro de /para-agentes a 320–441 px), la píldora parte en dos en vez de
     esconder la última tras un scroll sin barra. Radio concéntrico (el de sus enlaces + su relleno): en una fila se ve
     igual que el radio completo; en dos, sus enlaces siguen su curva. */
  .lp-pill {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    flex-wrap: wrap;
    max-width: 100%;
    border-radius: calc(var(--ds-control-h-sm) / 2 + var(--ds-space-1));
  }

  .lp-pill a {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 var(--ds-space-3);
  }

  .lp-bar__actions {
    grid-column: 2;
    grid-row: 1;
  }

  .lp-doc,
  .lp-foot__inner {
    width: calc(100% - 2 * var(--ds-space-4));
  }

  /* La fila de la tabla se apila: nombre y efecto arriba (el efecto a la derecha; si no caben, baja), título y
     descripción debajo a todo el ancho. display: contents en <b> junta el título con su descripción en un mismo
     bloque (el texto suelto de la fila no admite clase). */
  .agents-tools > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2) var(--ds-space-3);
    padding-left: var(--ds-space-4);
  }

  .lp-doc .agents-tools > li > code,
  .agents-tools > li > .agents-hint {
    float: none;
    margin: 0;
  }

  .lp-doc .agents-tools > li > code {
    width: auto;
    min-width: 0;
  }

  .agents-tools > li > .agents-hint {
    margin-left: auto;
  }

  .agents-tools > li > b {
    display: contents;
  }
}

/* Teléfono estrecho: la píldora ocupa el ancho y reparte sus páginas, sin cortar la última. */
@media (max-width: 400px) {
  .lp-pill {
    width: 100%;
  }

  .lp-pill a {
    padding: 0 var(--ds-space-2);
  }
}

/* Reduced-motion diseñado: el indicador del riel cambia de sitio sin desplazarse (solo su fundido de entrada), el salto
   al contenido es instantáneo (sin scroll suave, arriba) y el enlace «Saltar al contenido» aparece sin deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .lp-toc__ind,
  .lp-toc__ind.is-on {
    transition: opacity var(--ds-dur-base) var(--ds-ease-enter);
  }

  .lp-skip,
  .lp-skip:focus-visible {
    transition: none;
  }
}