html {
    font-size: 62.5%;
    box-sizing: border-box;
  }


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


  html, body {
    height: 100%; /* Necesario para que el contenedor ocupe toda la altura */
    margin: 0;
    display: flex;
    flex-direction: column; /* Asegura que los elementos estén apilados verticalmente */
    margin: 0;
    padding: 0;
    background-color: #0f0f0f;
 
}

.main-content{
  flex:1;
}

.exito-menu.visible {
  opacity: 1;
}






  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
::-webkit-scrollbar:horizontal {
  display: none;
}

::-webkit-scrollbar {
  width: 6px; /* Barra de desplazamiento más delgada */
}

/* Personalización del área de la barra de desplazamiento (track) */
::-webkit-scrollbar-track {
  background: rgb(26, 26, 26); /* Color claro de fondo para el track */
  border-radius: 10px; /* Bordes suaves */
}

/* Personalización de la parte que se mueve (thumb) */
::-webkit-scrollbar-thumb {
  background: #686868; /* Color gris suave para el thumb */
  border-radius: 10px; /* Bordes redondeados */
}

/* Efecto hover sobre el thumb */
::-webkit-scrollbar-thumb:hover {
  background: #888; /* Color más oscuro al pasar el ratón sobre el thumb */
}
/* Cargando */

.cargando-buscar {
  background-color: #9537ff;
  width: 0%;
  height: 2px;
  transition: width 0.3s ease; /* Añade una transición para suavizar el efecto de carga */
}


.barra-trasera-cargando{
  background-color: #1b1b1b;
  transition: width 0.3s ease;
  width: 100%;
  visibility: hidden;
  height: 2px;
}

/* Ver historial */

.historial-juegos{
  display: inline-flex;
  flex-direction: column;
  justify-content: left;
}

.historial-juegos *{
  margin: 0;
  padding: 0;
}

.historial-juegos button{
  color:#4285F4;
  background-color: transparent;
  border: none;
  margin-left: 2rem;
  
  text-align: left;
  cursor: pointer;
  font-family: "Gabarito", cursive;
}

.historial-juegos button:hover{
  text-decoration: underline;
}

.cerrar-historial-juegos {
  font-size: 3rem;
  background-color: transparent;
  transition: all 0.3s ease;
  color:rgb(250, 75, 75);
  border: none;
  right: 2rem;
  top: 3.5rem;
  
  cursor: pointer;
}


.cerrar-historial-juegos:hover{
  transform: scale(1.2);
  color:rgb(248, 55, 55);
}

.encabezado-historial-juegos{
  justify-content: space-between !important;
  padding: 1.5rem 2rem 0 2rem !important;
  margin-bottom: 0;
}

.encabezado-historial-juegos *{
  margin: 0;
}

.eliminar-historial{
  color:rgb(250, 75, 75);
  background-color: transparent;
  border: 0.2rem solid rgb(250, 75, 75);
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 0.9rem;
  cursor: pointer;
  transition: all .3s ease;
}

.eliminar-historial:hover, .encabezado-explorar-juegos button:hover{
  color: white;
  transform: scale(1.1);
  background-color: rgb(250, 75, 75);

}


/* Buscador */


.buscar-explorar-input{
  position: relative;
  margin: 0;
  font-family: "Gabarito", cursive;
  display: flex;
  justify-content: left;
  margin-bottom: 3rem;
  margin-left: 2rem;
}


.input-field-username, .input-field-explorar-buscar{
  

  width: 25%;
  padding: 1.3rem 1.3rem 1.3rem 4rem;
  border: none;
  border: 0.2rem solid gray;
  color: white;
  outline: none;
  border-radius: 2rem;
  background-color: transparent;
}

.input-label-username, .input-label-explorar-buscar {
  position: absolute;
  top: 46%;
  left: 4.5rem;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 16px;
  color: gray;
  pointer-events: none;
  background-color: transparent;
  transition: 0.2s ease all;
 
}

.input-field-username:focus ~ .input-label-username,
.input-field-username:valid ~ .input-label-username, 
.input-field-explorar-buscar:focus ~ .input-label-explorar-buscar,
.input-field-explorar-buscar:valid ~ .input-label-explorar-buscar {
  transform: translateY(-50%);
  top: 5%;
  left: 3.8rem;
  font-size: 12px;
  color: gray;
  background-color: #0f0f0f;
  padding: 0 5px;
}

.span-buscar-explorar{
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 2.5rem;
}

.span-limpiar-busqueda{
  color: red;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;

}

.span-username i, .span-buscar-explorar i{
  font-size: 1.5rem;
  
  color:gray;
}

@keyframes scaleUp {
  0% {
      transform: scale(1.2);
      opacity: 0;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

@keyframes scaleUp2 {
  0% {
      transform: scale(1.7);
      opacity: 0;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}
@keyframes scaleUp3 {
  0% {
      transform: scale(0.5);
      opacity: 0;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-4%); /* Comienza fuera de la pantalla por la izquierda */
    opacity: 0; /* Elemento invisible */
  }
  100% {
    transform: translateX(0); /* Llega a su posición original */
    opacity: 1; /* Elemento visible */
  }
}

.buscar-explorar-input {
  animation: slideInFromLeft 0.3s ease-out forwards;
  opacity: 0; /* Aseguramos que el elemento es invisible al principio */
}

.defecto-home {
  animation: scaleUp 0.3s ease-out forwards;
  opacity: 0; /* Aseguramos que el elemento es invisible al principio */
}
.cuerpo-busqueda.animated2 {
  animation: scaleUp3 0.3s ease-out forwards;
  opacity: 0; /* Aseguramos que el elemento es invisible al principio */
}


/* Ultimas publicaciones */

.container, .container-mas-buscado, .container-recomendado, .container-favoritos, .container-accion, .container-aventura{
  padding: 0;
  margin: 0;
  user-select: none;
  margin-top: 2rem;
  
}

.loader-juegos-contenedor{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4rem;
}

.main-content{
  color: white;
  font-size: 1.5rem;
  padding: 0px;
  
  font-family: "Gabarito", cursive;
/*   border-left: 0.2rem solid #ccc;
  padding-left: 1rem; */
}



.ultimas-publicaciones-h2, .mas-buscado-h2, .mas-recomendado-h2, .mas-explorar-h2, .favoritos-h2, .accion-h2, .aventura-h2{
  margin-left: 2rem;
  font-size: 2.4rem;
  margin: 0 0 0 2rem;
  cursor: pointer;
  font-weight: normal;
  display: flex;
  align-items: center;

}

.favoritos-h2 i{
  font-size: 1.5rem;
  margin-right: 0.8rem;
}

/* Contenedor del carrusel */
.carousel, .carousel-mas-buscado, .carousel-recomendado, .carousel-favorito, .carousel-accion, .carousel-aventura  {
  position: relative;
  width: 100%;
  margin-top: 0.5rem;
  left: 0;
 /*  background-color: red; */
}
.carousel-destacados {
  position: relative;
  width: 100%;
  margin-top: 0.5rem;
  left: 0;
}

.carousel-track-container, .carousel-track-container-mas-buscado, .carousel-track-container-recomendado, .carousel-track-container-favoritos, .carousel-track-container-accion, .carousel-track-container-aventura {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: auto;
}
.carousel-track-container-destacados {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: auto;
}

.carousel-track, .carousel-track-mas-buscado, .carousel-track-recomendado, .carousel-track-favorito, .carousel-track-accion, .carousel-track-aventura {
  display: flex;
  transition: transform 0.5s ease;
  overflow-x: auto; /* Habilita el desplazamiento horizontal */
  scroll-behavior: smooth; 
  gap: 0; /* Sin espacio entre tarjetas */
  justify-content: flex-start;
}
.carousel-track-destacados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Las columnas se ajustan automáticamente */
  gap: 1px; /* Espacio entre los elementos */
  width: 100%; /* Asegura que el contenedor ocupe el 100% del ancho disponible */
  overflow-x: hidden; /* Evita el desbordamiento hacia el lado derecho */
}

.carousel:hover .izquierda-boton, .carousel-mas-buscado:hover .izquierda-boton-mas-buscado, .carousel-recomendado:hover .izquierda-boton-recomendado, .carousel-favorito:hover .izquierda-boton-favorito, .carousel-accion:hover .izquierda-boton-accion, .carousel-aventura:hover .izquierda-boton-aventura {
  display: block; /* Muestra el botón al hacer hover */
}

/* Tarjeta de juego en el carrusel */
.carousel .game-card, .carousel-destacados .game-card-destacados, .carousel-mas-buscado .game-card-mas-buscado, .carousel-recomendado .game-card-recomendado, .carousel-favorito .game-card-favorito, .carousel-accion .game-card-accion, .carousel-aventura .game-card-aventura  {
  flex: 1; /* Permite que las tarjetas se ajusten dinámicamente */
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  /* border: 1px solid #333; */
  border-radius: 0.4rem;
  min-width: 200px;
  max-width: 200px;
  margin: 0 0 0 8px;
}

.game-card p, .game-card-recomendado p, .game-card-favorito p, .game-card-mas-buscado p, .game-card-destacados p, .game-card-accion p, .game-card-aventura p{
  color: gray;
}



.visto-megusta-contenedor {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.486);
  color: white;
  display: none;
  align-items: center;
  text-align: left;
  margin-top: 0.5rem;
  padding: 0.8rem;
  border-top-right-radius: 5rem;
  border-bottom-right-radius: 5rem;
  transform: translateX(-100%); /* Fuera de la pantalla a la izquierda */
  animation: slideIn 0.5s ease-out forwards; /* Animación */
}


@keyframes slideIn {
  0% {
    transform: translateX(-100%); /* Posición inicial fuera de la pantalla */
  }
  100% {
    transform: translateX(0); /* Posición final */
  }
}
.visto-megusta-contenedor *{
  padding: 0;
  margin: 0;
}

.visto-megusta-contenedor h2{
  font-size: 1.3rem;
  font-weight: normal;
  padding: 0;
}

.carousel .game-card:hover, .carousel-destacados .game-card-destacados:hover, .carousel-mas-buscado .game-card-mas-buscado:hover, .carousel-recomendado .game-card-recomendado:hover, .carousel-favorito .game-card-favorito:hover, .carousel-accion .game-card-accion:hover, .carousel-aventura .game-card-aventura:hover {
  transform: translateY(-5px); /* Efecto de hover */
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.493);
}

.carousel-track, .carousel-track-destacados, .carousel-track-mas-buscado, .carousel-track-recomendado, .carousel-track-favorito, .carousel-track-accion, .carousel-track-aventura {
  padding: 1rem 0 1rem 0;
}

.carousel .game-card img, .carousel-destacados .game-card-destacados img, .carousel-mas-buscado .game-card-mas-buscado img, .carousel-recomendado .game-card-recomendado img, .carousel-favorito .game-card-favorito img, .carousel-accion .game-card-accion img, .carousel-aventura .game-card-aventura img  {
  width: 100%;
  height: 110px;
  object-fit: cover;
  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.5);
}


.izquierda-boton, .izquierda-boton-mas-buscado, .izquierda-boton-recomendado, .izquierda-boton-favorito, .izquierda-boton-accion, .izquierda-boton-aventura  {
  background-color: transparent;
  color: white;
  border: none;
  font-size: 4rem; /* Tamaño inicial de la fuente */
  height: 100%;
  position: absolute;
  z-index: 1;
  border-radius: 10px;
  display: none;
  cursor: pointer;
  transition: font-size 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Transición para fuente y sombra */
}

.derecha-boton, .derecha-boton-mas-buscado, .derecha-boton-recomendado, .derecha-boton-favorito, .derecha-boton-accion, .derecha-boton-aventura{
  position: absolute;
  right: 0;
  top: 0;
  background-color: transparent;
  color: white;
  display: none; 
  border: none;
  font-size: 4rem;
  height: 100%;
  z-index: 3;
  border-radius: 10px;
  cursor: pointer;
}

.izquierda-boton:hover,.izquierda-boton-recomendado:hover, .izquierda-boton-mas-buscado:hover, .izquierda-boton-aventura:hover, .izquierda-boton-accion:hover,  .derecha-boton:hover, .derecha-boton-mas-buscado:hover, .derecha-boton-recomendado:hover,
.izquierda-boton-favorito:hover, .derecha-boton-favorito:hover, .derecha-boton-accion:hover, .derecha-boton-aventura:hover {
  font-size: 4.5rem; /* Cambia el tamaño de la fuente */
  background-color: rgba(0, 0, 0, 0.336); /* Sombra al pasar el mouse */
  box-shadow: 0 10px 20px rgba(14, 14, 14, 0.644);
}

.carousel:hover .izquierda-boton, .carousel-recomendado:hover .izquierda-boton-recomendado, .carousel-mas-buscado:hover .izquierda-boton-mas-buscado, .carousel-favorito:hover .izquierda-boton-favorito, .carousel:hover .derecha-boton, .carousel-recomendado:hover .derecha-boton-recomendado, .carousel-mas-buscado:hover .derecha-boton-mas-buscado,
.carousel-favorito:hover .derecha-boton-favorito, .carousel-accion:hover .derecha-boton-accion, .carousel-aventura:hover .derecha-boton-aventura  {
  display: block;
}

.icon-container, .icon-container-mas-buscado, .icon-container-recomendado, .icon-container-favoritos, .icon-container-accion, .icon-container-aventura  {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.icon-container .destacados-ico, .icon-container-mas-buscado .mas-buscado-ico, .icon-container-recomendado .recomendado-ico, .accion-ico, .aventura-ico {
  font-size: 15px;
  z-index: 1;
  color: #9537ff;
  visibility: hidden;
  opacity: 0;
  transform: translateX(0); 
  transition: transform 0.7s ease, opacity 0.7s ease, visibility 0.7s ease;
}

.icon-container-favoritos .favorito-ico{
  font-size: 15px;
  z-index: 1;
  color: yellow;
  visibility: hidden;
  opacity: 0;
  transform: translateX(0); 
  transition: transform 0.7s ease, opacity 0.7s ease, visibility 0.7s ease;
}

.icon-container:hover .destacados-ico, .icon-container-mas-buscado:hover .mas-buscado-ico, .icon-container-recomendado:hover .recomendado-ico, .icon-container-accion:hover .accion-ico, .icon-container-aventura:hover .aventura-ico {
  transform: translateX(90px); 
  opacity: 1;
  visibility: visible;
}

.icon-container-favoritos:hover .favorito-ico{
  transform: translateX(75px); 
  opacity: 1;
  visibility: visible;
}

.icon-container .tooltip {
  position: absolute;
  left: 85%; 
  top: 50%;
  transform: translateY(-50%) translateX(0); 
  color: #9537ff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0; 
  visibility: hidden; 
  z-index: -1; 
  transition: opacity 0.9s ease, transform 0.9s ease, visibility 0.9s ease;
}

.icon-container-mas-buscado .tooltip-mas-buscado, .icon-container-recomendado .tooltip-recomendado, .icon-container-accion .tooltip-accion, .icon-container-aventura .tooltip-aventura{
  position: absolute;
  left: 89%; 
  top: 50%;
  transform: translateY(-50%) translateX(0); 
  color: #9537ff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0; 
  visibility: hidden; 
  z-index: -1; 
  transition: opacity 0.9s ease, transform 0.9s ease, visibility 0.9s ease;
}

.icon-container-favoritos .tooltip-favorito{
  position: absolute;
  left: 82%; 
  top: 50%;
  transform: translateY(-50%) translateX(0); 
  color: yellow;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0; 
  visibility: hidden; 
  z-index: -1; 
  transition: opacity 0.9s ease, transform 0.9s ease, visibility 0.9s ease;
}

.tooltip-accion{
  left: 76% !important; 
}
.tooltip-aventura{
  left: 86% !important; 
}

.icon-container:hover .tooltip, .icon-container-favoritos:hover .tooltip-favorito, .icon-container-mas-buscado:hover .tooltip-mas-buscado, .icon-container-recomendado:hover .tooltip-recomendado, .icon-container-accion:hover .tooltip-accion, .icon-container-aventura:hover .tooltip-aventura {
  opacity: 1; 
  visibility: visible;
  z-index: 1; 
  transform: translateY(-50%) translateX(10px); /* Se desplaza hacia la derecha */
}

.no-resultado-aventura, .no-resultado-accion, .no-resultado-aventura, .no-resultado-descargado{
  color: gray;
  margin: 1.2rem 0 0 1.2rem;
  font-size: 1.8rem;
  border-left: 0.3rem solid rgb(255, 62, 62);
  padding: 1rem;
  background-color: rgba(255, 62, 62, 0.007);
  width: 30%;
  
}

/* Explorar juegos */

.blur-explorar-juegos, .blur-abrir-juego, .blur-reportar-juego, .blur-abrir-favoritos, .blur-historial, .blur-verificar-login, .blur-buscar-pedidos, .blur-editar-usuario{
  background-color: rgba(0, 0, 0, 0.603);
  position: fixed;
  justify-content: center;
  align-items: center;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 22;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  overflow: auto;
}

.contenedor-explorar-juegos {
  background-color: #0f0f0f;
  border: 0.1rem solid #292929;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.705);
  margin: 4rem auto;
  padding-bottom: 1rem;
  width: 70%;
  /* padding-right: 8px; */
  border-radius: 1rem;
  transform:  scale(0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; 
}

.cargando-explorar-juegos{
  background-color: #0f0f0f98;
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.contenedor-abrir-juego{
  background-color: #0f0f0f;
  border: 0.1rem solid #292929;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.705);
  margin: 4rem auto;
  padding-bottom: 1rem;
  width: 50%;
  padding-right: 8px;
  border-radius: 1rem;
  transform:  scale(0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; 
}

.contenedor-abrir-favoritos {
  background-color: #0f0f0f;
  border: 0.1rem solid #292929;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.705);
  margin: 4rem auto;
  padding-bottom: 1rem;
  width: 70%;
  border-radius: 1rem;
  transform:  scale(0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.contenedor-historial{
  background-color: #0f0f0f;
  border: 0.1rem solid #292929;
  width: 40%;
  margin: 4rem auto;
  border-radius: 1rem;
  height: 90%;
  transform:  scale(0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important; 
}

.cuerpo-historial{
  width: 100%;
  /* Asegura que el contenido ocupe el ancho completo del contenedor */
  height: 80%;
  /* Asegura que el contenido ocupe el alto completo del contenedor */
  overflow: auto;
  text-align: left;
  font-family: "Questrial", sans-serif;


}

/*  */
 /* Alumnos deudas */

 #jugadores-tabla {
  width: 100%;
  border-collapse: collapse;
  text-align: center;

  position: relative;
}

#jugadores-tabla th {
  padding: 5px 0 5px 0;
  
  font-family: "Gabarito", cursive;
  color: white;
  border-left: 1px solid white;
  font-weight: normal;
  font-size: 1.7rem;
}
#jugadores-tabla th {
  position: sticky;
  top: 0;
  background-color: #050505fa;
  z-index: 2;
}

#jugadores-tabla tbody tr:nth-child(odd),
#tabla-secretarios-eliminar tbody tr:nth-child(odd) {
  background-color: #1313138f;
}

#jugadores-tabla tbody tr:nth-child(even),
#tabla-secretarios-eliminar tbody tr:nth-child(even) {
  background-color:transparent;
}

#jugadores-tabla td {
  padding: 1.5rem;
  font-size: 1.5rem;
  font-family: "Questrial", sans-serif;
  color:white;
}

#jugadores-tabla button {
  cursor: pointer;
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 1rem;
  color: white;
  background-color: white;
  color: black;

  border: none;
  font-family: "Gabarito", cursive;
}

#jugadores-tabla button:hover {
  text-decoration: underline;
}

.ver-juego-boton{
  background-color: transparent !important;
  color: white !important;
  

}

.advertencia-historial{
  text-align: left;
  padding: 0.5rem 1.5rem 2rem 1.5rem;
  
}

.advertencia-historial h2{
  font-size: 1.5rem;
  margin-top: 0;
  font-family: "Questrial", sans-serif;
  font-weight: normal;
  color: rgb(238, 238, 82);
}

/*  */

#codigo-historial{
  color: #4285F4;
  text-decoration: underline;
}


#extraer-historial h2{
  color: white;
  font-size: 1.7rem;
  padding-bottom: 0.4rem;
  
}




.cerrar-explorar-contenedor {
  padding-right: 1.5rem;
  padding-top: 1.5rem;
  text-align: right;
}
.encabezado-explorar-juegos, .encabezado-historial-juegos{
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  
  padding-top: 5rem; 
}

.encabezado-explorar-juegos h2{
  font-size: 3.3rem;

}

.encabezado-explorar-juegos button{
  color:rgb(250, 75, 75);
  background-color: transparent;
  border: 0.2rem solid rgb(250, 75, 75);
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 0.9rem;
  cursor: pointer;
  transition: all .3s ease;
}

.encabezado-explorar-juegos button:hover{
  text-decoration: underline;
}

.cerrar-explorar-juegos {
  font-size: 3rem;
  background-color: transparent;
  transition: all 0.3s ease;
  color:rgb(250, 75, 75);
  border: none;
  right: 2rem;
  top: 3.5rem;
  cursor: pointer;
}

.cerrar-explorar-juegos:hover{
  transform: scale(1.2);
  color:rgb(248, 55, 55);
}

.encabezado-explorar-juegos *{
  margin: 0;
  padding: 0;
}

.detalles-juegos-abrir-juego h2, .detalles-juegos h2{
  font-size: 1.4rem;
  font-weight: normal;
  color: gray;
}

.buscar-juegos{
  margin-top: 4rem;
}

.buscar-input, .correo-reporte-input{
  position: relative;
  margin: 0;
  font-family: "Gabarito", cursive;
  display: flex;
  justify-content: center;
 
}

.correo-reporte-input{
  margin-top: 0;
  color: white;
}

.buscar-input button, .buscar-explorar-input button{
  border-radius: 1rem;
  border: none;
  padding: 1rem;
  margin-left: 1.2rem;
  transition: all 0.2s ease;
  color: black;
  font-family: "Gabarito", cursive;
}

.buscar-input button:hover, .buscar-explorar-input button:hover{
  background-color: black;
  color: white;
  cursor: pointer;
}


.input-field-buscar, .input-field-correo-reporte{

  width: 40%;
  padding: 1.5rem;
  color: white;
  outline: none;
  background-color: transparent;
  border-radius: 2rem;
  border: 0.2rem solid gray;
}

.input-label-buscar, .input-label-correo-reporte {
  position: absolute;
  top: 49%;
  left: 28.5%;
 
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 16px;
  color: gray;
  pointer-events: none;
  background-color: transparent;
  transition: 0.2s ease all;
 
}

.input-label-correo-reporte{
  top: 48%;
  left: 32%;
}

.input-field-buscar:focus ~ .input-label-buscar,
.input-field-buscar:valid ~ .input-label-buscar,
.input-field-correo-reporte:focus ~ .input-label-correo-reporte,
.input-field-correo-reporte:valid ~ .input-label-correo-reporte{
  transform: translateY(-50%);
  top: 4%;
  left: 28.5%;
  font-size: 12px;
  background-color: #0f0f0f;
  padding: 0 5px;
}

.input-field-correo-reporte:focus ~ .input-label-correo-reporte,
.input-field-correo-reporte:valid ~ .input-label-correo-reporte {
  left: 32% !important;
}

.span-buscar{
  background-color: white;
  padding: 0.7rem 1rem 0.7rem 1rem;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

}


.sin-resultados h2{
  font-size: 2rem;
  margin: 20rem;
}

/* Abrir juego */

.encabezado-abrir-juego{
  position: relative;
  text-align: left;
}

.megusta-favorito-contenedor{
  display: flex;
  align-items: center;
  padding-bottom:1.6rem;
}

.requisitos{
  z-index: 4;
  
}


.requisitos h2:nth-child(1), .guia h2 {
  font-size: 2.3rem;
  color: #9537ff;
}
.requisitos h2:nth-child(2) {
  font-size: 1.8rem;
}

.cerrar-abrir-juego{
  background-color: transparent;
  color:rgb(250, 75, 75);
  font-size: 2rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.cerrar-abrir-juego:hover{
  transform: scale(1.2);
  color:rgb(248, 55, 55);
}

.detalles-juegos-abrir-juego {
  
  position: relative; /* Esto permite que los detalles se coloquen sobre la imagen */
}

.detalles-juegos-abrir-juego img {
  width: 100%; /* Ajusta la imagen al ancho del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  object-fit: cover; /* Asegura que la imagen cubra el área del contenedor sin distorsionarse */
  max-height: 450px; /* Limita la altura de la imagen */
  border-radius: 1rem;

}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.encabezado-detalles *{
  margin: 0;
  padding: 0;
  text-align: left;
 
}

.encabezado-detalles div{
  display: flex;
  align-items: center;

}

.megusta-favorito-contenedor div i, .confirmar-me-gusta-boton {
  font-size: 2.2rem;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.3s ease;
}

#confirmar-me-gusta-boton{
  font-size: 2.2rem;
  margin-top: 0.5rem;
  color: #9537ff;
  cursor: pointer;
  display: none;
  animation: scaleUp2 0.4s ease-out forwards;
}

.explorar-extraer-juegos-destacados{
  animation: scaleUp2 0.4s ease-out forwards;
}

.me-gusta i:hover {
  transform: scale(1.3); /* Aumenta el tamaño */
  color: #9537ff; /* Cambia el color del ícono */
}
.favorito i:hover {
  transform: scale(1.2); /* Aumenta el tamaño */
  color: #ffd43b; /* Cambia el color del ícono */
}
.copiar-link-juego i:hover {
  transform: scale(1.2); /* Aumenta el tamaño */
  color: green; /* Cambia el color del ícono */
}

#confirmar-agregar-favorito, #confirmar-copiar-link{
  font-size: 2rem;
  margin-top: 0.5rem;
  cursor: pointer;
  display: none;
  animation: scaleUp2 0.4s ease-out forwards;
  color: #ffd43b;
}

#confirmar-copiar-link{
  color: green;
}

.favorito i{
  margin-left: 1rem;
  font-size: 2rem !important;
}

.copiar-link-juego i{
  margin-left: 1rem;
  font-size: 2rem !important;
}

.encabezado-detalles h3{
  color: gray;
  font-size: 1.3rem;
}

.discord-abrir-juego{
  background-color: transparent;
  color: #5865f2;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.advertencia{
  background-color: #ffdb9b;
  display: flex;
  align-items: center;
  text-align: left;
  border-left: 1rem solid #ce8501;
  margin-top: 2.5rem;
  border-radius: 0.4rem;
  font-weight: normal;
  
}
.advertencia h2{
  font-size: 1.3rem;
  color: #ce8501;

}

.advertencia i{
  font-size: 2rem;
  color: #ce8501;
  margin-right: 2rem;
}

.descarga-juego-contenedor{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 4rem;
}

.loader-contenedor-abrir-juego{
  display: none;
  margin-left: 1rem;
  text-align: center;
}


.loader {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  border-top: 2px solid #d5fc34;
  border-right: 2px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border-bottom: 2px solid #5865f2;
  border-left: 2px solid transparent;
}


.enlace-descarga-abrir-juego{
  background-color: #9537ff;
  color: white;
  padding: 1.7rem;
  border-radius: 1rem;
  font-size: 1.7rem;
  font-family: "Gabarito", cursive;
  font-weight: normal;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reportar-juego-abrir-juego{
  background-color: transparent;
  text-decoration: underline;
  color:rgb(250, 75, 75);
  border: none;
  
  margin-top:1rem;
  cursor: pointer;
  font-family: "Gabarito", cursive;
}

.reportar-juego-abrir-juego:hover{
  color:rgb(255, 62, 62);
}



.youtube-abrir-juego{
  color:#ff0000;
  background-color: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.youtube-abrir-juego:hover, .discord-abrir-juego:hover {
  transform: scale(1.3); /* Aumenta el tamaño */
}

.enlace-descarga-abrir-juego:hover{
  transform: scale(1.1);
  text-decoration: underline;
}

.cargando-body{
  height: 100%;
}




/* Cargando destacados */

.contenedor-cargando-profesor {
  display: flex;
  justify-content: center;
  position: relative;
}

.loader-profesor-label {
  background-image: linear-gradient(
      90deg,
      transparent,
      #4e4e4e 50%,
      transparent 100%
    ),
    linear-gradient(#616161 100px, transparent 0);
  
  background-size: 200% 100%;
  animation: loading-editar 2s linear infinite;
  /* border-radius: 1rem; */
  

  width: 25%;
}

  /* Menú de navegación */


/* Discord menu */

.discord-menu{
  position: fixed;
  align-items: center;
  cursor: pointer;
  background-color: #5865f2;
  bottom: 5rem;
  right: 5rem;
  
  padding-top: 1.2rem;
  padding-bottom: 1.1rem;
  padding-right: 1.6rem;
  padding-left: 1.6rem;
  z-index: 99999999999999;
  display: none;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgb(0, 0, 0);
  
  animation: jump-discord 1s ease-in-out infinite;
}

.discord-menu i{
  color: white;
  font-size: 2.5rem;

}

/* Presentacion */

.p-juegoilimitado-contenedor{
  align-items: center;
  
  width: 80%;
  display: flex;
  margin: 10rem auto;
  position: relative;
  justify-content: center;
  margin-bottom: 0;
  
}

.texto-p{

  color: white;
  
  width: 30%;
  font-style: normal;
}

.h1-p-juegosilimitados{
  color: #9537ff;
  font-family: "Passion One", sans-serif;
  font-weight: 900;
   font-size: 5rem;

}

.texto-p h2{
  font-family: "Questrial", sans-serif; font-size:1.7rem;
}

.p-img-movil{
  display: none;

}
.p-img img{
  height: auto;
  width: 45rem;
  

}

.icono-p{
  position: absolute;
  color: white;
  font-size: 10rem;
  display: none;
}
/* Botones */
.p-botones{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
}

.p-botones button{
  font-family: "Gabarito", cursive;
  padding: 1.5rem 3rem 1.5rem 3rem;
  font-size: 1.7rem;
  border-radius: 4rem;
  color: black;
  border: none;
  
}

.ver-discord{
  margin-right: 1rem;
}

.ver-discord-button:hover{
  transition: all 0.2s;
  box-shadow: 0 2px 8px #0000007a;
  background-color: black;
  color: white;

  cursor: pointer;
  
}

.ver-juegos button{
  background-color: #9537ff;
  color: white;

}

.ver-juegos button:hover{
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: underline;
}
/*  */
@keyframes jump-discord {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}


.btn-pagina {
  padding: 10px;
  margin-left: 7px;
  font-family: "Gabarito", cursive;
  font-weight: bold;
  color: #000000;
  border: none;
  cursor: pointer;
  background-color: white;
  position: relative;
}

/* Lista de juego */
.pregunta-frecuente-contenedor{
  background-color: rgba(128, 128, 128, 0.096);
  margin-top: 20rem;
  padding-left: 10rem;
  padding-right: 10rem;
  padding-bottom: 4rem;
  
}

.preguntas-frecuente-encabezado h2{
  font-size: 3rem;
  padding-top: 4rem;
  font-family: "Gabarito", cursive;
  color: #9537ff;
}

/* Pregunta 1 */
.pregunta{ margin-top: 4rem;
 
  font-family: "Gabarito", cursive;
}
.pregunta h2:nth-child(1){
  color: white;
  font-size: 2rem;
  font-weight: 900;
  color: #9537ff;
  

}
.pregunta h2:nth-child(2){
  color: white;
  font-size: 1.6rem;
  font-family: "Questrial", sans-serif;
}

.pregunta ol {
  font-family: "Gabarito", cursive;
  color: white;
  font-weight: 500;
  font-size: 1.5rem;
  font-style: italic;
}


/*  */

/* Pregunta frecuente */

.pregunta-encabezado{
  padding-left: 10rem;
  padding-right: 10rem;
  padding-bottom: 2rem;
}

.pregunta-encabezado h2{
  font-size: 2.4rem;
  padding-top: 4rem;
  font-family: "Gabarito", cursive;
  color: white;
  
}

/* Añadir el siguiente CSS */
.asterisk {
  list-style-type: none;
  position: relative;
}

.asterisk::before {
  content: '*';
  position: absolute;
  left: -1em; /* Ajustar según sea necesario */
}

/* No resultado */
.no-resultado{
  text-align: center;
  padding-top: 5rem;
}

.no-resultado i{
  font-size: 15rem;
  color: white;
}

.no-resultado h2{
  color: white;
  font-size:1.9rem; font-weight: 200;
}
/* Agregar favorito */
.me-gusta-mensaje-contenedor, .guardar-juego-mensaje-contenedor, .error-correo-mensaje-contenedor {
  display: none;
  align-items: center;
  z-index: 999999;
  position: absolute;
  left: -2.5rem;
  top: 100%;
}

.guardar-juego-mensaje-contenedor{
  left: -1.1rem !important;
}
.error-correo-mensaje-contenedor{
/*   left: 0 !important; */
  top: 5rem !important;
}

.triangulo-cuerpo, .triangulo-cuerpo-guardar-juego {
  width: 100%; /* Ancho al 100% */
  position: relative;
  display: flex;
  flex-direction: column; /* Asegura que el contenido esté debajo del triángulo */
  border-radius: 1rem;
  background-color: black; /* Color de fondo del triángulo */
  color: white; /* Color del texto */
}

.triangulo-error-cuerpo-correo {
  width: 100%; /* Ancho al 100% */
  position: relative;
  display: flex;
  flex-direction: column; /* Asegura que el contenido esté debajo del triángulo */
  border-radius: 1rem;
  background-color: rgb(250, 75, 75); /* Color de fondo del triángulo */
  color: white; /* Color del texto */
}

.triangulo, .triangulo-guardar-juego {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px; /* Ajusta el tamaño del triángulo */
  border-color: transparent transparent black transparent; /* Color del triángulo */
  position: absolute;
  top: -10px; /* Mueve el triángulo hacia arriba del contenedor */
  left: 50%; /* Centra horizontalmente el triángulo */
  transform: translateX(-50%); /* Ajusta la posición para centrarlo */
}


.triangulo-cuerpo p, .triangulo-cuerpo-guardar-juego p {
  font-family: "Gabarito", cursive;
  margin: 0; /* Elimina el margen predeterminado del párrafo */
  padding: 10px; /* Espacio interno alrededor del texto */
  font-size: 1.3rem;
}

.triangulo-error-correo {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px; /* Ajusta el tamaño del triángulo */
  border-color: transparent transparent rgb(250, 75, 75) transparent; /* Color del triángulo */
  position: absolute;
  top: -10px; /* Mueve el triángulo hacia arriba del contenedor */
  left: 50%; /* Centra horizontalmente el triángulo */
  transform: translateX(-50%); /* Ajusta la posición para centrarlo */
}


.triangulo-error-cuerpo-correo p {
  font-family: "Gabarito", cursive;
  margin: 0; /* Elimina el margen predeterminado del párrafo */
  padding: 10px; /* Espacio interno alrededor del texto */
  font-size: 1.3rem;
}

/* Reportar juego */

.reportar-juego-contenedor{
  background-color: #0f0f0f;
  border: 0.1rem solid #292929;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.705);
  margin: 4rem auto;
  width: 50%;
  border-radius: 1rem;
  transform:  scale(0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; 
}

.reportar-juego-encabezado{
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.volver-abrir-juego{
  background-color: transparent;
  border: none;
  color: white;
  transition: all .3s ease;
  cursor: pointer;

}

.volver-abrir-juego:hover{
  transform: scale(1.2);
}

.razon-juego-reportar *, .nombre-juego-reportar *{
  padding: 0;
  margin: 0;
}

.nombre-juego-reportar, .razon-juego-reportar {
  text-align: center;
}

.nombre-juego-reportar h4, .razon-juego-reportar h4 {
  display: inline-block;
  background-color: #292929;
  color: white;
  padding: 0.6rem;
  border-radius: 1rem;
}


.enviar-reporte{
  margin-top: 2rem;
}

.enviar-reporte button{
  font-family: "Gabarito", cursive;
  padding: 1rem;
  border-radius: 4rem;
  color: black;
  border: none;
  cursor: pointer;
  transition: all .3s ease;
  
}

.enviar-reporte button:hover{
  background-color: black;
  color: white;
  text-decoration: underline;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.705);
}

.razon-juego-reportar select{

  padding: 1rem;
  border:0.1rem solid gray;
  background-color: black;
  color: white;
  border-radius: 1rem;
  outline: none;
  border: 0.2rem solid #292929;
  font-family: "Gabarito", cursive;
}

.notificar-correo{
  display: flex;
  align-items: center;
  justify-content: center;

}

.notificar-correo label{
  font-size: 1.3rem;
}

.termino-privacidad button{
  background-color: transparent;
  border: none;
  color: white;
  margin-top: 1rem;
  cursor: pointer;
  font-size: 1.2rem;
}

.termino-privacidad i, .termino-privacidad button{
  text-decoration: underline;
}

.discord-soporte-reportar-juego{
  background-color: #9537ff;
  color: white;
  margin-top: 1rem;
  border-radius: 0.9rem;
  border: none;
  cursor: pointer;
}

.captcha-contenedor{
  margin-top: 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
}

/*  */
.contenedor-explorar-juegos.animated, 
.contenedor-abrir-juego.animated, 
.reportar-juego-contenedor.animated, 
.contenedor-abrir-favoritos.animated, 
.contenedor-historial.animated,
.editar-usuario-contenedor.animated, .pedido.aniamted{
  opacity: 1;
  transform: scale(1);
}

/* Verificar discord */
.verificar-login-contenedor{
  background-color: black;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
}

/*  */

.pedido-one{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pedido{
  border: 0.1rem solid #292929;
  background-color: #0f0f0f;
  position: relative;
  color: white;
  width: 30%;
  text-align: left;
  border-radius: 1rem;
  font-family: "Gabarito", cursive;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.705);
  animation: scaleUp3 0.3s ease-out forwards;
}

.cargando-buscar-pedido{
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
  border-radius: 1rem;
  z-index: 999;
  display: none;
}

.pedido-encabezado{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.pedido-encabezado h2{
  font-size: 2rem;
  
}

.pedido-encabezado button{
  font-size: 3rem;
  background-color: transparent;
  transition: all 0.3s ease;
  color:rgb(250, 75, 75);
  border: none;
  right: 2rem;
  top: 3.5rem;
  cursor: pointer;
}

.pedido-encabezado button:hover{
  transform: scale(1.2);
  color:rgb(248, 55, 55);
}

.buscar-pedido-contenedor button:nth-child(2){
  background-color: white;
  color: black;
  font-family: "Gabarito", cursive;
  border: none;
  padding: 1rem;
  border-radius: 1rem;
  cursor: pointer;
}

.buscar-pedido-contenedor button:nth-child(3){
  background-color: transparent;
  color: white;
  font-family: "Gabarito", cursive;
  text-decoration: underline;
  border: none;
  margin-left: 1rem;
  cursor: pointer;
}

.buscar-pedido-contenedor button:nth-child(1):hover{
  background-color: rgba(255, 255, 255, 0.952);
}

/*  */

.nombre-discord-agregado{
  display: inline-flex;
  padding: 0 1rem 0 1rem;
  border-radius: 2rem;
  align-items: center;
  background-color: #1e1e1e;
  
}

.nombre-discord-agregado h2{
  font-size: 1.4rem;
}

.nombre-discord-agregado button{
  background-color: transparent;
  border: none;
  cursor: pointer;

}
.editar-usuario{
  color: #4285F4;
  margin-left: 1rem;
  font-family: "Gabarito", cursive;

}

.editar-usuario:hover, .eliminar-usuario:hover{
  text-decoration: underline;
}

.eliminar-usuario{
  color: rgb(250, 75, 75);
  font-family: "Gabarito", cursive;
}

.usuario-discord-buscar h2{
  font-size: 1.5rem;
}

.input{
  position: relative;
  margin: 0;
  font-family: "Gabarito", cursive;
  display: flex;
  justify-content: left;
}


.input-field{
  width: 100%;
  padding: 1.3rem;
  border: 0.2rem solid gray;
  border-radius: 2rem;
  color: white;
  outline: none;
  background-color: transparent;
}

.input label{
  pointer-events: none;
    font-size: 17px;
    color: gray;
    background-color: transparent;
    padding-left: 0.5rem;
}

.input-field{
  width: 40%;
  padding: 1.3rem;
  padding-left: 3.2rem;
  border: 0.2rem solid gray;
  border-radius: 2rem;
  color: gray;
  outline: none;
  font-family: "Gabarito", cursive;
  background-color: transparent;
}

.input-label {
  position: absolute;
  top: 33%;
  left: 6%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 16px;
  color: gray;
  background-color: transparent;
  transition: 0.2s ease all;
 
}

.discord-buscar-pedido-label{
  top: 50%;
}


.input-field:focus ~ .input-label,
.input-field:valid ~ .input-label{
  transform: translateY(-50%);
  top: 5%;
  left: 6%;
  
  font-size: 12px;
  color: gray;
  background-color: #0f0f0f;
  padding: 0 5px;
}

.buscar-pedido-contenedor{
  display: flex;
  align-items: center;
  justify-content: right;
}

.number-pedido, .user-discord-ico{
  position: absolute;
  transform: translateY(-50%);
  top: 33%;
  color: gray;
  margin-left: 1.5rem;
}

.user-discord-ico{
  top: 50% !important;
}

/*  */

.detalles-pedido-buscar{
  border-left: 0.5rem solid gray;
  background-color: #1e1e1ecc;
  padding: 1rem;
  color: white;
  
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.detalles-pedido-buscar h2{
  font-size: 1.6rem;

}

.hora-pedido-buscar{
  position: absolute;
  right: 1rem;
  font-size: 1.3rem;

}

.detalles-pedido-buscar{
  position: relative;
}

.detalles-pedido-buscar *{
  padding: 0 0 1rem 0;
  margin: 0;
}

/* Editar usuario */

.editar-usuario-contenedor-one{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.editar-usuario-contenedor{
  border: 0.1rem solid #292929;
  background-color: #0f0f0f;
  position: relative;
  color: white;
  width: 25%;
  text-align: left;
  border-radius: 1rem;
  font-family: "Gabarito", cursive;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.705);
  transform:  scale(0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;  
}


.editar-usuario-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cerrar-editar-usuario {
  font-size: 3rem;
  background-color: transparent;
  transition: all 0.3s ease;
  color:rgb(250, 75, 75);
  border: none;
  right: 2rem;
  top: 3.5rem;
  cursor: pointer;
}

.cerrar-editar-usuario:hover{
  transform: scale(1.2);
  color:rgb(248, 55, 55);
}

.guardar-editar-usuario-discord{
  text-align: right;
}

.guardar-editar-usuario-discord-boton{
  padding: 1rem;
  color: black;
  background-color: white;
  font-family: "Gabarito", cursive;
  border: none;
  
  border-radius: 1rem;
  cursor: pointer;
  transition: all .3s ease;
}

.guardar-editar-usuario-discord-boton:hover{
  color: white;
  background-color: black;
  text-decoration: underline;
}

.cancelar-editar-usuario{
  background-color: transparent;
  border: none;
  font-family: "Gabarito", cursive;
  color: white;
  text-decoration: underline;
  cursor: pointer;

}

.cancelar-editar-usuario:hover{
  color: rgba(255, 255, 255, 0.788);
}

.input-editar-pedido{
  position: relative;

  margin: 0;
  font-family: "Gabarito", cursive;
  display: flex;
  align-items: center;
  
  justify-content: left;
  margin-top: 2rem;
}

.editar-usuario-input{
  width: 45%;
  padding: 1.3rem ;
  border: 0.2rem solid gray;
  border-radius: 2rem;
  color: white;
  outline: none;
  background-color: transparent;
  font-family: "Gabarito", cursive;
}


.input-label-editar-usuario{
  position: absolute;
  top: 50%;
  left: 2%;
 
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 16px;
  color: gray;
  pointer-events: none;
  background-color: transparent;
  transition: 0.2s ease all;
 
}

.editar-usuario-input:focus ~ .input-label-editar-usuario,
.editar-usuario-input:valid ~ .input-label-editar-usuario{
  transform: translateY(-50%);
  top: 5%;
  left: 2%;
  font-size: 12px;
  color: gray;
  background-color: #0f0f0f;
  padding: 0 5px;
}

/* DISPOSITIVOS MOVILES 250 a 500ZOOM */
@media (max-width:800px) {

  /*  */
  .p-juegoilimitado-contenedor{
    width: 90%;
    display: block;
    text-align: center;
    
  }

  .texto-p{
    width: 100%;
    
  }

  .h1-p-juegosilimitados{
    font-size: 2rem;
    font-weight: 500;
  }
  
  .texto-p h2{
    font-size: 1.3rem;
  }

  .p-img-movil{
    display: block;
  }



  .p-img-movil img{
    width: 25rem;
    height: auto;
  }

  .p-img{
    display: none;
  }

  .p-botones{
    display: block;
    text-align: center;
  }

  .ver-discord{
    margin-right: 0;
    margin-bottom: 1rem;
  }



  .p-botones button{
    padding: 1.5rem;
    font-size: 1.2rem;
  }

  .lista-juegos-contenedor{
    width: 100%;
    margin-top: 5rem;
    padding: 2rem;
  }

  .lista-juegos-encabezado h2{
    font-size: 1.9rem;
  }

  .lista-a-encabezado h2{
    font-size: 1.9rem;
  }

  .nombre-juego{
    font-size: 1.8rem;
  }

  .later-update-juego{
    font-size: 1.3rem;
  }


  .lista-a-juegos-get button{

    font-size: 1.2rem;
  }



  #termino-busqueda-profesor{
    width: 80%;
  }

  .no-resultado i{
    font-size: 8rem;
    
  }

  .no-resultado h2{
    font-size: 1.5rem;
  }

  .pregunta-frecuente-contenedor{
    padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 4rem;
  }

 .izquierda-boton, .izquierda-boton-recomendado, .izquierda-boton-mas-buscado, .izquierda-boton-accion, .izquierda-boton-aventura, .izquierda-boton-favorito, .derecha-boton, .derecha-boton-recomendado, .derecha-boton-mas-buscado, .derecha-boton-favorito, .derecha-boton-accion, .derecha-boton-aventura{
    display: none !important;
  } 

  .contenedor-explorar-juegos, .contenedor-abrir-favoritos{
    width: 100%;
  }

  .sin-resultados h2{
    margin: 20rem 0 20rem 0;
    
  }

  .input-field-buscar{
    width: 60%;
  }

  .input-label-buscar{
    left: 17%;
  }

  .input-field-buscar:focus ~ .input-label-buscar,
.input-field-buscar:valid ~ .input-label-buscar {
  top: 5%;
  left: 17.5%;
}

.input-field-username, .input-field-explorar-buscar{
  

  width: 70%;
}

.contenedor-abrir-juego, .reportar-juego-contenedor{
  width: 100%;
}

.no-resultado-aventura, .no-resultado-accion{
  width: 100%;
}

.enlace-descarga-abrir-juego:hover{
  transform: scale(1.0);
  text-decoration: none;
}

.contenedor-historial{
  width: 100%;
}

.pedido, .editar-usuario-contenedor{
  width: 97%;
}



/*  */



}