.imagen-exacta {
    width: 100%;  /* Ancho exacto de la imagen */
    height: 110px; /* Altura exacta de la imagen */
    
}

.bounce-element {
    display: inline-block;
    font-size: 24px;
    padding: 20px;
  
    text-align: center;
    border-radius: 10px;
    animation: bounce 10s infinite;
  }
  
@keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px); /* Sube 20px */
    }
}


  /* En pantallas medianas (dispositivos móviles) */
@media (max-width: 767px) {
  .user-state-info {
      font-size: 12px;
  }
}

/* En pantallas grandes */
@media (min-width: 992px) {
  .user-state-info {
      font-size: 16px;
  }
}

/* En pantallas grandes */
@media (max-width: 462px) {
  .user-state-info {
      font-size: 8px;
      display: none;
  }
}
@media (min-width: 462px) {
  .user-logueado {
      font-size: 8px;
      display: none;
  }
}


.btn-cromado {
  padding: 12px 24px;
  font-size: .8rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  /* background: linear-gradient(135deg, #007bff, #ffffff,rgb(0, 153, 241)); */
  background: linear-gradient(135deg, #004b9b, #7dc5ff,rgb(0, 51, 80));
  background-size: 200% 200%;
  color: #000000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  animation: moveGradient 5s ease infinite;
}

.btn-cromado:hover {
  background-position: right center;
  color: #000000;
  box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}

.btn-cromado2 {
  padding: 12px 24px;
  font-size: .8rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg,rgb(255, 0, 0), #ffffff,rgb(255, 2, 2));
  background-size: 200% 200%;
  color: #000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  animation: moveGradient 5s ease infinite;
}

.btn-cromado2:hover {
  background-position: right center;
  color: #000;
  box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}



.btn-cromado3 {
  padding: 12px 24px;
  font-size: 1.4rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg,rgb(23, 114, 0), #ffffff,rgb(0, 146, 0));
  background-size: 200% 200%;
  color: #000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  animation: moveGradient 5s ease infinite;
  animation: moveGradient 5s ease infinite, pulse 1.8s ease-in-out infinite;

}

.btn-cromado3:hover {
  background-position: right center;
  color: #000;
  box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}

.btn-cromado4 {
  padding: 12px 24px;
  font-size: .8rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg,rgb(211, 103, 3), #ffffff,rgb(238, 234, 15));
  background-size: 200% 200%;
  color: #000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  animation: moveGradient 5s ease infinite;
}

.btn-cromado4:hover {
  background-position: right center;
  color: #000;
  box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}

.btn-cromado5 {
  padding: 12px 24px;
  font-size: .8rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg,rgb(23, 114, 0), #ffffff,rgb(0, 146, 0));
  background-size: 200% 200%;
  color: #000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  animation: moveGradient 5s ease infinite;
}


.btn-cromado6 {
  padding: 12px 24px;
  font-size: .8rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  /* background: linear-gradient(135deg, #007bff, #ffffff,rgb(0, 153, 241)); */
  background: linear-gradient(135deg,rgb(23, 114, 0), #ffffff,rgb(0, 146, 0));
  background-size: 200% 200%;
  color: #000000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  animation: moveGradient 5s ease infinite;
}

.btn-cromado6:hover {
  background-position: right center;
  color: #000000;
  box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}

.btn-cromado5:hover {
  background-position: right center;
  color: #000;
  box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}

@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


@keyframes pulse {
  0%, 100% {
      transform: scale(1);
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }
  50% {
      transform: scale(1.05);
      box-shadow: 0 6px 25px rgba(0,0,0,0.35);
  }
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
  padding: 12px 24px;
  font-size: .8rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg,rgb(85, 0, 110), #ffffff,rgb(164, 5, 238));
  background-size: 200% 200%;
  color: #000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  animation: moveGradient 5s ease infinite;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover {
  background: linear-gradient(135deg, rgb(85, 0, 110), #ffffff, rgb(164, 5, 238))!important;
  background-size: 200% 200%;
  animation: moveGradient 5s ease infinite!important;  /* Mantén la animación igual */
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {
  padding: 12px 24px;
  font-size: .8rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg,rgb(100, 100, 100), #ffffff,rgb(87, 87, 87));
  background-size: 200% 200%;
  color: #000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  animation: moveGradient 5s ease infinite;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover {
  background: linear-gradient(135deg,rgb(100, 100, 100), #ffffff,rgb(87, 87, 87))!important;
  background-size: 200% 200%;
  animation: moveGradient 5s ease infinite!important;  /* Mantén la animación igual */
}


.img-avatar-genero {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #ccc;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

.text-pink {
  color: #e83e8c;
  font-weight: bold;
}

.text-blue {
  color: #007bff;
  font-weight: bold;
}

.cantidad-genero {
  font-size: 1.2rem;
  font-weight: 500;
}

.wordart-gradient {
  text-align: right;
  font-size: 2.5rem;
  font-weight: 900;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background: linear-gradient(to right, rgb(24, 150, 129), #3333ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-right: 10px;
}

.wordart-gradient2 {
  text-align: left;
  font-size: 2.5rem;
  font-weight: 900;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background: linear-gradient(to right, rgb(24, 150, 129), #3333ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-right: 10px;
}

.hora_event {
  text-align: right;
  font-weight: 900;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

.p_text_evento {
  text-align: justify;
  font-weight: 900;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}


.evid-foto {
  width: 100%;
  height: 280px; /* Ajusta según tu preferencia */
  object-fit: cover;
  border-radius: 10px;
}