/* General */
body {
  background-color: #131729; /* Fondo solicitado */
  color: #fff; /* Color del texto */
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  
  
}
footer{
  background-color: #0b0d13;
}

h1, h3, h4 {
  text-align: center;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.5);
}
h2{
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.5);
}


h1 {
  font-size: 4rem;
  color: transparent; /* Empieza apagado */
  text-shadow: none;
  animation: fluorescentFlicker 2.5s linear forwards; /* Animación más corta y realista */
}
.transparent{
  background-color: transparent!important;
  backdrop-filter: blur(5px);
    transition: top 0.3s ease-in-out;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  
  }
  .transparent a{
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }



@keyframes fluorescentFlicker {
  0% {
    color: transparent;
    text-shadow: none;
  }
  10% {
    color: #ffffff;
    text-shadow: 0 0 5px #ffffff;
  }
  20% {
    color: transparent;
    text-shadow: none;
  }
  30% {
    color: #ffffff;
    text-shadow: 0 0 8px #ffffff, 0 0 12px #00ffff;
  }
  40% {
    color: transparent;
    text-shadow: none;
  }
  50%, 60% {
    color: #ffffff;
    text-shadow: 0 0 5px #ffffff, 0 0 15px #00ffff;
  }
  70% {
    color: transparent;
    text-shadow: none;
  }
  80% {
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #00ffff;
  }
  100% {
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff, 0 0 30px #00ffff; /* Brillo final suave */
  }
}

/* Efecto al pasar el ratón o al recibir foco */
/* Estilo general para el botón Crear Torneo */
.btn-primary {
  font-size: 1; /* Aumenta ligeramente el tamaño de fuente */
  /* Convierte el texto a mayúsculas */
  padding: 10px 15px; /* Aumenta el espacio interior del botón */
  border-radius: 10px; /* Bordes redondeados */
  background-color: transparent;
   /* Color de fondo neón */
  border: 2px solid #03E9F4; /* Borde con el mismo color */
  color: #03E9F4;
 
  text-shadow: 0 0 2px #03E9F4, 0 0 2px #03E9F4; /* Sombra de texto sutil */
  box-shadow: 0 0 5px #03E9F4, 0 0 5px #03E9F4, 0 0 5px #03E9F4; /* Resplandor */
  transition: all 0.3s ease; /* Transición suave */
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #03E9F4;
   /* Fondo transparente al hacer hover */
   /* El texto cambia a neón */
   color: rgb(0, 0, 0);
  box-shadow: 0 0 10px #03E9F4, 0 0 10px #03E9F4; /* Aumenta el resplandor */
  border: 2px solid #03E9F4; /* Mantiene el borde en color neón */
}

.btn-container {
  display: flex;
  justify-content: space-evenly;
}

.btn-red {
  font-size: 1rem; /* Aumenta ligeramente el tamaño de fuente */
   /* Convierte el texto a mayúsculas */
  padding: 10px 15px; /* Aumenta el espacio interior del botón */
  border-radius: 10px; /* Bordes redondeados */
  background-color: transparent;
   /* Color de fondo neón */
  border: 2px solid #ff4639; /* Borde con el mismo color */
  color: #ff4639;
 
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra de texto sutil */
  box-shadow: 0 0 5px #ff4639, 0 0 5px #ff4639, 0 0 5px #ff4639; /* Resplandor */
  transition: all 0.3s ease; /* Transición suave */
}

.btn-red:hover, .btn-red:focus {
  background-color: #ff4639;
   /* Fondo transparente al hacer hover */
   /* El texto cambia a neón */
   color: rgb(0, 0, 0);
  box-shadow: 0 0 10px #ff4639, 0 0 10px #ff4639; /* Aumenta el resplandor */
  border: 2px solid #ff4639; /* Mantiene el borde en color neón */
}

/* Formularios */


form .form-control {
  background-color: #20253b;
  border: 1px solid #4f5d75;
  color: #fff;
  padding: 10px;
}

form .form-control:focus {
  background-color: #252b45;
  border-color: #00aaff;
  box-shadow: 0 0 10px #00aaff;
}

/* Carrusel superior */
.no-filter {
  border-radius: 10px;
  object-fit: cover;
  filter: opacity(1)!important;

}

.carousel-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 4rem;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Sombra para legibilidad */
  z-index: 10; /* Asegura que el título esté sobre las imágenes */
  text-align: center;
}
.carousel-title2 {
  background-color: #00ffff;
  color: black;
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Sombra para legibilidad */
  z-index: 10; /* Asegura que el título esté sobre las imágenes */
  text-align: center;
}
.carousel-title2:hover{
  background-color: transparent;
  color: #00ffff;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

/* Carrusel inferior */
.custom-carousel .carousel-inner {
  background-color: #20253b;
  border-radius: 10px;
  padding: 15px;
  padding-bottom: 48px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

.tournament-card-container {
  background-color: #252b45;
  border: 1px solid #00aaff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0, 170, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
}

.tournament-card-container:hover {
  
  box-shadow: 0 0 25px rgba(0, 170, 255, 0.5);
}



.carousel-item img {
  border-radius: 10px;
  object-fit: cover;
  filter: opacity(0.50);

}


/* Sin torneos */
.no-tournaments-message {
  background-color: #20253b;
  border: 1px solid #4f5d75;
  padding: 20px;
  border-radius: 10px;
  color: #ccc;
  max-width: 600px;
  margin: 20px auto;
}

.no-tournaments-message i {
  font-size: 50px;
  color: #ff5c5c;
}

.no-tournaments-message h2 {
  font-size: 1.5rem;
  margin: 10px 0;
}

.no-tournaments-message p {
  color: #aaa;
}

/* Contenedor de la tarjeta personalizada */
  .custom-carousel .tournament-card-container {
    width: 80%; /* Inicialmente, el 80% del ancho del carrusel */
    margin: 0 auto; /* Centrar la tarjeta */
  }
  
  /* Asegurar que el contenedor de las cards está centrado */
  .custom-carousel .carousel-inner {
    text-align: center; 
  }
  
 
  /* Botones prev y next */
  .buttonBot1, .buttonBot2 {
    width: 40px;
    height: 40px;
    background-color: black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease; /* Animación suave para cambios */
  }
  
  .buttonBot1 {
    left: 3%; /* Se coloca un poco hacia la izquierda */
  }
  
  .buttonBot2 {
    right: 3%; /* Se coloca un poco hacia la derecha */
  }
  
  /* Iconos de los botones */
  .custom-carousel .custom-control-prev-icon, 
  .custom-carousel .custom-control-next-icon {
    filter: invert(1); 
  }
  
  /* Indicadores del carrusel */
  .carousel-indicators{

    
  }


  .custom-carousel .carousel-indicators button {
    background-color: #000000;
  }
  
  .custom-carousel .carousel-indicators button.active {
    background-color: #000000;
  }
  
  /* Ajustes Responsivos */
  
  /* Para pantallas más grandes */
  @media (min-width: 1200px) {
    .custom-carousel .tournament-card-container {
      width: 60%; /* En pantallas grandes, las cards pueden ocupar un 60% */
    }
  
    .buttonBot1, .buttonBot2 {
      width: 50px;
      height: 50px;
    }
  }
  
  /* Para pantallas medianas (tabletas) */
  @media (min-width: 747px)and (max-width: 1024px){
    .transparent a{
      font-size: 14px;
    }
    .buttonBot1, .buttonBot2 {
      display: none;
     }
    
    .custom-carousel .tournament-card-container {
      width: 70%; /* Las cards ocuparán el 70% del carrusel */
    }
  
    .buttonBot1, .buttonBot2 {
      width: 45px;
      height: 45px;
    }
    h1{
      font-size: 4rem !important;
    }
    
  }
  
  /* Para pantallas pequeñas (móviles) */
  @media (max-width: 746px) {
    .transparent a{
      font-size: 13px;
      
      
    }
    
   
    .custom-carousel .tournament-card-container {
      width: 90%; /* Las cards ocuparán el 90% en pantallas móviles */
    }
  
    .buttonBot1, .buttonBot2 {
     display: none;
    }
  
    /* Reducir los márgenes para los botones prev y next */
    .buttonBot1 {
      left: 5%; /* Se acercan más al borde */
    }
  
    .buttonBot2 {
      right: 5%; /* Se acercan más al borde */
    }
    h1{
      font-size: 2rem !important;
    }
  }
  
  /* Estilo para el mensaje cuando no hay torneos */
.no-tournaments-message {
    background-color: #f8d7da; /* Fondo de alerta */
    border: 1px solid #f5c6cb; /* Borde con color suave */
    color: #721c24; /* Texto en rojo oscuro */
    padding: 30px;
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .no-tournaments-message i {
    font-size: 50px;
    color: #721c24;
    margin-bottom: 15px;
  }
  
  .no-tournaments-message h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .no-tournaments-message p {
    font-size: 1.2rem;
    color: #6c757d;
  }
  
  .no-tournaments-message a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
  }
  
  .no-tournaments-message a:hover {
    text-decoration: underline;
  }
  .filtro a{
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    color: #03E9F4;
  }


  /* CARDS Y PROFILE */
  /* Perfil del Usuario */
.profile-card {
  background-color: #20253b; /* Fondo más oscuro */
  border: 1px solid #00aaff; /* Borde acorde con tu paleta */
  color: #fff; /* Color de texto */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 4px 15px rgba(0, 170, 255, 0.2); /* Sombra suave */
  min-height: 100%;
}

.card.text-center.shadow-lg {
  background-color: #20253b; /* Fondo más oscuro */
  border: 1px solid #00aaff; /* Borde acorde con tu paleta */
  color: #fff; /* Color de texto */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 4px 15px rgba(0, 170, 255, 0.2); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.text-center.shadow-lg:hover {
  transform: translateY(-5px); /* Efecto flotante al pasar el mouse */
  box-shadow: 0 8px 25px rgba(0, 170, 255, 0.4);
}

.card img.rounded-circle {
  width: 120px;
  height: auto;
  object-fit: cover;
  border: 3px solid #00aaff; /* Borde azul brillante */
  box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
}

.profile-img {
  width: 120px;
  height: 120px;
  object-fit:contain;
  border: 3px solid #00aaff; /* Borde azul brillante */
  box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
}

.card-title {
  font-size: 1.8rem;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.card .text-muted {
  font-size: 1rem;
  color: #fcfcfc !important; /* Texto más suave */
}

/* Botón de Crear Torneo */
.btn-sm.w-100 {
  background-color: #00aaff;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-sm.w-100:hover {
  background-color: #0077cc;
  box-shadow: 0 0 10px #00aaff;
  transform: scale(1.05);
}

/* Tarjetas de Torneo */
.card {
  background-color: #252b45;
  border: 1px solid #00aaff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 170, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 170, 255, 0.4);
}

.complete-card {
  background-color: #252b45;
  border: 1px solid #2bf403;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(43, 244, 3, 0.2); /* Cambiado a verde */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.complete-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(43, 244, 3, 0.4); /* Cambiado a verde */
}

.games-images {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
}

.game-img {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
}

.card-body {
  padding: 15px;
  text-align: center;
}

.card-title {
  font-size: 1.4rem;
  color: #ffffff;
}

.card-text {
  font-size: 1rem;
  color: #aaa;
  margin-bottom: 15px;
}

/* Botones en las Tarjetas */
.btn {
  margin: 5px 0;
  transition: all 0.3s ease;
}


.btn-danger {
  background-color: #ff5c5c;
  border: none;
}

.btn-danger:hover {
  background-color: #e04c4c;
  box-shadow: 0 0 10px rgba(255, 92, 92, 0.8);
}

/* Sin Torneos */
.text-muted {
  text-align: center;
  font-style: italic;
  color: #fcfcfc;
}
p.text-muted {
  text-align: center;
  font-style: italic;
  color: #fcfcfc;
}

/* Mensaje de Sin Participaciones */
.no-tournaments-message {
  background-color: #252b45;
  border: 1px solid #00aaff;
  border-radius: 10px;
  color: #ccc;
  padding: 20px;
  text-align: center;
}

.no-tournaments-message i {
  color: #ff5c5c;
  font-size: 2.5rem;
}

.no-tournaments-message p {
  color: #aaa;
}

/* >>>>>>>>>>>>>>>>>>>>>>>FONTS<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

h1, h2, h3, h4, h5, h6, p, a {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
  



/* Estilo general para el formulario */
.formulary {
  background-color: #20253b;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* Sombra para dar profundidad */
  max-width: 600px; /* Ancho máximo del formulario */
  margin: 30px auto; /* Centrado del formulario */
  color: white; /* Texto blanco para que resalte sobre el fondo oscuro */
}
.form-select {
  background-color: #131729;  /* Fondo oscuro */
  color: white;  /* Texto blanco */
  border: 2px solid #03E9F4;  /* Borde neón */
  border-radius: 5px;  /* Borde redondeado */
  padding: 10px 15px;  /* Espaciado dentro del select */
  font-size: 1rem;  /* Tamaño de fuente */
  box-shadow: inset 0 0 5px #03E9F4;  /* Sin sombra */
  transition: all 0.3s ease;  /* Transición suave */
}
/* Estilo para el título del formulario */
.formulary h3 {
  color: #03E9F4; /* Título en color neón */
  text-align: center;
  margin-bottom: 20px;
  /* Efecto neón */
}
/* Estilo de los labels */
.formulary .form-label {
  color: #03E9F4; /* Color neón para el texto */
  font-size: 1.2rem; /* Tamaño de fuente más grande */
  
  letter-spacing: 1px; /* Espaciado entre letras */
  /* Texto en mayúsculas */
  position: relative; /* Para aplicar el efecto de subrayado animado */
  display: inline-block;
  margin-bottom: 10px; /* Espaciado inferior para separar de los campos */

  transition: all 0.3s ease; /* Transición suave para el hover */
}


/* Estilo de los campos de entrada (input y textarea) */
.formulary .form-control {
   /* Fondo oscuro para los campos de texto */
  /* Borde neón */
  color: white; /* Texto blanco */
  padding: 10px; /* Espaciado interno */
  font-size: 1.1rem; /* Tamaño de fuente */
  /* Bordes redondeados */
  transition: all 0.3s ease; /* Transición suave */
  box-shadow: inset 0 0 5px #03E9F4; /* Sombra interna neón */
  background-color: #131729;
}

.formulary .form-control:focus {
  color: white;
  background-color: #212949; /* Cambia el fondo al enfocar */
  border-color: #03E9F4; /* Resalta el borde */
  box-shadow: 0 0 10px #03E9F4; /* Sombra externa al enfocar */
  outline: none; /* Elimina el borde de enfoque predeterminado */
}

/* Efecto hover para botones dentro de formularios */

.form-select option {
  background-color: #0e111f;  /* Fondo oscuro de las opciones */
  color: white;  /* Texto blanco */
  border: none;  /* Sin borde */
  padding: 10px;  /* Espaciado entre las opciones */
  transition: background-color 0.3s ease, color 0.3s ease;  /* Transición suave */
}
.form-select option:hover {
  background-color: #03E9F4;  /* Fondo neón cuando se pasa el mouse */
  color: #121212;  /* Cambiar el color del texto a oscuro cuando se pasa el mouse */
}

.form-select:focus option:checked {
  background-color: #03E9F4;  /* Fondo cuando la opción está seleccionada */
  color: #121212;  /* Texto oscuro */
}

/* Estilo para desactivar el ícono de expansión de select en IE */
.form-select::-ms-expand {
  display: none;
}

.cups {
  display: inline-block;
  font-size: 2rem!; 
  color: #f4d003;
  text-shadow: 0 0 2px #f4d003, 0 0 2px #f4d003; 
  transition: all 0.3s ease;
  cursor: default;
  
}

.cups:hover, .cups:focus {
  text-shadow: 0 0 20px #f4d003, 0 0 20px #f4d003; 
  transform: translateY(-5px); /* Eleva el elemento */
}

.check {
  display: inline-block;
  font-size: 2rem!; 
  /* background-color: rgba(43, 244, 3, 0.2);
  box-shadow: 0 0 20px rgba(43, 244, 3, 0.6), 
              0 0 30px rgba(43, 244, 3, 0.4), 
              0 0 40px rgba(43, 244, 3, 0.2); */
  color: #2bf403;
  text-shadow: 0 0 20px #2bf403, 0 0 20px #2bf403; 
  cursor: default;
  /* border-radius: 50% */
}

.player-item:nth-child(odd) {
  background-color: #252b45;
}

.player-item:nth-child(even) {
  background-color: #454b6b;
}

.userTag {
  color: white;
}

.userTag:hover {
  color: #03E9F4;
}

.teamTag {
  color: white;
}

.teamTag:hover {
  color: #03E9F4;
}
.list-group-item {
  background-color: #3a3f5c;
  border: 1px solid #00aaff;
  color: #fff;
}

.create-btn {
  font-size: 1; /* Aumenta ligeramente el tamaño de fuente */
  /* Convierte el texto a mayúsculas */
  padding: 10px 15px; /* Aumenta el espacio interior del botón */
  border-radius: 10px; /* Bordes redondeados */
  background-color: transparent;
   /* Color de fondo neón */
  border: 2px solid #f403d4; /* Borde con el mismo color */
  color: #f403d4;
 
  text-shadow: 0 0 2px #f403d4, 0 0 2px #f403d4; /* Sombra de texto sutil */
  box-shadow: 0 0 5px #f403d4, 0 0 5px #f403d4, 0 0 5px #f403d4; /* Resplandor */
  transition: all 0.3s ease; /* Transición suave */
}

.create-btn:hover, .create-btn:focus {
  background-color: #f403d4;
  margin-left: 30px;
  color: rgb(0, 0, 0);
  box-shadow: 0 0 10px #f403d4, 0 0 10px #f403d4; /* Aumenta el resplandor */
  border: 2px solid #f403d4; /* Mantiene el borde en color neón */
}

.init-btn {
  font-size: 1; /* Aumenta ligeramente el tamaño de fuente */
  /* Convierte el texto a mayúsculas */
  padding: 10px 15px; /* Aumenta el espacio interior del botón */
  border-radius: 10px; /* Bordes redondeados */
  background-color: transparent;
   /* Color de fondo neón */
  border: 2px solid #2bf403; /* Borde con el mismo color */
  color: #2bf403;
 
  text-shadow: 0 0 2px #2bf403, 0 0 2px #2bf403; /* Sombra de texto sutil */
  box-shadow: 0 0 5px #2bf403, 0 0 5px #2bf403, 0 0 5px #2bf403; /* Resplandor */
  transition: all 0.3s ease; /* Transición suave */
}

.init-btn:hover, .init-btn:focus {
  background-color: #2bf403;
  margin-left: 30px;
  color: rgb(0, 0, 0);
  box-shadow: 0 0 10px #2bf403, 0 0 10px #2bf403; /* Aumenta el resplandor */
  border: 2px solid #2bf403; /* Mantiene el borde en color neón */
}

.blueStrong {
  color: #03E9F4;
  font-weight: bold;
}
.greenStrong{
  color: #2bf403;
  font-weight: bold;
}

.green-shadow{
  color: #2bf403;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.5);
}
.about-us {
  padding: 2rem;
  background-color: #252B45;
  color: white;
  border-radius: 10px;
}
.about-header .logo-about {
  width: 100px;
  height: 100px;
}
.about-description {
  font-size: 1.2rem;
  margin-top: 1rem;
}
.mission-container {
  margin-top: 2rem;
}