/* Trilhas no painel da profissional (js/painel-trilhas.js). Cores: lilás da Afeto. */
.pt-cartao { background: #fff; border: 1px solid #e2e8f0; border-radius: 22px; padding: 20px 22px; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.06); text-align: left; }
.pt-aviso { color: #64748b; font-weight: 700; font-size: 14px; margin: 8px 0; }
.pt-erro { color: #b91c1c; }
.pt-sub { color: #64748b; font-size: 13.5px; font-weight: 600; margin: 4px 0 12px; }
.pt-nota { color: #94a3b8; font-size: 12px; font-weight: 600; margin-top: 8px; }
.pt-barra { height: 10px; border-radius: 999px; background: #ede9fe; overflow: hidden; margin: 10px 0 6px; }
.pt-barra-f { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lilas, #a78bfa), var(--lilas-escuro, #7c3aed)); transition: width 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); }

/* Botões */
.pt-btn, .pt-btn-contorno, .pt-voltar { font: inherit; font-weight: 800; font-size: 14px; border-radius: 14px; padding: 11px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pt-btn { background: linear-gradient(135deg, var(--lilas, #a78bfa), var(--lilas-escuro, #7c3aed)); color: #fff; border: none; box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3); }
.pt-btn-contorno { background: #fff; color: var(--lilas-escuro, #7c3aed); border: 2px solid var(--lilas, #a78bfa); }
.pt-voltar { background: none; border: none; color: #64748b; padding: 8px 4px; margin-bottom: 8px; }
.pt-btn:disabled, .pt-btn-contorno:disabled { opacity: 0.6; cursor: wait; }
.pt-espera:disabled { opacity: 1; cursor: default; color: #6b7280; border-color: #d1d5db; }
.pt-btn:focus-visible, .pt-btn-contorno:focus-visible, .pt-voltar:focus-visible, .pt-trilha:focus-visible, .pt-ctl:focus-visible, .pt-play-grande:focus-visible { outline: 3px solid var(--lilas-escuro, #7c3aed); outline-offset: 2px; }
.pt-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pt-centro { justify-content: center; }

/* Progresso geral */
.pt-geral { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; }
.pt-geral h3 { margin: 0; font-size: 18px; font-weight: 900; }
.pt-geral p { margin: 4px 0 0; color: #64748b; font-size: 13.5px; font-weight: 700; }
.pt-geral-n { font-size: 34px; font-weight: 900; color: var(--lilas-escuro, #7c3aed); letter-spacing: -1px; }
.pt-geral .pt-barra { grid-column: 1 / -1; }

/* Cartões das trilhas */
.pt-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pt-trilha { font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; margin: 0; transition: transform 0.2s, box-shadow 0.2s; }
.pt-trilha:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(139, 92, 246, 0.16); }
.pt-trilha-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pt-trilha-ic, .pt-item-ic { width: 44px; height: 44px; border-radius: 14px; background: #f5f3ff; color: var(--lilas-escuro, #7c3aed); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.pt-trilha-t { font-size: 16px; font-weight: 900; color: #1e293b; }
.pt-trilha-d { font-size: 13px; color: #64748b; font-weight: 600; }
.pt-trilha-p { font-size: 12.5px; color: #64748b; font-weight: 700; margin: 0; }
.pt-selo-mini, .pt-selo-linha { color: #b45309; font-weight: 900; font-size: 12.5px; }
.pt-selo-mini { background: #fef3c7; padding: 4px 10px; border-radius: 999px; }
.pt-selo-linha { margin: 10px 0 0; font-size: 14px; }
.pt-com-selo { border-color: #fcd34d; }
.pt-bloqueado { opacity: 0.7; }
.pt-trilha.pt-bloqueado { cursor: not-allowed; }
.pt-trilha.pt-bloqueado:hover { transform: none; box-shadow: none; }

/* Módulos */
.pt-modulo-topo { display: flex; gap: 14px; align-items: center; }
.pt-modulo-n { width: 40px; height: 40px; border-radius: 50%; background: #f5f3ff; color: var(--lilas-escuro, #7c3aed); font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pt-feito .pt-modulo-n { background: #dcfce7; color: #15803d; }
.pt-modulo-t b { display: block; font-size: 15.5px; font-weight: 900; }
.pt-modulo-t span { font-size: 12.5px; color: #64748b; font-weight: 700; }
.pt-itens { margin-top: 12px; }
.pt-item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pt-item-t { flex: 1; min-width: 150px; }
.pt-item-t b { display: block; font-size: 14.5px; font-weight: 900; }
.pt-item-t span { font-size: 12.5px; color: #64748b; font-weight: 700; }
.pt-item-ebook { background: #fef3c7; color: #b45309; }
.pt-item-bloco { border-top: 1px solid #f1f5f9; padding: 10px 0; }
.pt-item-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-item-linha .pt-btn-contorno { padding: 8px 14px; font-size: 13px; }
.pt-visto { font-size: 12.5px; font-weight: 700; color: #64748b; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pt-palco { margin-top: 12px; }

/* Player: bordas arredondadas no padrão do site; em tela cheia volta ao normal */
.pt-player { position: relative; background: #0f172a; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.25); user-select: none; }
.pt-video { width: 100%; height: 100%; display: block; background: #0f172a; object-fit: contain; }
.pt-play-grande { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: none; cursor: pointer; font-size: 28px; color: #fff; background: rgba(124, 58, 237, 0.85); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(124, 58, 237, 0.5); transition: transform 0.2s, opacity 0.2s; padding-left: 5px; }
.pt-play-grande:hover { transform: scale(1.08); }
.pt-tocando .pt-play-grande { opacity: 0; pointer-events: none; }
.pt-controles { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 22px 14px 12px; background: linear-gradient(transparent, rgba(15, 23, 42, 0.85)); color: #fff; }
.pt-ctl { background: rgba(255, 255, 255, 0.14); border: none; color: #fff; border-radius: 12px; min-width: 38px; height: 38px; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.pt-ctl:hover { background: rgba(255, 255, 255, 0.26); }
.pt-tempo { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; }
.pt-busca { flex: 1; min-width: 60px; accent-color: #a78bfa; height: 4px; cursor: pointer; }
.pt-falhou::after { content: 'Não foi possível reproduzir. Recarregue a página e tente de novo.'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #fff; font-weight: 700; background: rgba(15, 23, 42, 0.9); }
.pt-player:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; box-shadow: none; }
.pt-player:-webkit-full-screen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .pt-barra-f { animation: none; transition: none; }
}
@media (max-width: 560px) {
  .pt-geral-n { font-size: 26px; }
  .pt-controles { gap: 6px; padding: 16px 8px 8px; }
  .pt-player { border-radius: 16px; }
}

/* Tela das Trilhas: fundo roxo; os cartões brancos ficam como estão e o texto solto fica branco. */
body.tela-trilhas { background: linear-gradient(180deg, #7c3aed 0%, #8b5cf6 55%, #a78bfa 100%); background-attachment: fixed; }
body.tela-trilhas #secao-trilhas .main-header h1,
body.tela-trilhas #secao-trilhas .main-header p { color: #fff; }
body.tela-trilhas #secao-trilhas .gr-trilhas-reais > .pt-aviso,
body.tela-trilhas #secao-trilhas .gr-trilhas-reais > .pt-nota,
body.tela-trilhas #secao-trilhas .gr-trilhas-reais > .pt-voltar { color: #fff; }
body.tela-trilhas #secao-trilhas .gr-trilhas-reais > .pt-erro { color: #fecaca; }
body.tela-trilhas #secao-trilhas .gr-trilhas-reais > .pt-nota { opacity: 0.85; }
body.tela-trilhas #secao-trilhas > .gr-btn-contorno { border-color: #fff; }

/* Continuar de onde parou */
.pt-continuar { width: 100%; display: flex; align-items: center; gap: 14px; cursor: pointer; font: inherit; }
.pt-continuar > i { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--lilas, #a78bfa), var(--lilas-escuro, #7c3aed)); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding-left: 3px; }
.pt-continuar-t small { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.8px; color: var(--lilas-escuro, #7c3aed); }
.pt-continuar-t b { display: block; font-size: 15.5px; font-weight: 900; color: #1e293b; }
.pt-continuar-t span { font-size: 12.5px; font-weight: 700; color: #64748b; }

/* Puxar a tela além do fim (efeito elástico) continua mostrando roxo, nunca o branco. */
html.tela-trilhas { background: #8b5cf6; }
body.tela-trilhas { min-height: 100vh; }

/* Trilha aberta (desenho novo): cartão da trilha com contador, barra por módulo, vídeo e
   e-book; módulos em cartões com o botão do quiz. */
.tv-cab { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 0; border-radius: 28px; box-shadow: 0 14px 34px rgba(46,16,101,0.25); }
.tv-cab-topo { display: flex; align-items: flex-start; gap: 12px; }
.tv-cab-t { flex: 1; min-width: 0; }
.tv-cab h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.3px; color: #1f1f1f; }
.tv-desc { margin: 4px 0 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: #666666; }
.tv-contador { flex: none; width: 48px; height: 48px; border-radius: 24px; background: #ede9fe; color: #6d28d9; font-size: 15px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.tv-info { margin: 0; font-size: 13px; font-weight: 700; color: #666666; }
.tv-midia { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #fff6d6; border: 1.5px solid #f5d77a; }
.tv-video { background: #f5f3ff; border-color: #ddd6fe; }
.tv-midia-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #ffe9a8; color: #7a4b00; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.tv-video .tv-midia-ic { background: #ede9fe; color: #6d28d9; }
.tv-midia-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tv-midia-t b { font-size: 15px; font-weight: 900; color: #5c3600; }
.tv-video .tv-midia-t b { color: #4c1d95; }
.tv-midia-t span { font-size: 12px; font-weight: 700; color: #7a4b00; }
.tv-video .tv-midia-t span { color: #6d28d9; }
.tv-midia-btn { flex: none; border: 0; background: none; padding: 8px 4px; font: inherit; font-size: 14px; font-weight: 900; color: #5c3600; cursor: pointer; }
.tv-video .tv-midia-btn { color: #6d28d9; }
.tv-titulo-modulos { margin: 18px 0 12px; font-size: 18px; font-weight: 900; color: #1f1f1f; }
body.tela-trilhas .tv-titulo-modulos { color: #fff; }
.tv-modulo { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 0; border-radius: 24px; box-shadow: 0 8px 24px rgba(46,16,101,0.18); margin-bottom: 12px; }
.tv-mod-topo { display: flex; align-items: center; gap: 12px; }
.tv-mod-n { flex: none; width: 40px; height: 40px; border-radius: 20px; background: #ede9fe; color: #7c3aed; font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.tv-atual .tv-mod-n { background: #7c3aed; color: #fff; }
.pt-feito .tv-mod-n { background: #10b981; color: #fff; }
.tv-mod-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tv-mod-t b { font-size: 16px; font-weight: 900; line-height: 1.25; color: #1f1f1f; }
.tv-mod-t span { font-size: 12.5px; font-weight: 700; color: #64748b; }
.tv-chip { flex: none; padding: 3px 10px; border-radius: 10px; background: #fff0c2; color: #7a4b00; font-size: 11px; font-weight: 800; }
.tv-chip-pts { background: #ecfdf5; color: #047857; }
.tv-quiz { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 23px; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.tv-quiz-leve { background: #ede9fe; color: #6d28d9; }
.tv-quiz:disabled { cursor: default; color: #6b7280; background: #f1f5f9; }
.tv-quiz:focus-visible, .tv-midia-btn:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.tv-extra { margin-top: 0; }
.tv-extra-t { display: block; font-size: 11px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: #94a3b8; }
body.tela-trilhas #secao-trilhas > .gr-ver-ranking { display: flex; justify-content: center; margin-top: 8px; background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.6); }