body {
  background-color: #592851;
  margin: 0;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}


.index {
  flex: 1;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 5%;
}
.atom {
  position: relative;
  width: 90vmin;
  aspect-ratio: 1/1;
}

.orbit {
  position: absolute;
  height: 100%;
  width: 100%;
}

.outer-orbit {
  position: absolute;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid #86a694;
  border-radius: 50%;
}

.inner-orbit {
  position: absolute;
  width: 60%;
  aspect-ratio: 1 / 1;
  border: 2px solid #86a694;
  border-radius: 50%;
  top: 20%;
  left: 20%;
  display: flex;
  align-items: center; /* centra verticalmente */
  justify-content: center;
}

.fluor-image {
  width: 70%;
}
.proton {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
}

footer{
  margin-top: auto;
}

@keyframes orbit-outer {
  0% {
    transform: rotate(0deg) translateX(45vmin) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(45vmin) rotate(-360deg);
  }
}

@keyframes orbit-inner {
  0% {
    transform: rotate(0deg) translateX(27vmin) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(27vmin) rotate(-360deg);
  }
}

/* Estilos base para todos los protones */
.proton-1,
.proton-2,
.proton-3,
.proton-4,
.proton-5,
.proton-6,
.proton-7,
.proton-8,
.proton-9 {
  position: absolute;
  width: 15%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 5px;
  /* Posición central para que funcione la rotación */
  top: 50%;
  left: 50%;
  margin-top: -7.5%; /* Ajustar para centrar (mitad del width) */
  margin-left: -7.5%; /* Ajustar para centrar (mitad del width) */
}

/* Protones en órbita externa */
.proton-1 {
  background: radial-gradient(circle at 25% 25%, #ffffff 0%, #bfaaaa 60%);
  animation: orbit-outer 60s linear infinite;
  animation-delay: -0s;
}

.proton-5 {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #86a694 50%);
  animation: orbit-outer 60s linear infinite;
  animation-delay: -12s;
}

.proton-6 {
  background: radial-gradient(circle at 25% 25%, #ffffff 0%, #fdf6e2 60%);
  animation: orbit-outer 60s linear infinite;
  animation-delay: -24s;
}

.proton-7 {
  background: radial-gradient(circle at 25% 25%, #ffffff 0%, #fdf6e2 60%);
  animation: orbit-outer 60s linear infinite;
  animation-delay: -36s;
}

.proton-8 {
  background: radial-gradient(circle at 25% 25%, #ffffff 0%, #fdf6e2 60%);
  animation: orbit-outer 60s linear infinite;
  animation-delay: -48s;
}

/* Protones en órbita interna */
.proton-2 {
  background: radial-gradient(circle at 25% 25%, #ffffff 0%, #732f6e 70%);
  animation: orbit-inner 60s linear infinite;
  animation-delay: -5s;
}

.proton-3 {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #a8bfbb 50%);
  animation: orbit-inner 60s linear infinite;
  animation-delay: -19s;
}

.proton-4 {
  background: radial-gradient(circle at 25% 25%, #ffffff 0%, #fdf6e2 60%);
  animation: orbit-inner 60s linear infinite;
  animation-delay: -36s;
}

.proton-9 {
  background: radial-gradient(circle at 25% 25%, #ffffff 0%, #fdf6e2 60%);
  animation: orbit-inner 60s linear infinite;
  animation-delay: -51s;
}

#proton9, #proton8, #proton7, #proton6, #proton4 {
  pointer-events: auto;
  z-index: 100;
  cursor: pointer;
}

.text-button {
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: clamp(
    10px,
    1.5vw,
    16px
  ); /* Ajusta el tamaño del font dependiendo el tamaño de la pantalla */
  padding: 5%;
  font-family: "Baloo 2", sans-serif;
  font-weight: bolder;
  color: #592851;
}

/* FOOTER STYLE */
footer {
  margin-top: 7%;
}
#text-footer {
  color: #fdf6e2;
  text-align: center;
}
/* CODIGO PARA LOS POPUPS */

h2#swal2-title {
  font-family: "Fredoka", sans-serif;
  font-size: 2.5vw;
  font-weight: bold;
  margin-top: 0px;
  padding: 2%;
  margin-top: 5%;
}

div#swal2-container {
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem); /* Responsive font size */
  font-weight: lighter;
  padding: 1px;
  overflow: hidden;
  margin: 0px;
}

.swal-custom-popup {
  font-family: "Baloo 2", sans-serif;
  border-radius: 30px;
  overflow: hidden;
  width: min(90vw, 500px); /* Responsive width with max limit */
  max-height: 85vh; /* Limit height to viewport */
  margin: 0;
  padding: 1rem;
}

.my-custom-confirm {
  border: 2.5px solid black;
  border-radius: 50px;
  box-shadow: 4px 4px 0 #949494;
  background-color: var(--mustard);
  font-family: "Baloo 2", sans-serif;
  font-size: 1vw;
  font-weight: bold;
  color: black;
  padding: 10px 20px;
}

.my-custom-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 #949494;
}

.swal-custom-image {
  object-fit: cover !important;
  margin: 0;
  overflow: hidden;
  object-position: center;
  height: clamp(200px, 40vw, 300px); /* Responsive image height */
  width: 100%;
  border-radius: 15px;
}

/* Estilos para las listas dentro de los modales */
.swal2-html-container ul {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0;
  text-align: left;
}

.swal2-html-container li {
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  line-height: 1.5;
  margin-bottom: 0.8rem;
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border-left: 4px solid var(--mustard);
}

/*Responsive PopUps*/
@media (max-width: 768px) {
  h2#swal2-title {
  font-family: "Fredoka", sans-serif;
  font-size: 5vw;
  font-weight: bold;
  margin-top: 0px;
  padding: 0%;
  margin-top: 0%;
}

  .swal-custom-popup {
    width: 95vw;
    max-height: 80vh;
    border-radius: 20px;
  }
  
  .swal-custom-image {
    height: clamp(150px, 35vw, 250px);
  }
  
  .my-custom-confirm {
    font-size: 1rem;
    padding: 10px 20px;
    margin-top: 0;
  }
  
  .swal2-html-container li {
    font-size: rem;
    margin-bottom: 0.6rem;
  }
}

.neon-button {
  position:fixed;
  bottom: 20%;
  right: 20px;
  z-index: 1001;
  background-color: var(--mustard);
  color: black;
  border: none;
  padding: 12px 20px;
  border-radius: 30px;
  font-family: "Fredoka", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 0 10px #fbcb66;
  cursor: pointer;
  transition: all 0.3s ease;
}
.neon-button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px #fbcb66;
}

/* Modo Neón activado */
body.neon-mode {
  background-color: black;
}

body.neon-mode .proton-1,
body.neon-mode .proton-2,
body.neon-mode .proton-3,
body.neon-mode .proton-4,
body.neon-mode .proton-5,
body.neon-mode .proton-6,
body.neon-mode .proton-7,
body.neon-mode .proton-8,
body.neon-mode .proton-9 {
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
  border: 2px solid #0ff;
    color: #0ff;

}

body.neon-mode .text-button {
  color: #0ff;
  text-shadow:
    0 0 4px #000,
    0 0 10px #000,
    0 0 20px #000;
}