/* ==========================================================================
   Sidera Cosmos — estilos de las páginas de lluvias de estrellas
   --------------------------------------------------------------------------
   Hoja de EXTENSIÓN. No redefine ni una sola clase de css/site.css ni de
   css/eclipse.css: las cuatro páginas cargan las tres hojas y reutilizan tal
   cual .hero, .hero-grid, .hero-meta, .countdown, .toc, .guia-list, .faq,
   .cta, .fuentes, .card y .card-grid. Aquí viven solamente las piezas que la
   página del eclipse no tenía: el aviso de honestidad, la ficha de datos, las
   dos figuras dibujadas y su leyenda.
   Ningún hex vive en este archivo: todos los colores salen de los tokens del
   bloque :root de css/site.css (GOB-01).
   ========================================================================== */

/* ----------------------------------------------------------- Aviso ------- */

/* Caja de honestidad: se usa cuando el dato principal de la página necesita
   una reserva puesta por delante (el máximo de las Perseidas de 2026 que ya
   quedó atrás, las Cuadrántidas que no se levantan desde el hemisferio sur).
   Va en neutros: el ámbar señala una sola cosa por vista, y el magenta tiene
   significado reservado en los esquemas de la casa. */
.aviso {
  margin: 1.5rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.94rem;
}
.aviso p { margin: 0; }
.aviso p + p { margin-top: 0.6rem; }
.aviso .aviso-titulo {
  font-family: var(--font-sidera);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.35rem;
}

/* ----------------------------------------------------------- Ficha ------- */

/* Capa utilitaria pura: dato a la izquierda, valor a la derecha, cero
   metáfora. En teléfono se apila; a partir de 34rem el término ocupa una
   columna fija para que los valores queden alineados. */
.ficha {
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  font-size: 0.94rem;
}
.ficha > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem 1rem;
  padding: 0.8rem 1.05rem;
  border-bottom: 1px solid var(--border);
}
.ficha > div:last-child { border-bottom: 0; }
@media (min-width: 34rem) {
  .ficha > div { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; }
}
.ficha dt {
  font-family: var(--font-sidera);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.ficha dd {
  margin: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ficha dd small {
  display: block;
  font-size: 0.82rem;
  color: var(--text-dim);
  font-variant-numeric: normal;
}
/* Fila destacada: el dato clave de la ficha, y solo uno por ficha. */
.ficha > div.ficha-clave { background-image: linear-gradient(var(--amber-tint), var(--amber-tint)); }
.ficha > div.ficha-clave dd { color: var(--amber); font-weight: 600; }

/* --------------------------------------------------------- Figuras ------ */

/* Mini-mapa del radiante. Dibujo puro: ni un píxel fotográfico dentro del
   marco, que es lo que manda el matiz de la regla del material real para el
   lenguaje de esquemas (IMG-03). */
.mapa-figura,
.diagrama-figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.mapa-figura svg { width: min(100%, 21rem); height: auto; }
.diagrama-figura { margin-top: 1.8rem; align-items: stretch; }
.diagrama-figura svg { width: 100%; height: auto; }

.mapa-figura figcaption,
.diagrama-figura figcaption {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 30rem;
}
.mapa-figura figcaption { text-align: center; max-width: 22rem; }

/* Marco de asiento: ninguna línea del dibujo se apoya sobre el campo
   estrellado del hero. */
.marco { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }

/* Estrellas de referencia y trazos de constelación. Los grises son "lo
   propio" del código de color de la casa; el ámbar de dibujo queda reservado
   al radiante, que es el dato clave del esquema. */
.est { fill: var(--grey-own); }
.est-ref { fill: var(--text); }
.lin {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.meteoro {
  stroke: var(--text-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.85;
}
.rad { fill: var(--amber-mark); }
.rad-halo {
  fill: none;
  stroke: var(--amber-mark);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
  opacity: 0.9;
}
.rot {
  font-family: var(--font-sidera);
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-muted);
}
.rot-rad { fill: var(--amber-mark); }
.rot-eje {
  font-family: var(--font-sidera);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  fill: var(--text-dim);
}
.flecha { fill: none; stroke: var(--grey-own); stroke-width: 1.4; stroke-linecap: round; }
.flecha-fuga { fill: none; stroke: var(--text-muted); stroke-width: 1.4; stroke-linecap: round; }
.suelo { fill: none; stroke: var(--border-strong); stroke-width: 1.4; }

/* Leyenda del esquema: el color significa, así que el significado se escribe.
   Va bajo la figura y forma parte del texto que lee un lector de pantalla. */
.leyenda {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.leyenda li { display: inline-flex; align-items: center; gap: 0.4rem; }
.leyenda i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  flex: none;
  background: var(--grey-own);
}
.leyenda .llave-rad { background: var(--amber-mark); }
.leyenda .llave-lin { background: var(--line); }

/* ------------------------------------------------------ Otras lluvias --- */

/* Enlaces entre páginas hermanas. Reutiliza .card-grid y .card de site.css;
   aquí solo se hace que la tarjeta entera responda como enlace. */
.card-lluvia { display: block; text-decoration: none; }
.card-lluvia:hover,
.card-lluvia:focus-visible { border-color: var(--border-strong); color: var(--text); }
.card-lluvia h3 { margin-bottom: 0.3rem; }
.card-lluvia:hover h3,
.card-lluvia:focus-visible h3 { color: var(--amber); }