/* ==========================================================================
   CAPACITAÇÃO — estilos do módulo (carregado só sob /capacitacao).

   Tudo aqui é layout: cabeçalho, as duas colunas do editor e as listas de
   módulo/aula/material. Cores, espaços, raios e tipografia vêm dos tokens
   (iacadu-tokens.css) — nenhum valor cru de cor neste arquivo.

   Mobile-first: uma coluna por padrão, duas a partir de 900px.
   ========================================================================== */

/* ── Cabeçalho de tela ─────────────────────────────────────────────────── */

.cap-top {
    display: flex;
    flex-direction: column;
    gap: var(--ic-esp-3);
    margin-bottom: var(--ic-esp-4);
}

.cap-top h1 { margin: 0; }

.cap-top__sub {
    margin: var(--ic-esp-1) 0 0;
    color: var(--ic-texto-suave);
    font-size: var(--ic-texto-sm);
}

.cap-breadcrumb {
    font-size: var(--ic-texto-xs);
    color: var(--ic-texto-suave);
    margin-bottom: var(--ic-esp-1);
}

.cap-breadcrumb a { color: inherit; }

.cap-ajuda {
    display: block;
    margin: var(--ic-esp-1) 0 0;
    font-size: var(--ic-texto-xs);
    color: var(--ic-texto-suave);
}

.cap-alerta-inline {
    color: var(--ic-aviso-texto);
    font-size: var(--ic-texto-xs);
}

@media (min-width: 720px) {
    .cap-top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

/* ── Filtros e formulários ─────────────────────────────────────────────── */

.cap-filtros {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ic-esp-3);
    align-items: end;
}

.cap-filtros .ic-campo { margin-bottom: 0; }

.cap-form { padding: var(--ic-esp-4); }

.cap-grid2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ic-esp-3);
}

@media (min-width: 720px) {
    .cap-filtros { grid-template-columns: 2fr 1fr auto; }
    .cap-grid2   { grid-template-columns: 1fr 1fr; }
}

/* ── Editor: conteúdo à esquerda, ajustes à direita ────────────────────── */

.cap-editor {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ic-esp-4);
    align-items: start;
}

@media (min-width: 900px) {
    .cap-editor { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}

/* ── Módulos e aulas ───────────────────────────────────────────────────── */

.cap-modulos,
.cap-aulas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cap-modulo {
    background: var(--ic-surface);
    border: 1px solid var(--ic-borda);
    border-radius: var(--ic-raio-lg);
    padding: var(--ic-esp-3);
    margin-bottom: var(--ic-esp-3);
}

.cap-modulo__cab {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-esp-2);
}

.cap-modulo__tit { flex: 1 1 auto; min-width: 0; }

.cap-modulo__acoes { position: relative; }

/* O <details> vira um popover simples: sem JS, sem biblioteca, e fechado
   por padrão — a ação destrutiva não fica a um clique de distância. */
.cap-pop {
    background: var(--ic-surface);
    border: 1px solid var(--ic-borda);
    border-radius: var(--ic-raio);
    box-shadow: var(--ic-sombra);
    padding: var(--ic-esp-3);
    margin-top: var(--ic-esp-2);
}

@media (min-width: 900px) {
    .cap-modulo__acoes[open] .cap-pop {
        position: absolute;
        right: 0;
        z-index: 5;
        width: 320px;
    }
}

.cap-aula {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ic-esp-2);
    padding: var(--ic-esp-2) 0;
    border-top: 1px solid var(--ic-borda);
}

.cap-aula__nome {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.cap-aula__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ic-esp-2);
    font-size: var(--ic-texto-xs);
    color: var(--ic-texto-suave);
}

.cap-nova-aula { margin-top: var(--ic-esp-2); }

/* Alça de arrastar. `cursor: grab` só aparece quando o JS marcou a lista
   como ordenável — sem JS a alça é decorativa e não promete o que não faz. */
.cap-arrasta {
    color: var(--ic-texto-fraco);
    user-select: none;
    line-height: 1;
}

[data-cap-pronto] .cap-arrasta { cursor: grab; }
[data-cap-pronto] .cap-arrasta:active { cursor: grabbing; }

.cap-arrastando {
    opacity: 0.45;
    outline: 2px dashed var(--ic-primary);
    outline-offset: 2px;
}

/* ── Materiais ─────────────────────────────────────────────────────────── */

.cap-materiais {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cap-material {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ic-esp-2);
    padding: var(--ic-esp-2) 0;
    border-top: 1px solid var(--ic-borda);
}

.cap-material__nome { flex: 1 1 auto; min-width: 0; word-break: break-word; }

.cap-material__meta { font-size: var(--ic-texto-xs); color: var(--ic-texto-suave); }

/* ==========================================================================
   ÁREA DE QUEM FAZ O TREINAMENTO
   ========================================================================== */

/* ── Cards de trilha ───────────────────────────────────────────────────── */

.cap-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ic-esp-4);
}

/* auto-fill em vez de contagem fixa: a grade acompanha a largura real da
   janela, e o card não estica até virar uma faixa quando há poucos. */
@media (min-width: 560px) {
    .cap-cards { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
}

.cap-card {
    display: flex;
    flex-direction: column;
    background: var(--ic-surface);
    border: 1px solid var(--ic-borda);
    border-radius: var(--ic-raio-lg);
    overflow: hidden;
    transition: var(--ic-transicao-rapida);
}

/* O card inteiro é uma porta: quem passa o mouse precisa ver que ele responde,
   e no teclado o realce acompanha o foco do link do título. */
.cap-card:hover,
.cap-card:focus-within {
    border-color: var(--ic-primary);
    box-shadow: var(--ic-sombra-suave);
    transform: translateY(-2px);
}

/*
 * A capa era 16/9 — num card de 380px isso vira 214px de gradiente com nada
 * dentro, metade do cartão gasta para não dizer nada. Virou uma FAIXA: dá
 * identidade de cor à trilha, carrega o selo de estado, e devolve o espaço
 * para o que a pessoa veio ler.
 */
.cap-card__capa {
    width: 100%;
    height: 74px;
    object-fit: cover;
    display: block;
    position: relative;
    flex: none;
}

/* Faixa temática (trilha sem imagem): o selo de estado mora dentro dela. */
.cap-card__capa--tema {
    display: flex;
    align-items: flex-end;
    padding: var(--ic-esp-2);
}

/* Marca d'água discreta: dá textura à faixa sem virar desenho. */
.cap-card__capa--tema::after {
    content: '';
    position: absolute;
    right: -10px;
    top: -18px;
    width: 84px;
    height: 84px;
    border: 10px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--ic-raio-cheio);
}

@media (prefers-reduced-motion: reduce) {
    .cap-card:hover, .cap-card:focus-within { transform: none; }
}

.cap-card__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--ic-esp-2);
    padding: var(--ic-esp-4);
    flex: 1 1 auto;
}

.cap-card__selos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ic-esp-1);
    position: relative;   /* acima da marca d'água da faixa */
    z-index: 1;
}

.cap-card__titulo { margin: 0; font-size: var(--ic-texto-lg); }

.cap-card__desc {
    margin: 0;
    font-size: var(--ic-texto-sm);
    color: var(--ic-texto-suave);
}

.cap-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ic-esp-2);
    margin: 0;
    font-size: var(--ic-texto-xs);
    color: var(--ic-texto-suave);
}

.cap-card__acoes { margin-top: auto; }

/* ── Trilha: barra e módulos ───────────────────────────────────────────── */

.cap-desc { color: var(--ic-texto-suave); }

.cap-progresso-linha {
    display: flex;
    align-items: center;
    gap: var(--ic-esp-3);
}

.cap-progresso-linha .ic-progresso { flex: 1 1 auto; }

.cap-modulos-lista { display: flex; flex-direction: column; gap: var(--ic-esp-3); }

.cap-modulo-item {
    background: var(--ic-surface);
    border: 1px solid var(--ic-borda);
    border-radius: var(--ic-raio-lg);
    padding: var(--ic-esp-3);
}

.cap-modulo-item__cab {
    display: flex;
    align-items: center;
    gap: var(--ic-esp-3);
    cursor: pointer;
}

.cap-modulo-item__num {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--ic-raio-cheio);
    background: var(--ic-primary-100);
    color: var(--ic-primary-600);
    font-size: var(--ic-texto-xs);
    font-weight: 700;
}

.cap-modulo-item__tit { flex: 1 1 auto; min-width: 0; }

.cap-modulo-item__conta {
    font-size: var(--ic-texto-sm);
    color: var(--ic-texto-suave);
    font-variant-numeric: tabular-nums;
}

/* ── Lista de aulas (trilha e coluna lateral da aula) ──────────────────── */

.cap-itens { list-style: none; margin: var(--ic-esp-2) 0 0; padding: 0; }

.cap-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-esp-2);
    padding: var(--ic-esp-2) 0;
    border-top: 1px solid var(--ic-borda);
}

.cap-item__icone {
    flex: 0 0 1.25rem;
    text-align: center;
    color: var(--ic-texto-fraco);
    line-height: 1.4;
}

.cap-item__corpo { flex: 1 1 auto; min-width: 0; }

.cap-item__nome { display: block; font-weight: 600; word-break: break-word; }

.cap-item__meta {
    display: block;
    font-size: var(--ic-texto-xs);
    color: var(--ic-texto-suave);
}

.cap-item--concluida .cap-item__icone { color: var(--ic-sucesso); }
.cap-item--andamento .cap-item__icone { color: var(--ic-primary); }

/* Bloqueada: some o realce e reduz o contraste, para que o cadeado seja
   lido como estado e não como falha. */
.cap-item--bloqueada .cap-item__nome { color: var(--ic-texto-fraco); font-weight: 500; }

.cap-item--atual {
    background: var(--ic-bg-sutil);
    border-radius: var(--ic-raio-sm);
}

/* ── Tela da aula ──────────────────────────────────────────────────────── */

.cap-aula-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ic-esp-4);
    align-items: start;
}

@media (min-width: 980px) {
    .cap-aula-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}

/* Moldura 16:9 responsiva. O iframe do Drive não tem tamanho intrínseco —
   sem a proporção fixa ele colapsa para a altura padrão de 150px. */
.cap-player__moldura {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--ic-noite);
    border-radius: var(--ic-raio-lg);
    overflow: hidden;
}

.cap-player__moldura iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cap-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ic-esp-3);
    flex-wrap: wrap;
}

/* ── Quiz: builder da gestão ───────────────────────────────────────────── */

.cap-questoes { margin: 0; padding-left: var(--ic-esp-5); }

.cap-questao { margin-bottom: var(--ic-esp-3); }

.cap-questao__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ic-esp-2);
}

.cap-alternativas {
    list-style: none;
    margin: var(--ic-esp-1) 0 0;
    padding: 0;
    font-size: var(--ic-texto-sm);
    color: var(--ic-texto-suave);
}

.cap-alternativa--correta { color: var(--ic-sucesso-texto); font-weight: 600; }

.cap-alt-linha { margin-bottom: var(--ic-esp-2); }

.cap-alt-entrada {
    display: flex;
    align-items: center;
    gap: var(--ic-esp-2);
}

.cap-alt-entrada .ic-input { flex: 1 1 auto; }

.cap-alt-marca {
    display: flex;
    align-items: center;
    gap: var(--ic-esp-1);
    font-size: var(--ic-texto-xs);
    color: var(--ic-texto-suave);
    white-space: nowrap;
}

/* ── Quiz: tela de quem responde ───────────────────────────────────────── */

/* Coluna estreita e centrada: uma questão por vez pede foco, não largura. */
.cap-quiz { max-width: 46rem; }

.cap-quiz-regras {
    margin: 0 0 var(--ic-esp-4);
    padding-left: var(--ic-esp-5);
    font-size: var(--ic-texto-sm);
}

.cap-quiz-regras li { margin-bottom: var(--ic-esp-1); }

.cap-quiz-aviso { color: var(--ic-aviso-texto); }

.cap-quiz-passo {
    margin: 0 0 var(--ic-esp-2);
    font-size: var(--ic-texto-xs);
    color: var(--ic-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cap-quiz-enunciado {
    margin: var(--ic-esp-4) 0;
    font-size: var(--ic-texto-lg);
    line-height: 1.45;
}

.cap-quiz-alts { list-style: none; margin: 0 0 var(--ic-esp-4); padding: 0; }

.cap-quiz-alts li { margin-bottom: var(--ic-esp-2); }

/* Alvo de toque grande: a alternativa inteira é clicável, não só o círculo. */
.cap-quiz-alt {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-esp-3);
    min-height: var(--ic-toque-min);
    padding: var(--ic-esp-3);
    border: 1px solid var(--ic-borda);
    border-radius: var(--ic-raio);
    cursor: pointer;
    transition: var(--ic-transicao-rapida);
}

.cap-quiz-alt:hover { border-color: var(--ic-primary); background: var(--ic-bg-sutil); }

.cap-quiz-alt:focus-within { border-color: var(--ic-primary); }

.cap-quiz-alt input { margin-top: 0.2rem; }

/* ── Validação pública do certificado ──────────────────────────────────── */

/* Lista de definição em duas colunas no desktop, empilhada no celular —
   quem confere um certificado costuma estar no telefone. */
.cap-val {
    margin: var(--ic-esp-5) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ic-esp-1) var(--ic-esp-4);
    text-align: left;
}

.cap-val dt {
    font-size: var(--ic-texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ic-texto-suave);
}

.cap-val dd {
    margin: 0 0 var(--ic-esp-3);
    font-size: var(--ic-texto-md);
    word-break: break-word;
}

.cap-val code { font-size: var(--ic-texto-sm); }

@media (min-width: 560px) {
    .cap-val { grid-template-columns: max-content 1fr; align-items: baseline; }
    .cap-val dt { text-align: right; }
    .cap-val dd { margin-bottom: var(--ic-esp-2); }
}

/* ── Chips de filtro (Minhas Capacitações) ─────────────────────────────── */

/* Abas centradas ocupavam a largura da tela para filtrar três itens. O chip
   carrega o rótulo e a contagem no mesmo alvo, alinhado à esquerda como o
   resto do conteúdo, e só entra quando há trilha bastante para filtrar. */
.cap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ic-esp-2);
    margin-bottom: var(--ic-esp-3);
}

.cap-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ic-esp-2);
    min-height: var(--ic-toque-min);
    padding: 0 var(--ic-esp-4);
    border: 1px solid var(--ic-borda);
    border-radius: var(--ic-raio-cheio);
    background: var(--ic-surface);
    color: var(--ic-texto);
    font-size: var(--ic-texto-sm);
    text-decoration: none;
    transition: var(--ic-transicao-rapida);
}

.cap-chip:hover { border-color: var(--ic-primary); text-decoration: none; }

.cap-chip b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ic-texto-suave);
}

.cap-chip--ativo {
    background: var(--ic-primary);
    border-color: var(--ic-primary);
    color: var(--ic-texto-invertido);
}

.cap-chip--ativo b { color: inherit; opacity: .75; }

/* ── Card de trilha ────────────────────────────────────────────────────── */

.cap-card__pct { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ic-texto); }

/* Uma ação por card, ocupando a linha inteira: com dois botões lado a lado o
   "Certificado" competia com o "Continuar" e ninguém sabia qual era o caminho. */
.cap-card__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--ic-esp-2);
    margin-top: auto;
    padding-top: var(--ic-esp-2);
}

/* ── Medidor de tempo da aula ──────────────────────────────────────────── */

/* O bloco que mais gerava dúvida: era um parágrafo com três números soltos.
   Agora é rótulo + número + barra + uma frase, com a regra atrás do <details>. */
.cap-medidor {
    display: flex;
    flex-direction: column;
    gap: var(--ic-esp-2);
    margin-top: var(--ic-esp-3);
    padding: var(--ic-esp-3) var(--ic-esp-4);
    background: var(--ic-surface);
    border: 1px solid var(--ic-borda);
    border-radius: var(--ic-raio-lg);
}

.cap-medidor__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ic-esp-3);
    flex-wrap: wrap;
}

.cap-medidor__rotulo { font-size: var(--ic-texto-md); }

.cap-medidor__numeros {
    font-size: var(--ic-texto-sm);
    color: var(--ic-texto-suave);
    font-variant-numeric: tabular-nums;
}

.cap-medidor__numeros strong {
    font-size: var(--ic-texto-lg);
    color: var(--ic-texto-forte);
}

.cap-medidor__linha { margin: 0; font-size: var(--ic-texto-sm); }

.cap-medidor .cap-ajuda { margin-top: 0; }

/* Estado cumprido: o verde entra junto com a frase, nunca sozinho. */
.cap-medidor--ok { border-color: var(--ic-sucesso); }
.cap-medidor--ok .cap-medidor__linha { color: var(--ic-sucesso-texto); font-weight: 600; }

.cap-porque { font-size: var(--ic-texto-sm); }

.cap-porque > summary {
    cursor: pointer;
    color: var(--ic-primary);
    min-height: var(--ic-toque-min);
    display: flex;
    align-items: center;
}

.cap-porque > p {
    margin: var(--ic-esp-2) 0 0;
    color: var(--ic-texto-suave);
}

/* ── Coluna lateral e navegação da aula ────────────────────────────────── */

.cap-lado__conta {
    margin: var(--ic-esp-2) 0 0;
    font-size: var(--ic-texto-xs);
    color: var(--ic-texto-suave);
    font-variant-numeric: tabular-nums;
}

.cap-nav__seguir {
    display: flex;
    align-items: center;
    gap: var(--ic-esp-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cap-nav__aviso { margin: 0; }

/* Alvo de toque: material e certificado são baixados no celular, e 36px de
   altura erra o dedo com frequência demais para um arquivo por linha. */
.cap-material .ic-btn--sm { min-height: var(--ic-toque-min); }

/* ── Capa temática (trilha sem imagem cadastrada) ──────────────────────── */

/* Seis gradientes montados sobre os tokens da casa — nenhuma cor crua. A
   trilha escolhe sempre o mesmo (id % 6), então a cor vira parte de como a
   pessoa reconhece aquela trilha na lista, e não enfeite aleatório. */
.cap-capa--0 { background: linear-gradient(135deg, var(--ic-primary), var(--ic-info)); }
.cap-capa--1 { background: linear-gradient(135deg, var(--ic-info), var(--ic-sucesso)); }
.cap-capa--2 { background: linear-gradient(135deg, var(--ic-primary-600), var(--ic-primary)); }
.cap-capa--3 { background: linear-gradient(135deg, var(--ic-sucesso), var(--ic-info)); }
.cap-capa--4 { background: linear-gradient(135deg, var(--ic-noite), var(--ic-primary-600)); }
.cap-capa--5 { background: linear-gradient(135deg, var(--ic-primary), var(--ic-noite)); }

.cap-card__capa--tema { display: block; }

/* ── Continue de onde parou ────────────────────────────────────────────── */

/* O cartão inteiro é o link: o alvo de toque é o bloco, não só o botão — e
   no celular é ele que a pessoa acerta com o polegar. */
.cap-retomar {
    display: flex;
    align-items: center;
    gap: var(--ic-esp-4);
    flex-wrap: wrap;
    padding: var(--ic-esp-3);
    margin-bottom: var(--ic-esp-4);
    background: var(--ic-primary-100);
    border: 1px solid transparent;
    border-left: 4px solid var(--ic-primary);
    border-radius: var(--ic-raio-lg);
    color: var(--ic-texto);
    text-decoration: none;
    transition: var(--ic-transicao-rapida);
}

.cap-retomar:hover { text-decoration: none; box-shadow: var(--ic-sombra-suave); }
.cap-retomar:focus-visible { outline: 3px solid var(--ic-foco); outline-offset: 2px; }

.cap-retomar__capa {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    aspect-ratio: 16 / 9;
    border-radius: var(--ic-raio);
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Disco branco com o triângulo dentro: é o vocabulário de qualquer player, e
   dizia menos como um "▶" solto sobre o gradiente. */
.cap-retomar__play {
    width: 32px;
    height: 32px;
    border-radius: var(--ic-raio-cheio);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ic-noite);
    font-size: 13px;
    line-height: 32px;
    text-align: center;
    padding-left: 3px;   /* o triângulo é opticamente descentrado */
}

/* A fatia já assistida, na base da capa: o mesmo dado do card, no lugar onde
   todo player do mundo o coloca. */
.cap-retomar__barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background: var(--ic-texto-invertido);
}

.cap-retomar__texto {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cap-retomar__kicker {
    font-size: var(--ic-texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ic-primary-600);
}

.cap-retomar__aula {
    font-size: var(--ic-texto-lg);
    line-height: 1.3;
    /* Título longo não pode empurrar o botão para fora da linha. */
    overflow-wrap: anywhere;
}

.cap-retomar__meta {
    font-size: var(--ic-texto-sm);
    color: var(--ic-texto-suave);
    font-variant-numeric: tabular-nums;
}

/* O que falta é o número que a pessoa veio ver — sai do cinza do resto. */
.cap-retomar__falta { color: var(--ic-texto); font-weight: 600; }

/* O botão é decoração de um link que já é clicável inteiro: o <span> herda o
   destino, e no celular ele ocupa a linha para não virar alvo de 40px solto. */
.cap-retomar__btn { flex: 0 0 auto; pointer-events: none; }

@media (max-width: 560px) {
    .cap-retomar__capa { width: 88px; }
    .cap-retomar__btn { width: 100%; }
}

/* ── Índice da trilha (coluna lateral da aula) ─────────────────────────── */

/* Cabeçalho de módulo dentro do índice: hierarquia por peso e por um número
   pequeno, sem outra moldura — a coluna tem 290px e não sobra largura. */
.cap-lado__modulo {
    display: flex;
    align-items: center;
    gap: var(--ic-esp-2);
    margin: var(--ic-esp-4) 0 0;
    font-size: var(--ic-texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ic-texto-suave);
}

.cap-lado__num {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--ic-raio-cheio);
    background: var(--ic-primary-100);
    color: var(--ic-primary-600);
    font-size: var(--ic-texto-xs);
}

.cap-item__nota { color: var(--ic-primary-600); white-space: nowrap; }

/* Índice longo não pode empurrar a página inteira: no desktop ele acompanha
   a rolagem e cria a própria barra quando a trilha é grande. */
@media (min-width: 980px) {
    .cap-aula-lado {
        position: sticky;
        top: calc(var(--ic-topbar-altura) + var(--ic-esp-3));
        max-height: calc(100vh - var(--ic-topbar-altura) - var(--ic-esp-5));
        overflow-y: auto;
    }
}

/* ── Anotações ─────────────────────────────────────────────────────────── */

.cap-notas__aviso { margin-bottom: var(--ic-esp-3); }

/* ── Navegação: a próxima aula pelo nome ───────────────────────────────── */

.cap-nav__proxima {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    text-align: right;
}

.cap-nav__rotulo {
    font-size: var(--ic-texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ic-texto-suave);
}

.cap-nav__nome {
    font-size: var(--ic-texto-sm);
    font-weight: 600;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Fim de percurso (trilha concluída) ────────────────────────────────── */

.cap-fim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ic-esp-3);
    padding: var(--ic-esp-6) var(--ic-esp-4);
    text-align: center;
    background: var(--ic-sucesso-bg);
    border: 1px solid var(--ic-sucesso);
    border-radius: var(--ic-raio-lg);
}

.cap-fim__selo { margin: 0; font-size: 2.5rem; line-height: 1; }

.cap-fim__titulo { margin: 0; color: var(--ic-sucesso-texto); }

.cap-fim__sub { margin: 0; color: var(--ic-texto); }

/* Os três dados que alguém procura numa trilha fechada, em linha no desktop
   e empilhados no celular. */
.cap-fim__dados {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ic-esp-3) var(--ic-esp-6);
    margin: var(--ic-esp-2) 0 0;
}

.cap-fim__dados > div { display: flex; flex-direction: column; gap: 2px; }

.cap-fim__dados dt {
    font-size: var(--ic-texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ic-texto-suave);
}

.cap-fim__dados dd { margin: 0; font-weight: 600; }

.cap-fim__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ic-esp-3);
    margin-top: var(--ic-esp-2);
}

/* ── Capacitação presencial: lista de participantes ────────────────────── */

.cap-participantes { list-style: none; margin: 0; padding: 0; }

/* O rótulo inteiro é o alvo: caixa de 4mm num celular erra o dedo com
   frequência demais quando a lista tem trinta nomes. */
.cap-participante {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-esp-3);
    min-height: var(--ic-toque-min);
    padding: var(--ic-esp-2) var(--ic-esp-2);
    border-top: 1px solid var(--ic-borda);
    cursor: pointer;
    transition: var(--ic-transicao-rapida);
}

.cap-participantes li:first-child .cap-participante { border-top: none; }
.cap-participante:hover { background: var(--ic-bg-sutil); }
.cap-participante:focus-within { background: var(--ic-bg-sutil); }
.cap-participante input { margin-top: 0.25rem; flex: none; }
.cap-participante > span { display: flex; flex-direction: column; min-width: 0; }

.cap-participante__meta {
    font-size: var(--ic-texto-xs);
    color: var(--ic-texto-suave);
    word-break: break-word;
}


/* ══ Identidade (20/09/2026): Capacitação (Minhas capacitações e a gestão)
   na linguagem da casca — ladrilhos, pílulas, bordas leves, hover em tinta.
   Vem por último de propósito. ══ */
.cap-top h1 { font-size: 1.5rem; letter-spacing: -.015em; }
.cap-top .ic-btn, .cap-card__acoes .ic-btn, .cap-nav .ic-btn, .cap-modulo__acoes .ic-btn, .cap-material .ic-btn { border-radius: 999px; }
.cap-breadcrumb a { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ic-primary) 8%, transparent); text-decoration: none; }
.cap-breadcrumb a:hover { background: color-mix(in srgb, var(--ic-primary) 16%, transparent); }
/* chips de filtro: contador em bolha, ativo com sombra */
.cap-chip { min-height: 40px; padding: 0 6px 0 var(--ic-esp-4); border-color: color-mix(in srgb, var(--ic-borda) 80%, transparent); }
.cap-chip:hover { background: color-mix(in srgb, var(--ic-primary) 6%, var(--ic-surface)); }
.cap-chip b { font-size: var(--ic-texto-xs); padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ic-texto-suave) 12%, transparent); }
.cap-chip--ativo { box-shadow: 0 4px 12px color-mix(in srgb, var(--ic-primary) 25%, transparent); }
.cap-chip--ativo b { background: rgba(255,255,255,.22); color: #fff; opacity: 1; }
/* cartões de trilha */
.cap-card { border-radius: 14px; border-color: color-mix(in srgb, var(--ic-borda) 70%, transparent); }
.cap-card:hover, .cap-card:focus-within { border-color: color-mix(in srgb, var(--ic-primary) 45%, transparent); box-shadow: 0 10px 24px rgba(0,0,0,.07); }
.cap-card__selos .ic-badge { border-radius: 999px; }
.cap-card__titulo a { text-decoration: none; }
.cap-card__titulo a:hover { color: var(--ic-primary); }
.cap-card__pct { font-variant-numeric: tabular-nums; }
.cap-progresso-linha .ic-progresso, .cap-retomar__barra, .cap-medidor__linha { border-radius: 999px; overflow: hidden; }
/* retomar (a aula onde parou) */
.cap-retomar { border-radius: 16px; box-shadow: 0 10px 28px color-mix(in srgb, var(--ic-primary) 22%, transparent); }
.cap-retomar__btn { border-radius: 999px; }
.cap-retomar__kicker { letter-spacing: .1em; }
/* medidor e "por quê" */
.cap-medidor { border-radius: 14px; border-color: color-mix(in srgb, var(--ic-borda) 70%, transparent); }
.cap-medidor--ok { border-color: color-mix(in srgb, var(--ic-sucesso) 35%, transparent); background: color-mix(in srgb, var(--ic-sucesso) 6%, var(--ic-surface)); }
.cap-porque > summary { padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ic-texto-suave) 10%, transparent); display: inline-flex; }
/* trilha: módulos e itens */
.cap-modulo-item { border-radius: 14px; border-color: color-mix(in srgb, var(--ic-borda) 70%, transparent); }
.cap-modulo-item__num, .cap-lado__num { border-radius: 10px; background: color-mix(in srgb, var(--ic-primary) 10%, transparent); color: var(--ic-primary); }
.cap-modulo-item__conta { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ic-texto-suave) 12%, transparent); }
.cap-item { border-radius: 12px; transition: background var(--ic-transicao-rapida); }
.cap-item:hover { background: color-mix(in srgb, var(--ic-primary) 4%, var(--ic-surface)); }
.cap-item__icone { border-radius: 9px; background: color-mix(in srgb, var(--ic-primary) 8%, transparent); color: var(--ic-primary); }
.cap-item--concluida .cap-item__icone { background: color-mix(in srgb, var(--ic-sucesso) 14%, transparent); color: var(--ic-sucesso-texto); }
.cap-item--atual { background: color-mix(in srgb, var(--ic-primary) 7%, var(--ic-surface)); border-radius: 12px; }
.cap-item__nome:hover { color: var(--ic-primary); }
/* aula: player, navegação */
.cap-player__moldura { border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.cap-nav { border-radius: 14px; }
.cap-nav__proxima { border-radius: 12px; }
.cap-lado__modulo { border-radius: 12px; }
/* quiz */
.cap-quiz-passo { border-radius: 14px; }
.cap-quiz-alt { border-radius: 12px; transition: background var(--ic-transicao-rapida), border-color var(--ic-transicao-rapida); }
.cap-quiz-alt:hover { background: color-mix(in srgb, var(--ic-primary) 5%, var(--ic-surface)); }
.cap-quiz-alt:has(input:checked) { background: color-mix(in srgb, var(--ic-primary) 10%, var(--ic-surface)); border-color: var(--ic-primary); }
.cap-fim { border-radius: 16px; }
.cap-fim__selo { border-radius: 999px; }
/* gestão: módulos, aulas, materiais, editor */
.cap-modulo, .cap-aula, .cap-material, .cap-pop, .cap-editor { border-radius: 12px; border-color: color-mix(in srgb, var(--ic-borda) 70%, transparent); }
.cap-modulo__cab { border-radius: 12px 12px 0 0; }
.cap-aula:hover, .cap-material:hover { background: color-mix(in srgb, var(--ic-primary) 3%, var(--ic-surface)); }
.cap-nova-aula { border-radius: 12px; border-style: dashed; }
.cap-filtros .ic-btn { border-radius: 999px; }
.cap-val { border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .cap-card:hover, .cap-card:focus-within { transform: none; } }

/* ── Palestrantes: certificado de quem FALOU (21/09/2026) ─────────────── */

.cap-pal-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ic-esp-2);
    margin-bottom: var(--ic-esp-3);
}
.cap-pal-kpi {
    background: var(--ic-bg-sutil);
    border-radius: var(--ic-raio);
    padding: var(--ic-esp-3);
}
.cap-pal-kpi b { display: block; font-size: var(--ic-texto-xl); font-weight: 800; line-height: 1.1; }
.cap-pal-kpi span { font-size: var(--ic-texto-sm); color: var(--ic-texto-suave); }

.cap-pal-num {
    font-family: ui-monospace, Consolas, 'Courier New', monospace;
    font-size: var(--ic-texto-sm);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 720px) {
    .cap-filtros { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)) auto; }
}

/* origem e papel */
.cap-pal-origem { display: grid; gap: var(--ic-esp-2); margin-bottom: var(--ic-esp-3); }
.cap-pal-origem label {
    display: flex; gap: var(--ic-esp-2); align-items: flex-start;
    font-size: var(--ic-texto-sm); cursor: pointer;
}
.cap-pal-chips { display: flex; flex-wrap: wrap; gap: var(--ic-esp-2); }
.cap-pal-chip { position: relative; cursor: pointer; }
.cap-pal-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cap-pal-chip span {
    display: inline-block; padding: 6px 14px; border-radius: var(--ic-raio-cheio);
    border: 1px solid var(--ic-borda); background: var(--ic-surface);
    font-size: var(--ic-texto-sm); font-weight: 600; color: var(--ic-texto);
}
.cap-pal-chip input:checked + span { background: #122a4d; border-color: #122a4d; color: #fff; }
.cap-pal-chip input:focus-visible + span { outline: 3px solid var(--ic-foco); outline-offset: 2px; }
.cap-pal-sug { color: var(--ic-info-texto); background: var(--ic-info-bg); padding: 6px 10px; border-radius: var(--ic-raio-sm); }

/* formulário + pré-visualização */
.cap-pal-split { display: grid; grid-template-columns: 1fr; gap: var(--ic-esp-4); align-items: start; }
@media (min-width: 1000px) {
    .cap-pal-split { grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); }
    .cap-pal-preview { position: sticky; top: calc(var(--ic-topbar-altura) + var(--ic-esp-3)); }
}
.cap-pal-preview__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--ic-esp-2); flex-wrap: wrap; margin-bottom: var(--ic-esp-2); }
.cap-pal-eyebrow { font-size: var(--ic-texto-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ic-texto-suave); font-weight: 700; }

/*
 * O papel em miniatura. Tudo em cqw (largura do contêiner) para o certificado
 * escalar com a coluna, como uma foto — não é o impresso, é o espelho dele.
 * As cores são as do impresso (navy/dourado), fixas de propósito: o papel é
 * branco em qualquer tema.
 */
.cap-pal-papel {
    --cp-navy: #122a4d; --cp-gold: #c9962e; --cp-gold2: #e3b95c;
    width: 100%; aspect-ratio: 297 / 210; position: relative; overflow: hidden;
    background: #fff; color: #2b2b2b; border: 1px solid var(--ic-borda); border-radius: 6px;
    box-shadow: var(--ic-sombra); container-type: inline-size;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.cap-pal-papel .cp-corner { position: absolute; width: 40%; height: 57%; overflow: hidden; pointer-events: none; }
.cap-pal-papel .cp-corner--tl { top: 0; left: 0; }
.cap-pal-papel .cp-corner--br { bottom: 0; right: 0; transform: rotate(180deg); }
.cap-pal-papel .cp-corner i { position: absolute; display: block; width: 150%; transform: rotate(-45deg); transform-origin: top left; left: -8%; }
.cap-pal-papel .cp-n { height: 13%; background: var(--cp-navy); top: 32%; }
.cap-pal-papel .cp-b { height: 7%; background: linear-gradient(90deg, #2e86d3, #5db3e8); top: 44%; }
.cap-pal-papel .cp-g { height: 2.5%; background: linear-gradient(90deg, var(--cp-gold), var(--cp-gold2)); top: 51%; }
.cap-pal-papel .cp-frame { position: absolute; inset: 3.4%; border: 1px solid var(--cp-gold); }
.cap-pal-papel .cp-frame::before { content: ''; position: absolute; inset: .8%; border: 1px dashed #ccc; }
.cap-pal-papel .cp-seal {
    position: absolute; top: 6%; right: 7%; width: 13cqw; aspect-ratio: 1; border-radius: 50%;
    background: var(--cp-navy); color: #fff; display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: 1.05cqw; font-weight: 700; line-height: 1.3; padding: 0 1.3cqw;
    box-shadow: 0 0 0 .8cqw var(--cp-gold2);
}
.cap-pal-papel .cp-seal::before { content: ''; position: absolute; inset: -1.6cqw; border-radius: 50%; background: repeating-conic-gradient(var(--cp-gold) 0deg 9deg, transparent 9deg 18deg); z-index: -1; }
.cap-pal-papel .cp-c { position: absolute; inset: 0; padding: 6% 9% 5%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cap-pal-papel .cp-inst { font-size: 2.2cqw; font-weight: 800; letter-spacing: .2em; color: var(--cp-navy); text-transform: uppercase; margin-bottom: 1.2cqw; }
.cap-pal-papel .cp-h1 { font-size: 6.4cqw; letter-spacing: .18em; color: var(--cp-navy); font-weight: 800; line-height: 1; }
.cap-pal-papel .cp-sub { font-size: 2.2cqw; letter-spacing: .45em; color: var(--cp-gold); font-weight: 700; margin: .6cqw 0 1.6cqw; }
.cap-pal-papel .cp-certificamos { font-style: italic; font-size: 1.9cqw; margin-bottom: 1cqw; }
.cap-pal-papel .cp-nome { font-size: 4cqw; font-weight: 800; color: var(--cp-navy); text-transform: uppercase; line-height: 1.1; }
.cap-pal-papel .cp-div { width: 27%; border-top: 1px solid var(--cp-gold); margin: 1.4cqw auto 2cqw; }
.cap-pal-papel .cp-texto { font-size: 1.75cqw; line-height: 1.7; max-width: 80%; margin: 0; }
.cap-pal-papel .cp-texto b { color: var(--cp-navy); }
.cap-pal-papel .cp-ld { font-weight: 700; color: var(--cp-navy); font-size: 1.8cqw; margin-top: 1.6cqw; }
.cap-pal-papel .cp-badges { position: absolute; left: 8%; right: 8%; bottom: 19%; display: flex; justify-content: space-between; }
.cap-pal-papel .cp-badge { background: var(--cp-navy); color: #fff; border-radius: 99px; padding: 1.2cqw 3cqw; font-size: 1.8cqw; font-weight: 700; }
.cap-pal-papel .cp-badge span { color: var(--cp-gold2); }
.cap-pal-papel .cp-aut { position: absolute; left: 7%; bottom: 6.5%; width: 22%; display: flex; gap: 1cqw; align-items: flex-end; font-size: 1cqw; color: #666; text-align: left; line-height: 1.4; }
.cap-pal-papel .cp-qr { width: 7.5cqw; height: 7.5cqw; flex: none; border: .5cqw solid #000; background: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0) 0 0 / 33% 33%; }
.cap-pal-papel .cp-aut b { display: block; color: var(--cp-navy); text-transform: uppercase; letter-spacing: .05em; }
.cap-pal-papel .cp-aut code { font-size: .9cqw; word-break: break-all; }
.cap-pal-papel .cp-ass { position: absolute; left: 0; right: 0; bottom: 6.5%; display: flex; justify-content: center; }
.cap-pal-papel .cp-a1 { width: 22%; text-align: center; }
.cap-pal-papel .cp-firma { height: 4cqw; display: flex; align-items: flex-end; justify-content: center; }
.cap-pal-papel .cp-firma__ok { font-size: 1cqw; color: #888; font-style: italic; }
.cap-pal-papel .cp-l { border-top: 1px solid #2b2b2b; margin: .3cqw 0; }
.cap-pal-papel .cp-nome-ass { font-weight: 700; color: var(--cp-navy); font-size: 1.5cqw; text-transform: uppercase; }
.cap-pal-papel .cp-cg { font-size: 1.3cqw; color: #444; }

/* emitido */
.cap-pal-banner {
    background: var(--ic-sucesso-bg); color: var(--ic-sucesso-texto);
    border-radius: var(--ic-raio); padding: var(--ic-esp-3) var(--ic-esp-4);
    font-weight: 600; display: flex; gap: var(--ic-esp-2); align-items: center; flex-wrap: wrap;
    margin-bottom: var(--ic-esp-3);
}
.cap-pal-banner .cap-pal-num { background: rgba(255,255,255,.35); padding: 2px 8px; border-radius: var(--ic-raio-sm); font-size: var(--ic-texto-md); }
.cap-pal-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ic-esp-3); }
.cap-pal-acoes .ic-card__titulo { font-size: var(--ic-texto-md); }
.cap-pal-assinante { margin: 0; font-size: var(--ic-texto-sm); color: var(--ic-texto-suave); }
.cap-pal-assinante strong { color: var(--ic-texto); }

/* ── Capacitação aberta por CPF (migration 290) ────────────────────────── */

.cap-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cap-pp-faixa {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ic-esp-3);
    background: var(--ic-surface);
    border: 1px solid var(--ic-borda);
    border-radius: var(--ic-raio-md, 14px);
    padding: var(--ic-esp-4);
    margin-bottom: var(--ic-esp-4);
}
@media (min-width: 760px) { .cap-pp-faixa { grid-template-columns: 2fr 1fr 1fr; align-items: center; } }
.cap-pp-faixa__link { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cap-pp-faixa__link strong { font-size: var(--ic-texto-lg); color: var(--ic-primary-600); overflow-wrap: anywhere; }
.cap-pp-faixa__rot { font-size: var(--ic-texto-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ic-texto-fraco); font-weight: 600; }
.cap-pp-faixa__nota { font-size: var(--ic-texto-xs); color: var(--ic-texto-suave); }
.cap-pp-faixa__num { display: flex; flex-direction: column; }
.cap-pp-faixa__num strong { font-size: var(--ic-texto-xl); font-variant-numeric: tabular-nums; color: var(--ic-texto-forte); line-height: 1.1; }
.cap-pp-faixa__num span { font-size: var(--ic-texto-xs); color: var(--ic-texto-suave); }

.cap-pp-painel { border-color: var(--ic-primary); margin-bottom: var(--ic-esp-4); }
.cap-pp-painel__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ic-esp-3); flex-wrap: wrap; margin-bottom: var(--ic-esp-3); }
.cap-pp-painel__topo .ic-card__titulo { margin: 0; }

.cap-pp-grade { display: grid; grid-template-columns: 1fr; gap: var(--ic-esp-3); }
@media (min-width: 700px) { .cap-pp-grade { grid-template-columns: 1fr 1fr; } }
.cap-pp-grade .ic-campo { margin: 0; }
.cap-pp-grade__toda { grid-column: 1 / -1; }

.cap-pp-passos { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--ic-esp-4); }
.cap-pp-passos li { display: flex; flex-direction: column; gap: var(--ic-esp-2); align-items: flex-start; }
.cap-pp-passos li > span { color: var(--ic-texto-suave); font-size: var(--ic-texto-sm); }

.cap-pp-envio { display: flex; flex-direction: column; gap: var(--ic-esp-3); width: 100%; max-width: 560px; }
.cap-pp-envio .ic-campo { margin: 0; }
.cap-pp-soltar {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 2px dashed var(--ic-borda); border-radius: var(--ic-raio-md, 14px);
    background: var(--ic-bg-sutil); padding: var(--ic-esp-5, 28px) var(--ic-esp-3);
    text-align: center; cursor: pointer; color: var(--ic-texto-suave);
}
.cap-pp-soltar:hover, .cap-pp-soltar:focus-within { border-color: var(--ic-primary); color: var(--ic-texto); }
.cap-pp-soltar input { max-width: 100%; }

.cap-pp-linha-erro td { background: var(--ic-perigo-bg); }

.cap-pp-duas { display: grid; grid-template-columns: 1fr; gap: var(--ic-esp-4); align-items: start; }
@media (min-width: 900px) { .cap-pp-duas { grid-template-columns: 1fr 1.2fr; } }
.cap-pp-cursos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cap-pp-cursos li { display: flex; justify-content: space-between; align-items: center; gap: var(--ic-esp-3); padding: var(--ic-esp-3) 0; border-bottom: 1px solid var(--ic-borda); }
.cap-pp-cursos li:last-child { border-bottom: 0; }

.cap-pub-card { display: flex; flex-direction: column; gap: var(--ic-esp-3); }
.cap-pub-card__topo { display: flex; gap: var(--ic-esp-3); align-items: flex-start; }
.cap-pub-card__topo .ic-card__titulo { margin: 0 0 2px; }
.cap-pub-card__topo .cap-ajuda { margin: 0; }
.cap-pub-card__ico {
    width: 40px; height: 40px; flex: none; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--ic-primary-100); color: var(--ic-primary);
}
.cap-pub-card__ico svg { width: 20px; height: 20px; }

.cap-pub { display: flex; flex-direction: column; gap: var(--ic-esp-2); }
.cap-pub-linha {
    display: flex; align-items: center; gap: var(--ic-esp-3);
    padding: 12px 14px; border-radius: 14px;
    background: var(--ic-bg-sutil); border: 1px solid transparent;
    cursor: pointer; color: inherit; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.cap-pub-linha:hover { border-color: var(--ic-borda); }
.cap-pub-linha.is-on, .cap-pub-linha:has(.cap-switch:checked) { background: var(--ic-primary-100); border-color: color-mix(in srgb, var(--ic-primary) 25%, transparent); }
.cap-pub-linha__ico {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ic-surface); color: var(--ic-texto-suave);
    box-shadow: var(--ic-sombra-suave);
}
.cap-pub-linha:has(.cap-switch:checked) .cap-pub-linha__ico { color: var(--ic-primary); }
.cap-pub-linha__ico svg { width: 17px; height: 17px; }
.cap-pub-linha__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cap-pub-linha__txt strong { font-size: var(--ic-texto-sm); color: var(--ic-texto-forte); }
.cap-pub-linha__txt small { font-size: var(--ic-texto-xs); color: var(--ic-texto-suave); }
.cap-pub-linha__seta { color: var(--ic-texto-fraco); font-size: 1.3rem; line-height: 1; }
.cap-pub-linha--fixa .cap-pub-linha__ico { color: var(--ic-sucesso); }

.cap-switch {
    appearance: none; -webkit-appearance: none; flex: none; margin: 0;
    width: 42px; height: 24px; border-radius: 999px;
    background: var(--ic-borda); position: relative; cursor: pointer;
    transition: background .15s;
}
.cap-switch::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform .15s;
}
.cap-switch:checked { background: var(--ic-primary); }
.cap-switch:checked::after { transform: translateX(18px); }
.cap-switch:focus-visible { outline: 3px solid var(--ic-foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cap-switch, .cap-switch::after, .cap-pub-linha { transition: none; } }

.cap-pub__salvar { align-self: flex-start; }
.cap-pub.is-auto .cap-pub__salvar { display: none; }

.cap-pub-rodape {
    border-top: 1px solid var(--ic-borda); padding-top: var(--ic-esp-3);
    display: flex; flex-direction: column; gap: 6px;
    font-size: var(--ic-texto-xs); color: var(--ic-texto-suave);
}
.cap-pub-rodape p { margin: 0; }
.cap-pub-rodape strong { color: var(--ic-texto-forte); }
.cap-pub-rodape__url { color: var(--ic-primary); font-weight: 600; overflow-wrap: anywhere; }

/* ══ Editor da trilha — redesenho 06/10/2026 (escopo .cap-ed) ═══════════ */

.cap-ed { display: flex; flex-direction: column; gap: var(--ic-esp-4); }

.cap-ed-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ic-esp-4);
    padding: 24px 24px 0;
    border-radius: 20px;
    background:
        radial-gradient(600px 220px at 100% 0, color-mix(in srgb, var(--ic-primary) 12%, transparent), transparent 70%),
        var(--ic-surface);
    border: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent);
    box-shadow: var(--ic-sombra-suave);
    overflow: hidden;
}
@media (min-width: 900px) { .cap-ed-hero { grid-template-columns: minmax(0, 1fr) auto; padding: 28px 32px 0; } }

.cap-ed-hero__txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cap-ed-hero__migalha a { font-size: var(--ic-texto-sm); color: var(--ic-texto-suave); text-decoration: none; font-weight: 500; }
.cap-ed-hero__migalha a:hover { color: var(--ic-primary); }
.cap-ed-hero h1 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ic-texto-forte); text-wrap: balance; }
.cap-ed-hero__desc { margin: 0; color: var(--ic-texto-suave); max-width: 70ch; }
.cap-ed-hero__selos { display: flex; gap: 6px; flex-wrap: wrap; }
.cap-ed-hero__acoes { display: flex; gap: var(--ic-esp-2); flex-wrap: wrap; align-items: flex-start; }
.cap-ed-hero__acoes .ic-btn { border-radius: 999px; }
.cap-ed-hero__acoes form { margin: 0; }

.cap-ed-pilula {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 11px; border-radius: 999px;
    font-size: var(--ic-texto-xs); font-weight: 600;
    background: var(--ic-bg-sutil); color: var(--ic-texto-suave);
}
.cap-ed-pilula::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cap-ed-pilula--publicada { background: var(--ic-sucesso-bg); color: var(--ic-sucesso-texto); }
.cap-ed-pilula--rascunho  { background: var(--ic-aviso-bg); color: var(--ic-aviso-texto); }
.cap-ed-pilula--obrig     { background: var(--ic-perigo-bg); color: var(--ic-perigo-texto); }
.cap-ed-pilula--portal    { background: var(--ic-primary-100); color: var(--ic-primary); }

.cap-ed-numeros {
    grid-column: 1 / -1;
    margin: 0 -24px; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent);
}
@media (min-width: 900px) { .cap-ed-numeros { grid-template-columns: repeat(4, 1fr); margin: 0 -32px; } }
.cap-ed-numeros > div { padding: 14px 24px; border-right: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent); }
.cap-ed-numeros > div:last-child { border-right: 0; }
.cap-ed-numeros dt { font-size: var(--ic-texto-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ic-texto-fraco); font-weight: 600; }
.cap-ed-numeros dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 700; color: var(--ic-texto-forte); font-variant-numeric: tabular-nums; }
.cap-ed-numeros__txt { font-size: var(--ic-texto-md) !important; font-weight: 600 !important; }

.cap-ed .cap-editor { margin-top: 0; gap: var(--ic-esp-4); border: 0; }
.cap-ed .cap-editor__lado { display: flex; flex-direction: column; gap: var(--ic-esp-3); }
.cap-ed .cap-editor__lado > * { margin-top: 0 !important; }
.cap-ed .cap-editor__lado .ic-card { border-radius: 18px; }

.cap-ed-sec { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ic-esp-2); flex-wrap: wrap; margin-bottom: var(--ic-esp-3); }
.cap-ed-sec h2 { margin: 0; font-size: var(--ic-texto-lg); color: var(--ic-texto-forte); }

/* Módulos */
.cap-ed .cap-modulos { gap: var(--ic-esp-3); }
.cap-ed .cap-modulo {
    background: var(--ic-surface); border-radius: 18px; padding: 18px 18px 14px;
    border: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent);
    box-shadow: var(--ic-sombra-suave);
}
.cap-ed .cap-modulo__cab { align-items: center; gap: 12px; }
.cap-ed .cap-arrasta { color: var(--ic-texto-fraco); opacity: .5; cursor: grab; }
.cap-ed .cap-modulo:hover > .cap-modulo__cab .cap-arrasta, .cap-ed .cap-aula:hover .cap-arrasta { opacity: 1; }
.cap-ed-num {
    width: 32px; height: 32px; flex: none; border-radius: 10px;
    display: grid; place-items: center; font-weight: 700; font-size: var(--ic-texto-sm);
    background: var(--ic-primary); color: #fff;
}
.cap-ed .cap-modulo__tit strong { font-size: var(--ic-texto-md); color: var(--ic-texto-forte); }
.cap-ed-mais {
    list-style: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; cursor: pointer;
    color: var(--ic-texto-suave);
}
.cap-ed-mais::-webkit-details-marker { display: none; }
.cap-ed-mais:hover, .cap-modulo__acoes[open] .cap-ed-mais { background: var(--ic-primary-100); color: var(--ic-primary); }
.cap-ed-mais svg { width: 16px; height: 16px; }

/* Aulas */
.cap-ed .cap-aulas { margin-top: 12px; gap: 4px; }
.cap-ed .cap-aula {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px; border: 1px solid transparent;
    background: var(--ic-bg-sutil);
}
.cap-ed .cap-aula:hover { border-color: color-mix(in srgb, var(--ic-primary) 25%, transparent); background: var(--ic-surface); }
.cap-ed-tipo {
    width: 32px; height: 32px; flex: none; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--ic-surface); color: var(--ic-primary);
    box-shadow: var(--ic-sombra-suave);
}
.cap-ed-tipo svg { width: 16px; height: 16px; }
.cap-ed-tipo--quiz { color: var(--ic-info); }
.cap-ed-tipo--documento { color: var(--ic-aviso-texto); }
.cap-ed .cap-aula__nome { flex: 1 1 200px; min-width: 0; font-weight: 600; color: var(--ic-texto-forte); text-decoration: none; }
.cap-ed .cap-aula__nome:hover { color: var(--ic-primary); }
.cap-ed .cap-aula__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--ic-texto-xs); color: var(--ic-texto-suave); }
.cap-ed .cap-aula__meta .ic-badge { border-radius: 999px; }

.cap-ed .cap-nova-aula { margin-top: 10px; border: 0; padding: 0; }
.cap-ed-add {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center;
    padding: 7px 12px; border-radius: 999px;
    font-size: var(--ic-texto-sm); font-weight: 600; color: var(--ic-primary);
}
.cap-ed-add::-webkit-details-marker { display: none; }
.cap-ed-add:hover, .cap-nova-aula[open] .cap-ed-add { background: var(--ic-primary-100); }

.cap-ed-novo {
    margin-top: var(--ic-esp-3);
    border: 1.5px dashed color-mix(in srgb, var(--ic-primary) 35%, var(--ic-borda));
    border-radius: 18px; background: color-mix(in srgb, var(--ic-primary) 3%, transparent);
}
.cap-ed-novo > summary {
    list-style: none; cursor: pointer; padding: 16px 18px;
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; color: var(--ic-primary);
}
.cap-ed-novo > summary::-webkit-details-marker { display: none; }
.cap-ed-novo > summary span {
    width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    background: var(--ic-primary-100); font-size: 1.1rem;
}
.cap-ed-novo__form { padding: 0 18px 18px; display: grid; gap: var(--ic-esp-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .cap-ed-novo__form { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.cap-ed-novo__form .ic-campo { margin: 0; }

/* Gavetas da lateral */
.cap-ed-gaveta {
    background: var(--ic-surface); border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent);
    box-shadow: var(--ic-sombra-suave);
}
.cap-ed-gaveta > summary {
    list-style: none; cursor: pointer; padding: 16px 20px;
    display: flex; align-items: center; gap: 12px;
}
.cap-ed-gaveta > summary::-webkit-details-marker { display: none; }
.cap-ed-gaveta__tit { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cap-ed-gaveta__tit strong { color: var(--ic-texto-forte); }
.cap-ed-gaveta__tit small { color: var(--ic-texto-suave); font-size: var(--ic-texto-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-ed-gaveta__seta {
    width: 9px; height: 9px; flex: none;
    border-right: 2px solid var(--ic-texto-fraco); border-bottom: 2px solid var(--ic-texto-fraco);
    transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.cap-ed-gaveta[open] .cap-ed-gaveta__seta { transform: rotate(-135deg) translateY(-2px); }
.cap-ed-gaveta__corpo { padding: 0 20px 20px; border-top: 1px solid color-mix(in srgb, var(--ic-borda) 60%, transparent); padding-top: 16px; }
.cap-ed-gaveta--risco .cap-ed-gaveta__tit strong { color: var(--ic-perigo-texto); }
@media (prefers-reduced-motion: reduce) { .cap-ed-gaveta__seta { transition: none; } }
.cap-ed .cap-pub-card .ic-card__titulo { font-size: var(--ic-texto-md); font-weight: 700; color: var(--ic-texto-forte); }
.cap-ed .cap-pub-card { padding: 20px; }

/* ══ Lista de trilhas (gestão) — redesenho 06/10/2026 ═══════════════════ */

.cap-gx-atalhos { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.cap-gx-atalhos a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--ic-bg-sutil); border: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent);
    font-size: var(--ic-texto-sm); font-weight: 600; color: var(--ic-texto);
    text-decoration: none;
}
.cap-gx-atalhos a:hover { border-color: color-mix(in srgb, var(--ic-primary) 35%, transparent); color: var(--ic-primary); background: var(--ic-surface); }
.cap-gx-atalhos svg { width: 16px; height: 16px; color: var(--ic-primary); }
.cap-gx-atalhos__n {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center;
    background: var(--ic-perigo); color: #fff; font-size: 11px;
}

.cap-gx-barra { display: flex; gap: var(--ic-esp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cap-gx-filtros {
    display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
    background: var(--ic-surface); border: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent);
    flex-wrap: wrap;
}
.cap-gx-filtros a {
    padding: 6px 14px; border-radius: 999px;
    font-size: var(--ic-texto-sm); font-weight: 600; color: var(--ic-texto-suave); text-decoration: none;
}
.cap-gx-filtros a:hover { color: var(--ic-texto-forte); }
.cap-gx-filtros a.is-on { background: var(--ic-primary); color: #fff; }

.cap-gx-busca {
    display: flex; align-items: center; gap: 8px;
    flex: 0 1 340px; min-width: 0;
    padding: 0 14px; border-radius: 999px;
    background: var(--ic-surface); border: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent);
}
.cap-gx-busca:focus-within { border-color: var(--ic-primary); box-shadow: 0 0 0 3px var(--ic-primary-100); }
.cap-gx-busca svg { width: 16px; height: 16px; color: var(--ic-texto-fraco); flex: none; }
.cap-gx-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 0; font: inherit; color: var(--ic-texto); }

.cap-gx-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ic-esp-3); }
.cap-gx-item {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 16px 18px; border-radius: 18px;
    background: var(--ic-surface);
    border: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent);
    box-shadow: var(--ic-sombra-suave);
    transition: border-color .15s, box-shadow .15s;
}
.cap-gx-item:hover { border-color: color-mix(in srgb, var(--ic-primary) 30%, transparent); box-shadow: var(--ic-sombra); }
.cap-gx-item__capa {
    width: 56px; height: 56px; flex: none; border-radius: 16px;
    display: grid; place-items: center;
    font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, var(--ic-primary), var(--ic-primary-600));
}
.cap-gx-item__capa--1 { background: linear-gradient(135deg, #0EA5E9, #2563EB); }
.cap-gx-item__capa--2 { background: linear-gradient(135deg, #10B981, #0D9488); }
.cap-gx-item__capa--3 { background: linear-gradient(135deg, #F59E0B, #EA580C); }
.cap-gx-item__capa--4 { background: linear-gradient(135deg, #EC4899, #9333EA); }
.cap-gx-item__capa--5 { background: linear-gradient(135deg, #64748B, #334155); }
.cap-gx-item__txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cap-gx-item__titulo { font-weight: 700; font-size: var(--ic-texto-md); color: var(--ic-texto-forte); text-decoration: none; line-height: 1.3; }
.cap-gx-item__titulo:hover { color: var(--ic-primary); }
.cap-gx-item__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--ic-texto-xs); color: var(--ic-texto-suave); }
.cap-gx-item__meta span + span::before { content: "·"; margin-right: 14px; margin-left: -8px; color: var(--ic-texto-fraco); }
.cap-gx-item__acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cap-gx-item__acoes .ic-btn { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .cap-gx-item { transition: none; } }

/* ══ Minhas capacitações — redesenho 06/10/2026 ═════════════════════════ */

.cap-mx-retomar {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 18px 22px; border-radius: 20px; text-decoration: none; color: #fff;
    background:
        radial-gradient(500px 200px at 100% 0, rgba(255, 255, 255, .16), transparent 70%),
        linear-gradient(135deg, var(--ic-primary), var(--ic-noite));
    box-shadow: var(--ic-sombra);
}
.cap-mx-retomar__play {
    width: 56px; height: 56px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .18); color: #fff;
}
.cap-mx-retomar__play svg { width: 22px; height: 22px; margin-left: 3px; }
.cap-mx-retomar__txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cap-mx-retomar__kicker { font-size: var(--ic-texto-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .8; }
.cap-mx-retomar__txt strong { font-size: 1.15rem; line-height: 1.3; }
.cap-mx-retomar__meta { font-size: var(--ic-texto-sm); opacity: .85; }
.cap-mx-retomar .cap-mx-barra { background: rgba(255, 255, 255, .25); margin-top: 6px; max-width: 320px; }
.cap-mx-retomar .cap-mx-barra i { background: #fff; }
.cap-mx-retomar__btn { background: #fff !important; color: var(--ic-primary) !important; border-radius: 999px; border: 0; }
.cap-mx-retomar:hover .cap-mx-retomar__btn { transform: translateX(2px); }

.cap-mx-conta { font-size: 11px; opacity: .7; margin-left: 2px; }

.cap-mx-barra { display: block; flex: 1; height: 6px; border-radius: 999px; background: var(--ic-bg-sutil); overflow: hidden; }
.cap-mx-barra i { display: block; height: 100%; border-radius: inherit; background: var(--ic-primary); }
.cap-mx-prog { display: flex; align-items: center; gap: 10px; max-width: 420px; margin-top: 2px; }
.cap-mx-prog b { font-size: var(--ic-texto-xs); color: var(--ic-texto-forte); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.cap-mx-item--feita .cap-mx-barra i { background: var(--ic-sucesso); }
.cap-mx-item--feita .cap-gx-item__capa { background: linear-gradient(135deg, #10B981, #0D9488); }

.cap-mx-est--sucesso { background: var(--ic-sucesso-bg); color: var(--ic-sucesso-texto); }
.cap-mx-est--info    { background: var(--ic-info-bg); color: var(--ic-info-texto); }
.cap-mx-est--aviso   { background: var(--ic-aviso-bg); color: var(--ic-aviso-texto); }
.cap-mx-est--perigo  { background: var(--ic-perigo-bg); color: var(--ic-perigo-texto); }

.cap-mx-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ic-esp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.cap-mx-cert {
    display: flex; align-items: center; gap: 14px; height: 100%; box-sizing: border-box;
    padding: 14px 16px; border-radius: 16px; text-decoration: none; color: inherit;
    background: var(--ic-surface); border: 1px solid color-mix(in srgb, var(--ic-borda) 70%, transparent);
    box-shadow: var(--ic-sombra-suave);
}
.cap-mx-cert:hover { border-color: color-mix(in srgb, var(--ic-primary) 30%, transparent); }
.cap-mx-cert__selo { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #FEF3C7; color: #B45309; }
.cap-mx-cert__selo svg { width: 20px; height: 20px; }
.cap-mx-cert__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cap-mx-cert__txt strong { color: var(--ic-texto-forte); font-size: var(--ic-texto-sm); line-height: 1.35; }
.cap-mx-cert__txt small { color: var(--ic-texto-suave); font-size: var(--ic-texto-xs); }
.cap-mx-cert__abrir { font-size: var(--ic-texto-xs); font-weight: 600; color: var(--ic-primary); white-space: nowrap; }
.cap-mx-certs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }