.button-primary-icon-text {
    width: auto !important;
    height: 2rem !important;
    background-color: var(--color-primary-700) !important;
    border: 1px solid var(--color-primary-700) !important;
    color: #fff !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-primary-icon-text:hover {
        width: auto !important;
        height: 2rem !important;
        background-color: var(--color-primary-600) !important;
        border: 1px solid var(--color-primary-600) !important;
        color: #fff !important;
        border-radius: var(--border-radius-2) !important;
    }

.button-secondary-icon-text {
    width: auto !important;
    height: 2rem !important;
    background-color: #fff !important;
    border: 1px solid var(--color-gray-500) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--border-radius-2) !important;
}

.button-primary-icon {
    width: 2rem !important;
    height: 2rem !important;
    background-color: var(--color-primary-700) !important;
    border: 1px solid var(--color-primary-700) !important;
    color: #fff !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-primary-icon:hover {
        width: 2rem !important;
        height: 2rem !important;
        background-color: var(--color-primary-600) !important;
        border: 1px solid var(--color-primary-600) !important;
        color: #fff !important;
        border-radius: var(--border-radius-2) !important;
    }

.button-secondary-icon {
    width: 2rem !important;
    height: 2rem !important;
    background-color: #fff !important;
    border: 1px solid var(--color-gray-500) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-secondary-icon:hover {
        width: 2rem !important;
        height: 2rem !important;
        background-color: var(--color-gray-100) !important;
        border: 1px solid var(--color-gray-500) !important;
        color: var(--color-text-primary) !important;
        border-radius: var(--border-radius-2) !important;
    }

.button-primary-text {
    width: auto !important;
    height: 2rem !important;
    background-color: var(--color-primary-700) !important;
    border: 1px solid var(--color-primary-700) !important;
    color: #fff !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-primary-text:hover {
        width: auto !important;
        height: 2rem !important;
        background-color: var(--color-primary-600) !important;
        border: 1px solid var(--color-primary-600) !important;
        color: #fff !important;
        border-radius: var(--border-radius-2) !important;
    }

.button-secondary-text {
    width: auto !important;
    height: 2rem !important;
    background-color: #fff !important;
    border: 1px solid var(--color-gray-500) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-secondary-text:hover {
        width: auto !important;
        height: 2rem !important;
        background-color: var(--color-gray-100) !important;
        border: 1px solid var(--color-gray-500) !important;
        color: var(--color-text-primary) !important;
        border-radius: var(--border-radius-2) !important;
    }



/* --- ICON BUTTONS V3 --- */
.button-primary-icon-text .bi.bi-plus-lg /*ICONO CREAR*/ {
    font-size: 1rem !important; /*Revisar*/
    color: #fff !important;
}

.button-primary-icon-text .bi.bi-floppy /*ICONO GUARDAR*/ {
    font-size: 0.9rem !important; /*Revisar*/
    color: #fff !important;
}

.button-secondary-icon .bi.bi-arrow-clockwise, /*ICONO RECARGAR*/
.button-secondary-icon .bi.bi-box-arrow-right, /*ICONO EXPORTAR*/
.button-secondary-icon .bi.bi-chevron-left, /*ICONO VOLVER */
.button-secondary-icon .bi.bi-chevron-right, /*ICONO SIGUIENTE*/
.button-secondary-icon .bi.bi-box-arrow-in-right /*ICONO IMPORTAR*/ {
    font-size: 1rem !important; /*Revisar*/
    color: var(--color-text-primary) !important;
}


/* Grid buttons */
i.bi.bi-check2::before { /*ICONO TILDE*/
    color: var(--color-text-primary) !important;
    font-size: 26px; /*Revisar*/
}

i.bi-x::before { /*ICONO X*/
    color: var(--color-text-primary) !important;
    font-size: 30px; /*Revisar*/
}

a.bi.bi-check2::before { /*ICONO TILDE*/
    color: var(--color-text-primary) !important;
    font-size: 26px; /*Revisar*/
}

a.bi-x::before { /*ICONO X*/
    color: var(--color-text-primary) !important;
    font-size: 30px; /*Revisar*/
}

a.btn-icon {
    color: var(--color-text-primary) !important;
    background-color: transparent !important;
    font-size: 18px !important;
    padding: var(--spacing-1) var(--spacing-2) !important;
}

    a.btn-icon:hover {
        color: var(--color-secondary-700) !important;
        background-color: transparent !important;
        font-size: 18px !important;
        padding: var(--spacing-1) var(--spacing-2) !important;
    }

button.btn-icon {
    color: var(--color-text-primary) !important;
    background-color: transparent !important;
    font-size: 18px !important; /*Revisar*/
    padding: var(--spacing-1) var(--spacing-2) !important;
    border: none !important;
}

    button.btn-icon:hover {
        color: var(--color-secondary-700) !important;
        background-color: transparent !important;
        font-size: 18px !important; /*Revisar*/
        padding: var(--spacing-1) var(--spacing-2) !important;
        border: none !important;
    }



@media (max-width: 576px) {
    button.button-primary-icon-text span.dxbl-btn-caption {
        display: none !important;
    }

    button.button-primary-icon-text {
        width: 2rem !important;
    }

    button.button-secondary-icon-text span.dxbl-btn-caption {
        display: none !important;
    }

    button.button-secondary-icon-text {
        width: 2rem !important;
    }
}



/* ==========================================================================
   BUTTON — NEW DESIGN SYSTEM IMPLEMENTATION
   ========================================================================== */

/* ==========================================================================
   BUTTON BASE
   ========================================================================== */

.button {
    border-radius: var(--radius-l) !important;
    padding: var(--spacing-1-5) var(--spacing-4) !important;
    gap: var(--spacing-1) !important;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {

    .button-mobile-icon span.dxbl-btn-caption {
        display: none;
    }

    .button-mobile-icon {
        padding: var(--spacing-1-5) !important;
        min-width: 36px;
    }
}


/* ==========================================================================
   BUTTON — PRIMARY
   ========================================================================== */

.button-primary {
    background-color: var(--color-action-primary) !important;
    border: 1px solid var(--color-blue-700) !important;
    color: #fff !important;
}

    .button-primary:hover {
        background-color: var(--color-action-primary-hover) !important;
        border: 1px solid var(--color-blue-800) !important;
    }

    .button-primary:active {
    }

    .button-primary:disabled {
    }

/* ==========================================================================
   BUTTON — SECONDARY
   ========================================================================== */

.button-secondary {
    background-color: #fff !important;
    border: 1px solid var(--color-neutral-300) !important;
    color: var(--color-text-primary) !important;
}

    .button-secondary:hover {
        background-color: var(--color-neutral-200) !important;
    }

    .button-secondary:active {
    }

    .button-secondary:disabled {
    }

/* ==========================================================================
   BUTTON — TERTIARY
   ========================================================================== */

.button-tertiary {
    background-color: transparent !important;
    border: none !important;
    padding: var(--spacing-1-5) !important;
}

    .button-tertiary:hover {
        background-color: var(--color-neutral-200) !important;
    }

    .button-tertiary:active {
    }

    .button-tertiary:disabled {
    }