/* Aprender e Progresso novos (proposta de 12/10/2026), atrás da chave
   APRENDER_PROGRESSO_V2. Tudo sob .wv: as fontes e as peças do curso novo
   (work-ui.css) e as cores dos --ui-* de ui.css. Um destaque por tela, listas
   limpas, detalhe a um toque (Material 3: listas, folhas, botões segmentados;
   alvos de 44 px no mínimo). Registro: docs/correcoes/2026-10-12-aprender-v2. */

.ap, .pg {
  width: 100%; max-width: 640px; min-width: 0; margin-inline: auto;
  display: grid; align-content: start; gap: 22px;
  padding: 14px 16px calc(var(--nav-space, 100px) + 28px);
}
.ap > *, .pg > * { min-width: 0; }
.ap-h2, .pg-h2 { margin: 0; font: 700 1.12rem/1.2 var(--wv-font-display); letter-spacing: -.005em; }
.ap-sec, .pg-sec { display: grid; gap: 10px; }

/* Abrir e fechar: o mesmo jeito em toda a tela (seta que gira) */
.ap details > summary, .pg details > summary { list-style: none; cursor: pointer; }
.ap details > summary::-webkit-details-marker, .pg details > summary::-webkit-details-marker { display: none; }
.ap details > summary .wv-ico, .pg details > summary .wv-ico { transform: rotate(90deg); transition: transform var(--wv-dur) var(--wv-ease); }
.ap details[open] > summary .wv-ico, .pg details[open] > summary .wv-ico { transform: rotate(-90deg); }

/* Aprender: o curso em andamento */
.ap-hero .wv-hero__txt h2 { margin: 0; font: 700 clamp(1.1rem, 5vw, 1.35rem)/1.15 var(--wv-font-display); overflow-wrap: break-word; hyphens: auto; }
.ap-hero .wv-hero__txt .wv-eyebrow { color: inherit; opacity: .85; }
@media (max-width: 380px) { .ap-hero .wv-orb { width: 72px; height: 72px; } }

/* Aprender: trilhas abertas, só com o nome; o resto em Detalhes */
.ap-trilhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ap-trilha { border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); overflow: hidden; }
.ap-trilha__abrir { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; color: inherit; text-decoration: none; }
.ap-trilha__abrir b { flex: 1; min-width: 0; font: 700 1.02rem/1.25 var(--wv-font-display); }
.ap-trilha__abrir:hover { background: color-mix(in srgb, var(--ui-raised) 45%, transparent); }
.ap-det { border-top: 1px solid var(--ui-border); }
.ap-det > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; color: var(--ui-brand); font: 700 .86rem/1 var(--wv-font-body); }
.ap-det__corpo { display: grid; gap: 10px; padding: 0 14px 14px; color: var(--ui-muted); font-size: .9rem; line-height: 1.45; }
.ap-det__corpo p { margin: 0; }
.ap-det__estado { color: var(--ui-text); font-weight: 700; }
.ap-pecas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ap-pecas li { padding: 7px 10px; border-radius: 999px; background: var(--ui-raised); color: var(--ui-text); font: 600 .78rem/1 var(--wv-font-body); }

/* Aprender: o que ainda vai abrir, recolhido numa linha */
.ap-embreve { border: 1px dashed var(--ui-control-border); border-radius: 20px; background: var(--ui-surface); }
.ap-embreve > summary { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px; }
.ap-embreve > summary > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ap-embreve > summary b { font: 700 .98rem/1.2 var(--wv-font-display); }
.ap-embreve > summary small, .ap-embreve__txt small { color: var(--ui-muted); font-size: .82rem; line-height: 1.35; }
.ap-embreve > summary > .wv-ico { color: var(--ui-muted); }
.ap-embreve__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ui-border); }
.ap-embreve__lista li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ui-border); }
.ap-embreve__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ap-embreve__txt b { font: 650 .92rem/1.25 var(--wv-font-body); }
.ap-quero { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--ui-control-border); background: var(--ui-surface); color: var(--ui-text); font: 700 .84rem/1 var(--wv-font-body); cursor: pointer; }
.ap-quero[aria-pressed="true"] { border-color: transparent; background: var(--ui-positive-soft); color: var(--ui-positive); cursor: default; }
.ap-nota { margin: 0; padding: 12px 14px 14px; color: var(--ui-muted); font-size: .8rem; line-height: 1.45; }

/* Progresso: controle segmentado (Material 3) com a largura toda; o "i" que explica a
   tela mora no cabeçalho do app, à direita do título (19/10/2026, progresso-v2.js) */
.pg-topo { display: flex; align-items: center; gap: 8px; }
.pg-seg { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ui-raised); }
.pg-seg a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 999px;
  color: var(--ui-muted); text-decoration: none; font: 700 .92rem/1 var(--wv-font-body); }
.pg-seg a .icon { width: 18px; height: 18px; }
.pg-seg a[aria-current="page"] { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.topbar .pg-ajuda { flex: none; width: 48px; height: 48px; border-radius: 16px; color: var(--ui-muted); }
.topbar .pg-ajuda .wv-ico { flex: none; }
.pg-conteudo { display: grid; gap: 22px; min-width: 0; }
.pg-conteudo > * { min-width: 0; }

/* Resumo: um bloco por origem; tocar leva à seção */
.pg-resumo { display: grid; grid-template-columns: repeat(var(--colunas, 3), minmax(0, 1fr)); gap: 8px; }
.pg-bloco { display: grid; gap: 6px; align-content: start; min-height: 104px; padding: 12px 10px; border-radius: 18px; border: 1px solid var(--ui-border);
  background: var(--ui-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.pg-bloco:hover { border-color: var(--ui-control-border); }
.pg-bloco__origem { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-muted); font: 700 .72rem/1.1 var(--wv-font-body); }
.pg-bloco__origem .icon { width: 14px; height: 14px; flex: none; }
.pg-bloco strong { font: 800 1.45rem/1 var(--wv-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pg-bloco small { color: var(--ui-muted); font-size: .76rem; line-height: 1.25; }
.pg-dica p { margin: 0; font-size: .9rem; line-height: 1.45; }

/* Seções com a origem ao lado do título */
.pg-sec__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pg-origem { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 7px; border-radius: 999px; background: var(--ui-raised);
  color: var(--ui-muted); font: 700 .7rem/1 var(--wv-font-body); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.pg-origem .icon { width: 14px; height: 14px; }

/* Listas de habilidades: uma linha de nome e uma de detalhe */
.pg-lista { display: grid; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); overflow: hidden; }
.pg-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--ui-border);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pg-item:last-child { border-bottom: 0; }
.pg-item:hover { background: color-mix(in srgb, var(--ui-raised) 45%, transparent); }
.pg-item__txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pg-item__txt b { font: 650 .95rem/1.25 var(--wv-font-body); }
.pg-item__chev { flex: none; color: var(--ui-muted); }
.pg-ex { color: var(--ui-muted); font-size: .84rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-ex s { color: var(--ui-negative); text-decoration-thickness: 1.5px; }
.pg-ex ins { color: var(--ui-positive); font-weight: 700; text-decoration: none; }
.pg-nivel { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: .8rem; }
.pg-tend { font-weight: 800; }
.pg-tend--up { color: var(--ui-positive); }
.pg-tend--down { color: var(--ui-negative); }
.pg-grupo { margin: 6px 4px 0; color: var(--ui-muted); font: 700 .72rem/1 var(--wv-font-body); letter-spacing: .1em; text-transform: uppercase; }
.pg-vazio { margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-muted); font-size: .9rem; }
.pg-comeco b { font: 700 1.02rem/1.25 var(--wv-font-display); }
.pg-comeco p { margin: 0; color: var(--ui-muted); font-size: .92rem; line-height: 1.45; }

/* Já está firme: etiquetas que abrem a folha */
.pg-fortes { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-forte { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: 999px;
  background: var(--ui-positive-soft); color: var(--ui-positive); font: 700 .88rem/1.2 var(--wv-font-body); cursor: pointer; text-align: left; }

/* Barra de 4 partes no lugar do índice de 0 a 1 */
.pg-passos { display: inline-grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 64px; flex: none; }
.pg-passos i { height: 8px; border-radius: 4px; background: var(--ui-raised); }
.pg-passos[data-n="1"] i:nth-child(-n+1), .pg-passos[data-n="2"] i:nth-child(-n+2), .pg-passos[data-n="3"] i:nth-child(-n+3) { background: var(--ui-brand-vivid); }
.pg-passos[data-n="4"] i { background: var(--ui-positive-vivid); }
.pg-passos--sem i { background: repeating-linear-gradient(135deg, var(--ui-raised) 0 4px, transparent 4px 7px); }
.pg-areas { list-style: none; margin: 0; gap: 2px; padding: 8px 14px; }
.pg-areas li { display: grid; grid-template-columns: minmax(0, 1fr) 64px max-content; gap: 12px; align-items: center; min-height: 38px; font-size: .9rem; }
.pg-areas__nome { font-weight: 650; }
.pg-areas__palavra { min-width: 74px; color: var(--ui-muted); font-size: .8rem; text-align: right; white-space: nowrap; }

/* IELTS e curso, compactos */
.pg-ielts__geral { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pg-ielts__geral span { color: var(--ui-muted); font-size: .86rem; font-weight: 650; }
.pg-ielts__geral strong { font: 800 1.6rem/1 var(--wv-font-display); }
.pg-bandas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pg-banda { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--ui-raised); min-width: 0; }
.pg-banda small { color: var(--ui-muted); font: 700 .68rem/1.1 var(--wv-font-body); text-align: center; }
.pg-banda strong { font: 800 1.3rem/1.1 var(--wv-font-display); font-variant-numeric: tabular-nums; }
.pg-banda--vazia strong { color: var(--ui-muted); font-weight: 600; }
.pg-banda em { font-style: normal; color: var(--ui-positive); font-size: .7rem; font-weight: 700; }
.pg-mais > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ui-brand); font: 700 .9rem/1 var(--wv-font-body); }
.pg-mais__corpo { display: grid; gap: 10px; padding-top: 4px; }
.pg-evolucao { display: grid; grid-template-columns: 78px minmax(0, 1fr) 32px; gap: 10px; align-items: center; font-size: .84rem; }
.pg-evolucao svg { width: 100%; height: 28px; overflow: visible; }
.pg-evolucao polyline { fill: none; stroke: var(--ui-brand-vivid); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pg-evolucao circle { fill: var(--ui-brand); stroke: var(--ui-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pg-evolucao__n { color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }
.pg-nota { margin: 0; color: var(--ui-muted); font-size: .84rem; line-height: 1.4; }
/* O andamento da unidade, só para ler (19/10/2026): uma parte por aula e as aulas em pé. */
.pg-unidade { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.pg-unidade i { height: 8px; border-radius: 4px; background: var(--ui-raised); }
.pg-unidade i.pg-unidade--meio { background: linear-gradient(90deg, var(--ui-brand-vivid) 50%, var(--ui-raised) 50%); }
.pg-unidade i.pg-unidade--feita { background: var(--ui-positive-vivid); }
.pg-aulas { list-style: none; margin: 0; padding: 0; display: grid; }
.pg-aulas li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--ui-border); }
.pg-aulas li:first-child { border-top: 0; padding-top: 2px; }
.pg-aulas b { font: 650 .9rem/1.3 var(--wv-font-body); }
/* P15: o andamento do Estudar logo abaixo das bandas do IELTS, com as aulas recolhidas. */
.pg-estudar { margin-top: 10px; }
.pg-estudar__topo { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9rem; font-weight: 650; }

/* Todas as habilidades: recolhidas, com filtro */
.pg-todas > summary { font-size: .98rem; }
.pg-filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pg-filtro { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); font: 700 .84rem/1 var(--wv-font-body); cursor: pointer; }
.pg-filtro span { color: var(--ui-muted); font-weight: 600; }
.pg-filtro[aria-pressed="true"] { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-bg); }
.pg-filtro[aria-pressed="true"] span { color: color-mix(in srgb, var(--ui-bg) 72%, transparent); }

/* Folhas do Progresso (dentro de .wv-sheet) */
.pg-folha { display: grid; gap: 18px; }
.pg-folha section { display: grid; gap: 8px; }
.pg-folha p { margin: 0; line-height: 1.5; }
.pg-folha__h { margin: 0; color: var(--ui-muted); font: 700 .74rem/1 var(--wv-font-body); letter-spacing: .1em; text-transform: uppercase; }
.pg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pg-tag--praticar { background: var(--ui-negative-soft); color: var(--ui-negative); }
.pg-tag--neutra { background: var(--ui-raised); color: var(--ui-muted); }
.pg-exemplo { display: grid; gap: 6px; }
.pg-exemplo p { padding: 10px 12px; border-radius: 12px; }
.pg-exemplo small { display: block; margin-bottom: 4px; color: var(--ui-muted); font: 700 .66rem/1 var(--wv-font-body); letter-spacing: .08em; text-transform: uppercase; }
.pg-exemplo__antes { background: var(--ui-negative-soft); }
.pg-exemplo__depois { background: var(--ui-positive-soft); }
.pg-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pg-numeros div { padding: 10px 12px; border-radius: 14px; background: var(--ui-raised); }
.pg-numeros strong { display: block; font: 800 1.35rem/1 var(--wv-font-display); font-variant-numeric: tabular-nums; }
.pg-numeros span { color: var(--ui-muted); font-size: .78rem; }
.pg-origens, .pg-niveis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pg-origens li { display: grid; gap: 4px; justify-items: start; font-size: .92rem; }
.pg-niveis li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; font-size: .92rem; }
.pg-niveis b { display: block; }

/* Histórico: por data e por origem, uma linha de título e uma de detalhe */
.pg-hist { display: grid; gap: 16px; }
.pg-hist__item { display: flex; align-items: center; border-bottom: 1px solid var(--ui-border); }
.pg-hist__item:last-child { border-bottom: 0; }
.pg-hist__item.is-marcado { background: var(--ui-soft); }
.pg-hist__item .pg-item { flex: 1; min-width: 0; border-bottom: 0; text-decoration: none; padding-right: 4px; }
.pg-hist__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-hist__linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pg-hist__detalhe { min-width: 0; color: var(--ui-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-hist__menu { flex: none; width: 44px; height: 44px; margin-right: 4px; border: 0; border-radius: 12px; background: transparent;
  color: var(--ui-muted); font: 700 1.1rem/1 var(--wv-font-body); cursor: pointer; }
.pg-hist__menu:hover { background: var(--ui-raised); }
.pg-selo { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--ui-raised); color: var(--ui-muted); font: 700 .72rem/1 var(--wv-font-body); white-space: nowrap; }
.pg-selo--marca { background: var(--ui-soft); color: var(--ui-brand); }
.pg-selo--pos { background: var(--ui-positive-soft); color: var(--ui-positive); }
.pg-hist__mais { justify-self: center; }
.pg-hist__retencao { text-align: center; }

/* Acesso gratuito (20/10/2026): os cursos com cadeado no Aprender, sem link (aprender-v2.js). */
.ap-completo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ap-completo li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 20px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-muted); }
.ap-completo__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ap-completo__txt b { color: var(--ui-text); font: 650 .98rem/1.25 var(--wv-font-body); }
.ap-completo__txt small { font-size: .84rem; line-height: 1.35; }
.ap-completo__cadeado { flex: none; color: var(--ui-muted); display: grid; }
.ap-completo__nota { margin: 0; color: var(--ui-muted); font-size: .86rem; line-height: 1.45; }