/* ==========================================
   Hub Cards — Métricas, Painéis e Unidades
   Tokens: var(--hub-*) como fonte da verdade
   ========================================== */

/* --- .hub-metric / .beto-metric-card (Métricas Canônicas e Legadas) --- */
.hub-metric,
.beto-metric-card {
    min-width: 0;
    padding: var(--space-m);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
        var(--hub-surface-raised);
    box-shadow: none;
}

.hub-metric span,
.beto-metric-card span {
    color: var(--hub-text-muted);
    font-size: var(--hub-text-label);
    font-weight: var(--hub-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hub-metric strong,
.beto-metric-card strong {
    color: var(--hub-text);
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.05;
    font-weight: var(--hub-weight-bold)
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Modificadores de Métrica Unificados */
.hub-metric--primary,
.beto-metric-card--primary {
    border-left: 3px solid var(--hub-primary);
    border-color: rgba(203, 123, 55, 0.34);
    background: linear-gradient(180deg, rgba(203, 123, 55, 0.075), transparent), var(--hub-surface-raised);
}
.hub-metric--primary strong,
.beto-metric-card--primary strong {
    color: var(--hub-primary);
}

.hub-metric--profit,
.beto-metric-card--profit {
    border-left: 3px solid var(--hub-success);
    border-color: rgba(79, 151, 104, 0.34);
    background: linear-gradient(180deg, rgba(79, 151, 104, 0.075), transparent), var(--hub-surface-raised);
}
.hub-metric--profit strong,
.beto-metric-card--profit strong {
    color: var(--hub-success);
}

.hub-metric--market,
.beto-metric-card--market {
    border-left: 3px solid var(--hub-info);
    border-color: rgba(68, 122, 203, 0.3);
    background: linear-gradient(180deg, rgba(68, 122, 203, 0.055), transparent), var(--hub-surface-raised);
}
.hub-metric--market strong,
.beto-metric-card--market strong {
    color: var(--hub-info);
}

.hub-metric--gold,
.beto-metric-card--gold {
    border-left: 3px solid var(--hub-warning);
}
.hub-metric--gold strong,
.beto-metric-card--gold strong {
    color: var(--hub-warning);
}

.hub-metric--danger,
.beto-metric-card--danger {
    border-left: 3px solid var(--hub-danger);
}
.hub-metric--danger strong,
.beto-metric-card--danger strong {
    color: var(--hub-danger);
}

/* Modificadores de Métrica Extras */
.beto-metric-card--warn,
.hub-metric--warn {
    border-left: 3px solid var(--beto-brown);
    border-color: rgba(162, 119, 99, 0.34);
    background: linear-gradient(180deg, rgba(162, 119, 99, 0.075), transparent), var(--hub-surface-raised);
}

/* --- .hub-panel / .beto-panel (Painel Genérico Canônico e Legado) --- */
.hub-panel,
.beto-panel {
    min-width: 0;
    padding: var(--space-m);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
        var(--hub-surface-raised);
    box-shadow: none;
}

@media (min-width: 861px) {
    .hub-panel,
    .beto-panel {
        border-color: var(--hub-border);
        border-radius: var(--hub-radius);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 68%),
            var(--hub-surface-soft);
    }
}

@media (max-width: 760px) {
    .hub-panel,
    .beto-panel {
        padding: var(--space-s);
    }
}

/* --- .hub-unit-card / .beto-unit-card (Cards de Unidade Canônicos e Legados) --- */
.hub-unit-card,
.beto-unit-card {
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.hub-unit-card:hover,
.beto-unit-card:hover {
    border-color: rgba(203, 123, 55, 0.64);
    background:
        linear-gradient(180deg, rgba(203, 123, 55, 0.12), transparent 74%),
        var(--hub-surface-raised);
    transform: translateY(-2px);
}

/* --- Sub-componentes Internos Canônicos e Legados --- */
.hub-panel__head,
.beto-panel__head {
    /* Estilizados em beto-global.css e beto-responsive.css */
}