/*
============================================================
HUB FINANCEIRO — COMPONENTES OFICIAIS
Versão: 6.0.0
Dependência: hub-design-system.css
============================================================
*/

.hub-card {
    position: relative;

    overflow: hidden;

    padding: var(--hub-space-5);

    border:
        1px solid
        var(--hub-border-soft);

    border-radius:
        var(--hub-radius-lg);

    background:
        var(--hub-gradient-panel);

    box-shadow:
        var(--hub-shadow-md);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    transition:
        transform
        var(--hub-duration-normal)
        var(--hub-ease-standard),

        border-color
        var(--hub-duration-normal)
        var(--hub-ease-standard),

        box-shadow
        var(--hub-duration-normal)
        var(--hub-ease-standard);
}

.hub-card:hover {
    transform: translateY(-2px);

    border-color:
        var(--hub-border-strong);

    box-shadow:
        var(--hub-shadow-lg);
}

.hub-card--flat {
    box-shadow: none;
}

.hub-card--interactive {
    cursor: pointer;
}

.hub-card--intelligence {
    border-color:
        rgba(34, 211, 238, 0.16);

    background:
        linear-gradient(
            135deg,
            rgba(34, 211, 238, 0.075),
            rgba(59, 130, 246, 0.05),
            rgba(139, 92, 246, 0.07)
        );
}

.hub-card--premium {
    border-color:
        rgba(139, 92, 246, 0.22);

    background:
        linear-gradient(
            135deg,
            rgba(139, 92, 246, 0.13),
            rgba(59, 130, 246, 0.055),
            rgba(15, 23, 42, 0.82)
        );
}

.hub-card--success {
    border-color:
        rgba(34, 197, 94, 0.17);

    background:
        linear-gradient(
            135deg,
            rgba(34, 197, 94, 0.08),
            rgba(15, 23, 42, 0.78)
        );
}

.hub-card--warning {
    border-color:
        rgba(245, 158, 11, 0.20);

    background:
        linear-gradient(
            135deg,
            rgba(245, 158, 11, 0.08),
            rgba(15, 23, 42, 0.78)
        );
}

.hub-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--hub-space-4);
}

.hub-card__icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    color: var(--hub-color-cyan);

    border:
        1px solid
        rgba(34, 211, 238, 0.13);

    border-radius:
        var(--hub-radius-md);

    background:
        rgba(34, 211, 238, 0.08);
}

.hub-card__eyebrow {
    display: block;

    color:
        var(--hub-text-subtle);

    font-size:
        var(--hub-font-size-xs);

    font-weight:
        var(--hub-font-extrabold);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.hub-card__title {
    margin:
        var(--hub-space-2)
        0
        0;

    color:
        var(--hub-text-primary);

    font-size:
        var(--hub-font-size-lg);

    font-weight:
        var(--hub-font-black);

    line-height:
        var(--hub-line-height-tight);
}

.hub-card__description {
    margin:
        var(--hub-space-3)
        0
        0;

    color:
        var(--hub-text-muted);

    font-size:
        var(--hub-font-size-sm);

    line-height:
        var(--hub-line-height-relaxed);
}

.hub-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--hub-space-3);

    margin-top:
        var(--hub-space-5);
}

/*
============================================================
BOTÕES
============================================================
*/

.hub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--hub-space-2);

    min-height: 46px;

    padding:
        0
        var(--hub-space-4);

    color:
        var(--hub-text-primary);

    text-decoration: none;

    cursor: pointer;

    border:
        1px solid
        transparent;

    border-radius:
        var(--hub-radius-md);

    font-family:
        var(--hub-font-family);

    font-size:
        var(--hub-font-size-sm);

    font-weight:
        var(--hub-font-extrabold);

    line-height: 1;

    transition:
        transform
        var(--hub-duration-fast)
        var(--hub-ease-standard),

        border-color
        var(--hub-duration-normal)
        var(--hub-ease-standard),

        background
        var(--hub-duration-normal)
        var(--hub-ease-standard),

        box-shadow
        var(--hub-duration-normal)
        var(--hub-ease-standard),

        opacity
        var(--hub-duration-normal)
        var(--hub-ease-standard);
}

.hub-btn:hover {
    transform:
        translateY(-2px);
}

.hub-btn:active {
    transform:
        translateY(0)
        scale(0.98);
}

.hub-btn:focus-visible {
    outline:
        3px solid
        rgba(34, 211, 238, 0.28);

    outline-offset: 3px;
}

.hub-btn:disabled,
.hub-btn[aria-disabled="true"] {
    cursor: not-allowed;

    opacity: 0.48;

    transform: none;
}

.hub-btn--primary {
    color: #ffffff;

    background:
        var(--hub-gradient-brand);

    box-shadow:
        var(--hub-shadow-brand);
}

.hub-btn--primary:hover {
    box-shadow:
        0 20px 46px
        rgba(59, 130, 246, 0.32);
}

.hub-btn--secondary {
    color:
        var(--hub-text-secondary);

    border-color:
        var(--hub-border-default);

    background:
        var(--hub-surface-3);
}

.hub-btn--secondary:hover {
    color:
        var(--hub-text-primary);

    border-color:
        var(--hub-border-strong);

    background:
        var(--hub-surface-hover);
}

.hub-btn--ghost {
    color:
        var(--hub-text-muted);

    background:
        transparent;
}

.hub-btn--ghost:hover {
    color:
        var(--hub-text-primary);

    background:
        var(--hub-surface-3);
}

.hub-btn--premium {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #8b5cf6,
            #a855f7
        );

    box-shadow:
        0 18px 42px
        rgba(139, 92, 246, 0.28);
}

.hub-btn--danger {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #e11d48,
            #f43f5e
        );
}

.hub-btn--sm {
    min-height: 38px;

    padding:
        0
        var(--hub-space-3);

    font-size:
        var(--hub-font-size-xs);
}

.hub-btn--lg {
    min-height: 54px;

    padding:
        0
        var(--hub-space-5);

    font-size:
        var(--hub-font-size-md);
}

.hub-btn--block {
    width: 100%;
}

/*
============================================================
KPIs E ESTATÍSTICAS
============================================================
*/

.hub-kpi {
    min-height: 122px;

    padding:
        var(--hub-space-4);

    border:
        1px solid
        var(--hub-border-soft);

    border-radius:
        var(--hub-radius-md);

    background:
        var(--hub-surface-3);
}

.hub-kpi__label {
    color:
        var(--hub-text-subtle);

    font-size:
        var(--hub-font-size-xs);

    font-weight:
        var(--hub-font-extrabold);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.hub-kpi__value {
    display: block;

    margin-top:
        var(--hub-space-3);

    color:
        var(--hub-text-primary);

    font-size:
        clamp(1.35rem, 3vw, 2rem);

    font-weight:
        var(--hub-font-black);

    line-height: 1;
}

.hub-kpi__detail {
    display: block;

    margin-top:
        var(--hub-space-2);

    color:
        var(--hub-text-muted);

    font-size:
        var(--hub-font-size-xs);

    line-height:
        var(--hub-line-height-normal);
}

.hub-kpi__trend {
    display: inline-flex;
    align-items: center;

    gap: var(--hub-space-1);

    margin-top:
        var(--hub-space-3);

    font-size:
        var(--hub-font-size-xs);

    font-weight:
        var(--hub-font-bold);
}

.hub-kpi__trend--positive {
    color:
        var(--hub-success);
}

.hub-kpi__trend--negative {
    color:
        var(--hub-danger);
}

/*
============================================================
BADGES
============================================================
*/

.hub-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.35rem;

    min-height: 25px;

    padding:
        0
        0.65rem;

    color:
        var(--hub-text-secondary);

    border:
        1px solid
        var(--hub-border-soft);

    border-radius:
        var(--hub-radius-full);

    background:
        var(--hub-surface-3);

    font-size: 0.68rem;

    font-weight:
        var(--hub-font-extrabold);

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.hub-badge--new {
    color: #67e8f9;

    border-color:
        rgba(34, 211, 238, 0.18);

    background:
        rgba(34, 211, 238, 0.08);
}

.hub-badge--recommended {
    color: #86efac;

    border-color:
        rgba(34, 197, 94, 0.18);

    background:
        rgba(34, 197, 94, 0.08);
}

.hub-badge--completed {
    color: #4ade80;

    border-color:
        rgba(34, 197, 94, 0.18);

    background:
        rgba(34, 197, 94, 0.08);
}

.hub-badge--warning {
    color: #fbbf24;

    border-color:
        rgba(245, 158, 11, 0.20);

    background:
        rgba(245, 158, 11, 0.08);
}

.hub-badge--danger {
    color: #fb7185;

    border-color:
        rgba(244, 63, 94, 0.20);

    background:
        rgba(244, 63, 94, 0.08);
}

.hub-badge--premium {
    color: #c4b5fd;

    border-color:
        rgba(139, 92, 246, 0.24);

    background:
        rgba(139, 92, 246, 0.10);
}

/*
============================================================
ALERTAS E INSIGHTS
============================================================
*/

.hub-alert {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-items: start;

    gap:
        var(--hub-space-3);

    padding:
        var(--hub-space-4);

    border:
        1px solid
        var(--hub-border-soft);

    border-radius:
        var(--hub-radius-md);

    background:
        var(--hub-surface-3);
}

.hub-alert__icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius:
        var(--hub-radius-sm);

    background:
        rgba(255, 255, 255, 0.04);
}

.hub-alert__title {
    color:
        var(--hub-text-primary);

    font-size:
        var(--hub-font-size-sm);

    font-weight:
        var(--hub-font-extrabold);
}

.hub-alert__text {
    margin-top:
        var(--hub-space-2);

    color:
        var(--hub-text-muted);

    font-size:
        var(--hub-font-size-xs);

    line-height:
        var(--hub-line-height-relaxed);
}

.hub-alert--info {
    border-color:
        rgba(59, 130, 246, 0.18);

    background:
        rgba(59, 130, 246, 0.07);
}

.hub-alert--info
.hub-alert__icon {
    color:
        var(--hub-info);

    background:
        rgba(59, 130, 246, 0.10);
}

.hub-alert--success {
    border-color:
        rgba(34, 197, 94, 0.18);

    background:
        rgba(34, 197, 94, 0.07);
}

.hub-alert--success
.hub-alert__icon {
    color:
        var(--hub-success);

    background:
        rgba(34, 197, 94, 0.10);
}

.hub-alert--warning {
    border-color:
        rgba(245, 158, 11, 0.20);

    background:
        rgba(245, 158, 11, 0.07);
}

.hub-alert--warning
.hub-alert__icon {
    color:
        var(--hub-warning);

    background:
        rgba(245, 158, 11, 0.10);
}

.hub-alert--danger {
    border-color:
        rgba(244, 63, 94, 0.20);

    background:
        rgba(244, 63, 94, 0.07);
}

.hub-alert--danger
.hub-alert__icon {
    color:
        var(--hub-danger);

    background:
        rgba(244, 63, 94, 0.10);
}

.hub-alert--intelligence {
    border-color:
        rgba(34, 211, 238, 0.18);

    background:
        linear-gradient(
            135deg,
            rgba(34, 211, 238, 0.07),
            rgba(139, 92, 246, 0.06)
        );
}

.hub-alert--intelligence
.hub-alert__icon {
    color:
        var(--hub-intelligence);

    background:
        rgba(34, 211, 238, 0.10);
}

/*
============================================================
PROGRESSO
============================================================
*/

.hub-progress {
    width: 100%;
}

.hub-progress__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--hub-space-3);

    margin-bottom:
        var(--hub-space-2);
}

.hub-progress__label {
    color:
        var(--hub-text-secondary);

    font-size:
        var(--hub-font-size-xs);

    font-weight:
        var(--hub-font-bold);
}

.hub-progress__value {
    color:
        var(--hub-text-primary);

    font-size:
        var(--hub-font-size-xs);

    font-weight:
        var(--hub-font-extrabold);
}

.hub-progress__track {
    width: 100%;
    height: 9px;

    overflow: hidden;

    border-radius:
        var(--hub-radius-full);

    background:
        rgba(255, 255, 255, 0.065);
}

.hub-progress__bar {
    width:
        var(--hub-progress, 0%);

    height: 100%;

    border-radius: inherit;

    background:
        var(--hub-gradient-brand);

    transition:
        width
        var(--hub-duration-slow)
        var(--hub-ease-standard);
}

.hub-progress__bar--success {
    background:
        linear-gradient(
            90deg,
            #16a34a,
            #22c55e,
            #4ade80
        );
}

.hub-progress__bar--warning {
    background:
        linear-gradient(
            90deg,
            #d97706,
            #f59e0b,
            #fbbf24
        );
}

.hub-progress__bar--danger {
    background:
        linear-gradient(
            90deg,
            #e11d48,
            #f43f5e,
            #fb7185
        );
}

.hub-progress__detail {
    margin-top:
        var(--hub-space-2);

    color:
        var(--hub-text-subtle);

    font-size:
        var(--hub-font-size-xs);
}

/*
============================================================
FORMULÁRIOS
============================================================
*/

.hub-field {
    display: grid;

    gap:
        var(--hub-space-2);
}

.hub-label {
    color:
        var(--hub-text-secondary);

    font-size:
        var(--hub-font-size-xs);

    font-weight:
        var(--hub-font-extrabold);

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.hub-input,
.hub-select,
.hub-textarea {
    width: 100%;

    color:
        var(--hub-text-primary);

    outline: none;

    border:
        1px solid
        var(--hub-border-default);

    border-radius:
        var(--hub-radius-md);

    background:
        var(--hub-surface-3);

    font-family:
        var(--hub-font-family);

    transition:
        border-color
        var(--hub-duration-normal)
        var(--hub-ease-standard),

        box-shadow
        var(--hub-duration-normal)
        var(--hub-ease-standard),

        background
        var(--hub-duration-normal)
        var(--hub-ease-standard);
}

.hub-input,
.hub-select {
    min-height: 50px;

    padding:
        0
        var(--hub-space-4);
}

.hub-textarea {
    min-height: 130px;

    padding:
        var(--hub-space-4);

    resize: vertical;
}

.hub-input::placeholder,
.hub-textarea::placeholder {
    color:
        var(--hub-text-disabled);
}

.hub-input:focus,
.hub-select:focus,
.hub-textarea:focus {
    border-color:
        rgba(34, 211, 238, 0.50);

    background:
        rgba(255, 255, 255, 0.045);

    box-shadow:
        0 0 0 4px
        rgba(34, 211, 238, 0.07);
}

.hub-input[aria-invalid="true"],
.hub-select[aria-invalid="true"],
.hub-textarea[aria-invalid="true"] {
    border-color:
        rgba(244, 63, 94, 0.60);

    box-shadow:
        0 0 0 4px
        rgba(244, 63, 94, 0.07);
}

.hub-field__help {
    color:
        var(--hub-text-subtle);

    font-size:
        var(--hub-font-size-xs);

    line-height:
        var(--hub-line-height-normal);
}

.hub-field__error {
    color:
        #fb7185;

    font-size:
        var(--hub-font-size-xs);

    font-weight:
        var(--hub-font-semibold);
}

/*
============================================================
ESTADO VAZIO
============================================================
*/

.hub-empty {
    display: grid;
    place-items: center;

    min-height: 260px;

    padding:
        var(--hub-space-6);

    text-align: center;

    border:
        1px dashed
        var(--hub-border-default);

    border-radius:
        var(--hub-radius-lg);

    background:
        rgba(255, 255, 255, 0.018);
}

.hub-empty__icon {
    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

    color:
        var(--hub-text-subtle);

    border:
        1px solid
        var(--hub-border-soft);

    border-radius:
        var(--hub-radius-lg);

    background:
        var(--hub-surface-3);

    font-size: 1.5rem;
}

.hub-empty__title {
    margin-top:
        var(--hub-space-4);

    color:
        var(--hub-text-primary);

    font-size:
        var(--hub-font-size-lg);

    font-weight:
        var(--hub-font-black);
}

.hub-empty__text {
    max-width: 480px;

    margin:
        var(--hub-space-3)
        auto
        0;

    color:
        var(--hub-text-muted);

    font-size:
        var(--hub-font-size-sm);

    line-height:
        var(--hub-line-height-relaxed);
}

.hub-empty__action {
    margin-top:
        var(--hub-space-5);
}

/*
============================================================
SKELETON LOADING
============================================================
*/

.hub-skeleton {
    position: relative;

    overflow: hidden;

    border-radius:
        var(--hub-radius-sm);

    background:
        rgba(255, 255, 255, 0.055);
}

.hub-skeleton::after {
    content: "";

    position: absolute;
    inset: 0;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.07),
            transparent
        );

    animation:
        hub-skeleton-loading
        1.45s
        infinite;
}

@keyframes hub-skeleton-loading {
    100% {
        transform:
            translateX(100%);
    }
}

.hub-skeleton--text {
    width: 100%;
    height: 14px;
}

.hub-skeleton--title {
    width: 65%;
    height: 26px;
}

.hub-skeleton--circle {
    width: 48px;
    height: 48px;

    border-radius: 50%;
}

/*
============================================================
TOOLTIP
============================================================
*/

.hub-tooltip {
    position: relative;
}

.hub-tooltip::after {
    content:
        attr(data-tooltip);

    position: absolute;
    z-index: 1000;

    left: 50%;
    bottom:
        calc(100% + 9px);

    visibility: hidden;

    width: max-content;
    max-width: 240px;

    padding:
        0.55rem
        0.7rem;

    color:
        var(--hub-text-primary);

    border:
        1px solid
        var(--hub-border-default);

    border-radius:
        var(--hub-radius-sm);

    background:
        rgba(8, 13, 31, 0.98);

    box-shadow:
        var(--hub-shadow-sm);

    font-size:
        var(--hub-font-size-xs);

    line-height:
        var(--hub-line-height-normal);

    opacity: 0;

    transform:
        translate(
            -50%,
            4px
        );

    transition:
        opacity
        var(--hub-duration-fast)
        var(--hub-ease-standard),

        transform
        var(--hub-duration-fast)
        var(--hub-ease-standard),

        visibility
        var(--hub-duration-fast);
}

.hub-tooltip:hover::after,
.hub-tooltip:focus-visible::after {
    visibility: visible;

    opacity: 1;

    transform:
        translate(
            -50%,
            0
        );
}

/*
============================================================
TABELAS
============================================================
*/

.hub-table-wrapper {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid
        var(--hub-border-soft);

    border-radius:
        var(--hub-radius-lg);

    background:
        rgba(255, 255, 255, 0.02);
}

.hub-table {
    width: 100%;

    border-collapse: collapse;

    color:
        var(--hub-text-secondary);

    font-size:
        var(--hub-font-size-sm);
}

.hub-table th,
.hub-table td {
    padding:
        var(--hub-space-4);

    text-align: left;

    border-bottom:
        1px solid
        var(--hub-border-soft);
}

.hub-table th {
    color:
        var(--hub-text-subtle);

    font-size:
        var(--hub-font-size-xs);

    font-weight:
        var(--hub-font-extrabold);

    letter-spacing: 0.06em;

    text-transform: uppercase;

    background:
        rgba(255, 255, 255, 0.025);
}

.hub-table tr:last-child td {
    border-bottom: 0;
}

.hub-table tbody tr {
    transition:
        background
        var(--hub-duration-fast)
        var(--hub-ease-standard);
}

.hub-table tbody tr:hover {
    background:
        rgba(255, 255, 255, 0.025);
}

/*
============================================================
LAYOUT DE COMPONENTES
============================================================
*/

.hub-grid {
    display: grid;

    gap:
        var(--hub-space-4);
}

.hub-grid--2 {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

.hub-grid--3 {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.hub-grid--4 {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}

.hub-stack {
    display: grid;

    gap:
        var(--hub-space-4);
}

.hub-inline {
    display: flex;
    align-items: center;

    gap:
        var(--hub-space-3);
}

.hub-inline--between {
    justify-content:
        space-between;
}

@media (max-width: 900px) {
    .hub-grid--4 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .hub-grid--3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 620px) {
    .hub-card {
        padding:
            var(--hub-space-4);

        border-radius:
            var(--hub-radius-md);
    }

    .hub-grid--2,
    .hub-grid--3,
    .hub-grid--4 {
        grid-template-columns:
            1fr;
    }

    .hub-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .hub-card__footer
    .hub-btn {
        width: 100%;
    }

    .hub-table th,
    .hub-table td {
        padding:
            var(--hub-space-3);
    }
}