button {
    background-color: var(--color-fondobotones);
    border: 3px solid transparent;
    border-radius: 20px;
    box-shadow: 0px 7px 20px -10px var(--color-fondobotones);
    color: var(--color-textonormal);
    transition: border 0.3s;
    height: 40px;
    padding: 0px 20px;
    font-size: 1em;
}

    button:hover {
        border: 3px solid rgba(255, 255, 255, 0.5);
    }

.btn-azul {
    background-color: var(--color-azul);
    box-shadow: 0px 7px 20px -10px var(--color-azul);
    color: white;
}

.btn-verde {
    background-color: var(--color-verde);
    box-shadow: 0px 7px 20px -10px var(--color-verde);
    color: white;
}

.btn-coral {
    background-color: var(--color-coral);
    box-shadow: 0px 7px 20px -10px var(--color-coral);
    color: white;
}

.btn-violeta {
    background-color: var(--color-violeta);
    box-shadow: 0px 7px 20px -10px var(--color-violeta);
    color: white;
}

.btn-ok {
    padding: 0px 20px 0px 8px;
}

    .btn-ok::before {
        margin-right: 10px;
        background-image: url('../images/ok.png');
        background-size: contain;
        display: inline-block;
        vertical-align: -0.4em;
        width: 24px;
        height: 24px;
        content: "";
    }

.btn-cancelar {
    padding: 0px 20px 0px 8px;
}

    .btn-cancelar::before {
        margin-right: 10px;
        background-image: url('../images/cancel.png');
        background-size: contain;
        display: inline-block;
        vertical-align: -0.4em;
        width: 24px;
        height: 24px;
        content: "";
    }

.btn-login {
    padding: 0px 20px 0px 8px;
}

    .btn-login::before {
        margin-right: 10px;
        background-image: url('../images/login.png');
        background-size: contain;
        display: inline-block;
        vertical-align: -0.4em;
        width: 24px;
        height: 24px;
        content: "";
    }

.btn-add {
    padding: 0px 20px 0px 8px;
}

    .btn-add::before {
        margin-right: 10px;
        background-image: url('../images/add.png');
        background-size: contain;
        display: inline-block;
        vertical-align: -0.4em;
        width: 24px;
        height: 24px;
        content: "";
    }

.btn-eliminar {
    padding: 0px 20px 0px 8px;
}

    .btn-eliminar::before {
        margin-right: 10px;
        background-image: url('../images/delete.png');
        background-size: contain;
        display: inline-block;
        vertical-align: -0.4em;
        width: 24px;
        height: 24px;
        content: "";
    }

.btn.icono-gris::before {
    filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(266%) hue-rotate(131deg) brightness(94%) contrast(83%);
}

.btn-redondo {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    padding: 0px;
}

    .btn-redondo > img {
        width: 100%;
        height: 100%;
        filter: contrast(0) brightness(100);
    }