/*---- TIPOGRAFÍA ----*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* ---- FIN DE TIPOGRAFÍA ----*/

/* ---- CONDICIONES PARA IMAGENES ----*/

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

* {
  transition: all 0.25s;
}

/* ---- FIN DE CONDICIONES PARA IMAGENES ----*/

/* ---- FONDO DE LAS PANTALLAS ---- */

body {
  background-image: url(imageneswebapp/fondo4.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; 
  font-family: 'Roboto', sans-serif;
  color:#ffffff
}

img {
  max-width: 100%;
}

/* Para pantallas grandes (desktop) */
@media screen and (min-width: 768px) {
  body {
      background-image: url(imageneswebapp/fondo4.jpg);
  }
}

/* Para pantallas medianas (tablet) */
@media screen and (max-width: 767px) {
  body {
      background-image: url(imageneswebapp/fondo4.jpg);
  }
}

/* Para pantallas pequeñas (móviles) */
@media screen and (max-width: 480px) {
  body {
      background-image: url(imageneswebapp/fondo4.jpg);
  }
}

/* ---- FIN FONDO DE PANTALLA ---- */



/* ---------------------------------------------------------------- COMIENZO DE WEBAPP ---------------------------------------------------------------- */


/* ---- PANTALLA BIENVENIDA ---- */

.bienvenida {
  padding: 20px; 
}

.bienvenida figure,
.bienvenida h1,
.bienvenida h2,
.bienvenida a {
  margin-bottom: 10px;
}

main.bienvenida {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 120px 0;
}

footer.bienvenida {
  text-align: center;
}

/* ---- FINAL DE PANTALLA BIENVENIDA ----*/


/* ---- REGISTRARSE----- */

.perfil-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;

}
.titulo{
  padding: 10px;
}

.contenedor {
  max-width: 600px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.campo {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input, select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.perfildeusuario{
  display: flex; 
  margin: 0 auto;
  justify-content: center;
  padding: 20px 0;
}

.boton {
  margin-top: 28px;
}

/* ---- FIN DE REGISTRARSE ----*/


/* ---- PERFIL ---- */

.datosContainer{
gap: 10px;
display:flex;
flex-direction: column;
align-items: center;
color:#000000; /*letra en negro*/
background-color: #ffffff;
padding: 10px 15px;
border-radius: 8px;

}

@media (min-width:468px) {
  .datosContainer{
    padding: 18px 24px;
  }
}


.infoContainer{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}


body.perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px; /* Espacio entre elementos */
  margin: 60px;
}

h2 {
  text-align: center;
}

p {
  text-align: left;
}

.botonperfil{
  text-align: center;
  position: absolute;
  bottom: 60px; /* Ajusta la distancia desde la parte inferior */
  left: 50%;
  transform: translateX(-50%);
}


/* ---- FIN DE PERFIL ----*/


/* ---- MENU PRINCIPAL ----*/

body.menuprincipal {
  margin: 0;
  padding: 0;
}

header.menuprincipal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px;
}

header figure {
  margin: 0;
}

main.menuprincipal {
  padding: 20px;
}

section.secciones {
  display: flex;
  flex-wrap: wrap;
}

section.cuadros {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 10px;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
}

section.cuadros a {
  text-decoration: none;
}

section.cuadros figure img {
  width: 200px;
  height: auto;
}

section.cuadros p {
  margin: 10px 0 0;
  font-weight: bold;
}

.progreso {
  text-align: center;

}

.videodiario {
    text-align: center;
    margin-bottom: 20px;
  
  }
  

/* ----- FIN DE MENU PRINCIPAL ---- */

/* ---- NIVELES DE JUEGO ---- */

header.niveles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

header.niveles h1 {
  margin: 0;
}

main {
  padding: 20px;
}

.niveles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.nivel {
  margin: 15px;
  flex: 1 0 200px;
  max-width: 300px;
  text-align: center;
}

.nivel img {
  max-width: 100%;
  height: auto;
}

/* Estilos específicos para móviles */
@media screen and (max-width: 600px) {
  .nivel {
    flex-basis: 100%;
  }
}

/* ---- FIN NIVELES DE JUEGOS ----*/

/* ---- JUEGO NIVEL 1 ----*/

body.juegopreguntas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px; /* Espacio entre elementos */
  margin: 60px;
}

#encabezado {
  width: 70vw;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: white;
  color: black;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
}

.opcion {
  text-align: center;
  width: 70vw;
  background: white;
  color: black;
  
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
}

.opcion:hover{
     background: lightgray;
}

/* ---- FIN DE JUEGO NIVEL 1 -----*/

/* ---- LOGROS ----- */
header.trofeos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px;
}

.logrosHeroContainer {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  padding: 20px 0;
}

.logoItem {
  margin: 10px;
  box-sizing: border-box;
  padding: 10px; /* Añade espacio interno */
  text-align: center; /* Centra el texto */
}

.logoItem h1,
p {
  text-align: center;
}
.logoItem p {
  padding-bottom: 20px;
}

.trofeosContainer {
  display: flex;
  flex-direction: column;
  
}

@media (min-width: 768px) {
  .trofeosContainer {
    flex-direction: row;
    justify-content: center;
  }
}

.nivelesContainer {
  display: flex;
  flex-direction: column;
  gap: 20px
}

@media (min-width: 768px) {
  .nivelesContainer {
    flex-direction: row;
    justify-content: center;
    gap: 160px
  }
}

/* ---- FIN DE LOGROS ---- */

/* ---- RANKING ---- */

.ranking-section {
  text-align: center;
  margin-bottom: 20px;
}

.ranking-categories {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 30px;
}
.numero1{
  background-color: #ffc927;
}
.numero2{
  background-color: #9a9a9a;
}
.numero3{
  background-color: #6b2314;
}
.ranking-categories button {
  padding: 10px 20px;
  background-color: #f2f2f2;
  border: none;
  border-radius: 50px;
  cursor: pointer;
}
.categoriastabla{
  background-color: #0f091d;
}
.ranking-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #22193c;
}

.ranking-table th,
.ranking-table td {
  padding: 10px;
  border: 1px solid #ccc;
}

@media (max-width: 768px) {
  .ranking-categories {
    flex-wrap: wrap;
  }
  
  .ranking-categories button {
    margin-bottom: 10px;
  }
}

/* ---- FIN RANKING ----*/

/* ---- COMUNIDAD ---- */

.chat-box {
  background-color:#231a3f;
  padding: 10px;
}

.user {
  margin-bottom: 10px;
}

.name {
  font-weight: bold;
}

.message {
  margin-left: 10px;
}

.time {
  margin-left: 10px;
  font-size: 0.8em;
  color: #d6d6d6;
}

div.msg-box
{
  position: absolute;
  width: 100%;
  padding: 20px;
  bottom: -10px;
  left: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}


/* ---- FIN COMUNIDAD ---- */

/* ---- PUNTOS GRATIS VIDEO ---- */

header.videosdiario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px;
}

.textovideo {
  text-align: center;
}

.ganapuntos {
 padding:10px;

}

.obtenerpuntos {
  
  padding: 15px 30px;
  background-color: #f2f2f2;
  border: none;
  border-radius: 50px;
  cursor: pointer;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Proporción 16:9 para videos */
  height: 0;
  overflow: hidden;
}

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

.videopuntos{
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* ---- FIN PUNTOS GRATIS VIDEO ---- */

/*---- ESTILOS BOTONES----*/

.bn11 {
  display: inline-block;
  padding: 0.5em 1.7em;
  margin: 0 0.1em 0.1em 0;
  border: 0.16em solid rgba(255, 255, 255, 0);
  background-color: rgb(86, 199, 255);
  border-radius: 2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  color: #000000;
  text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
  text-align: center;
  transition: all 0.2s;
}

input.bn11:hover {
  border-color: rgb(255, 255, 255);
}
a.bn11:hover {
  border-color: rgb(255, 255, 255);
}

/* ---- FIN ESTILOS BOTONES ----*/

/* ----UTILIDADES----- */

header {
  display: flex;
  justify-content: space-between;
}

.logotiposiam{
 width: 80px;
 height: 80px;
}

header img {
  max-width: 100%;
  height: auto;
}

.secciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.cuadros img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.cuadros h2 {
  margin-bottom: 10px;
  font-size: 1.5em;
}

.cuadros p {
  font-size: 1.1em;
  margin-bottom: 15px;
}

/* ---- FIN UTILIDADES ---- */