/*
 * Referencia pública `/agentes/api`. Comparte los tokens y componentes de `web/base.css`, y todo
 * selector queda escopado bajo `.web-api`: Propshaft también carga este fichero dentro de la app.
 * La página es documentación, no una pantalla de producto, así que prioriza lectura larga y código
 * copiable sin introducir otro sistema visual.
 */

/* ---------- Cabecera y disponibilidad ---------- */
/* v2 (24-sep-2026): la cabecera se pinta sobre el cielo de día de la portada y de Para agentes, y
   alinea con el `.web-cont` del resto de la página (antes era una columna centrada de 920px que no
   casaba con los bloques de debajo). El aviso de disponibilidad vive dentro, en blanco con el
   chasis de tarjeta: es el estado, y va arriba. */
.web-api-cabecera{ background: var(--cielo-dia); padding: 56px 0 56px; }
.web-api-cabecera-cont{ display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.web-api-volver{
  width: fit-content; font-size: 13px; font-weight: 800; color: var(--tinta2);
  text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 3px;
}
.web-api-encabezado{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.web-api-cabecera h1{ font-size: 56px; line-height: 1.04; letter-spacing: -.025em; }
/* Titulares, entradillas y párrafos de cuerpo a todo el ancho de `.web-cont` (decisión de
   Guillem, 26-sep-2026): sin `max-width` ni `text-wrap: balance`, como en /agentes. */
.web-api .web-api-entradilla{ font-size: 19px; text-wrap: pretty; }

.web-api-disponibilidad{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 36px;
  width: 100%; margin-top: 12px; padding: 28px 32px;
  background: var(--fondo); border: var(--contorno) solid var(--tinta); border-radius: 26px;
  box-shadow: 0 2px 0 var(--som);
}
.web-api-disponibilidad > div{ display: flex; flex-direction: column; gap: 10px; }
.web-api .web-api-disponibilidad h2{ font-size: 24px; }
.web-api .web-api-disponibilidad p,.web-api-disponibilidad li{ font-size: 15px; }
.web-api-disponibilidad ul{ margin: 0; padding-left: 20px; color: var(--tinta2); }
.web-api-disponibilidad li{ margin: 0 0 8px; line-height: 1.45; font-weight: 700; }

/* ---------- Resumen de operaciones ---------- */
/* Tabla de referencia: recurso | operación | qué devuelve. En <=900px cada fila se apila como una
   ficha y la cabecera de columna pasa a rótulo de cada celda (`data-campo`), para no forzar scroll
   horizontal de página. */
.web-api-resumen{ padding-top: 56px; }
.web-api .web-api-resumen h2{ margin-bottom: 20px; font-size: 28px; }
.web-api-tabla{
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: var(--contorno) solid var(--tinta); border-radius: 20px; box-shadow: 0 2px 0 var(--som);
  overflow: hidden; font-size: 14px; font-weight: 700; color: var(--tinta2);
}
.web-api-tabla th{
  padding: 14px 20px; text-align: left; background: var(--pista);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--tinta3);
}
.web-api-tabla td{ padding: 14px 20px; border-top: var(--contorno) solid var(--som-fuerte); vertical-align: middle; line-height: 1.45; }
.web-api-tabla td:first-child{ font-weight: 800; color: var(--tinta); white-space: nowrap; }
.web-api-tabla-ruta{ display: inline-flex; align-items: center; gap: 10px; }
.web-api .web-api-tabla-ruta code{ font-size: 13px; font-weight: 800; color: var(--tinta); overflow-wrap: anywhere; }
.web-api .web-api-tabla-ruta:hover code{ text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 3px; }

/* ---------- Índice ---------- */
.web-api-indice{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 32px; padding-bottom: 24px;
}
.web-api-indice a{
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: var(--contorno) solid var(--tinta); border-radius: 999px;
  box-shadow: 0 1.5px 0 var(--som); background: var(--fondo);
  font-size: 12px; font-weight: 800;
}

/* ---------- Bloques de referencia ---------- */
/* scroll-margin-top = alto de `.web-nav` (base.css), ahora sticky: sin el margen el indice de
   arriba salta el ancla debajo de la nav y tapa el encabezado de la seccion. */
.web-api-bloque{ padding-top: 64px; padding-bottom: 24px; scroll-margin-top: 96px; }
.web-api-seccion-cabecera{
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px;
}
.web-api .web-api-seccion-cabecera h2{ font-size: 34px; }
.web-api .web-api-seccion-cabecera > p:not(.web-rotulo){ font-size: 16px; }

.web-api-contrato-rejilla{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.web-api-regla{ display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.web-api .web-api-regla h3{ margin: 0; font-size: 17px; font-weight: var(--peso-titulo); }
.web-api .web-api-regla p{ font-size: 13px; }
.web-api-valor{
  display: block; width: 100%; overflow-x: auto; padding: 11px 12px;
  border-radius: 11px; background: var(--pista); color: var(--tinta);
  font-size: 12px; line-height: 1.45; font-weight: 700; white-space: nowrap;
}
.web-api-scopes{
  display: flex; flex-direction: column; gap: 9px; margin-top: 16px;
  padding: 24px; border-radius: 20px; background: var(--lavanda-cl);
}
.web-api .web-api-scopes h3{ margin: 0; font-size: 17px; font-weight: var(--peso-titulo); }
.web-api .web-api-scopes p{ font-size: 13px; }
.web-api-scopes-lista{ display: flex; gap: 8px; flex-wrap: wrap; }
.web-api-scopes-lista code{
  padding: 6px 9px; border: var(--contorno) solid var(--tinta); border-radius: 999px;
  background: var(--fondo); color: var(--tinta); font-size: 11px; white-space: nowrap;
}

/* ---------- Operaciones ---------- */
.web-api-operaciones{ display: flex; flex-direction: column; gap: 20px; }
.web-api-operacion{
  display: flex; flex-direction: column; gap: 18px; padding: 28px;
  scroll-margin-top: 20px;
}
.web-api-operacion-cabecera{
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.web-api-ruta{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.web-api .web-api-ruta code{
  color: var(--tinta); font-size: 14px; font-weight: 800; overflow-wrap: anywhere;
}
.web-api-metodo{
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
  border: var(--contorno) solid var(--tinta); border-radius: 8px;
  color: var(--tinta); font-size: 10.5px; font-weight: 900; letter-spacing: .04em;
}
.web-api-metodo--get{ background: var(--lavanda-cl); box-shadow: 0 1.25px 0 var(--lavanda-s); }
.web-api-metodo--post{ background: var(--menta-cl); box-shadow: 0 1.25px 0 var(--menta); }
.web-api-scope{ background: var(--vainilla-cl); }
.web-api-scope code{ margin-left: 4px; color: var(--tinta); font-size: inherit; }
.web-api .web-api-operacion h3{
  margin: 0; font-size: 22px; line-height: 1.15; font-weight: var(--peso-titulo);
  letter-spacing: -.015em;
}
.web-api .web-api-operacion-descripcion{ font-size: 14.5px; }
.web-api-detalles{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 28px;
  margin: 0; padding-left: 20px; color: var(--tinta2);
}
.web-api-detalles li{ padding-left: 2px; font-size: 13px; line-height: 1.5; font-weight: 700; }

.web-api-ejemplo{ display: flex; flex-direction: column; gap: 8px; }
.web-api .web-api-ejemplo h4{
  margin: 0; color: var(--tinta2); font-size: 11px; font-weight: 800; letter-spacing: .08em;
}
.web-api-ejemplo pre{
  margin: 0; overflow-x: auto; padding: 18px; border-radius: 14px;
  background: var(--tinta); color: var(--fondo);
}
.web-api-ejemplo code{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size: 12px; line-height: 1.55; white-space: pre;
}

/* ---------- Contacto ---------- */
.web-api-contacto{
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-top: 64px; margin-bottom: 80px; padding-top: 36px; padding-bottom: 36px;
  border-radius: 24px; background: var(--crema2);
}
.web-api-contacto > div{ display: flex; flex-direction: column; gap: 8px; }
.web-api .web-api-contacto h2{ font-size: 22px; }
.web-api .web-api-contacto p{ font-size: 14px; }

@media (max-width: 900px){
  .web-api-cabecera{ padding: 32px 0 40px; }
  .web-api-cabecera-cont{ gap: 16px; }
  .web-api-cabecera h1{ font-size: 36px; }
  .web-api .web-api-entradilla{ font-size: 16px; }

  .web-api-disponibilidad{ grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 20px; border-radius: 22px; }
  .web-api .web-api-disponibilidad h2{ font-size: 21px; }
  .web-api .web-api-disponibilidad p,.web-api-disponibilidad li{ font-size: 14px; }

  .web-api-resumen{ padding-top: 40px; }
  .web-api .web-api-resumen h2{ font-size: 24px; margin-bottom: 16px; }
  .web-api-tabla,.web-api-tabla tbody,.web-api-tabla tr,.web-api-tabla td{ display: block; }
  .web-api-tabla thead{ display: none; }
  .web-api-tabla tr + tr{ border-top: var(--contorno) solid var(--som-fuerte); }
  .web-api-tabla tr{ padding: 14px 18px; }
  .web-api-tabla td{ padding: 3px 0; border-top: 0; }
  .web-api-tabla td::before{
    content: attr(data-campo); display: block; margin-bottom: 2px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--tinta3);
  }
  .web-api-tabla td:first-child{ white-space: normal; }

  .web-api-bloque{ padding-top: 48px; }
  .web-api .web-api-seccion-cabecera h2{ font-size: 28px; }
  .web-api-contrato-rejilla{ grid-template-columns: minmax(0, 1fr); }

  .web-api-operacion{ padding: 22px 20px; }
  .web-api-operacion-cabecera{ align-items: flex-start; }
  .web-api-ruta{ align-items: flex-start; }
  .web-api-detalles{ grid-template-columns: minmax(0, 1fr); }
  .web-api-ejemplo pre{ padding: 14px; }
  .web-api-valor{ white-space: normal; overflow-wrap: anywhere; }
  .web-api-ejemplo code{ font-size: 11.5px; white-space: pre-wrap; word-break: break-all; }

  .web-api-contacto{
    flex-direction: column; align-items: flex-start; margin-top: 48px; margin-bottom: 56px;
  }
}