:root{
    --color1: #fff;
    --color2: #e0a800;
    --color3: #997a0a;
    --color4: #f4f4f4;
}

.bg-title{
    background-color: var(--color3) !important;
    color: var(--color1) !important;
    text-decoration: none;
}

.bg-color-1{background-color: var(--color1) !important;}
.bg-color-2{background-color: var(--color2) !important;}
.bg-color-3{background-color: var(--color3) !important;}
.bg-color-4{ background-color: var(--color4) !important;}

.color-1{
    color: var(--color1) !important;
    text-decoration: none !important;
}

.color-2{color: var(--color2) !important;}
.color-3{color: var(--color3) !important;}
.color-4{color: var(--color4) !important;}

.b-shadow{
    border-radius: 1rem;
    box-shadow: 4px 4px 14px var(--color3);
}

nav{
    width: 100%;
    background-color:rgb(255, 251, 240);
    padding: 1rem 0rem;
    border-bottom: 1px solid var(--color3);
    display: flex;
    justify-content: space-between;
    align-items: center;

    ul{
        list-style: none;
        display: flex;
        padding: 0rem 1rem;
        margin: 0;
        gap: 1rem;
        flex-wrap: wrap;
        li{
            flex-grow: 0;
            text-align: center;
            margin: 0;
            padding: .5rem 1rem;
            background-color: var(--color3);
            border-radius: 1rem;
            a{
                text-decoration: none;
                color: white;
            }
        }
    }

    div{
        margin: 0rem 1rem;
        padding: .5rem 1rem;
        background-color: var(--color3);
        border-radius: 1rem;
        a{
            text-decoration: none;
            color: white;
        }
    }
}

.img-dep {
    width: 20%;
    max-width: 50px;
}

.exitoso {
    background-color: rgb(21, 91, 21);
}

.fallido {
    background-color: rgb(126, 29, 29);
}

.msg{
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    color: var(--color1);
    border-radius: 1rem;
}

.btn-volver{
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    color: var(--color1);
    border-radius: 1rem;
    background-color: var(--color2);
    text-decoration: none;
}

.del-img{
    position: relative;
    overflow: hidden;

    &:hover{
        &::after{
            content: "\F659"; 
            font-family: "bootstrap-icons";
            pointer-events: none;
            position: absolute;
            left: 50%;
            top: 55%;
            translate: -50% -50%;
            padding: .1rem;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 1rem;
            background-color: rgb(130, 130, 130);
            color: white !important;
        }
        img{
            opacity: 0.5;
        }
    }
}

@media (max-width: 540px) {
    .col-ocultar {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .col-ocultar-min {
        display: none !important;
    }
}