.btnStatus {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        user-select: none;
        background-color: #e9ecef;
        border: 1px solid transparent !important;
        padding: 4px 3px;
        font-size: 14px;
        min-width: -webkit-fill-available;
        line-height: 1.5;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    /* === VERDES === */
    .btn-green-light {
        background-color: #d6f4e4;
        border: 1px solid transparent;
        color: #03833f;
        cursor: pointer;
    }

    .btn-green-medium {
        background-color: #e7fbe1;
        border: 1px solid transparent;
        color: #22a10d;
        cursor: pointer;
    }

    .btn-green-dark {
        background-color: #e8f5e9;
        border: 1px solid;
        color: #388e3c;
        cursor: pointer;
    }

    /* === AMARILLOS === */
    .btn-yellow-light {
        background-color: #fcf27f;
        border: 1px solid transparent;
        color: #b98007;
        cursor: pointer;
    }

    .btn-yellow-medium {
        background-color: #f1d3ae;
        border: 1px solid;
        color: #634600;
        cursor: pointer;
    }

    /* === ROJOS === */
    .btn-red-light {
        background-color: #ffdfda;
        border: 1px solid transparent;
        color: #8b0706f7;
        cursor: pointer;
    }

    .btn-red-medium {
        background-color: #ffdada;
        border: 1px solid;
        color: #93010f;
        cursor: pointer;
    }

    /* === AZULES === */
    .btn-blue-light {
        background-color: #d9f4fb;
        border: 1px solid transparent;
        color: #08bfc9;
        cursor: pointer;
    }

    .btn-blue-medium {
        background-color: #e1f5fe;
        border: 1px solid;
        color: #0288d1;
        cursor: pointer;
    }

    .btn-blue-dark {
        background-color: #e3f2fd;
        border: 1px solid;
        color: #1976d2;
        cursor: pointer;
    }

    /* === GRISES === */
    .btn-gray-light {
        background-color: #f3f4f6;
        border: 1px solid;
        color: #9e9e9e;
        cursor: pointer;
    }

    .btn-gray-medium {
        background-color: #f5f5f5;
        border: 1px solid;
        color: #212121;
        cursor: pointer;
    }

    .fe-status {
        vertical-align: inherit;
    }
    

    .btn-add {
        color: #ffffff;
        background-color: #050835;
        border-color: #1b68ff00;
    }
    .btn-add:hover {
        color: #050835;
        background: #e9ecef;
        border-color: #050835;
        text-decoration: solid;
    }
    .filter-header {
        min-width: fit-content;
        justify-items: right;
    }
    .btn-group-filter {
        padding: 0.8rem 0.8rem;
    }
         
         
    @media (max-width: 768px) { /* Tablets en orientación vertical y teléfonos grandes */
        .btnStatus {
            font-size: 20px;
        }
    }
    
    @media (max-width: 576px) { /* Teléfonos pequeños y medianos */
        .btnStatus2 {
            font-size: 18px;
            padding: 8px;
        }
    }
    
    @media (min-width: 769px) and (max-width: 1024px) { /* Tablets en orientación horizontal y pantallas medianas */
        .btnStatus2 {
            font-size: 22px;
        }
    }
    
    @media (min-width: 1025px) { /* Laptops y pantallas de escritorio */
        .btnStatus2 {
            font-size: 24px;
        }
    }
         
    .btn-outline-green-light:not(:disabled):not(.disabled):active, .btn-outline-green-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-green-light.dropdown-toggle {
        color: #ffffff !important;
        background-color: #20b666 !important;
        /* border-color: #3ad29f; */
    }
    .btn-outline-green-light {
        color: #1e854e !important;
        background-color: #d6f4e4 !important;
    }
    .btn-outline-green-light:hover {
        color: #ffffff !important;
        background-color: #20b666 !important;
        /* border-color: #3ad29f; */
    }
    /* 1. Midnight Indigo (#131353) */
    .btn-outline-midnight-indigo {
        color: #131353 !important;
        background-color: #e5e4f8 !important;
    }
    .btn-outline-midnight-indigo:hover,
    .btn-outline-midnight-indigo:focus {
        color: #ffffff !important;
        background-color: #131353 !important;
    }
    .btn-outline-midnight-indigo:not(:disabled):not(.disabled):active,
    .btn-outline-midnight-indigo:not(:disabled):not(.disabled).active,
    .show > .btn-outline-midnight-indigo.dropdown-toggle {
        color: #ffffff !important;
        background-color: #0f1030 !important;
    }
    
    /* 2. Fiery Rose (#db4953) */
    .btn-outline-fiery-rose {
        color: #db4953 !important;
        background-color: #fde0e2 !important;
    }
    .btn-outline-fiery-rose:hover,
    .btn-outline-fiery-rose:focus {
        color: #ffffff !important;
        background-color: #db4953 !important;
    }
    .btn-outline-fiery-rose:not(:disabled):not(.disabled):active,
    .btn-outline-fiery-rose:not(:disabled):not(.disabled).active,
    .show > .btn-outline-fiery-rose.dropdown-toggle {
        color: #ffffff !important;
        background-color: #b3363f !important;
    }
    
    /* 3. Royal Sapphire (#071e91) */
    .btn-outline-royal-sapphire {
        color: #071e91 !important;
        background-color: #e1e4fb !important;
    }
    .btn-outline-royal-sapphire:hover,
    .btn-outline-royal-sapphire:focus {
        color: #ffffff !important;
        background-color: #071e91 !important;
    }
    .btn-outline-royal-sapphire:not(:disabled):not(.disabled):active,
    .btn-outline-royal-sapphire:not(:disabled):not(.disabled).active,
    .show > .btn-outline-royal-sapphire.dropdown-toggle {
        color: #ffffff !important;
        background-color: #061973 !important;
    }
    
    /* 4. Sky Periwinkle (#bac4f3) */
    .btn-outline-sky-periwinkle {
        color: #bac4f3 !important;
        background-color: #f2f4ff !important;
    }
    .btn-outline-sky-periwinkle:hover,
    .btn-outline-sky-periwinkle:focus {
        color: #ffffff !important;
        background-color: #bac4f3 !important;
    }
    .btn-outline-sky-periwinkle:not(:disabled):not(.disabled):active,
    .btn-outline-sky-periwinkle:not(:disabled):not(.disabled).active,
    .show > .btn-outline-sky-periwinkle.dropdown-toggle {
        color: #ffffff !important;
        background-color: #9ab1e0 !important;
    }
    
    /* 5. Sunbeam Gold (#fbb335) */
    .btn-outline-sunbeam-gold {
        color: #fbb335 !important;
        background-color: #fff4e1 !important;
    }
    .btn-outline-sunbeam-gold:hover,
    .btn-outline-sunbeam-gold:focus {
        color: #ffffff !important;
        background-color: #fbb335 !important;
    }
    .btn-outline-sunbeam-gold:not(:disabled):not(.disabled):active,
    .btn-outline-sunbeam-gold:not(:disabled):not(.disabled).active,
    .show > .btn-outline-sunbeam-gold.dropdown-toggle {
        color: #ffffff !important;
        background-color: #d99a26 !important;
    }
    
    /* 6. Electric Ultramarine (#4655e8) */
    .btn-outline-electric-ultramarine {
        color: #4655e8 !important;
        background-color: #e3e5fd !important;   /* tono muy suave */
    }
    .btn-outline-electric-ultramarine:hover,
    .btn-outline-electric-ultramarine:focus {
        color: #ffffff !important;
        background-color: #4655e8 !important;
    }
    .btn-outline-electric-ultramarine:not(:disabled):not(.disabled):active,
    .btn-outline-electric-ultramarine:not(:disabled):not(.disabled).active,
    .show > .btn-outline-electric-ultramarine.dropdown-toggle {
        color: #ffffff !important;
        background-color: #3a49c8 !important;   /* ligeramente más oscuro */
    }
    
    /* 7. Aqua Radiance (#07d4e1) */
    .btn-outline-aqua-radiance {
        color: #07d4e1 !important;
        background-color: #e1fbfc !important;   /* tono muy suave */
    }
    .btn-outline-aqua-radiance:hover,
    .btn-outline-aqua-radiance:focus {
        color: #ffffff !important;
        background-color: #07d4e1 !important;
    }
    .btn-outline-aqua-radiance:not(:disabled):not(.disabled):active,
    .btn-outline-aqua-radiance:not(:disabled):not(.disabled).active,
    .show > .btn-outline-aqua-radiance.dropdown-toggle {
        color: #ffffff !important;
        background-color: #06a8b3 !important;   /* ligeramente más oscuro */
    }