@media (max-width: 390px) {


  /* Inicio de Sesión */
  #inicioSesion {
    width: 100%;
    overflow-x: hidden;
    min-height: 100vh;
    margin: 0;

    header {
      padding: 10% 5% 5% 5%;
      text-align: center;

      h1 {
        font-size: 1.5rem;
        margin-bottom: 5%;
      }
    }

    main {
      padding: 0 5%;

      #menuInicioSesion {
        width: 100%;
        margin: 0 auto;
      }

      .btn {
        width: 100%;
        height: auto;
        padding: 15px;
        font-size: 1.1rem;
        margin: 15px 0;
        border-radius: 10px;
      }
    }
  }

  /* Menú Principal del Usuario */
  #menuPrincipal {
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;

    #logo {
      display: none;
    }

    header {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5% 5%;
      gap: 15px;

      h1 {
        font-size: 1.3rem;
        text-align: center;
        margin: 10px 0;
      }

      #btnCerrarSesion {
        width: 90%;
        max-width: 300px;
        position: static;
        margin: 10px auto;
        padding: 12px;
        font-size: 1rem;
      }
    }

    main {
      padding: 5%;

      #menuBotones {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        height: auto;
        width: 100%;
        margin: 0;

        .botones_juego {
          width: 100%;
          max-width: 350px;
          padding: 15px;
          font-size: 1.1rem;
          margin: 0;
        }
      }
    }
  }

  /* Zona para unirse a una sala */
  .salas {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    #titulo {
      font-size: 1.4rem;
      padding: 5% 5%;
    }

    #contenido {
      width: 90%;
      min-height: auto;
      margin: 5% auto;
      padding: 5%;
    }

    #subtitulo {
      font-size: 1.2rem;
      padding-top: 3%;
    }

    .formulario {
      flex-direction: column;
      width: 100%;
      gap: 15px;

      input {
        width: 100%;
        margin: 0;
        padding: 12px;
        font-size: 1rem;
      }
    }

    button {
      width: 100%;
      padding: 15px;
      margin-top: 5%;
      font-size: 1rem;
    }

    #salas {
      width: 100%;
      flex-direction: column;
      gap: 15px;
      margin-top: 5%;

      .sala {
        width: 100%;
        padding: 15px;
        font-size: 1rem;
      }
    }

    #CreaSala {
      width: 100%;
      margin-top: 5%;
    }

    .ranking-grid {
      width: 95%;
      padding: 15px;
      gap: 8px;
      font-size: 0.9rem;

      .caja {
        padding: 10px;
      }
    }
  }

  /* Zona para crear una sala */
  #crear_salas {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      height: auto;
      padding: 5%;
    }

    #titulo {
      font-size: 1.4rem;
      padding-top: 3%;
    }

    #contenido {
      width: 90%;
      min-height: auto;
      margin: 5% auto;
      padding: 5%;
    }

    #subtitulo {
      font-size: 1.2rem;
      padding-top: 3%;
    }

    .formulario {
      flex-direction: column;
      width: 100%;
      gap: 15px;

      input {
        width: 100%;
        margin: 0;
        padding: 12px;
        font-size: 1rem;
      }
    }

    button {
      width: 100%;
      padding: 15px;
      margin-top: 5%;
      font-size: 1rem;
    }

    #salas {
      width: 100%;
      flex-direction: column;
      gap: 15px;

      .sala {
        width: 100%;
        padding: 15px;
      }
    }

    #CreaSala {
      width: 100%;
      margin-top: 5%;
    }
  }

  /* Ranking */
  #ranking {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 5%;

      h1 {
        font-size: 1.5rem;
      }
    }

    main {
      width: 90%;
      margin: 5% auto;
      padding: 5%;

      .jugadores {
        margin: 3% auto;
        width: 100%;
        font-size: 1rem;
        padding: 12px;
      }
    }

    #flecha {
      width: 15%;
      max-width: 60px;
      position: static;
      margin: 5% auto;
      display: block;
    }
  }

  /* MODO: FOTOS */
  #fotos {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;

      h1 {
        font-size: 1.3rem;
        margin: 10px 0;
      }

      #foto {
        width: 50px;
        padding: 10px;
        position: static;
        margin: 0;
      }

      #tiempo {
        width: 60%;
        max-width: 200px;
        position: static;
        margin: 0;
        padding: 10px;
        font-size: 1rem;
      }
    }

    main {
      width: 100% !important;
      height: 100vh !important;
      overflow-y: auto;
      padding: 0 !important;
      background-color: rgba(155, 201, 111, 0.827);

      h2 {
        width: 100%;
        font-size: 1.1rem;
        padding: 12px;
        margin: 3% 0;
      }

      #opcionesFoto {
        width: 100%;
        padding: 5%;
        display: flex;
        flex-direction: column;
        gap: 15px;

        #contenedor-imagen {
          width: 100%;
          order: -1; /* Muestra la imagen primero en móvil */

          #imagenFoto {
            width: 100%;
            max-width: 100%;
            height: auto;
            border-radius: 10px;
          }
        }

        .contenedor-foto {
          width: 100%;
          padding: 15px;
          margin: 0;
          font-size: 1rem;

          p {
            margin-left: 10px;
          }
        }
      }
    }
  }

  /* MODO: SITUACIONES */
  #situaciones {
    width: 100% !important;
    min-height: 100vh !important;
    overflow-x: auto !important;

    header {
      padding: 5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;

      h1 {
        font-size: 1.3rem;
        margin: 10px 0;
      }

      #situacion {
        width: 50px;
        padding: 10px;
        position: static;
        margin: 0;
      }

      #tiempo {
        width: 60%;
        max-width: 200px;
        position: static;
        margin: 0;
        padding: 10px;
        font-size: 1rem;
      }
    }

    main {
      width: 100% !important;
      height: 100vh !important;
      overflow-y: auto;
      padding: 0 !important;
      background-color: rgba(155, 201, 111, 0.827);

      h2 {
        width: 100%;
        font-size: 1.1rem;
        padding: 12px;
        margin: 3% 0;
      }

      #opcionesSituacion {
        width: 100%;
        padding: 5%;
        display: flex;
        flex-direction: column;
        gap: 15px;

        .contenedor-situacion {
          width: 100%;
          padding: 15px;
          margin: 0;
          font-size: 1rem;

          p {
            margin-left: 10px;
          }
        }
      }
    }
  }

  /* MODO: PREGUNTAS Y RESPUESTAS */
  #preguntasRespuestas {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      height: auto;

      h1 {
        font-size: 1.3rem;
        margin: 10px 0;
      }

      #pregunta {
        width: 50px;
        padding: 10px;
        position: static;
        margin: 0;
      }

      #tiempo {
        width: 60%;
        max-width: 200px;
        position: static;
        margin: 0;
        padding: 10px;
        font-size: 1rem;
      }
    }

    main {
      width: 100% !important;
      height: 100vh !important;
      overflow-y: auto;
      padding: 0 !important;
      background-color: rgba(155, 201, 111, 0.827);

      h2 {
        width: 100%;
        font-size: 1.1rem;
        padding: 12px;
        margin: 3% 0;
      }

      #opcionesPregunta {
        width: 100%;
        padding: 5%;

        .contenedor-pregunta {
          width: 100%;
          padding: 15px;
          margin: 10px 0;
          font-size: 1rem;

          p {
            margin-left: 10px;
          }
        }
      }
    }
  }

  /* Registro y Login */
  #registro,
  #login {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 8% 5%;

      h1 {
        font-size: 1.5rem;
      }
    }

    form {
      width: 90%;
      margin: 5% auto;
      padding: 30px 20px;

      label {
        margin-left: 20px;
        font-size: 1rem;
      }

      input[type="text"],
      input[type="email"],
      input[type="password"] {
        width: 85%;
        margin: 3% auto;
        padding: 12px;
        font-size: 1rem;
      }

      #btnEnviar,
      #btnIniciar {
        width: 80%;
        margin: 8% auto 0 auto;
        padding: 15px;
        font-size: 1.1rem;
      }
    }

    .volver_atras {
      width: 60px;
      bottom: 3%;
      left: 3%;
    }
  }
}


@media (max-width: 1024px) {
  /* 
    Optimización para tablets
    - Layout responsive con grid y flexbox
    - Mejor aprovechamiento del espacio
    - Tipografía optimizada para tablets
    */

  /* Inicio de Sesión */
  #inicioSesion {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;

    header {
      padding: 5% 0 3% 0;
      text-align: center;

      h1 {
        font-size: 2rem;
      }
    }

    main {
      #menuInicioSesion {
        width: 70%;
        max-width: 500px;
        margin: 0 auto;
      }

      .btn {
        width: 100%;
        padding: 16px;
        font-size: 1.2rem;
        margin: 15px 0;
        border-radius: 10px;
      }
    }
  }

  /* Menú Principal */
  #menuPrincipal {
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;

    header {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3% 5%;
      gap: 20px;

      img {
        display: block;
        max-width: 120px;
        margin-bottom: 10px;
      }

      h1 {
        font-size: 1.8rem;
        text-align: center;
      }

      #btnCerrarSesion {
        width: 50%;
        max-width: 350px;
        position: static;
        margin: 15px auto;
        padding: 14px;
        font-size: 1.1rem;
      }
    }

    main {
      padding: 3% 5%;

      #menuBotones {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        gap: 30px;
        width: 85%;
        max-width: 700px;
        margin: 0 auto;

        .botones_juego {
          width: 100%;
          padding: 18px;
          font-size: 1.2rem;
        }

        #btnRanking {
          grid-column: 1 / -1; /* Ocupa toda la fila */
        }
      }
    }
  }

  /* Salas y Crear Salas */
  .salas,
  #crear_salas {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 3% 5%;

      h1 {
        font-size: 1.8rem;
      }
    }

    #titulo {
      font-size: 1.6rem;
      padding: 3% 5%;
    }

    #contenido {
      width: 80%;
      max-width: 700px;
      margin: 4% auto;
      padding: 4%;
    }

    #subtitulo {
      font-size: 1.3rem;
      padding-top: 2%;
    }

    .formulario {
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      gap: 15px;
      justify-content: center;
      align-items: center;

      label {
        flex: 1 1 100%;
        text-align: center;
      }

      input {
        flex: 1 1 60%;
        min-width: 200px;
        padding: 12px;
        font-size: 1rem;
      }
    }

    button {
      width: 50%;
      max-width: 300px;
      padding: 15px;
      margin: 3% auto;
      display: block;
      font-size: 1.1rem;
    }

    #salas {
      width: 85%;
      max-width: 800px;
      margin: 4% auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 20px;

      .sala {
        width: 100%;
        padding: 18px;
        font-size: 1rem;
      }
    }

    #CreaSala {
      width: 70%;
      max-width: 400px;
      margin: 3% auto;
    }

    .ranking-grid {
      width: 85%;
      max-width: 700px;
      padding: 20px;
      gap: 12px;
      font-size: 1rem;

      .caja {
        padding: 14px;
      }
    }

    #cajaCodigo {
      margin-top: 4%;

      #codigo {
        font-size: 1.2rem;
      }
    }
  }

  /* Ranking */
  #ranking {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 3% 5%;

      h1 {
        font-size: 1.8rem;
      }
    }

    main {
      width: 75%;
      max-width: 600px;
      margin: 4% auto;
      padding: 3%;

      .jugadores {
        width: 90%;
        margin: 2.5% auto;
        font-size: 1.2rem;
        padding: 14px;
      }
    }

    #flecha {
      width: 70px;
      margin: 3% auto;
      display: block;
    }
  }

  /* MODO: FOTOS */
  #fotos {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 3% 5%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      h1 {
        font-size: 1.6rem;
        flex: 1;
        text-align: center;
      }

      #foto {
        width: 60px;
        padding: 10px;
        position: static;
      }

      #tiempo {
        width: 35%;
        max-width: 180px;
        position: static;
        padding: 10px;
        font-size: 1rem;
      }
    }

    main {
      width: 100%;
      min-height: auto;
      padding: 3% 5%;

      h2 {
        width: 90%;
        max-width: 800px;
        margin: 0 auto 3% auto;
        font-size: 1.3rem;
        padding: 14px;
      }

      #opcionesFoto {
        width: 85%;
        max-width: 900px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 20px;

        #contenedor-imagen {
          grid-column: 2;
          grid-row: 1 / -1;
          display: flex;
          align-items: center;
          justify-content: center;

          #imagenFoto {
            width: 100%;
            max-width: 100%;
            height: auto;
            border-radius: 10px;
          }
        }

        .contenedor-foto {
          padding: 16px;
          font-size: 1.1rem;

          p {
            margin-left: 12px;
          }
        }

        #pregunta1 {
          grid-column: 1;
          grid-row: 1;
        }

        #pregunta2 {
          grid-column: 1;
          grid-row: 2;
        }
      }
    }
  }

  /* MODO: SITUACIONES */
  #situaciones {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 3% 5%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      h1 {
        font-size: 1.6rem;
        flex: 1;
        text-align: center;
      }

      #situacion {
        width: 60px;
        padding: 10px;
        position: static;
      }

      #tiempo {
        width: 35%;
        max-width: 180px;
        position: static;
        padding: 10px;
        font-size: 1rem;
      }
    }

    main {
      width: 100%;
      min-height: auto;
      padding: 3% 5%;

      h2 {
        width: 90%;
        max-width: 800px;
        margin: 0 auto 3% auto;
        font-size: 1.3rem;
        padding: 14px;
      }

      #opcionesSituacion {
        width: 85%;
        max-width: 900px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        .contenedor-situacion {
          padding: 16px;
          font-size: 1.1rem;

          p {
            margin-left: 12px;
          }
        }
      }
    }
  }

  /* MODO: PREGUNTAS Y RESPUESTAS */
  #preguntasRespuestas {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 3% 5%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: auto;

      h1 {
        font-size: 1.6rem;
        flex: 1;
        text-align: center;
      }

      #pregunta {
        width: 60px;
        padding: 10px;
        position: static;
      }

      #tiempo {
        width: 35%;
        max-width: 180px;
        position: static;
        padding: 10px;
        font-size: 1rem;
      }
    }

    main {
      width: 100%;
      min-height: auto;
      padding: 3% 5%;

      h2 {
        width: 90%;
        max-width: 800px;
        margin: 0 auto 3% auto;
        font-size: 1.3rem;
        padding: 14px;
      }

      #opcionesPregunta {
        width: 85%;
        max-width: 800px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        .contenedor-pregunta {
          padding: 16px;
          font-size: 1.1rem;

          p {
            margin-left: 12px;
          }
        }
      }
    }
  }

  /* Registro y Login */
  #registro,
  #login {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    header {
      padding: 5% 5%;

      h1 {
        font-size: 2rem;
      }
    }

    form {
      width: 65%;
      max-width: 550px;
      margin: 3% auto;
      padding: 40px 50px;

      label {
        margin-left: 30px;
        font-size: 1.1rem;
      }

      input[type="text"],
      input[type="email"],
      input[type="password"] {
        width: 80%;
        margin: 3% auto;
        padding: 14px;
        font-size: 1.1rem;
      }

      .control {
        margin-bottom: 4%;
      }

      #btnEnviar,
      #btnIniciar {
        width: 60%;
        margin: 6% auto 0 auto;
        padding: 16px;
        font-size: 1.2rem;
      }
    }

    .volver_atras {
      width: 70px;
      bottom: 3%;
      left: 3%;
    }
  }
}