/* ==========================================================================
   Sidera Cosmos — /esta-noche/
   --------------------------------------------------------------------------
   Hoja MÍNIMA. Solo tres cosas que no existen en ninguna otra parte del sitio:
   la caja de la Luna, la lista de las tres citas próximas y el reproductor de
   la pieza de Arthur.

   LO QUE ESTA HOJA NO HACE, Y ES LA MITAD DE SU TRABAJO
   No redefine ni una sola regla de css/site.css ni de css/eclipse.css. La
   página carga las dos y usa lo que ya vive ahí: .wrap, .prose, .lede, .note,
   .card, .card-grid, .card-link, .btn, .btn-row, .eyebrow, .tnum, .faq y su
   .faq-body (site.css), y .hero, .toc, .cta y .fuentes (eclipse.css). Las
   pastillas de estado tampoco se tocan: viven una sola vez, en site.css, y esta
   página no escribe ninguna.

   Ni un color literal: todo sale de las variables de identidad de site.css.
   ========================================================================== */

/* ------------------------------------------------------ La caja de la Luna */

/* Nace con [hidden] en el HTML y la enseña js/esta-noche.js cuando ya tiene los
   cuatro datos. No hay estilo para el estado escondido porque no hace falta:
   [hidden] ya lo esconde en todos los navegadores que soportan <details>, que
   es el suelo del resto del sitio. */
.luna-caja {
  margin-top: 1.6rem;
  padding: 1.35rem 1.3rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

/* El nombre de la fase es el dato principal de la sección, y va en el color del
   texto, no en ámbar: el presupuesto de ámbar de esta vista ya se gastó en la
   segunda línea del titular (par de casa, TIP-04). */
.luna-fase {
  font-family: var(--font-sidera);
  font-size: clamp(1.35rem, 4.2vw, 1.7rem);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1rem;
}

.luna-datos { margin: 0; }
.luna-datos > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.luna-datos > div:last-child { border-bottom: 0; }
@media (min-width: 30rem) {
  .luna-datos > div { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; }
}
.luna-datos dt {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.luna-datos dd {
  margin: 0;
  font-size: 1.02rem;
  color: var(--text);
}

/* La línea de consecuencia práctica: lo único que hay que llevarse de la caja
   si solo se lee una línea. Separada de la tabla por su propio filete. */
.luna-consecuencia {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

.luna-nota { margin-top: 0.9rem; }

/* ------------------------------------------------- Las tres citas próximas */

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

/* La tarjeta NO es un enlace entero, al contrario que las de .card-link: dentro
   lleva su propio enlace a la ficha, y un <a> dentro de otro <a> no es marcado
   válido ni funciona con teclado. */
.cita {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.cita-cuando {
  font-family: var(--font-sidera);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  margin: 0 0 0.45rem;
}
.cita h3 { margin: 0 0 0.5rem; font-size: 1.08rem; }
.cita-que { margin: 0 0 1rem; }
.cita-enlace { margin-top: auto; font-size: 0.92rem; }

.citas-sello { margin-top: 1rem; }

/* ------------------------------------------------ La pieza de audio ------ */

.audio-caja {
  margin-top: 1.6rem;
  padding: 1.25rem 1.3rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* El reproductor lo dibuja el navegador y cada uno lo dibuja a su manera: aquí
   solo se le fija el ancho y una altura mínima cómoda para el dedo. Intentar
   repintarlo con controles propios costaría teclado, lectores de pantalla y la
   velocidad de reproducción que algunos navegadores ya ofrecen gratis. */
.audio-caja audio {
  display: block;
  width: 100%;
  min-height: 2.6rem;
}

.audio-transparencia { margin: 0.9rem 0 0; }
.audio-transparencia a { margin-left: 0.35rem; }

.transcripcion { margin-top: 1.3rem; }