@media(max-width:860px){.api-evidencia{position:relative;left:auto;top:auto;margin:-36px 0 0 16px}}
@media(max-width:600px){.api-preview{padding:18px 16px 12px}
.api-pedidos li{grid-template-columns:58px minmax(0,1fr) auto;gap:10px}
.api-pedidos code{font-size:12.5px}
.api-evidencia{width:auto;margin:14px 0 0}}
/* ═══ El bloque de la API (26-09-2026) ═══
   Walter: «demasiado simple», una lista sobre fondo liso. Ahora es una maqueta
   de la familia de la portada, armada con las MISMAS piezas de la hoja común
   (/design-system.css): la tarjeta (`sf-card`) con la sombra de la maqueta, la
   barra de la ventana (`sf-ventana`), los verbos en píldora (`sf-pill`: POST
   en el verde, PATCH en el ámbar, los colores de la referencia de la API) y el
   globo del registro de evidencia (`sf-card sf-flota` con sus `sf-evento`),
   que flota abajo como el del hero de la portada. Acá sólo va lo que es de
   esta página: la disposición, la letra de código (`--sf-mono`, la de la
   referencia de la API) y dónde flota el globo.
   ⚠ El 200 de cada fila es el de verdad: los cuatro pedidos contestan 200
   (src/http/openapi_v1.ts y los manejadores de src/http/routes/integracion.ts),
   no 201. */
.api-maqueta{position:relative}
.api-preview{padding:22px 24px 16px;color:var(--sf-ink);box-shadow:var(--sf-sombra-maqueta)}
.api-pedidos{margin:0;padding:0;list-style:none}
.api-pedidos li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--sf-line)}
.api-pedidos li:first-child{padding-top:0}
.api-pedidos .sf-pill{justify-content:center;font-family:var(--sf-mono);font-size:11px;font-weight:500;letter-spacing:.06em}
.api-pedidos code{font-family:var(--sf-mono);font-size:13.5px;font-weight:500;color:var(--sf-ink)}
.api-estado{font-family:var(--sf-mono);font-size:12px;font-weight:500;color:var(--sf-ok)}
.api-openapi{display:flex;align-items:center;gap:6px;width:fit-content;min-height:44px;margin:6px 0 0 auto;color:var(--brand,var(--sf-brand));font-size:14px;font-weight:600}
.api-openapi span{transition:transform .2s ease}
.api-openapi:hover span{transform:translate(2px,-2px)}
/* El globo monta sólo 36 px sobre el borde de abajo, a la izquierda, donde la
   fila del enlace está vacía: más arriba tapaba el cuarto pedido. Con una
   columna (≤ 860 px) va en el flujo, para que la banda lo contenga; en el
   teléfono, debajo y sin montar, como los globos de la portada. */
.api-evidencia{position:absolute;left:-28px;top:calc(100% - 36px);width:250px;color:var(--sf-ink)}
/* ⚠ 21-09-2026: los mismos hex de la paleta azul que retiró styles.css
   (#456bd1/#3154b5/#edf2ff) estaban repetidos acá a mano, no por variable —
   la mayoría ya quedaba pisada por design-system.css (mismo selector, cargado
   después), pero .source-notice y .article a no tenían ningún otro dueño y
   seguían mostrando azul de verdad. Se pasan todos a --brand/--brand-700/
   --brand-50 para no depender de que ninguna otra hoja los tape. Queda afuera
   a propósito #8d1977 (el foco del selector de idioma: no es este azul). El
   #274b9f de .api-preview, que ya estaba muerto, se fue el 26-09-2026 con la
   regla entera: el bloque de la API es ahora una maqueta de la hoja común. */
html{scroll-padding-top:100px}