/* ===================================================================== MÓDULO CURSOS — catálogo de cursos em vídeo. Prefixo `cu-`, tudo contido em `#module-cursos.nv-app`. ⚠️ NENHUMA classe daqui contém "-card": o spa-modules.css tem uma regra `[class*="-card"]` com `!important` que redesenha o que casar. ⚠️ `-webkit-text-fill-color` explícito onde há cor de texto que importa: neste projeto, quando ele existe (herdado do `.page-header` e de regras de tema), é ELE que pinta — `color` sozinho perde. ===================================================================== */ #module-cursos.nv-app { --cu-fundo-player: oklch(0.12 0.006 250); max-width: 1240px; margin-inline: auto; } #module-cursos .cu-topo { margin-bottom: 1.1rem; } #module-cursos .cu-topo h1 { font: 650 30px/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--text-1); -webkit-text-fill-color: var(--text-1); margin: 0; } #module-cursos .cu-carregando { color: var(--text-3); font-size: 13px; padding: 2rem 0; } #module-cursos .cu-eyebrow { font: 500 11px/1 var(--font-sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); } #module-cursos .cu-meta { margin: 8px 0 0; font-size: 12px; color: var(--text-3); } #module-cursos .cu-meta b { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; } #module-cursos .cu-barra { height: 4px; background: var(--bg-3); border-radius: 99px; overflow: hidden; } #module-cursos .cu-barra i { display: block; height: 100%; background: var(--accent); border-radius: 99px; } /* vazio é ausência: tracejado e apagado, nunca com peso de dado */ #module-cursos .cu-vazio { display: grid; gap: 6px; justify-items: start; padding: 28px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--text-3); font-size: 13px; } #module-cursos .cu-vazio strong { color: var(--text-2); font-weight: 600; font-size: 14px; } #module-cursos .cu-vazio .nv-btn { margin-top: 8px; } /* ── termo de ciência (conteúdo feito com IA) ───────────────────────── */ #module-cursos .cu-termo-palco { position: relative; display: grid; place-items: center; min-height: 640px; padding: 28px 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-1); } /* o catálogo borrado ao fundo: dá pra ver que existe, não dá pra usar */ #module-cursos .cu-termo-fundo { position: absolute; inset: 0; padding: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-content: start; filter: blur(7px); opacity: 0.5; pointer-events: none; } #module-cursos .cu-termo-fundo i { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: linear-gradient(140deg, oklch(0.36 0.09 var(--cu-h)), oklch(0.22 0.05 var(--cu-h))); } #module-cursos .cu-termo { position: relative; width: min(100%, 600px); padding: 28px; background: var(--bg-0); border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: 0 24px 60px oklch(0 0 0 / 0.55); color: var(--text-1); } #module-cursos .cu-termo--leitura { max-height: min(88vh, 720px); overflow-y: auto; } #module-cursos .cu-termo--leitura::backdrop { background: oklch(0.1 0.01 250 / 0.72); } #module-cursos .cu-termo__selo { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); -webkit-text-fill-color: var(--accent); font: 600 11.5px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; } #module-cursos .cu-termo__selo svg { width: 14px; height: 14px; } #module-cursos .cu-termo h2 { font: 650 24px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 14px 0 6px; text-wrap: balance; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-termo--leitura h2 { margin-top: 0; } #module-cursos .cu-termo__lead { margin: 0 0 18px; color: var(--text-2); font-size: 14px; line-height: 1.5; } #module-cursos .cu-termo__pontos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; } #module-cursos .cu-termo__pontos li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; } #module-cursos .cu-termo__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-2); color: var(--text-1); } #module-cursos .cu-termo__ico svg { width: 16px; height: 16px; } #module-cursos .cu-termo__pontos b { display: block; font: 600 14px/1.35 var(--font-sans); color: var(--text-1); margin-bottom: 2px; } #module-cursos .cu-termo__pontos div > span { color: var(--text-2); font-size: 13.5px; line-height: 1.5; } /* a caixa de aceite: o estado é FORMA — marcada, a moldura inteira muda */ #module-cursos .cu-termo__aceite { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; margin-bottom: 16px; border-radius: var(--r-md); cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg-1); } #module-cursos .cu-termo__aceite:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } #module-cursos .cu-termo__aceite:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } #module-cursos .cu-termo__aceite input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; } #module-cursos .cu-termo__aceite span { font: 500 13.5px/1.5 var(--font-sans); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-termo__acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; align-items: center; } #module-cursos .cu-termo__acoes .nv-btn-primary { -webkit-text-fill-color: var(--accent-fg); } #module-cursos .cu-termo__pe { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-3); } #module-cursos .cu-termo--leitura .cu-termo__pe { margin: 0 0 16px; } /* o lembrete fixo embaixo de cada aula */ #module-cursos .cu-lembrete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 22px 0 0; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-1); color: var(--text-2); font-size: 12.5px; } #module-cursos .cu-lembrete svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-3); } #module-cursos .cu-lembrete button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--text-1); -webkit-text-fill-color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; } #module-cursos .cu-lembrete button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── catálogo ─────────────────────────────────────────────────────── */ #module-cursos .cu-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 1.1rem; } #module-cursos .cu-resumo { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); } #module-cursos .cu-resumo b { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; } #module-cursos .cu-busca { width: min(100%, 280px); } #module-cursos .cu-campo { width: 100%; min-height: 38px; padding: 0 12px; border-radius: var(--r-md); background: var(--bg-3); border: 1px solid var(--border-subtle); color: var(--text-1); -webkit-text-fill-color: var(--text-1); font: 400 13.5px/1.2 var(--font-sans); } #module-cursos .cu-campo:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } #module-cursos .cu-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; } #module-cursos .cu-filtros button { min-height: 32px; padding: 0 13px; border-radius: 99px; cursor: pointer; border: 1px solid var(--border-subtle); background: none; color: var(--text-3); -webkit-text-fill-color: var(--text-3); font: 500 12.5px/1 var(--font-sans); } #module-cursos .cu-filtros button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #module-cursos .cu-filtros button[aria-pressed="true"] { background: var(--bg-3); border-color: var(--border-strong); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } /* A CAPA. Sem imagem: o campo de cor da matéria, o ícone grande e translúcido à direita e um selo com o mesmo ícone. Com imagem: a imagem, e um véu escuro embaixo pra o título continuar legível em qualquer foto. */ #module-cursos .cu-capa { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; padding: 14px; border-radius: var(--r-md); overflow: hidden; background: radial-gradient(120% 140% at 0% 100%, oklch(0.40 0.11 var(--cu-h)), oklch(0.20 0.05 var(--cu-h)) 70%); border: 1px solid oklch(0.5 0.08 var(--cu-h) / 0.4); transition: transform .15s ease, border-color .15s ease; } #module-cursos .cu-capa__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #module-cursos .cu-capa.tem-imagem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0 0 0 / 0.72), oklch(0 0 0 / 0) 55%); } #module-cursos .cu-capa__fundo { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 46%; aspect-ratio: 1; color: oklch(0.86 0.10 var(--cu-h) / 0.22); } #module-cursos .cu-capa__fundo svg { width: 100%; height: 100%; stroke-width: 1.4; } #module-cursos .cu-capa__selo { position: absolute; top: 10px; left: 12px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: oklch(0.16 0.02 var(--cu-h) / 0.55); color: oklch(0.93 0.07 var(--cu-h)); } #module-cursos .cu-capa__selo svg { width: 19px; height: 19px; } #module-cursos .cu-capa__sigla { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 64px/1 var(--font-display); letter-spacing: -0.04em; color: oklch(0.86 0.10 var(--cu-h) / 0.28); -webkit-text-fill-color: oklch(0.86 0.10 var(--cu-h) / 0.28); } #module-cursos .cu-capa__aulas, #module-cursos .cu-capa__rascunho { position: absolute; top: 12px; z-index: 1; font: 500 11px/1 var(--font-mono); color: oklch(0.94 0.04 var(--cu-h)); -webkit-text-fill-color: oklch(0.94 0.04 var(--cu-h)); background: oklch(0.14 0.02 var(--cu-h) / 0.7); padding: 5px 7px; border-radius: 6px; } #module-cursos .cu-capa__aulas { right: 12px; } #module-cursos .cu-capa__rascunho { right: 12px; top: 40px; border: 1px dashed oklch(0.9 0.05 var(--cu-h) / 0.6); } #module-cursos .cu-capa__titulo { position: relative; z-index: 1; max-width: 78%; font: 650 17px/1.2 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; color: oklch(0.97 0.03 var(--cu-h)); -webkit-text-fill-color: oklch(0.97 0.03 var(--cu-h)); } #module-cursos .cu-capa.tem-imagem .cu-capa__titulo { max-width: 100%; color: #fff; -webkit-text-fill-color: #fff; } #module-cursos .cu-capa__barra { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 3px; background: oklch(0.14 0.02 var(--cu-h) / 0.7); } #module-cursos .cu-capa__barra i { display: block; height: 100%; background: var(--accent); } #module-cursos .cu-capa__cadeado { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; } #module-cursos .cu-capa__cadeado span { font-size: 12px; font-weight: 500; color: var(--text-1); -webkit-text-fill-color: var(--text-1); background: oklch(0.14 0.01 250 / 0.85); padding: 6px 10px; border-radius: 99px; border: 1px solid var(--border-strong); } #module-cursos .cu-continuar { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: center; background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 18px; margin-bottom: 30px; } #module-cursos .cu-continuar h2 { font: 600 22px/1.2 var(--font-display); margin: 8px 0 4px; text-wrap: balance; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-continuar__texto > p:not(.cu-meta) { margin: 0 0 14px; color: var(--text-2); font-size: 13.5px; } #module-cursos .cu-continuar .cu-meta { margin-bottom: 16px; } #module-cursos .cu-continuar .nv-btn-primary, #module-cursos .cu-faixa .nv-btn-primary { -webkit-text-fill-color: var(--accent-fg); } #module-cursos .cu-trilha { margin-bottom: 30px; } #module-cursos .cu-trilha__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } #module-cursos .cu-trilha__cab h3 { font: 600 16px/1.2 var(--font-display); margin: 0; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; } /* ⚠️ `align-items` e `justify-content` EXPLÍCITOS: o base.css tem uma regra de elemento cru (`button { align-items: center; justify-content: center }`) e, sem isto, a capa encolhia pro tamanho do conteúdo — medido: 79px num cartão de 194px. */ #module-cursos .cu-curso { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; min-width: 0; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; border-radius: var(--r-md); } #module-cursos .cu-curso:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } #module-cursos .cu-curso:hover .cu-capa { transform: translateY(-3px); border-color: oklch(0.75 0.12 var(--cu-h) / 0.8); } #module-cursos .cu-curso__desc { font-size: 12.5px; line-height: 1.45; color: var(--text-3); -webkit-text-fill-color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #module-cursos .cu-curso__pe { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-curso__pe b { color: var(--text-1); -webkit-text-fill-color: var(--text-1); font-weight: 600; } /* trancado: a forma muda (tracejado, sem cor), não só a tinta */ #module-cursos .is-trancado .cu-capa { filter: grayscale(0.85) brightness(0.7); border-style: dashed; } #module-cursos .cu-curso.is-trancado { cursor: default; } #module-cursos .cu-curso.is-trancado:hover .cu-capa { transform: none; } /* POUCOS CURSOS (até 3): cada um vira uma faixa larga. Um cartãozinho sozinho numa tela vazia era o "visual pobre" que o João apontou. */ #module-cursos .cu-faixas { display: grid; gap: 16px; } #module-cursos .cu-faixa { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: center; background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 18px; } #module-cursos .cu-faixa__txt { display: grid; gap: 8px; min-width: 0; justify-items: start; } #module-cursos .cu-faixa__txt h4 { font: 600 22px/1.2 var(--font-display); margin: 0; text-wrap: balance; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-faixa__txt > p:not(.cu-meta) { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; max-width: 60ch; } #module-cursos .cu-faixa__txt .cu-barra { width: min(100%, 360px); } #module-cursos .cu-faixa__txt .cu-meta { margin: 0 0 4px; } #module-cursos .cu-faixa__nums { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); margin: 2px 0 6px; } #module-cursos .cu-faixa__nums b { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; } /* ── sala ─────────────────────────────────────────────────────────── */ #module-cursos .cu-migalha { color: var(--text-3); font-size: 12.5px; margin-bottom: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } #module-cursos .cu-migalha button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--text-2); -webkit-text-fill-color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; } #module-cursos .cu-selo-rascunho { margin-left: 8px; padding: 3px 8px; border-radius: 99px; border: 1px dashed var(--border-strong); font-size: 11px; } #module-cursos .cu-sala-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } #module-cursos .cu-sala-topo .cu-migalha { margin: 0; } #module-cursos .cu-cinema { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; } #module-cursos .cu-cinema svg { width: 17px; height: 17px; } #module-cursos .cu-cinema[aria-pressed="true"] { background: var(--bg-3); } #module-cursos .cu-sala { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 22px; align-items: start; } #module-cursos .cu-palco { min-width: 0; } #module-cursos .cu-player { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--cu-fundo-player); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; } #module-cursos .cu-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── o player próprio (js/lib/cursos-player.js) ───────────────────────── O vídeo é do YouTube; a cara é do nyvvo. Ver o cabeçalho da lib pro porquê de cada peça. */ #module-cursos .cu-pl { display: flex; flex-direction: column; align-items: stretch; aspect-ratio: auto; outline: none; background: #000; container: cu-player / inline-size; } #module-cursos .cu-pl__video { position: relative; width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; } #module-cursos .cu-pl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ⚠️ `hidden` PERDE pra qualquer `display:` de autor. A capa é `display: flex`, então `el.hidden = true` não escondia nada — o vídeo tocava atrás dela. (Mesma armadilha do certo/errado do Questões.) */ #module-cursos .cu-pl [hidden] { display: none !important; } #module-cursos .cu-pl__moldura { position: absolute; inset: 0; overflow: hidden; } /* 🔴 O IFRAME TEM EXATAMENTE O TAMANHO DA MOLDURA. A primeira versão o fazia 260px mais alto, "pra empurrar o título do YouTube pra fora". Era desnecessário E quebrava duas coisas, as duas medidas no app: • vídeo que não é 16:9 (4:3, 16:10 — gravação de slide) crescia até a largura do iframe e era CORTADO em cima e embaixo. O João viu como "a tela está com zoom"; • a legenda é ancorada no pé do iframe: caía a 954px num quadro de 482 visíveis, fora da tela. E o motivo nem existia: com `controls=0` e sem o mouse entrar no vídeo (`pointer-events: none`), o YouTube não desenha NADA ao pausar. */ #module-cursos .cu-pl .cu-pl__moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; } /* A imagem é sempre 16:9, com controles em faixa própria abaixo dela. Ligar a legenda nunca redimensiona o iframe nem sobrepõe os controles. */ /* a camada que recebe o clique no lugar do vídeo */ #module-cursos .cu-pl__toque { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; } #module-cursos .cu-pl__capa { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; background: radial-gradient(120% 90% at 50% 40%, oklch(0.24 0.02 250), oklch(0.12 0.006 250)); } #module-cursos .cu-pl__capa-titulo { max-width: 34ch; font: 600 18px/1.3 var(--font-display); text-wrap: balance; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-pl__grande { width: 72px; height: 72px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); -webkit-text-fill-color: var(--accent-fg); transition: transform .15s ease; } #module-cursos .cu-pl__grande:hover { transform: scale(1.06); } #module-cursos .cu-pl__grande svg { width: 34px; height: 34px; margin-left: 4px; } #module-cursos .cu-pl__grande:focus-visible, #module-cursos .cu-pl__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #module-cursos .cu-pl__capa-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } #module-cursos .cu-pl__capa-acoes .nv-btn svg { width: 16px; height: 16px; } #module-cursos .cu-pl__capa-acoes .nv-btn-primary { -webkit-text-fill-color: var(--accent-fg); } #module-cursos .cu-pl__barra { position: relative; z-index: 3; flex: 0 0 auto; display: grid; gap: 4px; padding: 8px 12px; background: #101316; } #module-cursos .cu-pl__botoes { display: flex; align-items: center; gap: 4px; } #module-cursos .cu-pl__espaco { flex: 1 1 auto; } #module-cursos .cu-pl__btn { position: relative; width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 8px; padding: 0; cursor: pointer; display: grid; place-items: center; background: transparent; color: oklch(0.97 0.005 250); -webkit-text-fill-color: oklch(0.97 0.005 250); } #module-cursos .cu-pl__btn:hover { background: oklch(1 0 0 / 0.14); } #module-cursos .cu-pl__btn svg { width: 20px; height: 20px; } #module-cursos .cu-pl__btn--texto { width: auto; min-width: 44px; padding: 0 8px; font: 600 12.5px/1 var(--font-mono); } /* Ícone discreto: ligada é só um traço sob o símbolo, sem caixa verde. */ #module-cursos .cu-pl__btn[data-pl-legenda]::before { content: ''; position: absolute; bottom: 5px; width: 14px; height: 2px; background: var(--accent); border-radius: 2px; opacity: 0; } #module-cursos .cu-pl__btn[data-pl-legenda][aria-pressed="true"]::before { opacity: 1; } #module-cursos .cu-pl__btn[data-pl-dica]::after { content: attr(data-pl-dica); position: absolute; right: 0; bottom: calc(100% + 8px); padding: 6px 9px; border-radius: 5px; background: #282e34; color: #f1f3f5; -webkit-text-fill-color: #f1f3f5; font: 400 11px/1.4 var(--font-sans); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s ease; } #module-cursos .cu-pl__btn[data-pl-dica]:hover::after, #module-cursos .cu-pl__btn[data-pl-dica]:focus-visible::after { opacity: 1; } #module-cursos .cu-pl__tela { margin-left: 4px; border-left: 1px solid oklch(1 0 0 / 0.14); border-radius: 0; } #module-cursos .cu-pl__qualidade { padding: 0 6px; font: 500 11.5px/1 var(--font-mono); white-space: nowrap; color: oklch(0.82 0.01 250); -webkit-text-fill-color: oklch(0.82 0.01 250); } #module-cursos .cu-pl__tempo { margin-left: 6px; font: 500 12.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: oklch(0.97 0.005 250); -webkit-text-fill-color: oklch(0.97 0.005 250); } /* as duas réguas (posição e volume): trilho fino, parte feita em verde */ #module-cursos .cu-pl__linha, #module-cursos .cu-pl__volume { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; outline-offset: 4px; height: 14px; background: transparent; cursor: pointer; min-height: 0; box-shadow: none; } #module-cursos .cu-pl__linha { width: 100%; } #module-cursos .cu-pl__volume { width: 76px; flex: 0 0 auto; } #module-cursos .cu-pl__linha::-webkit-slider-runnable-track, #module-cursos .cu-pl__volume::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(to right, var(--accent) 0 var(--cu-pl-feito, 0%), oklch(1 0 0 / 0.45) var(--cu-pl-feito, 0%) var(--cu-pl-carregado, 0%), oklch(1 0 0 / 0.22) var(--cu-pl-carregado, 0%) 100%); } #module-cursos .cu-pl__linha::-moz-range-track, #module-cursos .cu-pl__volume::-moz-range-track { height: 4px; border-radius: 99px; background: oklch(1 0 0 / 0.22); } #module-cursos .cu-pl__linha::-moz-range-progress, #module-cursos .cu-pl__volume::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--accent); } #module-cursos .cu-pl__linha::-webkit-slider-thumb, #module-cursos .cu-pl__volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; border: 0; background: var(--accent); } #module-cursos .cu-pl__linha::-moz-range-thumb, #module-cursos .cu-pl__volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 0; background: var(--accent); } #module-cursos .cu-pl__linha:focus-visible, #module-cursos .cu-pl__volume:focus-visible { outline: 2px solid var(--accent); } /* tela cheia: a moldura vira a tela, sem cantos */ #module-cursos .cu-pl:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; max-width: none; border: 0; border-radius: 0; } #module-cursos .cu-pl:fullscreen .cu-pl__video { flex: 1 1 0; aspect-ratio: auto; min-height: 0; } /* modo de socorro: o player padrão do YouTube, quando o limpo não respondeu */ #module-cursos .cu-pl--padrao iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* O espaço disponível é o do player: a lista e a sidebar do app também ocupam largura em computadores, mesmo com uma janela grande. */ @container cu-player (max-width: 560px) { #module-cursos .cu-pl__volume, #module-cursos .cu-pl__qualidade { display: none; } #module-cursos .cu-pl__barra { padding: 6px 8px; } #module-cursos .cu-pl__btn { width: 36px; } #module-cursos .cu-pl__btn--texto { width: auto; min-width: 40px; padding: 0 4px; } #module-cursos .cu-pl__tempo { font-size: 11px; margin-left: 2px; } #module-cursos .cu-pl__tela { margin-left: 0; } } @container cu-player (max-width: 380px) { #module-cursos .cu-pl__botoes { gap: 0; } #module-cursos .cu-pl__tempo { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { #module-cursos .cu-pl__grande, #module-cursos .cu-pl__btn[data-pl-dica]::after { transition: none; } } #module-cursos .cu-player__sem { color: var(--text-3); font-size: 13px; } #module-cursos .cu-aula-titulo { font: 600 20px/1.25 var(--font-display); margin: 16px 0 4px; text-wrap: balance; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-aula-onde { color: var(--text-3); font-size: 12.5px; margin: 0 0 14px; } #module-cursos .cu-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } #module-cursos .cu-acoes .nv-btn-primary { -webkit-text-fill-color: var(--accent-fg); } #module-cursos .cu-abas { display: flex; gap: 18px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 14px; } #module-cursos .cu-abas button { border: 0; background: none; padding: 0 0 10px; cursor: pointer; font: 500 13.5px/1.2 var(--font-sans); color: var(--text-3); -webkit-text-fill-color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; } #module-cursos .cu-abas button[aria-selected="true"] { color: var(--text-1); -webkit-text-fill-color: var(--text-1); border-bottom-color: var(--accent); } #module-cursos .cu-rotulo { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; } #module-cursos .cu-nota { width: 100%; min-height: 120px; resize: vertical; background: var(--bg-3); color: var(--text-1); -webkit-text-fill-color: var(--text-1); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 10px 12px; font: 400 13.5px/1.5 var(--font-sans); } #module-cursos .cu-nota:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } #module-cursos .cu-nota__estado { display: block; min-height: 16px; margin-top: 4px; font-size: 11.5px; color: var(--text-3); } #module-cursos .cu-grade { background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; min-width: 0; } #module-cursos .cu-grade__cab { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); } #module-cursos .cu-grade__cab strong { display: block; font: 600 14px/1.3 var(--font-sans); margin-bottom: 10px; color: var(--text-1); } #module-cursos .cu-materia > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; justify-content: space-between; gap: 10px; font: 600 13.5px/1.3 var(--font-sans); color: var(--text-1); border-bottom: 1px solid var(--border-subtle); background: var(--bg-2); } #module-cursos .cu-materia > summary::-webkit-details-marker { display: none; } #module-cursos .cu-materia > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } #module-cursos .cu-materia > summary span { color: var(--text-3); font: 400 12px/1.6 var(--font-mono); white-space: nowrap; } #module-cursos .cu-topico { padding: 10px 16px 4px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); } #module-cursos .cu-aula { width: 100%; display: grid; justify-content: stretch; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; padding: 8px 16px; border: 0; border-left: 2px solid transparent; background: none; text-align: left; cursor: pointer; font: 400 13px/1.35 var(--font-sans); color: var(--text-2); -webkit-text-fill-color: var(--text-2); } #module-cursos .cu-aula:hover { background: var(--bg-2); } #module-cursos .cu-aula:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } #module-cursos .cu-aula__t { overflow-wrap: anywhere; display: grid; gap: 5px; } /* aula começada e não terminada: o fio mostra até onde foi, o minuto em verde */ #module-cursos .cu-aula__fio { display: block; height: 3px; border-radius: 99px; background: var(--bg-3); overflow: hidden; } #module-cursos .cu-aula__fio i { display: block; height: 100%; background: var(--accent); } #module-cursos .cu-aula__parou { color: var(--accent); -webkit-text-fill-color: var(--accent); } #module-cursos .cu-parou { font-family: var(--font-mono); font-weight: 500; color: var(--accent); -webkit-text-fill-color: var(--accent); } /* "Você parou em 12:34 de 22:00", na capa do player */ #module-cursos .cu-pl__retomar { display: grid; justify-items: center; gap: 10px; } #module-cursos .cu-pl__retomar-txt { font: 500 13.5px/1.3 var(--font-sans); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-pl__retomar-txt b { font-family: var(--font-mono); color: var(--accent); -webkit-text-fill-color: var(--accent); } #module-cursos .cu-pl__retomar-barra { display: block; width: min(70vw, 360px); height: 4px; border-radius: 99px; background: oklch(1 0 0 / 0.15); overflow: hidden; } #module-cursos .cu-pl__retomar-barra i { display: block; height: 100%; background: var(--accent); } #module-cursos .cu-aula__dur { font: 400 11.5px/1 var(--font-mono); color: var(--text-3); -webkit-text-fill-color: var(--text-3); } /* estado é forma: assistida = disco cheio com visto; pendente = aro vazio */ @media (max-width: 900px) { #module-cursos .cu-continuar, #module-cursos .cu-sala, #module-cursos .cu-faixa { grid-template-columns: minmax(0, 1fr); } } @media (pointer: coarse) { #module-cursos .cu-aula { min-height: 48px; } } @media (prefers-reduced-motion: reduce) { #module-cursos .cu-capa { transition: none; } } /* ===================================================================== v2 (2026-10-14) — andamento da trilha e de cada curso, sala de aula com lista buscável, joinha e modo cinema. Protótipo aprovado: https://claude.ai/artifact/4mi7ZjUzsDvD4kc7azhFMX Este bloco vem por ÚLTIMO de propósito: redefine o desenho antigo. ===================================================================== */ /* vazio é ausência: a barra de quem não começou é tracejada, não um trilho cheio */ #module-cursos .cu-barra.is-vazia { background: none; border: 1px dashed var(--border-strong); height: 6px; } #module-cursos .cu-barra { height: 6px; } #module-cursos .cu-barra i { background: linear-gradient(90deg, var(--accent), oklch(0.86 0.15 165)); } #module-cursos .cu-pct { font: 600 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-pct.is-feito { color: var(--accent); -webkit-text-fill-color: var(--accent); } /* ── a trilha: o topo com o anel ────────────────────────────────── */ #module-cursos .cu-trilha { margin-bottom: 34px; display: grid; gap: 16px; } #module-cursos .cu-trilha__cab { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 340px); gap: 22px; align-items: center; margin: 0; padding: 22px; border-radius: 18px; border: 1px solid var(--border-subtle); overflow: hidden; background: radial-gradient(560px 240px at 88% -20%, oklch(0.78 0.15 165 / 0.16), transparent 62%), linear-gradient(oklch(1 0 0 / 0.025) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, oklch(1 0 0 / 0.025) 1px, transparent 1px) 0 0 / 28px 100%, var(--bg-1); } #module-cursos .cu-trilha__nome { min-width: 0; display: grid; gap: 4px; } #module-cursos .cu-trilha__titulo { font: 700 24px/1.15 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-trilha__dados { display: flex; gap: 16px; flex-wrap: wrap; margin: 2px 0 0; font-size: 13px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-trilha__dados b { font: 500 13px/1 var(--font-mono); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-anel { position: relative; width: 104px; height: 104px; flex: none; } #module-cursos .cu-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); } #module-cursos .cu-anel circle { fill: none; stroke-width: 2.8; } #module-cursos .cu-anel__trilho { stroke: var(--bg-3); } #module-cursos .cu-anel__feito { stroke: var(--accent); stroke-linecap: round; } #module-cursos .cu-anel__n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } #module-cursos .cu-anel__n b { font: 600 26px/1 var(--font-mono); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-anel__n small { font-size: 11px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); margin-top: 4px; } #module-cursos .cu-seguir { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: oklch(0.14 0.01 250 / 0.6); border: 1px solid var(--border-strong); backdrop-filter: blur(6px); } #module-cursos .cu-seguir__aula b { display: block; font-weight: 600; font-size: 14px; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-seguir__aula small { font-size: 12px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-seguir .nv-btn-primary { -webkit-text-fill-color: var(--accent-fg); justify-self: start; } /* ── filtros ─────────────────────────────────────────────────────── */ #module-cursos .cu-filtros { display: flex; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 24px; } #module-cursos .cu-filtros__grupo { display: flex; gap: 6px; flex-wrap: wrap; } #module-cursos .cu-filtros button { min-height: 36px; padding: 0 14px; } #module-cursos .cu-filtros button[aria-pressed="true"] { background: var(--text-1); border-color: transparent; color: var(--bg-0); -webkit-text-fill-color: var(--bg-0); font-weight: 600; } /* ── cartão do curso ─────────────────────────────────────────────── */ #module-cursos .cu-fila { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } #module-cursos .cu-curso { gap: 0; background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; transition: transform .15s ease, border-color .15s ease; } #module-cursos .cu-curso:hover { transform: translateY(-2px); border-color: var(--border-strong); } #module-cursos .cu-curso:hover .cu-capa { transform: none; } #module-cursos .cu-curso .cu-capa { aspect-ratio: 16 / 7; border: 0; border-radius: 0; } #module-cursos .cu-curso__corpo { display: grid; gap: 10px; padding: 14px 16px 16px; min-width: 0; } #module-cursos .cu-curso__titulo { font: 600 15px/1.3 var(--font-display); color: var(--text-1); -webkit-text-fill-color: var(--text-1); text-wrap: balance; } #module-cursos .cu-andamento { display: grid; gap: 9px; min-width: 0; width: 100%; } #module-cursos .cu-andamento__num { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-andamento__num b { font-family: var(--font-mono); font-weight: 500; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-andamento__prox { font-size: 12px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); border-top: 1px solid var(--border-subtle); padding-top: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #module-cursos .cu-andamento__prox em { font-style: normal; color: var(--text-2); -webkit-text-fill-color: var(--text-2); } /* sigla da capa discreta: a arte é fundo, não manchete */ #module-cursos .cu-capa__sigla { font-size: 40px; color: oklch(0.86 0.10 var(--cu-h) / 0.32); -webkit-text-fill-color: oklch(0.86 0.10 var(--cu-h) / 0.32); } #module-cursos .cu-faixa { border-radius: 16px; } #module-cursos .cu-faixa__txt { gap: 12px; } #module-cursos .cu-faixa__txt .cu-andamento { max-width: 420px; } #module-cursos .cu-faixa__txt .cu-andamento .cu-barra { width: 100%; } #module-cursos .cu-faixa .nv-btn-primary { -webkit-text-fill-color: var(--accent-fg); } /* ── sala ────────────────────────────────────────────────────────── */ #module-cursos .cu-sala.is-cinema { grid-template-columns: minmax(0, 1fr); } #module-cursos .cu-sala.is-cinema .cu-grade { display: none; } #module-cursos .cu-player { border-radius: 16px; } #module-cursos .cu-aula-cab { display: block; margin: 22px 0 18px; } #module-cursos .cu-aula-cab .cu-aula-titulo { margin: 0 0 7px; font-size: 22px; line-height: 1.35; } #module-cursos .cu-aula-cab .cu-aula-onde { margin: 0; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; } #module-cursos .cu-material { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); -webkit-text-fill-color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; } #module-cursos .cu-material svg { width: 14px; height: 14px; } #module-cursos .cu-acoes { margin: 18px 0 0; justify-content: flex-start; align-items: center; } #module-cursos .cu-acoes .nv-btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; } #module-cursos .cu-acoes .nv-btn svg { width: 16px; height: 16px; } #module-cursos .cu-icone { width: 40px; padding: 0; justify-content: center; } #module-cursos .cu-acoes .is-feito { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); -webkit-text-fill-color: var(--accent); } #module-cursos .cu-proxima { margin-left: auto; max-width: min(100%, 360px); min-width: 0; } #module-cursos .cu-proxima__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #module-cursos .cu-atalhos { position: relative; } #module-cursos .cu-atalhos__caixa { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 260px; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border-strong); box-shadow: 0 16px 40px oklch(0 0 0 / 0.5); font-size: 13px; color: var(--text-2); -webkit-text-fill-color: var(--text-2); } #module-cursos .cu-atalhos__caixa[hidden] { display: none; } #module-cursos .cu-atalhos__caixa > span:not(.cu-eyebrow) { display: flex; justify-content: space-between; align-items: center; gap: 10px; } #module-cursos kbd { font: 600 11.5px/1 var(--font-mono); padding: 4px 7px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--border-strong); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } /* o joinha: estado é forma — votado, o botão inteiro ganha moldura e fundo */ #module-cursos .cu-avaliar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); -webkit-text-fill-color: var(--text-2); } #module-cursos .cu-joinha { width: 44px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg-1); display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-joinha:hover { color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-joinha svg { width: 18px; height: 18px; } #module-cursos .cu-joinha[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); -webkit-text-fill-color: var(--accent); } #module-cursos .cu-joinha:focus-visible, #module-cursos .cu-motivo__opcoes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #module-cursos .cu-avaliar small { font-size: 12.5px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-motivo { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--bg-1); } #module-cursos .cu-motivo[hidden] { display: none; } #module-cursos .cu-motivo__opcoes { display: flex; gap: 8px; flex-wrap: wrap; } #module-cursos .cu-motivo__opcoes button { min-height: 36px; padding: 0 14px; border-radius: 99px; cursor: pointer; border: 1px solid var(--border-strong); background: none; font: 500 13px/1 var(--font-sans); color: var(--text-2); -webkit-text-fill-color: var(--text-2); } #module-cursos .cu-motivo__opcoes button[aria-pressed="true"] { background: var(--text-1); border-color: transparent; color: var(--bg-0); -webkit-text-fill-color: var(--bg-0); font-weight: 600; } #module-cursos .cu-motivo .cu-rotulo { margin: 0; } #module-cursos .cu-nota--curta { min-height: 64px; } #module-cursos .cu-motivo__acoes { display: flex; gap: 8px; justify-content: flex-end; } #module-cursos .cu-motivo__acoes .nv-btn-primary { -webkit-text-fill-color: var(--accent-fg); } #module-cursos .cu-caderno { padding: 18px 0 0; border-radius: 0; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; } #module-cursos .cu-caderno__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } #module-cursos .cu-caderno__cab .cu-rotulo { margin: 0; font-size: 13px; } #module-cursos .cu-caderno__cab .cu-nota__estado { margin: 0; font-size: 11px; white-space: nowrap; } #module-cursos .cu-nota__estado[data-estado="erro"] { color: var(--warn); -webkit-text-fill-color: var(--warn); } #module-cursos .cu-caderno .cu-nota { display: block; min-height: 190px; padding: 16px; font-size: 14px; line-height: 1.75; background: var(--bg-1); border-color: var(--border-soft); border-radius: 8px; } #module-cursos .cu-caderno .cu-nota::placeholder { color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-nota__erro { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--text-2); } #module-cursos .cu-nota__erro[hidden] { display: none !important; } #module-cursos .cu-nota__tentar { min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--text-1); -webkit-text-fill-color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; } #module-cursos .cu-nota__tentar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* a lista de aulas */ #module-cursos .cu-grade { position: sticky; top: 14px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: calc(100vh - 110px); border-radius: 16px; } #module-cursos .cu-grade__cab { display: grid; gap: 8px; } #module-cursos .cu-grade__cab strong { margin: 0; } #module-cursos .cu-grade__cab .cu-meta { margin: 0; } #module-cursos .cu-grade__num { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 12.5px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-grade__num b { font-family: var(--font-mono); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-grade__busca { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); } #module-cursos .cu-grade__busca .cu-rotulo { font-size: 11.5px; color: var(--text-3); -webkit-text-fill-color: var(--text-3); margin-bottom: 5px; } #module-cursos .cu-grade__busca .cu-campo { min-height: 36px; } #module-cursos .cu-grade__lista { overflow: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; } #module-cursos .cu-grade__nada { padding: 16px; margin: 0; color: var(--text-3); font-size: 13px; } /* ⚠️ A regra antiga `.cu-materia > summary span` (fonte mono, cinza) pintava TODO span do cabeçalho — inclusive o nome da matéria e a barra. Aqui cada peça diz a sua fonte. */ #module-cursos .cu-materia > summary { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 8px; row-gap: 8px; justify-content: stretch; align-items: center; } /* a setinha de abrir/fechar (vem de regra global do app) fica na 1ª coluna, só na 1ª linha */ #module-cursos .cu-materia > summary::before { grid-column: 1; grid-row: 1; } #module-cursos .cu-materia > summary .cu-materia__cab, #module-cursos .cu-materia > summary .cu-barra { grid-column: 2; } #module-cursos .cu-materia > summary .cu-materia__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 600 13.5px/1.3 var(--font-sans); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-materia > summary .cu-materia__cab > span { font: 500 12px/1.3 var(--font-mono); color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-materia > summary .cu-barra { display: block; width: 100%; height: 4px; } #module-cursos .cu-barra { display: block; } /* estado da aula é forma: não vista = aro tracejado; começada = meio disco; vista = disco cheio */ /* ── fim do vídeo: a contagem pra próxima aula ───────────────────── */ #module-cursos .cu-pl__seguir { display: grid; justify-items: center; gap: 10px; } #module-cursos .cu-pl__seguir-txt { font-size: 13px; color: var(--text-2); -webkit-text-fill-color: var(--text-2); } #module-cursos .cu-pl__conta { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--accent); font: 600 24px/1 var(--font-mono); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-pl__seguir-titulo { max-width: 40ch; font: 600 16px/1.3 var(--font-display); text-wrap: balance; color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-pl__capa-acoes-linha { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } #module-cursos .cu-pl__capa-acoes-linha .nv-btn-primary { -webkit-text-fill-color: var(--accent-fg); } @media (max-width: 900px) { #module-cursos .cu-trilha__cab { grid-template-columns: auto minmax(0, 1fr); } #module-cursos .cu-seguir { grid-column: 1 / -1; } #module-cursos .cu-grade { position: static; max-height: none; } #module-cursos .cu-grade__lista { max-height: 380px; } #module-cursos .cu-acoes { justify-content: flex-start; } } @media (max-width: 520px) { #module-cursos .cu-trilha__cab { grid-template-columns: minmax(0, 1fr); padding: 18px; } #module-cursos .cu-anel { width: 84px; height: 84px; } #module-cursos .cu-proxima { margin-left: 0; max-width: 100%; } #module-cursos .cu-proxima__t { white-space: normal; text-align: left; } #module-cursos .cu-aula-cab .cu-aula-titulo { font-size: 19px; } #module-cursos .cu-caderno .cu-nota { min-height: 180px; } } @media (prefers-reduced-motion: reduce) { #module-cursos .cu-curso { transition: none; } } /* ── proteção: o aviso na capa quando o servidor segura o vídeo ───── */ #module-cursos .cu-pl__aviso { max-width: 46ch; padding: 10px 14px; border-radius: 12px; text-wrap: pretty; background: oklch(0.78 0.14 75 / 0.12); border: 1px solid oklch(0.78 0.14 75 / 0.45); font: 500 13px/1.5 var(--font-sans); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-pl__grande[aria-busy="true"] { opacity: 0.6; cursor: progress; } /* ── a linha da aula: bolinha (marca/desmarca) + título (abre) ───────── 2026-10-15: a linha deixou de ser UM botão. A bolinha é cheia (vista, pelo clique do aluno) ou vazia — sem estado parcial. Estas regras vêm por último e redefinem o desenho de quando a linha inteira era o botão. */ #module-cursos .cu-aula { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; align-items: center; padding: 4px 12px 4px 8px; cursor: default; border-left: 2px solid transparent; } #module-cursos .cu-aula.is-atual { background: var(--accent-soft); border-left-color: var(--accent); color: var(--text-1); -webkit-text-fill-color: var(--text-1); } #module-cursos .cu-aula.is-vista:not(.is-atual) .cu-aula__abrir { color: var(--text-3); -webkit-text-fill-color: var(--text-3); } #module-cursos .cu-aula__marcar { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; } #module-cursos .cu-aula__marcar:hover { background: var(--bg-3); } #module-cursos .cu-aula__marcar:focus-visible, #module-cursos .cu-aula__abrir:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* vazia: aro tracejado (é ausência); cheia: disco com o visto */ #module-cursos .cu-aula__bola { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--text-4); } #module-cursos .cu-aula__marcar:hover .cu-aula__bola { border-color: var(--accent); } #module-cursos .cu-aula.is-vista .cu-aula__bola { border: 1.5px solid var(--accent); background: var(--accent); } #module-cursos .cu-aula.is-vista .cu-aula__bola::after { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--accent-fg); border-bottom: 2px solid var(--accent-fg); transform: rotate(-45deg) translateY(-1px); } /* ⚠️ align/justify EXPLÍCITOS: o base.css centraliza o conteúdo de todo