/* ============================================================================
   Cuerpos celestes dibujados
   La tarjeta de cada cuerpo (Hoy y la Carta) y el diagrama de un aspecto. Los dibujan cosmic-body.js (la Luna, el Sol
   o el planeta) y cosmic-aspect.js (el ángulo entre dos cuerpos); esta hoja es de las dos páginas, no de una.
   Lo que es de una sola página (que la tarjeta de Hoy sea pulsable y se marque) queda en su hoja (today.css).
============================================================================ */

/* ── Rejilla de tarjetas ──────────────────────────────────────────────────── */
.page-cielo .cuerpo-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cuerpo-grid .sky-card {
  width: 100%;
}

@media (max-width: 1180px) {
  .page-cielo .cuerpo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .page-cielo .cuerpo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Tarjeta de un cuerpo ─────────────────────────────────────────────────── */
/* La esfera de la cabecera: la misma caja (64 px) para la Luna, el Sol y los planetas, con un resplandor del color de
   la tarjeta. La Luna lo gradúa con su parte iluminada; la corona del Sol y los anillos de Saturno sobresalen de su
   caja, por dentro del relleno de la tarjeta. */
.cuerpo-card .cuerpo-luna {
  --luna-tamano: 64px;
  filter: drop-shadow(0 0 calc(4px + 10px * var(--luna-brillo, 0.5)) color-mix(in srgb, var(--card-color) calc(14% + 34% * var(--luna-brillo, 0.5)), transparent));
}

.cuerpo-card .cuerpo-sol {
  --sol-tamano: 64px;
}

.cuerpo-card .cuerpo-planeta {
  --planeta-tamano: 64px;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--card-color) 30%, transparent));
}

/* Con cinco tarjetas por fila miden unos 210 px: el rótulo más largo («PLANETA TRANSPERSONAL») no cabía con el espaciado
   de letras de siempre. */
.cuerpo-grid .sky-card-kicker {
  letter-spacing: 0.1em;
}

.cuerpo-signo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 16px 0 0;
  color: var(--text);
  font-family: var(--font-h);
  font-size: 15px;
  line-height: 1.35;
}

.cuerpo-signo cosmic-icon {
  --icono-tamano: 20px;
  flex: none;
  color: var(--card-color);
}

.cuerpo-meta {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cuerpo-tag--retro {
  border-color: rgba(255, 123, 92, 0.55);
  color: #ffb4a0;
}

.cuerpo-tag--incierto {
  border-style: dashed;
  color: var(--text-muted);
}

/* Los cuerpos siguen de dos en dos en móvil: la cabecera pasa a ir en vertical (la esfera arriba, el nombre debajo) y
   se estrecha lo demás. La esfera lleva margen para que la corona del Sol y los anillos de Saturno, que sobresalen de
   su caja, no los recorte el borde de la tarjeta (overflow: hidden). */
@media (max-width: 560px) {
  .page-cielo .cuerpo-grid {
    gap: 10px;
  }

  .cuerpo-grid .sky-card {
    padding: 14px;
  }

  .cuerpo-grid .sky-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cuerpo-card .cuerpo-luna,
  .cuerpo-card .cuerpo-sol,
  .cuerpo-card .cuerpo-planeta {
    margin: 6px 0 0 6px;
  }

  .cuerpo-grid .cuerpo-signo {
    margin-top: 12px;
    font-size: 14px;
  }

  .cuerpo-grid .cuerpo-meta {
    font-size: 12.5px;
  }

  .cuerpo-grid .sky-tags {
    gap: 5px;
  }

  .cuerpo-grid .sky-tag {
    padding: 2px 7px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }
}

/* ── Aspecto: el ángulo entre dos cuerpos ─────────────────────────────────── */
.aspecto-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aspecto-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(var(--gold-muted-rgb), 0.14);
  border-left: 3px solid var(--tone, var(--gold));
  border-radius: var(--r-md);
  background: rgba(14, 12, 40, 0.8);
}

.aspecto-card--supreme {
  background: rgba(255, 255, 255, 0.07);
}

.aspecto-card--weak {
  opacity: 0.86;
}

.aspecto-texto {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.aspecto-titulo {
  color: var(--text);
  font-family: var(--font-h);
  font-size: 15px;
  line-height: 1.5;
}

.aspecto-simbolo {
  margin-inline: 0.3em;
  color: var(--tone, var(--gold));
  font-size: 1.15em;
}

.aspecto-meta {
  color: var(--gold-light);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.aspecto-significado {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* El diagrama: una media circunferencia con los dos cuerpos y el arco entre ellos. Mide --aspecto-ancho (104 px) por 5/8
   de alto, y los cuerpos se dimensionan con él. No recorta (overflow visible): los anillos de Saturno sobresalen. */
.aspecto {
  --aspecto-ancho: 104px;
  position: relative;
  display: block;
  flex: none;
  width: var(--aspecto-ancho);
  height: calc(var(--aspecto-ancho) * 0.625);
}

.aspecto svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aspecto-anillo {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1;
}

.aspecto-arco {
  fill: none;
  stroke: var(--tone, var(--gold));
  stroke-linecap: round;
}

.aspecto-arco--supreme {
  stroke-width: 3;
  filter: drop-shadow(0 0 3px var(--tone, var(--gold)));
}

.aspecto-arco--strong {
  stroke-width: 2.2;
  filter: drop-shadow(0 0 2px var(--tone, var(--gold)));
}

.aspecto-arco--weak {
  stroke-width: 1.5;
  stroke-dasharray: 2 3.2;
}

.aspecto-halo {
  fill: var(--tone, var(--gold));
  opacity: 0.28;
  filter: blur(4px);
}

.aspecto .aspecto-cuerpo {
  position: absolute;
  display: block;
  line-height: 0;
  transform: translate(-50%, -50%);
}

/* Los cuerpos del diagrama miden una fracción de su ancho (25 %); Saturno, con sus anillos, algo más de caja para que su
   globo no quede pequeñito. Con más no se lee el ángulo: en un sextil (60°) los dos cuerpos distan un tercio del ancho y
   tienen que dejar ver el arco entre ellos. */
.aspecto .cuerpo-luna {
  --luna-tamano: calc(var(--aspecto-ancho) * 0.25);
}

.aspecto .cuerpo-sol {
  --sol-tamano: calc(var(--aspecto-ancho) * 0.25);
}

.aspecto .cuerpo-planeta {
  --planeta-tamano: calc(var(--aspecto-ancho) * 0.25);
}

.aspecto cosmic-planet[name="saturno"] {
  --planeta-tamano: calc(var(--aspecto-ancho) * 0.31);
}

@media (max-width: 420px) {
  .aspecto-card {
    gap: 12px;
    padding-right: 12px;
  }

  .aspecto {
    --aspecto-ancho: 90px;
  }
}