/* ==========================================
   Hub Badges — Indicadores de Status
   Tokens: var(--hub-*) como fonte da verdade
   ========================================== */

/* --- .hub-status-chip (Canônico para status operacionais compactos) --- */
.hub-status-chip {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--hub-text-eyebrow);
    font-weight: var(--hub-weight-bold);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}
.hub-status-chip--success {
    background: rgba(79, 151, 104, 0.2);
    border-color: rgba(79, 151, 104, 0.48);
    color: var(--hub-text-on-success);
}
.hub-status-chip--warning {
    background: rgba(222, 183, 118, 0.16);
    border-color: rgba(222, 183, 118, 0.42);
    color: var(--hub-text-on-warning);
}
.hub-status-chip--danger {
    background: rgba(190, 82, 75, 0.2);
    border-color: rgba(190, 82, 75, 0.5);
    color: var(--hub-text-on-danger);
}
.hub-status-chip--muted {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--hub-border);
    color: var(--hub-text-muted);
}

.hub-badge--success {
    background: var(--hub-success);
    color: var(--hub-text);
}
.hub-badge--warning {
    background: var(--hub-warning);
    color: var(--hub-bg);
}
.hub-badge--outline {
    background: transparent;
    border: 1px solid var(--hub-border);
    color: var(--hub-text-muted);
}
.hub-badge--muted {
    background: rgba(100, 100, 100, 0.15);
    color: var(--hub-text-muted);
}
.hub-badge--danger {
    background: var(--hub-danger);
    color: var(--hub-text);
}

/* --- .beto-badge (Legado — retrocompatibilidade) --- */

.beto-badge--success {
    background: var(--hub-success);
    color: var(--hub-text);
}
.beto-badge--warning {
    background: var(--hub-warning);
    color: var(--hub-bg);
}
.beto-badge--outline {
    background: transparent;
    border: 1px solid var(--hub-border);
    color: var(--hub-text-muted);
}

.beto-badge--muted {
    background: rgba(100, 100, 100, 0.15);
    color: var(--hub-text-muted);
}
.beto-badge--danger {
    background: var(--hub-danger);
    color: var(--hub-text);
}