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


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
}


.nav{
    background-color: #fefefe;

}


.navLogo{
    height: 50px;
    width: 50px;

}


body{
    background-color: whitesmoke;
    font-family: 'Poppins', sans-serif;
    color:black;
    
}


main{
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.introFoto{
    display: flex;
    height: 400px;
    align-items: center;
    column-gap: 2rem;
}


main > div > img{
    height: 100%;

}


 .comentarios{
    margin-top: 2rem;
    height: fit-content;
    z-index: 0;

}

h2{
    margin-top: 2rem;
    padding: 1rem 0;
    text-align: center;
    background-color: #043263;
    color: white;
}


.comentarios > div{
    height: 550px;

}

.parrafoIntroduccion{
    padding: 2rem;
    background-color: #043263;
    color: white;
    font-weight: 300;
    height: 100%;
    display: flex;
    align-items: center;

}


.tituloSimulador{
    text-align: center;
    background-color: #043263;
    color: white;
    padding: 1rem ;
    font-weight: 300;

}


.contenedorForm{
    display: flex;
    padding: 3rem;
    column-gap: 2rem;
    align-items: center;

}


.contenedorForm__contenedor{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imagenSeñora{
    height: 400px;
    width: 400px;
    margin: auto;
}

.contenedorForm__parrafo{
    width: 100%;
    text-align: center;

}


.formularioIngreso{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: fit-content;
    
}


.formularioIngreso > input{
    margin: 0 0 1rem 0;
    width:100%

}


.formularioIngreso > label{
    margin-bottom: 4px;

}


fieldset{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;

}


.fieldsetInput{
    margin-left: 1rem;
    margin-right: 0.5rem;

}


.formBoton{
    background-color: #043263;
    color: white;
    font-weight: 200;
    border: none;
    margin: 1rem 0;
    height: 40px;
    width: 150px;
    border-radius: 50px;
    align-self: center;

}


.detallesBoton{
    margin-left: 1rem;

}


.table{
    --bs-table-striped-bg: #04326340;

}


.ocultar{
    display: none;

}


.mostrar{
    display: show;

}

.tablaBody > tr > td{
    padding: 1rem 1rem;
    width: fit-content;

}


.tituloSecciones{
    color: white;
    font-weight: 300;
    background-color:#043263;
    padding: 1rem 0;
    margin: 0;
    text-align: center;

}


.gastos{
    display: flex;
    flex-direction: column;

}


.gastos > div {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;

}

.gastos > div > div{
    padding: 1rem;
    display: flex;
    column-gap: 1rem;
    justify-content: center;
}


.card > img{
    object-fit: cover;
    height: 250px;
}


/* .error{
    color:red;
    font-weight: 600;
    font-style: oblique;
    text-shadow: 1px 1px 10px green;
    text-align: center;

}


.correcto{
    color:green;
    font-weight: 600;
    font-style: oblique;
    text-shadow: 1px 1px 10px red;
    text-align: center;

} */


footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #043263;
    color: white;
    font-weight: 100;
    width: 100%;
    height: 150px;

}


i{
    color:white;
    font-size: 40px;
    padding: 1rem;

}


@media (max-width: 768px) {


.introFoto{
    flex-direction: column;
    height: fit-content;

}


.introFoto > img{
    height: 300px;
}


.table{
    --bs-table-striped-bg: #04326340;

}


.tablaBody{
    justify-self: center;
    color: black;
    border: 3px solir black;

}


.tablaBody > tr > td{
    padding: 1rem 1rem;

}


.contenedorForm{
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    row-gap: 1rem;
    width: 100%;
    
}


.contenedorForm__contenedor{
    flex-direction: column;
    align-items: center;
}


.contenedorForm__parrafo{
    width: 90%;
    text-align: center;

}


.formularioIngreso{
    width: 90%;

}


.gastos > div > div{
    flex-direction: column;
    row-gap: 1rem;
    align-items: center;
}


footer{
    background-color: #043263;
    width: 100%;
    height:  100px;

}


footer > div{
    display: flex;
    justify-content: center;
    
}


footer > div > a > i{
    color: white;
    font-size: 30px;

}
}