/*
 * La portada de TunjaAPI (/). Lo que es solo suyo: las rutas, las credenciales,
 * los bloques de código y la banda del demo.
 *
 * La cabecera, las secciones, los botones, las cifras y el pie los pone
 * pagina.css, que comparte con la portada de MetroTunja. Se carga detrás de
 * style.css y de esa, y da por hechas sus variables.
 *
 * Aquí hay mucho más texto que en la del metro, así que casi todo el trabajo es
 * de ritmo de lectura: anchos cortos, monoespaciada para lo que se copia y
 * pega, y una sola cosa destacada por sección.
 */

/* Un signo de que esto es una API, no una red de transporte */
.pagina--api .cabecera__insignia {
  border-radius: 3px;
  background: var(--acento);
}

/* La primera cifra no es un número sino una ruta: que no compita en tamaño */
#cBase {
  font-family: var(--mono);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  letter-spacing: -0.01em;
}

/* Un enlace dentro del texto: el acento y nada más, que no compita con los botones */
.seccion p a,
.nota a {
  color: var(--acento);
}

/* El código suelto dentro de un párrafo */
.seccion code,
.portada code,
.pie code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--acento);
  overflow-wrap: anywhere;
}

/* ── Rejilla de dos ──────────────────────────────── */
.rejilla-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.ficha-idea,
.credencial {
  padding: clamp(1.25rem, 3vw, 1.85rem);
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--panel);
}

.ficha-idea h3,
.credencial h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.ficha-idea p,
.credencial p:not(.panel__etiqueta):not(.credencial__cabecera) {
  color: var(--tenue);
  font-size: 0.95rem;
}

/*
 * La cabecera literal, tal cual se escribe en el fetch. Va arriba del todo de
 * la tarjeta porque es lo que la persona viene a copiar; el nombre y la
 * explicación son para entenderla después.
 */
.credencial__cabecera {
  margin: 0.4rem 0 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--hueco);
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--acento);
  overflow-wrap: anywhere;
}

/* ── Nota ────────────────────────────────────────── */
/*
 * El párrafo que explica el porqué de algo, no el cómo. Se distingue con una
 * banda de color y nada más: si llevara caja propia competiría con las fichas.
 */
.nota {
  max-width: 52rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-left: clamp(1rem, 3vw, 1.5rem);
  border-left: 3px solid var(--acento);
}
.nota--aviso { border-left-color: var(--verde); }

.nota h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.nota p {
  color: var(--tenue);
  font-size: 0.95rem;
}
.nota p + p { margin-top: 0.75rem; }
.nota strong { color: var(--tinta); font-weight: 500; }

/* ── Rutas ───────────────────────────────────────── */
/*
 * El min() es lo que impide que la columna sea más ancha que la pantalla: sin
 * él, un móvil de menos de 330px se lleva 330 igual y desborda la página entera.
 */
.grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.grupo {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--panel);
}

.grupo h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
}

/* El título del grupo lleva a esa sección de /docs, con el resto de la ficha */
.grupo__enlace {
  color: var(--tinta);
  text-decoration: none;
}
.grupo__enlace:hover {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.grupo__nota {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linea);
  font-size: 0.85rem;
  color: var(--tenue);
}
.grupo__nota strong { color: var(--tinta); font-weight: 500; }

.rutas {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Método, ruta y quién puede llamarla. La ruta se lleva el espacio sobrante
 * para que la nota quede pegada a la derecha y las tres columnas se lean en
 * vertical de un vistazo.
 */
.rutas li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--linea);
}
.rutas li:last-child { border-bottom: 0; }

/*
 * Cada ruta enlaza a su ficha en /docs. El enlace es el que se estira, no el
 * <code> de dentro: es lo que mantiene las tres columnas en su sitio y de paso
 * hace grande el área en la que se puede pinchar.
 */
.rutas .ruta__enlace {
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.rutas code {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.rutas .ruta__enlace:hover code {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ruta__nota {
  flex: none;
  font-size: 0.72rem;
  color: var(--tenue);
  text-align: right;
}

/*
 * El método en un rectángulo de ancho fijo: así las rutas empiezan todas en la
 * misma columna aunque GET tenga tres letras y PATCH cinco.
 */
.metodo {
  flex: none;
  width: 3.4rem;
  padding: 0.15rem 0;
  border-radius: 4px;
  background: var(--hueco);
  border: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--tenue);
}
/* Leer es inofensivo y escribir no: solo eso hace falta distinguir */
.metodo[data-m="GET"] { color: var(--verde); }
.metodo[data-m="POST"],
.metodo[data-m="PUT"],
.metodo[data-m="PATCH"] { color: var(--acento); }
.metodo[data-m="DELETE"] { color: var(--rojo); }

/* ── Casos de uso ────────────────────────────────── */
.casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(0.85rem, 2vw, 1.25rem);
}

.caso {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--panel);
}

.caso h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.caso p { color: var(--tenue); font-size: 0.92rem; }

/* Las rutas que resuelven el caso, al pie y en mono: es el índice de vuelta */
.caso__rutas {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 0.75rem !important;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.caso__rutas code { color: var(--acento); font-size: 1em; }

/* ── Código ──────────────────────────────────────── */
/*
 * Se desborda en horizontal en vez de partir las líneas: un curl cortado por la
 * mitad se copia mal, y estos bloques están para copiarse.
 */
.codigo {
  margin: 0;
  padding: clamp(0.85rem, 2vw, 1.1rem);
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--hueco);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--tinta);
  overflow-x: auto;
  tab-size: 2;
}

/* ── Pasos ───────────────────────────────────────── */
.pasos {
  list-style: none;
  counter-reset: paso;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.paso {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.4rem 1rem;
  align-items: baseline;
}

.paso::before {
  content: counter(paso);
  grid-row: 1 / span 3;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--acento);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--acento);
}

.paso h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.paso p {
  color: var(--tenue);
  font-size: 0.95rem;
  max-width: 44rem;
}
.paso .codigo { margin-top: 0.6rem; }

/*
 * Lo que viene después de los pasos abre tema y necesita separarse. La rejilla
 * no lo lleva de serie porque en las otras secciones va detrás de una cabecera,
 * que ya trae su propio margen debajo y la dejaría al doble de aire.
 */
.pasos + .rejilla-2 { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* ── La llamada de prueba ────────────────────────── */
/*
 * Un GET público contra la API de verdad. Existe porque "leer es público" se
 * entiende mucho mejor viendo salir el JSON que leyéndolo escrito.
 */
.prueba {
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}

.prueba__barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem clamp(0.85rem, 2vw, 1.1rem);
  border-bottom: 1px solid var(--linea);
}
.prueba__barra code {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--tinta) !important;
  overflow-wrap: anywhere;
}

.prueba__boton {
  flex: none;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}

.prueba__salida {
  border: 0;
  border-radius: 0;
  background: var(--hueco);
  max-height: 20rem;
  overflow: auto;
  color: var(--tenue);
}
.prueba__salida[data-estado="ok"] { color: var(--tinta); }
.prueba__salida[data-estado="mal"] { color: var(--rojo); }

.lista-limites {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--tenue);
  font-size: 0.95rem;
}
.lista-limites li { padding: 0.15rem 0; }

/* ── La banda del demo ───────────────────────────── */
.demo {
  padding: clamp(1.75rem, 5vw, 3.5rem);
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--panel);
  /*
   * Los colores de las dos líneas del metro, escritos a mano: aquí no se carga
   * red.json —serían dieciocho estaciones para pintar cuatro píxeles— y si
   * algún día cambian allí, esta banda es lo único que se queda atrás.
   */
  border-top: 4px solid;
  border-image: linear-gradient(90deg, #ef6c2f, #3fbf87) 1;
  border-image-width: 4px 0 0 0;
}

.demo__texto { max-width: 46rem; }
.demo h2 { margin: 0.5rem 0 0.9rem; }

@media (max-width: 560px) {
  .paso {
    grid-template-columns: 1fr;
  }
  .paso::before { grid-row: auto; margin-bottom: 0.25rem; }
  .rutas li { flex-wrap: wrap; }
  .ruta__nota { width: 100%; padding-left: 4rem; text-align: left; }
}