/* ═══════════════════════════════════════════════════════════════
   IA Preparatória v2.0 — Painel do Aluno | CSS Mobile-First
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
    --ia-primary:    #1a56db;
    --ia-primary-h:  #1648c0;
    --ia-primary-lt: #eff6ff;
    --ia-accent:     #3b82f6;
    --ia-text:       #1e293b;
    --ia-muted:      #64748b;
    --ia-border:     #e2e8f0;
    --ia-bg:         #f8fafc;
    --ia-surface:    #ffffff;
    --ia-green:      #16a34a;
    --ia-green-lt:   #dcfce7;
    --ia-red:        #dc2626;
    --ia-red-lt:     #fee2e2;
    --ia-yellow:     #d97706;
    --ia-yellow-lt:  #fef3c7;
    --ia-radius:     10px;
    --ia-radius-sm:  6px;
    --ia-shadow:     0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.05);
    --ia-font:       system-ui,-apple-system,'Segoe UI',sans-serif;
    --ia-tr:         .2s ease;
}

/* ── Reset escopo ─────────────────────────────────────────────── */
#fdc-app, #fdc-app * { box-sizing: border-box; }
#fdc-app { font-family: var(--ia-font); color: var(--ia-text); line-height: 1.6; }

/* ── Dark Mode ────────────────────────────────────────────────
   Escopado a #fdc-app (nunca ao resto da página do WordPress).
   Redefine só fundo/superfície/texto/borda e as variantes "-lt"
   (tons claros usados como fundo de badge/alerta) — NUNCA
   --ia-primary/--ia-primary-h, porque essas carregam a identidade
   visual do tema do franqueado (ver seletor de nicho) e devem
   continuar as mesmas independente do modo claro/escuro.
   Evita preto puro (#000) por conforto de leitura noturna. */
#fdc-app[data-tema-modo="escuro"][data-fdc-tema] {
    --ia-text:       #e5e7eb;
    --ia-muted:      #9ca3af;
    --ia-border:     #33333f;
    --ia-bg:         #121212;
    --ia-surface:    #1c1c28;
    --ia-primary-lt: rgba(26,86,219,.18);
    --ia-green-lt:   rgba(22,163,74,.18);
    --ia-red-lt:     rgba(220,38,38,.20);
    --ia-yellow-lt:  rgba(217,119,6,.20);
    --ia-shadow:     0 1px 3px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.25);
}

/* Botão de alternância — discreto, no topbar */
.fdc-btn-dark-toggle {
    background: transparent; border: none; cursor: pointer;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ia-muted); font-size: 15px;
    transition: background var(--ia-tr), color var(--ia-tr);
    flex-shrink: 0; margin-left: auto;
}
.fdc-btn-dark-toggle:hover { background: var(--ia-border); color: var(--ia-text); }

/* ── Meu Perfil — drawer lateral ──────────────────────────────── */
.fdc-perfil-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 10000; opacity: 0; transition: opacity .25s ease;
}
.fdc-perfil-overlay--visivel { opacity: 1; }

.fdc-perfil-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(320px, 88vw);
    background: var(--ia-surface); color: var(--ia-text);
    z-index: 10001; box-shadow: -4px 0 24px rgba(0,0,0,.25);
    transform: translateX(100%); transition: transform .28s ease;
    display: flex; flex-direction: column;
}
.fdc-perfil-drawer--aberto { transform: translateX(0); }

.fdc-perfil-drawer-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--ia-border);
    font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.fdc-perfil-drawer-topo button {
    background: transparent; border: none; cursor: pointer;
    color: var(--ia-muted); font-size: 16px; padding: 4px;
}
.fdc-perfil-drawer-topo button:hover { color: var(--ia-text); }

.fdc-perfil-drawer-corpo { padding: 20px; overflow-y: auto; }

.fdc-perfil-campo {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--ia-border);
    color: var(--ia-primary); font-size: 16px;
}
.fdc-perfil-campo-label {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .4px; color: var(--ia-muted); margin-bottom: 2px;
}
.fdc-perfil-campo-valor {
    display: block; font-size: 14px; font-weight: 600; color: var(--ia-text);
    word-break: break-word;
}

.fdc-perfil-sair {
    display: flex; align-items: center; gap: 8px;
    margin-top: 24px; padding: 11px 14px; border-radius: var(--ia-radius-sm);
    background: var(--ia-red-lt); color: #dc2626 !important;
    font-weight: 600; font-size: 13px; text-decoration: none !important;
    justify-content: center;
}

/* ── Widget Flutuante do Tutor Virtual ────────────────────────────
   Container único e persistente — sobrevive à troca de aba/tópico,
   então o áudio/vídeo não é interrompido ao navegar pelo painel.
   Desktop: canto inferior direito. Mobile: sobe um pouco (80px) pra
   não colidir com uma eventual barra de navegação fixa no rodapé. */
.fdc-tutor-widget {
    position: fixed; bottom: 20px; right: 20px;
    width: 320px; max-width: calc(100vw - 32px);
    z-index: 9000;
    background: var(--ia-surface);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
    overflow: hidden;
    transform: translateY(24px) scale(.94);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    pointer-events: none;
}
.fdc-tutor-widget--aberto { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.fdc-tutor-widget-topo {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 8px 10px 14px;
    background: var(--ia-primary); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.fdc-tutor-widget-topo span { flex: 1; }
.fdc-tutor-widget-topo button {
    background: transparent; border: none; cursor: pointer;
    color: rgba(255,255,255,.85); padding: 6px; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: background .15s ease, color .15s ease;
}
.fdc-tutor-widget-topo button:hover { background: rgba(255,255,255,.15); color: #fff; }

.fdc-tutor-video-wrap {
    max-height: min(420px, 65vh);
    overflow-y: auto;
    padding: 14px;
}
/* PiP: minimizado colapsa pra só a barra de título, sem sumir de vez
   (diferente do fechar, que descarta o player) */
.fdc-tutor-widget--minimizado .fdc-tutor-video-wrap { display: none; }

@media (max-width: 768px) {
    /* ═══════════════════════════════════════════════════════════════
       TUTOR VIRTUAL MOBILE — mesmo widget de sempre, só docado no topo
       ═══════════════════════════════════════════════════════════════
       Histórico: tentamos uma barra fina permanente (avatar+controles
       espremidos numa linha só), mas isso exigia reconstruir o layout
       inteiro do zero e trouxe bugs (avatar/controles sumindo, cores
       ilegíveis). Voltamos pro caminho mais simples e robusto: o MESMO
       card de sempre (mesmas cores, mesmo layout coluna, mesmo botão
       de minimizar que JÁ funciona — nada de JS mudou), só trocando a
       borda de ancoragem de "canto inferior direito" pra "topo, largura
       cheia". Minimizado, ele vira a barrinha azul fina que já existia
       (.fdc-tutor-widget--minimizado já escondia .fdc-tutor-video-wrap
       — regra antiga, sem alteração); expandido, cobre o topo da tela
       como cobria o canto antes — comportamento aceito, já que agora
       minimizar é só um toque no mesmo lugar de sempre.
       Desktop (>768px) continua exatamente como já era, sem alteração.
    */
    :root { --fdc-tutorbar-minimizada: 46px; }

    .fdc-tutor-widget {
        top: 0; left: 0; right: 0; bottom: auto;
        width: 100%; max-width: none;
        border-radius: 0;
        transform: translateY(-24px) scale(.98); /* entra por cima agora, não por baixo */
    }
    .fdc-tutor-widget--aberto { transform: translateY(0) scale(1); }

    /* Só compensa o espaço quando MINIMIZADO (barrinha fina permanente)
       — expandido, ele cobre o topo da tela de propósito, igual cobria
       o canto antes; a pessoa já sabe que é só tocar em minimizar. */
    #fdc-app:has(.fdc-tutor-widget--minimizado) {
        padding-top: calc(var(--fdc-tutorbar-minimizada) + 8px);
    }
}

/* ── Highlight de palavra sincronizado com a narração ─────────────
   Roxo sólido de propósito (#7c3aed) — cor que não existe em nenhum
   outro grifo da apostila (amarelo/azul teóricos), então nunca gera
   ambiguidade visual sobre "isso é grifo do professor ou é o tutor
   lendo agora". Texto branco por cima pro contraste ficar alto mesmo
   em cima de fundo já colorido de outro grifo. */
.fdc-palavra--ativa {
    /* CORREÇÃO DE BUG: "padding: 0 2px" mudava a largura da palavra toda
       vez que o highlight trocava (várias vezes por segundo durante a
       narração) — isso reflui o parágrafo inteiro ao redor, porque o
       navegador recalcula onde cada linha quebra. Em telas estreitas
       (mobile), o ponto de quebra muda a cada palavra destacada, e isso
       cascateia pro resto da apostila (efeito "pulando"/quebrando o
       layout visto no celular). box-shadow com espalhamento pinta por
       cima do texto sem participar do cálculo de layout — visual quase
       idêntico (o "halo" ao redor da palavra), zero reflow.

       SEGUNDA CORREÇÃO: mesmo sem reflow, o halo ficava com aparência de
       "pílula estourada" — bem mais alto que o texto. Causa: um <span>
       inline herda o line-height do parágrafo (1.7 em
       .fdc-plano-exp-conteudo) pro cálculo da caixa que o box-shadow
       desenha ao redor — em telas largas isso quase não se nota (a
       palavra tem bastante espaço vazio ao redor de qualquer forma),
       mas em mobile fica muito evidente. Reduzir o line-height só desta
       palavra ativa não afeta a altura da linha inteira nem causa
       reflow (as palavras vizinhas continuam com 1.7 e são elas que
       determinam a altura real da linha) — só deixa o halo mais colado
       ao texto de verdade. */
    background: #7c3aed !important;
    color: #fff !important;
    border-radius: 3px;
    box-shadow: 0 0 0 3px #7c3aed;
    line-height: 1.3;
    transition: background .1s ease;
}

.fdc-tutor-widget-autoscroll {
    background: transparent; border: none; cursor: pointer;
    color: rgba(255,255,255,.5); padding: 6px; font-size: 12px;
    border-radius: 6px; transition: color .15s ease, background .15s ease;
}
.fdc-tutor-widget-autoscroll:hover { background: rgba(255,255,255,.15); }
.fdc-tutor-widget-autoscroll--ativo { color: #fff; }

@media (max-width: 768px) {
    /* Halo um pouco mais discreto no mobile — telas estreitas têm menos
       espaço em branco ao redor do texto, então o mesmo espalhamento que
       passa despercebido no desktop chama muito mais atenção aqui. */
    .fdc-palavra--ativa { box-shadow: 0 0 0 2px #7c3aed; }
}

/* ── Temas por Nicho ──────────────────────────────────────────────
   "padrao" = os valores originais já definidos em :root, então não
   precisa de bloco próprio. "custom" tem as cores exatas do
   franqueado injetadas via <style> inline (class-fdc-shortcode.php),
   porque são hex arbitrários que não cabem num preset fixo aqui. */
#fdc-app[data-fdc-tema="saude"] {
    --ia-primary:    #10b981;
    --ia-primary-h:  #0d9668;
    --ia-primary-lt: #ecfdf5;
    --ia-accent:     #0ea5e9;
}
#fdc-app[data-fdc-tema="tecnico"] {
    --ia-primary:    #f59e0b;
    --ia-primary-h:  #d97e06;
    --ia-primary-lt: #fffbeb;
    --ia-accent:     #ea580c;
}

/* ── Barra de Preview do Franqueado ──────────────────────────────
   Fica FORA de #fdc-app (injetada antes dele), então usa cores
   fixas em vez de var(--ia-*) — não depende do tema de nicho nem
   do dark mode do painel, que só se aplicam dentro de #fdc-app. */
.fdc-preview-banner {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    flex-wrap: wrap; text-align: center;
    background: #4338ca; color: #eef2ff;
    padding: 10px 16px; font-size: 13px; font-weight: 600;
    position: sticky; top: 0; z-index: 9999;
}
.fdc-preview-banner-voltar {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.15); color: #fff !important;
    padding: 5px 12px; border-radius: 999px; font-size: 12px;
    text-decoration: none !important; flex-shrink: 0;
    transition: background .2s ease;
}
.fdc-preview-banner-voltar:hover { background: rgba(255,255,255,.28); }

/* ═══════════════════════════════════════════════════════════════
   COMPONENTES BASE
   ═══════════════════════════════════════════════════════════════ */

.fdc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: none; border-radius: var(--ia-radius-sm);
    font-family: var(--ia-font); font-size: 15px; font-weight: 600;
    padding: 12px 18px; cursor: pointer;
    transition: background var(--ia-tr), transform .1s, box-shadow var(--ia-tr);
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.fdc-btn:active  { transform: scale(.97); }
.fdc-btn:disabled { opacity: .5; cursor: not-allowed; }
.fdc-btn--primary  { background: var(--ia-primary); color: #fff; }
.fdc-btn--primary:hover { background: var(--ia-primary-h); }
.fdc-btn--outline  { background: transparent; border: 1.5px solid var(--ia-border); color: var(--ia-text); }
.fdc-btn--outline:hover { border-color: var(--ia-primary); color: var(--ia-primary); }
.fdc-btn--success  { background: var(--ia-green); color: #fff; }
.fdc-btn--full     { width: 100%; }
.fdc-btn--lg       { font-size: 16px; padding: 14px 22px; }
.fdc-btn--sm       { font-size: 13px; padding: 8px 13px; }
.fdc-btn--acessar  {
    display: inline-block; background: var(--ia-primary); color: #fff !important;
    padding: 10px 16px; border-radius: var(--ia-radius-sm); font-size: 14px;
    font-weight: 600; margin-top: 12px;
}

.fdc-aviso {
    background: var(--ia-surface); border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius); padding: 28px 20px;
    display: flex; gap: 14px; align-items: flex-start;
    box-shadow: var(--ia-shadow); max-width: 480px; margin: 20px auto;
}
.fdc-aviso--info     { border-color: #bfdbfe; background: var(--ia-primary-lt); }
.fdc-aviso--bloqueado{ border-color: #fecaca; background: var(--ia-red-lt); }
.fdc-aviso-icon      { font-size: 32px; flex-shrink: 0; }
.fdc-aviso p         { margin: 0 0 10px; font-size: 14px; }
.fdc-aviso p:last-child { margin: 0; }

.fdc-spinner, .fdc-spinner-grande {
    border-radius: 50%; animation: fdc-spin .8s linear infinite;
    border-style: solid; border-color: var(--ia-border);
    border-top-color: var(--ia-primary); display: inline-block;
}
.fdc-spinner        { width: 22px; height: 22px; border-width: 3px; }
.fdc-spinner-grande { width: 48px; height: 48px; border-width: 4px; margin-bottom: 14px; }
@keyframes fdc-spin { to { transform: rotate(360deg); } }

.fdc-loading-bloco {
    display: flex; flex-direction: column; align-items: center;
    padding: 40px 20px; color: var(--ia-muted); font-size: 14px;
    gap: 8px; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   VITRINE
   ═══════════════════════════════════════════════════════════════ */

.fdc-vitrine         { max-width: 700px; margin: 0 auto; padding: 8px 0 32px; }
.fdc-vitrine-header  { margin-bottom: 22px; }
.fdc-vitrine-header h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.fdc-vitrine-header p  { color: var(--ia-muted); margin: 0; font-size: 14px; }
.fdc-cursos-grid     { display: flex; flex-direction: column; gap: 12px; }
.fdc-curso-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--ia-surface); border: 1.5px solid var(--ia-border);
    border-radius: var(--ia-radius); padding: 16px; text-decoration: none !important;
    color: var(--ia-text) !important; box-shadow: var(--ia-shadow);
    transition: border-color var(--ia-tr), box-shadow var(--ia-tr), transform var(--ia-tr);
}
.fdc-curso-card:hover {
    border-color: var(--ia-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,.1), var(--ia-shadow);
    transform: translateY(-1px);
}
.fdc-curso-thumb  { flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--ia-radius-sm); overflow: hidden; }
.fdc-curso-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fdc-curso-info   { flex: 1; min-width: 0; }
.fdc-curso-nome   { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.fdc-curso-disciplinas { font-size: 12px; color: var(--ia-muted); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════ */

.fdc-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0 16px; border-bottom: 1px solid var(--ia-border);
    margin-bottom: 16px; flex-wrap: wrap;
}
.fdc-btn-voltar {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ia-bg); border: 1.5px solid var(--ia-border);
    border-radius: var(--ia-radius-sm); padding: 8px 14px;
    font-size: 13px; font-weight: 600; color: var(--ia-text) !important;
    text-decoration: none !important; flex-shrink: 0;
    transition: border-color var(--ia-tr), color var(--ia-tr);
}
.fdc-btn-voltar:hover { border-color: var(--ia-primary); color: var(--ia-primary) !important; }
.fdc-curso-ativo {
    font-size: 14px; font-weight: 700; color: var(--ia-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: calc(100% - 120px);
}

/* ═══════════════════════════════════════════════════════════════
   PAINEL + TABS — SCROLL HORIZONTAL MOBILE-FIRST
   ═══════════════════════════════════════════════════════════════ */

.fdc-painel { max-width: 700px; margin: 0 auto; padding: 8px 0 40px; }

/* Padding lateral sutil no mobile — no desktop o wrapper já fica centralizado
   com margem (max-width:700px + margin:auto), então o padding:0 horizontal
   da base nunca encosta na borda. No mobile, sem isso, o conteúdo fica
   colado nas duas extremidades da tela. */
@media (max-width: 768px) {
    .fdc-painel { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/*
 * Mobile-first: flex com scroll horizontal nativo.
 * Barra de rolagem oculta em todos os navegadores.
 * Cada aba fica com largura mínima (white-space:nowrap) e não quebra.
 *
 * >768px (desktop/tablet): comportamento original, sem alteração.
 * ≤768px (mobile): vira barra de navegação fixa no rodapé — ver bloco
 * "TAB BAR MOBILE" mais abaixo, que sobrescreve só o necessário.
 */
.fdc-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
    gap: 4px;
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius);
    padding: 4px;
    margin-bottom: 20px;
    box-shadow: var(--ia-shadow);
}
.fdc-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.fdc-tab {
    flex: 0 0 auto;           /* não encolhe — scroll horizontal cuida do overflow */
    white-space: nowrap;
    background: none; border: none;
    border-radius: var(--ia-radius-sm);
    padding: 10px 14px;
    font-family: var(--ia-font); font-size: 13px; font-weight: 600;
    color: var(--ia-muted); cursor: pointer;
    transition: background var(--ia-tr), color var(--ia-tr);
    -webkit-tap-highlight-color: transparent;
}
.fdc-tab:hover:not(.active) { background: var(--ia-bg); color: var(--ia-text); }
.fdc-tab.active {
    background: linear-gradient(135deg, var(--ia-primary) 0%, var(--ia-accent) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* ═══════════════════════════════════════════════════════════════
   TAB BAR MOBILE — nav.fdc-tabs fixada no rodapé (≤768px)
   ═══════════════════════════════════════════════════════════════
   Mesmos elementos <button class="fdc-tab" data-tab="...">, sem
   duplicação de markup e sem JS extra: o clique já é delegado no
   document (ver fdc-painel.js), então só reposicionar via CSS é
   suficiente — o franqueado não precisa mais de um plugin de
   terceiros (tipo UnoDock) pra isso, e a barra herda as cores do
   tema (--ia-primary/--ia-accent) automaticamente, porque são os
   MESMOS elementos que já existem no topo, não uma cópia.

   --fdc-tabbar-altura fica disponível pra qualquer outro elemento
   fixo (widget do Tutor, toast) se ajustar sem precisar recalcular
   o valor em cada lugar — ver os ajustes logo depois deste bloco.
*/
@media (max-width: 768px) {
    :root { --fdc-tabbar-altura: 60px; }

    /* Compensa a barra fixa pra ela nunca esconder o final do conteúdo
       (últimos botões de uma aula, "Ver Outros Tópicos" etc.) nem os
       botões inferiores do Tutor Virtual. */
    #fdc-app {
        padding-bottom: calc(var(--fdc-tabbar-altura) + 16px + env(safe-area-inset-bottom, 0px));
    }

    .fdc-tabs {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        z-index: 9999;
        margin-bottom: 0;
        border: none;
        border-top: 1px solid var(--ia-border);
        border-radius: 0;
        box-shadow: 0 -2px 14px rgba(0,0,0,.10);
        overflow-x: visible;               /* nada de scroll — os 6 cabem distribuídos */
        justify-content: space-around;
        align-items: stretch;
        height: var(--fdc-tabbar-altura);
        padding: 2px 2px calc(2px + env(safe-area-inset-bottom, 0px));
        /* iOS/Android costumam recortar a área de toque na "safe area"
           (home indicator) — o padding acima empurra o conteúdo pra
           cima dela sem deformar a altura visual da barra. */
    }

    .fdc-tab {
        flex: 1 1 0;                       /* os 6 dividem o espaço igualmente */
        display: flex;
        flex-direction: column;            /* empilha ícone (se houver) acima do texto */
        align-items: center;
        justify-content: center;
        gap: 2px;
        white-space: normal;
        text-align: center;
        font-size: 10.5px;
        line-height: 1.15;
        padding: 4px 2px;
        border-radius: 10px;
    }
    /* O label já vem com um <i class="fa-solid ..."> antes do texto
       (ver labels_resolvidos() em class-fdc-produto.php) — isso
       aumenta o ícone e garante que ele fique na linha de cima. */
    .fdc-tab i:first-child { display: block; font-size: 17px; margin-bottom: 1px; }

    /* Estilo "app nativo": aba ativa destaca cor do ícone/texto em vez
       de pílula com fundo gradiente (que funciona melhor no formato
       horizontal do desktop) — convenção de tab bar mobile iOS/Android. */
    .fdc-tab.active {
        background: none;
        color: var(--ia-primary);
        box-shadow: none;
    }
    .fdc-tab:hover:not(.active) { background: none; color: var(--ia-muted); }
}


.fdc-tab-painel { display: none; animation: fdc-fade-in .25s ease; }
.fdc-tab-painel.active { display: block; }
@keyframes fdc-fade-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ── Card genérico ────────────────────────────────────────────── */
.fdc-card {
    background: var(--ia-surface); border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius); padding: 20px;
    box-shadow: var(--ia-shadow); margin-bottom: 16px;
}
.fdc-card-titulo { font-size: 16px; font-weight: 700; margin: 0 0 16px; }

/* ── Campos ───────────────────────────────────────────────────── */
.fdc-campo-grupo { margin-bottom: 14px; }
.fdc-label       { display: block; font-size: 13px; font-weight: 600; color: var(--ia-text); margin-bottom: 5px; }
.fdc-obrigatorio { color: var(--ia-red); }
.fdc-opcional    { color: var(--ia-muted); font-weight: 400; }
.fdc-campo-dica  { font-size: 12px; color: var(--ia-muted); margin: 5px 0 0; }

.fdc-select {
    width: 100%; background: var(--ia-bg); border: 1.5px solid var(--ia-border);
    border-radius: var(--ia-radius-sm); color: var(--ia-text);
    font-family: var(--ia-font); font-size: 15px; padding: 11px 36px 11px 13px;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    outline: none; cursor: pointer;
    transition: border-color var(--ia-tr), box-shadow var(--ia-tr);
}
.fdc-select:focus { border-color: var(--ia-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.12); }
.fdc-select--sm   { padding: 8px 32px 8px 11px; font-size: 13px; }

.fdc-input {
    width: 100%; background: var(--ia-bg); border: 1.5px solid var(--ia-border);
    border-radius: var(--ia-radius-sm); color: var(--ia-text);
    font-family: var(--ia-font); font-size: 15px; padding: 11px 13px;
    outline: none; transition: border-color var(--ia-tr), box-shadow var(--ia-tr);
}
.fdc-input:focus       { border-color: var(--ia-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.12); }
.fdc-input::placeholder { color: var(--ia-muted); }

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING
   ═══════════════════════════════════════════════════════════════ */

.fdc-onboarding { max-width: 640px; margin: 0 auto; padding: 8px 0 40px; }
.fdc-onboarding-loading { text-align: center; padding: 60px 20px; color: var(--ia-muted); }
.fdc-onboarding-loading p { margin: 0 0 6px; font-size: 15px; }
.fdc-onboarding-conteudo {
    background: var(--ia-surface); border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius); padding: 28px 22px;
    box-shadow: var(--ia-shadow); animation: fdc-fade-in .4s ease;
}
.fdc-onboarding-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.fdc-onboarding-icon   { font-size: 40px; }
.fdc-onboarding-header h2 { font-size: 20px; font-weight: 800; margin: 0; }
.fdc-onboarding-texto  { font-size: 15px; line-height: 1.75; margin-bottom: 22px; }
.fdc-onboarding-texto p { margin: 0 0 14px; }
.fdc-onboarding-disciplinas { margin: 0 0 24px; }
.fdc-onboarding-disciplinas h4 {
    font-size: 13px; color: var(--ia-muted); margin: 0 0 10px;
    text-transform: uppercase; letter-spacing: .05em;
}
.fdc-disc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fdc-disc-chip  {
    background: var(--ia-primary-lt); color: var(--ia-primary);
    border: 1px solid #bfdbfe; border-radius: 20px;
    padding: 5px 13px; font-size: 13px; font-weight: 600;
}
.fdc-onboarding-erro {
    text-align: center; padding: 40px 20px;
    background: var(--ia-red-lt); border: 1px solid #fecaca;
    border-radius: var(--ia-radius);
}
.fdc-onboarding-erro span { font-size: 36px; display: block; margin-bottom: 10px; }
.fdc-onboarding-erro p { margin: 0 0 16px; color: var(--ia-red); }

/* ═══════════════════════════════════════════════════════════════
   ABA 1: SIMULADOS
   ═══════════════════════════════════════════════════════════════ */

.fdc-questao { background: var(--ia-surface); border: 1px solid var(--ia-border); border-radius: var(--ia-radius); overflow: hidden; box-shadow: var(--ia-shadow); animation: fdc-fade-in .3s ease; }
.fdc-q-header { background: linear-gradient(135deg,#0f172a,#1e3a5f); color: #fff; padding: 12px 18px; font-size: 12px; line-height: 1.5; }
.fdc-q-banca  { font-weight: 700; font-size: 13px; color: #93c5fd; margin-bottom: 2px; }
.fdc-q-fonte  { opacity: .7; }
.fdc-q-enunciado { padding: 20px 18px; font-size: 15.5px; line-height: 1.75; border-bottom: 1px solid var(--ia-border); }
.fdc-alternativas { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }

.fdc-alt {
    display: flex; align-items: flex-start; gap: 12px; width: 100%;
    background: var(--ia-bg); border: 2px solid var(--ia-border);
    border-radius: var(--ia-radius-sm); padding: 13px 14px;
    font-family: var(--ia-font); font-size: 14.5px; font-weight: 400;
    color: var(--ia-text); cursor: pointer; text-align: left; line-height: 1.55;
    transition: border-color var(--ia-tr), background var(--ia-tr), transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.fdc-alt:hover:not(:disabled):not(.fdc-alt--bloqueada) { border-color: var(--ia-primary); background: var(--ia-primary-lt); }
.fdc-alt:active:not(:disabled) { transform: scale(.99); }
.fdc-alt--bloqueada { cursor: default; pointer-events: none; }

.fdc-alt-letra {
    min-width: 30px; height: 30px; border-radius: 50%;
    background: var(--ia-border); display: flex; align-items: center;
    justify-content: center; font-size: 13px; font-weight: 700;
    flex-shrink: 0; transition: background var(--ia-tr), color var(--ia-tr);
    color: var(--ia-text);
}
.fdc-alt-texto { flex: 1; }
.fdc-alt-icone { flex-shrink: 0; font-size: 18px; line-height: 1; opacity: 0; transition: opacity var(--ia-tr); }

.fdc-alt--selecionada                   { border-color: var(--ia-primary); background: var(--ia-primary-lt); }
.fdc-alt--selecionada .fdc-alt-letra { background: var(--ia-primary); color: #fff; }
.fdc-alt--certa                         { border-color: var(--ia-green); background: var(--ia-green-lt); }
.fdc-alt--certa .fdc-alt-letra       { background: var(--ia-green); color: #fff; }
.fdc-alt--certa .fdc-alt-icone       { opacity: 1; }
.fdc-alt--errada                        { border-color: var(--ia-red); background: var(--ia-red-lt); }
.fdc-alt--errada .fdc-alt-letra      { background: var(--ia-red); color: #fff; }
.fdc-alt--errada .fdc-alt-icone      { opacity: 1; }

.fdc-q-footer   { padding: 14px 16px; border-top: 1px solid var(--ia-border); }
.fdc-resultado  { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--ia-radius-sm); font-weight: 700; font-size: 15px; margin: 0 16px 4px; animation: fdc-fade-in .3s ease; }
.fdc-resultado--acerto { background: var(--ia-green-lt); color: var(--ia-green); border: 1.5px solid #bbf7d0; }
.fdc-resultado--erro   { background: var(--ia-red-lt);   color: var(--ia-red);   border: 1.5px solid #fecaca; }
.fdc-resultado-icon    { font-size: 22px; }

.fdc-explicacao-wrap { padding: 0 16px 14px; }
.fdc-explicacao-box  { background: var(--ia-bg); border: 1px solid var(--ia-border); border-radius: var(--ia-radius-sm); padding: 16px; font-size: 14px; line-height: 1.7; color: var(--ia-text); animation: fdc-fade-in .25s ease; }
.fdc-explicacao-titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ia-primary); margin-bottom: 8px; }
.fdc-q-acoes { display: flex; gap: 10px; padding: 12px 16px; }
.fdc-q-acoes .fdc-btn { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   ABA 2: CHAT
   ═══════════════════════════════════════════════════════════════ */

.fdc-chat-wrap    { display: flex; flex-direction: column; gap: 0; }
.fdc-chat-contexto { padding: 0 0 12px; }
.fdc-chat-msgs {
    min-height: 280px; max-height: 440px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px; background: var(--ia-bg);
    border: 1px solid var(--ia-border); border-radius: var(--ia-radius); margin-bottom: 12px;
}
.fdc-chat-msgs::-webkit-scrollbar { width: 4px; }
.fdc-chat-msgs::-webkit-scrollbar-thumb { background: var(--ia-border); border-radius: 2px; }
.fdc-chat-msg      { display: flex; gap: 10px; animation: fdc-fade-in .2s ease; }
.fdc-chat-msg--user{ flex-direction: row-reverse; }
.fdc-chat-avatar   { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.fdc-chat-msg--ia   .fdc-chat-avatar { background: var(--ia-primary-lt); }
.fdc-chat-msg--user .fdc-chat-avatar { background: #f1f5f9; }
.fdc-chat-balao    { max-width: 82%; padding: 11px 14px; font-size: 14.5px; line-height: 1.65; border-radius: 12px; }
.fdc-chat-msg--ia   .fdc-chat-balao  { background: var(--ia-surface); border: 1px solid var(--ia-border); border-top-left-radius: 4px; }
.fdc-chat-msg--user .fdc-chat-balao  { background: var(--ia-primary); color: #fff; border-top-right-radius: 4px; }
.fdc-cursor::after  { content: '▋'; color: var(--ia-primary); animation: fdc-blink .7s step-end infinite; }
@keyframes fdc-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.fdc-chat-input-wrap {
    display: flex; gap: 8px; align-items: flex-end;
    background: var(--ia-surface); border: 1.5px solid var(--ia-border);
    border-radius: var(--ia-radius); padding: 10px 12px;
    transition: border-color var(--ia-tr), box-shadow var(--ia-tr);
}
.fdc-chat-input-wrap:focus-within { border-color: var(--ia-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.1); }
.fdc-chat-input  { flex: 1; background: none; border: none; outline: none; resize: none; font-family: var(--ia-font); font-size: 15px; color: var(--ia-text); line-height: 1.5; max-height: 120px; }
.fdc-chat-input::placeholder { color: var(--ia-muted); }
.fdc-btn--enviar { width: 42px; height: 42px; padding: 0; font-size: 17px; border-radius: var(--ia-radius-sm); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   ABA 3: PLANO DE ESTUDO
   ═══════════════════════════════════════════════════════════════ */

.fdc-plano-disciplina-header {
    font-size: 15px; font-weight: 700; color: var(--ia-text);
    padding: 4px 0 14px;
    display: flex; align-items: center; gap: 8px;
}
.fdc-plano-disciplina-header span { color: var(--ia-primary); }

/* Grid de cards de tópicos */
.fdc-plano-topicos-grid {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}

.fdc-topico-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--ia-surface); border: 2px solid var(--ia-border);
    border-radius: var(--ia-radius); padding: 15px 16px;
    cursor: pointer; width: 100%; text-align: left;
    font-family: var(--ia-font); font-size: 15px; font-weight: 600;
    color: var(--ia-text); line-height: 1.4;
    transition: border-color var(--ia-tr), background var(--ia-tr), transform .1s;
    -webkit-tap-highlight-color: transparent;
    animation: fdc-fade-in .25s ease;
}
.fdc-topico-card:hover:not(.topico-estudado) {
    border-color: var(--ia-primary);
    background: var(--ia-primary-lt);
    transform: translateY(-1px);
}
.fdc-topico-card:active:not(.topico-estudado) { transform: scale(.98); }

/* Número do tópico */
.fdc-topico-num {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--ia-primary-lt); color: var(--ia-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    transition: background var(--ia-tr), color var(--ia-tr);
}
.fdc-topico-card:hover:not(.topico-estudado) .fdc-topico-num {
    background: var(--ia-primary); color: #fff;
}

.fdc-topico-titulo { flex: 1; }

/* ── Gamificação: card já estudado ───────────────────────────── */
.fdc-topico-card.topico-estudado {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: .9;
    cursor: default;
    border-color: var(--ia-green);
    background: var(--ia-green-lt);
}
.fdc-topico-card.topico-estudado:hover {
    opacity: 1;
    filter: brightness(0.95);
    transform: translateY(-1px);
}
.fdc-topico-card.topico-estudado .fdc-topico-titulo {
    text-decoration: line-through;
    color: var(--ia-muted);
}
.fdc-topico-card.topico-estudado .fdc-topico-num {
    background: var(--ia-green); color: #fff;
}
.fdc-topico-estudado-badge {
    font-size: 18px; flex-shrink: 0;
}

/* ── Botão REVISAR — visual moderno ────────── */
.fdc-topico-card .fdc-btn-revisar,
button.fdc-btn-revisar {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px 14px !important;
    background: #ffffff !important;
    color: #16a34a !important;
    border: 1.5px solid #16a34a !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 4px rgba(22,163,74,.15) !important;
    font-family: system-ui,-apple-system,'Segoe UI',sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: .2px;
    white-space: nowrap;
    text-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .1s ease;
}
.fdc-topico-card .fdc-btn-revisar:hover,
button.fdc-btn-revisar:hover {
    background: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(22,163,74,.35) !important;
    transform: translateY(-1px);
}
.fdc-topico-card .fdc-btn-revisar:active,
button.fdc-btn-revisar:active {
    transform: scale(.96);
    box-shadow: none !important;
}

/* ── Badge de modo revisão ───────────────────────────────────── */
.fdc-apos-revisao-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .3px;
}

/* ── Card em modo revisão: borda verde sutil ─────────────────── */
.fdc-plano-explicacao-card.fdc-modo-revisao {
    border-color: var(--ia-green);
}
.fdc-plano-explicacao-card.fdc-modo-revisao .fdc-plano-exp-header {
    background: linear-gradient(135deg, #064e3b, #065f46);
}

/* ── Área de explicação expandida ────────────────────────────── */
.fdc-plano-explicacao-card {
    background: var(--ia-surface); border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius); overflow: hidden;
    box-shadow: var(--ia-shadow); animation: fdc-fade-in .3s ease;
    margin-bottom: 16px;
}
.fdc-plano-exp-header {
    background: linear-gradient(135deg,#0f172a,#1e3a5f);
    color: #fff; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fdc-plano-exp-titulo  { font-size: 15px; font-weight: 700; }
.fdc-plano-exp-disciplina { font-size: 12px; opacity: .7; }
.fdc-plano-exp-conteudo {
    padding: 20px 18px; font-size: 14.5px; line-height: 1.7; color: var(--ia-text);
}
.fdc-plano-exp-conteudo h4   { font-size: 14px; font-weight: 700; color: var(--ia-primary); margin: 14px 0 6px; }
.fdc-plano-exp-conteudo h4:first-child { margin-top: 0; }
.fdc-plano-exp-conteudo ul   { padding-left: 20px; margin: 0 0 10px; }
.fdc-plano-exp-conteudo li   { margin-bottom: 5px; line-height: 1.65; }
.fdc-plano-exp-conteudo strong { color: var(--ia-text); }
.fdc-plano-exp-acoes {
    padding: 12px 18px; border-top: 1px solid var(--ia-border);
    display: flex; gap: 8px; flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   ABA 4: MAPA MENTAL
   ═══════════════════════════════════════════════════════════════ */

.fdc-mapa-resultado-card {
    background: var(--ia-surface); border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius); overflow: hidden;
    box-shadow: var(--ia-shadow); animation: fdc-fade-in .3s ease; margin-top: 16px;
}
.fdc-mapa-resultado-header {
    background: linear-gradient(135deg,#0f172a,#1e3a5f);
    color: #fff; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.fdc-mapa-resultado-titulo { font-size: 14px; font-weight: 700; }
.fdc-mapa-resultado-sub    { font-size: 12px; opacity: .7; }
.fdc-mapa-pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px; line-height: 1.7;
    color: var(--ia-text); background: var(--ia-bg);
    padding: 20px 18px; margin: 0;
    white-space: pre; overflow-x: auto;
    border-bottom: 1px solid var(--ia-border);
    -webkit-overflow-scrolling: touch;
}
.fdc-mapa-pre::-webkit-scrollbar { height: 4px; }
.fdc-mapa-pre::-webkit-scrollbar-thumb { background: var(--ia-border); border-radius: 2px; }
.fdc-mapa-acoes { display: flex; gap: 8px; padding: 14px 16px; flex-wrap: wrap; background: var(--ia-surface); }
.fdc-mapa-acoes .fdc-btn { flex: 1; min-width: 100px; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   ABA 5: CADERNO — Accordion 3 seções
   ═══════════════════════════════════════════════════════════════ */

.fdc-stats-caderno {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 18px;
}
.fdc-stat {
    background: var(--ia-surface); border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius); padding: 14px 10px; text-align: center;
}
.fdc-stat--ok .fdc-stat-num  { color: var(--ia-green); }
.fdc-stat--err .fdc-stat-num { color: var(--ia-red); }
.fdc-stat-num   { display: block; font-size: 22px; font-weight: 800; color: var(--ia-primary); }
.fdc-stat-label { display: block; font-size: 10px; color: var(--ia-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }

/* Accordion base */
.fdc-caderno-accordion { display: flex; flex-direction: column; gap: 8px; }

.fdc-acc-item {
    background: var(--ia-surface); border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius); overflow: hidden; box-shadow: var(--ia-shadow);
}
.fdc-acc-item--nested {
    border-radius: var(--ia-radius-sm); border-color: var(--ia-bg);
    box-shadow: none;
}

.fdc-acc-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; padding: 14px 16px;
    cursor: pointer; font-family: var(--ia-font);
    transition: background var(--ia-tr); -webkit-tap-highlight-color: transparent; gap: 10px;
}
.fdc-acc-header:hover { background: var(--ia-bg); }
.fdc-acc-header[aria-expanded="true"] { background: var(--ia-primary-lt); }
.fdc-acc-header--nested { padding: 11px 16px; }
.fdc-acc-header--nested:hover { background: var(--ia-bg); }
.fdc-acc-header--nested[aria-expanded="true"] { background: #f0f9ff; }
.fdc-acc-header--mapas[aria-expanded="true"]  { background: #f0fdf4; }
.fdc-acc-header--resumos[aria-expanded="true"]{ background: var(--ia-yellow-lt); }

.fdc-acc-icon    { font-size: 18px; flex-shrink: 0; }
.fdc-acc-materia { font-size: 15px; font-weight: 700; color: var(--ia-text); flex: 1; text-align: left; }
.fdc-acc-meta    { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fdc-acc-pct     { font-size: 14px; font-weight: 700; color: var(--ia-primary); }
.fdc-acc-total   { font-size: 12px; color: var(--ia-muted); }
.fdc-acc-chevron { font-size: 13px; color: var(--ia-muted); transition: transform var(--ia-tr); }
.fdc-acc-header[aria-expanded="true"] .fdc-acc-chevron { transform: rotate(180deg); }

.fdc-acc-body    { border-top: 1px solid var(--ia-border); }

/* Accordion de tópicos na aba Plano (disciplinas com grade extensa) —
   reaproveita .fdc-acc-header/.fdc-acc-body já usados no Caderno.
   Cor de destaque forte (vermelho→laranja) de propósito — o cabeçalho
   neutro anterior não deixava óbvio que era clicável/expansível. */
.fdc-acc-header--plano {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    border: none; color: #fff;
    border-radius: var(--ia-radius); padding: 14px 18px; margin: 4px 0 10px;
    font-weight: 700; font-size: 14px; cursor: pointer;
    box-shadow: 0 3px 10px rgba(239,68,68,.35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.fdc-acc-header--plano:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(239,68,68,.45);
}
.fdc-acc-header--plano:active { transform: translateY(0); }
.fdc-acc-header--plano small { font-weight: 600; color: rgba(255,255,255,.85); margin-left: 4px; }
.fdc-acc-header--plano .fdc-acc-chevron { color: #fff; }
.fdc-plano-topicos-acc-body {
    display: flex; flex-direction: column; gap: 10px;
    border-top: none; padding-top: 2px;
}

/* Itens de histórico */
.fdc-hist-item   { padding: 14px 16px; border-bottom: 1px solid var(--ia-bg); }
.fdc-hist-item:last-child { border-bottom: none; }
.fdc-hist-acerto { border-left: 3px solid var(--ia-green); }
.fdc-hist-erro   { border-left: 3px solid var(--ia-red); }
.fdc-hist-meta   { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.fdc-hist-assunto{ font-weight: 600; color: var(--ia-text); }
.fdc-hist-data   { color: var(--ia-muted); margin-left: auto; }
.fdc-hist-pergunta { font-size: 13.5px; margin-bottom: 6px; line-height: 1.5; }
.fdc-hist-resp   { font-size: 12.5px; color: var(--ia-muted); }
.fdc-hist-resp strong { color: var(--ia-text); }
.fdc-correta     { color: var(--ia-green) !important; }

/* Mapas salvos no caderno */
.fdc-mapas-materia-grupo  { padding: 8px 0 4px; }
.fdc-mapas-materia-titulo {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ia-muted); padding: 4px 16px 4px;
}
.fdc-mapa-salvo-item  { border-bottom: 1px solid var(--ia-bg); }
.fdc-mapa-salvo-item:last-child { border-bottom: none; }
.fdc-mapa-titulo-btn  {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; padding: 12px 16px;
    cursor: pointer; font-family: var(--ia-font); gap: 10px;
    -webkit-tap-highlight-color: transparent; transition: background var(--ia-tr);
}
.fdc-mapa-titulo-btn:hover { background: var(--ia-bg); }
.fdc-mapa-titulo-txt  { font-size: 14px; font-weight: 600; color: var(--ia-text); flex: 1; text-align: left; }
.fdc-mapa-data        { font-size: 11px; color: var(--ia-muted); flex-shrink: 0; }
.fdc-mapa-conteudo-wrap { border-top: 1px solid var(--ia-border); }

/* Resumos (plano) no caderno */
.fdc-resumo-salvo-item { border-bottom: 1px solid var(--ia-bg); }
.fdc-resumo-salvo-item:last-child { border-bottom: none; }
.fdc-resumo-titulo-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; padding: 12px 16px;
    cursor: pointer; font-family: var(--ia-font); gap: 10px;
    -webkit-tap-highlight-color: transparent; transition: background var(--ia-tr);
}
.fdc-resumo-titulo-btn:hover { background: var(--ia-bg); }
.fdc-resumo-titulo-txt {
    display: flex; flex-direction: column; flex: 1; text-align: left; gap: 2px;
    font-size: 14px; font-weight: 600; color: var(--ia-text);
}
.fdc-resumo-disc  { font-size: 11px; color: var(--ia-muted); font-weight: 400; }
.fdc-resumo-conteudo-wrap { border-top: 1px solid var(--ia-border); }
.fdc-resumo-conteudo {
    padding: 16px 18px; font-size: 14px; line-height: 1.7; color: var(--ia-text);
}
.fdc-resumo-conteudo h4 { font-size: 14px; font-weight: 700; color: var(--ia-primary); margin: 12px 0 6px; }
.fdc-resumo-conteudo h4:first-child { margin-top: 0; }
.fdc-resumo-conteudo ul { padding-left: 20px; margin: 0 0 8px; }
.fdc-resumo-conteudo li { margin-bottom: 5px; line-height: 1.65; }

/* Caderno vazio */
.fdc-caderno-vazio { text-align: center; padding: 40px 20px; color: var(--ia-muted); }
.fdc-caderno-vazio span { font-size: 40px; display: block; margin-bottom: 10px; }
.fdc-caderno-vazio p { font-size: 14px; margin: 0 0 6px; }

/* ═══════════════════════════════════════════════════════════════
   TOAST DE NOTIFICAÇÃO
   ═══════════════════════════════════════════════════════════════ */

.fdc-toast {
    position: fixed;
    bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1e293b; color: #fff;
    padding: 12px 20px; border-radius: 8px;
    font-size: 14px; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    z-index: 99999;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    white-space: nowrap;
    max-width: 90vw;
}
.fdc-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.fdc-toast--ok  { background: #15803d; }
.fdc-toast--err { background: #dc2626; }

@media (max-width: 768px) {
    .fdc-toast { bottom: calc(var(--fdc-tabbar-altura, 60px) + 12px); }
}

/* ═══════════════════════════════════════════════════════════════
   FAB "OUVIR NARRADO" — lembrete fixo, sempre visível durante a
   leitura do tópico (o botão original só aparece rolando até o fim).
   ═══════════════════════════════════════════════════════════════ */
.fdc-fab-ouvir {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 8500; /* abaixo do widget do Tutor (9000) e da tab bar mobile (9999) */
    width: 52px; height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--ia-primary) 0%, var(--ia-accent) 100%);
    color: #fff;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 0 0 color-mix(in srgb, var(--ia-primary) 45%, transparent);
    transition: transform .15s ease, opacity .2s ease;
    animation: fdc-fab-pulso 2.4s ease-in-out infinite;
}
.fdc-fab-ouvir:hover  { transform: scale(1.08); }
.fdc-fab-ouvir:active { transform: scale(.94); }

@keyframes fdc-fab-pulso {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 0 0 color-mix(in srgb, var(--ia-primary) 45%, transparent); }
    50%      { box-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 0 10px color-mix(in srgb, var(--ia-primary) 0%, transparent); }
}

@media (max-width: 768px) {
    .fdc-fab-ouvir {
        /* mesma variável usada pela tab bar mobile — sobe automaticamente
           se a altura dela mudar, sem precisar lembrar de ajustar aqui. */
        bottom: calc(var(--fdc-tabbar-altura, 60px) + 16px);
        right: 16px;
        width: 48px; height: 48px;
        font-size: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   IMPRESSÃO
   ═══════════════════════════════════════════════════════════════ */

@media print {
    body > *:not(#fdc-print-iframe) { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 539px) {
    .fdc-stats-caderno   { grid-template-columns: repeat(2,1fr); }
    /* .fdc-tab não é mais ajustado aqui — o bloco "TAB BAR MOBILE"
       (≤768px, mais acima no arquivo) já cobre esse breakpoint com a
       barra fixa no rodapé; uma regra aqui depois dela na cascata
       sobrescreveria o layout de tab bar em telas pequenas, que é
       justamente onde ele mais importa. */
    .fdc-q-enunciado     { font-size: 14.5px; padding: 16px; }
    .fdc-alt             { font-size: 13.5px; padding: 11px 12px; }
    .fdc-q-acoes         { flex-direction: column; }
    .fdc-q-acoes .fdc-btn { width: 100%; }
    .fdc-curso-card      { flex-direction: column; }
    .fdc-curso-thumb     { width: 100%; height: 120px; }
    .fdc-chat-msgs       { max-height: 300px; }
    .fdc-mapa-pre        { font-size: 12px; padding: 14px 12px; }
    .fdc-mapa-acoes      { flex-direction: column; }
    .fdc-mapa-acoes .fdc-btn { width: 100%; }
    .fdc-plano-exp-acoes { flex-direction: column; }
    .fdc-curso-ativo     { font-size: 12px; max-width: calc(100% - 100px); }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 1 — TELA DE LOGIN
   ═══════════════════════════════════════════════════════════════ */

.fdc-login-wall {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px 16px;
    font-family: var(--ia-font);
}

.fdc-login-card {
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: 16px;
    padding: 40px 28px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 32px rgba(0,0,0,.1);
}

.fdc-login-icon {
    font-size: 56px;
    margin-bottom: 16px;
    display: block;
}

.fdc-login-titulo {
    font-size: 22px;
    font-weight: 800;
    color: var(--ia-text);
    margin: 0 0 12px;
}

.fdc-login-desc {
    font-size: 15px;
    color: var(--ia-muted);
    line-height: 1.6;
    margin: 0 0 28px;
}

/* Botão de login grande e chamativo */
.fdc-btn-login {
    display: block;
    width: 100%;
    background: var(--ia-primary);
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--ia-font);
    font-size: 18px;
    font-weight: 700;
    padding: 16px 24px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
    transition: background var(--ia-tr), transform .1s, box-shadow var(--ia-tr);
    box-shadow: 0 4px 16px rgba(26,86,219,.35);
    letter-spacing: .02em;
}

.fdc-btn-login:hover {
    background: var(--ia-primary-h);
    box-shadow: 0 6px 24px rgba(26,86,219,.45);
    transform: translateY(-1px);
}

.fdc-btn-login:active { transform: scale(.97); }

.fdc-login-rodape {
    font-size: 13px;
    color: var(--ia-muted);
    margin: 0;
}

.fdc-login-rodape a {
    color: var(--ia-primary);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 3 — CARDS DE TÓPICOS (layout corrigido)
   ═══════════════════════════════════════════════════════════════ */

/* Grid: uma coluna, empilhado, 100% de largura */
.fdc-plano-topicos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

/* Card de tópico — reescrito para garantir layout correto */
.fdc-topico-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ia-surface);
    border: 2px solid var(--ia-border);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--ia-font);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ia-text);
    line-height: 1.4;
    transition: border-color var(--ia-tr), background var(--ia-tr), transform .1s;
    -webkit-tap-highlight-color: transparent;
    animation: fdc-fade-in .2s ease;
}

.fdc-topico-card:hover:not(.topico-estudado) {
    border-color: var(--ia-primary);
    background: var(--ia-primary-lt);
    transform: translateX(4px);
}

.fdc-topico-card:active:not(.topico-estudado) { transform: scale(.98); }

/* ── Campo "Outro Tópico" abaixo dos cards ────────────────────── */
.fdc-plano-outro-wrap {
    background: var(--ia-bg);
    border: 1.5px dashed var(--ia-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 4px;
}

.fdc-plano-outro-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ia-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fdc-plano-outro-row {
    display: flex;
    gap: 8px;
}

.fdc-plano-outro-row .fdc-input {
    flex: 1;
    padding: 10px 13px;
    font-size: 14px;
}

.fdc-plano-outro-row .fdc-btn {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 14px;
}

@media (max-width: 380px) {
    .fdc-plano-outro-row { flex-direction: column; }
    .fdc-plano-outro-row .fdc-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   TOUR GUIADO — Driver.js customizado (identidade visual do plugin)
   ═══════════════════════════════════════════════════════════════ */

/* ── Popover container ────────────────────────────────────────── */
.fdc-driver-popover.driver-popover {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    max-width: 340px;
    padding: 0;
    overflow: hidden;
}

/* ── Título do popover ────────────────────────────────────────── */
.fdc-driver-popover .driver-popover-title {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
    color: #ffffff !important;
    /* !important nas duas linhas acima é proposital: o CSS base do
       driver.js (carregado antes do nosso) tem uma regra própria pra
       .driver-popover-title com cor de texto escura (pensada pra fundo
       claro) que, dependendo da ordem de carregamento/cache do
       navegador, pode vencer a nossa e deixar o título ilegível sobre
       o fundo azul-escuro — mesmo problema e mesma solução já usada em
       .fdc-palavra--ativa neste arquivo. */
    font-size: 15px;
    font-weight: 700;
    padding: 14px 18px 12px;
    margin: 0;
    line-height: 1.4;
    border-radius: 0;
}

/* ── Descrição ────────────────────────────────────────────────── */
.fdc-driver-popover .driver-popover-description {
    color: #334155;
    font-size: 14px;
    line-height: 1.65;
    padding: 14px 18px;
    margin: 0;
}

.fdc-driver-popover .driver-popover-description p {
    margin: 0;
}

.fdc-driver-popover .driver-popover-description strong {
    color: #1a56db;
}

/* ── Rodapé (barra de progresso + botões) ─────────────────────── */
.fdc-driver-popover .driver-popover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 14px;
    border-top: 1px solid #f1f5f9;
    gap: 8px;
}

/* ── Progresso ────────────────────────────────────────────────── */
.fdc-driver-popover .driver-popover-progress-text {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: .04em;
    flex-shrink: 0;
}

/* ── Botões ───────────────────────────────────────────────────── */
.fdc-driver-popover .driver-popover-footer button {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    transition: background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.fdc-driver-popover .driver-popover-footer button:active {
    transform: scale(.96);
}

/* Botão Anterior */
.fdc-driver-popover .driver-popover-prev-btn {
    background: #f1f5f9;
    color: #475569;
}
.fdc-driver-popover .driver-popover-prev-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Botão Próximo */
.fdc-driver-popover .driver-popover-next-btn {
    background: #1a56db;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(26,86,219,.3);
}
.fdc-driver-popover .driver-popover-next-btn:hover {
    background: #1648c0;
}

/* Botão Fechar (×) */
.fdc-driver-popover .driver-popover-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(255,255,255,.15);
    color: #cbd5e1;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background .15s, color .15s;
}
.fdc-driver-popover .driver-popover-close-btn:hover {
    background: rgba(255,255,255,.25);
    color: #ffffff;
}

/* ── Seta do popover ──────────────────────────────────────────── */
.fdc-driver-popover .driver-popover-arrow {
    border-color: #ffffff transparent transparent transparent;
}

/* ── Overlay / holofote ───────────────────────────────────────── */
.driver-overlay {
    background: rgba(15, 23, 42, 0.78) !important;
}

/* ── Elemento destacado: borda de foco animada ────────────────── */
.driver-active-element,
#driver-highlighted-element-stage {
    border-radius: 8px !important;
    box-shadow: 0 0 0 3px #1a56db, 0 0 0 6px rgba(26,86,219,.25) !important;
    transition: box-shadow .3s ease !important;
}

/* ── Mobile: popover ocupa mais largura ───────────────────────── */
@media (max-width: 480px) {
    .fdc-driver-popover.driver-popover {
        max-width: 90vw;
        margin: 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 2 — BOTÃO "COMEÇAR TOUR" (texto branco fundo azul fixo)
   ═══════════════════════════════════════════════════════════════ */

/* O Driver.js renderiza o botão Next com classe driver-popover-next-btn.
   No primeiro passo (Começar Tour) o texto muda mas a classe é a mesma.
   Garantimos background e cor fixos, sem depender de hover. */
.fdc-driver-popover .driver-popover-next-btn,
.fdc-driver-popover .driver-popover-next-btn:link,
.fdc-driver-popover .driver-popover-next-btn:visited {
    background-color: #2563eb !important;
    color:            #ffffff !important;
    border:           none    !important;
    opacity:          1       !important;
}

.fdc-driver-popover .driver-popover-next-btn:hover {
    background-color: #1d4ed8 !important;
    color:            #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 3 — ACCORDION ANINHADO DO CADERNO (Disciplina > Tópico)
   ═══════════════════════════════════════════════════════════════ */

/* ── Nível 1: Grupo de Disciplina ─────────────────────────────── */
.fdc-resumo-disc-grupo {
    border-bottom: 1px solid var(--ia-border);
}
.fdc-resumo-disc-grupo:last-child { border-bottom: none; }

.fdc-resumo-disc-btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    background:      var(--ia-primary-lt);
    border:          none;
    padding:         13px 16px;
    cursor:          pointer;
    font-family:     var(--ia-font);
    font-size:       14px;
    font-weight:     700;
    color:           var(--ia-primary);
    gap:             10px;
    -webkit-tap-highlight-color: transparent;
    transition:      background var(--ia-tr);
}
.fdc-resumo-disc-btn:hover { background: #dbeafe; }

.fdc-resumo-disc-nome { flex: 1; text-align: left; }

.fdc-resumo-disc-body {
    border-top: 1px solid var(--ia-border);
    background:  var(--ia-bg);
}

/* ── Nível 2: Tópico individual ───────────────────────────────── */
/* Herda .fdc-resumo-salvo-item e .fdc-resumo-titulo-btn já existentes,
   apenas adiciona indentação visual para indicar hierarquia */
.fdc-resumo-disc-body .fdc-resumo-titulo-btn {
    padding-left: 28px; /* indentação para indicar que está dentro da disciplina */
    background:   var(--ia-surface);
    font-size:    13.5px;
    font-weight:  600;
    color:        var(--ia-text);
}
.fdc-resumo-disc-body .fdc-resumo-titulo-btn:hover {
    background: var(--ia-bg);
}

/* Conteúdo expandido do tópico */
.fdc-resumo-disc-body .fdc-resumo-conteudo-wrap {
    border-top: 1px solid var(--ia-border);
}

/* ── Botão Tutor dentro do Caderno ────────────────────────────── */
.fdc-btn-aprofundar-caderno {
    margin-top: 2px;
    font-size:  13px;
}
/* ═══════════════════════════════════════════════════════════════
   IA Preparatória v3.0 — ADIÇÕES CSS
   Aplicar APÓS o painel.css existente (ou concatenar ao final)
   ═══════════════════════════════════════════════════════════════ */

/* ── Fix tab display: garantia extra contra atributo `hidden` ─── */
.fdc-tab-painel { display: none !important; }
.fdc-tab-painel.active { display: block !important; }

/* ═══════════════════════════════════════════════════════════════
   ABA 1: CADERNO — Dashboard de Desempenho (Design Visual)
   ═══════════════════════════════════════════════════════════════ */

/* Boas-vindas header */
.fdc-dash-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #1a56db 100%);
    border-radius: var(--ia-radius);
    padding: 20px 20px 18px;
    color: #fff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 16px rgba(26,86,219,.25);
}
.fdc-dash-header-icon { font-size: 36px; flex-shrink: 0; }
.fdc-dash-header-txt h3 {
    font-size: 17px; font-weight: 800; margin: 0 0 3px; color: #fff;
}
.fdc-dash-header-txt p {
    font-size: 13px; margin: 0; color: rgba(255,255,255,.72); line-height: 1.4;
}

/* ── Grid de métricas totais (4 cards) ────────────────────────── */
.fdc-stats-caderno {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.fdc-stat {
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius);
    padding: 14px 10px;
    text-align: center;
    box-shadow: var(--ia-shadow);
    transition: transform var(--ia-tr), box-shadow var(--ia-tr);
}
.fdc-stat:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.fdc-stat--ok .fdc-stat-num  { color: var(--ia-green); }
.fdc-stat--err .fdc-stat-num { color: var(--ia-red); }
.fdc-stat--pct .fdc-stat-num { color: #7c3aed; }
.fdc-stat-num   { display: block; font-size: 26px; font-weight: 800; color: var(--ia-primary); line-height: 1.1; }
.fdc-stat-label { display: block; font-size: 10px; color: var(--ia-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; font-weight: 600; }

/* ── Painel de métricas DIÁRIAS ───────────────────────────────── */
.fdc-dash-diario {
    background: var(--ia-surface);
    border: 1px solid var(--ia-border);
    border-radius: var(--ia-radius);
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: var(--ia-shadow);
}
.fdc-dash-diario-titulo {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ia-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Grid de 3 métricas diárias */
.fdc-metricas-dia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.fdc-metrica-card {
    border-radius: 8px;
    padding: 12px 10px;
    text-align: center;
}
.fdc-metrica-card--azul  { background: #eff6ff; border: 1px solid #bfdbfe; }
.fdc-metrica-card--verde { background: #f0fdf4; border: 1px solid #bbf7d0; }
.fdc-metrica-card--roxo  { background: #f5f3ff; border: 1px solid #ddd6fe; }
.fdc-metrica-card--laranja { background: #fff7ed; border: 1px solid #fed7aa; }

.fdc-metrica-valor {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    display: block;
    margin-bottom: 4px;
}
.fdc-metrica-card--azul  .fdc-metrica-valor { color: #1a56db; }
.fdc-metrica-card--verde .fdc-metrica-valor { color: #16a34a; }
.fdc-metrica-card--roxo  .fdc-metrica-valor { color: #7c3aed; }
.fdc-metrica-card--laranja .fdc-metrica-valor { color: #ea580c; }

.fdc-metrica-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
}
.fdc-metrica-card--azul  .fdc-metrica-label { color: #1e40af; }
.fdc-metrica-card--verde .fdc-metrica-label { color: #15803d; }
.fdc-metrica-card--roxo  .fdc-metrica-label { color: #6d28d9; }
.fdc-metrica-card--laranja .fdc-metrica-label { color: #c2410c; }

/* ── Barra de progresso de aproveitamento diário ──────────────── */
.fdc-barra-wrap { margin-top: 4px; }
.fdc-barra-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ia-muted);
    font-weight: 600;
    margin-bottom: 5px;
}
.fdc-barra-track {
    width: 100%;
    height: 8px;
    background: var(--ia-bg);
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid var(--ia-border);
}
.fdc-barra-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .6s ease;
    background: linear-gradient(90deg, #1a56db, #7c3aed);
}
.fdc-barra-fill--ok     { background: linear-gradient(90deg, #16a34a, #22c55e); }
.fdc-barra-fill--warn   { background: linear-gradient(90deg, #d97706, #f59e0b); }
.fdc-barra-fill--danger { background: linear-gradient(90deg, #dc2626, #ef4444); }

/* ── Linha de data ────────────────────────────────────────────── */
.fdc-dash-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ia-muted);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ia-border);
}
.fdc-dash-data strong { color: var(--ia-text); }

/* ── Botão atualizar caderno ──────────────────────────────────── */
.fdc-btn-refresh {
    background: none;
    border: 1.5px solid var(--ia-border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ia-muted);
    cursor: pointer;
    font-family: var(--ia-font);
    transition: border-color var(--ia-tr), color var(--ia-tr);
}
.fdc-btn-refresh:hover { border-color: var(--ia-primary); color: var(--ia-primary); }

/* ── Responsive métricas diárias ─────────────────────────────── */
@media (max-width: 539px) {
    .fdc-stats-caderno  { grid-template-columns: repeat(2, 1fr); }
    .fdc-metricas-dia   { grid-template-columns: repeat(2, 1fr); }
    .fdc-dash-header    { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   ABAS 2-5: Design ultra-clean, minimalista, fundo branco
   Sem gradientes, sem box-shadows coloridas — foco total no estudo
   ═══════════════════════════════════════════════════════════════ */

/* Remove bordas decorativas das abas 2-5 */
#fdc-tab-plano    .fdc-card,
#fdc-tab-chat     .fdc-chat-wrap,
#fdc-tab-simulado .fdc-card,
#fdc-tab-mapa     .fdc-card {
    box-shadow: none;
    border-color: var(--ia-border);
}

/* Headers das abas 2-5: sem gradiente dark — fundo branco limpo */
#fdc-tab-plano    .fdc-plano-exp-header,
#fdc-tab-simulado .fdc-plano-exp-header {
    background: var(--ia-bg);
    border-bottom: 1px solid var(--ia-border);
}
#fdc-tab-plano    .fdc-plano-exp-titulo,
#fdc-tab-simulado .fdc-plano-exp-titulo {
    color: var(--ia-text);
}
#fdc-tab-plano    .fdc-plano-exp-disciplina,
#fdc-tab-simulado .fdc-plano-exp-disciplina {
    color: var(--ia-muted);
    opacity: 1;
}

/* Header das questões — versão clean para Simulados */
#fdc-tab-simulado .fdc-q-header {
    background: var(--ia-bg);
    border-bottom: 1px solid var(--ia-border);
}
#fdc-tab-simulado .fdc-q-banca { color: var(--ia-primary); }
#fdc-tab-simulado .fdc-q-fonte { color: var(--ia-muted); opacity: 1; }

/* Header do mapa mental gerado — clean */
#fdc-tab-mapa .fdc-mapa-resultado-header {
    background: var(--ia-bg);
    border-bottom: 1px solid var(--ia-border);
}
#fdc-tab-mapa .fdc-mapa-resultado-titulo { color: var(--ia-text); }
#fdc-tab-mapa .fdc-mapa-resultado-sub    { color: var(--ia-muted); opacity: 1; }

/* Ícone extra nas cards de simulado → indica que gera questão */
.fdc-simulado-topico-icone {
    font-size: 16px;
    color: var(--ia-primary);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--ia-tr), transform var(--ia-tr);
}
.fdc-simulado-topico-card:hover .fdc-simulado-topico-icone {
    opacity: 1;
    transform: translateX(3px);
}

/* ════════════════════════════════════════════════════════════
   TUTOR VIRTUAL — botão e player de vídeo
   ════════════════════════════════════════════════════════════ */
.fdc-btn--secondary {
    background: #1f2937;
    color: #fff;
    border: 1px solid #1f2937;
}
.fdc-btn--secondary:hover { background: #111827; }
.fdc-btn--secondary:disabled { opacity: .6; cursor: wait; }

.fdc-tutor-video-wrap { margin: 16px 0; }

.fdc-tutor-loading p { font-size: 13px; color: #64748b; }

.fdc-tutor-video-card {
    display: flex;
    justify-content: center;
    background: #0f172a;
    border-radius: 14px;
    padding: 14px;
}

.fdc-tutor-video {
    max-width: 360px;
    width: 100%;
    border-radius: 10px;
    background: #000;
}

/* ════════════════════════════════════════════════════════════════════
   AVATAR LOCAL — player com foto + barrinhas animadas + play/pause
   ════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   AVATAR LOCAL — layout compacto, animação de boca, player completo
   ══════════════════════════════════════════════════════════════════ */

/* ── Animação de ondas sonoras em volta da foto ── */
@keyframes fdc-onda {
    0%   { transform: scale(1);    opacity: 0.6; }
    100% { transform: scale(1.55); opacity: 0;   }
}

/* ── Wrapper principal ── */
.fdc-avatar-local {
    background: #fff;
    border-radius: 16px;
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    max-width: 340px;
    margin: 0 auto;
}

/* ── Foto do avatar — tamanho contido ── */

.fdc-avatar-local__foto {
    width: 160px;
    height: 160px;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    display: block;
    background: #f1f5f9;
    border: 3px solid #e2e8f0;
}

/* ── Ondas sonoras em volta da foto ── */
/* As ondas são pseudo-elementos no img-wrap e em elementos extras */
.fdc-avatar-local__img-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.fdc-avatar-local__onda {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #3b82f6;
    opacity: 0;
    pointer-events: none;
    animation: none;
}

.fdc-avatar-local--falando .fdc-avatar-local__onda:nth-child(1) {
    animation: fdc-onda 1.6s ease-out infinite;
    animation-delay: 0s;
}
.fdc-avatar-local--falando .fdc-avatar-local__onda:nth-child(2) {
    animation: fdc-onda 1.6s ease-out infinite;
    animation-delay: 0.5s;
}
.fdc-avatar-local--falando .fdc-avatar-local__onda:nth-child(3) {
    animation: fdc-onda 1.6s ease-out infinite;
    animation-delay: 1.0s;
}

/* ── Barrinhas de áudio (indicador visual) ── */
.fdc-avatar-local__bars {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 26px;
    opacity: 0;
    transition: opacity .2s;
}

.fdc-bar {
    fill: #3b82f6;
    transition: height .06s ease, y .06s ease;
}

/* ── Controles ── */
.fdc-avatar-local__controles {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Botões skip ⏮ ⏭ */
.fdc-avatar-local__btn-skip {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    padding: 0;
    line-height: 1;
    position: relative;
}

.fdc-avatar-local__btn-skip:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #3b82f6;
    transform: scale(1.08);
}

.fdc-avatar-local__btn-skip:active {
    transform: scale(0.96);
}

/* Botão play/pause */
.fdc-avatar-local__btn-play {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #3b82f6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .1s;
    padding: 0;
}

.fdc-avatar-local__btn-play:hover {
    background: #2563eb;
    transform: scale(1.06);
}

.fdc-avatar-local__btn-play--tocando {
    background: #1d4ed8;
}

/* ── Barra de progresso com thumb ── */
.fdc-avatar-local__progresso-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fdc-avatar-local__progresso-bg {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    /* overflow: hidden removido para o thumb aparecer */
    touch-action: none; /* evita scroll ao arrastar */
}

.fdc-avatar-local__progresso-fill {
    height: 100%;
    width: 0%;
    background: #3b82f6;
    border-radius: 3px;
    pointer-events: none;
    /* sem transition durante drag para resposta imediata */
    transition: width .12s linear;
}

/* Thumb (bolinha azul) */
.fdc-avatar-local__progresso-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: #3b82f6;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(59,130,246,.4);
    pointer-events: none;
    transition: left .12s linear, transform .1s;
}

/* Thumb maior ao arrastar */
.fdc-avatar-local__progresso-bg--dragging .fdc-avatar-local__progresso-fill,
.fdc-avatar-local__progresso-bg--dragging .fdc-avatar-local__progresso-thumb {
    transition: none;
}

.fdc-avatar-local__progresso-bg--dragging .fdc-avatar-local__progresso-thumb {
    transform: translate(-50%, -50%) scale(1.3);
}

.fdc-avatar-local__tempo {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FDC APOSTILA DIAGRAMADA — Estilos do Plano de Estudos v2
   Classes: fdc-apos-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container principal do conteúdo apostila */
.fdc-plano-exp-conteudo .fdc-apos-intro {
    font-size: 14px;
    line-height: 1.8;
    color: var(--ia-text);
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #f8faff;
    border-left: 4px solid var(--ia-primary);
    border-radius: 0 8px 8px 0;
}

/* Badge "Cai Muito" / destaque de relevância */
.fdc-apos-destaque {
    display: flex;
    align-items: center;
    /* flex-wrap:wrap é o que faz a diferença — sem highlight de narração,
       o texto depois do badge é UM nó de texto só (um item flex), então
       quebra bem mesmo com nowrap. Mas o highlight da narração (ver
       sync_highlight_preparar em fdc-painel.js) embrulha CADA PALAVRA
       num <span class="fdc-palavra"> — isso transforma o texto em 20-30
       itens flex separados, e com nowrap eles são forçados numa fileira
       só, estourando o card horizontalmente. Com wrap, esses itens
       quebram de linha normalmente, exatamente como o texto fazia antes
       de virar vários spans. (O bloco ATENÇÃO nunca teve esse problema
       porque o texto dele já fica dentro de uma <div> própria, não solto
       direto no container flex — aqui replicamos o mesmo resultado sem
       precisar mudar o template da apostila.) */
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff7ed 0%, #fff3e0 100%);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13.5px;
    color: #92400e;
    font-weight: 500;
    line-height: 1.5;
}

.fdc-apos-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Seções numeradas */
.fdc-apos-secao {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.fdc-apos-secao-titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* mesma razão do .fdc-apos-destaque — texto solto sem <div> própria, em risco se o título da seção crescer ou a narração embrulhar as palavras */
    gap: 10px;
    background: var(--ia-primary);
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
}

.fdc-apos-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    font-size: 11px;
    font-weight: 900;
    flex-shrink: 0;
}

.fdc-apos-secao p {
    padding: 14px 16px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ia-text);
    background: #fff;
}

/* Highlights inline — amarelo e azul */
.fdc-hl-amarelo {
    background: #fef9c3;
    color: #713f12;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
}

.fdc-hl-azul {
    background: #dbeafe;
    color: #1e40af;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
}

/* Esquema Visual / Fluxo */
.fdc-apos-esquema {
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.fdc-apos-esquema-titulo {
    font-size: 12px;
    font-weight: 800;
    color: #3730a3;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 14px;
}

.fdc-apos-fluxo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fdc-apos-fluxo-item {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    flex: 1;
    min-width: 80px;
    max-width: 160px;
    line-height: 1.4;
}

.fdc-fluxo-cor-1 { background: #6366f1; color: #fff; }
.fdc-fluxo-cor-2 { background: #8b5cf6; color: #fff; }
.fdc-fluxo-cor-3 { background: #ec4899; color: #fff; }
.fdc-fluxo-cor-4 { background: #0ea5e9; color: #fff; }
.fdc-fluxo-cor-5 { background: #10b981; color: #fff; }

.fdc-apos-fluxo-seta {
    font-size: 18px;
    color: #6366f1;
    font-weight: 900;
    flex-shrink: 0;
}

/* Bloco de atenção / pegadinha */
.fdc-apos-atencao {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.7;
    color: #881337;
}

.fdc-apos-atencao-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.fdc-apos-atencao strong {
    color: #be123c;
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

/* Bloco Para Fixar */
.fdc-apos-memoria {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 8px;
}

.fdc-apos-memoria-titulo {
    font-size: 12px;
    font-weight: 800;
    color: #166534;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 12px;
}

.fdc-apos-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fdc-apos-lista li {
    display: flex;
    align-items: flex-start;
    /* Mesmo motivo do .fdc-apos-destaque acima: o texto de cada item fica
       solto direto no <li> (sem <div> própria), então o highlight da
       narração quebra ele em vários itens flex — wrap evita o estouro. */
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ia-text);
}

.fdc-apos-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Animação de entrada do card apostila */
.fdc-plano-explicacao-card {
    animation: fdc-apostila-in .35s ease;
}

@keyframes fdc-apostila-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsivo mobile */
@media (max-width: 600px) {
    .fdc-apos-fluxo {
        flex-direction: column;
        align-items: stretch;
    }
    .fdc-apos-fluxo-item {
        max-width: 100%;
    }
    .fdc-apos-fluxo-seta {
        transform: rotate(90deg);
        text-align: center;
    }
}

/* ── Breadcrumb no header do card ─────────────────────────────────────────── */
.fdc-plano-exp-header {
    flex-wrap: wrap;
    gap: 8px;
}

.fdc-apos-breadcrumb-sep {
    color: #94a3b8;
    margin: 0 4px;
    font-size: 11px;
}

.fdc-apos-breadcrumb-topico {
    color: var(--ia-primary);
    font-weight: 600;
}

/* ── Badge fonte (cache / IA) ─────────────────────────────────────────────── */
.fdc-apos-fonte-wrap {
    flex-shrink: 0;
}

.fdc-apos-fonte-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 20px;
    letter-spacing: .3px;
}

.fdc-apos-fonte-cache {
    background: #d1fae5;
    color: #065f46;
}

.fdc-apos-fonte-ia {
    background: #ede9fe;
    color: #5b21b6;
}

/* ── Barra de progresso de leitura ───────────────────────────────────────── */
.fdc-apos-leitura-bar {
    height: 3px;
    background: #e2e8f0;
    border-radius: 0;
    overflow: hidden;
    margin: 0 -20px 20px;
}

.fdc-apos-leitura-progresso {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--ia-primary), #8b5cf6);
    transition: width .2s ease;
    border-radius: 0 2px 2px 0;
}

/* ── Bloco de imagem nas apostilas (Unsplash / DALL-E) ───────────────────── */
.fdc-apos-imagem-bloco {
    margin: 20px 0 24px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.10);
    background: #f8fafc;
    position: relative;
}

.fdc-apos-imagem {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0;
}

.fdc-apos-imagem-legenda {
    display: block;
    padding: 8px 14px;
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
    font-style: italic;
}

@media (max-width: 600px) {
    .fdc-apos-imagem {
        max-height: 200px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PREPARAÇÃO LIVRE — Tela de setup do concurso
   ══════════════════════════════════════════════════════════════════════════ */

.fdc-setup-livre {
    max-width: 680px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
}

.fdc-setup-livre-body {
    padding: 24px 16px 48px;
}

.fdc-setup-livre-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    padding: 32px 28px;
}

.fdc-setup-livre-header {
    text-align: center;
    margin-bottom: 28px;
}

.fdc-setup-livre-icon {
    font-size: 52px;
    display: block;
    margin-bottom: 12px;
}

.fdc-setup-livre-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
}

.fdc-setup-livre-header p {
    color: #64748b;
    font-size: 15px;
    margin: 0;
}

.fdc-setup-livre-campo {
    margin-bottom: 22px;
}

.fdc-setup-livre-campo label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.fdc-setup-livre-campo input[type="text"],
.fdc-setup-livre-campo textarea {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color .2s;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.fdc-setup-livre-campo input[type="text"]:focus,
.fdc-setup-livre-campo textarea:focus {
    outline: none;
    border-color: var(--ia-primary, #6366f1);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.fdc-setup-livre-hint {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
}

/* ── Dropzone ─────────────────────────────────────────────────── */

.fdc-livre-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: #f8fafc;
}

.fdc-livre-dropzone:hover,
.fdc-livre-dropzone.dragover {
    border-color: var(--ia-primary, #6366f1);
    background: #eef2ff;
}

.fdc-livre-dropzone-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
}

.fdc-livre-dropzone p {
    margin: 0 0 4px;
    font-size: 14px;
    color: #64748b;
}

.fdc-livre-file-label {
    color: var(--ia-primary, #6366f1);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.fdc-livre-dropzone-hint {
    font-size: 12px;
    color: #94a3b8;
}

/* ── Lista de arquivos ───────────────────────────────────────── */

.fdc-livre-file-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fdc-livre-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #166534;
}

.fdc-livre-file-item button {
    background: none;
    border: none;
    cursor: pointer;
    color: #dc2626;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
}

/* ── Botão trocar concurso na topbar ─────────────────────────── */

.fdc-btn-trocar-concurso {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ia-bg);
    border: 1.5px solid var(--ia-border);
    color: var(--ia-text);
    border-radius: var(--ia-radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ia-tr), color var(--ia-tr);
}

.fdc-btn-trocar-concurso:hover {
    border-color: var(--ia-primary);
    color: var(--ia-primary);
}

@media (max-width: 600px) {
    .fdc-setup-livre-card { padding: 20px 16px; }
    .fdc-btn-trocar-concurso span { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MÓDULOS EXCLUSIVOS DO PROFESSOR
   ══════════════════════════════════════════════════════════════════════════ */

/* Seção separada acima dos tópicos IA */
.fdc-modulos-exclusivos-secao {
    margin-bottom: 8px;
}

.fdc-modulos-exclusivos-header {
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 6px 4px 8px;
    opacity: .8;
}

/* Card do módulo exclusivo — visual roxo/dourado */
.fdc-modulo-exclusivo-card {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important;
    border: 1.5px solid #c4b5fd !important;
    color: #4c1d95 !important;
    position: relative;
    overflow: hidden;
}

.fdc-modulo-exclusivo-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #7c3aed, #a855f7);
    border-radius: 4px 0 0 4px;
}

.fdc-modulo-exclusivo-card:hover {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important;
    border-color: #a78bfa !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(124,58,237,.18) !important;
}

.fdc-modulo-exclusivo-badge {
    font-size: 16px;
    flex-shrink: 0;
}

.fdc-modulo-exclusivo-tag {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    color: #7c3aed;
    background: #ede9fe;
    border: 1px solid #c4b5fd;
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Separador entre exclusivos e IA */
.fdc-modulos-ia-separador {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 12px 4px 8px;
    opacity: .7;
    border-top: 1px dashed #e2e8f0;
    margin-top: 8px;
}

/* ── Módulo exclusivo BLOQUEADO (liberação programada) ─────────────── */

.fdc-modulo-exclusivo-card.fdc-modulo-bloqueado {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
    border: 1.5px dashed #cbd5e1 !important;
    color: #64748b !important;
    opacity: .85;
}

.fdc-modulo-exclusivo-card.fdc-modulo-bloqueado::before {
    background: linear-gradient(180deg, #94a3b8, #cbd5e1);
}

.fdc-modulo-exclusivo-card.fdc-modulo-bloqueado:hover {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;
    border-color: #94a3b8 !important;
    transform: none;
    box-shadow: none !important;
}

.fdc-modulo-exclusivo-tag--bloqueado {
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.fdc-modulo-exclusivo-view--bloqueado {
    border-top-color: #94a3b8 !important;
}

.fdc-modulo-bloqueado-aviso {
    text-align: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 32px 20px;
    margin: 12px 0 20px;
}

.fdc-modulo-bloqueado-icone {
    display: block;
    font-size: 40px;
    margin-bottom: 12px;
}

.fdc-modulo-bloqueado-aviso p {
    margin: 4px 0;
    color: #475569;
    font-size: 15px;
}

.fdc-modulo-bloqueado-contagem {
    font-size: 16px !important;
    color: #1e293b !important;
}

.fdc-modulo-bloqueado-contagem strong {
    color: #7c3aed;
}

.fdc-topico-card--bloqueado {
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    color: #64748b !important;
    cursor: pointer;
    opacity: .85;
}

.fdc-topico-card--bloqueado:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

/* Badge no admin */
.fdc-badge-disciplina {
    display: inline-block;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
}

/* ── Visualizador do módulo exclusivo ──────────────────────────── */

.fdc-modulo-exclusivo-view {
    border-top: 4px solid #7c3aed !important;
}

.fdc-modulo-exclusivo-topo {
    margin-bottom: 20px;
}

.fdc-modulo-exclusivo-badge-grande {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ede9fe;
    color: #7c3aed;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    margin-bottom: 12px;
}

.fdc-modulo-exclusivo-titulo {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

/* Player de vídeo responsivo */
.fdc-modulo-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

.fdc-modulo-video-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* Conteúdo HTML do professor */
.fdc-modulo-exclusivo-conteudo {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 24px;
}

.fdc-modulo-exclusivo-conteudo img {
    max-width: 100%;
    border-radius: 10px;
    margin: 12px 0;
}

.fdc-modulo-exclusivo-conteudo p  { margin: 0 0 14px; }
.fdc-modulo-exclusivo-conteudo h2,
.fdc-modulo-exclusivo-conteudo h3 { color: #1e293b; margin: 20px 0 10px; }
.fdc-modulo-exclusivo-conteudo ul,
.fdc-modulo-exclusivo-conteudo ol { padding-left: 20px; margin-bottom: 14px; }

.fdc-modulo-vazio {
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 32px;
}

.fdc-btn-voltar-modulo {
    margin-top: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ABA CERTIFICADO
   ══════════════════════════════════════════════════════════════════════════ */

.fdc-cert-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 8px 0 32px;
}

/* Header */
.fdc-cert-header {
    text-align: center;
    padding: 28px 20px 32px;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-radius: 16px;
    margin-bottom: 28px;
    border: 1.5px solid #c4b5fd;
}
.fdc-cert-header-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}
.fdc-cert-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 10px;
}
.fdc-cert-header p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* Grid de opções */
.fdc-cert-opcoes-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.fdc-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.fdc-cert-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 12px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.fdc-cert-card:hover {
    border-color: #a78bfa;
    background: #faf5ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124,58,237,.12);
}
.fdc-cert-card--ativo {
    border-color: #7c3aed !important;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,.2) !important;
}
.fdc-cert-card-horas {
    font-size: 28px;
    font-weight: 800;
    color: #7c3aed;
    line-height: 1;
}
.fdc-cert-card-label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.fdc-cert-card-preco {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-top: 4px;
}
.fdc-cert-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #22c55e;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.fdc-cert-card-badge--pago {
    background: #4338ca; /* azul/índigo — distingue visualmente de "Grátis" */
    display: inline-flex; align-items: center; gap: 3px;
}

/* Resumo da seleção */
.fdc-cert-selecionado-wrap {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}
.fdc-cert-resumo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.fdc-cert-resumo-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fdc-cert-resumo-info span:first-child {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}
.fdc-cert-resumo-info span:nth-child(2) {
    font-size: 13px;
    color: #7c3aed;
    font-weight: 600;
}
.fdc-cert-resumo-info span:last-child {
    font-size: 14px;
    font-weight: 700;
    color: #16a34a;
}
.fdc-cert-resumo-aluno {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
    font-size: 13px;
    color: #64748b;
}

/* Sucesso */
.fdc-cert-sucesso {
    text-align: center;
    padding: 32px 20px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 16px;
}
.fdc-cert-sucesso-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 14px;
}
.fdc-cert-sucesso h3 {
    font-size: 20px;
    font-weight: 800;
    color: #166534;
    margin-bottom: 8px;
}
.fdc-cert-sucesso p {
    font-size: 14px;
    color: #374151;
    margin-bottom: 20px;
    line-height: 1.6;
}
.fdc-cert-sucesso-acoes {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.fdc-cert-codigo-info {
    font-size: 12px;
    color: #94a3b8;
}
.fdc-cert-codigo-info code {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}

/* Botão full */
.fdc-btn--full { width: 100%; justify-content: center; }

@media (max-width: 480px) {
    .fdc-cert-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD "MEU DESEMPENHO" — Caderno unificado
   ══════════════════════════════════════════════════════════════════════════ */

.fdc-meu-desempenho {
    background: linear-gradient(135deg, #1e293b 0%, #312e81 100%);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.fdc-meu-desempenho::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: rgba(99,102,241,.15);
    border-radius: 50%;
}

.fdc-meu-desempenho-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.fdc-meu-desempenho-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: .3px;
}

.fdc-meu-desempenho-pct {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

/* Barra de aproveitamento */
.fdc-meu-desempenho-barra-wrap {
    margin-bottom: 16px;
}

.fdc-meu-desempenho-barra-track {
    height: 8px;
    background: rgba(255,255,255,.15);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.fdc-meu-desempenho-barra-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .6s ease;
    min-width: 4px;
}

.fdc-meu-desempenho-barra-label {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* Grid de 4 cards internos */
.fdc-meu-desempenho-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.fdc-meu-desempenho-card {
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.fdc-mdc--azul    { background: rgba(59,130,246,.25);  }
.fdc-mdc--verde   { background: rgba(34,197,94,.25);   }
.fdc-mdc--vermelho{ background: rgba(239,68,68,.25);   }
.fdc-mdc--roxo    { background: rgba(168,85,247,.25);  }

.fdc-mdc-icone {
    font-size: 18px;
    line-height: 1;
}

.fdc-mdc-num {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.fdc-mdc-label {
    font-size: 10px;
    color: rgba(255,255,255,.7);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.fdc-meu-desempenho-vazio {
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,.6);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.1);
}

@media (max-width: 380px) {
    .fdc-meu-desempenho-grid { grid-template-columns: repeat(2,1fr); }
    .fdc-mdc-num { font-size: 18px; }
}

/* ══ Progresso de Conclusão do Curso — card separado do Desempenho ══
   Gradiente verde/teal (não roxo) de propósito: reforça visualmente que
   é uma métrica DIFERENTE de aproveitamento em simulados — progresso
   físico de módulos concluídos, nunca nota. */
.fdc-progresso-curso {
    background: linear-gradient(135deg, #064e3b 0%, #0f766e 100%);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 16px;
}

.fdc-progresso-curso-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.fdc-progresso-curso-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #ecfdf5;
    letter-spacing: .3px;
}

.fdc-progresso-curso-pct {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: #6ee7b7;
}

.fdc-progresso-curso-barra-track {
    height: 8px;
    background: rgba(255,255,255,.15);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.fdc-progresso-curso-barra-fill {
    height: 100%;
    border-radius: 4px;
    background: #34d399;
    transition: width .6s ease;
    min-width: 4px;
}

.fdc-progresso-curso-barra-label {
    font-size: 12px;
    color: rgba(255,255,255,.75);
}

/* ══════════════════════════════════════════════════════════════════════════
   MAPA MENTAL — D3.js Tree
   ══════════════════════════════════════════════════════════════════════════ */

.fdc-mapa-d3-wrap {
    width: 100%;
    overflow-x: auto;
    background: linear-gradient(135deg, #fafbff 0%, #f5f3ff 100%);
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    padding: 20px 8px;
    margin: 16px 0;
    min-height: 200px;
}

/* Container do caderno — herda os mesmos estilos do wrap D3 */
.fdc-mapa-d3-caderno-wrap {
    width: 100%;
    overflow-x: auto;
    background: linear-gradient(135deg, #fafbff 0%, #f5f3ff 100%);
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    padding: 20px 8px;
    margin: 16px 0;
    min-height: 200px;
}

.fdc-mapa-d3-svg {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
    overflow: visible;
}

.fdc-mapa-link {
    transition: stroke .2s;
}

.fdc-mapa-no circle {
    transition: r .15s, filter .15s;
    cursor: default;
}

.fdc-mapa-no:hover circle {
    r: 10;
    filter: drop-shadow(0 4px 8px rgba(99,102,241,.35)) !important;
}

.fdc-mapa-no text {
    font-family: system-ui, -apple-system, sans-serif;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(255,255,255,.9);
}

/* ══════════════════════════════════════════════════════════════════════════
   MERMAID.JS — Diagramas nas Apostilas
   ══════════════════════════════════════════════════════════════════════════ */

.fdc-apos-mermaid-wrap {
    margin: 20px 0 24px;
    background: #fafbff;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
}

.fdc-apos-mermaid-wrap .fdc-apos-esquema-titulo {
    padding: 12px 16px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #f1f5f9;
}

.fdc-apos-mermaid-wrap pre.mermaid,
.fdc-apos-mermaid-wrap .mermaid {
    padding: 16px;
    margin: 0;
    background: transparent;
    border: none;
    font-size: inherit;
    white-space: pre;
    overflow-x: auto;
}

/* Override Mermaid default SVG styles */
.fdc-apos-mermaid-wrap svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Mermaid flowchart node styles */
.fdc-apos-mermaid-wrap .label {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
}

.fdc-apos-mermaid-wrap .node rect,
.fdc-apos-mermaid-wrap .node circle,
.fdc-apos-mermaid-wrap .node ellipse {
    stroke-width: 2px !important;
}

@media (max-width: 480px) {
    .fdc-mapa-d3-wrap { padding: 12px 4px; }
    .fdc-mapa-no text { font-size: 10px !important; }
}

/* ── Mapa mental fallback (quando D3 não carrega) ─────────────────────── */
.fdc-mapa-fallback {
    padding: 16px;
    font-size: 13px;
    line-height: 2;
}
.fdc-mapa-linha {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}