*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ---------- VARIABLES DE TEMA ---------- */
:root {

  --accent-soft: rgba(56, 189, 248, 0.15);
  --border-subtle: rgba(148, 163, 184, 0.3);

  --planet-size-main: 6rem;
  --planet-size-orbit: 3.7rem;
  --planet-size-satellite: 1.5rem;
}

/* ---------- LAYOUT GENERAL ---------- */


#planet-system-root {
  max-width: 960px;
  margin: 1.6rem auto 2rem;
  padding: 0 1.2rem;
}

/* ---------- PLANET SYSTEM LAYOUT ---------- */

.planet-system {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: system-fade-in 0.5s ease-out;
}

.planet-system__inner {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}


  .planet-system__inner {
    grid-template-columns: minmax(0, 1fr);
  }


/* ---------- PANEL DE INFORMACIÓN ---------- */

.planet-info {
  background: var(--card-bg);
  border-radius: 1.25rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.planet-info__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.planet-info__chip {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
}



.planet-info__back {
  border-radius: 999px;
  border: none;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.planet-info__back:hover {
  color: var(--text);
}

.planet-info__title {
  font-size: 1.25rem;
  font-weight: 600;
}

.planet-info__subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.planet-info__description {
  margin: 0.25rem 0 0.4rem;
  font-size: 0.9rem;
  color: var(--text);
}

.planet-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.planet-info__tag {
  font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(56, 189, 248, 0.2);
}



.planet-info__actions {
  /* margin-top: 0.4rem; */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.planet-info__action-btn {
  border-radius: 999px;
  border: none;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  background: 

    var(--accent-soft2)
  ;
  color: var(--text);
  box-shadow: 0 10px 25px rgba(30, 64, 175, 0.55);
}

.planet-info--loading {
  opacity: 0.7;
}

/* ---------- ESPACIO / SISTEMA SOLAR ---------- */

.planet-system__space {
  position: relative;
  touch-action: none;
  overflow: hidden;

  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  min-height: 420px;

  /* Fondo basado en el tema global */
  background:
    radial-gradient(circle at 20% 0%, var(--accent2-soft) 0, transparent 55%),
    radial-gradient(circle at 80% 90%, var(--accent-soft) 0, transparent 50%),
    linear-gradient(145deg, var(--card-bg), var(--bg));

  box-shadow: var(--shadow-soft);
  cursor: grab;

  /* Profundidad 3D */
  perspective: 1200px;
  transform-style: preserve-3d;
}




.planet-system__gradient {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.32) 0, transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(251, 146, 60, 0.24) 0, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(56, 189, 248, 0.18) 0, transparent 45%);
  opacity: 0.7;
  pointer-events: none;
}

.planet-system__center-layer,
.planet-system__orbits-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* El gradiente se queda por detrás */
.planet-system__gradient {
  position: absolute;
  inset: -40%;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.32) 0, transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(251, 146, 60, 0.24) 0, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(56, 189, 248, 0.18) 0, transparent 45%);
  opacity: 0.7;
  pointer-events: none;
}

/* Permite clic en planetas y satélites */
.planet,
.planet--satellite {
  pointer-events: auto;
}


/* ---------- PLANETAS Y ÓRBITAS ---------- */

.planet {
  --planet-size: var(--planet-size-orbit);
  --planet-accent: var(--accent2);

  position: absolute;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: center;
}

.planet__body {
  position: relative;
  width: var(--planet-size);
  height: var(--planet-size);
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  color: var(--text);
  /* background: radial-gradient(circle at 30% 20%, #ffffff 0, var(--planet-accent) 40%, #020617 75%); */
  box-shadow:
    0 0 25px rgba(15, 23, 42, 0.9),
    0 0 40px rgba(56, 189, 248, 0.35);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


.planet__glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 30% 0%, rgba(248, 250, 252, 0.28) 0, transparent 60%);
  opacity: 0.8;
  pointer-events: none;
}

.planet__logo {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 1;
}

.planet__title {
  position: relative;
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  padding-inline: 0.3rem;
  z-index: 1;
}

.planet__subtitle {
  position: relative;
  font-size: 0.65rem;
  color: var(--muted);
  padding-inline: 0.5rem;
  margin-top: 0.1rem;
}

/* Centro */
.planet--center {
  --planet-size: var(--planet-size-main);

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1.1);
}

.planet--center .planet__title {
  font-size: 0.9rem;
}

.planet--center .planet__logo {
  font-size: 1.1rem;
}

/* Órbitas principales (planetas que orbitan el centro) */

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--orbit-radius) * 2);
  height: calc(var(--orbit-radius) * 2);
  margin-top: calc(var(--orbit-radius) * -1);
  margin-left: calc(var(--orbit-radius) * -1);
  border-radius: 999px;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  /* animation: orbit var(--orbit-duration) linear infinite; */
  pointer-events: none;
}

.orbit--level-1 {
  /* border-style: solid; */
}

.planet--orbit {
  --planet-size: var(--planet-size-orbit);

  top: 50%;
  left: 50%;
  transform: rotate(var(--planet-angle)) translateX(var(--orbit-radius))
    rotate(calc(var(--planet-angle) * -1));
}

/* Satélites (mini planetas alrededor de un planeta de órbita) */

.orbit--satellites {
  --orbit-radius: 35px;
  --orbit-duration: 24s;

  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--orbit-radius) * 2);
  height: calc(var(--orbit-radius) * 2);
  margin-top: calc(var(--orbit-radius) * -1);
  margin-left: calc(var(--orbit-radius) * -1);
  border-radius: 999px;
  border: 1px dashed rgba(148, 163, 184, 0.32);
  animation: orbit var(--orbit-duration) linear infinite;
  pointer-events: none;
}

.planet--satellite {
  --planet-size: var(--planet-size-satellite);

  top: 50%;
  left: 50%;
  transform: rotate(var(--planet-angle)) translateX(var(--orbit-radius))
    rotate(calc(var(--planet-angle) * -1));
}

.planet__body--satellite {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.7);
}

.planet__logo--satellite {
  font-size: 0.6rem;
}
.planet {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.planet__title,
.planet__subtitle {
  text-align: center;
}

.planet__title--below-logo {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.2;
}

.planet__title--satellite-below-logo {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  line-height: 1.1;

}
/* ---------- ANIMACIONES ---------- */

@keyframes orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes system-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.planet-system--enter .planet-system__space {
  animation: system-fade-in 0.4s ease-out;
}
/* estrellas */
.planet-system__space::before {
  content: "";
  position: absolute;
  inset: 0%;
  background-image:
    radial-gradient(2px 2px at 10% 8%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 18%, rgba(248, 250, 252, 0.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 35% 10%, rgba(148, 163, 184, 0.9), transparent 60%),
    radial-gradient(1.4px 1.4px at 50% 22%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(2px 2px at 70% 15%, rgba(148, 163, 184, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 28%, rgba(248, 250, 252, 0.85), transparent 60%),
    radial-gradient(1.6px 1.6px at 18% 70%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 40% 82%, rgba(148, 163, 184, 0.9), transparent 60%),
    radial-gradient(1.7px 1.7px at 63% 78%, rgba(248, 250, 252, 0.9), transparent 60%),
    radial-gradient(2px 2px at 78% 88%, rgba(148, 163, 184, 0.9), transparent 60%);
  opacity: 0.8;
  mix-blend-mode:luminosity;
  pointer-events: none;
}


/* Vista general que se puede escalar y desplazar */

.planet-system__viewport {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  will-change: transform;
}

/* Controles de zoom (+ / -) */

.planet-system__controls {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.planet-system__controls button {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-bg) ;
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: opacity(0.75);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease, border-color 0.15s ease;
}

.planet-system__controls button:hover {
  transform: translateY(-1px);
  background: var(--accent2-soft);
  border-color: var(--accent2);
}

/* Cursor tipo mano al desplazar */

.planet-system__space {
  cursor: grab;
}

.planet-system__space--panning {
  cursor: grabbing;
}

/* Órbitas con más presencia (mejora de líneas discontinuas) */

.orbit {
  border-radius: 999px;
  border-style: dashed;
  border-width: 1px;
  border-color: rgba(148, 163, 184, 0.38);
  box-shadow:
    0 0 16px rgba(56, 189, 248, 0.25),
    0 0 32px rgba(15, 23, 42, 0.8);
}

.orbit::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(15, 23, 42, 0.85);
  opacity: 0.3;
  pointer-events: none;
}

/* Logo de planeta como imagen opcional */

.planet__logo-img {
  width: 107%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 12px rgba(15, 23, 42, 0.9));
}

/* Llamas blancas sutiles en el planeta raíz (TriplexSolutio) */

.planet--center.planet--root .planet__body::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.95) 0, transparent 55%),
    conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0.78) 35deg,
      rgba(255, 255, 255, 0.05) 80deg,
      rgba(255, 255, 255, 0.75) 140deg,
      rgba(255, 255, 255, 0.02) 210deg,
      rgba(255, 255, 255, 0.7) 260deg,
      rgba(255, 255, 255, 0) 320deg
    );
  opacity: 0.7;
  mix-blend-mode: screen;
  filter: blur(2.2px);
  animation: ts-flame 2.6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes ts-flame {
  0% {
    transform: scale(1) translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.05) translateY(-1.5px);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.03) translateY(-0.5px);
    opacity: 0.75;
  }
}
.planet-system__hint{
  padding:0 0.5rem;
}