/* ============================================================
   PÁGINA — área do aluno (dashboard + trilhas).
   Padrões locais que NÃO casam 1:1 com o DS compartilhado:
   tradução fiel dos style= inline das views dashboard/show,
   trilhas/index, trilhas/show e trilhas/_linha_aula.
   ============================================================ */

/* ── Dashboard ─────────────────────────────────────────── */

/* Saudação: 26/700 (titulo-pagina do DS é 24/1.3; aqui é 26/1.2). */
.dash-saudacao {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--texto);
  margin: 0 0 32px;
  overflow-wrap: anywhere;
}

/* Carrossel de banners de marketing (abaixo da saudação, acima dos KPIs). */
.dash-banners {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin: 0 0 24px;
}
.dash-banners__pista {
  display: flex;
  transition: transform 0.4s ease;
}
.dash-banners__slide {
  flex: 0 0 100%;
  display: block;
  aspect-ratio: 16 / 2;
  max-height: 200px;
}
.dash-banners__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dash-banners__pontos {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.dash-banners__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--ponto-sobre-foto);
  cursor: pointer;
}
.dash-banners__ponto--ativo {
  background: var(--sup);
}

/* Faixa de KPIs (row de cards de igual largura). */
.dash-kpis {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

/* Card KPI do aluno: 120px alt, valor 30px (o .kpi do DS é 24px e
   padding 18/20 — não bate, classe própria). */
.dash-kpi {
  flex: 1;
  height: 120px;
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.dash-kpi__rotulo {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 0;
}
.dash-kpi__valor {
  font-size: 30px;
  font-weight: 700;
  color: var(--marca-texto);
  margin: 0;
  line-height: 1;
}
.dash-kpi__sub {
  font-size: 13px;
  color: var(--txt-4);
  margin: 0;
}

/* Card destaque "comece por aqui / continue de onde parou". */
.dash-destaque {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  text-decoration: none;
}
.dash-destaque__thumb {
  border-radius: 6px;
  width: 168px;
  height: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Cor de fundo só quando não há capa (com capa, a imagem vem inline). */
.dash-destaque__thumb--sem-capa {
  background: var(--marca-suave-2);
}
/* Cor do ícone "play" sobre a thumb sem capa. */
.dash-destaque__thumb-icone {
  color: var(--marca-texto);
}
.dash-destaque__corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-destaque__rotulo {
  font-size: 11px;
  font-weight: 600;
  color: var(--marca-texto);
  letter-spacing: 0.8px;
  margin: 0;
}
.dash-destaque__titulo {
  font-size: 18px;
  font-weight: 600;
  color: var(--texto);
  margin: 0;
}
.dash-destaque__meta {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 0;
}
/* CTA do card destaque: 15/700, h38 (não bate com .btn do DS). */
/* O card inteiro é um <a>, então o CTA é um <span>: .btn-primary só pinta
   button/a/input, então o fundo azul precisa vir daqui (ALU-1.6). */
.dash-destaque__cta {
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  padding: 9px 16px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: var(--azul);
  color: var(--sobre-cor);
}

/* Grid trilhas + coluna lateral (certificado/conquistas). */
.dash-conteudo {
  display: grid;
  gap: 24px;
  align-items: start;
  grid-template-columns: 1fr 344px;
}

/* Título de seção do dashboard: 20/600 (subtítulos das colunas). */
.dash-secao-titulo {
  font-size: 20px;
  font-weight: 600;
  color: var(--texto);
  margin: 0;
}
/* Variante "Minhas trilhas" com altura/line-height fixos. */
.dash-secao-titulo--linha {
  height: 28px;
  line-height: 28px;
}

/* Texto de lista vazia do dashboard (15/cinza). */
.dash-vazio-texto {
  font-size: 15px;
  color: var(--texto-suave);
}

/* Grid de 3 cards de trilha do dashboard (gap 16, não 24 como o
   .grid-trilhas do DS). */
.dash-grid-trilhas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Link que envolve o card de trilha do dashboard. */
.dash-card-link {
  min-width: 0;
}

/* Card de trilha no dashboard (thumb 150px + corpo). */
.dash-card-trilha {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dash-card-trilha__thumb {
  height: 150px;
  flex-shrink: 0;
}
/* Paleta finita de fundo do card (índice i % 6); só quando sem capa. */
.dash-card-trilha__thumb--cor-0 { background: var(--marca-suave-2); }
.dash-card-trilha__thumb--cor-1 { background: var(--sucesso-suave); }
.dash-card-trilha__thumb--cor-2 { background: var(--sup-trilho); }
.dash-card-trilha__thumb--cor-3 { background: var(--lilas-suave); }
.dash-card-trilha__thumb--cor-4 { background: var(--sucesso-suave); }
.dash-card-trilha__thumb--cor-5 { background: var(--sup-trilho); }
.dash-card-trilha__corpo {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-card-trilha__titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  margin: 0;
}
.dash-card-trilha__meta {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 0;
}
.dash-card-trilha__legenda {
  font-size: 13px;
  color: var(--txt-4);
  margin: 0;
}

/* Barra de progresso do card do dashboard (6px). */
.dash-progresso {
  background: var(--sup-trilho);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.dash-progresso__barra {
  width: var(--pct, 0%);
  height: 6px;
  background: var(--azul);
}
.dash-progresso__barra--completa {
  background: var(--verde);
}

/* Link "Ver todos/todas" verde (combina com .link-ver-todos do DS). */
.dash-link-verde {
  font-size: 15px;
  font-weight: 500;
  color: var(--sucesso-texto);
}

/* Coluna lateral (certificado + conquistas). */
.dash-coluna {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dash-bloco {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card de certificado mais recente. */
.dash-cert {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-cert__icone {
  background: var(--azul-suave);
  border-radius: 8px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--marca-texto);
}
.dash-cert__titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  margin: 0;
}
.dash-cert__data {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 0;
}
/* Botão "Baixar PDF": outline azul, 15/700, h38 (não bate com .btn). */
.dash-cert__baixar {
  width: 100%;
  background: var(--sup);
  border: 1px solid var(--azul);
  border-radius: 8px;
  height: 38px;
  font-size: 15px;
  font-weight: 700;
  color: var(--marca-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Card de certificado vazio (estado sem certificados). */
.dash-cert-vazio {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.dash-cert-vazio__icone {
  background: var(--sup-hover);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marca-texto);
}
.dash-cert-vazio__titulo {
  font-size: 15px;
  font-weight: 500;
  color: var(--texto);
  margin: 0;
}
.dash-cert-vazio__texto {
  font-size: 15px;
  color: var(--texto-suave);
  margin: 0;
  line-height: 1.5;
}

/* Card de conquistas recentes. */
.dash-conquistas {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-conquistas__contagem {
  font-size: 13px;
  color: var(--txt-3);
  margin: 0;
}
.dash-conquistas__contagem strong {
  color: var(--texto);
}
.dash-conquistas__lista {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-medalha {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* ── Badge de status de trilha (modifier via status_trilha) ──
   Cores do statusTrilha do Vue original. */
.trilha-status {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  border-radius: 17px;
  padding: 4px 8px;
}
.trilha-status--concluida { background: var(--sucesso-suave); color: var(--sucesso-texto); }
.trilha-status--avaliacao { background: var(--alerta-suave); color: var(--alerta-texto); }
.trilha-status--andamento { background: var(--marca-suave); color: var(--marca-texto-hover); }
.trilha-status--nova { background: var(--sup-trilho); color: var(--txt-2); }

/* ── trilhas/index ─────────────────────────────────────── */

/* Título da página: 24/700 line-height 1.2 (titulo-pagina do DS é 1.3). */
.trilhas-titulo {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--texto);
  margin: 0 0 8px;
}
.trilhas-subtitulo {
  font-size: 14px;
  color: var(--texto-suave);
  margin: 0 0 32px;
}

/* Barra de filtros (busca + contador / toggle concluídas). */
.trilhas-filtros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.trilhas-filtros__esq {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trilhas-filtros__busca {
  width: 220px;
}
.trilhas-filtros__contador {
  font-size: 13px;
  color: var(--texto-suave);
  margin: 0;
}
.trilhas-filtros__dir {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trilhas-filtros__rotulo {
  font-size: 13px;
  color: var(--txt-2);
}

/* Toggle "mostrar concluídas". */
.trilhas-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: none;
  background: var(--azul);
  position: relative;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.trilhas-toggle__knob {
  position: absolute;
  top: 2px;
  left: 18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sup);
  transition: left 0.2s;
}

/* Estado vazio das trilhas (sem perfil / sem resultado de filtro). */
.trilhas-vazio {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 48px 32px;
  text-align: center;
}
.trilhas-vazio__titulo {
  font-size: 20px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 8px;
}
.trilhas-vazio__texto {
  font-size: 14px;
  color: var(--texto-suave);
  margin: 0;
}

/* Card de trilha da listagem (290px alt, thumb 155px + info). */
.trilha-card {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
  height: 290px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.trilha-card__thumb {
  height: 155px;
  flex-shrink: 0;
}
/* Paleta finita de fundo do card (índice i % 6); só quando sem capa. */
.trilha-card__thumb--cor-0 { background: var(--marca-suave-2); }
.trilha-card__thumb--cor-1 { background: var(--sucesso-suave); }
.trilha-card__thumb--cor-2 { background: var(--alerta-suave); }
.trilha-card__thumb--cor-3 { background: var(--lilas-suave); }
.trilha-card__thumb--cor-4 { background: var(--sucesso-suave); }
.trilha-card__thumb--cor-5 { background: var(--sup-trilho); }
.trilha-card__info {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.trilha-card__titulo {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto);
  margin: 0;
}
.trilha-card__meta {
  font-size: 12px;
  color: var(--txt-4);
  margin: 0;
}
.trilha-card__legenda {
  font-size: 11px;
  color: var(--txt-4);
  margin: 0;
}
/* Barra de progresso fina (4px) do card de listagem. */
.trilha-card__progresso {
  background: var(--borda-suave);
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
  margin-top: 4px;
}
.trilha-card__progresso-barra {
  width: var(--pct, 0%);
  background: var(--azul);
  height: 4px;
}
.trilha-card__progresso-barra--completa {
  background: var(--verde);
}

/* ── trilhas/show ──────────────────────────────────────── */

/* Banner de celebração (gradiente verde) da trilha concluída. */
.trilha-celebracao {
  background: linear-gradient(135deg, var(--sucesso) 0%, var(--sucesso) 100%);
  border-radius: 12px;
  padding: 24px 32px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--sobre-cor);
}
.trilha-celebracao__corpo {
  flex: 1;
  min-width: 0;
}
.trilha-celebracao__titulo {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.trilha-celebracao__texto {
  font-size: 14px;
  margin: 6px 0 0;
  opacity: 0.92;
  line-height: 1.5;
}
/* Botão "Ver certificado": branco/texto verde (não bate com .btn). */
.trilha-celebracao__btn {
  background: var(--sup);
  color: var(--sucesso-texto);
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}

/* Hero card da trilha. */
.trilha-hero {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 28px 32px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.trilha-hero__corpo {
  flex: 1;
  min-width: 0;
}
.trilha-hero__badge-wrap {
  margin-bottom: 14px;
}
/* Badge do hero: forma fixa; cor/borda/fundo por estado da trilha (modifier). */
.trilha-hero__badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 17px;
  padding: 4px 8px;
  border: 1px solid;
}
.trilha-hero__badge--concluida { color: var(--sucesso-texto); background: var(--sucesso-suave); }
.trilha-hero__badge--avaliacao { color: var(--alerta-texto); background: var(--alerta-suave); }
.trilha-hero__badge--andamento { color: var(--marca-texto-hover); background: var(--marca-suave); }
.trilha-hero__badge--nova { color: var(--txt-2); background: var(--sup-trilho); }
.trilha-hero__titulo {
  font-size: 26px;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 10px;
}
.trilha-hero__descricao {
  font-size: 14px;
  color: var(--texto-suave);
  margin: 0 0 14px;
  line-height: 1.5;
}
.trilha-hero__meta {
  font-size: 13px;
  color: var(--txt-4);
  margin: 0 0 20px;
}
.trilha-hero__progresso-rotulo {
  font-size: 12px;
  font-weight: 500;
  color: var(--texto);
  margin: 0 0 10px;
}
.trilha-hero__progresso {
  background: var(--borda-suave);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
/* Largura é o valor contínuo (--pct); cor verde só quando concluída. */
.trilha-hero__progresso-barra {
  width: var(--pct, 0%);
  height: 6px;
  background: var(--marca);
  transition: width 0.3s;
}
.trilha-hero__progresso-barra--completa {
  background: var(--sucesso-vivo);
}
/* CTA do hero: 14/600, padding 14/28 (não bate com .btn do DS). */
.trilha-hero__cta {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  padding: 14px 28px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Título "Conteúdo da trilha". */
.trilha-conteudo-titulo {
  font-size: 18px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 16px;
}

/* Accordion do módulo: esmaecido só quando bloqueado (modifier). */
.modulo-detalhes--bloqueado {
  opacity: 0.55;
}

/* Header do módulo (summary do accordion). */
.modulo-summary {
  list-style: none;
  width: 100%;
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
/* Ícone redondo do módulo (base + variantes de estado). */
.modulo-icone {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modulo-icone--done {
  background: var(--verde-badge);
  color: var(--sobre-cor);
  font-weight: 700;
  font-size: 15px;
}
.modulo-icone--andamento {
  background: var(--azul);
  color: var(--sobre-cor);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.modulo-icone--locked {
  background: var(--borda-suave);
}
.modulo-info {
  flex: 1;
  min-width: 0;
}
.modulo-info__titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  margin: 0;
}
.modulo-info__meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--txt-3);
  margin: 2px 0 0;
}
.modulo-chevron {
  color: var(--txt-4);
  flex-shrink: 0;
  display: inline-flex;
}

/* Bloco "Avaliação final" (estados liberada/concluída/bloqueada). */
.avaliacao-final {
  margin-top: 8px;
}
.avaliacao-final__icone {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Cor do círculo do ícone por estado da avaliação. */
.avaliacao-final__icone--concluida { background: var(--sucesso-vivo); color: var(--sobre-cor); }
.avaliacao-final__icone--liberada { background: var(--marca); color: var(--sobre-cor); }
.avaliacao-final__icone--bloqueada { background: var(--sup-trilho); color: var(--txt-3); }
.avaliacao-final__corpo {
  flex: 1;
  min-width: 0;
}
.avaliacao-final__titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
  margin: 0;
}
.avaliacao-final__meta {
  font-size: 12px;
  color: var(--txt-3);
  margin: 2px 0 0;
}
/* Pílula de estado da avaliação (base; cores por modificador). */
.avaliacao-status {
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 4px 10px;
  flex-shrink: 0;
}
.avaliacao-status--concluida {
  color: var(--sucesso-texto);
  background: var(--sucesso-suave);
}
.avaliacao-status--disponivel {
  color: var(--marca-texto-hover);
  background: var(--sup);
  border: 1px solid var(--marca-hover);
}
.avaliacao-status--bloqueada {
  color: var(--txt-4);
  background: var(--sup);
  border: 1px solid var(--borda-input);
}

/* Linha de aula (container): bg/borda-inferior/raio por posição/estado
   viram modifiers (--proxima destacada, --ultima fecha o bloco). */
.aula-linha {
  border-left: 1px solid var(--borda);
  border-right: 1px solid var(--borda);
  border-top: none;
  border-bottom: 1px solid var(--linha-suave);
  background: var(--sup-sutil);
  border-radius: 0;
  padding: 0 20px 0 56px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* bloqueada (div) = default; clicável vira pointer via .linha-aula-clicavel */
  cursor: default;
}
.aula-linha--proxima {
  background: var(--sup);
}
.aula-linha--ultima {
  border-bottom-color: var(--linha-forte);
  border-radius: 0 0 8px 8px;
}
.linha-aula-clicavel.aula-linha {
  cursor: pointer;
}

/* Bloco "Avaliação final" (container): forma fixa; fundo/borda/opacity
   por estado viram modifiers (bloqueada esmaecida). */
.avaliacao-final__caixa {
  border-radius: 8px;
  border: 2px solid;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: default;
}
.avaliacao-final__caixa--concluida { background: var(--sucesso-suave); border-color: var(--sucesso); }
.avaliacao-final__caixa--liberada { background: var(--marca-suave); border-color: var(--marca-hover); }
.avaliacao-final__caixa--bloqueada { background: var(--sup-sutil); border-color: var(--linha); opacity: 0.55; }
.avaliacao-final__caixa--clicavel {
  cursor: pointer;
}

/* ── trilhas/_linha_aula ───────────────────────────────── */

.linha-aula__esq {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.linha-aula__marcador {
  width: 18px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
/* Bolinha vazia da aula disponível. */
.linha-aula__bolinha {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--txt-3);
}
/* Título da aula (cinza só quando bloqueada → modifier). */
.linha-aula__titulo {
  font-size: 14px;
  font-weight: 400;
  color: var(--txt-2);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linha-aula__titulo--bloqueada {
  color: var(--txt-4);
}
/* Selo "+Quiz". */
.linha-aula__quiz {
  font-size: 9px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 5px;
  border: 1px solid var(--verde-badge);
  color: var(--sucesso-texto);
  background: var(--sucesso-suave);
  flex-shrink: 0;
}
.linha-aula__dir {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
/* Pílula "Bloqueada" da linha de aula. */
.linha-aula__bloqueada {
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--txt-4);
  background: var(--sup-hover);
}
.linha-aula__duracao {
  font-size: 12px;
  color: var(--txt-3);
  min-width: 40px;
  text-align: right;
}

/* Hover */
.dash-cert__baixar { transition: background 0.12s; }
.dash-cert__baixar:hover { background: var(--marca-suave); }
/* O fundo do toggle vem do JS (estado); o hover é um halo. */
.trilhas-toggle { transition: box-shadow 0.12s; }
.trilhas-toggle:hover { box-shadow: 0 0 0 4px var(--marca-suave-forte); }