/* ════════════════════════════════════════════════════════════════
   APRENDER — Hub educacional (Wave 2 #18)
   Glossário (legado) + Tutoriais + Playbooks em sub-tabs.
   Tokens do Design System (--cmd-*) + cores legadas (--text-*) p/
   funcionar em tema claro e escuro.
   ════════════════════════════════════════════════════════════════ */

/* ─── Sub-tabs ─────────────────────────────────────────────────── */
.learn-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cmd-border-subtle, rgba(148, 163, 184, 0.16));
    margin: 4px 0 18px;
    padding-bottom: 0;
}
.learn-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 14px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
    margin-bottom: -1px;
}
.learn-tab svg { width: 15px; height: 15px; flex-shrink: 0; }
.learn-tab:hover { color: var(--text-secondary, #cbd5e1); }
.learn-tab.active {
    color: #a78bfa;
    border-bottom-color: #a78bfa;
}

/* ─── Painéis ──────────────────────────────────────────────────── */
.learn-panel { display: none; }
.learn-panel.active { display: block; }
.learn-panel__toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* ─── Grid de cards (Tutoriais / Playbooks) ────────────────────── */
.learn-hub-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 0 40px;
}
.learn-hub-intro {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary, #cbd5e1);
    margin: 0 0 6px;
    max-width: 760px;
}

/* ─── Card expansível (<details>) ──────────────────────────────── */
.learn-hub-card {
    background: var(--cmd-bg-surface, rgba(15, 23, 42, 0.55));
    border: 1px solid var(--cmd-border-subtle, rgba(148, 163, 184, 0.16));
    border-radius: var(--cmd-r-lg, 14px);
    overflow: hidden;
    transition: border-color .15s ease;
}
.learn-hub-card[open] { border-color: rgba(167, 139, 250, 0.40); }
.learn-hub-card:hover { border-color: rgba(167, 139, 250, 0.30); }

.learn-hub-card__head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.learn-hub-card__head::-webkit-details-marker { display: none; }

.learn-hub-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(167, 139, 250, 0.12);
    color: #a78bfa;
}
.learn-hub-card__icon svg { width: 18px; height: 18px; }

.learn-hub-card__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.learn-hub-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
}
.learn-hub-card__sub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted, #94a3b8);
}
.learn-hub-card__chevron {
    flex-shrink: 0;
    color: var(--text-muted, #94a3b8);
    transition: transform .18s ease;
}
.learn-hub-card[open] .learn-hub-card__chevron { transform: rotate(180deg); }

.learn-hub-card__body {
    padding: 2px 17px 17px 66px;
    font-size: 13px;
    line-height: 1.62;
    color: var(--text-secondary, #cbd5e1);
}
.learn-hub-card__body p { margin: 0 0 10px; }
.learn-hub-card__body ul, .learn-hub-card__body ol {
    margin: 0 0 12px;
    padding-left: 18px;
}
.learn-hub-card__body li { margin-bottom: 5px; }
.learn-hub-card__body strong { color: var(--text-primary, #f1f5f9); font-weight: 700; }
.learn-hub-card__body code {
    font-family: var(--cmd-ff-mono, ui-monospace, monospace);
    font-size: 12px;
    background: rgba(148, 163, 184, 0.14);
    padding: 1px 6px;
    border-radius: 5px;
    color: #c4b5fd;
}

/* tabela leve (ex.: Sharpe vs Sortino vs Calmar) */
.learn-hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin: 4px 0 12px;
}
.learn-hub-table th, .learn-hub-table td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid var(--cmd-border-subtle, rgba(148, 163, 184, 0.14));
    vertical-align: top;
}
.learn-hub-table th {
    color: var(--text-muted, #94a3b8);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.learn-hub-table td:first-child { color: var(--text-primary, #f1f5f9); font-weight: 600; }

/* callout / dica */
.learn-hub-note {
    border-left: 3px solid #a78bfa;
    background: rgba(167, 139, 250, 0.07);
    padding: 9px 13px;
    border-radius: 0 8px 8px 0;
    margin: 4px 0 12px;
    font-size: 12.5px;
    color: var(--text-secondary, #cbd5e1);
}
.learn-hub-note--warn {
    border-left-color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
}

/* botão de cross-link p/ outra aba */
.learn-hub-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.learn-hub-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(167, 139, 250, 0.10);
    border: 1px solid rgba(167, 139, 250, 0.30);
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.learn-hub-link:hover {
    background: rgba(167, 139, 250, 0.20);
    border-color: rgba(167, 139, 250, 0.55);
}
.learn-hub-link svg { width: 13px; height: 13px; }

@media (max-width: 720px) {
    .learn-hub-card__body { padding-left: 17px; }
    .learn-tab { padding: 9px 10px; font-size: 12px; }
}