/*
 * Clareza Acadêmica — detalhe do simulado (/simulados/s/<slug>/).
 * Escopo exclusivo da rota; raiz .detalhe-simulado-clarity-page.
 *
 * /simulados/<id>/ é rota legada e responde 301 para cá, então esta folha
 * atende as duas URLs.
 *
 * Reúne QUATRO fontes de estilo que viviam no template:
 *   - o <style> de ~676 linhas do bloco extra_css;
 *   - o <style> do modal de cobrança em WCoin, solto no meio do content;
 *   - o <style> do modal de materiais de apoio, idem;
 *   - o modal "alunos que fizeram", que era 100% style inline.
 *
 * A página tinha duas linguagens brigando: cartões claros no corpo e modais em
 * degradê escuro (slate/navy) por cima. Tudo passou para o tema claro.
 */

:root {
    --ds-primary: #667eea;
    --ds-primary-hover: #545fcb;
    --ds-primary-soft: #f0f1ff;
    --ds-secondary: #764ba2;
    --ds-secondary-soft: #f4effa;
    --ds-green: #10b981;
    --ds-gold: #f59e0b;
    --ds-gold-soft: #fef6e7;
    --ds-red: #ef4444;
    --ds-ink: #1f2937;
    --ds-gray: #6b7280;
    --ds-subtle: #9ca3af;
    --ds-light: #f9fafb;
    --ds-border: #e5e7eb;
    --ds-border-strong: #d8dce5;
    --ds-radius: 14px;
    --ds-shadow: 0 18px 50px rgba(31, 41, 55, 0.10);
}

body:has(.detalhe-simulado-clarity-page) {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(102, 126, 234, 0.08), transparent 32rem),
        #f6f7fb;
}

.detalhe-simulado-clarity-page {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ds-ink);
}

/* =========================================================================
   Hero
   =========================================================================
   Era um bloco em degradê roxo com título branco, sombra de texto e um botão
   primário DOURADO — a única superfície do site com essa combinação. Virou
   superfície branca: numa página de detalhe o conteúdo é o produto, e a ação
   principal passa a se destacar por ser a única sólida na primária. */
.ds-hero {
    padding: 1.75rem 0 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ds-border);
    background: #ffffff;
    color: var(--ds-ink);
}

.ds-hero > .row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: 0;
}

.ds-hero > .row > .col-lg-8,
.ds-hero > .row > .col-lg-4 {
    width: auto;
    max-width: none;
    padding: 0;
}

.ds-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--ds-light);
    color: var(--ds-gray);
}

.ds-badge-modo-sim { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.ds-badge-modo-bat { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.ds-badge-modo-des { background: var(--ds-secondary-soft); color: #5b3a80; }
.ds-badge-cat { background: var(--ds-primary-soft); color: var(--ds-primary); }
.ds-badge-free { background: rgba(16, 185, 129, 0.12); color: #047857; }
.ds-badge-priv { background: var(--ds-secondary-soft); color: #5b3a80; }
.ds-badge-access { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.ds-badge-draft { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.ds-badge-pub { background: rgba(16, 185, 129, 0.12); color: #047857; }
.ds-badge-rev { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.ds-badge-arch { background: #f1f5f9; color: #475569; }

.ds-title {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ds-ink);
}

.ds-codigo {
    margin-bottom: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ds-primary);
}

.ds-codigo i { font-size: 0.7rem; opacity: 0.75; margin-right: 2px; }

.ds-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.ds-meta > span,
.ds-alunos-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-light);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ds-gray);
}

.ds-meta strong { color: var(--ds-ink); font-weight: 700; }
.ds-meta i { color: var(--ds-subtle); }

/* O "N alunos" abre um modal: precisa parecer e agir como botão. */
.ds-alunos-trigger {
    min-height: 34px;
    border-color: var(--ds-border-strong);
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.ds-alunos-trigger:hover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
}

.ds-author-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.ds-author {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-light);
}

.ds-author small {
    display: block;
    font-size: 0.7rem;
    color: var(--ds-gray);
}

.ds-author a {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ds-primary);
    text-decoration: none;
}

.ds-author a:hover { color: var(--ds-primary-hover); text-decoration: underline; }

.ds-author img { border-radius: 50%; object-fit: cover; }

.ds-avatar {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ===== Comunidade =====
   As três marcas mantêm a cor de origem: é o único lugar da página onde a cor
   identifica um serviço externo, não um estado da interface. */
.ds-community { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ds-community-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--ds-border-strong);
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ds-gray);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.ds-community-chip i { font-size: 1rem; }
.ds-community-chip:hover { text-decoration: none; }
.ds-community-chip.wa i { color: #128c7e; }
.ds-community-chip.wa:hover { border-color: #128c7e; background: rgba(18, 140, 126, 0.08); color: #0b5f57; }
.ds-community-chip.tg i { color: #1b7fb0; }
.ds-community-chip.tg:hover { border-color: #1b7fb0; background: rgba(27, 127, 176, 0.08); color: #145e83; }
.ds-community-chip.ig i { color: #c13584; }
.ds-community-chip.ig:hover { border-color: #c13584; background: rgba(193, 53, 132, 0.08); color: #8f2762; }

/* =========================================================================
   Coluna de ação
   ========================================================================= */
.ds-cta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ds-btn-primary,
.ds-btn-ghost,
.ds-btn-pdf,
.ds-btn-conteudo,
.ds-btn-solicitar,
.ds-btn-material {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 1.2rem;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Era um degradê dourado com sombra colorida — o botão mais chamativo do site
   inteiro, numa paleta que não existe em nenhuma outra tela. */
.ds-btn-primary {
    border: none;
    background: var(--ds-primary);
    color: #ffffff;
}

.ds-btn-primary:hover { background: var(--ds-primary-hover); color: #ffffff; text-decoration: none; }

.ds-btn-primary.is-desafio { background: var(--ds-secondary); }
.ds-btn-primary.is-desafio:hover { background: #5b3a80; }

.ds-btn-primary.is-desbloquear { background: var(--ds-gold); color: #ffffff; }
.ds-btn-primary.is-desbloquear:hover { background: #d97706; }

.ds-btn-solicitar {
    border: none;
    background: var(--ds-primary);
    color: #ffffff;
}

.ds-btn-solicitar:hover { background: var(--ds-primary-hover); }

.ds-btn-ghost,
.ds-btn-pdf,
.ds-btn-conteudo,
.ds-btn-material {
    border: 1px solid var(--ds-border-strong);
    background: #ffffff;
    color: var(--ds-gray);
    font-weight: 600;
}

.ds-btn-ghost:hover,
.ds-btn-pdf:hover,
.ds-btn-conteudo:hover,
.ds-btn-material:hover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
    text-decoration: none;
}

.ds-btn-ghost:disabled { opacity: 0.6; cursor: not-allowed; }
.ds-btn-ghost.liked { border-color: var(--ds-red); color: var(--ds-red); }
.ds-btn-ghost.liked:hover { background: rgba(239, 68, 68, 0.08); color: #b91c1c; border-color: var(--ds-red); }

.ds-btn-pdf i { color: var(--ds-red); }
.ds-btn-conteudo i { color: var(--ds-secondary); }
.ds-btn-material i { color: var(--ds-secondary); }

.ds-btn-conteudo-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 0.68rem;
    font-weight: 800;
}

.ds-cta-nota {
    margin: -0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--ds-gray);
    text-align: center;
}

.ds-cta-ou {
    margin: 0.1rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-subtle);
    text-align: center;
}

/* ===== Avisos da coluna de ação ===== */
.ds-alert-priv,
.ds-nota-box {
    padding: 0.75rem 0.95rem;
    border-radius: var(--ds-radius);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ds-alert-priv {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: var(--ds-gold-soft);
    color: #92400e;
}

.ds-alert-priv strong {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
    color: #92400e;
}

.ds-alert-priv p { margin: 0; }

.ds-nota-box { border: 1px solid var(--ds-border); background: var(--ds-light); }
.ds-nota-box.is-recompensa { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.08); }
.ds-nota-box.is-recompensa strong { color: #047857; }
.ds-nota-box.is-desafio { border-color: rgba(118, 75, 162, 0.35); background: var(--ds-secondary-soft); }
.ds-nota-box.is-desafio strong { color: #5b3a80; }
.ds-nota-box strong { display: block; font-size: 0.85rem; }
.ds-nota-box small { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--ds-gray); }

/* =========================================================================
   Cartões de conteúdo
   ========================================================================= */
.ds-card {
    padding: 1.35rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: #ffffff;
}

.ds-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--ds-border);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--ds-ink);
}

.ds-card-title .ds-count {
    margin-left: auto;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

.ds-card-body { font-size: 0.92rem; line-height: 1.65; color: var(--ds-ink); }
.ds-card-body p:last-child { margin-bottom: 0; }

.ds-objetivo {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.55;
}

.ds-objetivo i { margin-top: 0.25rem; color: var(--ds-green); }

/* ===== Acordeão de disciplinas ===== */
.ds-card .accordion-item {
    margin-bottom: 0.5rem;
    border: 1px solid var(--ds-border);
    border-radius: 10px !important;
    overflow: hidden;
}

.ds-card .accordion-button {
    padding: 0.8rem 1rem;
    background: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ds-ink);
    border-radius: 10px !important;
}

.ds-card .accordion-button:not(.collapsed) {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
    box-shadow: none;
}

.ds-card .accordion-button:focus { box-shadow: none; }

.ds-card .accordion-button:focus-visible {
    outline: 3px solid rgba(102, 126, 234, 0.32);
    outline-offset: -3px;
}

.ds-card .accordion-body { font-size: 0.88rem; line-height: 1.6; color: var(--ds-gray); }

.ds-disc-count {
    margin-left: 0.5rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

/* =========================================================================
   Resumo das avaliações
   ========================================================================= */
.ds-rating-resumo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ds-rating-nota { text-align: center; }

.ds-rating-media {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ds-ink);
}

.ds-rating-de { font-size: 0.72rem; color: var(--ds-gray); }

.ds-stars { color: var(--ds-gold); font-size: 1.05rem; }

.ds-rating-total { font-size: 0.8rem; color: var(--ds-gray); }

.ds-dist { display: flex; flex-direction: column; gap: 0.35rem; }

.ds-dist-linha {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ds-dist-estrela {
    min-width: 1rem;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ds-ink);
}

.ds-dist-linha .fa-star { color: var(--ds-gold); font-size: 0.7rem; }

.ds-dist-barra {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: var(--ds-border);
    overflow: hidden;
}

.ds-dist-fill { height: 100%; border-radius: 4px; background: var(--ds-gold); }

.ds-dist-qtd {
    min-width: 1.5rem;
    font-size: 0.72rem;
    color: var(--ds-gray);
}

/* =========================================================================
   Ranking
   ========================================================================= */
.ds-rank {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: #ffffff;
}

.ds-rank img { border-radius: 50%; object-fit: cover; }

.ds-rank-pos {
    min-width: 44px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ds-subtle);
}

.ds-rank-pos.gold { color: #b45309; }
.ds-rank-pos.silver { color: #64748b; }
.ds-rank-pos.bronze { color: #92400e; }

.ds-rank-info { flex: 1; min-width: 0; }

.ds-rank-nome {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ds-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-rank-data { font-size: 0.75rem; color: var(--ds-gray); }

.ds-rank-score { flex-shrink: 0; text-align: right; }
.ds-rank-pts { font-weight: 800; font-size: 0.9rem; color: var(--ds-primary); }
.ds-rank-tempo { display: block; font-size: 0.74rem; color: var(--ds-gray); }

/* =========================================================================
   Barra lateral
   ========================================================================= */
.ds-stats,
.ds-creator {
    padding: 1.35rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: #ffffff;
}

.ds-stats h2,
.ds-creator h2 {
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--ds-ink);
}

.ds-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.ds-stat {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-light);
}

.ds-stat > i { font-size: 1.1rem; color: var(--ds-primary); }
.ds-stat-val { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.1; color: var(--ds-ink); }
.ds-stat-lbl { display: block; font-size: 0.72rem; color: var(--ds-gray); }
.ds-stat-sub { display: block; margin-top: 0.1rem; font-size: 0.66rem; color: var(--ds-subtle); }

.ds-completion {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ds-border);
}

.ds-bar-bg {
    height: 8px;
    margin-bottom: 0.35rem;
    border-radius: 999px;
    background: var(--ds-border);
    overflow: hidden;
}

.ds-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--ds-green);
    transition: width 0.6s ease;
}

.ds-completion small {
    display: block;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ds-gray);
}

/* Pulsava sem parar em loop infinito ao lado do conteúdo. */
.ds-first-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 999px;
    background: var(--ds-gold-soft);
    color: #92400e;
    font-size: 0.8rem;
    font-weight: 700;
}

.ds-preview-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 44px;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--ds-border-strong);
    border-radius: 9px;
    background: #ffffff;
    color: var(--ds-gray);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.ds-preview-btn:hover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
}

.ds-creator { text-align: center; }
.ds-creator img { border-radius: 50%; object-fit: cover; margin-bottom: 0.5rem; }
.ds-avatar-lg { width: 64px; height: 64px; font-size: 1.6rem; margin: 0 auto 0.5rem; }
.ds-creator-nome { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 700; color: var(--ds-ink); }
.ds-creator-bio { margin: 0 0 0.75rem; font-size: 0.82rem; line-height: 1.5; color: var(--ds-gray); }

.ds-creator-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 9px;
    background: #ffffff;
    color: var(--ds-gray);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.ds-creator-link:hover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
    text-decoration: none;
}

/* =========================================================================
   Modais Bootstrap
   =========================================================================
   Eram três variantes: .ds-modal com cabeçalho em degradê, .ds-modal-dark com
   fundo slate/navy e .ds-modal-danger em vinho escuro. Todos claros agora. */
.ds-modal .modal-content {
    border: 1px solid var(--ds-border);
    border-radius: 16px;
    background: #ffffff;
    color: var(--ds-ink);
    box-shadow: var(--ds-shadow);
    overflow: hidden;
}

.ds-modal .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-light);
}

.ds-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 750;
    color: var(--ds-ink);
}

.ds-modal .modal-title i { color: var(--ds-primary); }
.ds-modal.ds-modal-danger .modal-title i { color: var(--ds-gold); }
.ds-modal .modal-footer { border-top: 1px solid var(--ds-border); }
.ds-modal .modal-body { font-size: 0.9rem; line-height: 1.6; }

.ds-modal .form-control {
    border: 1px solid var(--ds-border-strong);
    border-radius: 9px;
    background: #ffffff;
    color: var(--ds-ink);
    font-size: 0.88rem;
}

.ds-modal .form-control:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
}

.ds-modal .form-text { color: var(--ds-gray); }

.ds-modal-simulado {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    background: var(--ds-light);
    font-size: 0.88rem;
}

.ds-modal-nota {
    font-size: 0.8rem;
    color: var(--ds-gray);
}

.ds-modal .btn {
    min-height: 40px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.85rem;
}

.ds-modal .btn-primary { background: var(--ds-primary); border-color: var(--ds-primary); }
.ds-modal .btn-primary:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }

/* ===== Modal de pré-visualização ===== */
.preview-question {
    padding: 1.1rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-light);
}

.preview-question:last-child { margin-bottom: 0; }

.preview-q-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.preview-q-num {
    min-width: 28px;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    background: var(--ds-primary);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.preview-q-badge {
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
    font-size: 0.72rem;
    font-weight: 600;
}

.preview-q-disc {
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    font-size: 0.72rem;
    font-weight: 600;
}

.preview-enunciado {
    margin-bottom: 0.7rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ds-ink);
}

.preview-enunciado p { margin: 0 0 0.3rem; }
.preview-enunciado p:last-child { margin-bottom: 0; }

.preview-opcoes { list-style: none; margin: 0; padding: 0; }

.preview-opcoes li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.87rem;
    color: var(--ds-ink);
}

.preview-opcoes li p { display: inline; margin: 0; }
.preview-opcao-letra { min-width: 18px; font-weight: 700; color: var(--ds-secondary); }

.preview-discursiva {
    padding: 0.75rem;
    border: 1px dashed var(--ds-border-strong);
    border-radius: 8px;
    color: var(--ds-gray);
    font-style: italic;
    text-align: center;
}

.preview-more-info {
    padding: 0.9rem;
    color: var(--ds-gray);
    font-size: 0.85rem;
    text-align: center;
}

/* =========================================================================
   Modal de cobrança em WCoin
   =========================================================================
   Era um cartão em degradê slate/navy com texto claro, sobre uma página clara. */
.wcoin-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31, 41, 55, 0.55);
}

.wcoin-overlay.active { display: flex; }

.wcoin-box {
    width: 100%;
    max-width: 380px;
    padding: 1.75rem;
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--ds-shadow);
    text-align: center;
}

.wcoin-icon { font-size: 2.2rem; margin-bottom: 0.6rem; }

.wcoin-title {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 750;
    color: var(--ds-ink);
}

.wcoin-cost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.7rem 0;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 999px;
    background: var(--ds-gold-soft);
    color: #92400e;
    font-size: 1.05rem;
    font-weight: 800;
}

.wcoin-cost i { color: var(--ds-gold); }

.wcoin-saldo { margin-bottom: 1.1rem; font-size: 0.82rem; color: var(--ds-gray); }
.wcoin-saldo b { color: #047857; }

.wcoin-replay { margin-top: 0.6rem; font-size: 0.75rem; color: var(--ds-gray); }

.wcoin-actions { display: flex; justify-content: center; gap: 0.6rem; }

.wcoin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.55rem 1.35rem;
    border-radius: 9px;
    font-size: 0.87rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.wcoin-btn-go { border: none; background: var(--ds-primary); color: #ffffff; }
.wcoin-btn-go:hover { background: var(--ds-primary-hover); color: #ffffff; text-decoration: none; }

.wcoin-btn-cancel {
    border: 1px solid var(--ds-border-strong);
    background: #ffffff;
    color: var(--ds-gray);
}

.wcoin-btn-cancel:hover { border-color: var(--ds-primary); background: var(--ds-primary-soft); color: var(--ds-primary-hover); }

/* =========================================================================
   Modal de materiais de apoio
   ========================================================================= */
.mat-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31, 41, 55, 0.55);
}

.mat-overlay.active { display: flex; }

.mat-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--ds-shadow);
    overflow: hidden;
}

.mat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-light);
}

.mat-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    color: var(--ds-ink);
}

.mat-header h2 i { color: var(--ds-secondary); }

.mat-close {
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-gray);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.mat-close:hover { background: var(--ds-border); color: var(--ds-ink); }

.mat-body { flex: 1; padding: 1rem 1.35rem; overflow-y: auto; }

.mat-item {
    padding: 0.85rem;
    margin-bottom: 0.7rem;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.2s;
}

.mat-item:hover { border-color: var(--ds-border-strong); }

.mat-item-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.mat-item-icon { width: 32px; font-size: 1.25rem; text-align: center; }
.mat-item-icon .fa-file-pdf { color: var(--ds-red); }
.mat-item-icon .fa-file-word { color: #2563eb; }
.mat-item-icon .fa-file-excel { color: #16a34a; }
.mat-item-icon .fa-file-powerpoint { color: #ea580c; }
.mat-item-icon .fa-file-alt,
.mat-item-icon .fa-file-code,
.mat-item-icon .fa-file-csv,
.mat-item-icon .fa-file { color: var(--ds-subtle); }

.mat-item-info { flex: 1; min-width: 0; }
.mat-item-title { font-size: 0.9rem; font-weight: 700; color: var(--ds-ink); }
.mat-item-meta { margin-top: 0.1rem; font-size: 0.75rem; color: var(--ds-gray); }

.mat-item-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.mat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.mat-btn-buy { background: var(--ds-primary); color: #ffffff; }
.mat-btn-buy:hover { background: var(--ds-primary-hover); color: #ffffff; text-decoration: none; }

.mat-btn-open { background: var(--ds-green); color: #ffffff; }
.mat-btn-open:hover { background: #059669; color: #ffffff; text-decoration: none; }

.mat-btn-disabled {
    border: 1px solid var(--ds-border);
    background: var(--ds-light);
    color: var(--ds-subtle);
    cursor: not-allowed;
}

.mat-btn-flag {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ds-border-strong);
    border-radius: 9px;
    background: #ffffff;
    color: var(--ds-gray);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.mat-btn-flag:hover { border-color: var(--ds-gold); color: var(--ds-gold); }
.mat-btn-flag.flagged { border-color: var(--ds-gold); color: var(--ds-gold); cursor: default; }

.mat-denuncia-form { display: none; margin-top: 0.5rem; }

.mat-denuncia-form textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--ds-border-strong);
    border-radius: 9px;
    background: #ffffff;
    color: var(--ds-ink);
    font-size: 0.82rem;
    resize: vertical;
}

.mat-denuncia-form textarea:focus {
    outline: none;
    border-color: var(--ds-gold);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.mat-denuncia-form button {
    min-height: 38px;
    margin-top: 0.35rem;
    padding: 0.35rem 0.85rem;
    border: none;
    border-radius: 9px;
    background: var(--ds-gold);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.mat-denuncia-form button:hover { background: #d97706; }

.mat-footer {
    padding: 0.8rem 1.35rem;
    border-top: 1px solid var(--ds-border);
    text-align: center;
}

.mat-saldo { font-size: 0.82rem; color: var(--ds-gray); }
.mat-saldo b { color: #047857; }

/* =========================================================================
   Modal "alunos que fizeram"
   =========================================================================
   Era um bloco escuro montado inteiramente com style inline, incluindo os
   handlers onmouseover/onmouseout de cada avatar. */
.ds-alunos-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31, 41, 55, 0.55);
}

.ds-alunos-overlay.active { display: flex; }

.ds-alunos-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--ds-shadow);
    overflow: hidden;
}

.ds-alunos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-light);
}

.ds-alunos-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--ds-ink);
}

.ds-alunos-header h2 i { color: var(--ds-subtle); }
.ds-alunos-header h2 span { color: var(--ds-gray); font-weight: 600; }

.ds-alunos-body { flex: 1; padding: 1rem 1.2rem; overflow-y: auto; }

.ds-alunos-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.ds-aluno {
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 50%;
    background: var(--ds-light);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
}

.ds-aluno:hover { border-color: var(--ds-primary); transform: scale(1.06); }
.ds-aluno img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ds-aluno-inicial {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--ds-gray);
    font-size: 0.85rem;
    font-weight: 700;
}

/* =========================================================================
   Toast
   =========================================================================
   O showToast() montava cor, sombra e animação num style.cssText de 8 linhas e
   injetava um <style> no <head> a cada carga. Agora são classes. */
.ds-toast {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    max-width: 420px;
    padding: 13px 17px;
    border: 1px solid var(--ds-border);
    border-left: 4px solid var(--ds-primary);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--ds-shadow);
    color: var(--ds-ink);
    font-size: 0.88rem;
    font-weight: 500;
    animation: dsToastIn 0.3s ease;
}

.ds-toast.is-success { border-left-color: var(--ds-green); }
.ds-toast.is-success > i { color: var(--ds-green); }
.ds-toast.is-error { border-left-color: var(--ds-red); }
.ds-toast.is-error > i { color: var(--ds-red); }
.ds-toast.is-warning { border-left-color: var(--ds-gold); }
.ds-toast.is-warning > i { color: var(--ds-gold); }
.ds-toast.is-info { border-left-color: var(--ds-primary); }
.ds-toast.is-info > i { color: var(--ds-primary); }
.ds-toast.is-leaving { animation: dsToastOut 0.3s ease forwards; }

@keyframes dsToastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes dsToastOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* =========================================================================
   Responsivo
   ========================================================================= */

/* 📱 Tablet (769–1279) */
@media (min-width: 769px) and (max-width: 1279px) {
    .container { max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (min-width: 769px) and (max-width: 900px) {
    .container { padding-left: 0.2rem; padding-right: 0.2rem; }
}

@media (max-width: 991px) {
    /* A coluna de ação vira uma faixa de botões lado a lado antes de empilhar. */
    .ds-cta { flex-direction: row; flex-wrap: wrap; }
    .ds-cta > * { flex: 1 1 200px; }
    .ds-cta > .ds-alert-priv,
    .ds-cta > .ds-nota-box,
    .ds-cta > .ds-cta-nota,
    .ds-cta > .ds-cta-ou { flex: 1 1 100%; }
}

@media (min-width: 701px) and (max-width: 991px) {
    .ds-hero .ds-cta {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .ds-hero .ds-cta > * {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .container { max-width: 100%; padding-left: 0.25rem; padding-right: 0.25rem; }
    .ds-hero { padding: 1.35rem 0 1.25rem; }
    .ds-title { font-size: 1.4rem; }
    .ds-cta { flex-direction: column; }
    .ds-cta > * { flex: 1 1 auto; width: 100%; }
    .ds-rating-resumo { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

@media (max-width: 700px) {
    .ds-hero > .row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .ds-title { font-size: 1.2rem; }
    .ds-meta > span,
    .ds-alunos-trigger { font-size: 0.72rem; padding: 0.25rem 0.6rem; }
    .ds-badge { font-size: 0.7rem; padding: 0.22rem 0.55rem; }
    .ds-stat-grid { grid-template-columns: 1fr; }
    .ds-toast { top: 76px; right: 10px; left: 10px; min-width: 0; }
    .wcoin-actions { flex-direction: column; }
}

/* =========================================================================
   Foco e movimento reduzido
   ========================================================================= */
.ds-btn-primary:focus-visible,
.ds-btn-ghost:focus-visible,
.ds-btn-pdf:focus-visible,
.ds-btn-conteudo:focus-visible,
.ds-btn-solicitar:focus-visible,
.ds-btn-material:focus-visible,
.ds-preview-btn:focus-visible,
.ds-creator-link:focus-visible,
.ds-community-chip:focus-visible,
.ds-alunos-trigger:focus-visible,
.ds-author a:focus-visible,
.ds-aluno:focus-visible,
.wcoin-btn:focus-visible,
.mat-btn:focus-visible,
.mat-btn-flag:focus-visible,
.mat-close:focus-visible {
    outline: 3px solid rgba(102, 126, 234, 0.32);
    outline-offset: 2px;
    border-radius: 9px;
}

@media (prefers-reduced-motion: reduce) {
    .detalhe-simulado-clarity-page *,
    .detalhe-simulado-clarity-page *::before,
    .detalhe-simulado-clarity-page *::after,
    .wcoin-overlay *,
    .mat-overlay *,
    .ds-alunos-overlay *,
    .ds-toast {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}