* {
  box-sizing: border-box;
  font-weight: normal;
}

body {
font-family: "vt323", sans-serif;
margin: 0;

  /* color general de los textos */
  color: white;

  /* color de fondo */
  background-color:#E9E774;
  min-height: 100dvh;

  
  background-image: url(../imagenes/2michis.png);
  background-size: cover; 
  background-size: 25em;
  
  background-position: 53.9em 85%;
  background-repeat: no-repeat;
  

}

/* selector multiple: parrafos e items de listas  */
p,
li {
  /* se evitan "viudas" y "huerfanos" */
  text-wrap: pretty;
}

/* para que "TODAS" las imagenes NO sean
   mayores que las cajas que las contienen
   para evitar "scroll" horizontal */
img {
  /* mediran, como maximo, el tamaño
     del bloque html que las contiene */
  max-width: 100%;
}

/* "TODOS" los vinculos */
a {
  /* no estaran subrayados */
  text-decoration: none;
}

ul
{
  /* elimina bullets, numeros etc. */
  list-style: none;

  /* retira el relleno izquierdo predeterminado */
  padding: 0;
}

.contenedora {

  /* ancho maximo 1040px */
  max-width: 65rem;
  
  /* centrado horizontal (si sobra espacio,
    lo distribuye a izquierda y derecha por igual) */
  margin-inline: auto;

  /* espacio entre el borde del elemento y su contenido
  para que este no quede "pegado" a los bordes */
 

}


/*-----------------------------------------------------------
====================================
            Navegador-header 👋≧◉ᴥ◉≦
====================================
------------------------------------------------------------*/






  /*-----------------------------------------------header= menu-------------------------------------------------*/

  header {
    box-shadow: 0 4px 2px hsl(0 0% 0% / 0.25); /* sombra difusa  */
  
    /* "pegado" al borde superior de la ventana */
    position: sticky;
    /* distancia 0 del borde */
    top: 0;
    /* capa superior arriba de casi todo */
    z-index: 8000;

    background-color: black;
  }
  
  /* caja que "limita" al logo y al menu */
  header .contenedora {
    display: flex; /* caja flexible */
    /* si los elementos "hijos" no caben en una fila,
       van a la fila siguiente */
    flex-wrap: wrap;
    
    /* elementos "hijos" separados en la horizontal */
    justify-content: center;
    
    /* elementos "hijos" centrados en la vertical */
    align-items: baseline;
  }
  
  header nav ul{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    -ms-flex-direction: column;
  }
  header nav ul li a{
    font-size: 50px;
    width: 100%;
    height: 100%;
    background-color: orange;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0.5em 1.5em;
  }
  
  header nav ul li a:hover{
    color: black;
    background-color:rgba(255, 127, 90, 1) ;
    transition: background-color 0.7s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */
  }

/*--------------------------------- menu hamburguesa*--------------------------------*/

.menu-hamburguesa{
  padding: .49rem;
  width: 3rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.3s ease-out;
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 9000;}

 /*las tres lineas del menu hamburguesa*/     

 .menu-hamburguesa .linea {
   width: 25px;
   height: 3px;
   background-color: rgba(255, 127, 90, 1);;
   margin: 5px;
   transition: all 0.3s ease-out;
   position: relative;
   z-index: 9000;
 }

 
 nav ul {
   background-color: orange;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   position: fixed;
   /* emplazamiento,
   estirado en toda la ventana */
   inset: 0;
   /* capa superior, arriba de casi todo */
   z-index: 8000;
   /* escondido "a la derecha" */
   translate: 100%;
   transition: all .6s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
 }
 
 /*--------------------------- el menu cuando "nav" tiene la clase "menuVisible" -----------------------*/
 
 .menuvisible ul {
  background-color:orange ;
  opacity: 80%;
  transition: all .4s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  
  /* se muestra */
  translate: 0;
  margin: 0;
}

main{
  width: 100%; /* O el ancho deseado */
  overflow-x: hidden;
}

/*-----------------------------------------------------------
            FIN Navegador-header 👋≧◉ᴥ◉≦
------------------------------------------------------------*/


  /*-----------------------------------------------------------
====================================
            primera sección (columna 1) avatar-exp-etc
====================================
------------------------------------------------------------*/

.avatar {
  display: flex;
  flex-wrap: wrap;
  
 align-items: center;
 justify-content: center;
 justify-items: center;

 gap: 2em;
 

}

.michis
{
width: 300%;
}

/*------------------------avatar y texto------------------------------*/
.gatofadu-img{
  border-radius: 100%;
  width: 15rem;
  max-width: 100%;
  background: #FF7F5A;
 
}

/*----@gatofadu y "leyenda universitaria"-----*/

.columna-2 {
  justify-content: center;
}

.usser-titulo {
  font-weight: normal;
  background-color: black;
  border-radius: 1rem;
  width:auto;
 
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  padding:  0.5rem;
  text-align: center;
}

.usser-titulo h1{
  color: #FF7F5A;
  
  font-style: normal;
  font-weight:normal;
  
  margin-bottom: 0.25em;
  margin-top: 0.25rem;

  color: #FF7F5A;
}

.usser-titulo h5{
  color: white;
  font-style: normal;
  
  font-weight: normal;

  color: white;
  margin-bottom: 0.25em;
  margin-top: 0.25rem;

}

/*------------------------------------------------------barra de experiencia/nivel, lo que esta debajo del usser------------------------------*/

.nivel{
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  max-width: 100%;
  margin-top: 0.5em;
  margin-bottom: 0;
  

  background-image: url(../imagenes/estrella-maldita.png);
  background-repeat: no-repeat;
  background-position: 0.1em;
  background-size: 17%;
}

.nivel7 {
  position: relative;
  right: 0.1em;
  top: 0.1em;
  color: white;
  font-size: normal;
  font-weight:normal;
  
}

/*-----------------------barra de nivel 7-------*/

.progreso-nivel {
  -webkit-appearance: none; /* Elimina el estilo predeterminado en WebKit/Blink */
  appearance: none; /* Elimina el estilo predeterminado en otros navegadores */
  width: 77%; /* Ancho total del control deslizante */
  height: 30px; /* Altura del control deslizante */
  background: #E9E774; /* Color de fondo del control deslizante */
  outline: none; /* Elimina el contorno alrededor del control */
  opacity: 1; /* Opacidad completa del control deslizante */
  position: relative;
  overflow: hidden; /* Oculta el desbordamiento para mantener la barra de progreso dentro de los bordes */
  left: 20px; /* Posición */
  border-radius: 4px; /* Borde redondeado menor */

  /* Personalización del riel del control deslizante */
  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 30px; /* Altura del riel */
    background-color: #E9E774; /* Color de fondo del riel */
    border-radius: 1rem; /* Borde redondeado menor */
    border: 2px solid black; /* Borde negro */
  }

  /* Personalización del pulgar (el círculo que se arrastra) */
  &::-webkit-slider-thumb {
    -webkit-appearance: none; /* Elimina el estilo predeterminado en WebKit/Blink */
    appearance: none; /* Elimina el estilo predeterminado en otros navegadores */
    width: 0; /* Ancho del pulgar */
    height: 0; /* Altura del pulgar */
    background: transparent; /* Fondo transparente */
    cursor: default; /* Cursor predeterminado */
    border: none; /* Sin borde */
  }

  /* Pseudo-elemento para el borde */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid black; /* Borde negro */
    border-radius: 1rem; /* Borde redondeado menor */
    pointer-events: none; /* Permite interactuar con el control deslizante */
    z-index: 1; /* Coloca el borde encima del color de progreso */
  }

  /* Pseudo-elemento para el color de progreso */
  &::after {
    content: '';
    position: absolute;
    top: 2px; /* Ajusta para que el color de progreso quede dentro del borde */
    left: 2px; /* Ajusta para que el color de progreso quede dentro del borde */
    height: calc(100% - 4px); /* Ajusta la altura para que quede dentro del borde */
    width: 70%; /* Ajusta el ancho del progreso al valor del control deslizante */
    background: #FF7F5A; /* Color de progreso */
    border-radius: 1rem; /* Borde redondeado mínimo */
    border-start-end-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 0; /* Coloca el color de progreso debajo del borde */
  }
}

/* ------------------Botones (Jugar - Formar equipo)------------------------------------*/
.botones-perfil a {
  color:white;
  margin-top: 2rem; /* Ajusta el margen superior según sea necesario */
}

.botones-perfil {
  display: flex;
}

.boton1 {
  margin-right: 10px;
}
.boton1,
.boton2 {
  /* Estilos previos */
  font-weight: normal;
  background-color: black;
  padding: 10px;
  border-radius: 1rem;
  margin-top: 1rem;

  width: 7em;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Añade transición */
  /* Posicionamiento absoluto */
  
}

.botones-perfil a:hover{
  color: rgba(255, 127, 90, 1); /* el color al pasar el ratón, al enfocarse y al hacer clic */
}

/*----------------------columna 3 (reconocimientos) rtas-record-top5-victorias--------------------------------------------------------------------*/

.columna-3 {
  font-weight: normal;
 
  gap: 20px;
  margin-left: 0em;
  align-items: flex-start;
  justify-content: flex-start;
  justify-items: flex-start;
}

.columna-3 h3 {
  font-weight: normal;
  color: #000000;
  font-size:20px;
  width: 12em;
  
 
  }

.columna-3 h5 {
  margin-bottom: 1em;
  margin-top: 5em;
}

.reconocimiento1 {
 background-color:#FF7F5A;
 border-radius: 1rem;
 text-align: center;
 

 }

.reconocimiento2 {
 background-color: #FF7F5A;
  border-radius: 1rem;
  text-align: center;
  }
  
.reconocimiento3 {
 background-color: #FF7F5A;
 border-radius: 1rem;
 text-align: center;
 }

.reconocimiento4 {
  background-color: #FF7F5A;
 border-radius: 1rem;
 text-align: center;
  }

/*-----------------------------------------------------------
====================================
            Segunda sección - "Recompensas".
====================================
------------------------------------------------------------*/
/*---------------------------------subtítulo "recompensas" CELU----------------------------------------------------------------*/
/*recompensas movil*/
.recompensas {
  font-weight: normal;
  
  text-align: center;
 
 
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
 
  height: auto;

  padding: 0;
}

.recompensas h2 {
  font-weight: normal;
  background-color: black;
  text-align: center;
 
  padding-bottom: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  height: auto;

  margin-bottom: 0; /*para que no se despegue del cuadrado superior del titulo recompensas*/
}


  

/*---------------recompensas de niveles (los elementos, el pleo, ojos, cuchillo, bigotes, etc) ---------------*/



/*------------------------*/




/*---cambio de tamaño de los números h5 de recompensas, unicamente en la versión móvil----*/
@media (max-width: 450px) {

  .gatofadu-img {
    margin-top: 1em;
  }
  h1 {
    line-height: 1.1;
  }
  body {
    background-color: black; /*color de fondo del header/barra de navegador en modo móvil*/
  }

  main {
    background-color: #E9E774;
  }
  

  .avatar {

    background-image: url(../imagenes/2michis.png);
 background-position: 3em 100%;
 background-size: contain;
 background-size: 70%;
 
 background-repeat: no-repeat;
 background-color: #E9E774;
 padding-bottom: 8em;
  }

  /*----------------cuadros debajo de botones de usuario; rtas, record, top5 y victorias EN CELU---------------*/
  .columna-3 {
    display: flex;
    flex-direction: column;
  }
/*---lo de entrelineas corrección 6/07---*/
h1, h2, h3, h4 {
  line-height: 1;
  text-wrap: balance;
}
/*--------------------------niveles y recompensas celu--------------------*/

.niveles {
  text-align: center;
  
  justify-content: space-between;
  
  padding-top: 2em;
  
}
.niveles h5 {
  text-align: center;
  
  background-color: #000000;
  color: rgb(255, 255, 255);
  width: 2em;
  height: 2em;
  font-weight: normal;
  border-radius: 50px;
  line-height: 2em;

  /*para que los números queden ENCIMA de la barra*/
  position: relative;
  z-index: 3;
  left: 2.8em;
  bottom: 7em;
  font-size: 20px;
}
.caja {
  background-color:#FF7F5A;
 margin-bottom: -1.2em;
  
 
}
  .niveles {
    display: flex;
    flex-direction: column;
    margin-left:4em;
    
  }

.lv1 {
  text-align: center;
}
/*-----------------------------------barra recompensas CELU en vertical----------------------------*/
/* Contenedor de la barra de progreso */
.progreso-barra {
 display: none;

}

.caja {
  background-image: url(../imagenes/recompensas-cel.png);
  background-repeat: no-repeat;
  background-position: 7.5em 6px;
}

/*----------------------------------medallas celu--------------------------------*/
.medallas h2 {
  font-weight: normal;
  background-color: black;
  text-align: center;
 
  padding-bottom: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  height: auto;

  margin-bottom: 0; /*para que no se despegue del cuadrado superior del titulo recompensas*/
}
.medallas {
  background-color:#FF7F5A;
  padding: 0;
  
}
.medallass {
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1em;

  padding-top: 2em;
  padding-bottom: 1.7em;
}

.medallas h3 {
  font-weight: normal;
  color: black;
}

.medallas p {
  font-weight: normal;
}

/*-----------------footer celu----------------------*/
footer .redes {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 1em;
}

footer img {
  width: 20%; /* Ajusta el ancho de las imágenes */
  margin-bottom: 1em; /* Espacio entre las imágenes */
}

footer h2 {
  font-size: 20px; /* Tamaño de fuente más pequeño */
    text-align: center;
    color:rgba(255, 127, 90, 1) ;
   }
  


footer p {
  display: none;
}

}





/*-----------------------------------------------------------
          FIN de main (CELU) 👋≧◉ᴥ◉≦
------------------------------------------------------------*/

/*espacio vació, dinosaurio pastando permiiiii

             ____
            /â—‰wâ—‰)
     .-^^^-/ /
  __/       /
<__.|_|-|_|

*/

/*--------------------------------imagen?? esto es viejo, lo dejo por si acaso------------------------------------*/
/* Estilos CSS previos */

/* Contenedor para la imagen */
.contenedora-imagenes {
  display: flex;
  justify-content: center;
  padding: 20px;
  margin-top: 2em;
}

/* Estilos de la imagen */
.contenedora img {
  /* Estilos previos */
  max-width: 100%; /* Para que la imagen no sea más grande que su contenedor */
  
}


/*
====================================
            Footer
====================================
*/


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
===================================================================================================================
                                   @media para ordenadores - (arriba los celus)
===================================================================================================================
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

 /*---------------------------------------@medias para pantallas de ordenadores------------------------*/

 @media(min-width:450px){


  .recompensas h2 {
  
    font-weight: normal;
    background-color: black;
    border-radius: 1rem;
   
    text-align: left;
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    /*---padding:  0.5rem;---*/
    /*padding:  1rem;*/
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    height: auto;
  
    margin-bottom: 0;
  }
  /*------------------------------------------anula el menu hamburguesa--------------------------------------*/

   .menu-hamburguesa{
       display: none;
   }

/*-------------------------------------anula varias opciones del menu vertical--------------------------------*/

   header nav ul {
       /* caja flexible para menu horizontal*/
       display: flex;
     /* para que esté en capa superior pero que no parezca */
       position: relative;
       opacity: 1;
       visibility: visible;
       translate: none;
       transition: none;
     }
 /*-----------------------------------------navegacion, menu y header------------------------------------*/

     .contenedora {
 
       /* ancho maximo 1040px */
       max-width: 65rem;
     
       /* centrado horizontal (si sobra espacio,
         lo distribuye a izquierda y derecha por igual) */
       margin-inline: auto;
     
       /* espacio entre el borde del elemento y su contenido
       para que este no quede "pegado" a los bordes */
       padding: 1rem;
     }
   
     nav {
       flex-grow: 1;
     }
   
   .menu {
       display: flex;
       justify-content: flex-end;
       padding-right: 1rem; }
   
   .menu li {
       margin: 0 1rem; }
   
   .menu a {  
       color:rgba(255, 127, 90, 1);
       transition: transform 0.3s; /* transicion suave para el efecto */
       font-weight: bold;  
     }
   
     
     header nav ul {
       /* elimina los margenes arriba y abajo que vienen predeterminados */
       margin-block: 0;
       display:flex;
       flex-direction: row;
       gap: .25rem;
       flex-wrap: wrap;
       justify-content: flex-end;
       background-color: black;
     }
   
     header nav ul li {
       width: 5em;
       height: 2em;
       margin-left: .30em;
       
       /* agrega espacio vertical entre la lista del menu*/
       margin-right: 10px;
     
      /*separa los contenedores los cuales envuelven a los link, se les dio separacion
      y tamaño adecuado para que quede prolijos*/
     }
   
     header nav {
       border-radius: 1em;
       gap: 1em;
     }
   
     header nav a {
        
       /* para darle propiedades de caja (ancho, por ejemplo) */
       display: block;
       
       /* ancho igual para todos */
       width: 5em;
       
       /* "relleno" arriba y abajo */
       padding-block: 0.25em .5em;
         
       /* se alineo los textos en el centro, horizontal.*/
       text-align: center;
       }
   
       header .contenedora{
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
           text-align: justify;
         } 
     
     header nav ul li a {
       width: 100%;
       height: 100%;
       background-color: rgb(0, 0, 0);
       color:rgba(255, 127, 90, 1);
       border-color:rgba(255, 127, 90, 1) ;
       text-decoration: none;
       font-weight: bold;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 16px;
     }
     
     header nav ul li a:hover{
       color: white;
       background-color: black;
       outline: solid rgba(255, 127, 90, 1);
       transition: background-color 0.7s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */
     }
       
     header{
         background-color: black;
       }
  
  /*--------------------------------------------home, aca empieza aplicarse la posición de los contenedores y demas elementos en ORDENADOR--------------------------------------------------------*/
  h1, h2, h3, h4 {
    line-height: 1;
    text-wrap: balance;
  }

   /*-------posición----------------*/

.avatar {
  display: flex;
  flex-wrap: wrap;
  
    align-items: center;
    justify-content: center;
    justify-items: center;

  gap: 2em;

}

/*------------------------avatar y texto------------------------------*/
.gatofadu-img{
  border-radius: 100%;
  width: 10rem;
  
  max-width: 100%;
  background: #FF7F5A;

  align-items: center;
    justify-content: center;
    justify-items: center;
    
}

/*----@gatofadu y "leyenda universitaria"-----*/

.usser-titulo {
  font-weight: normal;
  background-color: black;
  border-radius: 1rem;
  width:15rem;
 
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  padding:  0.5rem;
  text-align: center;
}

.usser-titulo h1{
  color: #FF7F5A;
  
  font-style: normal;
  font-weight:normal;
  
  margin-bottom: 0.25em;
  margin-top: 0.25rem;

  color: #FF7F5A;
}

.usser-titulo h5{
  color: white;
  font-style: normal;
  
  font-weight: normal;

  color: white;
  margin-bottom: 0.25em;
  margin-top: 0.25rem;

}

/*------------------------------------------------------barra de experiencia/nivel, lo que esta debajo del usser------------------------------*/

.nivel{
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  max-width: 100%;
  margin-top: 0.5em;
  margin-bottom: 0;
  

  background-image: url(../imagenes/estrella-maldita.png); 
  background-repeat: no-repeat;
  background-size: 2.2em;
  background-position: 0em 1.5em;
}



.nivel7 {
  position: relative;
  right: 0.1em;
  left: -0.2em;
  color: white;
  font-size:none;
  font-style: normal;
  font-weight: normal;
  
}

/*--------barra nivel 7, a la derecha de la estrella----------*/
.nivel {
  padding: 10px;
}

.progreso-nivel {
  -webkit-appearance: none; /* Elimina el estilo predeterminado en WebKit/Blink */
  appearance: none; /* Elimina el estilo predeterminado en otros navegadores */
  width: 88%; /* Ancho total del control deslizante */
  height: 30px; /* Altura del control deslizante */
  background: #E9E774; /* Color de fondo del control deslizante */
  outline: none; /* Elimina el contorno alrededor del control */
  opacity: 1; /* Opacidad completa del control deslizante */
  
  position: relative;
  overflow: hidden; /* Oculta el desbordamiento para mantener la barra de progreso dentro de los bordes */
  left: 15px; /* Posición */
  border-radius: 4px; /* Borde redondeado menor */

  /* Personalización del riel del control deslizante */
  &::-webkit-slider-runnable-track {
    width: 100%; /* Ancho total del riel */
    height: 30px; /* Altura del riel */
    background-color: #E9E774; /* Color de fondo del riel */
    border-radius: 1rem; /* Borde redondeado menor */
    border: 2px solid black; /* Borde negro */
  }

  /* Personalización del pulgar (el círculo que se arrastra) */
  &::-webkit-slider-thumb {
    -webkit-appearance: none; /* Elimina el estilo predeterminado en WebKit/Blink */
    appearance: none; /* Elimina el estilo predeterminado en otros navegadores */
    width: 0; /* Ancho del pulgar */
    height: 0; /* Altura del pulgar */
    background: transparent; /* Fondo transparente */
    cursor: default; /* Cursor predeterminado */
    border: none; /* Sin borde */
  }

  /* Pseudo-elemento para el borde */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid black; /* Borde negro */
    border-radius: 1rem; /* Borde redondeado menor */
    pointer-events: none; /* Permite interactuar con el control deslizante */
    z-index: 1; /* Coloca el borde encima del color de progreso */
  }

  /* Pseudo-elemento para el color de progreso */
  &::after {
    content: '';
    position: absolute;
    top: 2px; /* Ajusta para que el color de progreso quede dentro del borde */
    left: 2px; /* Ajusta para que el color de progreso quede dentro del borde */
    height: calc(100% - 4px); /* Ajusta la altura para que quede dentro del borde */
    width: 70%; /* Ajusta el ancho del progreso al valor del control deslizante */
    background: #FF7F5A; /* Color de progreso */
    border-radius: 1rem; /* Borde redondeado mínimo */
    border-start-end-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 0; /* Coloca el color de progreso debajo del borde */
  }
}



/* ------------------Botones (Jugar - Formar equipo)------------------------------------*/
.botones-perfil a {
  color:white;
 
}

.botones-perfil {
  display: flex;
}

.boton1 {
  margin-right: 10px;
}
.boton1,
.boton2 {
  /* Estilos previos */
  font-weight: normal;
  background-color: black;
  padding: 10px;
  border-radius: 1rem;
  margin-top: 0.2rem;

  width: 7em;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Añade transición */
  /* Posicionamiento absoluto */
  
}

.botones-perfil a:hover{
  color: rgba(255, 127, 90, 1); /* el color al pasar el ratón, al enfocarse y al hacer clic */
}

/*----------------------columna 3 (reconocimientos) rtas-record-top5-victorias--------------------------------------------------------------------*/

.columna-3 {
  font-weight: normal;
 display: flex;
 
  gap: 20px;
  margin-left: 0em;
  align-items: flex-start;
  justify-content: flex-start;
  justify-items: flex-start;
}

.columna-3 h3 {
  font-weight: normal;
  color: #000000;
  font-size:20px;
  width: 5.3em;
 
  }

.reconocimiento1 {
 background-color:#FF7F5A;
 border-radius: 1rem;
 text-align: center;
 
 

 }

.reconocimiento2 {
 background-color: #FF7F5A;
  border-radius: 1rem;
  text-align: center;
  }
  
.reconocimiento3 {
 background-color: #FF7F5A;
 border-radius: 1rem;
 text-align: center;
 }

.reconocimiento4 {
  background-color: #FF7F5A;
 border-radius: 1rem;
 text-align: center;
  }

/*-----------------------------------------------------------
====================================
            Segunda sección - "Recompensas".
====================================
------------------------------------------------------------*/


/*---------------recompensas de niveles (los elementos, el pleo, ojos, cuchillo, bigotes, etc) ---------------*/

/*--------barra de progreso PC ORDENADOR-----------------------*/

/* Contenedor de la barra de progreso*/
.progreso-barra {
 
  height: 15px; /* Ajusta la altura según sea necesario */
  background-color: transparent !important; /* Fondo transparente */
  border: 2px solid black !important; /* Borde negro */
  border-radius: 10px; /* Bordes redondeados */
  overflow: hidden; /* Para que la barra de progreso no se salga del contenedor */

  margin-bottom: 1em;
  margin-top:-2.7em;
}


/* Barra de progreso interior */
.progreso {
  height: 100%; /* Asegura que la altura de la barra interior sea la misma que la del contenedor */
  
  background-color:#E9E774; /* Color de relleno */
  border-radius: 8px 0 0 8px; /* Bordes redondeados solo en la parte izquierda */
 
 
}

/*------------------------*/
.caja {
  background-color: #FF7F5A;
  
  padding: 1em;
  
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
.niveles {
  
  display: flex;
  justify-content: space-between;
  padding: 1em;
  padding-bottom: 0;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;

  
}

.niveles img {
  max-width: 55px;
}
/* Estilos para el control deslizante */



.niveles h5 {
  position:relative;
  z-index: 3; /* Asegura que estos elementos estén sobre la barra de progreso */

}

.lv1{
  text-align: center;
}

.niveles p {
  margin-top: 0.3em;
  margin-bottom: -0.5em;
}
.niveles h5{
  text-align: center;

justify-content: space-between;
background-color: #000000;
color: rgb(255, 255, 255);

width: 2em; /* Establece un ancho fijo más pequeño */
height: 2em; /* Establece una altura fija igual al ancho para formar un círculo */

font-weight: normal;

border-radius: 50%; /* Hace que el fondo sea circular */


line-height: 2em; /* Ajusta la altura de línea para centrar el texto verticalmente */

padding: 0; /* Remueve el padding adicional */


}
.lv2{
  text-align: center;
}
.lv3{
  text-align: center;
}
.lv4{
  text-align: center;
}
.lv5{
  text-align: center;
}
.lv6{
  text-align: center;
}
.lv7{
  text-align: center;
  
}
.lv8{
  text-align: center;
}


.lv1 h5 {
  margin-left: 1.8em;
}
.lv2 h5 {
  margin-left: 1.8em;
}
.lv3 h5 {
  margin-left: 1.6em;
}
.lv4 h5 {
  margin-left: 1.5em;
}
.lv5 h5 {
  margin-left: 1.3em;
}

.lv6 h5 {
  margin-left: 1.4em;
}

.lv7 h5 {
  margin-left: 2.1em;
}

.lv8 h5 {
  margin-left: 1.3em;
}

/*------------------------------------------------------
====================================
            Tercera sección - "Medallas".
====================================
------------------------------------------------------*/

/*subtitulo "medallas*/
.medallas h2 {
  
  font-weight: normal;
  background-color: black;
  border-radius: 1rem;
 
  text-align: left;
  padding-left: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  /*---padding:  0.5rem;---*/
  /*padding:  1rem;*/
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: auto;

  margin-bottom: 0;

  width: 63%;

}


.medallas img {
  max-width: 55px;
  font-weight: normal;
  margin-top: 0.1em;
  margin-bottom: 0.7em;
}

/*contenedor general*/
.medallass {
  background-color: #FF7F5A;
  display: flex;
  justify-content: space-between;
  padding: 1em;
  padding-bottom: 0;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;

  gap: 1em;

  width: 63%;

  margin-bottom: 1.7em;

}

/*titulos de medallas*/
.medallas h3 {
  margin-bottom: 0;
  margin-top: -0.1em;
  font-weight: normal;
  color: black;
  
}

/*descripción de medallas*/
.medallas p {
  margin-top: 10px;
font-weight: normal;
}
.medalla1 {
  text-align: center;
 
}
.medalla2 {
  text-align: center;
  
}
.medalla3 {
  text-align: center;
  
}
.medalla4 {
  text-align: center;
  
}

footer{
  background-color: black;

}
footer .redes{
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  margin-left: 2em;
  margin-right:2em
}

 footer img{
  width:15%;
 }

 footer h2{
  font-size: 25px;
  text-align: center;
  color:rgba(255, 127, 90, 1) ;
 }

 footer p{
  font-size: 10x;
  text-align: center;
 }


}