/*
 * Lo común de las dos páginas que se leen: la de TunjaAPI (/) y la de
 * MetroTunja (/metro).
 *
 * No son terminales sino documentos —se desplazan, tienen secciones, se leen de
 * arriba abajo—, y hasta que hubo dos esto vivía dentro de la portada del
 * metro. Aquí está lo que ninguna de las dos posee: la cabecera, la retícula de
 * secciones, los botones, la portada y el pie. Lo que sí es de cada una va en
 * su propia hoja.
 *
 * Se carga después de style.css y reusa sus variables, su reset y
 * .panel__etiqueta.
 */

/*
 * Se cuelga de .desplazable, que ya es la marca de "esto no es una pantalla".
 * Nada más hace falta: la altura y el overflow los suelta style.css.
 */
body.desplazable { line-height: 1.6; }

/* ── Cabecera ────────────────────────────────────── */
/*
 * Una página no es un terminal, así que su cabecera se comporta como la de un
 * sitio: enlaces de texto con un subrayado que crece al pasar, y una sola
 * acción destacada al final. Los rectángulos de la barra del terminal aquí
 * quedaban como botones sueltos.
 */
/*
 * La marca a un lado y la navegación al otro. Hay que decirlo aquí porque
 * .barra centra su contenido —lo que quiere una pantalla, que solo lleva el
 * nombre— y el reparto en dos extremos vive en metro.css, que es del terminal y
 * estas páginas no cargan.
 */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  justify-content: space-between;
  gap: 1rem;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--carbon) 82%, transparent);
  border-bottom: 1px solid var(--linea);
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.cabecera__marca {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
}

/*
 * El distintivo de la marca. Cada sitio lo pinta a su manera: el de la API va
 * en su hoja, y el del metro aquí porque lo comparten tres páginas —la portada,
 * la consola y el portal— y ninguna de las tres carga la hoja de las otras.
 *
 * Los colores salen de las líneas reales cuando la página ha leído red.json; si
 * no, los de reserva son los mismos que trae el archivo.
 */
.cabecera__insignia--metro {
  background: linear-gradient(135deg, var(--color-l1, #ef6c2f) 50%, var(--color-l2, #3fbf87) 50%);
}

.cabecera__insignia {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
}

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 2.2vw, 1.6rem);
}

/*
 * Un enlace de la barra se lee entero o no se lee: "Casos de uso" partido en
 * dos líneas dentro de una barra de una sola altura descuadra la fila y no se
 * entiende. Si no cabe, lo que sobra se esconde —eso lo decide el HTML con
 * .opcional—, pero nunca se parte.
 */
.cabecera__nav a {
  position: relative;
  padding: 0.35rem 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tenue);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.cabecera__nav a:hover { color: var(--tinta); }

/* El subrayado crece desde el centro; sin él los enlaces quedaban desnudos */
.cabecera__nav a:not(.cabecera__accion)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 2px;
  background: var(--acento);
  scale: 0 1;
  transition: scale 0.18s ease-out;
}
.cabecera__nav a:not(.cabecera__accion):hover::after { scale: 1 1; }

/*
 * Una sola acción destacada por página. Va calificada con .cabecera__nav para
 * ganarle en especificidad a la regla de arriba, que si no le come el relleno
 * lateral y deja el texto pegado al borde de la píldora.
 */
.cabecera__nav a.cabecera__accion {
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--acento);
  border-radius: 999px;
  color: var(--acento);
  transition: background 0.15s, color 0.15s;
}
.cabecera__nav a.cabecera__accion:hover {
  background: var(--acento);
  color: var(--carbon);
}

/*
 * Con sesión abierta esa acción deja de ser una invitación y pasa a ser la
 * persona: sus iniciales en un disco y su nombre al lado. El relleno se ajusta
 * porque el avatar ya trae el suyo, y así el disco no baila dentro de la
 * píldora.
 */
.cabecera__nav a.cabecera__cuenta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.85rem 0.25rem 0.28rem;
}

.cabecera__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--acento);
  color: var(--carbon);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
}
.cabecera__nav a.cabecera__cuenta:hover .cabecera__avatar {
  background: var(--carbon);
  color: var(--acento);
}

.cabecera .tema { margin-left: 0.2rem; }

/* En un móvil el avatar solo: dos iniciales identifican la cuenta igual que el
   nombre y no compiten por el ancho con los enlaces que sí hay que leer. */
@media (max-width: 640px) {
  .cabecera__nombre { display: none; }
  .cabecera__nav a.cabecera__cuenta { padding: 0.25rem; }
}

/*
 * En pantallas estrechas no caben todas las secciones. Las que se pueden
 * perder se marcan en el HTML y no se adivinan desde aquí: qué sobra lo sabe
 * la página, no la hoja de estilos.
 *
 * El punto de corte es generoso —mil cuarenta— porque lo fija la barra más
 * cargada, la de la portada: siete enlaces, la acción y el tema no bajan de
 * unos mil píxeles sin partirse, y partirse es lo que no puede pasar. Lo que
 * queda es el mínimo con el que la barra sigue sirviendo: el enlace a la otra
 * página y la acción destacada.
 */
@media (max-width: 1040px) {
  .cabecera__nav .opcional { display: none; }
}

/*
 * Y en un móvil el tema se queda en su símbolo, que es lo que se reconoce de un
 * vistazo. La palabra sobra cuando compite por sitio con dos enlaces que sí hay
 * que leer; el aria-label la sigue diciendo entera.
 */
@media (max-width: 720px) {
  .cabecera .tema__texto { display: none; }
}

/*
 * Y por debajo de un móvil estrecho ya no sobra ninguna sección: lo que se
 * aprieta es el aire. Sin esto la cabecera es más ancha que la pantalla y
 * arrastra a toda la página con ella.
 */
@media (max-width: 420px) {
  .cabecera {
    gap: 0.5rem;
    padding-inline: 0.85rem;
  }
  .cabecera__marca { font-size: 0.95rem; gap: 0.4rem; }
  .cabecera__nav { gap: 0.5rem; }
  .cabecera__nav a { font-size: 0.88rem; }
  .cabecera__nav a.cabecera__accion { padding-inline: 0.65rem; }
  .cabecera .tema { margin-left: 0; padding-inline: 0.5rem; }
}

/* Un móvil de los pequeños de verdad: lo mismo, medio punto más apretado */
@media (max-width: 360px) {
  .cabecera { padding-inline: 0.7rem; }
  .cabecera__marca { font-size: 0.9rem; }
  .cabecera__nav { gap: 0.4rem; }
  .cabecera__nav a { font-size: 0.84rem; }
  .cabecera__nav a.cabecera__accion { padding-inline: 0.55rem; }
  .cabecera .tema { padding-inline: 0.42rem; }
}

/* ── Piezas comunes ──────────────────────────────── */
.seccion {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 2.5rem);
}

.seccion__cabecera {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.seccion h2 {
  margin: 0.5rem 0 0.9rem;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.seccion__intro {
  color: var(--tenue);
  font-size: clamp(0.98rem, 1.6vw, 1.1rem);
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--acento);
  color: var(--carbon);
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.boton:hover { transform: translateY(-1px); }

.boton--fantasma {
  background: none;
  border-color: var(--linea);
  color: var(--tinta);
}
.boton--fantasma:hover { border-color: var(--tenue); background: var(--hueco); }

/* ── Portada ─────────────────────────────────────── */
.portada {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
}

.portada__texto {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(3.5rem, 12vw, 8rem) clamp(1.25rem, 5vw, 2.5rem);
}

.portada h1 {
  margin: 0.75rem 0 1.25rem;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.portada__claim {
  max-width: 34rem;
  color: var(--tenue);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/*
 * En un móvil dos botones uno al lado del otro no caben y uno debajo del otro
 * quedan de anchos distintos —el texto manda— con un hueco raro a la derecha.
 * Apilados y a todo lo ancho se leen como lo que son: dos maneras de seguir,
 * la primera destacada.
 */
@media (max-width: 560px) {
  .portada__acciones,
  .acceso__acciones {
    flex-direction: column;
    align-items: stretch;
  }
  .portada__acciones .boton,
  .acceso__acciones .boton {
    width: 100%;
    justify-content: center;
  }

  /*
   * El lector y la pantalla son la excepción: no son "dos maneras de seguir"
   * sino las dos mitades de lo mismo —el equipo que lee y el monitor que
   * muestra—, así que van juntos en una fila y del mismo ancho. Con flex:1 1 0
   * miden igual aunque los textos no midan lo mismo, que era el problema de
   * dejarlos al ancho de su contenido.
   */
  .enlaces-terminal { flex-wrap: nowrap; }
  .enlaces-terminal .boton {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding-inline: 0.75rem;
  }
}

/* ── Cifras ──────────────────────────────────────── */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.cifra dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.cifra dd {
  margin: 0.35rem 0 0;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* ── Pie ─────────────────────────────────────────── */
.pie {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 2.5rem);
  border-top: 1px solid var(--linea);
  font-size: 0.85rem;
  color: var(--tenue);
}
.pie__tenue { margin-top: 0.3rem; opacity: 0.7; }

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 0.9rem;
}
.pie__enlaces a {
  color: var(--tenue);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  transition: color 0.15s, border-color 0.15s;
}
.pie__enlaces a:hover { color: var(--tinta); border-color: var(--tenue); }

/* Quien pide menos movimiento no quiere que los botones salten */
@media (prefers-reduced-motion: reduce) {
  .boton:hover { transform: none; }
}