/* ==============================================================================
   CRM-GREU — Components: Badges
   Extraído de components.css — ver ese archivo para las reglas realmente
   comunes/transversales que no encajan en ninguna estructura concreta.
   ============================================================================== */

/* --- Badges ----------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-active { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.badge-inactive { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border-soft); }
.badge-pending { background: var(--color-warning-bg); color: #92600a; border: 1px solid var(--color-warning-border); }
.badge-expired { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.badge-soft { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border-soft); }
.badge-complete { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.badge-incomplete { background: var(--color-warning-bg); color: #92600a; border: 1px solid var(--color-warning-border); }

/* --- Status badges --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}

.status-badge.inactive {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
}

/* --- Badge variants --- */
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-secondary { background: var(--color-bg); color: var(--color-muted); }
.badge-dark { background: var(--color-text); color: var(--color-surface); }