/* ============================================================ /api-docs — mismo sistema visual que la landing y /como-funciona (misma paleta, misma tipografía, mismo header/footer/botones/pills/bandas/cierre, reutilizados tal cual porque este archivo se carga junto a landing.css y lleva "landing api-docs"). Acá solo viven las piezas nuevas: el layout de documentación a dos columnas, el índice sticky, y los componentes reutilizables de endpoint / bloque de código / tabla de parámetros. REGLA DE SCROLL: el root de esta página NUNCA lleva overflow-x:hidden — eso convertiría a body en contenedor de scroll y rompería el position:sticky del header y del índice lateral. Se usa overflow-x:clip, que recorta sin crear ese contenedor. ============================================================ */ :root:has(body.api-docs) { scroll-behavior: smooth; } body.api-docs { overflow-x: clip; } body.api-docs section[id] { scroll-margin-top: 108px; } /* ------------------------------------------------------------ Hero — grid de dos columnas alineado abajo, con tres datos duros a la derecha. ------------------------------------------------------------ */ .ad-hero-glow { position: absolute; top: -15%; right: -8%; width: 900px; height: 700px; background: radial-gradient(circle, rgba(0,107,187,0.12), transparent 68%); pointer-events: none; z-index: 0; } body.landing.api-docs .lp-hero-grid.ad-hero-grid { align-items: end; } body.landing.api-docs .ad-hero-copy h1 { font-size: clamp(34px, 5.2vw, 64px); letter-spacing: -0.042em; line-height: 0.99; } body.landing.api-docs .ad-hero-copy .lp-lead { max-width: 58ch; } .ad-hero-meta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .ad-meta-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--lp-line); border-radius: 999px; font-family: var(--lp-mono-font); font-size: 12.5px; } .ad-meta-key { color: var(--lp-mono); text-transform: uppercase; letter-spacing: 0.06em; } .ad-meta-sep { width: 1px; height: 14px; background: var(--lp-line-2); flex-shrink: 0; } .ad-meta-val { color: var(--lp-ink); font-weight: 500; } /* ------------------------------------------------------------ Layout de documentación — flex + wrap (no grid: con grid las columnas se apilan mal a anchos intermedios). El aside es sticky y flota a la izquierda; el main crece con todo el espacio restante y nunca baja de 460px de base antes de que el flex-wrap lo apile en móvil. ------------------------------------------------------------ */ .ad-layout { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 60px); align-items: flex-start; } .ad-aside { position: sticky; top: 96px; flex: 1 1 232px; max-width: 260px; min-width: 0; } .ad-main { flex: 999 1 min(100%, 460px); min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); } .ad-toc-list { display: flex; flex-direction: column; gap: 2px; } .ad-toc-link { display: grid; grid-template-columns: 5px 22px 1fr; align-items: center; gap: 8px; padding: 8px 0; text-decoration: none; } .ad-toc-marker { width: 5px; height: 5px; border-radius: 999px; background: transparent; transition: background 160ms ease; } .ad-toc-num { font-family: var(--lp-mono-font); font-size: 10.5px; color: var(--lp-accent); } .ad-toc-name { font-size: 13.5px; font-weight: 500; color: #3d4b5e; transition: color 160ms ease; } .ad-toc-link.is-active .ad-toc-marker { background: var(--lp-accent); } .ad-toc-link.is-active .ad-toc-name { font-weight: 600; color: var(--lp-ink); } .ad-toc-swagger { display: inline-flex; margin-top: 18px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--lp-line); font-size: 12.5px; font-weight: 500; color: var(--lp-body); text-decoration: none; transition: border-color 160ms ease; } .ad-toc-swagger:hover { border-color: var(--lp-ink); text-decoration: none; } body.landing.api-docs .ad-main h2.ad-h2 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.02em; line-height: 1.08; font-weight: 700; } .ad-section-lead { font-size: 15px; line-height: 1.65; color: var(--lp-body); max-width: 68ch; margin-top: 14px; } .ad-section-lead strong { color: var(--lp-ink); } /* ------------------------------------------------------------ Bloque de endpoint — el componente que se repite en toda la página. ------------------------------------------------------------ */ .ad-endpoint { border: 1px solid var(--lp-line); border-radius: 18px; overflow: hidden; } .ad-endpoint + .ad-endpoint { margin-top: 20px; } .ad-endpoint-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: var(--lp-band); border-bottom: 1px solid var(--lp-line-2); } .ad-method { font-family: var(--lp-mono-font); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 999px; flex-shrink: 0; } .ad-method-post { background: var(--lp-accent); color: #ffffff; } .ad-method-get { background: var(--lp-white); border: 1px solid #cdd6e2; color: var(--lp-ink); } .ad-path { font-family: var(--lp-mono-font); font-size: 14.5px; color: var(--lp-ink); overflow-x: auto; white-space: nowrap; } .ad-auth-chip { margin-left: auto; font-family: var(--lp-mono-font); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: 999px; border: 1px solid; flex-shrink: 0; } .ad-auth-chip--required { background: var(--lp-white); border-color: #cdd6e2; color: #3d4b5e; } .ad-auth-chip--none { background: #e6f6ef; border-color: #b7e3ce; color: #00663f; } .ad-auth-chip--public { background: #e7f1fb; border-color: #bcd9f0; color: #00487e; } .ad-endpoint-body { padding: 22px 20px; display: flex; flex-direction: column; gap: 18px; } .ad-endpoint-body > p { font-size: 14.5px; line-height: 1.65; color: var(--lp-body); margin: 0; } .ad-endpoint-body > p strong { color: var(--lp-ink); } /* Sub-bloque separado por hairline (ej. header Idempotency-Key dentro del endpoint crear). */ .ad-sub-block { padding-top: 18px; border-top: 1px solid var(--lp-line-2); } /* ------------------------------------------------------------ Bloque de código — reutilizado por curl, respuestas JSON y headers. ------------------------------------------------------------ */ .ad-code-card { background: var(--lp-dark); border-radius: 12px; overflow: hidden; } .ad-code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--lp-dark-line); } .ad-code-label { font-family: var(--lp-mono-font); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #8b97a8; } .ad-code-copy { font-family: var(--lp-mono-font); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: #8b97a8; background: none; border: none; cursor: pointer; padding: 2px 0; transition: color 140ms ease; } .ad-code-copy:hover { color: #ffffff; } .ad-code-pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--lp-mono-font); font-size: 12.5px; line-height: 1.8; color: #e8edf5; white-space: pre; } .ad-code-pre .tok-kw { color: var(--lp-accent-dark-bg); } .ad-code-pre .tok-str { color: #8ee6b8; } .ad-code-pre .tok-mut { color: #8b97a8; } .ad-code-foot { padding: 10px 16px; border-top: 1px solid var(--lp-dark-line); font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: #8b97a8; } /* ------------------------------------------------------------ Tabla de parámetros — filas grid, misma forma para parámetros/estados/errores/límites. ------------------------------------------------------------ */ .ad-table { border: 1px solid var(--lp-line); border-radius: 14px; overflow: hidden; } .ad-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; border-bottom: 1px solid #eef1f5; } .ad-row:last-child { border-bottom: none; } .ad-cell-key { background: var(--lp-band); padding: 16px 18px; font-family: var(--lp-mono-font); font-size: 13px; color: var(--lp-ink); } .ad-cell-val { padding: 16px 18px; font-size: 14px; line-height: 1.6; color: var(--lp-body); } .ad-cell-val code { font-size: 0.93em; } .ad-req { color: var(--lp-ink); font-weight: 600; } .ad-opt { color: var(--lp-mono); } @media (max-width: 620px) { .ad-row { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ Tarjetas numeradas y "notas" (cuadrado + etiqueta mono) — reutilizadas en Adjuntos y en el resto de la página para callouts sin usar un componente de alerta de color. ------------------------------------------------------------ */ .ad-numbered-card { border: 1px solid var(--lp-line); border-radius: 18px; padding: 24px; } .ad-numbered-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .ad-numbered-num { font-family: var(--lp-mono-font); font-weight: 500; color: var(--lp-accent); font-size: 14px; } .ad-numbered-head h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .ad-numbered-card > p { font-size: 14.5px; line-height: 1.6; color: var(--lp-body); margin: 0 0 16px; } .ad-note-card { background: var(--lp-band); border: 1px solid var(--lp-line); border-radius: 16px; padding: 22px 24px; } .ad-note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .ad-note-sq { width: 7px; height: 7px; flex-shrink: 0; background: var(--lp-ink); } .ad-note-sq--accent { background: var(--lp-accent); } .ad-note-label { font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-mono); } .ad-note-card p { font-size: 14.5px; line-height: 1.65; color: var(--lp-body); margin: 0; } .ad-note-card p + p { margin-top: 10px; } .ad-note-card ol { margin: 10px 0 0 20px; padding: 0; font-size: 14.5px; line-height: 1.65; color: var(--lp-body); } .ad-note-card li + li { margin-top: 6px; } /* Franja dentro de una tarjeta ya existente (aviso de template_url dentro de la tarjeta 02). */ .ad-note-strip { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lp-line-2); } .ad-step-rows { border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden; background: var(--lp-band); } .ad-step-row { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--lp-line-2); } .ad-step-row:last-child { border-bottom: none; } .ad-step-num { font-family: var(--lp-display); font-weight: 700; color: #9aa8bb; font-size: clamp(24px, 2.6vw, 32px); line-height: 1; } .ad-step-row p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--lp-body); } /* ------------------------------------------------------------ Sección 01 — Prueba la API. ------------------------------------------------------------ */ .ad-trial-card { border: 1px solid var(--lp-line); border-radius: 18px; padding: clamp(24px, 3vw, 34px); } .ad-trial-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .ad-trial-input { flex: 1 1 240px; border: 1px solid #d6dce6; border-radius: 999px; padding: 14px 20px; font-size: 15px; font-family: var(--lp-sans); background: var(--lp-white); color: var(--lp-ink); } .ad-trial-input:focus { outline: none; border-color: var(--lp-accent); } .ad-trial-error { font-size: 14px; color: #9a3412; margin: 12px 0 0; } .ad-trial-note { margin: 0; padding: 10px 16px; font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: #8b97a8; border-top: 1px solid var(--lp-dark-line); } /* ------------------------------------------------------------ Sección 02 — Autenticación: dos tarjetas lado a lado. ------------------------------------------------------------ */ .ad-auth-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); margin-top: 24px; } .ad-auth-card { border: 1px solid var(--lp-line); border-radius: 18px; overflow: hidden; } .ad-auth-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--lp-band); border-bottom: 1px solid var(--lp-line-2); } .ad-auth-card-head h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; } .ad-auth-card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .ad-auth-card-body .ad-path { font-size: 13.5px; color: #00487e; } .ad-auth-card-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--lp-body); } /* ------------------------------------------------------------ Sección 07 — Estados: pill de color por estado. ------------------------------------------------------------ */ .ad-status-pill { display: inline-block; font-family: var(--lp-mono-font); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px; } .ad-status-queued { background: #eef1f5; color: #3d4b5e; } .ad-status-sent { background: #e7f1fb; color: #00487e; } .ad-status-delivered { background: #e6f6ef; color: #00663f; } .ad-status-deferred { background: #fdf3e3; color: #7a4b06; } .ad-status-failed { background: #fdeaea; color: #8f1d1d; } .ad-status-complained { background: #f3eefb; color: #4b2a80; } /* ------------------------------------------------------------ Sección 08 — Errores: tarjeta oscura suelta dentro de la columna clara. ------------------------------------------------------------ */ .ad-dark-card { background: var(--lp-dark); border-radius: 20px; padding: clamp(28px, 3.6vw, 44px); } body.landing.api-docs .ad-dark-card h2, body.landing.api-docs .ad-dark-card h3 { color: #ffffff; } body.landing.api-docs .ad-dark-card p { color: #a7b2c2; } .ad-dark-card .ad-code-card { margin-top: 20px; border: 1px solid var(--lp-dark-line); } .ad-error-grid { display: grid; gap: 1px; background: var(--lp-dark-line); grid-template-columns: repeat(auto-fit, minmax(max(46%, 290px), 1fr)); border-radius: 16px; overflow: hidden; margin-top: 28px; } .ad-error-cell { background: var(--lp-dark); padding: 22px 24px; } .ad-error-code { font-family: var(--lp-display); font-size: 30px; font-weight: 700; color: #ffffff; display: block; margin-bottom: 8px; } .ad-error-cell p { margin: 0; font-size: 14px; line-height: 1.6; color: #a7b2c2; } /* ------------------------------------------------------------ Sección 09 — Límites: valor destacado sobre la aclaración. ------------------------------------------------------------ */ .ad-limit-value { display: block; font-family: var(--lp-display); font-size: 17px; font-weight: 600; color: var(--lp-ink); margin-bottom: 6px; } .ad-limit-detail { font-size: 14px; line-height: 1.6; color: var(--lp-body); } /* ------------------------------------------------------------ Responsive de detalle. ------------------------------------------------------------ */ @media (max-width: 900px) { .ad-aside { position: static; max-width: none; flex-basis: 100%; } .ad-toc-list { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; } .ad-toc-link { grid-template-columns: 5px auto auto; padding: 6px 0; } .ad-toc-swagger { margin-top: 14px; } }