/* ==========================================================================
   Sidera Cosmos — estilos de /eventos/ y /eclipses/
   --------------------------------------------------------------------------
   Extiende css/site.css y css/eclipse.css con clases NUEVAS: aquí no se
   redefine ni una sola regla de las hojas anteriores. Lo que ya existe se
   reutiliza tal cual (.hero, .cta, .faq, .toc, .table-scroll, table.horarios,
   .countdown, .badge, .fuentes), que es lo que hace que estas dos páginas se
   vean hermanas de la del eclipse y no primas lejanas.
   Todos los colores salen de los tokens de site.css. Ningún hex vive aquí.
   ========================================================================== */

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

/* Bloque destacado del hero: el evento que viene primero. Es un módulo de
   interfaz, no el cierre de una idea, así que va en superficie de la casa. */
.proximo {
  margin-top: 1.9rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 4vw, 1.8rem);
}
.proximo h2 {
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  margin: 0 0 0.35rem;
}
.proximo .lede { font-size: 1rem; margin-bottom: 0; }
/* La cuenta fina hereda el aspecto de .countdown; solo se le quita el margen
   superior, que aquí lo pone el propio bloque. */
.proximo .countdown { margin-top: 1.2rem; }
.proximo .btn-row { margin-top: 1.2rem; }

/* ----------------------------------------------------- Calendario -------- */

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

.evento {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  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 tipo de evento se lee por la etiqueta, no solo por el color: el color es
   apoyo. Teal para las lluvias (el secundario del par de la casa), blanco para
   los eclipses y neutro para los planetas. Sin ámbar: el presupuesto de ámbar
   de la vista se lo lleva el par de casa del título. */
.evento[data-tipo="lluvia"]   { border-left-color: var(--teal); }
.evento[data-tipo="eclipse"]  { border-left-color: var(--line); }
.evento[data-tipo="planetas"] { border-left-color: var(--border-strong); }
.evento[data-tipo="lluvia"]   .badge { color: var(--teal); }
.evento[data-tipo="eclipse"]  .badge { color: var(--text); }
.evento[data-tipo="planetas"] .badge { color: var(--text-muted); }

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

.evento h3 { margin: 0; font-size: 1.08rem; }

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

/* Contador. Sin JavaScript muestra la fecha absoluta, que es lo que hay que
   saber; con JavaScript pasa a "Faltan 43 días". Numeración tabular para que
   no baile de un segundo a otro.
   Sin white-space: nowrap a propósito. El texto de respaldo ("Noche del 27 al
   28 de agosto de 2026") mide bastante más que la pastilla, y en un teléfono de
   360 px un nowrap aquí empujaría la tarjeta y desbordaría la página entera.
   La cifra tampoco lo necesita: el separador de miles que escribe eventos.js es
   U+202F, que ya es un espacio irrompible. */
.evento-cuenta {
  align-self: flex-start;
  max-width: 100%;
  font-family: var(--font-sidera);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
}
/* Evento pasado: se apaga el contador, nunca el texto. Bajar la opacidad de
   toda la tarjeta hundiría el contraste de la prosa por debajo de AA. */
.evento[data-estado="pasado"] { border-left-color: var(--border); }
.evento[data-estado="pasado"] .evento-cuenta {
  color: var(--text-dim);
  background: var(--bg);
  border-color: var(--border);
}

/* Ficha de datos del evento: pares etiqueta/valor en dos columnas. */
.evento-datos {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.28rem 0.7rem;
  font-size: 0.88rem;
}
.evento-datos dt {
  color: var(--text-dim);
  font-weight: 600;
}
.evento-datos dd {
  margin: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.evento-mas {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* --------------------------------------------------- Eclipse mayor ------- */

/* Panel del eclipse destacado. Un solo panel por página: si se repitiera,
   dejaría de destacar nada. */
.eclipse-mayor {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 4.5vw, 2.2rem);
  margin-top: 1.6rem;
}
.eclipse-mayor h3 { margin-top: 1.6rem; }
.eclipse-mayor h3:first-of-type { margin-top: 1.2rem; }
.eclipse-mayor .table-scroll { margin-top: 1.2rem; }

/* Cifras de cabecera del panel. Aquí sí manda el número: etiqueta pequeña
   arriba, cifra grande debajo, en blanco de casa. */
.cifras {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}
.cifras > li {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.9rem;
}
.cifras .cifra {
  display: block;
  font-family: var(--font-sidera);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.4vw, 1.7rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  color: var(--text);
}
.cifras .rotulo {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------- Figura -------- */

/* Diagramas dibujados: SVG puro, sin una sola fotografía dentro del marco. */
.figura-dibujo {
  margin: 1.6rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.figura-dibujo svg {
  width: min(100%, 30rem);
  height: auto;
}
.figura-dibujo figcaption {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  max-width: 32rem;
  line-height: 1.55;
}

/* Piezas del esquema. Van como clases y no como atributos de relleno para que
   ningún hex viva fuera de site.css: el color entra por token. El ámbar del
   dibujo es --amber-mark, el del emblema y los diagramas, nunca el de dato. */
.diag-sol    { fill: var(--amber-mark); }
.diag-luna   { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.diag-corona { stroke: var(--text-muted); stroke-width: 1.4; stroke-linecap: round; }
.diag-etiqueta {
  fill: var(--text-muted);
  font-family: var(--font-sidera);
  font-size: 12px;
  font-weight: 600;
}

/* ---------------------------------------------------------- Avisos ------- */

/* Caja de precisión: la letra pequeña que el sitio pone a la vista en vez de
   esconderla. Neutra a propósito: los colores de estado no pueden usar ámbar
   ni magenta, que aquí significan otra cosa. */
.precision {
  border: 1px solid var(--border);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 1rem 1.15rem;
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.precision h3 {
  font-size: 0.95rem;
  margin: 0 0 0.45rem;
  color: var(--text);
}
.precision p { margin-bottom: 0.7rem; }
.precision p:last-child { margin-bottom: 0; }