/* ==========================================================================
   Sidera Cosmos — estilos de la página del eclipse
   Todos los colores salen de los tokens de css/site.css. Ningún hex vive aquí.
   ========================================================================== */

/* ---------------------------------------------------------- Hero -------- */

/* Degradado vertical de la casa: del negro espacial al azul profundo, calcado
   del banner del canal. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.4rem, 8vw, 4.6rem) clamp(2.2rem, 6vw, 3.6rem);
  border-bottom: 1px solid var(--border-soft);
  background-image: linear-gradient(to bottom, var(--bg), var(--bg-hero));
}

/* Campo de estrellas dibujado con gradientes: cero peso de imagen. Las
   estrellas viven en la orla exterior, fuera de la zona donde cae el texto,
   igual que el banner las concentra fuera de su zona segura. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 3% 14%, var(--star), transparent),
    radial-gradient(1.2px 1.2px at 6% 72%, var(--star-soft), transparent),
    radial-gradient(1.6px 1.6px at 96% 10%, var(--star), transparent),
    radial-gradient(1.1px 1.1px at 92% 62%, var(--star-soft), transparent),
    radial-gradient(1.5px 1.5px at 98% 88%, var(--star), transparent),
    radial-gradient(1.2px 1.2px at 2% 94%, var(--star-soft), transparent),
    radial-gradient(1.3px 1.3px at 22% 97%, var(--star-soft), transparent),
    radial-gradient(1.1px 1.1px at 74% 96%, var(--star-soft), transparent),
    radial-gradient(1.4px 1.4px at 44% 4%, var(--star-soft), transparent),
    radial-gradient(1.2px 1.2px at 88% 3%, var(--star), transparent);
}

/* Asiento del texto: ninguna línea se apoya directamente sobre el campo
   estrellado. La atenuación es la del banner (0.28) y se abre hacia los
   bordes, donde no hay texto. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(115% 85% at 45% 48%, var(--seat) 0%, var(--scrim-0) 68%);
}

.hero > .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  gap: clamp(1.8rem, 5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.hero h1 { margin-bottom: 0.5rem; }
/* Ámbar plano, sin degradado: un degradado sobre el texto produciría naranjas
   intermedios que no son de la casa y deja el contraste sin medir. */
.hero h1 .accent { color: var(--amber); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}
.hero-meta li {
  font-size: 0.83rem;
  font-family: var(--font-sidera);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
}

/* ------------------------------------------------------- Luna SVG ------- */

.moon-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.moon-figure svg {
  width: min(100%, 19rem);
  height: auto;
  filter: drop-shadow(0 0 40px var(--amber-glow));
}
.moon-figure figcaption {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  max-width: 22rem;
  line-height: 1.55;
}

/* ------------------------------------------------------- Countdown ------ */

.countdown {
  margin-top: 1.9rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.2rem 1.15rem 1.3rem;
}

.countdown-label {
  font-family: var(--font-sidera);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
}

.countdown-units {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  margin: 0;
}
.countdown-units > div {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.25rem 0.5rem;
  text-align: center;
}
.countdown-units dt {
  order: 2;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-dim);
  margin-top: 0.15rem;
}
/* Las cifras van en blanco de casa: el ámbar de esta vista lo tiene el par de
   casa del h1, y el ámbar señala una sola cosa por pantalla. El peso lo dan
   el tamaño y la numeración tabular. */
.countdown-units dd {
  order: 1;
  margin: 0;
  font-family: var(--font-sidera);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(1.6rem, 8vw, 2.5rem);
  line-height: 1.05;
  color: var(--text);
}

.countdown-status {
  margin: 0.95rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Estado: en curso / terminado. Los estados se resuelven con neutros y con el
   propio texto; el ámbar y el magenta tienen significado reservado. */
.countdown[data-state="en-curso"] { border-color: var(--line); }
.countdown[data-state="en-curso"] .countdown-label { color: var(--text); }
.countdown[data-state="terminado"] { border-color: var(--border); background: var(--surface); }
.countdown[data-state="terminado"] .countdown-label { color: var(--text-muted); }

.countdown-message {
  display: none;
  font-family: var(--font-sidera);
  font-weight: 700;
  font-size: clamp(1.3rem, 5.2vw, 1.9rem);
  line-height: 1.25;
  margin: 0;
  color: var(--text);
}
.countdown[data-state="en-curso"] .countdown-message,
.countdown[data-state="terminado"] .countdown-message { display: block; }
.countdown[data-state="en-curso"] .countdown-units,
.countdown[data-state="terminado"] .countdown-units { display: none; }

/* Latido suave sólo mientras el eclipse ocurre */
.countdown[data-state="en-curso"] .countdown-message {
  animation: pulso 2.6s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.62; }
}

/* -------------------------------------------------------- Horarios ------ */

/* El contenedor scrollea en horizontal. Las dos capas de fondo forman la
   sombra de scroll del borde derecho: la primera (la "tapa") lleva
   background-attachment:local, así que viaja con el contenido y cubre la
   sombra justo al llegar al final; la segunda (la sombra) va con attachment
   scroll y se queda pegada al borde visible. Si no queda nada por desplazar,
   la sombra desaparece sola. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(to left, var(--surface) 45%, var(--surface-0)),
    linear-gradient(to left, var(--scrim), var(--scrim-0));
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 3rem 100%, 1.15rem 100%;
  background-attachment: local, scroll;
}

/* Aviso explícito de que hay más columnas a la derecha. Sólo por debajo de
   46rem, que es donde la tabla no cabe en pantalla. Va en position:sticky
   para no perderse al desplazar; si el navegador no lo fijara, seguiría
   siendo visible en la posición inicial, que es cuando hace falta. */
@media (max-width: 46rem) {
  .table-scroll::before {
    content: "Desliza la tabla para ver más ciudades →";
    display: block;
    position: sticky;
    left: 0;
    z-index: 4;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-sidera);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-strong);
  }
}

/* Si algún día se añade tabindex="0" al contenedor (ver nota de accesibilidad),
   el foco de teclado tiene que verse dentro del borde redondeado. */
.table-scroll:focus-visible { outline-offset: -3px; }

table.horarios {
  width: 100%;
  min-width: 46rem;
  /* Bordes separados a propósito: con border-collapse:collapse los bordes
     pertenecen a la tabla y no acompañan a las celdas position:sticky, así que
     la columna fija se quedaría sin sus líneas al desplazar. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

table.horarios caption {
  caption-side: bottom;
  text-align: left;
  padding: 0.9rem 1rem 1rem;
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.6;
}

table.horarios th,
table.horarios td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

table.horarios thead th {
  background-color: var(--surface-2);
  font-family: var(--font-sidera);
  font-size: 0.77rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
}

/* Columna de fases fija. Es lo que evita el fallo grave: al desplazarse hasta
   Buenos Aires o Madrid ya no se pierden a la vez la cabecera y la etiqueta de
   fila, y no hay forma de leer la hora en la fila equivocada. Necesita fondo
   opaco para que las horas pasen por debajo sin transparentarse, y una línea
   más fuerte que el fondo para que se vea el corte. */
table.horarios tbody th,
table.horarios thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  white-space: normal;
  background-color: var(--surface-2);
  border-right: 1px solid var(--border-strong);
}
/* La esquina superior izquierda se solapa con las dos direcciones. */
table.horarios thead th:first-child { z-index: 3; }

table.horarios tbody th {
  font-weight: 600;
  color: var(--text);
  font-size: 0.92rem;
}
table.horarios tbody th small {
  display: block;
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Fila del máximo: es el dato clave de esta vista y por eso lleva el ámbar de
   dato. 9.00:1 sobre la superficie de la tabla. */
table.horarios tr.fila-max td {
  background-color: var(--amber-tint);
  color: var(--amber);
  font-weight: 600;
}
/* La celda fija no puede usar un tinte translúcido sobre nada: se pinta el
   color base opaco y el tinte encima como capa de imagen. */
table.horarios tr.fila-max th {
  background-color: var(--surface-2);
  background-image: linear-gradient(var(--amber-tint), var(--amber-tint));
}

/* Acotado a tbody: sin el acotado, "tr:last-child" también casaba con la única
   fila de thead (es la última de su padre) y, por especificidad, le borraba la
   línea que separa la cabecera del cuerpo. */
table.horarios tbody tr:last-child th,
table.horarios tbody tr:last-child td { border-bottom: 0; }

table.horarios .dia { color: var(--text-dim); font-size: 0.78rem; }
table.horarios .no-visible { color: var(--text-dim); }
table.horarios .no-visible::after {
  content: " *";
  color: var(--text-muted);
  font-weight: 700;
}

/* ---- Teléfono: se aprovecha cada píxel de ancho para desplazar menos ---- */
@media (max-width: 46rem) {
  table.horarios {
    min-width: 0;
    font-size: 0.88rem;
  }
  table.horarios th,
  table.horarios td { padding: 0.6rem 0.65rem; }
  table.horarios caption { padding: 0.8rem 0.9rem 0.9rem; }
  /* Se permite el salto de línea dentro de la celda (la fecha baja debajo de
     la hora) pero nunca dentro de la hora ni dentro de la fecha. Así cada
     columna ocupa poco más de lo que mide "27 ago" y caben más ciudades. */
  table.horarios thead th,
  table.horarios td { white-space: normal; }
  table.horarios td time,
  table.horarios thead th small,
  table.horarios .dia { white-space: nowrap; }
  table.horarios tbody th,
  table.horarios thead th:first-child { width: 8.5rem; }
}

/* -------------------------------------------------- Regiones / listas --- */

.region-list {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) {
  .region-list { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}
.region-list > li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}
.region-list > li h3 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.region-list > li p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }

/* Escala de visibilidad. Teal para lo que se ve entero (el color de la casa
   para series y mapas de visibilidad) y la escala azul-neutra descendiendo
   hasta lo que no se ve. Sin verde neón, rechazado como color de datos, y sin
   ámbar: es una lista, y las listas enteras en ámbar están prohibidas. */
.region-list > li[data-nivel="excelente"] { border-left-color: var(--teal); }
.region-list > li[data-nivel="bueno"]     { border-left-color: var(--line); }
.region-list > li[data-nivel="parcial"]   { border-left-color: var(--border-strong); }
.region-list > li[data-nivel="nulo"]      { border-left-color: var(--border); }

.badge {
  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;
  white-space: nowrap;
}
/* Contraste sobre la superficie de la tarjeta (--surface): teal 5.88:1,
   --text 15.40:1, --text-muted 9.97:1, --text-dim 8.35:1. */
[data-nivel="excelente"] .badge { color: var(--teal); }
[data-nivel="bueno"]     .badge { color: var(--text); }
[data-nivel="parcial"]   .badge { color: var(--text-muted); }
[data-nivel="nulo"]      .badge { color: var(--text-dim); }

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

.guia-list {
  list-style: none;
  counter-reset: paso;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 46rem) {
  .guia-list { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}
.guia-list > li {
  counter-increment: paso;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.15rem 1.15rem 1.15rem;
  position: relative;
}
.guia-list > li::before {
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-sidera);
  font-weight: 700;
  font-size: 0.9rem;
}
.guia-list h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.guia-list p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }

/* ----------------------------------------------------------- FAQ -------- */

.faq { margin-top: 1.6rem; display: grid; gap: 0.7rem; }

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq details[open] { border-color: var(--border-strong); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2.9rem 1rem 1.15rem;
  font-family: var(--font-sidera);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text-muted);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover,
.faq summary:focus-visible { color: var(--amber); }
.faq summary:hover::after,
.faq summary:focus-visible::after { color: var(--amber); }

/* El overflow:hidden de .faq details recorta el outline-offset:3px global y
   deja el foco de teclado invisible en los seis acordeones. Se mete hacia
   dentro para que el trazo caiga dentro de la caja recortada. */
.faq summary:focus-visible { outline-offset: -3px; }

.faq .faq-body {
  padding: 0 1.15rem 1.15rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ----------------------------------------------------------- CTA -------- */

/* Módulo de interfaz, separado del cierre de prosa: es función, no
   conclusión. Va en superficie de la casa, sin tinte de acento. */
.cta {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 5vw, 2.6rem);
  text-align: center;
}
.cta h2 { margin-bottom: 0.6rem; }
.cta p { margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* ------------------------------------------------------- Sumario -------- */

.toc {
  margin: 1.6rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.toc h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin: 0 0 0.6rem;
}
.toc ol {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.93rem;
  color: var(--text-muted);
  display: grid;
  gap: 0.25rem;
}

/* ------------------------------------------------------- Fuentes -------- */

.fuentes { font-size: 0.87rem; color: var(--text-dim); }
.fuentes ul { padding-left: 1.15rem; margin: 0.6rem 0 0; display: grid; gap: 0.3rem; }
.fuentes a { color: var(--text-muted); }
.fuentes a:hover,
.fuentes a:focus-visible { color: var(--amber); }