/* ==========================================
   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 var(--hub-space-1);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--hub-text-label);
    font-weight: var(--hub-weight-chip);
    line-height: 1;
    letter-spacing: var(--hub-tracking-snug);
    white-space: nowrap;
}
.hub-status-chip--success {
    background: rgba(var(--hub-success-rgb), 0.2);
    border-color: rgba(var(--hub-success-rgb), 0.48);
    color: var(--hub-text-on-success);
}
.hub-status-chip--warning {
    background: rgba(var(--hub-warning-rgb), 0.16);
    border-color: rgba(var(--hub-warning-rgb), 0.42);
    color: var(--hub-text-on-warning);
}
.hub-status-chip--danger {
    background: rgba(var(--hub-danger-rgb), 0.2);
    border-color: rgba(var(--hub-danger-rgb), 0.5);
    color: var(--hub-text-on-danger);
}
.hub-status-chip--muted {
    background: var(--hub-white-alpha-5);
    border-color: var(--hub-border);
    color: var(--hub-text-muted);
}

/* --- .hub-badge (Canônico) --- */
.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);
}

/* --- .hub-semantic-tag (Chips para TPL, APL, OBS, SIM) --- */
.hub-semantic-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hub-text-label);
    font-weight: var(--hub-weight-bold);
    line-height: 1;
    padding: 2px var(--hub-space-1);
    border-radius: var(--hub-radius-sm);
    letter-spacing: var(--hub-tracking-snug);
    text-transform: var(--hub-case-chip);
    vertical-align: middle;
    margin-left: var(--hub-space-2);
    box-sizing: border-box;
}
.hub-semantic-tag--tpl {
    background: var(--hub-white-alpha-3);
    border: 1px dashed var(--hub-border);
    color: var(--hub-text-muted);
}
.hub-semantic-tag--apl {
    background: rgba(var(--hub-primary-rgb), 0.1);
    border: 1px solid rgba(var(--hub-primary-rgb), 0.4);
    color: var(--hub-primary);
}
.hub-semantic-tag--obs {
    background: rgba(var(--hub-info-rgb), 0.1);
    border: 1px solid rgba(var(--hub-info-rgb), 0.4);
    color: var(--hub-info);
}
.hub-semantic-tag--sim {
    background: rgba(var(--hub-success-rgb), 0.1);
    border: 1px solid rgba(var(--hub-success-rgb), 0.4);
    color: var(--hub-success);
}

/* Contexto de glossário — tag precede o texto no dt, sem margem esquerda */
.hub-glossary-modal__section dt .hub-semantic-tag {
    margin-left: 0;
    margin-right: var(--hub-space-2);
}