.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;
        }
    }