/*reseteo de valores*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}
/*configuracion de variables*/
:root{
    --main-color: #F4EEEE;
    --secondary-color: #161516;
    --third-color: #2f2dd1;
    --third-color-t: #4565f7d2;
    --font-weight-bold: 700;
}
/*estilos del body*/
body{
    background-color: var(--secondary-color);
    color: var(--main-color);
}
*::-webkit-scrollbar{
    width: 10px;
    background-color: var(--secondary-color);
}
*::-webkit-scrollbar-thumb{
    background-color: var(--third-color);
    border-radius: 10px;
    
}
.bodyForms{
    height: 100vh;
    background-image: url("../assets/img/background.jpg");
    background-size: cover;
    a:first-child{
        display: inline-block;
        text-decoration:none;
        font-size: 1.6rem;
        margin: 20px;
    }
}
/*generalidades*/
h1{
    font-size: 4rem;
}
h2{
    font-size: 2.5rem;
}
h1,h2{
    font-weight: --font-weight-bold;
    margin-bottom: 20px;
}
a {
    text-decoration: none;
}
/*media querys para dispositivos hasta 800px para el h1 y h2*/
@media (max-width: 768px) {
    h1{
        font-size: 2.2rem;
    }
    h2{
        font-size: 1.8rem;
    }

}

header, footer{
    background-color: var(--third-color) !important;
    color: var(--main-color) !important;
    padding: 20px;
}



/*estilos del header*/
.header{
    height: 4em;
    position:sticky;
    top:0; 
    z-index: 10;
    background: rgb(5,0,87);
    background: linear-gradient(90deg, rgba(5,0,87,1) 0%, rgba(8,8,126,1) 35%, rgba(38,152,175,1) 100%);
    nav{
        height: 100%;
        display:flex;
        align-items: center;
        justify-content: space-between;
        a{
            text-decoration: none;
            color: var(--main-color);
            font-size:1.6rem;
        }
        ul{
            list-style: none;
            display:flex;
            column-gap: 20px;
            a{
                font-size:1.1rem;
            }
           
        }
    }
    .tituloCrud{
        margin-left: 20px;
        font-size: 1.6rem;
        font-weight: 500;
        color: var(--main-color);
     }
}

.logoLogin{
    color: var(--main-color);
    font-size:1.6rem;
}

/* estilos para header en mobile Y tablet */
@media (max-width: 860px) {
    .header{
        height: initial;
        .navegacion{
            margin-left:10px;
            margin-right: 10px;
            flex-direction: column;
            row-gap: 20px;
            .anclaLogo{
                font-size: 1.2rem;
                font-weight:700;
            }
            .listaNav{
               
                padding:initial;
                .listaItem{
                    .linkNav{
                        font-weight: 400;
                        margin-right: initial;
                        font-size: 1rem;
                        padding: 0.2rem;
                        
                    }
                  
                }
            }
        }
    }
}
/*main
estilos seccion principal
*/
.sectionTitulos{
    height: 85vh;
    background:linear-gradient(to bottom, #000000a3, #000000a3),url("../assets/img/banner-bg.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
   
    .contenedorTitulos{
        text-align: center;
        /*efecto blur a un contenedor*/
        backdrop-filter: blur(8px);
        width: 60%;
        margin:0 auto;
        border-radius: 5px;
        a{
            margin-top: 20px;
            display: inline-block;
            text-decoration: none;
            border:2px solid var(--main-color);
            padding:10px 20px;
        }
    }
}
@media screen and (max-width: 800px) {
    .sectionTitulos{
        height: 75vh;
        background:linear-gradient(to bottom, #000000a3, #000000a3),url("../assets/img/bg_mobile.jpg");
        .contenedorTitulos{
            width: 90%;
            backdrop-filter:initial;
            
        }
    }
  
}

/*buscador*/
.searchMovies{
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2em;
}
/*estilos generales*/
.btn-primary{
    background-color: var(--third-color);
    color: var(--main-color);
    padding: 0.5rem 1.5rem;
    border-radius: 1.5rem;
    border: transparent;
    font-size: 1.5em;
    cursor: pointer;
    &:hover{
        background-color: var(--third-color-t);
    }
}

.input-search{
    width: 27rem;
    font-size: 1.5em;
    padding: 0.5rem;
    border-radius: 1.5em;

}
.peliculasTendencias{
    width: 80%;
    margin:0 auto;
    text-align: center;
    h2{
        margin-top:50px;
        margin-bottom:20px;
    }
    .galeriaTendencias{
        display:flex;
        justify-content: space-evenly;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        div{
            width: 250px;
            height: 350px;
            box-shadow: 10px 10px 47px -6px rgba(165, 37, 37, 0.42);
            border-radius: 5px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px;
            }
        }
    }
    button{
       margin-bottom:20px;
    }
}
/*estilos de section peliculas aclamadas*/
.peliculasAclamadas{
    width: 80%;
    margin:0 auto;
    margin-bottom: 20px;
    text-align: center;
    h2{
        margin-top:50px;
        margin-bottom:20px;
    }
    .galeriaAclamadas{
        height: 380px;
        overflow: auto;
        display: flex;
        column-gap: 30px;
        div{
            width: 220px;
            height: 350px;
            flex-shrink: 0;
            box-shadow: 10px 10px 47px -45px rgba(255,255,255,0.29);
           
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px;
            }
        }
    }
}
footer{
    color:#ffffff !important;
    height: 15vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.aFooter {
    text-decoration: none;
    color: #ffffff;
}

.administradorPeliculas{
    background-color: #181419;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
}
ul{
    list-style: none;
    display: flex;
    column-gap: 20px;
}

.irArriba{
    position: fixed;
    right: 20px;
    bottom: 20px;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.2rem;
    cursor: pointer;
}
/*seccion de registrarse.html*/
.main{
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-color);
    .sectionFormulario
    {
        color:white;
        width: 60%; 
        margin: auto;
    }
    .sectionFormularioTabla
    {
        color:white;
        width: 60%; 
        margin: auto; 
    }

    th, td {
        border: 1px solid #2f2dd1;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #2f2dd1; /* Fondo negro para resaltar el texto blanco */
        color: white ; /* Texto en blanco */
        text-align: center;
    }

    td {
        color: white; /* Texto en blanco */
        text-align: center;
    }
}
.seccionRegistrarse
{
    background-color: var(--main-color);
    width: 30%;
    border-radius: 10px;
    padding: 20px 20px;
    margin: auto;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    font-size:1.2rem;
    color: #161516;
    box-shadow: 10px 10px 26px 4px rgba(0,0,0,0.4);
    
    h2{
        text-align: center;
        margin-bottom: 0px;
    }

    .a-login {
        display: block;
        text-align: center;
        margin-bottom: 20px;
        font-size: 1rem;
        color: #161516 !important;
    }

    .a-login:hover{
        color: #2f2dd1 !important;
        font-weight: bold;
    }
    
    form{
        width: 100%;
        padding:40px;
        div{
            margin-bottom: 20px;
        }
        input{
            width: 100%;
            height: 40px;
            padding: 0px 20px;
            font-size: 1.2rem;
            border-radius: 20px;
            border: 2px solid var(--third-color);
            background-color:var(--main-color);
            color:#161516;
        }
        .error-text{
            font-size: 0.8rem;
            margin-top:0px;
            margin-bottom: 20px;
            font-weight: 900; 
        }
        .input-error{
            border: 3px solid red;
        }
        button{
           width: 100%;
           margin-bottom: 10px;
        }

        
    }
   
}

/* estilos pagina de detalles */
.mainDetalle{
    
    .detalle{
        padding-top:50px;
        background:linear-gradient(to right top, #6d6969a7, #6d6969a7),url("../assets/img/mario-bg.jpg");
        background-size: cover;
        background-position: center;
        height: 70vh;

        .contenedorDetalle{
            width:75%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 60px;
            
            img{
              border-radius: 20px;
            }
            .textoDetalle{
                h1{
                    font-size: 2.2rem;
                    font-weight: 700;
                }
                h2{
                    margin-top:20px;
                }
                .contenedorCreditos{
                    margin-top:20px;
                    display: flex;
                    justify-content:space-between;
                }
            }
        }
        
        
       
    }
    .trailer{
        padding-top:150px;
        padding-bottom: 100px;
        width:75%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 70px;
        .contenedorInfo{
            .redes{
                margin-bottom: 20px;
                ul{
                    list-style: none;
                    display: flex;
                    column-gap: 20px;
                    li{
                        a{
                            text-decoration: none;
                            color: #ffffff;
                            font-size: 2.5rem;
                            margin-right: 50px;
                        }
                    }
                  
                }
            }
            .info{
                table{
                    width: 100%;
                    tr{
                        td{
                            font-size: 1.2rem;
                            padding: 10px 0px;
                        }
                    }
                }
            }
        }
    }

}

/* estilos mobile y tablet para pagina de detalles */
@media screen and (max-width:1200px){
    .mainDetalle{
        .detalle{
            height: initial;
            .contenedorDetalle{
                flex-direction: column;
                row-gap: 20px;
                img{
                    width: 100%;
                    height: 300px;
                }
                .textoDetalle{
                    h1{
                        font-size: 1.5rem;
                    }
                    h2{
                        font-size: 1rem;
                    }
                    .contenedorCreditos{
                        flex-direction: column;
                        row-gap: 10px;
                    }
                }
            }
        }
        .trailer{
            width:95%;
            padding-top:50px;
            padding-bottom: 50px;
            flex-direction: column;
            row-gap: 20px;
            .contenedorTrailer{
                width: 100%;
                h2{
                    margin-bottom: 20px;
                }
                iframe{
                    width: 100%;
                    height: 300px;
                
                }
            }
            .contenedorInfo{
                width: 100%;
                .redes{
                    width: 100% ;
                    ul{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                       
                        li{
                            a{
                                font-size: 2rem;
                                margin-right: 20px;
                            }
                        }
                    }
                }
                .info{
                    table{
                        tr{
                            td{
                                font-size: 1rem;
                            }
                        }
                    }
                }
            }
        }
    }
}