/* password.es · /api/ * * Lo que esta hoja añade a style.min.css, y por qué existe por separado. * * La página /api/ pasó de ser prosa —«todavía no hay ninguna dirección a la * que llamar»— a ser documentación de una API que responde. Documentar pide * tres cosas que el sitio no tenía en ninguna parte: un bloque de código, una * tabla de referencia de campos y una lista de endpoints. No estaban porque * hasta ahora ninguna de las 180 páginas mostraba código. * * Todo va bajo `.cv-api-*` y no toca una sola clase del sitio: es la regla de * la casa, y aquí importa más que de costumbre porque `.article-content` la * comparten nueve páginas más en dieciocho idiomas. * * ── direction: ltr, y no es un detalle ─────────────────────────────── * * El árabe sirve esta misma página con dir="rtl" en el . Un endpoint * (`POST /v1/generate`), un comando de curl y una tabla de nombres de campo * son código: en RTL el navegador reordena los trozos «neutros» —la barra, los * paréntesis, los signos— y el resultado se lee mal o directamente miente. La * `/` de `/v1/generate` puede acabar al otro lado. * * Por eso cada bloque de código y cada tabla de referencia declaran * `direction: ltr` y `unicode-bidi: isolate`. El mismo remedio que ya lleva * `.cv-spec__row dd` en el comprobador, por el mismo motivo. La prosa de * alrededor sigue en RTL, que es donde tiene que estar. */ /* ── Código en línea dentro de la prosa ────────────────────────────── */ /* En árabe esto no es cosmético: `-d '{}'` dentro de un párrafo RTL se pintaba «'{}' d-». El guion y las comillas son caracteres neutros, así que el algoritmo bidi los arrastra al otro extremo del trozo y el comando queda del revés — copiarlo daría algo que no se ejecuta. `isolate` corta el trozo del contexto RTL y `ltr` lo pinta como lo que es. Va sobre `.cv-api`, la clase que este main declara, y no sobre `.article-content code`: así el selector no puede alcanzar a las nueve páginas de contenido que comparten esa clase en dieciocho idiomas. */ .cv-api code { direction: ltr; unicode-bidi: isolate; } /* ── Enlaces del hero ──────────────────────────────────────────────── */ /* `.article-content a` pinta los enlaces con el acento y subrayados, pero el hero queda FUERA de esa clase: allí un hereda del `a { color: inherit }` global y sale exactamente del mismo color que el texto, sin subrayado. Medido: oklch(0.82 0.008 181) el enlace y el mismo valor el párrafo — el mismo píxel. En /api/docs/ ese enlace es el único camino de vuelta a /api/ desde la entradilla, así que invisible no vale. Se le da el mismo trato que en el cuerpo, anclado en `.cv-api` para no salir de estas páginas. */ .cv-api .hero a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .cv-api .hero a:hover { opacity: 0.85; } /* ── Endpoints ─────────────────────────────────────────────────────── */ .cv-api-eps { margin: 1.5rem 0; padding: 0; list-style: none; border-top: 1px solid var(--border-soft); } .cv-api-ep { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border-soft); } /* El par método+ruta es una unidad de código: se aísla del RTL entero, no pieza a pieza, para que la barra de «/v1/generate» no se mueva de sitio. */ .cv-api-ep__call { display: inline-flex; align-items: baseline; gap: 0.6rem; direction: ltr; unicode-bidi: isolate; } .cv-api-ep__verb { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.2em 0.5em; border-radius: 4px; border: 1px solid var(--accent-border, var(--border-strong)); color: var(--accent); background: var(--surface-muted); flex-shrink: 0; } .cv-api-ep__path { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; } .cv-api-ep__state { font-size: 0.8rem; line-height: 1.6; color: var(--text-muted); } /* El 501 se marca, no se esconde: es la mitad del mensaje de esta página. */ .cv-api-ep__state--soon { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.2em 0.5em; border-radius: 4px; border: 1px solid var(--border-strong); color: var(--text-muted); direction: ltr; unicode-bidi: isolate; flex-shrink: 0; } /* ── Bloques de código ─────────────────────────────────────────────── */ .cv-api-fig { margin: 1.25rem 0 1.5rem; } .cv-api-fig figcaption { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.5rem; } .cv-api-code { margin: 0; padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--surface-muted); overflow-x: auto; -webkit-overflow-scrolling: touch; /* Código: se lee de izquierda a derecha en los dieciocho idiomas. */ direction: ltr; text-align: left; unicode-bidi: isolate; tab-size: 2; } /* `.article-content code` pinta las menciones en línea con fondo y color de acento. Dentro de un 
 eso sería un bloque entero de color: se anula. */
.cv-api-code code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
  white-space: pre;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text-primary);
}

/* La respuesta de ejemplo lleva el `notice` entero, y son 230 caracteres en
   una sola línea de JSON. En `pre` eso es un scroll horizontal larguísimo
   dentro de una columna estrecha; envolviendo se ve de un vistazo. Solo aquí:
   el curl se queda en `pre`, que sus líneas ya vienen cortadas con «\». Copiar
   sigue dando el mismo texto — `pre-wrap` no inserta ni un carácter. */
.cv-api-code--wrap code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .cv-api-code code { font-size: 0.72rem; }
  .cv-api-code { padding: 0.75rem; }
}

/* ── Tabla de referencia ───────────────────────────────────────────── */

.cv-api-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0 1.5rem;
}

.cv-api-ref {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  font-size: 0.85rem;
  /* La tabla entera es referencia en inglés: nombres de campo, tipos y notas.
     Va en LTR también en árabe. */
  direction: ltr;
  text-align: left;
}

.cv-api-ref th,
.cv-api-ref td {
  padding: 0.7rem 0.65rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}

.cv-api-ref thead th {
  background: var(--surface-soft);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.cv-api-ref tbody td {
  color: var(--text-muted);
  line-height: 1.55;
}

.cv-api-ref tbody tr:last-child td {
  border-bottom: none;
}

/* Primera columna: el nombre del campo. Mono y sin partir. */
.cv-api-ref tbody th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

.cv-api-ref td code,
.cv-api-ref th code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

/* Tipo y valor por defecto: mono, y los números alineados. */
.cv-api-ref .cv-api-ref__type,
.cv-api-ref .cv-api-ref__def {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cv-api-ref .cv-api-ref__def {
  color: var(--text-strong);
}

@media (max-width: 640px) {
  .cv-api-ref { font-size: 0.78rem; }
  .cv-api-ref th,
  .cv-api-ref td { padding: 0.55rem 0.4rem; }
  .cv-api-ref tbody th { font-size: 0.72rem; }
}

/* ── Aviso ─────────────────────────────────────────────────────────── */

/* El antipatrón. Es el único bloque de la página con el borde de acento: si
   alguien solo lee una cosa aquí, que sea esta. */
.cv-api-warn {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--accent);
  background: var(--surface-soft);
}

.cv-api-warn p {
  margin: 0;
}

.cv-api-warn p + p {
  margin-top: 0.75rem;
}