body {
}
/*------------------------------
       Diseño de Badges
--------------------------------*/
.badge-activo, .badge-inactivo, .badge-custom, .badge-error, .badge-warning {
    padding: 4px 12px;
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
}

/*------------------------------------------------
                TEMA CLARO 
-------------------------------------------------*/

/*::::::::::: CUSTOM ::::::::::::*/
.badge-custom {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
    border-color: var(--bs-gray-200);
}

/*::::::::::: ACTIVO ::::::::::::*/
.badge-activo {
    background-color: #d1fae5;
    color: #065f46; 
}

    .badge-activo::before {
        background-color: #10b981; 
    }

/*::::::::::: INACTIVO ::::::::::::*/
.badge-inactivo {
    background-color: #f3f4f6;
    color: #374151;
}

    .badge-inactivo::before {
        background-color: #9ca3af;
    }

/*::::::::::: WARNING ::::::::::::*/
.badge-warning {
    background-color: #fef3c7; 
    color: #92400e;
}

    .badge-warning::before {
        background-color: #f59e0b; 
    }

/*::::::::::: ERROR ::::::::::::*/
.badge-error {
    background-color: #fee2e2; 
    color: #991b1b; 
}

    .badge-error::before {
        background-color: #ef4444; 
    }


/*-----------------------------------------------
                TEMA OSCURO 
------------------------------------------------*/
[data-bs-theme="dark"] {
    /*::::::::::: CUSTOM ::::::::::::*/
    .badge-custom {
        background-color: rgba(255, 255, 255, 0.05);
        color: var(--bs-gray-400);
        border-color: rgba(255, 255, 255, 0.08);
    }
    /*::::::::::: ACTIVO ::::::::::::*/
    .badge-activo {
        background-color: rgba(16, 185, 129, 0.15);
        color: #34d399; 
    }

        .badge-activo::before {
            background-color: #34d399;
        }
    /*::::::::::: INACTIVO ::::::::::::*/
    .badge-inactivo {
        background-color: rgba(156, 163, 175, 0.15);
        color: #9ca3af;
    }

        .badge-inactivo::before {
            background-color: #9ca3af;
        }
    /*::::::::::: WARNING ::::::::::::*/
    .badge-warning {
        background-color: rgba(245, 158, 11, 0.15);
        color: #fbbf24; 
    }

        .badge-warning::before {
            background-color: #fbbf24;
        }
    /*::::::::::: ERROR ::::::::::::*/
    .badge-error {
        background-color: rgba(239, 68, 68, 0.15);
        color: #f87171; 
    }

        .badge-error::before {
            background-color: #f87171;
        }
}