/* ==========================================================================
   Sidera Cosmos — estilos de /lanzamientos/
   --------------------------------------------------------------------------
   Cuarta hoja de la página, detrás de site.css, eclipse.css y eventos.css.
   Aquí no se redefine ni una regla de las anteriores: se reutiliza tal cual lo
   que ya existe (.hero, .cta, .faq, .toc, .countdown, .badge, .fuentes,
   .proximo, .btn) y solo se añaden las clases que esta página necesita y que
   ninguna otra tiene. Es lo que hace que se vea hermana de /eventos/ y no
   prima lejana.

   Todos los colores salen de los tokens de site.css. Ningún hex vive aquí.

   EL COLOR DE LOS ESTADOS, QUE ES LA DECISIÓN DE DISEÑO DE ESTA HOJA
   Un calendario de lanzamientos vive de una sola pregunta: ¿esto va a pasar de
   verdad o es un cálculo? Por eso el estado es lo único que lleva color, y solo
   tiene tres peldaños:
     GO y Éxito     -> verde de estado: está autorizado, o salió bien.
     Por confirmar  -> teal, el secundario del par de la casa: la fecha está
                       puesta y falta ratificarla.
     Estimado       -> neutro apagado: es un cálculo del operador, nada más.
   El fallo va en magenta, que es el otro color de dato de la casa y aquí no
   significa ninguna otra cosa. Y el color nunca va solo: cada pastilla lleva su
   palabra escrita, que es lo que lee quien no distingue un verde de un teal.

   POR QUÉ EL GO ES VERDE, Y NO TEAL (3-sep-2026, orden expresa del creador)
   El teal mide 5.88:1 sobre la superficie de las tarjetas y a esa distancia se
   confundía con el fondo: el estado más importante de la página era el que menos
   se veía. El verde nuevo, --green en site.css, mide 7.85:1 y está a 146 grados
   de tono, lejos de los 186 del teal, así que se lee como verde y no como un
   teal un poco más claro. No es neón: saturación 0.57 y valor 0.75, la misma
   familia que el resto de la paleta. Al quedar libre el teal, "Por confirmar" se
   mudó ahí desde el ámbar.

   EL ÁMBAR, QUE AHORA ES DE LOS TÍTULOS (3-sep-2026, la misma orden)
   Hasta esta revisión el ámbar se gastaba con cuentagotas y el nombre de cada
   misión iba en el blanco de la casa. El creador pidió lo contrario: que el
   nombre resalte. Así que el ámbar de dato pasa a ser el color de los h3 de
   TODAS las fichas y del nombre del bloque "Lo más próximo", y a cambio ninguna
   pastilla de estado lo usa ya. El presupuesto de ámbar por vista no se relaja:
   cambia de sitio. Los dos estados que esta revisión no llega a usar, "En
   vuelo" y "En espera", también salieron del ámbar (decisión del creador del
   2-sep, mismo paquete): "En vuelo" va en el verde de GO y de ÉXITO, porque es
   el mismo semáforo un paso después; "En espera" va en el gris de ESTIMADO,
   porque las dos son fechas que todavía no mandan. Ninguna pastilla usa ámbar.
   ========================================================================== */

/* ------------------------------------------------------ Lo más próximo ---- */

/* El bloque del hero hereda .proximo de eventos.css. Solo se le añaden las dos
   piezas que allí no existen: la pastilla de estado y la línea con la hora del
   reloj de quien mira, que escribe el JavaScript y que nace oculta. */
.proximo .badge {
  display: inline-block;
  margin-top: 0.6rem;
}
.proximo-local {
  margin: 0.6rem 0 0;
  font-size: 0.94rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.proximo .lede { font-size: 0.98rem; }
/* El nombre de lo que viene, en el ámbar de la casa: es la misma orden que
   pintó los h3 de las fichas, y este h2 es el título de la primera de todas.
   Es la única regla de esta hoja que reescribe una propiedad de eventos.css. */
.proximo h2 { color: var(--amber); }

/* ------------------------------------------------------------ Filtros ----- */

/* Nacen con el atributo hidden y los enciende js/lanzamientos.js. Quien llega
   sin JavaScript no ve un botón que no hace nada: ve las listas completas. */
.filtros {
  margin-top: 1.6rem;
}
.filtros .eyebrow { margin-bottom: 0.5rem; }
.filtros-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filtro {
  font-family: var(--font-sidera);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  cursor: pointer;
  /* 44 px de alto mínimo: es el blanco táctil que un pulgar acierta sin
     apuntar, y la fila cabe igual en 320 px porque envuelve. */
  min-height: 2.75rem;
}
.filtro:hover { color: var(--text); border-color: var(--line); }
.filtro:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.filtro[aria-pressed="true"] {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

/* Sección que se queda sin fichas visibles al filtrar: se oculta entera, con
   su título y su entradilla. Una sección vacía con un encabezado prometiendo
   contenido es peor que ninguna sección. */
[data-seccion][hidden] { display: none; }

/* ------------------------------------------------------------- Fichas ----- */

.lanz-lista {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 52rem) {
  .lanz-lista { grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); }
}

.lanz,
.destacado {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.2rem 1.25rem;
}

/* El filete izquierdo repite el código de estado, para que la lista se lea de
   un vistazo en vertical sin tener que entrar en cada pastilla. */
.lanz[data-estado="go"]      { border-left-color: var(--green); }
.lanz[data-estado="exito"]   { border-left-color: var(--green); }
.lanz[data-estado="tbc"]     { border-left-color: var(--teal); }
.lanz[data-estado="tbd"]     { border-left-color: var(--border-strong); }
.lanz[data-estado="vuelo"]   { border-left-color: var(--green); }
.lanz[data-estado="espera"]  { border-left-color: var(--border-strong); }
.lanz[data-estado="fallo"]   { border-left-color: var(--magenta); }
.lanz[data-estado="evento"]  { border-left-color: var(--line); }
.destacado                   { border-left-color: var(--line); }

/* Contraste medido sobre la superficie de la tarjeta y del bloque "Lo más
   próximo", que es el mismo --surface (#101427): verde 7.85:1, teal 5.88:1,
   --text-dim 8.35:1, magenta 5.45:1, --text 15.40:1. Todas por encima de 4.5:1,
   que es el umbral que le toca a un texto de 0.66rem en negrita. */
/* Los tres estados FIRMES (GO, ÉXITO, EN VUELO) van en pastilla RELLENA de
   verde con el texto en el fondo de la casa: el creador vio GO y POR CONFIRMAR
   «del mismo color» (verde y teal en contorno, 3-sep), así que la diferencia
   ya no depende solo del tono — lo firme se rellena, lo tentativo va en
   contorno. Contraste del texto oscuro sobre el verde: 8.7:1. */
.badge-go,
.badge-exito,
.badge-vuelo   { color: var(--bg); background: var(--green); border-color: var(--green); }
.badge-tbc     { color: var(--teal); }
.badge-tbd,
.badge-espera  { color: var(--text-dim); }
.badge-fallo   { color: var(--magenta); }
.badge-evento  { color: var(--text); }

/* Estado de un destacado. Se ve como una pastilla pero NO es .badge: lo que
   escribe la casa ahí es una frase ("Aplazado, sin fecha nueva"), y .badge va
   con white-space: nowrap, que a 320 px empuja la tarjeta fuera de la página.
   Esta clase es la misma pastilla con permiso para partir la línea. */
.estado-casa {
  font-family: var(--font-sidera);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--text-muted);
  max-width: 100%;
}

.lanz-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.lanz-cab .eyebrow { margin: 0; }

/* El nombre de la misión es lo que se busca en una lista larga, así que lleva
   el ámbar de dato de la casa: 9.00:1 sobre la superficie de la tarjeta. */
.lanz h3,
.destacado h3 { margin: 0; font-size: 1.08rem; color: var(--amber); }

.lanz p,
.destacado p { font-size: 0.94rem; color: var(--text-muted); margin: 0; }

/* Línea del cohete, el operador y el sitio. Va en la voz de la ficha técnica:
   más apagada que la prosa, porque son etiquetas y no una frase. */
.lanz-linea {
  font-size: 0.86rem !important;
  color: var(--text-dim) !important;
}

/* Rótulo de "Qué es" y "Por qué importa". Mayúscula inicial por la regla 38, y
   en el blanco de la casa para que se despegue de la frase que introduce. */
.rotulo {
  color: var(--text);
  font-weight: 600;
}
.rotulo::after {
  content: ".";
}

/* Las tres horas de una ficha: la del reloj de quien mira, la de la casa y la
   del operador. En dos columnas, con numeración tabular para que la columna de
   las cifras quede a plomo. A 320 px la etiqueta y el valor caben en la misma
   fila porque la etiqueta es corta a propósito. */
.lanz-horas {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.28rem 0.7rem;
  font-size: 0.88rem;
}
.lanz-horas dt {
  color: var(--text-dim);
  font-weight: 600;
}
.lanz-horas dd {
  margin: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* La fila de la hora local es la que más se mira: va en el blanco de la casa
   en cuanto el navegador la escribe. Mientras no la escriba, se queda en el
   gris de las otras, porque entonces no es una hora sino una promesa. */
.lanz-horas dd[data-hora-local][data-listo] { color: var(--text); }

.lanz-aprox-nota,
.lanz-sin-enlace {
  font-size: 0.86rem !important;
  color: var(--text-dim) !important;
}

.lanz-estado-nota {
  font-size: 0.84rem !important;
  color: var(--text-dim) !important;
}

/* Nota de la casa: cuando la base de datos automática se ha quedado por detrás
   de la realidad, lo decimos aquí y se ve. Filete propio para que no se lea
   como una línea más de la ficha. */
.lanz-nota {
  border-left: 2px solid var(--amber);
  padding-left: 0.7rem;
  font-size: 0.88rem !important;
  color: var(--text-muted) !important;
}

.lanz-nota-canal {
  font-size: 0.82rem !important;
  color: var(--text-dim) !important;
}

/* El botón se pega al fondo de la tarjeta para que todas las fichas de una
   fila terminen a la misma altura aunque su prosa tenga distinto largo. */
.lanz-enlace,
.lanz-sin-enlace {
  margin-top: auto !important;
  padding-top: 0.4rem;
}
.lanz-enlace + .lanz-nota-canal { margin-top: 0.35rem !important; }
.lanz .btn { font-size: 0.88rem; padding: 0.55rem 1.05rem; }

/* Ficha de algo que ya ocurrió: se apaga el filete, nunca el texto. Bajar la
   opacidad de la tarjeta entera hundiría el contraste de la prosa por debajo
   de AA, que es la lección que dejó la lista de eventos. */
.lanz[data-pasado="si"] { border-left-color: var(--border); }
.lanz-pasado .lanz-cab .eyebrow { color: var(--text-dim); }

/* ---------------------------------------------------------- Destacados ---- */

.lanz-subtitulo {
  margin: 2.4rem 0 0;
  font-size: 1.25rem;
}

.lanz-fuentes-rotulo {
  margin-top: 0.3rem !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim) !important;
}
.lanz-fuentes {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.lanz-fuentes li { margin-bottom: 0.3rem; }
.lanz-fuentes a { color: var(--text-muted); }
.lanz-fuentes a:hover { color: var(--amber); }
.lanz-fuentes a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ------------------------------------------------ Canales de la guía ------ */

.canales {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) {
  .canales { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}
.canales > li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
}
.canales > li > a {
  font-weight: 700;
  color: var(--text);
}
.canales > li > a:hover { color: var(--amber); }
.canales > li > a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.canales p {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.canal-idioma {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
/* Aquí vivía .canal-origen, el chip de "(comprobado)" y "(sin abrir)" de cada
   canal. Salió el 3 de septiembre de 2026 con el párrafo que lo explicaba: sin
   esa explicación las dos palabras no querían decir nada. El campo `origen`
   sigue en js/lanzamientos.json, que es donde consta la revisión; lo que ya no
   hay es un rótulo publicado que nadie pueda interpretar. */

/* ------------------------------------------------- Guía plegable ---------- */

/* Los apartados de "Cómo ver un lanzamiento en vivo" se pliegan desde el 3 de
   septiembre de 2026, por pedido del creador: en una sola columna eran una
   plasta de texto que nadie iba a leer entera. Ese mismo día el plegado pasó a
   otras once páginas, así que .guia-plegable (y el .faq del que cuelga) se
   mudaron a css/site.css, que es la única hoja que cargan las veinte. Aquí solo
   queda dicho lo que estos bloques NO son: no espejan al nodo FAQPage de los
   datos estructurados, que sigue siendo el de las siete preguntas de #faq y de
   ninguna otra cosa. Por eso render_lanzamientos.py compara solo dentro de
   <section id="faq">. */

/* --------------------------------------------------------------- Sello ---- */

.sello {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.sello time { color: var(--text); }