* {
    font-family: Arial, Helvetica, sans-serif;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa !important; /*fuerzo para modo oscuro */
    margin: 0;
}


/* Menu juego */
.center-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 79vh;
}
  .container-menu {
    padding: 20px;
    margin: auto;
  }

  .menu {
    padding: 20px;
    text-align: center;
}
  .menu h1 {
    text-align: center;
    margin-bottom: 30px;
  }
  .menu h3 {
    text-align: center;
    color: #2c3e50;
    font-size: 1.5rem;
  }
  ul {
    list-style: none;
    padding: 0;
    }
    ul li {
        margin-top: 10px;
    }
.btn-dificultad {
    width: 120px;
    padding: 8px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #3498db;
    color: #fff;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.btn-dificultad:hover {
    background-color: #2980b9;
}

.contenedor-modo-juego div p {
    font-weight: bold;
}

  /* Titulo MENU */
  .word-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2vh !important;
    margin: auto;
}

.letter-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 37px;
    color: #fff;
    margin:3px;
    font-size: 1.2em;
    border-radius: 4px;
    border: none;
}
.animacionTitulo {
    transform: translateY(-200px);
    animation: animacionTitulo 1s ease-out forwards;
}

@keyframes animacionTitulo {
    0% {
        transform: translateY(-500px);
    }
    50% {
        transform: translateY(30px);
    }
    80% {
        transform:scale(1.2);
    }
    100%{
        transform: translateY(0);
    }
}
.amarilloMenu {
    background-color: #f3c237;
    border: 2px solid #f3c237;
}
.verdeMenu {
    background-color: #79b851;
    border: 2px solid #79b851;
}
.grisMenu {
    background-color: #a4aec4;
    border:2px solid transparent;        
}






  /* Juego */
    .contenedor-juego {
      display: none;
      padding: 2%;
      min-height: 80vh;
      margin: auto;
    }

    .btn-group-controles {
        display: flex;
        text-align: center;
        justify-content: center;
        gap: 10px;
    }
    .btn-group-controles button {
        border-radius: 4px;
        height: 30px;
        padding: 0 14px;
        font-size: 12px;
        transition: .2s;
        cursor: pointer;
        color: #414a5e;  
        transition: .2s linear;
        background: #ebedf3;
        border: none;
    }
    .btn-group-controles button:active, .btn-group-controles button:focus {
        outline: none;
    }

    .btn-meRindo {
        color: #414a5e;
        background: #ebedf3;
        font-weight: 700;
        border: 1px solid transparent;
    }
    .btn-meRindo:hover {
        background-color: rgb(246, 224, 224);
        color:rgb(157, 114, 114);
    }
    #btnConfiguracion:hover {
        background-color: rgb(227, 239, 154);
        color:rgb(43, 82, 74);
        font-weight: bold;
    }
    #como_se_juega:hover {
        background-color: rgb(141, 162, 225);
        color:rgb(35, 45, 91);
        font-weight: bold;
    }

    .tecla {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #000;
        margin: 5px;
        cursor: pointer;
    }

    .input-matrix {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 5vh;
       
    }

    .input-row {
        display: flex;
        flex-wrap: nowrap;
    }

    .input-box {
        width: 100%;
        min-width: 29px;
        max-width: 50px;
        height: 50.5px;
        border: 2px solid rgb(224, 224, 224);
        font-size: 1.3rem;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 5px;
        user-select: none;
        cursor: pointer;
        margin: 4px;
    }
    #texto {
        margin-top: 20px;
    }
    #check-btn {
        margin-top: 10px;
        cursor: pointer;
    }
    .input-row input {
        text-align: center;
    }

    .input-box:focus {
        outline: none;
    }
    .efecto-input-letra {
        animation: animacionInput 0.2s ease-in-out;
    }
    
    @keyframes animacionInput {
       0% {
            transform: scale(0);
        }
        80% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }

    



    /*Input verde/amarillo/gris */
    .verde, .amarillo, .gris {
        color:white !important;
        font-weight: bold;
    }
    .amarillo {
        background-color: #f3c237!important;
        border: 2px solid #f3c237!important;
    }
    .verde {
        background-color: #79b851!important;
        border: 2px solid #79b851!important;
    }
    .gris {
        background-color: #a4aec4!important;
        border:2px solid transparent !important;        
    }

    @keyframes flipIn {
        from {
          transform: rotateY(-180deg);
          opacity: 0;
        }
        to {
          transform: rotateY(0);
          opacity: 1;
        }
      }
      
      .flip-animation {
        animation: flipIn 0.5s ease-in-out;
      }


/* Modal Como se juega */
.modal_info-wrapper, .modal_configuracion_palabras {
    display: none;
    margin-top: 15px;
}
.nDificultad-config {
    display: flex;
    justify-content: center;
}

.text {
    text-align: center;
}

.nDificultad-config div {
    display: flex;
    align-items: center;
}

.nDificultad-config div input {
    width: 40.5px;
    max-width: 52.5px;
    height: 40.5px;
    border: 2px solid rgb(224, 224, 224);
    font-size: 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    margin: 4px;
    text-align: center;
}

.nDificultad-config input:focus {
    outline: none;
}

.modos_de_juego {
    font-size: 18px;
    font-weight: 500;
}
.top {
    display: flex;
    justify-content: center;
    align-items: center;    
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    min-height: 38px;
    padding: 0 25px;
    color: #2e3239;
}
.tittle-comojugar {
    display:flex;
    justify-content: center;
    border-radius: 7px;
    align-items: center;
    background: rgb(246, 224, 224);
    margin-bottom: 10px;
}
.close_comoJugar {
    position: absolute;
    right: 3vh;
    display: flex;
    justify-content: center;
}

.mini_modal .data {
    padding: 10px 0 20px;
}
.mini_modal .info .text {
    color: #5b6069;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    text-align: center;
}
.text span {
    font-weight: bold;
    font-size: 1.2rem;
}


.input-row-comoJugar {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 10px;
}
b {
    font-size: 1.1rem;
}
.letter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 29px;
    max-width: 50px;
    height: 50.5px;
    margin: 4px;
    border: 2px solid rgb(224, 224, 224);
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 5px;
    text-transform: uppercase;
    user-select: none;
}

.mini_modal .info .text-tiles {
    max-width: 450px;
    line-height: 32px;
    margin: 25px auto 10px;  /*arriba, der/izq, abajo */
    padding: 10px 15px;
    background: #edf0f5;
    border-radius: 10px;
    text-align: left;
}
.cont {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grey_text {
    color: #fff!important;
    padding: 2px 6px;
    border-radius: 3px;
    background: #a4aec4;
}
.yellow_text {
    color: #fff!important;
    padding: 2px 6px;
    border-radius: 3px;
    background: #f3c237;
}
.green_text {
    color: #fff!important;
    padding: 2px 6px;
    border-radius: 3px;
    background: #79b851;
}

.config-otros-juegos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.config-otros-juegos img {
    max-width: 100%;
    height: auto;
    width: 100%;
    height: 130px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}
.config-otros-juegos img:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transform: scale(1.01);
}








    /* ------------------------------ */
    /*Alerts  */
    .alert {
        display: none;
        text-align: center;
    }

    /* Modal */
    .modal {
    position: fixed;
    top: 20vh;
    }
    .modal-header {
        justify-content: center;
        background-color: #e5ecff;
        padding: 10px;
    }
    .modal-title {
        font-weight: bold;
    }
    .modal-body {
        text-align: center;
    }
    .modal-content {
        border-radius: 10px;
    }
    .modal-footer {
        justify-content: center;
    }

    .psecreta-modal{
        display: inline-block;
        padding: 10px 30px;
        font-size: 18px;
        text-transform: uppercase;
        vertical-align: top;
        border-radius: 5px;
        background: #f1f3f9;
        border: 1px dashed #75819e;
    }
    .palabra-era {
        color: #2e3239;
        font-size: 16px;
        line-height: 22px;
    }
    .siguiente, .restart {
        text-transform:uppercase ;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        letter-spacing:0.1cap;
        text-transform: uppercase;
        display: inline-block;
        padding: 10px 30px;
        line-height: 24px;
        cursor: pointer;
        vertical-align: top;
        border: 0;
        border-radius: 5px;
        background: rgb(84, 173, 84);
        transition: .2s;
    }
    .siguientehover, .restart:hover {
        background: rgb(129, 210, 129);
    }   


/* TECLADO QWERTY */

/*-------------------- JUEGOS: --------------------------------*/

/* Palabras */
#tecladoPalabras {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
}

#tecladoPalabras > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 3px;
}

#tecladoPalabras .btn-teclado {
    text-transform: uppercase;
    flex: 1;
    max-width: 45px;
    margin: 0 2px;
    padding: 6px;
    font-size: 14px;
    background-color: #dce1ed;
    color: #414a5e;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    border: 2px transparent;
    box-sizing: border-box;
    transition: 0.2s;
}

#tecladoPalabras .btnTeclado {
    flex: 2;
    width: auto;
    min-width: 50px;
    background-color: #dce1ed;
    color: #414a5e;
    font-size: 12px;
    font-weight: 700;
    padding: 2px;
    border-radius: 4px;
    border: 2px transparent;
}
/* ------------------------------------------------------ */

/* Emojis */
#tecladoEmojis {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
}

#tecladoEmojis > div {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    gap: 2px;
}


#tecladoEmojis .btn-teclado {
    display: flex;
    max-width: 50px;
    margin: 0 1px;
    padding: 4px;
    font-size: 25px;
    background-color: #dce1ed;
    color: #414a5e;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    border: 2px transparent;
    box-sizing: border-box;
    transition: 0.2s;
}

#tecladoEmojis .btnTeclado {
    flex: 2;
    max-width: 60px;
    background-color: #dce1ed;
    font-size: 12px;
    font-weight: 700;
    padding: 2px;
    border-radius: 4px;
    border: 2px transparent;
    text-align: center;
}

.psecretaEmoji {
    font-size: 1.6rem;
}

/* ------------------------------------------ */
/* Fechas */


#tecladoFechas {
    width: 100%;
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
}

#tecladoFechas > div {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    gap: 2px;
}

#tecladoFechas .btn-teclado {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    min-width: 0;
    margin: 0 1px;
    font-size: 20px;
    background-color: #dce1ed;
    color: #414a5e;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    border: 2px transparent;
    box-sizing: border-box;
    transition: 0.2s;
}

#tecladoFechas .btnTeclado {
    width: 100%;
    background-color: #dce1ed;
    font-size: 12px;
    font-weight: 700;
    padding: 2px;
    border-radius: 4px;
    border: 2px transparent;
    text-align: center;
}


.btn-teclado:focus, .btnTeclado:focus {
    outline: none;
}

@media only screen and (min-width: 720px) {
    .word-container {
        width: 60%;
    }

    .contenedor-modo-juego {
        display: flex;
        justify-content: center;
        gap: 50px;
      }

    #tecladoPalabras {
        margin-top: 20px;
        max-width: 900px;
    }
    #tecladoPalabras div {
        justify-content: center;
    }
    
    #tecladoPalabras div button {
        font-size: 20px;
        height: 54px;
        text-align: center;
        align-items: center; 
        flex-wrap: nowrap;
    }

    #tecladoPalabras > div {
        gap: 1px;
    }

    .input-matrix {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        margin-top: 20px;
    }
    .input-box {
        width: 100%;
        max-width: 62.5px;
        height: 62.5px;
        max-height: 62.5px;
        border: 2px solid rgb(224, 224, 224);
        font-size: 1.875rem;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 5px;
        user-select: none;
        cursor: pointer;
        margin: 5px;
    }
    .btnTeclado {
        max-width: 80px !important;
    }

    .alert-danger {
        width: 63%;
        margin: auto;
    }

    .config-otros-juegos {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 10px;
    }

    #tecladoEmojis .btn-teclado {
        display: flex;
        max-width: 70px;
        margin: 0 1px;
        padding: 10px;
        font-size: 20px;
    }
    
    #tecladoEmojis .btnTeclado {
        flex: 2;
        max-width: 80px;
        font-size: 14px;
        font-weight: 700;
        padding: 4px;
    }

    #tecladoEmojis .btn-teclado:hover,
    #tecladoEmojis .btnTeclado:hover {
    background-color: #a4aec4;
    }

    .btn-group-controles {
        margin-bottom: 15px;
    }

    #tecladoFechas {
        width:80%;
    }
    .modal_info-wrapper, .modal_configuracion_palabras {
        width: 80%;
        margin: auto;
    }
    .close_comoJugar {
        right: 18vh;
    }
}

@media only screen and (min-width: 1200px) {
    .word-container {
       width: 65%;
    }
    .container-menu {
        width: 55%;
    }
    #teclado div button {
        /* padding:22px; */
        font-size: 20px;
        min-width: 70px;
        text-align: center;
        align-items: center; 
        flex-wrap: nowrap;
    }
    .alert-danger {
        width: 30%;
        margin: auto;
    }

    #tecladoFechas {
        width: 40%;
    }

    .modal_info-wrapper, .modal_configuracion_palabras {
        width: 37%;
        margin: auto;
    }
    .close_comoJugar {
        right: 66vh;
    }

    .config-otros-juegos {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }
}

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


/* ===== FOOTER =====*/
.footer {
    background-color: #fff;
    color: #080808;
    text-align: center;
    font-weight: 600;
    box-shadow: 0px 0px 100vh rgba(252, 89, 141, 0.103);
}
  
  .footer__title {
    font-size: 1.5rem;
    margin-bottom: 0px;
  }

  .footer__icon {
    font-size: 1.5rem;
    color: #080808;
    margin: 0 1rem;
  }
  
  .footer__icon:hover i{
    color: #ff004f;
    transform: scale(1.2);
    transition: color 0.5s, transform 0.5s;
  }
  .footer__copy span, .footer__title span {
    color: #ff004f;
    font-weight: bold;
  }
  .punto__logo {
    font-size:40px;
  }
  
  .footer__copy {
    font-size: .9rem;
    margin: 0;
  }

  .footer a {
    color: rgb(67, 67, 67);
  }
  .footer a:hover {
    text-decoration: none;
  }
  /* ----------------------------- */








  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
  }
  
  .slider-container {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
  }
  
  .left-slide{
      height: 100%;
      width: 45%;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform 0.5s ease-in-out;
  }
  
  .left-slide > div{
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
  }

  .left-slide div p {
    z-index: 3;
  }

  .contenedor-palabras {
    background-color: #79b851;
  }
  .contenedor-emojis {
    background-color: #f3c237;
  }
  .contenedor-fechas {
    background-color: #a4aec4;
  }

  .contenedor-palabras-right {
    background-image: url("https://images.pexels.com/photos/278887/pexels-photo-278887.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    background-size: cover;
    background-position: center; 
  }
  .contenedor-emojis-right {
    background-image: url("../img/fondo-emojis.png");
    background-size: cover;
    background-position: center; 
  }
  .contenedor-fechas-right {
    background-image: url("https://images.pexels.com/photos/10550495/pexels-photo-10550495.jpeg?auto=compress&cs=tinysrgb&w=600");
    background-size: cover;
    background-position: center; 
  }
  
  .left-slide h1{
      font-size: 40px;
      margin-bottom: 10px;
      margin-top: -30px;
  }
  
  .right-slide > div{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      height: 100%;
      width: 100%;
  }
  
  .right-slide{
      height: 100%;
      position: absolute;
      top: 0;
      left: 45%;
      width: 55%;
      transition: transform 0.5s ease-in-out;
  }
  
  
  button{
      background-color: #fff;
      border: none;
      color: #aaa;
      cursor: pointer;
      font-size: 16px;
      padding: 15px;
  }
  
  button:hover{
      color: #222;
  }
  
  button:focus{
      outline: none;
  }
  
  .slider-container .action-buttons button{
      position: absolute;
      left: 45%;
      top: 50%;
      z-index: 1;
  }
  
  .slider-container .action-buttons .down-button{
      transform: translateX(-100%);
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
  }
  
  .slider-container .action-buttons .up-button {
      transform: translateY(-100%);
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      background-color: black;
      color: white;
  }