@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

}

body {
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Open Sans', sans-serif;
}

a {
    text-decoration: none;
}

body.dark-mode {
    background-color: black;
    color: white;
}

body.light-mode {
    background-color: white;
    color: black;
}

/* Estilos para el modo oscuro */
.dark-mode a {
    color: #ffffff;
    /* Cambia el color de los enlaces en modo oscuro */
}

.dark-mode h1 {
    color: cornsilk;
    font-family: cursive;
}

/* Estilos para el modo claro */
.light-mode a {
    color: #000000;

}

.dark-mode .login,
.dark-mode .about,
.dark-mode .register {
    color: antiquewhite;
    font-family: cursive;
    border: solid .125rem antiquewhite;
    font-weight: 500;

}

.light-mode .login,
.light-mode .about,
.light-mode .register {
    color: lightslategray;
    border: solid .125rem lightslategray;
    font-weight: 500;

}

.login {
    margin-right: 32px;
}

ul {
    list-style: none;
}


main {
    padding: 32px;
    margin: 16px;
    min-height: 70vh;
}


/* inicio footer */
#footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dark-mode footer {
    color: antiquewhite !important;

}


footer div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;

}

footer div a {
    text-decoration: none;
    padding: 32px;
}

/* fin footer */

/*scroll */
#contenedorBotonesUpDown {
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    width: 2.5rem;
    height: fit-content;
}


.btnDown,
.btnUp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 8px;

}

.btnDown {
    border-radius: 0rem 0rem 1rem 1rem;
}

.btnUp {
    border-radius: 1rem 1rem 0rem 0rem;
}


/*cards */
.contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
    z-index: 0;
}

.card {
    width: 17rem;
    height: 23rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    text-align: left;
    margin: 0px !important;
    padding: 0px !important;

}

.dark-mode .card {
    background-color: grey;
    color: white;
}

.dark-mode .card:hover {
    background-color: #555;
    color: white;
}

.card:hover {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.card-img-top {
    height: 11rem;
    width: 100%;
    margin: 0px !important;
    padding: 0px !important;
}

.btnCard {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: bisque !important;
}


input {
    color: black;
    font-weight: 700;
    margin-right: 3rem;
}

/* boton toggle dark-light*/

#toggleButton {
    width: 24px;

    height: 16px;
    padding: 16px;
    text-align: center;
    font-size: .75rem;
    font-size: larger;

    background-image: url('../img/circle-half-stroke-solid.svg');
    background-size: cover;
    background-color: lightgray;
    border: lightgrey .125rem solid;
    z-index: 1500;
}

/*   spiner*/
/**
Author Temani Afif  June 1, 2021
source: https://freefrontend.com/css-spinners/
*/

.spinner-3 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background:
        linear-gradient(0deg, rgb(0 0 0/50%) 30%, #0000 0 70%, rgb(0 0 0/100%) 0) 50%/8% 100%,
        linear-gradient(90deg, rgb(0 0 0/25%) 30%, #0000 0 70%, rgb(0 0 0/75%) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    animation: s3 1s infinite steps(12);
}
.dark-mode .spinner-3{
    background:
    linear-gradient(0deg, rgb(255 255 255/50%) 30%, #fff 0 70%, rgb(255 255 255/100%) 0) 50%/8% 100%,
    linear-gradient(90deg, rgb(255 255 255/25%) 30%, #fff 0 70%, rgb(255 255 255/75%) 0) 50%/100% 8%;
background-repeat: no-repeat;
}

.spinner-3::before,
.spinner-3::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: inherit;
    opacity: 0.915;
    transform: rotate(30deg);
}

.spinner-3::after {
    opacity: 0.83;
    transform: rotate(60deg);
}

@keyframes s3 {
    100% {
        transform: rotate(1turn)
    }
}

/* fin spiner */

/**map leaflet style */
#map {
    height: 15rem;
}

/**modals */
.modal {
    z-index: 2000;
}

#myModal,
#myModal1,
.modal-dialog,
.modal-content,
.modal-body {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 .25rem 1.875rem rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(.2062rem);
    border: 0rem;
}

.modal-body h4,
.modal-body h6,
.btnHomeBanking {
    color: white;
}

.about p {
    color: white;
}

.login p,
#errorEm,
.errorPassw2,
.errorPassw,
#errorPassw0,
#errorEm0 {
    color: rgb(146, 5, 33);
    font-weight: 600;
}

.about a {
    color: bisque;
    font-weight: 600;
}

/*fin modals */

/**detgalle */

.dark-mode #h1detalle {
    color: antiquewhite !important;
}

.imagenDetalle1 {
    width: 100%;
}

.main2 {
    margin-top: 0;
    font-size: 0.85rem;
    line-height: 0.85rem;
}

.small1{
    margin-top: 1rem;
}
#map{
    padding:1rem;
   margin-right: auto;
   margin-left: auto;
   margin-top: 1rem;
   margin-bottom: 1rem;
   height:50vh;
}
.buttonsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: baseline;
    margin: 16px;
    gap: 16px;


}

@media(width>900) {
    .main2 {
        display: flex;
        flex-direction: row !important;
        justify-content: space-around;
        align-items: center;
    }

    .detalle1 {
        width: 25%;
        height: 100vh;
        flex-direction: column;
        order: 1;
    }

    .detalle3 {
        width: 70%;
        height: 100vh;
        width: 25%;
        height: 100vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        order: 2;
    }

    .detalle31 {
        width: 100%;
        height: 100vh;
        width: 25%;
        height: 100vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }


    html {
        font-size: 1.125rem;
    }

}



@media(width<830px) {
    html {
        font-size: 1rem;
    }

    .tituloh1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .tituloh11 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .tituloh111 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }


}

@media(width>540px) {

    #footer {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-around;
        width: 100%;
    }

    #footer div {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        width: 40%;
    }
}

@media(width <450px) {

    html {
        font-size: .875rem;
    }
}

@media(width <350px) {
    html {
        font-size: .75rem;
    }

    .fa-globe {
        display: none;
    }
}