/* ============================================================================
   UNITDK · Shell e componentes
   ----------------------------------------------------------------------------
   Depende de tokens.css (paleta, tipografia, espaçamento). Carregue os dois,
   nesta ordem.

   Sem Tailwind, sem npm, sem etapa de build: este arquivo é servido direto de
   public/. Ver docs/PLANO.md §2 para o porquê.

   Referência visual: design/mockups/ — em especial 00-sistema-visual.png e
   02-dashboard-aluno.png.

   Seções
     1. Base
     2. Shell (sidebar + main)
     3. Sidebar: logo, trilha ativa, navegação, rodapé, usuário
     4. Topbar: breadcrumb, busca, sino
     5. Componentes: rótulo, botão, card, selo, campo, progresso, estado vazio
     6. Responsivo
     7. Erros, estados vazios e esqueletos (ticket 04b)
     8. Entrada: login, esqueci a senha, nova senha (ticket 05)
     9. Gestão: pessoas e Diretorias (ticket 05b)
    10. Papéis e permissões (ticket 07)
    11. Primeiro acesso (ticket 05d)
    12. Notificações: sino, dropdown e página (ticket 06)
    13. Conteúdo: trilhas e cursos (ticket 10)
    14. Aulas: vídeo e PDF (ticket 11)
    15. Catálogo e minhas trilhas (ticket 12)
    16. Aprender: player, leitor e progresso (ticket 14)
    17. Escolha de trilhas no primeiro acesso (ticket 12b)
    18. Deck HTML em origem isolada (ticket 15)
    19. Prova: banco de questões e importação em lote (ticket 16)
    20. Realizar prova: questão, revisão e resultado (ticket 17)
    21. Certificado e conferência pública (ticket 19)
    22. Relatórios da Diretoria (ticket 20)
    23. Tela inicial do aluno (ticket 21)
    24. Perfil da própria pessoa (ticket 22)
    25. Certificados: herói, miniatura e grade (ticket 19b)
    26. Tela de foco: aula e prova (ticket 23)
    27. Página da trilha (ticket 24)
   ============================================================================ */

/* ============================================================================
   1. BASE
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tdk-bg);
  color: var(--tdk-text);
  font-family: var(--tdk-font);
  font-size: var(--tdk-fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--tdk-accent); text-decoration: none; transition: color var(--tdk-trans); }
a:hover { color: var(--tdk-accent-hov); }

h1, h2, h3, h4 { margin: 0; font-weight: var(--tdk-fw-semi); line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

svg { flex-shrink: 0; }

/* Foco visível — acessibilidade não é opcional num sistema de trabalho. */
:focus-visible {
  outline: 2px solid var(--tdk-accent);
  outline-offset: 2px;
  border-radius: var(--tdk-radius-sm);
}

.tdk-oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   2. SHELL
   ============================================================================ */

.tdk-shell {
  /* 216px: o rótulo mais longo ("Chat do curso" com a etiqueta) cabe, e nada
     sobra. Eram 248px. */
  --tdk-sidebar-w: 216px;
  /* A altura da topbar. A faixa do logo na sidebar usa a mesma, e as duas linhas
     de baixo se encontram. Era 72px; o usuário achou que tomava tela demais. */
  --tdk-topo-h: 56px;
  display: grid;
  grid-template-columns: var(--tdk-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 180ms ease;
}
@media (min-width: 881px) {
  .tdk-shell.is-recolhida { --tdk-sidebar-w: 68px; }
}

.tdk-conteudo {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tdk-main {
  padding: var(--tdk-sp-8) var(--tdk-sp-8) var(--tdk-sp-12);
  min-width: 0;
}

/* ── O respiro entre blocos de primeiro nivel ────────────────────────────────
   `.tdk-card`, `.tdk-tabela-rola` e a pilha de capitulos nasceram para ser filho
   unico da pagina, e nenhum traz margem propria: empilhados, ficavam colados, sem
   um pixel entre a tabela e o cartao seguinte.

   A regra e so para eles. Uma regra geral (`> * + *`) tambem afastaria
   `.tdk-grade` do `.tdk-secao` que a titula, e ali o aperto de 16px e proposital --
   o titulo tem de abracar a grade dele.

   24px e o mesmo respiro que `.tdk-pagina-topo` ja dava. Margens de irmaos
   adjacentes colapsam, entao onde o bloco anterior ja pede mais, o maior vence. */
.tdk-main > * + :is(.tdk-card, .tdk-tabela-rola, .tdk-capitulos, .tdk-vazio) {
  margin-top: var(--tdk-sp-6);
}

/* ============================================================================
   3. SIDEBAR   (refeita em 09/10/2026)
   ----------------------------------------------------------------------------
   Expandida (216px) ou recolhida (68px, só ícones). O estado vem num cookie e o
   servidor já entrega a classe `is-recolhida` no shell: nada pisca ao carregar.
   O comportamento (recolher, abrir grupo, dica) está em public/js/navegacao.js.

   Sem rodapé: Notificações é o sino do topo, e o Perfil é o menu da pessoa.
   ============================================================================ */

/* height + overflow-y na lista: sem eles a rolagem interna não funciona e o fim
   do menu é empurrado para fora da tela. Isso quebrou três vezes no projeto
   anterior antes de ficar claro. A sidebar em si fica `overflow: visible`, para o
   botão de recolher poder montar na borda. */
.tdk-sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 100vh;
  /* Explícito: o tokens.css (o pacote de design original) traz `overflow: hidden`
     aqui, e ele escondia metade do botão de recolher atrás da topbar. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: var(--tdk-bg-2);
  border-right: 1px solid var(--tdk-border);
}

/* A faixa do logo tem a altura da topbar: a linha de baixo das duas se encontra. */
.tdk-sidebar-topo {
  flex-shrink: 0;
  height: var(--tdk-topo-h);
  display: flex;
  align-items: center;
  padding: 0 var(--tdk-sp-5);
  border-bottom: 1px solid var(--tdk-border);
  /* Ao expandir, o logo inteiro aparece de uma vez e a coluna ainda está
     crescendo: sem isto ele transbordava por cima da topbar durante a animação. */
  overflow: hidden;
}

.tdk-logo { display: flex; align-items: center; }
.tdk-logo-inteiro { height: 26px; width: auto; }
.tdk-logo-marca { display: none; width: 28px; height: 28px; }

/* O botão de recolher: na borda, na altura do logo, metade dentro e metade fora. */
.tdk-recolher {
  position: absolute;
  top: calc(var(--tdk-topo-h) / 2);
  right: 0;
  transform: translate(50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--tdk-border-hi);
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-bg-2);
  color: var(--tdk-text-2);
  cursor: pointer;
  transition: color var(--tdk-trans), border-color var(--tdk-trans), background var(--tdk-trans);
}
.tdk-recolher:hover { color: var(--tdk-text); border-color: var(--tdk-accent); background: var(--tdk-surface); }
.tdk-recolher:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: 2px; }
.tdk-recolher svg { width: 13px; height: 13px; transition: transform var(--tdk-trans); }

.tdk-sidebar-rola {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--tdk-border-hi) transparent;
  padding: var(--tdk-sp-4) var(--tdk-sp-3) var(--tdk-sp-5);
}

/* Card "TRILHA ATIVA" */
.tdk-trilha-ativa {
  display: block;
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  padding: var(--tdk-sp-4);
  margin-bottom: var(--tdk-sp-5);
  transition: border-color var(--tdk-trans);
}
.tdk-trilha-ativa:hover { border-color: var(--tdk-border-hi); }
.tdk-trilha-ativa-nome {
  color: var(--tdk-text);
  font-size: var(--tdk-fs-base);
  font-weight: var(--tdk-fw-medium);
  margin: var(--tdk-sp-2) 0 var(--tdk-sp-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tdk-trilha-ativa-rodape {
  display: flex;
  justify-content: space-between;
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-3);
  margin-top: var(--tdk-sp-2);
}

/* Navegação */
.tdk-nav { display: flex; flex-direction: column; gap: 2px; }

.tdk-nav-item {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  width: 100%;
  padding: var(--tdk-sp-2) var(--tdk-sp-3);
  border: 1px solid transparent;
  border-radius: var(--tdk-radius);
  background: none;
  color: var(--tdk-text-2);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--tdk-trans), color var(--tdk-trans), border-color var(--tdk-trans);
}
.tdk-nav-item:hover {
  background: var(--tdk-surface);
  color: var(--tdk-text);
}
.tdk-nav-item:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: -2px; }
.tdk-nav-item.is-ativo {
  background: var(--tdk-surface-2);
  border-color: var(--tdk-border-hi);
  color: var(--tdk-text);
  font-weight: var(--tdk-fw-medium);
}
.tdk-nav-item svg { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.85; }
.tdk-nav-item.is-ativo svg { opacity: 1; color: var(--tdk-accent); }
.tdk-nav-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* O grupo de quem está lá dentro: acende o nome, sem a moldura do item ativo,
   que é do filho. */
.tdk-nav-item.is-dentro { color: var(--tdk-text); }
.tdk-nav-item.is-dentro > svg:first-child { opacity: 1; color: var(--tdk-accent); }

.tdk-nav-item .tdk-nav-seta {
  margin-left: auto;
  width: 16px;
  height: 16px;
  opacity: 0.55;
  transition: transform var(--tdk-trans);
}
.tdk-nav-item[aria-expanded="true"] .tdk-nav-seta { transform: rotate(90deg); }

/* Os filhos, com uma linha-guia à esquerda. Sem ícone: a guia já diz que estão
   dentro do grupo, e o ícone repetido só faria a coluna pesar. */
.tdk-nav-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--tdk-sp-1) 0 var(--tdk-sp-2) 20px;
  padding-left: var(--tdk-sp-2);
  border-left: 1px solid var(--tdk-border);
}
.tdk-nav-sub[hidden] { display: none; }
/* No grupo "Em produção" o nome do grupo já diz o que a etiqueta diria. */
.tdk-nav-pai--planejado .tdk-nav-producao { display: none; }
.tdk-nav-pai--planejado > .tdk-nav-item { opacity: 0.7; }
.tdk-nav-sub-titulo { display: none; }
.tdk-nav-item--sub { padding: var(--tdk-sp-2) var(--tdk-sp-3); }
.tdk-nav-item--sub svg { display: none; }

/* Item de tela que ainda não existe — só o Owner o vê. Aparece na estrutura, mas
   não finge funcionar. */
.tdk-nav-item.is-inerte {
  color: var(--tdk-text-3);
  cursor: default;
  opacity: 0.55;
}
.tdk-nav-item.is-inerte:hover { background: none; color: var(--tdk-text-3); }

/* A etiqueta do que ainda nao existe. Discreta de proposito: ela informa, e nao
   disputa atencao com os itens que funcionam. */
.tdk-nav-producao {
  margin-left: auto;
  padding: 2px var(--tdk-sp-2);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-pill);
  color: var(--tdk-text-3);
  font-family: var(--tdk-font-mono);
  font-size: 9px;
  line-height: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tdk-nav-contador {
  margin-left: auto;
  min-width: 20px;
  padding: 2px var(--tdk-sp-1);
  border-radius: var(--tdk-radius-pill);
  line-height: 16px;
  background: var(--tdk-accent);
  color: var(--tdk-on-accent);
  font-family: var(--tdk-font-mono);
  font-size: 10px;
  font-weight: var(--tdk-fw-bold);
  text-align: center;
}

/* O avatar: foto ou iniciais. Mora aqui desde o cartão da sidebar; hoje aparece
   no menu da pessoa, no perfil e nas listas. */
.tdk-usuario-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-gold);
  color: var(--tdk-bg);
  font-size: var(--tdk-fs-sm);
  font-weight: var(--tdk-fw-bold);
}

/* ── Recolhida: só os ícones ─────────────────────────────────────────────────
   Só a partir de 881px: abaixo disso a sidebar vira a faixa do topo, e o cookie
   de quem recolheu no computador não pode esconder os nomes no celular. */
@media (min-width: 881px) {
  .is-recolhida .tdk-sidebar-topo { justify-content: center; padding: 0; }
  .is-recolhida .tdk-logo-inteiro { display: none; }
  .is-recolhida .tdk-logo-marca { display: block; }
  .is-recolhida .tdk-recolher svg { transform: rotate(180deg); }
  .is-recolhida .tdk-sidebar-rola { padding: var(--tdk-sp-4) var(--tdk-sp-3) var(--tdk-sp-5); }
  .is-recolhida .tdk-trilha-ativa { display: none; }

  /* O rótulo do grupo vira um fio: separa sem ocupar largura. */
  .is-recolhida .tdk-nav-grupo {
    height: 1px;
    margin: var(--tdk-sp-3) 8px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    background: var(--tdk-border);
  }

  .is-recolhida .tdk-nav > .tdk-nav-item,
  .is-recolhida .tdk-nav-pai > .tdk-nav-item {
    justify-content: center;
    gap: 0;
    padding: var(--tdk-sp-2) 0;
  }
  /* Escondido só para o olho: o leitor de tela continua lendo o nome. */
  .is-recolhida .tdk-nav > .tdk-nav-item .tdk-nav-rotulo,
  .is-recolhida .tdk-nav-pai > .tdk-nav-item .tdk-nav-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .is-recolhida .tdk-nav > .tdk-nav-item .tdk-nav-producao,
  .is-recolhida .tdk-nav > .tdk-nav-item .tdk-nav-contador,
  .is-recolhida .tdk-nav-pai > .tdk-nav-item .tdk-nav-seta { display: none; }

  /* O grupo recolhido flutua ao lado do ícone, com o nome no alto. Fixo, para não
     ser cortado pela lista que rola; a altura vem do navegacao.js. O recuo de 10px
     à esquerda é transparente: é a ponte que o mouse atravessa sem o menu fechar. */
  .is-recolhida .tdk-nav-sub,
  .is-recolhida .tdk-nav-sub[hidden] {
    display: none;
    position: fixed;
    top: var(--tdk-flutua-topo, 0);
    left: calc(var(--tdk-sidebar-w) - 2px);
    z-index: 60;
    min-width: 184px;
    margin: 0;
    padding: var(--tdk-sp-2) var(--tdk-sp-2) var(--tdk-sp-2) var(--tdk-sp-4);
    border: 0;
  }
  .is-recolhida .tdk-nav-sub::before {
    content: "";
    position: absolute;
    inset: 0 0 0 var(--tdk-sp-2);
    z-index: -1;
    background: var(--tdk-surface);
    border: 1px solid var(--tdk-border-hi);
    border-radius: var(--tdk-radius-md);
    box-shadow: var(--tdk-shadow-lg);
  }
  .is-recolhida .tdk-nav-pai:is(:hover, :focus-within) > .tdk-nav-sub {
    display: flex;
    animation: tdk-surge 120ms ease-out;
  }
  .is-recolhida .tdk-nav-sub-titulo {
    display: block;
    margin: var(--tdk-sp-1) var(--tdk-sp-3) var(--tdk-sp-2);
    font-family: var(--tdk-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdk-text-3);
  }
}

/* A dica do item recolhido. Um elemento só, no fim do <body>, que o navegacao.js
   posiciona ao lado do ícone em foco ou sob o mouse. */
.tdk-dica {
  position: fixed;
  z-index: 70;
  transform: translateY(-50%);
  padding: var(--tdk-sp-1) var(--tdk-sp-3);
  border: 1px solid var(--tdk-border-hi);
  border-radius: 8px;
  line-height: 22px;
  background: var(--tdk-surface-2);
  box-shadow: var(--tdk-shadow-lg);
  color: var(--tdk-text);
  font-size: 12.5px;
  font-weight: var(--tdk-fw-medium);
  white-space: nowrap;
  pointer-events: none;
  animation: tdk-surge 120ms ease-out;
}
/* A setinha, apontando para o ícone. */
.tdk-dica::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: 8px;
  height: 8px;
  background: var(--tdk-surface-2);
  border-left: 1px solid var(--tdk-border-hi);
  border-bottom: 1px solid var(--tdk-border-hi);
  transform: translateY(-50%) rotate(45deg);
}
.tdk-dica[hidden] { display: none; }

@keyframes tdk-surge {
  from { opacity: 0; translate: -4px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tdk-dica,
  .is-recolhida .tdk-nav-pai:is(:hover, :focus-within) > .tdk-nav-sub { animation: none; }
  .tdk-shell { transition: none; }
}

/* ============================================================================
   4. TOPBAR
   ============================================================================ */

.tdk-topbar {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-4);
  /* Altura fixa, a mesma da faixa do logo na sidebar: as duas linhas de baixo se
     encontram. Medido: com padding solto davam 71,5px contra 69px. */
  height: var(--tdk-topo-h);
  padding: 0 var(--tdk-sp-8);
  border-bottom: 1px solid var(--tdk-border);
  background: var(--tdk-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tdk-caminho {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-sm);
  letter-spacing: 0.06em;
  color: var(--tdk-text-3);
  min-width: 0;
}
.tdk-caminho-atual { color: var(--tdk-text); font-weight: var(--tdk-fw-medium); }

.tdk-topbar-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
}

/* ── O menu da pessoa (09/10/2026) ──────────────────────────────────────────
   Discreto: avatar, primeiro nome e uma seta. Era o cartão do rodapé da sidebar,
   que mostrava o nome e não levava a lugar nenhum. */
.tdk-pessoal { position: relative; }

.tdk-pessoal-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  height: 36px;
  padding: 0 var(--tdk-sp-2) 0 var(--tdk-sp-1);
  border: 1px solid transparent;
  border-radius: var(--tdk-radius-pill);
  color: var(--tdk-text-2);
  transition: background var(--tdk-trans), border-color var(--tdk-trans), color var(--tdk-trans);
}
.tdk-pessoal-botao:hover,
.tdk-pessoal-botao[aria-expanded="true"] {
  background: var(--tdk-surface);
  border-color: var(--tdk-border);
  color: var(--tdk-text);
}
.tdk-pessoal-botao:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: 2px; }
.tdk-pessoal-nome { font-size: 13px; font-weight: var(--tdk-fw-medium); color: var(--tdk-text); }
.tdk-pessoal-seta { width: 16px; height: 16px; opacity: 0.6; transition: transform var(--tdk-trans); }
.tdk-pessoal-botao[aria-expanded="true"] .tdk-pessoal-seta { transform: rotate(180deg); }

.tdk-pessoal-painel {
  position: absolute;
  top: calc(100% + var(--tdk-sp-2));
  right: 0;
  z-index: 40;
  width: 264px;
  padding: var(--tdk-sp-2);
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border-hi);
  border-radius: var(--tdk-radius-md);
  box-shadow: var(--tdk-shadow-lg);
}

.tdk-pessoal-topo {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-3);
  margin-bottom: var(--tdk-sp-2);
  border-bottom: 1px solid var(--tdk-border);
}
.tdk-pessoal-quem { min-width: 0; }
.tdk-pessoal-nome-todo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tdk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tdk-pessoal-papel {
  margin-top: var(--tdk-sp-1);
  font-family: var(--tdk-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tdk-text-3);
}

.tdk-pessoal-lista { display: flex; flex-direction: column; gap: 1px; }

.tdk-pessoal-item {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  width: 100%;
  padding: var(--tdk-sp-2) var(--tdk-sp-3);
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tdk-text-2);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  transition: background var(--tdk-trans), color var(--tdk-trans);
}
.tdk-pessoal-item svg { width: 16px; height: 16px; opacity: 0.8; }
.tdk-pessoal-item:hover { background: var(--tdk-surface-2); color: var(--tdk-text); }
.tdk-pessoal-item:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: -2px; }

.tdk-pessoal-sair { margin-top: var(--tdk-sp-2); padding-top: var(--tdk-sp-2); border-top: 1px solid var(--tdk-border); }
.tdk-pessoal-sair .tdk-pessoal-item:hover { color: var(--tdk-danger); }


.tdk-busca {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  width: clamp(180px, 34vw, 420px);
  height: 36px;
  padding: 0 var(--tdk-sp-3);
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  color: var(--tdk-text-3);
  transition: border-color var(--tdk-trans);
}
.tdk-busca:focus-within { border-color: var(--tdk-border-hi); }
.tdk-busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--tdk-text);
  font-size: var(--tdk-fs-sm);
  outline: none;
}
.tdk-busca input::placeholder { color: var(--tdk-text-3); }
.tdk-atalho {
  font-family: var(--tdk-font-mono);
  font-size: 10px;
  line-height: 14px;
  padding: 2px var(--tdk-sp-1);
  border: 1px solid var(--tdk-border-hi);
  border-radius: var(--tdk-radius-sm);
  color: var(--tdk-text-3);
}

.tdk-sino {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  color: var(--tdk-text-2);
  cursor: pointer;
  transition: border-color var(--tdk-trans), color var(--tdk-trans);
}
.tdk-sino:hover { border-color: var(--tdk-border-hi); color: var(--tdk-text); }
.tdk-sino-ponto {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tdk-accent);
  border: 2px solid var(--tdk-surface);
}

/* ============================================================================
   5. COMPONENTES
   ============================================================================ */

/* Rótulo mono maiúsculo — a assinatura tipográfica do sistema */
.tdk-rotulo {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tdk-text-3);
  margin: 0;
}
.tdk-rotulo--accent { color: var(--tdk-accent); }

/* Botão */
.tdk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tdk-sp-2);
  /* 8 + 22 + 8 + a borda = 40px, na grade de 4 (ticket 57). Era 9px e dava 39. */
  padding: var(--tdk-sp-2) var(--tdk-sp-4);
  border: 1px solid transparent;
  border-radius: var(--tdk-radius);
  font-size: var(--tdk-fs-sm);
  line-height: 22px;
  font-weight: var(--tdk-fw-semi);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--tdk-trans), border-color var(--tdk-trans), color var(--tdk-trans);
}
.tdk-btn svg { width: 16px; height: 16px; }

.tdk-btn--primario {
  background: var(--tdk-accent);
  border-color: var(--tdk-accent);
  color: var(--tdk-on-accent);
}
.tdk-btn--primario:hover { background: var(--tdk-accent-hov); border-color: var(--tdk-accent-hov); color: var(--tdk-on-accent); }

.tdk-btn--secundario {
  background: transparent;
  border-color: var(--tdk-border-hi);
  color: var(--tdk-text);
}
.tdk-btn--secundario:hover { background: var(--tdk-surface-2); color: var(--tdk-text); }

.tdk-btn--sutil {
  background: transparent;
  border-color: transparent;
  color: var(--tdk-text-2);
}
.tdk-btn--sutil:hover { background: var(--tdk-surface); color: var(--tdk-text); }

.tdk-btn--perigo {
  background: transparent;
  border-color: var(--tdk-danger);
  color: var(--tdk-danger);
}
.tdk-btn--perigo:hover { background: var(--tdk-danger-soft); color: var(--tdk-danger); }

/* 4 + 22 + 4 + a borda = 32px. */
.tdk-btn--pequeno { padding: var(--tdk-sp-1) var(--tdk-sp-3); font-size: var(--tdk-fs-xs); }
.tdk-btn--bloco { width: 100%; }
.tdk-btn:disabled,
.tdk-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Card. A luz de cima (um degradê de 2,5% e um fio na borda de cima) é a
   tonalidade T2 do ticket 50: no escuro, sombra preta some, e é isto que dá relevo.
   Cartão que define o próprio `background` continua com o seu. */
.tdk-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 46%),
    var(--tdk-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-lg);
  padding: var(--tdk-sp-5);
}
.tdk-card--clicavel { transition: border-color var(--tdk-trans); }
.tdk-card--clicavel:hover { border-color: var(--tdk-border-hi); }
.tdk-card-titulo {
  font-size: var(--tdk-fs-md);
  font-weight: var(--tdk-fw-semi);
  color: var(--tdk-text);
  margin-bottom: var(--tdk-sp-2);
}

/* Selo (badge) */
.tdk-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-1);
  /* 2 + 16 + 2 = 20px. Era 3px 9px e dava 21,5. */
  padding: 2px var(--tdk-sp-2);
  border-radius: var(--tdk-radius-pill);
  font-family: var(--tdk-font-mono);
  font-size: 10px;
  line-height: 16px;
  font-weight: var(--tdk-fw-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tdk-selo--neutro  { background: var(--tdk-surface-3);     color: var(--tdk-text-2); }
.tdk-selo--accent  { background: var(--tdk-accent-soft);   color: var(--tdk-accent); }
.tdk-selo--ok      { background: var(--tdk-success-soft);  color: var(--tdk-ok); }
.tdk-selo--atencao { background: var(--tdk-warn-soft);     color: var(--tdk-warn); }
.tdk-selo--perigo  { background: var(--tdk-danger-soft);   color: var(--tdk-danger); }
.tdk-selo--ouro    { background: var(--tdk-gold-soft);     color: var(--tdk-gold); }

/* Campo de formulário */
.tdk-campo { display: flex; flex-direction: column; gap: var(--tdk-sp-2); }
.tdk-campo-label {
  font-size: var(--tdk-fs-sm);
  font-weight: var(--tdk-fw-medium);
  color: var(--tdk-text-2);
}
.tdk-campo-controle {
  width: 100%;
  /* 40px, como o botão ao lado (ticket 57): o seletor media 36,4 e o campo 41. */
  min-height: 40px;
  padding: var(--tdk-sp-2) var(--tdk-sp-3);
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  color: var(--tdk-text);
  font-family: inherit;
  font-size: var(--tdk-fs-base);
  line-height: 22px;
  transition: border-color var(--tdk-trans);
}
.tdk-campo-controle::placeholder { color: var(--tdk-text-3); }
.tdk-campo-controle:focus { outline: none; border-color: var(--tdk-accent); }
.tdk-campo-controle:disabled { opacity: 0.55; cursor: not-allowed; }
.tdk-campo-ajuda { font-size: var(--tdk-fs-xs); color: var(--tdk-text-3); }
.tdk-campo-erro { font-size: var(--tdk-fs-xs); color: var(--tdk-danger); }
.tdk-campo.tem-erro .tdk-campo-controle { border-color: var(--tdk-danger); }

/* Barra de progresso */
.tdk-progresso {
  height: 4px;
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-surface-3);
  overflow: hidden;
}
.tdk-progresso-preenche {
  display: block;
  height: 100%;
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-accent);
  transition: width var(--tdk-trans-slow);
}
.tdk-progresso-preenche.is-completo { background: var(--tdk-ok); }

/* Estado vazio */
.tdk-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-12) var(--tdk-sp-6);
  background: var(--tdk-surface);
  border: 1px dashed var(--tdk-border-hi);
  border-radius: var(--tdk-radius-lg);
  color: var(--tdk-text-3);
}
.tdk-vazio svg { width: 28px; height: 28px; opacity: 0.6; }
.tdk-vazio-titulo {
  font-size: var(--tdk-fs-md);
  font-weight: var(--tdk-fw-medium);
  color: var(--tdk-text-2);
}

/* Cabeçalho de seção */
.tdk-secao {
  display: flex;
  align-items: baseline;
  gap: var(--tdk-sp-3);
  margin: var(--tdk-sp-8) 0 var(--tdk-sp-4);
}
.tdk-secao:first-child { margin-top: 0; }
.tdk-secao h2 { font-size: var(--tdk-fs-lg); }
.tdk-secao-link { margin-left: auto; font-size: var(--tdk-fs-sm); }

/* Grade utilitária */
.tdk-grade { display: grid; gap: var(--tdk-sp-4); }
.tdk-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tdk-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tdk-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ============================================================================
   6. RESPONSIVO
   ============================================================================ */

@media (max-width: 1100px) {
  .tdk-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdk-grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  /* No celular não há sidebar: o shell vira uma coluna só, com o topo de 52 e as
     abas embaixo — tudo na seção 19, O CELULAR (ticket 59). Até ali, a sidebar
     virava uma faixa de ícones sem nome no alto da página. */
  .tdk-shell { grid-template-columns: minmax(0, 1fr); }
  .tdk-caminho { display: none; }

  .tdk-grade--2,
  .tdk-grade--3,
  .tdk-grade--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   7. ERROS, ESTADOS VAZIOS E ESQUELETOS   (ticket 04b)
   ----------------------------------------------------------------------------
   Referência: design/mockups/91-empty-states.png e 92-errors.png.

   Os dois mockups escrevem os próprios princípios, e vale repetir aqui porque
   eles guiam o CSS:
     · todo erro oferece PELO MENOS uma ação clara;
     · erro técnico mostra ID para suporte, nunca stacktrace;
     · cenário "sem dados" sempre com UMA ação clara.
   ============================================================================ */

/* ── Página mínima (500 e 503, sem shell) ─────────────────────────────────── */
.tdk-pagina-minima {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--tdk-sp-6);
}
.tdk-erro-caixa { width: 100%; max-width: 34rem; }

/* ── Cartão de erro ───────────────────────────────────────────────────────── */
.tdk-erro {
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-top: 2px solid var(--tdk-accent);
  border-radius: var(--tdk-radius-lg);
  padding: var(--tdk-sp-6);
  max-width: 42rem;
}
.tdk-erro--accent  { border-top-color: var(--tdk-accent); }
.tdk-erro--atencao { border-top-color: var(--tdk-warn); }
.tdk-erro--perigo  { border-top-color: var(--tdk-danger); }

.tdk-erro-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--tdk-sp-4);
  margin-bottom: var(--tdk-sp-4);
}

.tdk-erro-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--tdk-radius);
  background: var(--tdk-accent-soft);
  color: var(--tdk-accent);
}
.tdk-erro--atencao .tdk-erro-icone { background: var(--tdk-warn-soft);   color: var(--tdk-warn); }
.tdk-erro--perigo  .tdk-erro-icone { background: var(--tdk-danger-soft); color: var(--tdk-danger); }
.tdk-erro-icone svg { width: 20px; height: 20px; }

.tdk-erro-titulo {
  font-size: var(--tdk-fs-xl);
  font-weight: var(--tdk-fw-semi);
  color: var(--tdk-text);
  margin-top: 2px;
  line-height: 1.2;
}

.tdk-erro-texto {
  color: var(--tdk-text-2);
  line-height: 1.6;
  margin-bottom: var(--tdk-sp-5);
  max-width: 56ch;
}

.tdk-erro-caixa-interna {
  background: var(--tdk-bg-2);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  padding: var(--tdk-sp-4);
  margin-bottom: var(--tdk-sp-5);
}

.tdk-erro-id {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-md);
  color: var(--tdk-accent);
  margin-top: var(--tdk-sp-2);
  user-select: all;          /* selecionar de uma vez para copiar e mandar ao suporte */
  word-break: break-all;
}

.tdk-erro-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-sp-3);
}

/* ── Estado vazio: ícone, ação e variação compacta ────────────────────────── */
.tdk-vazio-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--tdk-radius);
  background: var(--tdk-surface-2);
  color: var(--tdk-accent);
  margin-bottom: var(--tdk-sp-2);
}
.tdk-vazio-icone svg { width: 20px; height: 20px; opacity: 1; }

.tdk-vazio-texto {
  color: var(--tdk-text-3);
  max-width: 46ch;
  line-height: 1.6;
}

.tdk-vazio-extra { width: 100%; max-width: 24rem; margin-top: var(--tdk-sp-2); }

.tdk-vazio-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tdk-sp-3);
  margin-top: var(--tdk-sp-2);
}

.tdk-vazio--compacto {
  padding: var(--tdk-sp-6) var(--tdk-sp-4);
  gap: var(--tdk-sp-2);
}
.tdk-vazio--compacto .tdk-vazio-icone { width: 32px; height: 32px; margin-bottom: 0; }
.tdk-vazio--compacto .tdk-vazio-icone svg { width: 16px; height: 16px; }
.tdk-vazio--compacto .tdk-vazio-titulo { font-size: var(--tdk-fs-base); }

/* Ilustração dentro do estado vazio (mockup 94-illustrations) */
.tdk-vazio-ilustracao { width: 200px; height: auto; margin-bottom: var(--tdk-sp-2); }

/* ── Esqueletos de carregamento ───────────────────────────────────────────── */
/* Mostrar a FORMA do conteúdo enquanto ele chega evita a tela pular quando o
   dado aparece — e é melhor que um spinner solto, que não informa nada. */
.tdk-esqueleto { width: 100%; }

.tdk-esq-bloco {
  display: block;
  border-radius: var(--tdk-radius-sm);
  background: linear-gradient(
    90deg,
    var(--tdk-surface-2) 0%,
    var(--tdk-surface-3) 50%,
    var(--tdk-surface-2) 100%
  );
  background-size: 200% 100%;
  animation: tdk-brilho 1.4s ease-in-out infinite;
}

@keyframes tdk-brilho {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respeita quem pediu menos animação no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  .tdk-esq-bloco { animation: none; background: var(--tdk-surface-2); }
  .tdk-esq-girando { animation-duration: 3s; }
}

.tdk-esq-card {
  display: flex;
  gap: var(--tdk-sp-4);
  align-items: center;
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-lg);
  padding: var(--tdk-sp-4);
}

.tdk-esq-linha-tabela {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-4);
  padding: var(--tdk-sp-3) 0;
  border-bottom: 1px solid var(--tdk-border);
}
.tdk-esq-linha-tabela:last-child { border-bottom: 0; }

.tdk-esq-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tdk-sp-3);
  aspect-ratio: 16 / 9;
  background: var(--tdk-bg-2);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-lg);
}

.tdk-esq-girando {
  width: 24px;
  height: 24px;
  border: 2px solid var(--tdk-surface-3);
  border-top-color: var(--tdk-accent);
  border-radius: 50%;
  animation: tdk-girar 0.8s linear infinite;
}

@keyframes tdk-girar {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   8. ENTRADA (login, esqueci a senha, nova senha)   (ticket 05)
   ----------------------------------------------------------------------------
   Referência: design/mockups/01-login.png — split-screen com formulário à
   esquerda e painel de marca à direita.
   ============================================================================ */

.tdk-entrada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.tdk-entrada-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tdk-sp-8) var(--tdk-sp-6);
}

.tdk-entrada-caixa {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
}

.tdk-entrada-logo {
  height: 28px;
  width: auto;
  align-self: flex-start;
  margin-bottom: var(--tdk-sp-12);
}

.tdk-entrada-titulo {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: var(--tdk-fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: var(--tdk-sp-2) 0 var(--tdk-sp-3);
}

.tdk-entrada-texto {
  color: var(--tdk-text-2);
  line-height: 1.6;
  margin-bottom: var(--tdk-sp-6);
}

.tdk-entrada-campos {
  display: grid;
  gap: var(--tdk-sp-4);
}

.tdk-entrada-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdk-sp-3);
  font-size: var(--tdk-fs-sm);
  flex-wrap: wrap;
}

.tdk-entrada-lembrar {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  color: var(--tdk-text-2);
  cursor: pointer;
}
/* A caixa nativa sai de vista e a `.tdk-caixinha` é o desenho (ticket 52). Continua
   sendo uma caixa de verdade: teclado, leitor de tela e formulário sem JavaScript. */
.tdk-entrada-lembrar { position: relative; }
.tdk-entrada-lembrar input { position: absolute; width: 16px; height: 16px; margin: 0; opacity: 0; }
.tdk-caixinha {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--tdk-border-hi);
  border-radius: 4px;
  transition: background var(--tdk-trans), border-color var(--tdk-trans);
}
.tdk-caixinha svg { width: 12px; height: 12px; color: var(--tdk-on-accent); stroke-width: 3; opacity: 0; }
.tdk-entrada-lembrar input:checked + .tdk-caixinha { background: var(--tdk-accent); border-color: var(--tdk-accent); }
.tdk-entrada-lembrar input:checked + .tdk-caixinha svg { opacity: 1; }
.tdk-entrada-lembrar input:focus-visible + .tdk-caixinha { outline: 2px solid var(--tdk-accent); outline-offset: 2px; }

/* O olho de mostrar a senha (ticket 52), dentro da caixa do campo. */
.tdk-campo-caixa { position: relative; }
.tdk-campo-caixa .tdk-campo-controle { padding-right: 48px; }
.tdk-olho {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--tdk-radius-sm);
  background: none;
  color: var(--tdk-text-3);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--tdk-trans), background var(--tdk-trans);
}
.tdk-olho[hidden] { display: none; }
.tdk-olho:hover { color: var(--tdk-text); background: var(--tdk-surface-2); }
.tdk-olho:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: -2px; }
.tdk-olho svg { width: 17px; height: 17px; }
.tdk-olho .tdk-olho-fechado,
.tdk-olho[aria-pressed="true"] .tdk-olho-aberto { display: none; }
.tdk-olho[aria-pressed="true"] .tdk-olho-fechado { display: block; }

/* O aviso de Caps Lock (ticket 52): perto do campo da senha, em âmbar. A margem
   negativa encurta o vão do formulário: medido, -8px deixava 4px de folga, e -4px
   deixa 8. */
.tdk-caps {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  margin-top: calc(-1 * var(--tdk-sp-1));
  color: var(--tdk-warn);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
}
.tdk-caps[hidden] { display: none; }
.tdk-caps svg { width: 12px; height: 12px; }

/* O botão de entrar, um pouco mais alto que o padrão e com 8px a mais de respiro
   acima (24 no total, como no canvas aprovado): é a ação da tela. */
.tdk-entrada-entrar { display: flex; width: 100%; margin-top: var(--tdk-sp-2); }
.tdk-entrada-entrar .tdk-btn { padding-block: 12px; }

/* A espera de muitas tentativas acabou (ticket 52): o recado vira o de liberado. */
.tdk-campo-erro.is-liberado { color: var(--tdk-ok); }

.tdk-entrada-aviso {
  background: var(--tdk-success-soft);
  border: 1px solid var(--tdk-ok);
  border-radius: var(--tdk-radius);
  color: var(--tdk-ok);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  font-size: var(--tdk-fs-sm);
  margin-bottom: var(--tdk-sp-4);
}

.tdk-entrada-nota {
  display: flex;
  align-items: flex-start;
  gap: var(--tdk-sp-2);
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  margin-top: var(--tdk-sp-6);
  color: var(--tdk-text-3);
  font-size: var(--tdk-fs-sm);
  line-height: 1.5;
}
.tdk-entrada-nota svg { margin-top: var(--tdk-sp-1); color: var(--tdk-text-3); }

.tdk-entrada-rodape {
  display: flex;
  justify-content: space-between;
  gap: var(--tdk-sp-3);
  margin-top: var(--tdk-sp-12);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  letter-spacing: 0.08em;
  color: var(--tdk-text-3);
}

/* ── Painel de marca ─────────────────────────────────────────────────────── */
/* O mockup traz "Destaque do mês" e três números aqui. São inventados, e não há
   trilha nem colaborador no sistema — então a coluna fica como espaço de marca
   até existir o que contar. Ver comentário no layout. */
.tdk-entrada-destaque {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(90, 181, 255, 0.10), transparent 60%),
    var(--tdk-bg-2);
  border-left: 1px solid var(--tdk-border);
}

.tdk-entrada-grade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--tdk-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tdk-border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at 60% 40%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, black 20%, transparent 75%);
}

/* O painel com conteúdo (ticket 52): emblema, frase e três fatos do produto, no
   centro. Sem número — ver o comentário no layout de entrada. */
.tdk-entrada-destaque { display: flex; align-items: center; justify-content: center; }

.tdk-entrada-marca {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tdk-sp-4);
  max-width: 34rem;
  padding: 0 var(--tdk-sp-10);
  text-align: center;
}

.tdk-entrada-emblema {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin-bottom: var(--tdk-sp-2);
  overflow: hidden;
  border: 1px solid var(--tdk-border);
  border-radius: 32px;
  background: radial-gradient(120% 100% at 30% 20%, var(--tdk-surface-2), #11151C 70%);
  box-shadow: 0 30px 70px -30px rgba(90, 181, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tdk-entrada-emblema img { width: 76px; height: 76px; }

.tdk-entrada-frase {
  color: var(--tdk-text);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: var(--tdk-fw-semi);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.tdk-entrada-frase em { font-style: normal; color: var(--tdk-accent); }

.tdk-entrada-fatos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tdk-sp-2);
  margin-top: var(--tdk-sp-2);
}
.tdk-entrada-fatos li {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-pill);
  background: rgba(22, 26, 34, 0.8);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
}
.tdk-entrada-fatos svg { width: 16px; height: 16px; color: var(--tdk-accent); }

@media (max-width: 880px) {
  /* No celular a coluna de marca não cabe e não informa nada — sai. */
  .tdk-entrada { grid-template-columns: minmax(0, 1fr); }
  .tdk-entrada-destaque { display: none; }
  .tdk-entrada-logo { margin-bottom: var(--tdk-sp-8); }
  .tdk-entrada-rodape { margin-top: var(--tdk-sp-8); }
}

/* ============================================================================
   9. GESTÃO (pessoas, Diretorias)   (ticket 05b)
   ----------------------------------------------------------------------------
   Primeiras telas de trabalho do sistema: lista com filtro, tabela e formulário
   de cadastro. Tudo em CSS servido direto de public/, como o resto.
   ============================================================================ */

/* ── Cabeçalho de página ──────────────────────────────────────────────────── */

.tdk-pagina-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tdk-sp-4);
  margin-bottom: var(--tdk-sp-6);
  flex-wrap: wrap;
}

.tdk-pagina-titulo {
  font-size: var(--tdk-fs-2xl);
  font-weight: var(--tdk-fw-bold);
  letter-spacing: -0.02em;
  margin: var(--tdk-sp-2) 0 0;
}

.tdk-pagina-sub {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
  margin: var(--tdk-sp-1) 0 0;
  max-width: 68ch;
}

/* ── Grupo de navegação na sidebar ───────────────────────────────────────── */

.tdk-nav-grupo {
  margin: var(--tdk-sp-5) 0 var(--tdk-sp-2);
  padding: 0 var(--tdk-sp-3);
}

/* ── Filtros ─────────────────────────────────────────────────────────────── */

.tdk-filtros {
  display: flex;
  gap: var(--tdk-sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--tdk-sp-5);
  padding: var(--tdk-sp-4);
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
}

.tdk-filtros .tdk-campo { margin: 0; min-width: 200px; flex: 1 1 200px; }
.tdk-filtros .tdk-campo:has(select) { flex: 0 0 auto; min-width: 160px; }

.tdk-filtros-acoes {
  display: flex;
  gap: var(--tdk-sp-2);
  /* Alinha com a base dos campos, não com o topo do rótulo. */
  padding-bottom: 1px;
}

/* ── Tabela ──────────────────────────────────────────────────────────────── */

/* A rolagem é do invólucro, não do <body>: uma tabela larga não pode fazer a
   página inteira rolar de lado. */
.tdk-tabela-rola {
  overflow-x: auto;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  background: var(--tdk-surface);
}

.tdk-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tdk-fs-sm);
  text-align: left;
}

.tdk-tabela th,
.tdk-tabela td {
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  border-bottom: 1px solid var(--tdk-border);
  vertical-align: middle;
}

.tdk-tabela thead th {
  /* 40px de altura em toda tabela (era 41,45): a altura fixa, e o texto de 16 no meio. */
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 16px;
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tdk-text-3);
  font-weight: var(--tdk-fw-medium);
  background: var(--tdk-surface-2);
  white-space: nowrap;
}

.tdk-tabela tbody tr:last-child th,
.tdk-tabela tbody tr:last-child td { border-bottom: 0; }

.tdk-tabela tbody tr:hover { background: var(--tdk-surface-2); }

/* Conta desativada continua visível — o histórico é dela — mas recuada, para
   não competir com quem está em atividade. */
.tdk-tabela tbody tr.is-inativa { opacity: 0.55; }

.tdk-tabela tbody th { font-weight: var(--tdk-fw-normal); }

.tdk-tabela-acoes { text-align: right; white-space: nowrap; }

/* ── Capítulo dentro da tabela de aulas (ticket 30) ──────────────────────────
   Uma tabela só, com uma linha de grupo por capítulo. A alternativa — uma tabela
   por capítulo — repetiria o cabeçalho a cada bloco. */

.tdk-tabela tbody tr.tdk-grupo-modulo > th {
  background: var(--tdk-bg-2);
  border-top: 1px solid var(--tdk-border);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  font-weight: var(--tdk-fw-normal);
}

/* O hover geral da tabela é para linha clicável; a de grupo não é uma delas. */
.tdk-tabela tbody tr.tdk-grupo-modulo:hover { background: transparent; }

.tdk-grupo-modulo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdk-sp-3);
  flex-wrap: wrap;
}

.tdk-grupo-modulo-nome {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  flex: 1 1 320px;
  min-width: 0;
}

.tdk-grupo-modulo-nome .tdk-campo-controle {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--tdk-fw-semi);
}

.tdk-grupo-modulo-num {
  flex: 0 0 auto;
  min-width: 24px;
  text-align: center;
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-3);
}

.tdk-celula-pessoa {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
}

.tdk-celula-nome {
  margin: 0;
  font-weight: var(--tdk-fw-semi);
  color: var(--tdk-text);
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
}

.tdk-celula-sub {
  margin: 0;
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-3);
  font-weight: var(--tdk-fw-normal);
}

/* Chip de área: a cor vem do enum, via --cor, e o valor mora no tokens.css. */
.tdk-chip-area {
  display: inline-block;
  padding: 2px var(--tdk-sp-2);
  line-height: 14px;
  border-radius: var(--tdk-radius-pill);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  font-weight: var(--tdk-fw-medium);
  letter-spacing: 0.04em;
  color: var(--cor, var(--tdk-text-2));
  border: 1px solid color-mix(in srgb, var(--cor, var(--tdk-border)) 40%, transparent);
  background: color-mix(in srgb, var(--cor, var(--tdk-surface)) 12%, transparent);
}

/* ── Formulário ──────────────────────────────────────────────────────────── */

.tdk-form-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--tdk-sp-4);
}

.tdk-form-acoes {
  display: flex;
  gap: var(--tdk-sp-3);
  align-items: center;
  margin-top: var(--tdk-sp-5);
  flex-wrap: wrap;
}

form > .tdk-card { margin-bottom: var(--tdk-sp-4); }

.tdk-selecao {
  /* Seta desenhada aqui para o select não herdar o widget do sistema, que
     ignora a paleta e aparece branco no tema escuro. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
                    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--tdk-sp-8);
}

.tdk-selecao option { background: var(--tdk-surface); color: var(--tdk-text); }

/* Caixas de seleção */

.tdk-caixas {
  border: 0;
  padding: 0;
  margin: var(--tdk-sp-5) 0 0;
}

/* Lista longa de caixas (setores, pessoas): tantas colunas quanto couberem, cada
   uma com pelo menos 240px — o nome mais longo, "Desenvolvimento de Produtos (DEP)",
   cabe numa linha. No celular, uma coluna só. Antes era sempre uma coluna, e os 26
   setores viravam uma tira estreita de 1.200px de altura numa tela larga.

   Colunas de texto, e não grid: a lista é alfabética, e se lê descendo a coluna —
   a grid a espalharia em linhas, Comercial ao lado de Compras ao lado de Compras
   para Obras, e o olho teria de ziguezaguear. */
.tdk-caixas-grade {
  columns: 240px;
  column-gap: var(--tdk-sp-6);
}
.tdk-caixas-grade > .tdk-caixa { break-inside: avoid; }

.tdk-caixa {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  padding: var(--tdk-sp-2) 0;
  font-size: var(--tdk-fs-sm);
  color: var(--tdk-text-2);
  cursor: pointer;
}

/* Sem a margem do navegador (3px em volta, 5px à esquerda no rádio): o vão é o `gap`. */
.tdk-caixa input { accent-color: var(--tdk-accent); width: 16px; height: 16px; margin: 0; }

/* Lista de leitura, para quem não pode editar a governança */

.tdk-descricao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--tdk-sp-4);
  margin: 0;
}

.tdk-descricao dt {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tdk-text-3);
}

.tdk-descricao dd {
  margin: var(--tdk-sp-1) 0 0;
  color: var(--tdk-text);
  font-weight: var(--tdk-fw-medium);
}

/* ── Alerta ──────────────────────────────────────────────────────────────── */

.tdk-alerta {
  border: 1px solid var(--tdk-border);
  border-left-width: 3px;
  border-radius: var(--tdk-radius);
  padding: var(--tdk-sp-4);
  margin-bottom: var(--tdk-sp-5);
  background: var(--tdk-surface);
  font-size: var(--tdk-fs-sm);
  color: var(--tdk-text-2);
}

.tdk-alerta-titulo {
  margin: 0 0 var(--tdk-sp-2);
  font-weight: var(--tdk-fw-semi);
  color: var(--tdk-text);
}

.tdk-alerta-texto p { margin: 0 0 var(--tdk-sp-2); }
.tdk-alerta-texto p:last-child { margin-bottom: 0; }

/* O link de senha é para copiar: mono, quebrando em qualquer ponto, porque um
   token de 64 caracteres estouraria a caixa. */
.tdk-alerta-link {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text);
  background: var(--tdk-surface-2);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-sm);
  padding: var(--tdk-sp-2) var(--tdk-sp-3);
  word-break: break-all;
  user-select: all;
}

.tdk-alerta--ok { border-left-color: var(--tdk-success); }
.tdk-alerta--atencao { border-left-color: var(--tdk-warn); }
.tdk-alerta--perigo { border-left-color: var(--tdk-danger); }
.tdk-alerta--info { border-left-color: var(--tdk-blue); }

/* ── Paginação ───────────────────────────────────────────────────────────── */

.tdk-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdk-sp-4);
  margin-top: var(--tdk-sp-4);
  flex-wrap: wrap;
}

.tdk-paginacao-conta,
.tdk-paginacao-pagina {
  margin: 0;
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-3);
}

.tdk-paginacao-botoes {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
}

.tdk-btn.is-inerte {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .tdk-pagina-topo { flex-direction: column; align-items: stretch; }
  .tdk-filtros { flex-direction: column; align-items: stretch; }
  .tdk-filtros-acoes { padding-bottom: 0; }
  .tdk-paginacao { justify-content: center; }
}

/* ============================================================================
   10. PAPÉIS E PERMISSÕES   (ticket 07)
   ============================================================================ */

/* Caixa em bloco: a permissão precisa do nome, da explicação e da chave que o
   código consulta. Sem a explicação, ligar um controle vira adivinhação. */
.tdk-caixa--bloco {
  align-items: flex-start;
  padding: var(--tdk-sp-3);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-sm);
  margin-bottom: var(--tdk-sp-2);
}

.tdk-caixa--bloco:hover { border-color: var(--tdk-border-hi); }
.tdk-caixa--bloco input { margin-top: var(--tdk-sp-1); flex: 0 0 auto; }

.tdk-caixa-titulo {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  font-weight: var(--tdk-fw-semi);
  color: var(--tdk-text);
}

.tdk-caixa-texto {
  display: block;
  margin-top: 2px;
  color: var(--tdk-text-3);
  font-size: var(--tdk-fs-xs);
}

.tdk-caixa-chave {
  display: inline-block;
  margin-top: var(--tdk-sp-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-3);
  background: var(--tdk-surface-2);
  border-radius: var(--tdk-radius-sm);
  padding: 2px var(--tdk-sp-2);
}

/* Formulário de conceder: dois selects e um botão, na mesma linha. */
.tdk-conceder {
  display: flex;
  gap: var(--tdk-sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: var(--tdk-sp-4);
  padding-top: var(--tdk-sp-4);
  border-top: 1px solid var(--tdk-border);
}

.tdk-conceder .tdk-campo { margin: 0; flex: 1 1 200px; }

/* A tabela dentro de um card não repete a moldura do card. */
.tdk-card .tdk-tabela-rola { border: 0; background: transparent; }
.tdk-card .tdk-tabela thead th { background: transparent; }

@media (max-width: 720px) {
  .tdk-conceder { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   11. PRIMEIRO ACESSO   (ticket 05d)
   ----------------------------------------------------------------------------
   Página inteira, sem sidebar: a pessoa ainda não começou, e um menu cheio de
   itens que ela não sabe o que são só distrairia do único passo que importa.
   ============================================================================ */

.tdk-pagina-acolhida {
  min-height: 100vh;
  background: var(--tdk-bg);
  color: var(--tdk-text);
  display: flex;
  flex-direction: column;
}

.tdk-acolhida-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdk-sp-4);
  padding: var(--tdk-sp-5) var(--tdk-sp-6);
  border-bottom: 1px solid var(--tdk-border);
}

.tdk-acolhida-logo { height: 26px; width: auto; }

.tdk-acolhida-caixa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tdk-sp-8) var(--tdk-sp-5);
}

.tdk-acolhida {
  width: 100%;
  max-width: 640px;
}

.tdk-acolhida-titulo {
  font-size: var(--tdk-fs-3xl);
  font-weight: var(--tdk-fw-bold);
  letter-spacing: -0.03em;
  margin: var(--tdk-sp-3) 0 var(--tdk-sp-4);
}

.tdk-acolhida-texto {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-md);
  line-height: 1.65;
  margin: 0 0 var(--tdk-sp-6);
  max-width: 58ch;
}

.tdk-acolhida-numeros {
  display: flex;
  gap: var(--tdk-sp-8);
  padding: var(--tdk-sp-5) 0;
  border-top: 1px solid var(--tdk-border);
  border-bottom: 1px solid var(--tdk-border);
  margin-bottom: var(--tdk-sp-6);
}

.tdk-acolhida-numero {
  margin: 0 0 2px;
  font-size: var(--tdk-fs-2xl);
  font-weight: var(--tdk-fw-bold);
  font-variant-numeric: tabular-nums;
}

.tdk-acolhida-acoes { margin: var(--tdk-sp-6) 0 var(--tdk-sp-3); }

.tdk-acolhida-nota {
  color: var(--tdk-text-3);
  font-size: var(--tdk-fs-sm);
  margin: 0;
}

/* Foto */

.tdk-perfil-foto {
  display: flex;
  gap: var(--tdk-sp-5);
  align-items: flex-start;
  padding: var(--tdk-sp-5);
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  margin-bottom: var(--tdk-sp-5);
}

.tdk-perfil-foto-acoes { flex: 1; min-width: 0; }
.tdk-perfil-foto-acoes .tdk-campo { margin-bottom: var(--tdk-sp-3); }

.tdk-usuario-avatar--foto {
  object-fit: cover;
  padding: 0;
  border: 1px solid var(--tdk-border-hi);
}

/* O seletor de arquivo do sistema não herda a paleta; sem isto sai um botão
   branco no meio do tema escuro. */
input[type="file"].tdk-campo-controle { padding: var(--tdk-sp-2); }

input[type="file"]::file-selector-button {
  font: inherit;
  margin-right: var(--tdk-sp-3);
  padding: var(--tdk-sp-1) var(--tdk-sp-3);
  border-radius: var(--tdk-radius-sm);
  border: 1px solid var(--tdk-border-hi);
  background: var(--tdk-surface-2);
  color: var(--tdk-text);
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover { border-color: var(--tdk-accent); }

@media (max-width: 620px) {
  .tdk-perfil-foto { flex-direction: column; align-items: center; text-align: center; }
  .tdk-acolhida-numeros { gap: var(--tdk-sp-5); }
}

/* ============================================================================
   12. NOTIFICAÇÕES   (ticket 06)
   ----------------------------------------------------------------------------
   Referência: design/mockups/27-notif-dropdown.png e 28-notif-page.png.
   O Alpine cuida só do abrir e fechar; conteúdo e contagem vêm do servidor.
   ============================================================================ */

.tdk-sino-caixa { position: relative; }

/* O contador não é um pontinho decorativo: mostra o número, porque "tem algo"
   e "tem sete coisas" pedem urgências diferentes. */
.tdk-sino-ponto {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-danger);
  color: #fff;
  font-family: var(--tdk-font-mono);
  font-size: 10px;
  font-weight: var(--tdk-fw-semi);
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--tdk-bg);
}

.tdk-sino-painel {
  position: absolute;
  top: calc(100% + var(--tdk-sp-2));
  right: 0;
  z-index: 40;
  width: min(380px, calc(100vw - var(--tdk-sp-6)));
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border-hi);
  border-radius: var(--tdk-radius);
  box-shadow: var(--tdk-shadow-lg);
  overflow: hidden;
}

.tdk-sino-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  border-bottom: 1px solid var(--tdk-border);
}

.tdk-sino-topo .tdk-rotulo { margin: 0; }

.tdk-sino-marcar {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-accent);
  cursor: pointer;
}

.tdk-sino-marcar:hover { text-decoration: underline; }

.tdk-sino-vazio {
  margin: 0;
  padding: var(--tdk-sp-6) var(--tdk-sp-4);
  color: var(--tdk-text-3);
  font-size: var(--tdk-fs-sm);
  text-align: center;
}

.tdk-sino-rodape {
  display: block;
  padding: var(--tdk-sp-3);
  text-align: center;
  font-size: var(--tdk-fs-sm);
  color: var(--tdk-text-2);
  border-top: 1px solid var(--tdk-border);
  text-decoration: none;
}

.tdk-sino-rodape:hover { color: var(--tdk-text); background: var(--tdk-surface-2); }

/* Um aviso, no dropdown e na página */

.tdk-aviso {
  display: flex;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--tdk-border);
  flex: 1;
  min-width: 0;
}

.tdk-aviso:last-child { border-bottom: 0; }
a.tdk-aviso:hover { background: var(--tdk-surface-2); }

.tdk-aviso-icone {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-surface-2);
  color: var(--tdk-text-2);
}

.tdk-aviso-corpo { min-width: 0; display: block; }

.tdk-aviso-titulo {
  display: block;
  font-size: var(--tdk-fs-sm);
  font-weight: var(--tdk-fw-semi);
  color: var(--tdk-text);
}

.tdk-aviso-texto {
  display: block;
  margin-top: 1px;
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-2);
}

.tdk-aviso-quando {
  display: block;
  margin-top: var(--tdk-sp-1);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-3);
}

/* Não lida: marca discreta à esquerda. Negrito no texto inteiro cansaria a
   leitura de uma lista longa. */
.tdk-aviso.is-nova,
.tdk-aviso-linha.is-nova { border-left: 2px solid var(--tdk-accent); }
.tdk-aviso.is-nova .tdk-aviso-icone { background: var(--tdk-accent-soft); color: var(--tdk-accent); }

/* Página cheia */

.tdk-avisos {
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  background: var(--tdk-surface);
  overflow: hidden;
}

.tdk-aviso-linha {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  padding-right: var(--tdk-sp-4);
  border-bottom: 1px solid var(--tdk-border);
}

.tdk-aviso-linha:last-child { border-bottom: 0; }
.tdk-aviso-linha .tdk-aviso { border-bottom: 0; }

@media (max-width: 620px) {
  .tdk-aviso-linha { flex-direction: column; align-items: stretch; padding: 0 0 var(--tdk-sp-3); }
  .tdk-aviso-linha form { padding: 0 var(--tdk-sp-4); }
}

/* ============================================================================
   13. CONTEÚDO: trilhas e cursos   (ticket 10)
   ============================================================================ */

/* Abas da lista de cursos. Duas, e a diferença entre elas é a razão de o curso
   existir: o que se edita e o que se reaproveita. */
.tdk-abas {
  display: flex;
  gap: var(--tdk-sp-1);
  margin-bottom: var(--tdk-sp-5);
  /* A linha de baixo é sombra interna, e não borda: com `overflow-x: auto` o eixo
     vertical também rola, e a aba com `margin-bottom: -1px` (o truque para o
     sublinhado cobrir a linha) passava 1px da caixa — e o navegador desenhava uma
     barrinha de rolagem vertical ao lado das abas. A sombra fica por baixo das
     abas, o sublinhado da ativa a cobre, e nada transborda. */
  box-shadow: inset 0 -1px 0 var(--tdk-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--tdk-border-hi) transparent;
}
/* No celular as abas rolam com o dedo, e a aba cortada na borda já diz que há
   mais. A barra de rolagem, ali, só cobria o sublinhado da aba ativa. Fica aqui,
   colada à regra de cima, e não no bloco do celular: lá, antes dela no arquivo,
   ela perdia na cascata. */
@media (max-width: 880px) {
  .tdk-abas { scrollbar-width: none; }
}

.tdk-aba {
  /* 12 + 18 + 12 + o sublinhado de 2 = 44px (era 44,98). */
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  font-size: var(--tdk-fs-sm);
  line-height: 18px;
  color: var(--tdk-text-3);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.tdk-aba:hover { color: var(--tdk-text-2); }

.tdk-aba.is-ativa {
  color: var(--tdk-text);
  border-bottom-color: var(--tdk-accent);
  font-weight: var(--tdk-fw-semi);
}

/* Campo de posição na sequência. Estreito de propósito: é um número de dois
   dígitos, e um campo largo sugeriria que se digita mais que isso. */
.tdk-ordem {
  width: 68px;
  text-align: center;
  font-family: var(--tdk-font-mono);
  padding-left: var(--tdk-sp-2);
  padding-right: var(--tdk-sp-2);
}

/* Vários formulários de uma linha, lado a lado. Cada botão é o seu próprio
   formulário porque formulário dentro de formulário é HTML inválido — e o de
   dentro é simplesmente ignorado pelo navegador. */
.tdk-acoes-linha {
  display: flex;
  gap: var(--tdk-sp-2);
  align-items: center;
  justify-content: flex-end;
}

.tdk-acoes-linha form { display: contents; }

@media (max-width: 720px) {
  .tdk-acoes-linha { flex-wrap: wrap; justify-content: flex-start; }
}

/* ============================================================================
   14. AULAS   (ticket 11)
   ============================================================================ */

.tdk-formato {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  font-size: var(--tdk-fs-sm);
  color: var(--tdk-text-2);
}

.tdk-formato + a { display: block; margin-top: 2px; }

/* ============================================================================
   15. CATÁLOGO E MINHAS TRILHAS   (ticket 12)
   ============================================================================ */

.tdk-cartao-topo {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--tdk-sp-3);
}

.tdk-cartao-texto {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
  line-height: 1.55;
  margin: var(--tdk-sp-2) 0 0;
}

.tdk-cartao-meta {
  margin: var(--tdk-sp-3) 0 0;
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-3);
}

/* A ação fica colada no rodapé do cartão, para os cartões de uma fileira
   terminarem alinhados mesmo com descrições de tamanhos diferentes. */
.tdk-cartao-acao {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  flex-wrap: wrap;
  margin-top: var(--tdk-sp-4);
  padding-top: var(--tdk-sp-4);
  border-top: 1px solid var(--tdk-border);
}

.tdk-grade .tdk-card {
  display: flex;
  flex-direction: column;
}

.tdk-grade .tdk-card .tdk-cartao-acao { margin-top: auto; }

/* ============================================================================
   16. APRENDER: player, leitor e progresso   (ticket 14)
   ============================================================================ */

.tdk-aula-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tdk-sp-4);
  margin-bottom: var(--tdk-sp-5);
  flex-wrap: wrap;
}

/* Player de vídeo */

.tdk-player {
  background: #000;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  overflow: hidden;
  margin-bottom: var(--tdk-sp-5);
}

.tdk-player:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: 2px; }

/* Proporção 16:9 sem depender de altura fixa: o iframe do YouTube preenche. */
.tdk-player-tela {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.tdk-player-tela > * ,
.tdk-player-tela iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tdk-player-controles {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  background: var(--tdk-bg-2);
  border-top: 1px solid var(--tdk-border);
  flex-wrap: wrap;
}

.tdk-player-barra { flex: 1 1 200px; min-width: 140px; }
.tdk-player-volume { flex: 0 0 90px; }

.tdk-player-barra,
.tdk-player-volume { accent-color: var(--tdk-accent); }

.tdk-player-tempo {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-2);
  min-width: 88px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tdk-player-sem-js {
  margin: 0;
  padding: var(--tdk-sp-4);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
  background: var(--tdk-bg-2);
}

/* Leitor de PDF: o do próprio navegador. */

.tdk-leitor {
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  overflow: hidden;
  background: var(--tdk-surface-2);
  margin-bottom: var(--tdk-sp-3);
}

.tdk-leitor iframe {
  display: block;
  width: 100%;
  /* A altura toda da área livre: o PDF rola dentro do leitor, e a página não. */
  height: var(--tdk-palco-altura, min(76vh, 900px));
  border: 0;
}

/* Conclusão e progresso */

.tdk-conclusao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tdk-sp-5);
  flex-wrap: wrap;
}

.tdk-conclusao > div:first-child { flex: 1 1 260px; min-width: 0; }

.tdk-conclusao-conta {
  margin: var(--tdk-sp-2) 0 var(--tdk-sp-3);
  font-size: var(--tdk-fs-md);
  font-weight: var(--tdk-fw-semi);
  font-variant-numeric: tabular-nums;
}

.tdk-conclusao-acao {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  flex-wrap: wrap;
}

/* Lista de aulas */

.tdk-lista-aulas { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.tdk-lista-aulas a {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-3);
  border-radius: var(--tdk-radius-sm);
  text-decoration: none;
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
}

.tdk-lista-aulas a:hover { background: var(--tdk-surface-2); color: var(--tdk-text); }

.tdk-lista-aulas-marca {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--tdk-border-hi);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
}

.tdk-lista-aulas li.is-feita .tdk-lista-aulas-marca {
  background: var(--tdk-success-soft);
  border-color: var(--tdk-success);
  color: var(--tdk-success);
}

.tdk-lista-aulas li.is-atual > a {
  background: var(--tdk-accent-soft);
  color: var(--tdk-text);
  font-weight: var(--tdk-fw-semi);
}

.tdk-lista-aulas li > a > span:nth-child(2) { flex: 1; min-width: 0; }

/* Aula fora da vez (09/10/2026): o mesmo desenho do link, apagado, com cadeado no
   lugar do número, e sem reagir ao mouse — não há para onde ir. */
.tdk-lista-aulas-item {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-3);
  color: var(--tdk-text-3);
  font-size: var(--tdk-fs-sm);
  cursor: not-allowed;
}
.tdk-lista-aulas li > .tdk-lista-aulas-item > span:nth-child(2) { flex: 1; min-width: 0; }
.tdk-lista-aulas li.is-travada .tdk-lista-aulas-marca { border-style: dashed; color: var(--tdk-text-3); }
.tdk-ordem-das-aulas { display: flex; align-items: center; gap: var(--tdk-sp-2); margin: 0 0 var(--tdk-sp-3); }

/* ── Capítulos na tela do curso (ticket 30) ──────────────────────────────────
   <details> nativo: abrir e fechar já é comportamento do HTML, e funciona com
   teclado e leitor de tela sem uma linha de JavaScript nossa. */

.tdk-capitulos {
  display: flex;
  flex-direction: column;
  /* O mesmo respiro de `.tdk-grade`: pilha de cartao e pilha de cartao. */
  gap: var(--tdk-sp-4);
}

.tdk-capitulo {
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  overflow: hidden;
}

.tdk-capitulo.is-atual { border-color: var(--tdk-accent); }
.tdk-capitulo.is-feito { opacity: 0.85; }

.tdk-capitulo-topo {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  /* 20px na horizontal: a mesma sangria de `.tdk-card`, para o titulo do capitulo
     comecar na coluna em que comeca o texto de qualquer outro cartao da pagina. */
  padding: var(--tdk-sp-4) var(--tdk-sp-5);
  cursor: pointer;
  list-style: none;
}

/* O triângulo padrão do <summary> some nos dois motores; a marca do capítulo
   já diz o estado, e a seta dupla brigava com ela. */
.tdk-capitulo-topo::-webkit-details-marker { display: none; }
.tdk-capitulo-topo::marker { content: ''; }

.tdk-capitulo-topo:hover { background: var(--tdk-surface-2); }
.tdk-capitulo-topo:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: -2px; }

.tdk-capitulo-marca {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--tdk-radius-sm);
  border: 1px solid var(--tdk-border-hi);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-2);
}

.tdk-capitulo.is-feito .tdk-capitulo-marca {
  background: var(--tdk-accent-soft);
  border-color: var(--tdk-accent);
  color: var(--tdk-accent);
}

.tdk-capitulo.is-atual .tdk-capitulo-marca {
  border-color: var(--tdk-accent);
  color: var(--tdk-accent);
}

.tdk-capitulo-texto { min-width: 0; }

.tdk-capitulo-nome {
  display: block;
  color: var(--tdk-text);
  font-size: var(--tdk-fs-base);
  line-height: 1.35;
}

.tdk-capitulo-texto .tdk-celula-sub { display: block; margin-top: 2px; }

/* 8px aqui + os 12px que cada linha ja tem = os mesmos 20px do cabecalho acima.
   Sem isso a aula ficava recuada em relacao ao nome do capitulo. */
.tdk-capitulo > .tdk-lista-aulas {
  padding: var(--tdk-sp-2) var(--tdk-sp-2) var(--tdk-sp-3);
  border-top: 1px solid var(--tdk-border);
}


@media (max-width: 620px) {
  .tdk-player-controles { gap: var(--tdk-sp-2); }
  .tdk-player-volume { flex: 0 0 60px; }
  .tdk-conclusao { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   17. ESCOLHA DE TRILHAS NO PRIMEIRO ACESSO   (ticket 12b)
   ============================================================================ */

/* Mais larga que as outras telas de acolhida: aqui há uma lista para ler, e 640px
   deixaria cada item quebrando em três linhas. */
.tdk-acolhida--larga { max-width: 760px; }

.tdk-acolhida--larga .tdk-caixas { margin-top: var(--tdk-sp-4); }

/* Trilha já atribuída vem travada. Continua legível: ela é informação, não um
   controle desabilitado por acidente. */
.tdk-caixa--bloco:has(input:disabled) {
  background: var(--tdk-surface-2);
  cursor: default;
}

.tdk-caixa--bloco:has(input:disabled) .tdk-caixa-titulo { color: var(--tdk-text-2); }

/* ============================================================================
   18. DECK HTML   (ticket 15)
   ============================================================================ */

/* Proporção 16:9, como o player de vídeo: a apresentação real é desenhada nessa
   proporção, e altura fixa cortaria slide em tela estreita. */
.tdk-deck {
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  overflow: hidden;
  background: #000;
  margin-bottom: var(--tdk-sp-3);
  aspect-ratio: 16 / 9;
}

.tdk-deck iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* O palco cabe na janela (ticket 40).

   16:9 na largura toda da coluna passava da dobra: com o rail recolhido a coluna
   ficou larga, e o palco de 1424x805 ia de 84 a 850px — o rodapé do próprio deck,
   com a régua de progresso, 45px abaixo do que se via sem rolar.

   A largura agora é limitada também pela ALTURA da janela, e o 16:9 continua
   mandando: numa janela larga e baixa o deck fica um pouco mais estreito, e inteiro.
   Os 88px são a barra de foco (44, desde 09/10/2026; eram 60), o respiro de cima
   (24) e um de baixo (20).

   Só acima de 620px: abaixo disso o deck tem altura própria, e o celular ganha
   layout seu no ticket 38. */
@media (min-width: 621px) {
  /* Desde 09/10/2026 o quadro ocupa TODA a área livre, e não mais um 16:9 dentro
     dela. O motor do deck já encaixa o slide de 1920x1080 no espaço que recebe — é
     o que ele faz na tela cheia — e preenche o resto com o fundo do próprio slide.
     O 16:9 aqui fora deixava faixa vazia dos lados e, no modo leitura (o painel de
     texto mora DENTRO do deck), espremia o slide com faixas em cima e embaixo.
     Pedido do usuário: o conteúdo cresce até encostar, sem corte e sem deformar. */
  .tdk-deck {
    aspect-ratio: auto;
    width: 100%;
    height: var(--tdk-palco-altura);
    margin-bottom: 0;
  }
}

@media (max-width: 620px) {
  /* Em tela estreita 16:9 fica baixo demais para ler slide. Altura mínima. */
  .tdk-deck { aspect-ratio: auto; height: 60vh; }
}

/* ============================================================================
   19. PROVA: BANCO DE QUESTÕES E IMPORTAÇÃO EM LOTE   (ticket 16)
   ============================================================================ */

/* Título de seção fora de card. Nasceu na conferência da importação, onde a
   prévia precisa de um cabeçalho que não seja o H1 da página. */
.tdk-secao-titulo {
  margin-top: var(--tdk-sp-8);
  font-size: var(--tdk-fs-xl);
}

/* Textarea herda o controle de campo e só acrescenta o que input não tem:
   altura própria e redimensionamento vertical. Horizontal fica travado — arrastar
   para os lados estoura o card e a página passa a rolar de lado. */
.tdk-area {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}

/* A caixa de colar é código, não prosa: fonte proporcional esconde alinhamento e
   engole o `*` no começo da linha, que é justamente a marca da alternativa certa. */
#campo-texto {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-sm);
  min-height: 340px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* Formulário e explicação lado a lado: o formato tem que estar visível ENQUANTO
   se cola, não numa aba de ajuda. Em tela estreita a explicação vai para baixo. */
.tdk-importar {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--tdk-sp-5);
  align-items: start;
}

@media (max-width: 1000px) {
  .tdk-importar { grid-template-columns: minmax(0, 1fr); }
}

.tdk-exemplo {
  margin: var(--tdk-sp-3) 0;
  padding: var(--tdk-sp-3);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-bg);
  color: var(--tdk-text-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  line-height: 1.7;
  /* Rola dentro de si. Sem isso, uma linha longa do exemplo empurraria a página
     inteira para o lado. */
  overflow-x: auto;
}

.tdk-exemplo code { font: inherit; }

/* ── Lista de questões (banco e prévia usam a mesma) ──────────────────────── */

.tdk-questoes {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-3);
  /* A margem de 1em que o navegador dá ao <ol> (14px) saía da grade de 4. */
  margin: 0;
  counter-reset: questao;
}

.tdk-questoes > li {
  padding: var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface-2);
}

/* Desativada continua legível: é informação, não controle desligado por acidente.
   Mesmo tratamento que a trilha travada da escolha de primeiro acesso. */
.tdk-questoes > li.is-inativa { opacity: 0.62; }

.tdk-questao-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--tdk-sp-4);
  flex-wrap: wrap;
}

.tdk-alternativas {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-1);
  margin-top: var(--tdk-sp-3);
}

.tdk-alternativas > li {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  padding: var(--tdk-sp-1) var(--tdk-sp-2);
  border-radius: var(--tdk-radius-sm);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
}

/* A correta em verde E com ícone. Só a cor deixaria a informação invisível para
   quem não distingue verde de cinza — e conferir a resposta certa é exatamente o
   que esta tela existe para fazer. */
.tdk-alternativas > li.is-correta {
  background: var(--tdk-success-soft);
  color: var(--tdk-ok);
  font-weight: var(--tdk-fw-semi);
}

/* ── Formulário de questão ───────────────────────────────────────────────── */

.tdk-escolhas {
  margin: var(--tdk-sp-4) 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-2);
}

.tdk-escolhas > legend { padding: 0; margin-bottom: var(--tdk-sp-2); }

.tdk-escolha,
.tdk-marca-correta,
.tdk-campo--marca label {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  cursor: pointer;
}

.tdk-campo--marca { margin-top: var(--tdk-sp-4); }

/* Alternativa: campo largo + rádio da correta na mesma linha. O rádio ao lado do
   texto é o que torna óbvio que ele marca AQUELA alternativa, e não a questão. */
.tdk-alternativa-linha {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
}

.tdk-alternativa-linha > .tdk-campo-controle { flex: 1 1 auto; min-width: 0; }

.tdk-marca-correta {
  flex: 0 0 auto;
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Marcada, o rótulo fica verde: dá para varrer a lista e ver qual é a certa sem
   procurar qual bolinha está preenchida. */
.tdk-marca-correta:has(input:checked) { color: var(--tdk-ok); }

@media (max-width: 620px) {
  .tdk-alternativa-linha { flex-wrap: wrap; }
  .tdk-alternativa-linha > .tdk-campo-controle { flex: 1 1 100%; }
}

/* ── Erros da importação, um por bloco ───────────────────────────────────── */

.tdk-erros-linha {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-2);
  margin-top: var(--tdk-sp-3);
}

.tdk-erros-linha > li {
  padding-left: var(--tdk-sp-3);
  border-left: 2px solid var(--tdk-warn);
  font-size: var(--tdk-fs-sm);
}

/* ============================================================================
   20. REALIZAR PROVA: QUESTÃO, REVISÃO E RESULTADO   (ticket 17)
   ============================================================================ */

.tdk-prova-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--tdk-sp-6);
  margin-bottom: var(--tdk-sp-5);
}

/* A barra ocupa a metade direita e não cresce além disso: uma barra da largura da
   tela vira decoração, e o número da questão já diz onde se está. */
.tdk-prova-topo > *:last-child { flex: 0 1 280px; }

@media (max-width: 700px) {
  .tdk-prova-topo { flex-direction: column; align-items: stretch; }
  .tdk-prova-topo > *:last-child { flex: 1 1 auto; }
}

/* O enunciado é o texto mais importante da tela. Maior que o corpo, e com medida
   limitada: linha de 120 caracteres faz o olho perder o começo da próxima. */
.tdk-prova-enunciado {
  max-width: 62ch;
  margin-bottom: var(--tdk-sp-5);
  font-size: var(--tdk-fs-md);
  line-height: 1.6;
}

.tdk-escolhas--prova { gap: var(--tdk-sp-3); }

/* Alternativa como cartão clicável inteiro: alvo de 44px, que é o mínimo para o
   dedo. Só a bolinha do rádio como alvo é uma prova impossível de fazer no
   celular. */
.tdk-escolha--cartao {
  padding: var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface-2);
  min-height: 44px;
  transition: border-color var(--tdk-trans), background var(--tdk-trans);
}

.tdk-escolha--cartao:hover { background: var(--tdk-surface-3); }

/* Marcada, a borda inteira acusa. Só a bolinha preenchida é fácil de não ver numa
   lista de cinco, e reler as cinco para achar a própria resposta é atrito puro. */
.tdk-escolha--cartao:has(input:checked) {
  border-color: var(--tdk-accent);
  background: var(--tdk-surface-3);
}

.tdk-prova-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-sp-3);
  margin: var(--tdk-sp-5) 0;
}

/* ── Mapa de questões ────────────────────────────────────────────────────── */

.tdk-prova-mapa {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-sp-2);
}

.tdk-prova-passo {
  width: 40px;
  height: 40px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-surface-2);
  color: var(--tdk-text-2);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--tdk-trans), color var(--tdk-trans);
}

.tdk-prova-passo:hover { border-color: var(--tdk-accent); color: var(--tdk-text); }

/* Respondida em verde, atual com a borda de destaque. As duas marcas coexistem:
   a questão atual pode estar respondida. */
.tdk-prova-passo.is-feita { border-color: var(--tdk-ok); color: var(--tdk-ok); }

.tdk-prova-passo.is-atual {
  border-color: var(--tdk-accent);
  background: var(--tdk-accent);
  color: var(--tdk-bg);
  font-weight: var(--tdk-fw-semi);
}

/* ── Revisão ─────────────────────────────────────────────────────────────── */

.tdk-revisao {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-2);
}

.tdk-revisao > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tdk-sp-4);
  padding: var(--tdk-sp-3);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-sm);
}

/* Em branco é o que a tela existe para mostrar. Borda de atenção à esquerda, que
   se enxerga varrendo a lista sem ler. */
.tdk-revisao > li.is-branco {
  border-left: 3px solid var(--tdk-warn);
  background: var(--tdk-warn-soft);
}

@media (max-width: 620px) {
  .tdk-revisao > li { flex-direction: column; align-items: stretch; }
}

/* ── Resultado ───────────────────────────────────────────────────────────── */

.tdk-resultado {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-6);
  flex-wrap: wrap;
}

.tdk-resultado-nota {
  display: flex;
  flex-direction: column;
  padding: var(--tdk-sp-4) var(--tdk-sp-6);
  border-radius: var(--tdk-radius-lg);
  border: 1px solid var(--tdk-border);
}

.tdk-resultado-nota.is-aprovado { border-color: var(--tdk-ok); background: var(--tdk-success-soft); }
.tdk-resultado-nota.is-reprovado { border-color: var(--tdk-danger); background: var(--tdk-danger-soft); }

.tdk-resultado-numero {
  font-size: var(--tdk-fs-3xl);
  font-weight: var(--tdk-fw-semi);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.tdk-resultado-nota.is-aprovado .tdk-resultado-numero { color: var(--tdk-ok); }
.tdk-resultado-nota.is-reprovado .tdk-resultado-numero { color: var(--tdk-danger); }

.tdk-resultado-conta {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
}

/* ── Lista de regras da tela de começar ──────────────────────────────────── */

.tdk-lista-regras {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-3);
}

.tdk-lista-regras > li {
  padding-left: var(--tdk-sp-4);
  border-left: 2px solid var(--tdk-border);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
  line-height: 1.6;
}

/* ============================================================================
   21. CERTIFICADO E CONFERÊNCIA PÚBLICA   (ticket 19)
   ============================================================================ */

/* Código de verificação em mono e espaçado: ele vai ser DITADO por telefone e
   digitado a partir de papel. Fonte proporcional junta os caracteres e confunde. */
/* A URL de conferencia, em linha propria. Ela vive dentro de uma frase antes, e o
   endereco longo (54 caracteres em producao) quebrava no meio do texto e dominava o
   cartao. Separada, ela e um endereco -- que e o que ela e. */
.tdk-link-conferencia {
  display: block;
  margin-top: var(--tdk-sp-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  /* Endereco nao tem espaco onde quebrar: sem isto ele estoura a largura do cartao. */
  word-break: break-all;
}

.tdk-codigo-certificado {
  margin: var(--tdk-sp-3) 0 var(--tdk-sp-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-md);
  letter-spacing: 0.12em;
  color: var(--tdk-accent);
}

/* ── Página pública ──────────────────────────────────────────────────────── */

/* Layout próprio, sem shell: quem abre esta página não tem conta. Sidebar, sino e
   menu do usuário não existem aqui. */
.tdk-publico {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tdk-bg);
  color: var(--tdk-text);
}

.tdk-publico-topo {
  display: flex;
  align-items: baseline;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-5) var(--tdk-sp-6);
  border-bottom: 1px solid var(--tdk-border);
}

/* O logotipo em vetor, altura fixa. Largura automatica: a proporcao do arquivo e
   ~2,96:1, e travar as duas o deformaria. */
.tdk-publico-logo {
  height: 26px;
  width: auto;
  display: block;
}

/* Continua definido: e a reserva se algum dia o logotipo voltar a ser texto. */
.tdk-publico-marca {
  font-weight: var(--tdk-fw-semi);
  letter-spacing: 0.18em;
  color: var(--tdk-accent);
}

.tdk-publico-sub { color: var(--tdk-text-2); font-size: var(--tdk-fs-sm); }

.tdk-publico-corpo {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  /* `flex-start`, e nao o `stretch` padrao. Sem isto o cartao vira item de flex
     esticado ate o rodape: o conteudo terminava a 60% da altura e o resto era uma
     caixa vazia. So aparece na tela -- o HTML esta certo, e o teste passa. */
  align-items: flex-start;
  padding: var(--tdk-sp-10) var(--tdk-sp-5);
}

.tdk-publico-rodape {
  padding: var(--tdk-sp-5) var(--tdk-sp-6);
  border-top: 1px solid var(--tdk-border);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-xs);
  text-align: center;
}

.tdk-conferencia {
  width: 100%;
  max-width: 560px;
  padding: var(--tdk-sp-8);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-lg);
  background: var(--tdk-surface);
  text-align: center;
}

/* Selo verde com ícone, não só cor: "autêntico" é a informação mais importante da
   página, e quem não distingue verde de cinza precisa vê-la também. */
.tdk-conferencia-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-success-soft);
  color: var(--tdk-ok);
}

.tdk-conferencia-veredito {
  margin-top: var(--tdk-sp-4);
  font-size: var(--tdk-fs-xl);
  font-weight: var(--tdk-fw-semi);
  color: var(--tdk-ok);
}

/* Definição em duas colunas, com rótulo pequeno acima do valor em telas estreitas.
   <dl> e não tabela: são pares rótulo/valor, e é o que o leitor de tela anuncia
   como tal. */
.tdk-conferencia-dados {
  margin: var(--tdk-sp-6) 0 0;
  text-align: left;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--tdk-sp-2) var(--tdk-sp-5);
}

.tdk-conferencia-dados dt {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: var(--tdk-sp-1);
}

.tdk-conferencia-dados dd { margin: 0; }

@media (max-width: 520px) {
  .tdk-conferencia { padding: var(--tdk-sp-5); }
  .tdk-conferencia-dados { grid-template-columns: minmax(0, 1fr); gap: var(--tdk-sp-1); }
  .tdk-conferencia-dados dd { margin-bottom: var(--tdk-sp-3); }
}

.tdk-conferencia-nota {
  margin-top: var(--tdk-sp-5);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
  text-align: left;
}

/* ============================================================================
   22. RELATÓRIOS DA DIRETORIA   (ticket 20)
   ============================================================================ */

/* Cartões de número que se acomodam sozinhos: são 4 no resumo geral e 5 no recorte
   por trilha, e `auto-fit` evita duas regras de grade para a mesma tela. */
.tdk-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--tdk-sp-4);
  margin-bottom: var(--tdk-sp-5);
}

.tdk-numero {
  margin-top: var(--tdk-sp-2);
  font-size: var(--tdk-fs-3xl);
  font-weight: var(--tdk-fw-semi);
  line-height: 1.1;
  /* Números alinhados na coluna: sem isto, 4 e 11 dançam de largura e a leitura em
     sequência fica torta. */
  font-variant-numeric: tabular-nums;
}

.tdk-numero.is-ok { color: var(--tdk-ok); }

/* Zero não é problema, e não pode ficar laranja: alerta que aparece com valor zero
   ensina a ignorar alerta. O `is-atencao` só entra quando há alguém parado. */
.tdk-numero.is-atencao { color: var(--tdk-warn); }

/* Linha de quem está parado: barra à esquerda, não fundo inteiro. O fundo colorido
   numa tabela de gente lê como acusação; a barra lê como "olhe aqui". */
.tdk-tabela tr.is-parado > *:first-child {
  box-shadow: inset 3px 0 0 var(--tdk-warn);
}

.tdk-tabela tr.is-parado { background: var(--tdk-warn-soft); }

/* ============================================================================
   23. TELA INICIAL DO ALUNO   (ticket 21)
   ============================================================================ */

.tdk-saudacao { margin-bottom: var(--tdk-sp-6); }

.tdk-saudacao-data {
  color: var(--tdk-text-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  letter-spacing: 0.12em;
}

/* O nome em destaque e a frase de contexto em tom secundário, na MESMA linha —
   é o desenho do mockup, e funciona porque as duas partes se leem numa respirada.
   `max-width` em ch: linha de 140 caracteres faz o olho perder o começo da
   próxima. */
.tdk-saudacao-titulo {
  margin-top: var(--tdk-sp-2);
  max-width: 46ch;
  font-size: var(--tdk-fs-2xl);
  line-height: 1.25;
}

.tdk-saudacao-titulo > span { color: var(--tdk-text-2); }
.tdk-saudacao-titulo strong { color: var(--tdk-text); font-weight: var(--tdk-fw-semi); }

/* ── Primeira linha ──────────────────────────────────────────────────────── */

/* O cartão de retomar é o dobro dos outros: é a única ação que a maioria vai
   tomar nesta tela, e dividir o espaço em três iguais a esconderia. */
.tdk-painel-topo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tdk-sp-4);
  margin-bottom: var(--tdk-sp-8);
  align-items: start;
}

@media (max-width: 1100px) {
  .tdk-painel-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tdk-painel-topo > .tdk-retomar { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .tdk-painel-topo { grid-template-columns: minmax(0, 1fr); }
}

.tdk-retomar {
  /* Leve destaque de fundo, não borda de cor: borda colorida aqui competiria com
     a barra de setor das trilhas logo abaixo, e as duas perderiam o sentido. */
  background: linear-gradient(135deg, var(--tdk-surface) 0%, var(--tdk-surface-2) 100%);
}

.tdk-retomar-titulo {
  margin-top: var(--tdk-sp-3);
  font-size: var(--tdk-fs-lg);
  line-height: 1.3;
}

.tdk-retomar-meta {
  margin-top: var(--tdk-sp-2);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
}

/* O denominador em tom apagado: "8/13" tem que ler como oito de treze, e não
   como um número de quatro dígitos. */
.tdk-numero-de {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-lg);
  font-weight: 400;
}

/* ── Corpo em duas colunas ──────────────────────────────────────────────── */

.tdk-painel-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--tdk-sp-6);
  align-items: start;
}

@media (max-width: 1100px) {
  .tdk-painel-corpo { grid-template-columns: minmax(0, 1fr); }
}

.tdk-painel-lado {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-4);
}

/* Cabeçalho de seção com link à direita, como no mockup. */
.tdk-secao-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--tdk-sp-4);
  margin: var(--tdk-sp-6) 0 var(--tdk-sp-3);
}

.tdk-secao-linha:first-child { margin-top: 0; }
.tdk-secao-linha h2 { font-size: var(--tdk-fs-md); }
.tdk-secao-linha a { font-size: var(--tdk-fs-sm); }

/* ── Linhas de trilha em andamento ──────────────────────────────────────── */

.tdk-trilhas-andamento {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-3);
}

/* A linha inteira é o link — alvo grande, e nada de "clique aqui" escondido no
   título. */
.tdk-trilha-linha {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-4);
  padding: var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface);
  color: inherit;
  transition: border-color var(--tdk-trans), background var(--tdk-trans);
}

.tdk-trilha-linha:hover {
  border-color: var(--tdk-accent);
  background: var(--tdk-surface-2);
  color: inherit;
}

/* A cor do setor como barra vertical: identifica de onde a trilha vem sem gastar
   uma linha de texto, e é a mesma cor do chip usado nas outras telas. */
.tdk-trilha-barra-cor {
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  min-height: 44px;
  border-radius: var(--tdk-radius-pill);
  background: var(--cor, var(--tdk-accent));
}

.tdk-trilha-linha-corpo { flex: 1 1 auto; min-width: 0; }

.tdk-trilha-linha-topo {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  margin-bottom: var(--tdk-sp-1);
}

.tdk-trilha-linha-corpo .tdk-progresso { margin-top: var(--tdk-sp-2); }

.tdk-trilha-linha-conta {
  flex: 0 0 auto;
  font-size: var(--tdk-fs-xl);
  font-weight: var(--tdk-fw-semi);
  font-variant-numeric: tabular-nums;
}

.tdk-trilha-linha-conta > span {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
  font-weight: 400;
}

/* A unidade embaixo do número (ticket 55): cursos, ou módulos na trilha de um curso
   só; e "falta a prova", em âmbar, quando as unidades acabaram e a prova não. */
.tdk-trilha-linha-conta { text-align: right; line-height: 1.1; }
.tdk-trilha-linha-unidade {
  display: block;
  margin-top: var(--tdk-sp-1);
  color: var(--tdk-text-3);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  font-weight: 400;
}
.tdk-trilha-linha-conta.is-prova .tdk-trilha-linha-unidade { color: var(--tdk-warn); }

@media (max-width: 620px) {
  .tdk-trilha-linha { flex-wrap: wrap; }
  .tdk-trilha-linha-conta { font-size: var(--tdk-fs-lg); }
}

/* ── Pendências e listas do lado direito ────────────────────────────────── */

.tdk-pendencias {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-1);
}

.tdk-pendencias > li > a {
  display: flex;
  align-items: flex-start;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-3);
  border-radius: var(--tdk-radius-sm);
  color: inherit;
  transition: background var(--tdk-trans);
}

.tdk-pendencias > li > a:hover { background: var(--tdk-surface-2); color: inherit; }

.tdk-pendencias strong { display: block; font-weight: var(--tdk-fw-semi); }
.tdk-pendencias .tdk-celula-sub { display: block; margin-top: 2px; }

.tdk-pendencia-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-surface-2);
  color: var(--tdk-text-2);
}

/* Urgente em laranja, com o ícone acompanhando — cor sozinha não serve para quem
   não a distingue, e "falta a prova" é o item que trava a trilha inteira. */
.tdk-pendencias > li.is-urgente .tdk-pendencia-marca {
  background: var(--tdk-warn-soft);
  color: var(--tdk-warn);
}

.tdk-gestor {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
}

/* O marcador de deploy: presente para conferir o que está no ar, discreto para não
   competir com o conteúdo. */
.tdk-marcador-deploy {
  margin-top: var(--tdk-sp-10);
  color: var(--tdk-text-3);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  opacity: 0.55;
}

/* ============================================================================
   24. PERFIL DA PRÓPRIA PESSOA   (ticket 22)
   ============================================================================ */

.tdk-perfil-foto {
  display: flex;
  align-items: flex-start;
  gap: var(--tdk-sp-6);
}

.tdk-perfil-foto-acoes { flex: 1 1 auto; min-width: 0; }

/* O avatar grande não encolhe: 88px é o tamanho em que se enxerga se a foto ficou
   torta, que é a razão de a pessoa estar nesta tela. */
.tdk-perfil-foto > .tdk-usuario-avatar {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  font-size: var(--tdk-fs-xl);
}

@media (max-width: 620px) {
  .tdk-perfil-foto { flex-direction: column; align-items: center; }
  .tdk-perfil-foto-acoes { width: 100%; }
}

/* ── Cadastro em leitura ─────────────────────────────────────────────────── */

/* <dl> e não tabela: são pares rótulo/valor, e é o que o leitor de tela anuncia
   como tal. Mesma escolha da conferência pública de certificado. */
.tdk-cadastro {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--tdk-sp-3) var(--tdk-sp-6);
}

.tdk-cadastro dt {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: var(--tdk-sp-1);
}

.tdk-cadastro dd { margin: 0; }
.tdk-cadastro dd .tdk-celula-sub { display: block; }

/* O usuário em mono: ele é identificador, é ditado por telefone quando alguém
   perde a senha, e fonte proporcional junta os caracteres. */
.tdk-cadastro-mono {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-sm);
}

@media (max-width: 560px) {
  .tdk-cadastro { grid-template-columns: minmax(0, 1fr); gap: var(--tdk-sp-1); }
  .tdk-cadastro dd { margin-bottom: var(--tdk-sp-3); }
}

/* ============================================================================
   25. CERTIFICADOS: HEROI, MINIATURA E GRADE   (ticket 19b — conforme 10-certificados)
   ============================================================================ */

/* ── A miniatura do certificado ──────────────────────────────────────────── */

/* Um desenho em CSS com os mesmos dados do PDF, e nao o PDF embutido: gerar o
   documento inteiro para mostrar um retangulo de 300px seria caro, e o leitor do
   navegador poria barra de ferramentas e fundo cinza no meio da pagina.

   Proporcao de folha A4 em paisagem (1,414:1), a mesma do documento -- e o que faz a
   miniatura ser reconhecivel como aquele papel. */
.tdk-mini-cert {
  aspect-ratio: 1.414 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--tdk-sp-5);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  /* Leve degrade, como no mockup: separa o "papel" do cartao que o contem sem
     precisar de sombra. */
  background: linear-gradient(150deg, var(--tdk-surface-2) 0%, var(--tdk-surface) 60%);
  overflow: hidden;
}

.tdk-mini-cert-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--tdk-sp-4);
}

.tdk-mini-cert-logo { height: 18px; width: auto; opacity: 0.9; }

.tdk-mini-cert-id {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--tdk-text-3);
  font-family: var(--tdk-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tdk-mini-cert-corpo { text-align: center; }

.tdk-mini-cert-frase {
  color: var(--tdk-accent);
  font-family: var(--tdk-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tdk-mini-cert-nome {
  margin: var(--tdk-sp-2) 0;
  font-size: var(--tdk-fs-xl);
  font-weight: var(--tdk-fw-semi);
  line-height: 1.2;
}

.tdk-mini-cert-trilha {
  margin-top: var(--tdk-sp-1);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-md);
}

.tdk-mini-cert-rodape {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--tdk-sp-4);
  color: var(--tdk-text-3);
  font-family: var(--tdk-font-mono);
  font-size: 9px;
  line-height: 1.5;
}

/* A linha da assinatura: um traco acima do nome, como no documento. */
.tdk-mini-cert-assina {
  padding-top: var(--tdk-sp-2);
  border-top: 1px solid var(--tdk-border);
  min-width: 120px;
}

.tdk-mini-cert-verificar { text-align: right; }

/* ── Versao compacta, dos cartoes secundarios ────────────────────────────── */

.tdk-mini-cert.is-compacta {
  padding: var(--tdk-sp-4);
  margin-bottom: var(--tdk-sp-4);
}

.tdk-mini-cert.is-compacta .tdk-mini-cert-nome {
  font-size: var(--tdk-fs-md);
  margin: 0;
}

.tdk-mini-cert.is-compacta .tdk-mini-cert-logo { height: 13px; }
.tdk-mini-cert.is-compacta .tdk-mini-cert-numero { letter-spacing: 0.06em; }

/* ── O heroi ─────────────────────────────────────────────────────────────── */

/* Miniatura a esquerda, acoes a direita -- o desenho do mockup. A miniatura leva a
   maior parte porque e ela que a pessoa veio ver. */
.tdk-cert-destaque {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--tdk-sp-8);
  align-items: center;
  margin-bottom: var(--tdk-sp-10);
  padding: var(--tdk-sp-6);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-lg);
  background: var(--tdk-surface);
}

@media (max-width: 1000px) {
  .tdk-cert-destaque { grid-template-columns: minmax(0, 1fr); gap: var(--tdk-sp-6); }
}

.tdk-cert-destaque-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tdk-sp-3);
}

.tdk-cert-destaque-titulo {
  font-size: var(--tdk-fs-xl);
  line-height: 1.25;
}

.tdk-cert-destaque-texto {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
  line-height: 1.6;
}

.tdk-cert-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-sp-2);
  margin-top: var(--tdk-sp-1);
}

/* Retorno do "copiar": o botao diz que copiou, em verde, e volta sozinho. Sem isso a
   pessoa clica, nada muda, e ela clica de novo. */
.tdk-btn.is-copiado { color: var(--tdk-ok); border-color: var(--tdk-ok); }

/* ── A caixa do codigo ───────────────────────────────────────────────────── */

.tdk-cert-codigo {
  width: 100%;
  margin-top: var(--tdk-sp-3);
  padding: var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-bg);
}

.tdk-cert-codigo-rotulo {
  display: block;
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tdk-cert-codigo .tdk-codigo-certificado { margin: var(--tdk-sp-2) 0 0; }

/* ── A grade dos outros ──────────────────────────────────────────────────── */

.tdk-cert-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--tdk-sp-4);
}

.tdk-cert-setor {
  color: var(--tdk-accent);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tdk-cert-rodape {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--tdk-sp-3);
  margin-top: var(--tdk-sp-3);
}

/* O aproveitamento em verde, como no mockup. Nunca em vermelho: quem chegou ao
   certificado passou, e pintar de vermelho um 71% aprovado seria repreender alguem
   pelo proprio diploma. */
.tdk-cert-nota {
  color: var(--tdk-ok);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-sm);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   26. TELA DE FOCO: AULA E PROVA   (ticket 23 — 05-player-aula e 06-avaliacao)
   ============================================================================ */

/* Sem shell: nada de grade de sidebar aqui. O corpo é a página inteira. */
.tdk-foco {
  margin: 0;
  min-height: 100vh;
  background: var(--tdk-bg);
  color: var(--tdk-text);
}

/* A barra fica GRUDADA no topo. Numa aula longa, rolar até o fim da lista não pode
   fazer a saída desaparecer — e numa prova, a contagem de perguntas tem que estar
   sempre visível. */
.tdk-foco-barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdk-sp-4);
  /* 44px, e não os 60 de antes: o usuário achou que a barra tomava tela demais, e
     numa aula cada pixel de altura é do palco. Os controles descem para 30px. */
  min-height: 44px;
  padding: var(--tdk-sp-1) var(--tdk-sp-5);
  border-bottom: 1px solid var(--tdk-border);
  background: var(--tdk-surface);
}
.tdk-foco-barra .tdk-btn {
  min-height: 32px;
  padding-block: 0;
  font-size: 12.5px;
}

.tdk-foco-barra-esquerda,
.tdk-foco-barra-direita {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  min-width: 0;
}

/* A volta é o que substitui a sidebar. Por isso não é um link discreto: tem área de
   clique de botão e contraste de texto normal. */
.tdk-foco-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  padding: var(--tdk-sp-1) var(--tdk-sp-3);
  margin-left: calc(var(--tdk-sp-3) * -1);
  border-radius: var(--tdk-radius-sm);
  color: var(--tdk-text);
  font-size: 13px;
  white-space: nowrap;
  transition: background var(--tdk-trans);
}

.tdk-foco-voltar:hover { background: var(--tdk-surface-2); color: var(--tdk-text); }

.tdk-foco-divisor { color: var(--tdk-border); }

/* O contexto trunca em vez de quebrar a barra em duas linhas: nome de trilha longo não
   pode empurrar as ações para fora da tela. */
.tdk-foco-contexto {
  color: var(--tdk-text-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tdk-foco-contagem {
  color: var(--tdk-text-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-sm);
  white-space: nowrap;
}

/* ── O cronometro da prova (ticket 34) ───────────────────────────────────────
   Mono e tabular: com fonte proporcional os digitos mudam de largura e o relogio
   treme a cada segundo, o que chama atencao exatamente de quem precisa se
   concentrar. O ultimo minuto muda de cor -- e de COR so, sem piscar: alerta que
   pisca numa prova e' crueldade com quem esta contando os segundos. */
.tdk-cronometro {
  display: inline-flex;
  align-items: baseline;
  gap: var(--tdk-sp-2);
  padding: var(--tdk-sp-2) var(--tdk-sp-3);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-surface);
}

.tdk-cronometro-rotulo {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tdk-text-3);
}

.tdk-cronometro-valor {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-md);
  font-variant-numeric: tabular-nums;
  color: var(--tdk-text);
}

.tdk-cronometro.is-acabando { border-color: var(--tdk-danger); background: var(--tdk-danger-soft); }
.tdk-cronometro.is-acabando .tdk-cronometro-valor,
.tdk-cronometro.is-acabando .tdk-cronometro-rotulo { color: var(--tdk-danger); }

.tdk-cronometro-sem-js {
  margin: var(--tdk-sp-2) 0 0;
  font-size: var(--tdk-fs-sm);
  color: var(--tdk-text-2);
}

.tdk-foco-contagem strong { color: var(--tdk-text); }

/* == O vigia da prova (ticket 35) ==========================================
   O painel COBRE a prova, e por isso o fundo e' opaco -- nao um veu com
   transparencia. Veu translucido deixa o enunciado legivel por tras, e quem
   saiu da janela poderia ler a pergunta de canto de olho na outra tela.

   `position: fixed` com `inset: 0` para cobrir tambem a barra de foco: o
   cronometro fica atras, e ver o relogio correndo enquanto se esta fora e'
   exatamente o que NAO precisa estar disponivel de fora da prova.

   z-index alto e' de proposito -- este painel nao perde para nada. */
.tdk-vigia {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tdk-sp-6);
  background: var(--tdk-bg);
}

/* `hidden` em elemento com `display: flex` nao esconde nada: a regra de
   display vence o atributo. Sem esta linha o painel apareceria desde o
   carregamento, cobrindo a prova de quem nunca saiu dela. */
.tdk-vigia[hidden] { display: none; }

.tdk-vigia-caixa {
  max-width: 480px;
  padding: var(--tdk-sp-8);
  border: 1px solid var(--tdk-danger);
  border-radius: var(--tdk-radius-lg);
  background: var(--tdk-surface);
  box-shadow: var(--tdk-shadow-lg);
  text-align: center;
}

.tdk-vigia-titulo {
  margin: 0 0 var(--tdk-sp-3);
  font-size: var(--tdk-fs-lg);
  color: var(--tdk-danger);
}

.tdk-vigia-texto {
  margin: 0 0 var(--tdk-sp-3);
  color: var(--tdk-text-2);
  line-height: 1.6;
}

.tdk-vigia-texto strong { color: var(--tdk-text); }

/* Mono e' o mesmo tratamento do cronometro: os dois sao contagens, e ler as
   duas com a mesma fonte diz sozinho que sao da mesma familia de fato. */
.tdk-vigia-conta {
  margin: 0 0 var(--tdk-sp-6);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-sm);
  color: var(--tdk-danger);
}

/* A recusa da tela cheia, na tela de comecar. Nao e' um alerta discreto: sem
   tela cheia a prova nao comeca, entao a pessoa precisa ler isto antes de
   clicar de novo no mesmo botao esperando outro resultado. */
.tdk-vigia-recusa {
  margin: 0 0 var(--tdk-sp-4);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  border: 1px solid var(--tdk-danger);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-danger-soft);
  color: var(--tdk-danger);
  font-size: var(--tdk-fs-sm);
}

.tdk-vigia-recusa[hidden] { display: none; }

/* A ajuda de uma caixa de marcar nao mora na grade de campos, entao ela se
   estica pelo cartao inteiro: medidos 1167px contra 280px de todas as outras
   ajudas do mesmo formulario. Duas linhas dessa largura ninguem le -- o olho
   perde a volta. 560px e' a mesma medida confortavel das demais, com folga. */
.tdk-campo--marca .tdk-campo-ajuda { max-width: 560px; }

.tdk-foco-aviso { padding: var(--tdk-sp-4) var(--tdk-sp-6) 0; }
.tdk-foco-corpo { padding: var(--tdk-sp-6); }

/* A altura do palco: a janela menos a barra (medida pelo aula-foco.js, porque ela
   quebra em duas linhas em tela média) e um respiro curto em cima e embaixo. */
:root { --tdk-palco-respiro: 10px; }
.tdk-aula-foco { --tdk-palco-altura: calc(100dvh - var(--tdk-barra-h, 44px) - 2 * var(--tdk-palco-respiro)); }
@media (min-width: 621px) {
  /* O mesmo respiro em cima e embaixo que a conta do palco reserva: com 24px embaixo
     a página rolava 14px à toa. */
  .tdk-foco-corpo:has(.tdk-aula-foco) { padding: var(--tdk-palco-respiro) var(--tdk-sp-4); }
}

@media (max-width: 620px) {
  .tdk-foco-barra { padding: var(--tdk-sp-3) var(--tdk-sp-4); }
  .tdk-foco-contexto,
  .tdk-foco-divisor { display: none; }
  .tdk-foco-corpo { padding: var(--tdk-sp-4); }
}

/* A barra quebra linha antes de empurrar a página (ticket 36).

   Medido a 375px com os controles novos: o lado direito pedia 578px de linha, a
   barra não quebrava, e a PÁGINA INTEIRA passava a rolar de lado — o conteúdo da
   aula junto. Quebrar a linha custa altura só quando falta largura. */
.tdk-foco-barra { flex-wrap: wrap; }
.tdk-foco-barra-direita { flex-wrap: wrap; justify-content: flex-end; }

/* Em tela estreita os controles ficam só no ícone. O nome não se perde: vai no
   `aria-label`, que é o que o leitor de tela anuncia. */
@media (max-width: 760px) {
  .tdk-foco-rotulo { display: none; }
}

/* ── A aula: conteúdo + rail ─────────────────────────────────────────────── */

.tdk-aula-foco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--tdk-sp-6);
  align-items: start;
  /* Sem largura máxima (eram 1.600px): num monitor largo ela deixava faixa vazia dos
     dois lados de um palco que ainda podia crescer. */
  margin: 0 auto;
}

/* O rail vai para baixo antes de ficar estreito demais para ler título de aula. */
@media (max-width: 1100px) {
  .tdk-aula-foco { grid-template-columns: minmax(0, 1fr); }
}

/* ── Recolher o rail, e a tela cheia do palco (ticket 36) ─────────────────────

   O rail de 340px ajuda a saber ONDE SE ESTÁ e atrapalha a VER. Numa janela de
   1440 ele deixa 1028px para o palco; recolhido, deixa 1392. Para a apresentação
   isso é a diferença entre 53% e 72% da escala para que ela foi desenhada — o
   motor do deck escala por `min(100vh/1080, 100vw/1920)`, então largura perdida
   é texto menor, não corte.

   Recolhido é o PADRÃO desta tela, e a escolha de quem olha fica no navegador
   dela: quem recolheu uma vez não quer recolher a cada aula.

   Nada aqui anima. Alternar `grid-template-columns` engasga, e meio quadro de
   salto num painel que a pessoa acabou de pedir não melhora coisa nenhuma.
   ────────────────────────────────────────────────────────────────────────── */

/* Sem JavaScript, os dois controles não fazem nada — então não existem. É a
   mesma regra dos controles do player, que nascem escondidos e só aparecem
   quando há quem os atenda. */
.tdk-foco-controle,
.tdk-foco-acao { display: none; }

html.tdk-js .tdk-foco-controle { display: inline-flex; }

/* A ação compacta entra em cena só quando o rail sai. As duas visíveis ao mesmo
   tempo seriam dois "Concluir" na mesma tela, e a pessoa escolhendo entre iguais. */
html.tdk-js.tdk-rail-recolhido .tdk-foco-acao {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
}

html.tdk-rail-recolhido .tdk-aula-foco { grid-template-columns: minmax(0, 1fr); }
html.tdk-rail-recolhido .tdk-aula-rail { display: none; }

/* O palco na tela inteira. O `aspect-ratio` é o que dá forma ao deck DENTRO da
   página; na tela cheia ele sobraria faixa preta em monitor que não seja 16:9. */
/* A tela cheia do vídeo é a caixa inteira, vídeo e controles (ticket 38). O vídeo
   continua 16:9 exato — o maior que cabe acima da faixa de controles —, no meio. */
.tdk-player:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #000;
}
.tdk-player:fullscreen .tdk-player-tela,
.tdk-player:fullscreen .tdk-player-controles { width: min(100vw, calc((100vh - 56px) * 16 / 9)); }

.tdk-deck:fullscreen,
.tdk-leitor:fullscreen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* Abaixo de 1100px o rail JÁ desce para baixo do conteúdo. Ali ele não disputa
   largura com o palco, e recolher deixa de ter o que resolver — o controle e a ação
   compacta saem, e o rail reaparece mesmo com "recolhido" guardado do desktop.

   Medido a 375px: os três elementos custavam 51px de barra fixa (de 98 para 149),
   numa tela de 812. Pagar isso para resolver um problema que não existe nessa
   largura seria cobrar do celular a conta do monitor.

   A tela cheia fica: numa tela de 375px ela é ainda mais útil que no desktop.

   Este bloco precisa vir DEPOIS das regras de recolher. Ele estava antes, e duas
   das três regras empatavam em peso com as que deviam vencer — em empate, ganha
   a última. Medido na revisão a 375px: o rail sumia SEM botão para voltar (a
   lista de aulas inacessível no celular) e a ação compacta aparecia, com a barra
   em 140px. `RailRecolhivelTest` guarda a ordem. */
@media (max-width: 1100px) {
  /* `html.tdk-js` precisa estar aqui também: media query não acrescenta peso, e sem
     o mesmo prefixo a regra que ACENDE o controle continuaria vencendo esta. */
  html.tdk-js .tdk-foco-controle[data-aula="rail"] { display: none; }
  html.tdk-js.tdk-rail-recolhido .tdk-foco-acao { display: none; }
  html.tdk-rail-recolhido .tdk-aula-rail { display: block; }
}

.tdk-aula-cabeca { margin-top: var(--tdk-sp-5); }

.tdk-aula-titulo {
  margin-top: var(--tdk-sp-2);
  font-size: var(--tdk-fs-xl);
  line-height: 1.25;
  max-width: 58ch;
}

.tdk-aula-meta {
  margin-top: var(--tdk-sp-2);
  color: var(--tdk-text-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
}

.tdk-aula-descricao {
  margin-top: var(--tdk-sp-3);
  color: var(--tdk-text-2);
  max-width: 62ch;
  line-height: 1.6;
}

/* ── O rail ──────────────────────────────────────────────────────────────── */

/* Gruda abaixo da barra: numa lista de dez aulas, o botão de ação no pé do rail
   continua alcançável sem rolar de volta. */
.tdk-aula-rail {
  position: sticky;
  top: 78px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 110px);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface);
  overflow: hidden;
}

@media (max-width: 1100px) {
  .tdk-aula-rail { position: static; max-height: none; }
}

.tdk-rail-topo {
  padding: var(--tdk-sp-4);
  border-bottom: 1px solid var(--tdk-border);
}

.tdk-rail-curso {
  margin: var(--tdk-sp-2) 0 var(--tdk-sp-3);
  font-weight: var(--tdk-fw-semi);
  line-height: 1.3;
}

.tdk-rail-conta {
  margin-top: var(--tdk-sp-2);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-xs);
}

/* A lista rola dentro do rail, e não a página: o cabeçalho do curso e a ação do pé
   ficam parados. */
.tdk-rail-aulas {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--tdk-sp-2);
}

.tdk-rail-aulas > li > a {
  display: flex;
  align-items: flex-start;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-3);
  border-radius: var(--tdk-radius-sm);
  color: inherit;
  transition: background var(--tdk-trans);
}

.tdk-rail-aulas > li > a:hover { background: var(--tdk-surface-2); color: inherit; }

/* Aula fora da vez no rail: o desenho do link, apagado e parado. */
.tdk-rail-aulas > li > .tdk-rail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-3);
  color: var(--tdk-text-3);
  cursor: not-allowed;
}
.tdk-rail-aulas > li.is-travada strong { color: var(--tdk-text-3); font-weight: var(--tdk-fw-medium); }
.tdk-rail-aulas > li.is-travada .tdk-rail-marca { border-style: dashed; }

/* A atual com fundo e barra: numa lista de dez, "onde eu estou" tem que ser a primeira
   coisa que o olho acha. */
.tdk-rail-aulas > li.is-atual > a {
  background: var(--tdk-surface-3);
  box-shadow: inset 2px 0 0 var(--tdk-accent);
}

.tdk-rail-aulas > li.is-atual strong { color: var(--tdk-accent); }

.tdk-rail-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-pill);
  color: var(--tdk-text-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
}

/* Concluída: círculo verde com o visto. Cor E forma — quem não distingue verde ainda vê
   o ícone. */
.tdk-rail-aulas > li.is-feita .tdk-rail-marca {
  border-color: var(--tdk-ok);
  background: var(--tdk-success-soft);
  color: var(--tdk-ok);
}

.tdk-rail-texto { min-width: 0; }
.tdk-rail-texto strong { display: block; font-weight: 400; line-height: 1.35; }
.tdk-rail-texto .tdk-celula-sub { display: block; margin-top: 2px; }

/* O capítulo como rótulo da lista do rail: só aparece quando o curso tem mais de
   um, porque num curso de capítulo único ele não separaria nada. */
.tdk-rail-capitulo {
  padding: var(--tdk-sp-3) var(--tdk-sp-2) var(--tdk-sp-1);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tdk-text-3);
}

.tdk-rail-capitulo:first-child { padding-top: 0; }


/* A avaliação, separada da lista por uma linha: ela é do curso, não mais uma aula. */
.tdk-rail-prova {
  margin-top: var(--tdk-sp-2);
  padding-top: var(--tdk-sp-2);
  border-top: 1px solid var(--tdk-border);
}

.tdk-rail-prova .tdk-rail-marca {
  border-color: var(--tdk-warn);
  color: var(--tdk-warn);
}

.tdk-rail-prova.is-feita .tdk-rail-marca {
  border-color: var(--tdk-ok);
  background: var(--tdk-success-soft);
  color: var(--tdk-ok);
}

.tdk-rail-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tdk-sp-2);
  padding: var(--tdk-sp-4);
  border-top: 1px solid var(--tdk-border);
  background: var(--tdk-surface-2);
}

.tdk-rail-acao .tdk-btn { flex: 1 1 auto; justify-content: center; }

/* ── A prova ─────────────────────────────────────────────────────────────── */

.tdk-prova-tira {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-4);
  max-width: 860px;
  margin: 0 auto var(--tdk-sp-8);
  padding-bottom: var(--tdk-sp-4);
  border-bottom: 1px solid var(--tdk-border);
}

.tdk-prova-tira-rotulo {
  color: var(--tdk-text-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tdk-prova-passos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-sp-2);
}

.tdk-prova-folha { max-width: 860px; margin: 0 auto; }

.tdk-prova-rotulo {
  color: var(--tdk-accent);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tdk-prova-folha .tdk-prova-enunciado {
  margin: var(--tdk-sp-3) 0 var(--tdk-sp-6);
  max-width: 46ch;
  font-size: var(--tdk-fs-2xl);
  font-weight: var(--tdk-fw-semi);
  line-height: 1.25;
}

.tdk-prova-alternativas {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-3);
  margin: 0;
  padding: 0;
  border: 0;
}

/* Alternativa como cartão clicável inteiro: alvo de 44px, o mínimo para o dedo. Só a
   bolinha do rádio como alvo é uma prova impossível de fazer no celular. */
.tdk-alternativa {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-4);
  padding: var(--tdk-sp-4) var(--tdk-sp-5);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface);
  min-height: 44px;
  cursor: pointer;
  transition: border-color var(--tdk-trans), background var(--tdk-trans);
}

.tdk-alternativa:hover { background: var(--tdk-surface-2); }

/* O rádio nativo sai de vista, e a LETRA passa a ser o indicador. Continua sendo um
   rádio de verdade: teclado, leitor de tela e formulário sem JavaScript intactos. */
.tdk-alternativa input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tdk-alternativa-letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-surface-2);
  color: var(--tdk-text-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-sm);
  transition: background var(--tdk-trans), color var(--tdk-trans);
}

.tdk-alternativa-texto { line-height: 1.45; }

/* Marcada: borda inteira acesa E a letra preenchida. Duas marcas porque numa lista de
   quatro, só a bolinha é fácil de não ver — e reler as quatro para achar a própria
   resposta é atrito puro no meio de uma prova. */
.tdk-alternativa:has(input:checked) {
  border-color: var(--tdk-accent);
  background: var(--tdk-surface-3);
}

.tdk-alternativa:has(input:checked) .tdk-alternativa-letra {
  border-color: var(--tdk-accent);
  background: var(--tdk-accent);
  color: var(--tdk-bg);
  font-weight: var(--tdk-fw-semi);
}

/* Foco pelo teclado precisa aparecer no CARTÃO: o rádio está escondido, e sem isto quem
   navega por Tab não sabe onde está. */
.tdk-alternativa:has(input:focus-visible) {
  outline: 2px solid var(--tdk-accent);
  outline-offset: 2px;
}

/* A ajuda precisa de respiro: colada na última alternativa ela parecia parte do
   cartão, e num bloco de escolha isso confunde o que é opção e o que é instrução. */
.tdk-prova-folha > .tdk-campo-ajuda { margin-top: var(--tdk-sp-4); }

.tdk-prova-navegacao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--tdk-sp-4);
  margin-top: var(--tdk-sp-8);
  flex-wrap: wrap;
}

@media (max-width: 620px) {
  .tdk-prova-tira { flex-direction: column; align-items: flex-start; gap: var(--tdk-sp-2); }
  .tdk-prova-folha .tdk-prova-enunciado { font-size: var(--tdk-fs-xl); }
  .tdk-alternativa { padding: var(--tdk-sp-3) var(--tdk-sp-4); gap: var(--tdk-sp-3); }
  .tdk-prova-navegacao > * { flex: 1 1 100%; }
}

/* ============================================================================
   27. PÁGINA DA TRILHA   (ticket 24 — conforme 04-pagina-curso)
   ----------------------------------------------------------------------------
   A tela do ticket 13 usava grade de cartões. A sequência de uma trilha é uma
   ORDEM, e duas colunas não têm ordem: o olho lê em Z, o curso 3 fica ao lado
   do 4 e o 5 desce para a esquerda. Aqui é UMA LINHA POR CURSO.

   Sem cadeado em nenhum estado: a ordem é sugestão, não trava (ver o ticket).
   ============================================================================ */

/* ── Herói ─────────────────────────────────────────────────────────────── */

/* 880 e não 780: o selo de prazo vencido ganhou o ponto que pulsa (ticket 50), e com
   780 ele caía sozinho para a linha de baixo de um nome de trilha comum. A medida
   do texto continua presa no subtítulo, pelo `max-width` em ch dele. */
.tdk-trilha-heroi { max-width: 880px; }

.tdk-trilha-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tdk-sp-3);
  margin: var(--tdk-sp-2) 0 var(--tdk-sp-3);
  font-size: var(--tdk-fs-3xl);
  letter-spacing: -0.02em;
}

.tdk-trilha-sub {
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-md);
  max-width: 62ch;
}

/* Meta em pontos, como no modelo. O ponto é gerado aqui e não digitado na view:
   marcador de lista não deve virar conteúdo copiável. */
.tdk-trilha-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-sp-2) var(--tdk-sp-5);
  margin: var(--tdk-sp-5) 0 0;
  color: var(--tdk-text-3);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tdk-trilha-meta li { display: flex; align-items: center; gap: var(--tdk-sp-2); }

.tdk-trilha-meta li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.tdk-trilha-meta .is-accent { color: var(--tdk-accent); }

.tdk-trilha-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tdk-sp-3);
  margin-top: var(--tdk-sp-6);
}

/* ── Tira de progresso ─────────────────────────────────────────────────── */

/* Faixa de borda a borda, separando o herói do conteúdo — é o papel que ela tem
   no modelo. Uma conta só: cursos CUMPRIDOS. */
.tdk-trilha-tira {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-5);
  margin: var(--tdk-sp-8) 0;
  padding: var(--tdk-sp-4) 0;
  border-top: 1px solid var(--tdk-border);
  border-bottom: 1px solid var(--tdk-border);
}

.tdk-trilha-tira .tdk-rotulo { margin: 0; white-space: nowrap; }

.tdk-trilha-tira-barra { flex: 1; min-width: 120px; }

.tdk-trilha-tira-conta {
  color: var(--tdk-text-2);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  white-space: nowrap;
}
.tdk-trilha-tira-conta .is-atencao { color: var(--tdk-warn); }

.tdk-trilha-tira-conta strong { color: var(--tdk-text); }

/* ── Corpo: sequência + rail ───────────────────────────────────────────── */

.tdk-trilha-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--tdk-sp-8);
  align-items: start;
}

.tdk-trilha-rail {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-4);
}

/* ── A lista de cursos ────────────────────────────────────────────────── */

.tdk-cursos {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-3);
  margin-bottom: var(--tdk-sp-5);
}

.tdk-curso-linha {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tdk-sp-4);
  padding: var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface);
  transition: border-color var(--tdk-trans), background var(--tdk-trans);
}

.tdk-curso-linha:hover { border-color: var(--tdk-border-hi); background: var(--tdk-surface-2); }

/* A linha em que a pessoa está é a única com destaque de borda — e a única com
   botão. Onze linhas iguais com botão igual não apontam nada. */
.tdk-curso-linha.is-corrente {
  border-color: rgba(90, 181, 255, 0.35);
  background: var(--tdk-surface-2);
}

/* Marca de estado. Quadrado com o número, ou o visto quando cumprido. */
.tdk-curso-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-surface-3);
  color: var(--tdk-text-3);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-sm);
}

.tdk-curso-linha.is-cumprido .tdk-curso-marca {
  background: var(--tdk-accent);
  color: var(--tdk-on-accent);
}

.tdk-curso-linha.is-corrente .tdk-curso-marca {
  background: var(--tdk-accent-soft);
  color: var(--tdk-accent);
  box-shadow: inset 0 0 0 1px rgba(90, 181, 255, 0.35);
}

.tdk-curso-texto { min-width: 0; }

.tdk-curso-texto h3 {
  font-size: var(--tdk-fs-base);
  font-weight: var(--tdk-fw-semi);
}

.tdk-curso-texto h3 a { color: var(--tdk-text); }
.tdk-curso-texto h3 a:hover { color: var(--tdk-accent); }

/* A linha inteira clica, sem aninhar link dentro de link: o ::after do título
   cobre a linha, e a ação fica acima dele. É o que permite ter alvo de clique de
   linha E um botão de verdade na mesma linha. */
.tdk-curso-texto h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tdk-radius-md);
}

.tdk-curso-detalhe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tdk-sp-2) var(--tdk-sp-3);
  margin-top: var(--tdk-sp-2);
  color: var(--tdk-text-3);
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
}

.tdk-curso-corrente {
  color: var(--tdk-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tdk-curso-acao { position: relative; }

/* ── Rail: instrutores e certificado ───────────────────────────────────── */

.tdk-instrutores {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-4);
  margin-top: var(--tdk-sp-4);
}

.tdk-instrutores li {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
}

.tdk-instrutor-texto { display: flex; flex-direction: column; min-width: 0; }
.tdk-instrutor-texto strong { font-size: var(--tdk-fs-sm); }

.tdk-cartao-certificado { display: flex; flex-direction: column; gap: var(--tdk-sp-3); }
.tdk-cartao-certificado .tdk-btn { align-self: flex-start; }

/* ── Responsivo ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .tdk-trilha-corpo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .tdk-trilha-titulo { font-size: var(--tdk-fs-2xl); }

  /* A tira empilha: barra de 120px espremida entre dois textos mono não se lê. */
  .tdk-trilha-tira {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tdk-sp-3);
  }

  .tdk-trilha-tira-conta { white-space: normal; }

  /* A marca sai da linha do texto e vira cabeçalho da linha, com a ação embaixo:
     44px + texto + botão não cabem em 360px. */
  .tdk-curso-linha { grid-template-columns: 34px minmax(0, 1fr); }
  .tdk-curso-marca { width: 32px; height: 32px; font-size: var(--tdk-fs-xs); }
  .tdk-curso-acao { grid-column: 2; justify-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   16. Movimento
   ═══════════════════════════════════════════════════════════════════════

   A folha tinha 33 regras de :hover e exatamente UMA que movia alguma coisa
   (o botão, -1px). O resultado era uma tela correta e parada: nada reagia, e o
   número que o aluno veio ver já estava lá quando a página pintava.

   Três princípios, para isto não virar enfeite:

   1. **Só se move o que é clicável.** Card que levanta e não abre nada ensina
      uma regra que o sistema não tem — o mesmo erro do cadeado sem travamento.
      O design system já separava os dois casos com `.tdk-card--clicavel`; o
      movimento entra nesse modificador, e não na classe base. Por isso a linha
      do curso e o cartão do catálogo NÃO levantam: quem é clicável ali dentro
      é o botão. Já `.tdk-trilha-linha` levanta — ela é um link inteiro.
   2. **Curto.** Nada acima de 400ms, exceto a barra de progresso, que é a
      única animação com conteúdo — ela mostra o QUANTO, não só que mudou.
   3. **Some inteiro** sob prefers-reduced-motion, no bloco do fim.

   O contorno de foco NÃO está aqui: já existe uma regra global de
   `:focus-visible` no topo da folha, e repeti-la criaria duas verdades.
   ─────────────────────────────────────────────────────────────────────── */

/* ── A barra de progresso cresce ───────────────────────────────────────── */

/* A largura vem inline do servidor, então `transition` não tinha de onde
   partir e a barra saltava para o valor final. Um keyframe só com `from`
   resolve: o `to` implícito é a largura computada, seja ela qual for.

   Vale em toda tela que use o componente de progresso — e SÓ nelas: a barra do
   player de vídeo é um controle de faixa, componente diferente. Animar a
   posição de reprodução seria mentira, não enfeite. */
@keyframes tdk-preencher {
  from { width: 0; }
}

.tdk-progresso-preenche {
  animation: tdk-preencher 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Listas se montam, em vez de aparecerem prontas ────────────────────── */

@keyframes tdk-entrar {
  from { opacity: 0; transform: translateY(6px); }
}

/* As sete listas da jornada do aluno: cursos da trilha, topo do painel,
   trilhas em andamento, pendências, grade do catálogo e de "minhas trilhas",
   certificados, e a régua de aulas da tela de foco.

   A régua entra, mas o CONTEÚDO da tela de foco não: o vídeo e o PDF aparecem
   na hora. Quem chega ali quer assistir, não ver a página se montar. */
.tdk-cursos > *,
.tdk-painel-topo > *,
.tdk-trilhas-andamento > *,
.tdk-pendencias > *,
.tdk-grade > *,
.tdk-cert-grade > *,
.tdk-rail-aulas > * {
  animation: tdk-entrar 0.38s ease-out both;
}

/* Escalonado por nth-child, e não por variável no HTML: o atraso é decisão de
   apresentação, e não tem por que a view saber o índice. Para de escalonar no
   oitavo — de lá em diante esperar mais atrapalha em vez de encantar. */
:is(.tdk-cursos, .tdk-painel-topo, .tdk-trilhas-andamento, .tdk-pendencias, .tdk-grade, .tdk-cert-grade, .tdk-rail-aulas) > :nth-child(1) { animation-delay: 0ms; }
:is(.tdk-cursos, .tdk-painel-topo, .tdk-trilhas-andamento, .tdk-pendencias, .tdk-grade, .tdk-cert-grade, .tdk-rail-aulas) > :nth-child(2) { animation-delay: 60ms; }
:is(.tdk-cursos, .tdk-painel-topo, .tdk-trilhas-andamento, .tdk-pendencias, .tdk-grade, .tdk-cert-grade, .tdk-rail-aulas) > :nth-child(3) { animation-delay: 120ms; }
:is(.tdk-cursos, .tdk-painel-topo, .tdk-trilhas-andamento, .tdk-pendencias, .tdk-grade, .tdk-cert-grade, .tdk-rail-aulas) > :nth-child(4) { animation-delay: 180ms; }
:is(.tdk-cursos, .tdk-painel-topo, .tdk-trilhas-andamento, .tdk-pendencias, .tdk-grade, .tdk-cert-grade, .tdk-rail-aulas) > :nth-child(5) { animation-delay: 240ms; }
:is(.tdk-cursos, .tdk-painel-topo, .tdk-trilhas-andamento, .tdk-pendencias, .tdk-grade, .tdk-cert-grade, .tdk-rail-aulas) > :nth-child(6) { animation-delay: 300ms; }
:is(.tdk-cursos, .tdk-painel-topo, .tdk-trilhas-andamento, .tdk-pendencias, .tdk-grade, .tdk-cert-grade, .tdk-rail-aulas) > :nth-child(7) { animation-delay: 360ms; }
:is(.tdk-cursos, .tdk-painel-topo, .tdk-trilhas-andamento, .tdk-pendencias, .tdk-grade, .tdk-cert-grade, .tdk-rail-aulas) > :nth-child(n + 8) { animation-delay: 420ms; }

/* O certificado em destaque não tem irmãos para escalonar: entra sozinho. */
.tdk-cert-destaque { animation: tdk-entrar 0.38s ease-out both; }

/* ── O botão responde ao clique ────────────────────────────────────────── */

/* `.tdk-btn:hover` já subia 1px, mas `transform` não estava na transição: o
   salto era instantâneo. E não havia :active — o clique não devolvia nada. */
.tdk-btn {
  transition:
    background var(--tdk-trans),
    border-color var(--tdk-trans),
    color var(--tdk-trans),
    transform var(--tdk-trans-fast),
    box-shadow var(--tdk-trans);
}

.tdk-btn:active { transform: translateY(1px); }

/* ── O que é clicável levanta ──────────────────────────────────────────── */

/* Sombra discreta: num tema escuro, sombra preta quase não aparece — o que dá
   a sensação de relevo é a borda clarear junto. */
.tdk-card--clicavel,
.tdk-trilha-linha {
  transition:
    border-color var(--tdk-trans),
    background var(--tdk-trans),
    transform var(--tdk-trans),
    box-shadow var(--tdk-trans);
}

.tdk-card--clicavel:hover,
.tdk-trilha-linha:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* Item de lista que é link desliza, não levanta — pendência do painel e aula da
   régua. Levantar item de lista desmancha o alinhamento da coluna. */
.tdk-pendencias a,
.tdk-rail-aulas a {
  display: block;
  transition: transform var(--tdk-trans-fast), color var(--tdk-trans), background var(--tdk-trans);
}
.tdk-pendencias a:hover,
.tdk-rail-aulas a:hover { transform: translateX(2px); }

/* ── A marca do curso, na página da trilha ────────────────────────────── */

/* O visto de cumprido entra com um pulo curto. É o único momento de comemoração
   da tela, e dura 260ms. O atraso deixa a linha entrar primeiro. */
@keyframes tdk-surgir {
  from { transform: scale(0.82); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
}

.tdk-curso-linha.is-cumprido .tdk-curso-marca {
  animation: tdk-surgir 0.26s ease-out both;
  animation-delay: 200ms;
}

/* A linha do curso não levanta — não é clicável. Mas a marca acompanha o
   hover da linha, o que dá vida sem prometer clique. */
.tdk-curso-marca { transition: transform var(--tdk-trans), box-shadow var(--tdk-trans); }
.tdk-curso-linha:hover .tdk-curso-marca { transform: scale(1.06); }

/* O título é link de verdade, então ele pode se mexer. */
.tdk-curso-texto h3 a { display: inline-block; transition: color var(--tdk-trans), transform var(--tdk-trans-fast); }
.tdk-curso-texto h3 a:hover { transform: translateX(2px); }

/* ── Quem pediu menos movimento, recebe menos ──────────────────────────── */

/* Não é "quase nada": é nada. A pessoa que liga essa opção no sistema costuma
   ter um motivo vestibular, e animação reduzida ainda incomoda. No Windows o
   ajuste chama "Efeitos de animação", e ele desliga isto tudo de uma vez. */
@media (prefers-reduced-motion: reduce) {
  .tdk-progresso-preenche,
  .tdk-cursos > *,
  .tdk-painel-topo > *,
  .tdk-trilhas-andamento > *,
  .tdk-pendencias > *,
  .tdk-grade > *,
  .tdk-cert-grade > *,
  .tdk-rail-aulas > *,
  .tdk-cert-destaque,
  .tdk-curso-linha.is-cumprido .tdk-curso-marca {
    animation: none;
  }
  .tdk-card--clicavel:hover,
  .tdk-trilha-linha:hover,
  .tdk-pendencias a:hover,
  .tdk-rail-aulas a:hover,
  .tdk-curso-linha:hover .tdk-curso-marca,
  .tdk-curso-texto h3 a:hover,
  .tdk-btn:hover,
  .tdk-btn:active {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   17. Boletim (ticket 25)
   ═══════════════════════════════════════════════════════════════════════

   Uma linha por trilha, e não cartões em grade — pela mesma razão do ticket 24:
   boletim é leitura de cima para baixo, comparando a mesma coluna entre linhas.
   Em grade, a média de uma trilha fica ao lado da barra de outra.

   A linha é um `<a>` que leva à âncora do detalhamento. Por isso ela levanta no
   hover: aqui o elemento inteiro é clicável de verdade, ao contrário da linha de
   curso da página da trilha, que não é.
   ─────────────────────────────────────────────────────────────────────── */

.tdk-boletim {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-3);
  margin-bottom: var(--tdk-sp-6);
}

.tdk-boletim-linha {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) auto minmax(140px, 1.4fr) auto auto;
  align-items: center;
  gap: var(--tdk-sp-5);
  padding: var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface);
  color: inherit;
}

.tdk-boletim-linha:hover {
  border-color: var(--tdk-accent);
  background: var(--tdk-surface-2);
  color: inherit;
}

.tdk-boletim-identidade { min-width: 0; }

.tdk-boletim-identidade h3 {
  margin-top: 2px;
  font-size: var(--tdk-fs-base);
  font-weight: var(--tdk-fw-semi);
  color: var(--tdk-text);
}

.tdk-boletim-cursos p,
.tdk-boletim-media-valor {
  margin-top: 2px;
  font-family: var(--tdk-font-mono);
  color: var(--tdk-text);
}

/* A média é o número que traz a pessoa a esta tela. Maior que o resto da linha, e
   em acento — mas sem virar título: quem manda na linha é o nome da trilha. */
.tdk-boletim-media-valor {
  font-size: var(--tdk-fs-lg);
  color: var(--tdk-accent);
}

.tdk-boletim-situacao { justify-self: end; }

@media (max-width: 900px) {
  /* Empilha: cinco colunas em 360px espremem a barra até ela não medir nada. */
  .tdk-boletim-linha {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--tdk-sp-3);
  }
  .tdk-boletim-identidade { grid-column: 1 / -1; }
  .tdk-boletim-barra { grid-column: 1 / -1; }
  .tdk-boletim-situacao { justify-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   18. Biblioteca (ticket 26)
   ═══════════════════════════════════════════════════════════════════════

   Lista, não grade. O material se procura por nome, e nome se lê em coluna —
   em grade de três, o olho varre em Z e o título fica ao lado de um tipo que
   não é o dele. É a mesma razão do ticket 24 para os cursos da trilha.

   Cada linha é um `<a>` inteiro, e por isso levanta no hover: aqui o alvo
   clicável é a linha toda, ao contrário da linha de curso da página da trilha.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Filtro em pílulas ─────────────────────────────────────────────────── */

.tdk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdk-sp-2);
  margin-bottom: var(--tdk-sp-5);
}

.tdk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  padding: var(--tdk-sp-2) var(--tdk-sp-4);
  line-height: 18px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-surface);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
  transition: background var(--tdk-trans), border-color var(--tdk-trans), color var(--tdk-trans);
}

.tdk-chip:hover { border-color: var(--tdk-border-hi); color: var(--tdk-text); }

.tdk-chip.is-ativo {
  border-color: var(--tdk-accent);
  background: var(--tdk-accent-soft);
  color: var(--tdk-accent);
}

/* A contagem é mono para os números alinharem entre pílulas de larguras
   diferentes — sem isso "3" e "12" dançam ao trocar de filtro. */
.tdk-chip-conta {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-3);
}

.tdk-chip.is-ativo .tdk-chip-conta { color: var(--tdk-accent); }

/* ── A lista de materiais ──────────────────────────────────────────────── */

.tdk-materiais {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-3);
}

.tdk-material {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tdk-sp-4);
  padding: var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface);
  color: inherit;
}

.tdk-material:hover {
  border-color: var(--tdk-accent);
  background: var(--tdk-surface-2);
  color: inherit;
}

/* A marca de tipo é quadrada e com o rótulo embaixo do ícone — é o que o modelo
   faz, e resolve o que a cor sozinha não resolveria para quem não distingue
   azul de roxo. */
.tdk-material-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 56px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-sm);
  background: var(--tdk-surface-3);
  color: var(--tdk-text-2);
}

.tdk-material-marca svg { width: 20px; height: 20px; }

.tdk-material-tipo {
  font-family: var(--tdk-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tdk-text-3);
}

.tdk-material-texto { display: flex; flex-direction: column; gap: var(--tdk-sp-1); min-width: 0; }

.tdk-material-titulo {
  font-size: var(--tdk-fs-base);
  font-weight: var(--tdk-fw-semi);
  color: var(--tdk-text);
}

.tdk-material-meta {
  font-family: var(--tdk-font-mono);
  font-size: var(--tdk-fs-xs);
  color: var(--tdk-text-3);
}

.tdk-material-acao {
  justify-self: end;
  font-size: var(--tdk-fs-sm);
  color: var(--tdk-accent);
}

@media (max-width: 640px) {
  /* A ação desce para a linha do texto: 64px + título + "Abrir" não cabem em
     360px sem espremer o título até ele truncar no meio da palavra. */
  .tdk-material { grid-template-columns: 56px minmax(0, 1fr); }
  .tdk-material-marca { width: 56px; height: 48px; }
  .tdk-material-acao { grid-column: 2; justify-self: start; }
}

/* O atraso na tabela do relatorio (ticket 28). Vermelho, e nao a cor de "parado":
   sao dois problemas diferentes -- quem sumiu e quem nao vai concluir a tempo -- e
   pintar os dois igual faria o Gestor tratar igual o que pede acao diferente. */
.tdk-celula-sub.is-atraso { color: var(--tdk-danger); }

/* ============================================================================
   RELATÓRIOS › CURSOS   (ticket 47)
   ----------------------------------------------------------------------------
   O modelo é o artboard aprovado em 08/10/2026. Barras e histograma em CSS puro:
   nada de biblioteca de gráfico, e o número sempre ao lado da barra — a barra é
   o desenho, o número é o dado, e leitor de tela lê o número.
   ============================================================================ */

.tdk-res-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tdk-sp-3);
}
.tdk-res-controles .tdk-campo { margin: 0; min-width: 210px; }

.tdk-res-recorte {
  margin: 0 0 var(--tdk-sp-5);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-left: 3px solid var(--tdk-accent);
  border-radius: var(--tdk-radius);
  background: var(--tdk-accent-soft);
  color: var(--tdk-text-2);
  font-size: var(--tdk-fs-sm);
  line-height: 1.55;
  max-width: 900px;
}

.tdk-res { display: flex; flex-direction: column; gap: var(--tdk-sp-5); }

/* Os tons, num lugar só. "normal" é texto comum; "apagado" é o cinza de fundo. */
.tdk-res .is-ok { color: var(--tdk-ok); }
.tdk-res .is-info { color: var(--tdk-accent); }
.tdk-res .is-atencao { color: var(--tdk-warn); }
.tdk-res .is-perigo { color: var(--tdk-danger); }
.tdk-res .is-neutro { color: var(--tdk-text-3); }
.tdk-res .is-normal { color: var(--tdk-text); }

.tdk-res-mono { font-family: var(--tdk-font-mono); font-variant-numeric: tabular-nums; }
.tdk-res-nota { color: var(--tdk-text-3); font-size: 12.5px; line-height: 1.5; margin: 0; }
.tdk-res-meta {
  display: block;
  margin-top: var(--tdk-sp-1);
  font-family: var(--tdk-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--tdk-text-3);
}
.tdk-res-meta.is-atencao { color: var(--tdk-warn); }
.tdk-res-apagado { color: var(--tdk-text-3); }

/* ── Os números do alto ─────────────────────────────────────────────────────── */
.tdk-res-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--tdk-sp-4);
}
.tdk-res-numero { display: flex; flex-direction: column; gap: var(--tdk-sp-2); margin: 0; }
.tdk-res-numero-valor {
  margin: 0;
  font-size: 30px;
  font-weight: var(--tdk-fw-bold);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--tdk-text);
}
.tdk-res-numero-valor.is-neutro { color: var(--tdk-text); }

/* ── Blocos ─────────────────────────────────────────────────────────────────── */
.tdk-res-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--tdk-sp-4);
}
.tdk-res-bloco { display: flex; flex-direction: column; gap: var(--tdk-sp-4); margin: 0; }
.tdk-res-bloco h2,
.tdk-res-secao-topo h2 { margin: 0; font-size: 18px; font-weight: var(--tdk-fw-semi); }
.tdk-res-bloco-topo,
.tdk-res-secao-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tdk-sp-2) var(--tdk-sp-4);
}
.tdk-res-secao-topo { margin-bottom: var(--tdk-sp-3); }
.tdk-res-subbloco { display: flex; flex-direction: column; gap: var(--tdk-sp-2); }

/* ── Barras ─────────────────────────────────────────────────────────────────── */
.tdk-res-barra {
  height: 4px;
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-surface-3);
  overflow: hidden;
}
.tdk-res-barra--grossa { height: 8px; border-radius: 4px; }
.tdk-res-barra > span { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.tdk-res-barra > span.is-neutro { color: var(--tdk-border-hi); }

/* A pilha do andamento: cumpriram e fazendo, lado a lado. */
.tdk-res-pilha {
  display: flex;
  height: 8px;
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-surface-3);
  overflow: hidden;
}
.tdk-res-pilha > span { display: block; height: 100%; background: currentColor; }

.tdk-res-trilha { display: flex; flex-direction: column; gap: var(--tdk-sp-2); }
.tdk-res-linha-topo,
.tdk-res-linha-pe { display: flex; justify-content: space-between; gap: var(--tdk-sp-3); }
.tdk-res-linha-topo > :first-child { font-weight: var(--tdk-fw-medium); min-width: 0; }
.tdk-res-linha-pe { font-family: var(--tdk-font-mono); font-size: 11px; color: var(--tdk-text-3); }

/* Setor ou time: nome · barra · % · atraso. */
.tdk-res-grupo {
  display: grid;
  grid-template-columns: minmax(150px, 1.6fr) minmax(80px, 2fr) 44px minmax(70px, auto);
  align-items: center;
  gap: var(--tdk-sp-3);
}
.tdk-res-grupo > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.tdk-res-grupo-nome { color: var(--tdk-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdk-res-grupo > .tdk-res-mono { text-align: right; font-size: 12.5px; }
.tdk-res-grupo-resumo { font-family: var(--tdk-font-mono); font-size: 11px; text-align: right; }
.tdk-res-grupo--curto { grid-template-columns: minmax(120px, 1fr) minmax(80px, 2fr) 44px; }
.tdk-res-mais summary { cursor: pointer; color: var(--tdk-accent); font-size: 12.5px; margin-bottom: var(--tdk-sp-3); }
.tdk-res-mais[open] { display: flex; flex-direction: column; gap: var(--tdk-sp-4); }

/* ── A tabela de cursos ─────────────────────────────────────────────────────── */
.tdk-res-tabela .tdk-res-num { text-align: right; }
.tdk-res-tabela th[scope="row"] { font-weight: var(--tdk-fw-medium); }
.tdk-res-curso-nome { color: var(--tdk-text); font-weight: var(--tdk-fw-medium); }
a.tdk-res-curso-nome:hover { color: var(--tdk-accent); }
.tdk-res-andamento { min-width: 160px; }
.tdk-res-andamento .tdk-res-meta { margin-top: var(--tdk-sp-2); }

.tdk-res-cartoes { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: var(--tdk-sp-3); }
.tdk-res-cartoes > li { display: flex; flex-direction: column; gap: var(--tdk-sp-2); margin: 0; }
.tdk-res-cartao-dados { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tdk-sp-2); margin: var(--tdk-sp-2) 0 0; }
.tdk-res-cartao-dados dt { font-family: var(--tdk-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tdk-text-3); }
.tdk-res-cartao-dados dd { margin: var(--tdk-sp-1) 0 0; font-family: var(--tdk-font-mono); }

/* ── Atenção ─────────────────────────────────────────────────────────────────── */
.tdk-res-pilulas { display: flex; flex-wrap: wrap; gap: var(--tdk-sp-2); }
.tdk-res-pilula {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-pill);
  color: var(--tdk-text-2);
  font-size: 13px;
  transition: border-color var(--tdk-trans), color var(--tdk-trans), background var(--tdk-trans);
}
.tdk-res-pilula:hover { border-color: var(--tdk-border-hi); color: var(--tdk-text); }
.tdk-res-pilula.is-ativa { border-color: var(--tdk-accent); background: var(--tdk-surface-2); color: var(--tdk-text); }
.tdk-res-pilula.is-inerte { color: var(--tdk-text-3); opacity: 0.7; cursor: default; }

.tdk-res-pessoa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tdk-sp-3) var(--tdk-sp-4);
  padding-top: var(--tdk-sp-3);
  border-top: 1px solid var(--tdk-border);
}
.tdk-res-pessoa-texto { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: var(--tdk-sp-1); }
.tdk-res-motivo { font-size: 12.5px; }
.tdk-res-pessoa form { margin: 0; }
.tdk-res-ninguem { padding-top: var(--tdk-sp-3); border-top: 1px solid var(--tdk-border); }

/* ── O primeiro dia ─────────────────────────────────────────────────────────── */
.tdk-res-vazio { display: flex; flex-wrap: wrap; gap: var(--tdk-sp-8); padding: var(--tdk-sp-8); }
.tdk-res-vazio-texto { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--tdk-sp-3); color: var(--tdk-accent); }
.tdk-res-vazio-texto h2 { margin: 0; color: var(--tdk-text); font-size: 22px; }
.tdk-res-vazio-texto p { margin: 0; color: var(--tdk-text-2); line-height: 1.6; max-width: 440px; }
.tdk-res-passos { flex: 2 1 440px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tdk-sp-3); }
.tdk-res-passos > li {
  display: flex;
  gap: var(--tdk-sp-4);
  align-items: flex-start;
  padding: var(--tdk-sp-4) var(--tdk-sp-5);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-bg-2);
}
.tdk-res-passos > li > div { flex: 1; display: flex; flex-direction: column; gap: var(--tdk-sp-2); }
.tdk-res-passos p { margin: 0; color: var(--tdk-text-2); font-size: 13px; line-height: 1.5; }
.tdk-res-passos a { font-size: 13px; }
.tdk-res-passo-numero {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: var(--tdk-radius-pill);
  font-family: var(--tdk-font-mono);
  font-size: 12px;
}
.tdk-res-passo-topo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--tdk-sp-3); }
.tdk-res-passo-estado { font-family: var(--tdk-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.tdk-res-passos > li.is-ok { color: var(--tdk-ok); }
.tdk-res-passos > li.is-atencao { color: var(--tdk-warn); }
.tdk-res-passos > li.is-neutro { color: var(--tdk-text-3); }
.tdk-res-passos strong { color: var(--tdk-text); }

/* ── O curso ────────────────────────────────────────────────────────────────── */
.tdk-res-voltar { display: inline-block; margin-bottom: var(--tdk-sp-3); font-size: 13px; }

.tdk-res-funil {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--tdk-sp-4);
}
.tdk-res-funil > li { display: flex; flex-direction: column; gap: var(--tdk-sp-2); }
.tdk-res-funil-valor { font-size: 28px; font-weight: var(--tdk-fw-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }

.tdk-res-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tdk-sp-3); }
.tdk-res-trio > div { display: flex; flex-direction: column; gap: 4px; }
.tdk-res-trio-valor { font-size: 26px; font-weight: var(--tdk-fw-bold); font-variant-numeric: tabular-nums; }

.tdk-res-histograma {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: end;
  gap: 4px;
  height: 120px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--tdk-border-hi);
}
.tdk-res-coluna { height: 100%; display: flex; align-items: flex-end; }
.tdk-res-coluna > span { display: block; width: 100%; border-radius: 3px 3px 0 0; background: currentColor; }
.tdk-res-coluna > span.is-apagado { color: var(--tdk-border-hi); }
.tdk-res-minimo { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--tdk-warn); }
.tdk-res-escala { display: flex; justify-content: space-between; font-family: var(--tdk-font-mono); font-size: 10.5px; color: var(--tdk-text-3); }

.tdk-res-questao {
  display: flex;
  flex-direction: column;
  gap: var(--tdk-sp-2);
  padding-top: var(--tdk-sp-3);
  border-top: 1px solid var(--tdk-border);
}
.tdk-res-questao .tdk-res-linha-topo > :first-child { font-weight: 400; line-height: 1.45; }
.tdk-res-questao .tdk-res-linha-topo > .tdk-res-mono { flex-shrink: 0; font-size: 12.5px; }
.tdk-res-link { font-size: 12.5px; }

.tdk-res-aula {
  display: grid;
  grid-template-columns: 48px minmax(0, 2.4fr) minmax(80px, 2fr) 44px;
  align-items: center;
  gap: var(--tdk-sp-3);
  font-size: 13px;
}
.tdk-res-aula-codigo { color: var(--tdk-text-3); font-size: 11.5px; }
.tdk-res-aula-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tdk-text-2); }
.tdk-res-aula.is-queda .tdk-res-aula-titulo,
.tdk-res-aula.is-queda > .tdk-res-mono:last-child { color: var(--tdk-warn); }
.tdk-res-aula > .tdk-res-mono:last-child { text-align: right; }

/* ── Celular (artboard 5): cartões no lugar da tabela, e o que pede ação primeiro ── */
@media (max-width: 880px) {
  .tdk-res-so-largo { display: none; }
  .tdk-res-cartoes.tdk-res-so-estreito { display: flex; }
  .tdk-res-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdk-res-numero-valor { font-size: 24px; }
  /* No celular o número basta; a nota explicativa dobrava a altura de cada cartão. */
  .tdk-res-numero .tdk-res-nota { display: none; }
  .tdk-res-colunas { grid-template-columns: minmax(0, 1fr); }
  .tdk-res-ordem-2 { order: 2; }
  .tdk-res-ordem-3 { order: 3; }
  .tdk-res-ordem-4 { order: 4; }
  .tdk-res-numeros { order: 1; }
  .tdk-res-grupo { grid-template-columns: minmax(0, 1fr) 44px; }
  .tdk-res-grupo > .tdk-res-barra { grid-column: 1 / -1; grid-row: 2; }
  .tdk-res-grupo-resumo { grid-column: 1 / -1; text-align: left; }
  .tdk-res-aula { grid-template-columns: 44px minmax(0, 1fr) 40px; }
  .tdk-res-aula > .tdk-res-barra { grid-column: 2 / -1; }
  .tdk-res-vazio { padding: var(--tdk-sp-5); }
  .tdk-res-trio-valor { font-size: 20px; }
}

/* ── A aula se conclui sozinha (09/10/2026) ─────────────────────────────────
   No lugar do botão "Concluir": o que falta, discreto, com um ponto que pulsa
   enquanto a aula corre. Quando ela termina, o mesmo lugar vira o caminho para a
   próxima. public/js/aula-conclusao.js troca o texto e mostra o link. */
.tdk-conclusao { display: flex; flex-direction: column; align-items: stretch; gap: var(--tdk-sp-2); }
.tdk-foco-acao .tdk-conclusao { flex-direction: row; align-items: center; }
.tdk-conclusao-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--tdk-sp-1) var(--tdk-sp-3);
  line-height: 22px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-pill);
  color: var(--tdk-text-2);
  font-size: 12.5px;
  white-space: nowrap;
}
.tdk-conclusao-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tdk-accent);
  animation: tdk-pulso 1.6s ease-in-out infinite;
}
.tdk-conclusao.is-concluida .tdk-conclusao-estado { border-color: var(--tdk-ok); color: var(--tdk-ok); }
.tdk-conclusao.is-concluida .tdk-conclusao-ponto { background: var(--tdk-ok); animation: none; }
.tdk-conclusao.is-concluida.tdk-conclusao .tdk-conclusao-estado { display: none; }
.tdk-conclusao.is-concluida:not(:has([data-conclusao-seguir])) .tdk-conclusao-estado { display: inline-flex; }
@keyframes tdk-pulso {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tdk-conclusao-ponto { animation: none; }
}

/* O caminho para a próxima só aparece quando a aula se conclui. A regra de botão
   (`display: inline-flex`) vencia o atributo `hidden`, e a barra mostrava "Veja até o
   fim" e "Próxima aula" ao mesmo tempo — medido na tela em 09/10/2026. */
[data-conclusao-seguir][hidden] { display: none !important; }
.tdk-foco-barra .tdk-conclusao-estado { padding: var(--tdk-sp-1) var(--tdk-sp-3); font-size: 12px; }

/* O vídeo cresce até encostar (09/10/2026), SEMPRE em 16:9 exato. A caixa é a maior
   16:9 que cabe na área livre — limitada pela largura ou pela altura, a que encostar
   primeiro — e fica centralizada. Não corta nem deforma: a primeira versão deixava o
   quadro tomar a área toda, e a capa do YouTube era recortada para preencher. Os 55px
   são a faixa de controles embaixo do vídeo. Acima de 620px; no celular, 16:9 na
   largura, como antes. */
@media (min-width: 621px) {
  .tdk-aula-conteudo > .tdk-player {
    width: min(100%, calc((var(--tdk-palco-altura) - 55px) * 16 / 9));
    margin-inline: auto;
    margin-bottom: 0;
  }
}

/* ── "Sobre a aula" (09/10/2026) ─────────────────────────────────────────────
   Uma janela média com o que ficava embaixo do palco: curso, título, autor,
   descrição e as dicas de uso. O botão é só o ícone, quadrado, na barra. */
.tdk-foco-info { width: 32px; padding-inline: 0; justify-content: center; }

.tdk-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 640px);
  padding: 0;
  border: 1px solid var(--tdk-border-hi);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface);
  color: var(--tdk-text);
  box-shadow: var(--tdk-shadow-lg);
}
.tdk-modal::backdrop { background: rgba(5, 7, 10, 0.62); backdrop-filter: blur(2px); }
.tdk-modal[open] { animation: tdk-modal-entra 140ms ease-out; }
@keyframes tdk-modal-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tdk-modal[open] { animation: none; } }

.tdk-modal-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--tdk-sp-4);
  padding: var(--tdk-sp-5) var(--tdk-sp-6) var(--tdk-sp-4);
  border-bottom: 1px solid var(--tdk-border);
}
.tdk-modal-topo form { margin: 0; }
.tdk-modal-titulo { margin: var(--tdk-sp-2) 0 var(--tdk-sp-2); font-size: 20px; font-weight: var(--tdk-fw-semi); line-height: 1.25; }
.tdk-modal-fechar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-pill);
  background: none;
  color: var(--tdk-text-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.tdk-modal-fechar:hover { color: var(--tdk-text); border-color: var(--tdk-border-hi); }
.tdk-modal-fechar:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: 2px; }
.tdk-modal-corpo { padding: var(--tdk-sp-5) var(--tdk-sp-6) var(--tdk-sp-6); display: flex; flex-direction: column; gap: var(--tdk-sp-5); }
.tdk-modal-corpo .tdk-aula-descricao { margin: 0; line-height: 1.6; }
.tdk-modal-dica { display: flex; flex-direction: column; gap: var(--tdk-sp-2); padding-top: var(--tdk-sp-4); border-top: 1px solid var(--tdk-border); }
.tdk-modal-dica .tdk-campo-ajuda { margin: 0; line-height: 1.55; }

/* ── O aviso dos 70% (09/10/2026) ─────────────────────────────────────────── */
.tdk-modal--aviso { width: min(480px, calc(100vw - 32px)); }
.tdk-modal--aviso .tdk-modal-corpo { padding-top: var(--tdk-sp-6); gap: var(--tdk-sp-3); }
.tdk-modal--aviso .tdk-modal-titulo { margin: 0; }
.tdk-modal--aviso p { margin: 0; line-height: 1.55; color: var(--tdk-text-2); }
.tdk-aviso-contagem { font-size: 15px; }
.tdk-aviso-contagem strong { font-family: var(--tdk-font-mono); font-size: 22px; color: var(--tdk-accent); }
.tdk-modal-acoes { display: flex; justify-content: flex-end; gap: var(--tdk-sp-2); margin-top: var(--tdk-sp-2); }
.tdk-modal-acoes form { margin: 0; }
/* As duas faces do aviso alternam por `hidden`; o `display: flex` do corpo venceria o
   atributo e mostraria as duas ao mesmo tempo — medido no laboratório. */
.tdk-modal-corpo[hidden] { display: none; }
/* As telas que ficaram para trás: botões pequenos, um por tela, que levam até ela. */
.tdk-aviso-telas { display: flex; flex-direction: column; gap: var(--tdk-sp-2); }
.tdk-aviso-telas[hidden] { display: none; }
.tdk-aviso-telas-rotulo { font-size: 13px; color: var(--tdk-text-3); }
.tdk-aviso-telas-lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tdk-sp-2); }
.tdk-aviso-tela {
    min-width: 32px; height: 32px; padding: 0 var(--tdk-sp-2);
    border: 1px solid var(--tdk-border); border-radius: var(--tdk-radius-sm);
    background: transparent; color: var(--tdk-text);
    font: 500 13px/1 var(--tdk-font-mono); cursor: pointer;
}
.tdk-aviso-tela:hover { border-color: var(--tdk-accent); color: var(--tdk-accent); }
.tdk-aviso-tela:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: 2px; }

/* ── Relatórios › Empresa (ticket 53) ─────────────────────────────────────── */
.tdk-emp-meus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--tdk-sp-4);
}
.tdk-emp-meu { display: flex; flex-direction: column; gap: var(--tdk-sp-4); margin: 0; }
.tdk-emp-meu-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tdk-sp-3); }
.tdk-emp-meu-topo h3 { margin: 0; font-size: 18px; font-weight: var(--tdk-fw-semi); }
.tdk-emp-meu-topo .tdk-res-mono { font-size: 12px; white-space: nowrap; }
.tdk-emp-meu-obrigatorias { display: flex; flex-direction: column; gap: var(--tdk-sp-2); }
.tdk-emp-meu-obrigatorias .tdk-res-linha-topo { font-size: 12.5px; color: var(--tdk-text-2); }
.tdk-emp-meu-obrigatorias .tdk-res-linha-topo > :first-child { font-weight: var(--tdk-fw-normal); }
.tdk-emp-meu .tdk-res-cartao-dados { margin: 0; }
.tdk-emp-meu > a { font-size: 13px; align-self: flex-start; }

/* A média da empresa: um traço sobre a barra do setor. */
.tdk-emp-regua { position: relative; }
.tdk-emp-media {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  background: var(--tdk-text);
  border-radius: 1px;
}

.tdk-emp-tabela tbody tr.is-seu { background: var(--tdk-accent-soft); }
.tdk-emp-seu {
  display: inline-block;
  margin-left: var(--tdk-sp-2);
  padding: 2px var(--tdk-sp-2);
  border: 1px solid var(--tdk-accent);
  border-radius: var(--tdk-radius-pill);
  color: var(--tdk-accent);
  font-family: var(--tdk-font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.tdk-emp-cumprimento { min-width: 200px; }
.tdk-emp-cumprimento-linha { display: flex; align-items: center; gap: var(--tdk-sp-3); }
.tdk-emp-cumprimento .tdk-res-barra { flex: 1 1 auto; }
.tdk-emp-cumprimento .tdk-res-mono { width: 40px; text-align: right; font-size: 12.5px; }
.tdk-emp-rodape { margin-top: var(--tdk-sp-3); }

/* ── Relatórios: o desenho que o movimento pede (ticket 54) ───────────────────
   O movimento está em movimento.css; aqui fica o que é forma e precisa existir
   também sem ele: a lista que agrupa as linhas para a cascata, o ponto do atraso
   ao lado do texto, a caixa de busca de Pessoas e o rótulo da média da empresa. */
.tdk-res-lista { display: flex; flex-direction: column; gap: var(--tdk-sp-4); }
.tdk-res-lista--junta { gap: var(--tdk-sp-2); }

/* O ponto fica na altura da primeira linha: quando o texto quebra ("pessoa com
   prazo vencido, / hoje"), centralizado ele cairia entre as duas. */
.tdk-res-pulso { display: inline-flex; align-items: flex-start; gap: var(--tdk-sp-2); }
.tdk-res-pulso > .tdk-pulso-vivo { margin-top: calc(0.5lh - 3px); }
.tdk-res-grupo-resumo.tdk-res-pulso { justify-content: flex-end; }

/* O botão da planilha muda de texto enquanto trabalha ("Gerando planilha…", R4):
   largura fixa, para o seletor de período ao lado não andar junto. */
.tdk-btn[data-planilha] { min-width: 180px; justify-content: center; }

/* A nota embaixo de uma tabela não encosta nela (medido em 09/10/2026: 0px). */
.tdk-res :is(.tdk-tabela-rola, .tdk-res-cartoes) + .tdk-res-nota { margin-top: var(--tdk-sp-3); }

/* A coluna do "Abrir →" da tabela de cursos: só a largura do que ela mostra. */
.tdk-res-abrir-celula { width: 1%; white-space: nowrap; text-align: right; }

/* O topo da lista de Pessoas: o título e a busca na mesma linha. */
.tdk-res-lista-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tdk-sp-3);
  margin-bottom: var(--tdk-sp-4);
}
.tdk-res-lista-topo .tdk-card-titulo { margin: 0; }

.tdk-res-busca { position: relative; display: flex; align-items: center; width: min(280px, 100%); }
.tdk-res-busca[hidden] { display: none; }
.tdk-res-busca svg {
  position: absolute;
  left: var(--tdk-sp-3);
  width: 16px;
  height: 16px;
  color: var(--tdk-text-3);
  pointer-events: none;
}
.tdk-res-busca input {
  width: 100%;
  height: 36px;
  padding: 0 var(--tdk-sp-3) 0 36px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius);
  background: var(--tdk-bg-2);
  color: var(--tdk-text);
  font: inherit;
  font-size: var(--tdk-fs-sm);
  outline: none;
  transition: border-color var(--tdk-trans), box-shadow 0.25s ease;
}
.tdk-res-busca input:hover { border-color: var(--tdk-border-hi); }
.tdk-res-busca input:focus { border-color: var(--tdk-accent); box-shadow: 0 0 0 3px rgba(90, 181, 255, 0.16); }
.tdk-res-busca-vazio { padding-top: var(--tdk-sp-2); }
.tdk-res-busca-vazio[hidden] { display: none; }

/* A média da empresa ganha o próprio rótulo em cima do traço (R10). O espaço acima
   da régua é o do rótulo: 20px dele e 4px de folga. */
.tdk-emp-regua { margin-top: var(--tdk-sp-6); }
.tdk-emp-media-rotulo {
  position: absolute;
  bottom: calc(100% + var(--tdk-sp-1));
  transform: translateX(-50%);
  padding: 2px var(--tdk-sp-2);
  border: 1px solid var(--tdk-border-hi);
  border-radius: 6px;
  background: var(--tdk-surface-2);
  color: var(--tdk-text);
  font-family: var(--tdk-font-mono);
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
  pointer-events: none;
}
/* O cartão inteiro leva ao detalhe (E1); o link esticado herdaria a cor do texto. */
.tdk-emp-meu > a.tdk-link-esticado { color: var(--tdk-accent); }

/* A linha do seu setor no ranking: a régua azul à esquerda, além do fundo. */
.tdk-emp-tabela tbody tr.is-seu > :first-child { box-shadow: inset 3px 0 0 var(--tdk-accent); }

/* ── Relatórios na grade de 4 pt (09/10/2026) ─────────────────────────────────
   Medido nas quatro telas. O que é dos relatórios foi corrigido na própria regra;
   aqui fica o que vem de componente do sistema e, nos relatórios, aparece lado a
   lado com outro de altura diferente: o seletor de período (36,4px) ao lado do
   "Exportar planilha" (39px) desalinhava o topo dos dois. Nos relatórios os dois
   medem 40, e o rótulo fica a 8 do campo. O cabeçalho das tabelas media 41,45. */

/* Pessoas: os números encostavam no cartão do recorte (0px, medido). */
.tdk-res-gente-numeros { margin-top: var(--tdk-sp-6); }

/* ── Página do curso (ticket 56) ──────────────────────────────────────────────
   Progresso e prova lado a lado na tela grande: um ao lado do outro eles cabem numa
   faixa só, e a lista do curso sobe. O botão da prova assenta no pé do cartão, na
   mesma linha de base do outro cartão. */
.tdk-curso-resumo { display: grid; gap: var(--tdk-sp-4); margin-bottom: var(--tdk-sp-6); }
.tdk-curso-resumo > .tdk-card { display: flex; flex-direction: column; margin: 0; }
.tdk-curso-resumo .tdk-form-acoes { margin-top: auto; padding-top: var(--tdk-sp-5); }
/* Lado a lado, a barra do progresso desce para o pé do cartão: o vazio fica entre o
   número e a barra, e a barra alinha com o botão da prova. */
@media (min-width: 1100px) {
  .tdk-curso-resumo.tem-prova > .tdk-card > .tdk-progresso { margin-top: auto; }
}
@media (min-width: 1100px) {
  .tdk-curso-resumo.tem-prova { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* A nota da ordem das aulas é da lista: fica perto dela, e não no meio do caminho. */
.tdk-ordem-das-aulas + :is(.tdk-capitulos, .tdk-card) { margin-top: var(--tdk-sp-3); }

/* A sanfona dos capítulos: a seta diz que abre, e gira quando está aberto. */
.tdk-capitulo-seta {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--tdk-text-3);
}
.tdk-capitulo-topo:hover .tdk-capitulo-seta { color: var(--tdk-text); }
.tdk-capitulo[open] .tdk-capitulo-seta { transform: rotate(180deg); }

/* ── Desistir (ticket 58) ─────────────────────────────────────────────────────
   No canto do cartão, apagado: está lá para quem procura, e não convida ninguém. O
   vermelho só aparece sob o mouse, e a confirmação vem numa janela. */
.tdk-desistir { margin-left: auto; color: var(--tdk-text-3); }
.tdk-desistir[hidden] { display: none; }
.tdk-btn.tdk-desistir:hover { color: var(--tdk-danger); background: var(--tdk-danger-soft); }

/* ============================================================================
   19. O CELULAR (ticket 59)
   ----------------------------------------------------------------------------
   Planejamento mobile aprovado em 10/10/2026, no canvas do movimento. Até 880px o
   app deixa de ser "o site menor" e vira app: sem sidebar, topo de 52, quatro abas
   e "Mais" embaixo, no alcance do polegar.

   Antes, a sidebar virava uma fila de ícones sem nome no alto, a busca descia para
   uma segunda linha, e o conteúdo começava a 215px do topo.

   Áreas seguras: o `viewport-fit=cover` do layout leva a página até a borda; o
   entalhe e a barra de gestos entram aqui, como margem, pelo `env()`.
   ============================================================================ */

/* Fora do celular, nada disto existe. */
.tdk-topo-marca,
.tdk-topo-titulo,
.tdk-topo-avatar,
.tdk-navbaixo { display: none; }

.tdk-sino-icone { width: 16px; height: 16px; }

@media (max-width: 880px) {
  body { -webkit-tap-highlight-color: transparent; }

  .tdk-shell { --tdk-topo-h: calc(52px + env(safe-area-inset-top)); }
  .tdk-sidebar { display: none; }

  /* ── M2: o topo de 52 ──────────────────────────────────────────────────── */
  .tdk-topbar {
    height: var(--tdk-topo-h);
    gap: var(--tdk-sp-1);
    padding: env(safe-area-inset-top) calc(var(--tdk-sp-2) + env(safe-area-inset-right)) 0 calc(var(--tdk-sp-4) + env(safe-area-inset-left));
    border-bottom-color: transparent;
    background: rgba(11, 13, 16, 0.86);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: border-color 0.25s ease;
  }
  .tdk-topbar.is-rolado { border-bottom-color: var(--tdk-border); }

  .tdk-topo-marca { display: inline-flex; flex: none; align-items: center; height: 44px; }
  .tdk-topo-marca img { display: block; width: auto; height: 22px; }

  /* O nome da tela aparece quando o título da página já subiu. */
  .tdk-topo-titulo {
    display: block;
    flex: 1;
    min-width: 0;
    margin-left: var(--tdk-sp-2);
    font-size: 16px;
    font-weight: var(--tdk-fw-semi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.25s var(--tdk-saida, ease);
  }
  .tdk-topbar.is-rolado .tdk-topo-titulo { opacity: 1; transform: none; }

  .tdk-topbar-acoes { width: auto; margin-left: auto; gap: 0; }
  /* No celular o campo da busca tomaria uma linha: no lugar dele, a lupa, que leva à
     página da busca (ticket 73). O menu da pessoa vira a folha "Mais", aberta pelo avatar. */
  .tdk-busca,
  .tdk-pessoal { display: none; }

  .tdk-sino {
    width: 44px;
    height: 44px;
    border-color: transparent;
    background: none;
    border-radius: var(--tdk-radius-md);
  }
  .tdk-sino-icone { width: 22px; height: 22px; }
  .tdk-sino-ponto { top: 4px; right: 4px; }
  /* Preso à direita do sino, o painel de 380px sairia pela esquerda da tela. */
  .tdk-sino-painel {
    position: fixed;
    top: calc(var(--tdk-topo-h) + var(--tdk-sp-2));
    left: calc(var(--tdk-sp-3) + env(safe-area-inset-left));
    right: calc(var(--tdk-sp-3) + env(safe-area-inset-right));
    width: auto;
  }

  .tdk-topo-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--tdk-radius-md);
  }

  /* O conteúdo nunca fica embaixo das abas, nem do entalhe deitado. */
  .tdk-main {
    padding:
      var(--tdk-sp-2)
      calc(var(--tdk-sp-4) + env(safe-area-inset-right))
      calc(96px + env(safe-area-inset-bottom))
      calc(var(--tdk-sp-4) + env(safe-area-inset-left));
  }

  /* ── M1: as abas embaixo ───────────────────────────────────────────────── */
  .tdk-navbaixo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding:
      var(--tdk-sp-1)
      calc(var(--tdk-sp-2) + env(safe-area-inset-right))
      max(var(--tdk-sp-2), env(safe-area-inset-bottom))
      calc(var(--tdk-sp-2) + env(safe-area-inset-left));
    border-top: 1px solid var(--tdk-border);
    background: rgba(14, 17, 22, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .tdk-navbaixo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tdk-sp-1);
    min-width: 0;
    min-height: 52px;
    color: var(--tdk-text-3);
    font-size: 11px;
    font-weight: var(--tdk-fw-medium);
    line-height: 1;
    white-space: nowrap;
    transition: color 0.2s ease;
  }
  .tdk-navbaixo-icone {
    display: grid;
    place-items: center;
    width: 56px;
    height: 28px;
    border-radius: 14px;
    transition: background 0.25s ease, transform 0.2s var(--tdk-saida, ease);
  }
  .tdk-navbaixo-icone svg { width: 22px; height: 22px; }
  .tdk-navbaixo-item.is-ativo { color: var(--tdk-text); }
  .tdk-navbaixo-item.is-ativo .tdk-navbaixo-icone { background: rgba(90, 181, 255, 0.16); color: var(--tdk-accent); }
  .tdk-navbaixo-item:active .tdk-navbaixo-icone { transform: scale(0.9); }

  /* ── M5: medidas de toque ──────────────────────────────────────────────── */
  /* Botão de 48 e o pequeno de 44: nenhum alvo abaixo de 44 no celular. O campo
     tem fonte de 16 — abaixo disso o iPhone dá zoom na página ao tocar nele. */
  .tdk-btn { min-height: 48px; }
  .tdk-btn--pequeno { min-height: 44px; }
  .tdk-campo-controle { min-height: 48px; font-size: 16px; }

  /* ── M12: o toque afunda o que foi tocado ──────────────────────────────── */
  .tdk-btn:active { transform: scale(0.97); }

  /* ── M8: toda janela sobe de baixo ─────────────────────────────────────── */
  .tdk-modal {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 86dvh;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
    overscroll-behavior: contain;
  }
  /* O puxador: diz que a folha desce com o dedo. */
  .tdk-modal::before {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    margin: var(--tdk-sp-2) auto 0;
    border-radius: 3px;
    background: var(--tdk-border-hi);
  }
  .tdk-modal[open] { animation: tdk-folha-sobe 0.38s var(--tdk-saida, ease-out); }
  .tdk-modal-fechar { width: 44px; height: 44px; font-size: 22px; }
  /* Na folha, as ações empilham na largura toda, a principal em cima. */
  .tdk-modal-acoes { flex-direction: column-reverse; align-items: stretch; }
  .tdk-modal-acoes > *,
  .tdk-modal-acoes form .tdk-btn { width: 100%; }

  /* ── M3: a folha "Mais" ────────────────────────────────────────────────── */
  .tdk-folha { padding: 0 var(--tdk-sp-4) max(var(--tdk-sp-6), env(safe-area-inset-bottom)); }
  .tdk-folha-quem { display: flex; align-items: center; gap: var(--tdk-sp-3); padding: var(--tdk-sp-4) 0 var(--tdk-sp-2); }
  .tdk-folha-quem-texto { flex: 1; min-width: 0; }
  .tdk-folha-quem form { margin: 0; }
  .tdk-folha-nome { margin: 0; font-size: 16px; font-weight: var(--tdk-fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tdk-folha-papel { margin: var(--tdk-sp-1) 0 0; color: var(--tdk-text-3); font-size: 13px; }
  .tdk-folha-grupo {
    margin: var(--tdk-sp-4) var(--tdk-sp-3) var(--tdk-sp-1);
    font-family: var(--tdk-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tdk-text-3);
  }
  .tdk-folha-lista { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--tdk-sp-2)); }
  .tdk-folha-sair { margin: var(--tdk-sp-2) calc(-1 * var(--tdk-sp-2)) 0; }
  .tdk-folha-item {
    display: flex;
    align-items: center;
    gap: var(--tdk-sp-4);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--tdk-sp-3);
    border: 0;
    border-radius: var(--tdk-radius-md);
    background: none;
    color: var(--tdk-text);
    font: inherit;
    font-size: 16px;
    font-weight: var(--tdk-fw-medium);
    text-align: left;
  }
  .tdk-folha-item svg { flex: none; width: 22px; height: 22px; color: var(--tdk-text-2); }
  .tdk-folha-item:active,
  .tdk-folha-item[aria-current="page"] { background: var(--tdk-surface-2); }
  .tdk-folha-item[aria-current="page"] svg { color: var(--tdk-accent); }
  .tdk-folha-item small { margin-left: auto; color: var(--tdk-text-3); font-family: var(--tdk-font-mono); font-size: 11px; }
  .tdk-folha-item.is-inerte { color: var(--tdk-text-3); }
  .tdk-folha-item--sair,
  .tdk-folha-item--sair svg { color: var(--tdk-danger); }
}

@keyframes tdk-folha-sobe { from { transform: translateY(100%); } }

@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .tdk-modal[open] { animation: none; }
  .tdk-btn:active,
  .tdk-navbaixo-item:active .tdk-navbaixo-icone { transform: none; }
  .tdk-topo-titulo { transition: none; }
}

/* ── Ticket 60: Início, Trilha, Curso e Entrar no celular ─────────────────────
   As pranchetas do canvas, bloco a bloco. Os utilitários `tdk-so-celular` e
   `tdk-so-computador` dizem o que cada largura mostra; acima de 880px, as telas são
   as de antes. */
.tdk-so-celular,
.tdk-topo-voltar { display: none; }

@media (max-width: 880px) {
  :root { --tdk-navbaixo-h: calc(57px + max(var(--tdk-sp-2), env(safe-area-inset-bottom))); }

  /* `!important` só aqui: é um utilitário, e tem de vencer regras de dois seletores
     (`.tdk-trilha-meta li` mostrava o item escondido). */
  .tdk-so-computador { display: none !important; }
  .tdk-so-celular { display: revert; }

  /* A seta de voltar das telas de dentro, no lugar da marca (M2). */
  .tdk-topo-voltar {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: calc(-1 * var(--tdk-sp-3));
    border-radius: var(--tdk-radius-md);
    color: var(--tdk-text);
  }
  .tdk-topo-voltar svg { width: 24px; height: 24px; }

  /* ── M4: a ação principal presa em cima das abas ─────────────────────────── */
  /* Com `.tdk-main` na frente: o movimento.css vem depois deste arquivo e devolve
     `position: relative` e a sombra à caixa do feixe, que é esta mesma. */
  .tdk-main .tdk-acao-presa {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--tdk-navbaixo-h);
    z-index: 25;
    display: block;
    padding: var(--tdk-sp-4) calc(var(--tdk-sp-4) + env(safe-area-inset-right)) var(--tdk-sp-3) calc(var(--tdk-sp-4) + env(safe-area-inset-left));
    border-radius: 0;
    background: linear-gradient(to top, var(--tdk-bg) 64%, rgba(11, 13, 16, 0));
    box-shadow: none;
  }
  /* Preso, o feixe virava um anel na largura toda: sai. */
  .tdk-main .tdk-acao-presa > .tdk-feixe { display: none; }
  .tdk-main .tdk-acao-presa .tdk-btn { width: 100%; }
  /* O fim da página não fica embaixo da ação presa. */
  .tdk-main:has(.tdk-acao-presa) { padding-bottom: calc(96px + 76px + env(safe-area-inset-bottom)); }

  /* ── M9: três linhas e "Ler mais" ───────────────────────────────────────── */
  [data-ler-mais].is-curta {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tdk-ler-mais {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tdk-accent);
    font: inherit;
    font-size: 14px;
    font-weight: var(--tdk-fw-medium);
    cursor: pointer;
  }

  /* ── Início ──────────────────────────────────────────────────────────────── */
  /* O título é só a saudação; a frase do certificado vira subtítulo. Antes ela era
     um título de cinco linhas. */
  .tdk-saudacao-titulo { font-size: 28px; line-height: 1.15; }
  /* A frase, e não as palavras: o movimento.js põe cada palavra num span com classe. */
  .tdk-saudacao-titulo > span:not([class]) {
    display: block;
    margin-top: var(--tdk-sp-2);
    font-size: 15px;
    font-weight: var(--tdk-fw-normal);
    line-height: 1.5;
    letter-spacing: 0;
  }
  /* Os dois números lado a lado; a explicação de cada um fica para a tela grande. */
  .tdk-painel-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tdk-sp-3); margin-bottom: var(--tdk-sp-6); align-items: stretch; }
  .tdk-painel-topo > .tdk-retomar { grid-column: 1 / -1; }
  .tdk-painel-topo > .tdk-card:not(.tdk-retomar) > p.tdk-campo-ajuda { display: none; }
  .tdk-painel-topo .tdk-numero { font-size: 28px; }
  .tdk-retomar .tdk-acoes-linha > .tdk-btn:first-child { flex: 1; }
  .tdk-secao-linha { align-items: center; }
  .tdk-secao-linha .tdk-link-seta { display: inline-flex; align-items: center; min-height: 44px; }

  /* ── Trilha ──────────────────────────────────────────────────────────────── */
  /* Os selos sobem para cima do nome, e o nome fica com a largura toda. */
  .tdk-trilha-titulo { gap: var(--tdk-sp-2); font-size: 28px; line-height: 1.15; }
  .tdk-trilha-titulo > .tdk-selo { order: -1; }
  .tdk-trilha-titulo > [data-revela] { flex-basis: 100%; }
  .tdk-trilha-sub { font-size: 15px; line-height: 1.5; }
  /* Curso, módulos, aulas e horas numa linha de texto (M9): não são botões. */
  .tdk-trilha-meta { gap: var(--tdk-sp-1) var(--tdk-sp-3); margin-top: var(--tdk-sp-3); }
  /* Com a ação presa, a fila de ações fica vazia no fluxo: sem a margem dela. */
  .tdk-trilha-acoes:has(> .tdk-acao-presa) { margin-top: 0; }
  .tdk-trilha-tira { margin: var(--tdk-sp-6) 0; }
  /* Na linha do curso, o botão era o mesmo da ação presa; a linha inteira abre. */
  .tdk-curso-acao { display: none; }
  .tdk-curso-linha { min-height: 64px; }

  /* ── Curso ───────────────────────────────────────────────────────────────── */
  /* Progresso e prova num cartão só (M7): os dois emendados, com um fio entre eles. */
  .tdk-curso-resumo.tem-prova { gap: 0; }
  .tdk-curso-resumo.tem-prova > .tdk-card:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .tdk-curso-resumo > .tdk-card--prova {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    column-gap: var(--tdk-sp-3);
    row-gap: var(--tdk-sp-1);
    align-items: center;
    padding-block: var(--tdk-sp-4);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .tdk-curso-resumo > .tdk-card--prova::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--tdk-sp-4);
    right: var(--tdk-sp-4);
    border-top: 1px solid var(--tdk-border);
  }
  .tdk-card--prova > * { grid-column: 2; margin: 0; }
  .tdk-card--prova > .tdk-card-titulo { font-size: 15px; }
  .tdk-card--prova > .tdk-selo { justify-self: start; }
  .tdk-prova-marca {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--tdk-radius);
    background: var(--tdk-surface-3);
    color: var(--tdk-text-2);
  }
  .tdk-prova-marca svg { width: 18px; height: 18px; }
  /* A seta da linha. */
  .tdk-card--prova::after {
    content: "";
    grid-column: 3;
    grid-row: 1 / span 3;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--tdk-text-3);
    border-right: 2px solid var(--tdk-text-3);
    transform: rotate(45deg);
  }
  /* O botão continua sendo o botão, com o aviso da prova (ticket 56) e tudo: só
     passa a cobrir o cartão inteiro, sem desenho. */
  .tdk-card--prova > .tdk-form-acoes { position: static; padding: 0; }
  .tdk-card--prova .tdk-form-acoes .tdk-btn {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0 0 var(--tdk-radius-md) var(--tdk-radius-md);
    background: none;
    color: transparent;
    font-size: 0;
    box-shadow: none;
  }
  .tdk-card--prova .tdk-form-acoes .tdk-btn > * { display: none; }
  .tdk-card--prova:has(.tdk-btn:focus-visible) { outline: 2px solid var(--tdk-accent); outline-offset: 2px; }
  .tdk-card--prova:has(.tdk-btn:active) { background: var(--tdk-surface-2); }

  /* O tipo da aula vira ícone, e o título fica com a largura toda (M7). */
  .tdk-lista-aulas .tdk-celula-sub,
  .tdk-lista-aulas-acao { display: none; }
  .tdk-lista-aulas a,
  .tdk-lista-aulas-item { min-height: 56px; }
  .tdk-lista-aulas-tipo {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--tdk-radius-sm);
    background: var(--tdk-surface-3);
    color: var(--tdk-text-3);
  }
  .tdk-lista-aulas-tipo svg { width: 14px; height: 14px; }

  /* ── Entrar ──────────────────────────────────────────────────────────────── */
  .tdk-entrada-form {
    padding:
      calc(var(--tdk-sp-8) + env(safe-area-inset-top))
      calc(var(--tdk-sp-6) + env(safe-area-inset-right))
      calc(var(--tdk-sp-8) + env(safe-area-inset-bottom))
      calc(var(--tdk-sp-6) + env(safe-area-inset-left));
  }
  .tdk-entrada-campos .tdk-campo-controle { min-height: 52px; }
  /* A linha inteira de "Manter conectado" é o toque, com 44 de altura. */
  .tdk-entrada-lembrar { min-height: 44px; }
  .tdk-entrada-lembrar input { inset: 0; width: 100%; height: 100%; }
  .tdk-caixinha { width: 20px; height: 20px; }
  .tdk-entrada-linha a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============================================================================
   20. A AULA DEITADA NO CELULAR (ticket 61)
   ----------------------------------------------------------------------------
   Pedido do usuário em 10/10/2026: a aula é SEMPRE horizontal no celular, em tela
   cheia ou não, e já entra deitada. Aprovado no canvas como M6.

   O iPhone não deixa site nenhum girar a tela. Então o deitar é daqui, do CSS:
   - celular EM PÉ: a página inteira vem girada 90° — a pessoa só vira o aparelho, e
     funciona até com a rotação automática desligada;
   - celular DEITADO: é a própria tela, sem giro.
   O aula-foco.js acrescenta, no Android, a tela cheia com a trava deitada no
   primeiro toque. "Celular" aqui é toque (`pointer: coarse`) e tela pequena: tablet
   e janela estreita de computador ficam com a aula de antes.

   As duas formas usam o mesmo desenho, com as medidas da tela deitada em variáveis:
   `--d-larg` e `--d-alt` (o tamanho deitado), `--d-esq`, `--d-dir` e `--d-baixo`
   (as áreas seguras, que trocam de lado quando a página está girada).

   O desenho, da prancheta "Aula deitada": o deck à esquerda, sem nada do app por
   cima; à direita, um trilho com Sair no alto e Conteúdo, Sobre e Próxima embaixo.
   ============================================================================ */

.tdk-foco-voltar-x,
.tdk-vire,
.tdk-sobre-extras,
.tdk-veu-da-aula,
.tdk-recado-da-aula { display: none; }

/* Em pé: a página gira, e a tela deitada tem a altura do celular como largura. */
@media (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  body.tdk-foco--aula {
    --d-larg: 100dvh;
    --d-alt: 100vw;
    --d-esq: env(safe-area-inset-top);
    --d-dir: env(safe-area-inset-bottom);
    --d-baixo: 0px;
    --d-giro: rotate(90deg);
    transform-origin: top left;
    transform: translateX(100vw) rotate(90deg);
  }
  /* O aviso de virar fica em pé: desfaz o giro do corpo. */
  body.tdk-foco--aula .tdk-vire { display: flex; }
}

@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  body.tdk-foco--aula {
    --d-larg: 100vw;
    --d-alt: 100dvh;
    --d-esq: env(safe-area-inset-left);
    --d-dir: env(safe-area-inset-right);
    --d-baixo: env(safe-area-inset-bottom);
    --d-giro: rotate(0deg);
  }
}

@media (pointer: coarse) and (max-width: 600px) and (orientation: portrait),
       (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  html:has(> body.tdk-foco--aula) { overflow: hidden; }

  body.tdk-foco--aula {
    --d-trilho: 96px;
    /* O meio do palco, para o nome da aula e o recado ficarem centrados nele. */
    --d-meio: calc((var(--d-larg) - var(--d-trilho) - var(--d-dir) + var(--d-esq)) / 2);
    position: fixed;
    top: 0;
    left: 0;
    width: var(--d-larg);
    height: var(--d-alt);
    min-height: 0;
    overflow: hidden;
    background: #05070A;
  }

  /* ── O palco: tudo o que sobra à esquerda do trilho ─────────────────────── */
  body.tdk-foco--aula .tdk-foco-corpo {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--d-larg) - var(--d-trilho) - var(--d-dir));
    height: var(--d-alt);
    padding: var(--tdk-sp-2) 0 calc(var(--tdk-sp-2) + var(--d-baixo)) calc(var(--tdk-sp-2) + var(--d-esq));
  }
  body.tdk-foco--aula .tdk-aula-foco { display: block; width: 100%; height: 100%; }
  body.tdk-foco--aula .tdk-aula-conteudo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
  /* O motor do deck encaixa o slide no espaço que recebe (decisão de 09/10/2026):
     o quadro ocupa o palco todo. */
  body.tdk-foco--aula .tdk-deck,
  body.tdk-foco--aula .tdk-leitor {
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    border-radius: var(--tdk-radius-md);
  }
  body.tdk-foco--aula .tdk-leitor iframe { height: 100%; }
  /* O vídeo continua 16:9 exato (09/10/2026: não corta nem deforma): o maior que
     cabe no palco, com os 55px da faixa de controles embaixo dele. */
  body.tdk-foco--aula .tdk-player {
    width: min(100%, calc((var(--d-alt) - var(--tdk-sp-4) - var(--d-baixo) - 55px) * 16 / 9));
    margin: 0;
  }

  /* ── O trilho: a barra de foco vira coluna à direita ────────────────────── */
  body.tdk-foco--aula .tdk-foco-barra {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(var(--d-trilho) + var(--d-dir));
    height: var(--d-alt);
    min-height: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: var(--tdk-sp-3) var(--d-dir) calc(var(--tdk-sp-3) + var(--d-baixo)) 0;
    border: 0;
    background: #05070A;
  }
  body.tdk-foco--aula .tdk-foco-barra-esquerda,
  body.tdk-foco--aula .tdk-foco-barra-direita {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--tdk-sp-3);
  }
  /* Conteúdo, Sobre e Próxima: a ordem da prancheta. */
  body.tdk-foco--aula [data-aula="rail"] { order: 1; }
  body.tdk-foco--aula [data-aula="info"] { order: 2; }
  body.tdk-foco--aula .tdk-foco-acao { order: 3; }
  /* Tela cheia já é o próprio deitar; Materiais e Reportar moram em "Sobre". */
  html.tdk-js body.tdk-foco--aula .tdk-foco-controle[data-aula="tela-cheia"],
  body.tdk-foco--aula .tdk-foco-barra .tdk-foco-extra { display: none; }

  /* Os botões do trilho: círculo de 44 com o nome embaixo — nunca ícone sozinho. */
  html.tdk-js body.tdk-foco--aula .tdk-foco-controle,
  body.tdk-foco--aula .tdk-foco-voltar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tdk-sp-1);
    width: 80px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tdk-text-2);
    font-size: 11px;
    font-weight: var(--tdk-fw-medium);
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  body.tdk-foco--aula .tdk-foco-controle svg,
  body.tdk-foco--aula .tdk-foco-voltar-x {
    display: block;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 12px;
    border: 1px solid var(--tdk-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--tdk-text);
  }
  body.tdk-foco--aula .tdk-foco-controle:active svg,
  body.tdk-foco--aula .tdk-foco-voltar:active .tdk-foco-voltar-x { transform: scale(0.92); }
  body.tdk-foco--aula .tdk-foco-rotulo { display: inline; }
  body.tdk-foco--aula [data-aula="info"]::after { content: "Sobre"; }
  /* "Voltar à trilha" continua sendo o nome do link para o leitor de tela; na tela,
     cabe "Sair". `line-height: 0`: o texto escondido ainda ocupava uma linha. */
  body.tdk-foco--aula .tdk-foco-voltar { font-size: 0; line-height: 0; }
  body.tdk-foco--aula .tdk-foco-voltar::after { content: "Sair"; font-size: 11px; line-height: 1.2; }
  body.tdk-foco--aula .tdk-foco-voltar-seta { display: none; }

  /* ── Próxima ────────────────────────────────────────────────────────────── */
  html.tdk-js body.tdk-foco--aula .tdk-foco-acao {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body.tdk-foco--aula .tdk-foco-acao .tdk-conclusao { flex-direction: column; align-items: center; }
  /* Antes do fim: apagada e tracejada. Tocar nela diz o que falta (aula-foco.js). */
  body.tdk-foco--aula .tdk-foco-acao .tdk-conclusao-estado {
    flex-direction: column;
    gap: var(--tdk-sp-1);
    padding: 0;
    border: 0;
    color: var(--tdk-text-3);
    font-size: 0;
    line-height: 0;
    white-space: normal;
    cursor: pointer;
  }
  body.tdk-foco--aula .tdk-foco-acao .tdk-conclusao-ponto { display: none; }
  body.tdk-foco--aula .tdk-foco-acao .tdk-conclusao-estado::before {
    content: "";
    width: 44px;
    height: 44px;
    border: 1px dashed var(--tdk-border-hi);
    border-radius: 50%;
    opacity: 0.55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B2C0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / 20px no-repeat;
  }
  body.tdk-foco--aula .tdk-foco-acao .tdk-conclusao-estado::after { content: "Próxima"; font-size: 11px; line-height: 1.2; }
  /* Depois do fim: acesa, com o nome de verdade do caminho embaixo. */
  body.tdk-foco--aula .tdk-foco-acao .tdk-btn {
    flex-direction: column-reverse;
    gap: var(--tdk-sp-1);
    width: 80px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--tdk-text);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  body.tdk-foco--aula .tdk-foco-acao .tdk-btn::before { display: none; }
  body.tdk-foco--aula .tdk-foco-acao .tdk-btn::after {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tdk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / 20px no-repeat;
    animation: tdk-aula-chama 1.6s ease-out infinite;
  }
  body.tdk-foco--aula .tdk-foco-acao .tdk-selo { white-space: normal; text-align: center; }

  /* ── O nome da aula: aparece ao entrar e some em 4 s ──────────────────────── */
  body.tdk-foco--aula .tdk-foco-divisor { display: none; }
  body.tdk-foco--aula .tdk-foco-contexto {
    display: block;
    position: fixed;
    top: var(--tdk-sp-4);
    left: var(--d-meio);
    z-index: 5;
    /* Metade da tela: mais largo, cobria o botão "Leitura" do próprio deck. */
    max-width: calc(var(--d-larg) * 0.5);
    padding: var(--tdk-sp-2) var(--tdk-sp-4);
    border: 1px solid var(--tdk-border);
    border-radius: var(--tdk-radius-pill);
    background: rgba(14, 17, 22, 0.86);
    color: var(--tdk-text);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transform: translateX(-50%);
    animation: tdk-aula-nome 4.2s var(--tdk-saida, ease) both;
  }
  /* O aviso que o servidor manda ("as aulas abrem na ordem…") também flutua. */
  body.tdk-foco--aula .tdk-foco-aviso {
    position: fixed;
    top: var(--tdk-sp-3);
    left: var(--d-meio);
    z-index: 6;
    width: min(520px, calc(var(--d-larg) * 0.6));
    padding: 0;
    transform: translateX(-50%);
    animation: tdk-aula-nome 6s var(--tdk-saida, ease) both;
  }

  /* ── A lista das aulas: painel que entra pela direita, do lado do trilho ──── */
  html.tdk-rail-recolhido body.tdk-foco--aula .tdk-aula-rail { display: none; }
  body.tdk-foco--aula .tdk-aula-rail {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 30;
    width: min(400px, calc(var(--d-larg) * 0.62));
    height: var(--d-alt);
    max-height: none;
    padding-right: var(--d-dir);
    padding-bottom: var(--d-baixo);
    border-width: 0 0 0 1px;
    border-color: var(--tdk-border-hi);
    border-radius: 20px 0 0 20px;
    box-shadow: 0 0 60px -10px rgba(0, 0, 0, 0.8);
    animation: tdk-aula-painel 0.35s var(--tdk-saida, ease-out);
  }
  /* A ação do pé do rail é a mesma do trilho: uma só na tela. */
  body.tdk-foco--aula .tdk-rail-acao { display: none; }
  html:not(.tdk-rail-recolhido) body.tdk-foco--aula .tdk-veu-da-aula {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(5, 7, 10, 0.62);
  }

  /* ── O recado de "Próxima" apagada ─────────────────────────────────────── */
  body.tdk-foco--aula .tdk-recado-da-aula:not([hidden]) {
    display: block;
    position: fixed;
    bottom: calc(var(--tdk-sp-6) + var(--d-baixo));
    left: var(--d-meio);
    z-index: 35;
    max-width: calc(var(--d-larg) * 0.6);
    margin: 0;
    padding: var(--tdk-sp-3) var(--tdk-sp-4);
    border: 1px solid var(--tdk-border-hi);
    border-radius: var(--tdk-radius-md);
    background: var(--tdk-surface-2);
    color: var(--tdk-text);
    font-size: 14px;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.8);
    transform: translateX(-50%);
    animation: tdk-aula-recado 0.3s var(--tdk-saida, ease-out);
  }

  /* O "A seguir" do ticket 50 nasce no canto de baixo à direita — em cima do trilho,
     aqui. Ele sobe no meio do palco, só com opacidade: o deslize dele usaria o mesmo
     `transform` que o centraliza. */
  body.tdk-foco--aula .tdk-a-seguir {
    right: auto;
    left: var(--d-meio);
    bottom: calc(var(--tdk-sp-4) + var(--d-baixo));
    width: min(420px, calc(var(--d-larg) * 0.55));
    transform: translateX(-50%);
    animation: tdk-aula-recado 0.45s var(--tdk-saida, ease-out) 0.35s both;
  }

  /* ── As janelas: cartão no meio — deitado, a folha de baixo não cabe ─────── */
  /* Elas moram na camada de cima, fora do corpo girado: o giro vai nelas também. */
  body.tdk-foco--aula .tdk-modal {
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(480px, calc(var(--d-larg) - 48px));
    /* Em pé, os 100% do ticket 59 seriam a largura do celular em pé. */
    max-width: none;
    max-height: calc(var(--d-alt) - 24px);
    margin: 0;
    padding-bottom: 0;
    border-width: 1px;
    border-radius: 20px;
    transform: translate(-50%, -50%) var(--d-giro);
  }
  body.tdk-foco--aula .tdk-modal::before { display: none; }
  body.tdk-foco--aula .tdk-modal[open] { animation: tdk-aula-janela 0.2s ease-out both; }
  body.tdk-foco--aula .tdk-modal-acoes { flex-direction: row; justify-content: flex-end; }
  body.tdk-foco--aula .tdk-modal-acoes > *,
  body.tdk-foco--aula .tdk-modal-acoes form .tdk-btn { width: auto; }
  body.tdk-foco--aula .tdk-sobre-extras { display: flex; flex-wrap: wrap; gap: var(--tdk-sp-2); }
  body.tdk-foco--aula .tdk-sobre-extras form { margin: 0; }

  /* ── Em pé: "Vire o celular", desenhado em pé ─────────────────────────── */
  body.tdk-foco--aula .tdk-vire {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 40;
    flex-direction: column;
    align-items: center;
    gap: var(--tdk-sp-2);
    width: 220px;
    margin: 0;
    padding: var(--tdk-sp-5) var(--tdk-sp-4);
    border: 1px solid var(--tdk-border-hi);
    border-radius: 20px;
    background: rgba(14, 17, 22, 0.94);
    color: var(--tdk-text-2);
    font-size: 13px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) rotate(-90deg);
    animation: tdk-vire-some 4.5s ease forwards;
  }
  body.tdk-foco--aula .tdk-vire strong { color: var(--tdk-text); font-size: 16px; }
  body.tdk-foco--aula .tdk-vire svg { width: 40px; height: 40px; color: var(--tdk-accent); animation: tdk-vire-gira 2.2s var(--tdk-saida, ease) infinite; }
}

@keyframes tdk-aula-chama { 0% { box-shadow: 0 0 0 0 rgba(90, 181, 255, 0.55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(90, 181, 255, 0); } }
@keyframes tdk-aula-nome { 0% { opacity: 0; } 8%, 82% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes tdk-aula-painel { from { transform: translateX(100%); } }
@keyframes tdk-aula-recado { from { opacity: 0; } }
@keyframes tdk-aula-janela { from { opacity: 0; } }
@keyframes tdk-vire-some { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes tdk-vire-gira { 0%, 15% { transform: rotate(0); } 45%, 75% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* Menos movimento: nada desliza nem gira; o nome e o aviso ainda somem, de uma vez. */
@media (prefers-reduced-motion: reduce) {
  body.tdk-foco--aula .tdk-foco-acao .tdk-btn::after,
  body.tdk-foco--aula .tdk-aula-rail,
  body.tdk-foco--aula .tdk-vire svg { animation: none; }
  body.tdk-foco--aula .tdk-foco-contexto,
  body.tdk-foco--aula .tdk-vire { animation-timing-function: step-end; }
}

/* ============================================================================
   21. A PROVA NO CELULAR (ticket 62)
   ----------------------------------------------------------------------------
   M10 do planejamento mobile: o relógio e a contagem sempre à vista no topo (a barra
   de foco já gruda), uma barra fina de segmentos no lugar dos quadradinhos, as
   alternativas como cartões de 64 inteiros de toque, e Anterior, Revisão e Próxima
   presos embaixo, no alcance do polegar. Sem gesto de arrastar entre questões: na
   prova, um deslize sem querer não pode trocar de questão — e não há nenhum.
   ============================================================================ */
.tdk-prova-segmentos { display: none; }

@media (max-width: 880px) {
  /* A volta grava e sai; no celular, com 44 de toque. */
  body.tdk-foco .tdk-foco-voltar { min-height: 44px; }

  /* Os quadradinhos saem; a barra de segmentos mostra o mesmo de relance. */
  .tdk-prova-tira { display: none; }
  .tdk-prova-segmentos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--tdk-sp-1);
    margin: var(--tdk-sp-1) 0 var(--tdk-sp-5);
  }
  .tdk-prova-segmentos i { height: 4px; border-radius: 2px; background: var(--tdk-surface-3); }
  .tdk-prova-segmentos i.is-feita { background: var(--tdk-accent); }
  .tdk-prova-segmentos i.is-atual { background: var(--tdk-text); }

  .tdk-prova-folha .tdk-prova-enunciado { font-size: 20px; line-height: 1.4; }
  .tdk-prova-alternativas { gap: var(--tdk-sp-3); }
  .tdk-alternativa { min-height: 64px; }

  /* Presos embaixo. A fila de ações se desfaz (`contents`) e os três botões viram
     colunas: Anterior, Revisão, e Próxima, a mais larga. */
  .tdk-prova-navegacao {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--tdk-sp-2);
    margin: 0;
    padding:
      var(--tdk-sp-3)
      calc(var(--tdk-sp-4) + env(safe-area-inset-right))
      max(var(--tdk-sp-3), env(safe-area-inset-bottom))
      calc(var(--tdk-sp-4) + env(safe-area-inset-left));
    border-top: 1px solid var(--tdk-border);
    background: rgba(14, 17, 22, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .tdk-prova-navegacao > *,
  .tdk-prova-navegacao .tdk-acoes-linha > * { flex: none; min-width: 0; }
  .tdk-prova-navegacao .tdk-acoes-linha { display: contents; }
  .tdk-prova-navegacao .tdk-btn { width: 100%; padding-inline: var(--tdk-sp-2); }
  .tdk-prova-navegacao .tdk-btn--sutil { border-color: var(--tdk-border-hi); }
  /* Na última questão não há Próxima: "Revisar e enviar" fica com as duas colunas. */
  .tdk-prova-navegacao .tdk-acoes-linha > .tdk-btn:only-child { grid-column: span 2; }
  /* O fim da folha não fica embaixo dos botões presos. */
  .tdk-foco-corpo:has(.tdk-prova-navegacao) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .tdk-prova-teclas { display: none; }

  /* ── A revisão: cada questão numa linha que cabe, e "Enviar" preso ──────── */
  .tdk-revisao { padding-left: 0; }
  .tdk-revisao > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nome nome" "sub botao";
    align-items: center;
    column-gap: var(--tdk-sp-3);
    row-gap: var(--tdk-sp-1);
  }
  .tdk-revisao > li > div { display: contents; }
  .tdk-revisao .tdk-celula-nome { grid-area: nome; }
  .tdk-revisao .tdk-celula-sub { grid-area: sub; }
  .tdk-revisao > li > .tdk-btn { grid-area: botao; }
  .tdk-main .tdk-acao-presa.tdk-form-acoes { display: flex; flex-direction: row-reverse; gap: var(--tdk-sp-2); margin: 0; }
  .tdk-main .tdk-acao-presa.tdk-form-acoes .tdk-btn { width: auto; flex: 1 1 0; min-width: 0; }
}

/* ============================================================================
   22. OS RELATÓRIOS NO CELULAR (ticket 63)
   ----------------------------------------------------------------------------
   M11 do planejamento mobile. Antes, Pessoas rolava a PÁGINA de lado (a tabela
   passava da largura), e as tabelas de um curso e da empresa rolavam dentro de uma
   caixa. Agora: as abas viram um segmento, o período e a planilha numa linha, os
   números num carrossel, e cada linha de tabela vira um cartão. A troca no lugar do
   ticket 54 continua a mesma: é a mesma página, desenhada para a largura.
   ============================================================================ */
@media (max-width: 880px) {
  /* ── Cursos · Pessoas · Empresa num segmento ─────────────────────────────── */
  nav.tdk-abas[aria-label="Relatórios"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--tdk-sp-1);
    padding: var(--tdk-sp-1);
    border: 1px solid var(--tdk-border);
    border-radius: var(--tdk-radius-md);
    background: var(--tdk-surface);
    box-shadow: none;
    overflow: visible;
  }
  nav.tdk-abas[aria-label="Relatórios"] .tdk-aba {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 0 var(--tdk-sp-2);
    border: 0;
    border-radius: var(--tdk-radius);
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
  }
  nav.tdk-abas[aria-label="Relatórios"] .tdk-aba.is-ativa { background: var(--tdk-surface-3); }

  /* ── O período e a planilha numa linha ─────────────────────────────────────
     O seletor de período continua o nativo: no celular, ele abre a escolha do
     próprio sistema, que é a folha de baixo que o planejamento pedia. */
  .tdk-res-controles { flex-wrap: nowrap; width: 100%; gap: var(--tdk-sp-2); }
  .tdk-res-controles .tdk-campo { flex: 1 1 auto; min-width: 0; }
  .tdk-res-controles .tdk-campo-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .tdk-res-controles .tdk-campo-controle { min-height: 44px; border-radius: var(--tdk-radius-pill); }
  .tdk-res-controles .tdk-btn[data-planilha] { flex: none; min-width: 0; min-height: 44px; }
  /* "← Relatórios · cursos", no alto de um curso: 44 de toque. */
  .tdk-res-voltar { display: inline-flex; align-items: center; min-height: 44px; }

  /* ── Os números num carrossel ─────────────────────────────────────────────
     Dois por vez, e o terceiro aparece cortado na borda: é o que diz que há mais. */
  .tdk-res-numeros,
  .tdk-res-gente-numeros .tdk-numeros {
    display: flex;
    gap: var(--tdk-sp-3);
    margin-inline: calc(-1 * var(--tdk-sp-4));
    padding: 0 var(--tdk-sp-4) var(--tdk-sp-1);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--tdk-sp-4);
    scrollbar-width: none;
  }
  .tdk-res-numeros::-webkit-scrollbar,
  .tdk-res-gente-numeros .tdk-numeros::-webkit-scrollbar { display: none; }
  .tdk-res-numeros > *,
  .tdk-res-gente-numeros .tdk-numeros > * { flex: 0 0 44%; margin: 0; scroll-snap-align: start; }

  /* ── Cada linha de tabela vira um cartão ───────────────────────────────── */
  .tdk-tabela-rola:has(> .tdk-tabela-cartoes) {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .tdk-tabela-cartoes,
  .tdk-tabela-cartoes tbody,
  .tdk-tabela-cartoes tr,
  .tdk-tabela-cartoes th,
  .tdk-tabela-cartoes td { display: block; }
  /* O cabeçalho sai; cada célula diz o que é pelo `data-rotulo`. */
  .tdk-tabela-cartoes thead { display: none; }
  .tdk-tabela-cartoes { clip-path: none; }
  .tdk-tabela-cartoes tbody { display: flex; flex-direction: column; gap: var(--tdk-sp-3); }
  .tdk-tabela-cartoes tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--tdk-sp-3) var(--tdk-sp-4);
    padding: var(--tdk-sp-4);
    border: 1px solid var(--tdk-border);
    border-radius: var(--tdk-radius-md);
    background: var(--tdk-surface);
  }
  .tdk-tabela-cartoes tr > th[scope="row"] { order: -1; grid-column: 1 / -1; }
  /* `.tdk-tabela` na frente: a regra das colunas de número (alinhadas à direita na
     tabela) tem dois seletores e vencia esta. */
  .tdk-tabela.tdk-tabela-cartoes tr > th,
  .tdk-tabela.tdk-tabela-cartoes tr > td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
  }
  .tdk-tabela-cartoes .tdk-celula-larga,
  .tdk-tabela-cartoes td[colspan] { grid-column: 1 / -1; }
  .tdk-tabela-cartoes td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: var(--tdk-sp-1);
    color: var(--tdk-text-3);
    font-family: var(--tdk-font-mono);
    font-size: 11px;
    font-weight: var(--tdk-fw-normal);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  /* Os setores lado a lado: os seis números em três colunas, e o setor sem ninguém
     numa linha só — eram 22 cartões de sete campos, 9.900px de página. */
  .tdk-emp-tabela.tdk-tabela-cartoes tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tdk-emp-tabela.tdk-tabela-cartoes tr.is-vazio { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tdk-sp-3); padding-block: var(--tdk-sp-3); }
  .tdk-emp-tabela.tdk-tabela-cartoes tr.is-vazio > td:not(.tdk-emp-cumprimento) { display: none; }
  .tdk-emp-tabela.tdk-tabela-cartoes tr.is-vazio > td::before { display: none; }
  /* A linha do seu setor continua marcada, agora pelo cartão. */
  .tdk-tabela-cartoes tr.is-seu { border-color: rgba(90, 181, 255, 0.45); }
  /* O filete da linha do seu setor era da primeira célula da tabela; no cartão, a borda faz isso. */
  .tdk-emp-tabela.tdk-tabela-cartoes tbody tr.is-seu > :first-child { box-shadow: none; }
  .tdk-tabela-cartoes tr.is-parado { border-left: 3px solid var(--tdk-warn); }
  .tdk-tabela-cartoes .tdk-tabela-acoes .tdk-btn { width: 100%; }
}

/* ============================================================================
   23. O APP INSTALADO (ticket 64)
   ----------------------------------------------------------------------------
   O convite para instalar (P3) é uma janela como as outras — no celular, folha de
   baixo (M8). O aviso de versão nova (P5) fica embaixo, em cima das abas, e só
   carrega quando a pessoa toca. Os dois nascem escondidos: quem decide é o
   app-instalado.js.
   ============================================================================ */
.tdk-convite-corpo { display: flex; flex-direction: column; gap: var(--tdk-sp-5); padding: var(--tdk-sp-5) var(--tdk-sp-6) var(--tdk-sp-6); }
.tdk-convite-app { display: flex; align-items: center; gap: var(--tdk-sp-4); }
.tdk-convite-app img {
  flex: none;
  width: 64px;
  height: 64px;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-lg);
  box-shadow: 0 12px 30px -12px rgba(90, 181, 255, 0.5);
}
.tdk-convite-titulo { margin: 0; font-size: 18px; font-weight: var(--tdk-fw-semi); line-height: 1.25; }
.tdk-convite-endereco { margin: var(--tdk-sp-1) 0 0; color: var(--tdk-text-3); font-family: var(--tdk-font-mono); font-size: 12px; }
.tdk-convite-vantagens { display: flex; flex-direction: column; gap: var(--tdk-sp-3); }
.tdk-convite-vantagens li { display: flex; align-items: flex-start; gap: var(--tdk-sp-3); color: var(--tdk-text-2); font-size: 14px; line-height: 1.45; }
.tdk-convite-vantagens svg { flex: none; width: 20px; height: 20px; color: var(--tdk-accent); }
.tdk-convite-acoes { display: flex; flex-direction: column; gap: var(--tdk-sp-2); }
/* Android ou iPhone, um só: o `display: flex` acima vencia o `hidden`, e o iPhone via
   também o botão Instalar, que lá não faz nada. */
.tdk-convite [hidden] { display: none; }
.tdk-convite:focus { outline: none; }
.tdk-convite-acoes .tdk-btn { width: 100%; }
.tdk-convite-iphone {
  margin: 0 0 var(--tdk-sp-3);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface-2);
  color: var(--tdk-text-2);
  font-size: 14px;
  line-height: 1.5;
}
.tdk-convite-iphone strong { color: var(--tdk-text); }

.tdk-versao-nova {
  position: fixed;
  right: var(--tdk-sp-6);
  bottom: var(--tdk-sp-6);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  width: min(380px, calc(100vw - 32px));
  padding: var(--tdk-sp-3) var(--tdk-sp-3) var(--tdk-sp-3) var(--tdk-sp-4);
  border: 1px solid var(--tdk-border-hi);
  border-radius: var(--tdk-radius-lg);
  background: var(--tdk-surface-2);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8);
  animation: tdk-versao-sobe 0.4s var(--tdk-saida, ease-out) both;
}
.tdk-versao-nova[hidden] { display: none; }
.tdk-versao-nova span { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.tdk-versao-nova strong { display: block; }
.tdk-versao-nova small { color: var(--tdk-text-3); }
@keyframes tdk-versao-sobe { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 880px) {
  .tdk-convite-corpo { padding: var(--tdk-sp-4) var(--tdk-sp-4) max(var(--tdk-sp-6), env(safe-area-inset-bottom)); }
  .tdk-versao-nova {
    left: calc(var(--tdk-sp-4) + env(safe-area-inset-left));
    right: calc(var(--tdk-sp-4) + env(safe-area-inset-right));
    bottom: calc(var(--tdk-navbaixo-h) + var(--tdk-sp-3));
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tdk-versao-nova { animation: none; }
}

/* ============================================================================
   24. ARQUIVOS DA AULA (ticket 68)
   ----------------------------------------------------------------------------
   Os PDFs que a aula cita — no curso de Integridade, os documentos do Programa.
   Na barra da aula, um botão amarelo (pedido do usuário, 10/10/2026): é a única
   cor quente da barra, e se acha de relance sem disputar com a ação principal,
   que é azul. Abre uma janela como "Sobre a aula", com a lista para baixar.
   ============================================================================ */
.tdk-foco-arquivos {
  border-color: rgba(242, 184, 30, 0.45);
  background: var(--tdk-gold-soft);
  color: var(--tdk-gold);
}
.tdk-foco-arquivos:hover { border-color: var(--tdk-gold); background: rgba(242, 184, 30, 0.18); color: var(--tdk-gold); }
.tdk-foco-arquivos:focus-visible { outline: 2px solid var(--tdk-gold); outline-offset: 2px; }
.tdk-foco-arquivos-conta {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--tdk-sp-1);
  border-radius: var(--tdk-radius-pill);
  background: var(--tdk-gold);
  color: #0B0D10;
  font-family: var(--tdk-font-mono);
  font-size: 12px;
  line-height: 1;
}

/* A janela: um arquivo por linha, a linha inteira é o link. */
/* Só no computador: no celular a janela é a folha de baixo, da largura toda (M8). */
@media (min-width: 881px) { .tdk-modal--arquivos { width: min(600px, calc(100vw - 32px)); } }
.tdk-arquivos-da-aula { margin: 0; gap: var(--tdk-sp-2); list-style: none; overflow-y: auto; }
.tdk-arquivo {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-4);
  min-height: 56px;
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface-2);
  color: var(--tdk-text);
  text-decoration: none;
  transition: border-color var(--tdk-trans), background var(--tdk-trans);
}
.tdk-arquivo:hover { border-color: rgba(242, 184, 30, 0.55); background: var(--tdk-surface-3); }
.tdk-arquivo:focus-visible { outline: 2px solid var(--tdk-gold); outline-offset: 2px; }
.tdk-arquivo-icone,
.tdk-arquivos-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 48px;
  border: 1px solid rgba(242, 184, 30, 0.35);
  border-radius: var(--tdk-radius);
  background: var(--tdk-gold-soft);
  color: var(--tdk-gold);
  font-family: var(--tdk-font-mono);
  font-size: 11px;
  font-weight: var(--tdk-fw-semi);
  letter-spacing: 0.04em;
}
.tdk-arquivo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--tdk-sp-1); }
.tdk-arquivo-texto strong { font-size: 14px; font-weight: var(--tdk-fw-semi); line-height: 1.35; }
.tdk-arquivo-baixar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  color: var(--tdk-gold);
  font-size: 13px;
  font-weight: var(--tdk-fw-semi);
}
.tdk-arquivo-baixar svg { width: 16px; height: 16px; }

/* Na autoria: a lista dos arquivos do curso, e a contagem na linha da aula. */
.tdk-arquivos-lista { display: flex; flex-direction: column; gap: var(--tdk-sp-2); margin: 0 0 var(--tdk-sp-5); padding: 0; list-style: none; }
.tdk-arquivos-item {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-4);
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface-2);
}
.tdk-arquivos-item form { margin: 0; }
.tdk-arquivos-icone { width: 32px; height: 40px; font-size: 10px; }
.tdk-arquivos-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--tdk-sp-1); }
.tdk-arquivos-titulo { font-weight: var(--tdk-fw-semi); }
.tdk-arquivo-campos { display: flex; flex-direction: column; gap: var(--tdk-sp-5); max-width: 760px; }
.tdk-arquivos-aulas { display: flex; flex-direction: column; gap: var(--tdk-sp-2); margin: 0 0 var(--tdk-sp-4); padding: 0; list-style: none; }
.tdk-arquivos-aulas li { padding-left: var(--tdk-sp-3); border-left: 2px solid rgba(242, 184, 30, 0.55); font-size: var(--tdk-fs-sm); }
/* Na própria linha, abaixo do nome do arquivo da aula: emendado nele, quebrava no meio. */
.tdk-arquivos-contagem { display: flex; align-items: center; gap: var(--tdk-sp-1); width: fit-content; margin-top: var(--tdk-sp-1); color: var(--tdk-gold); }

@media (max-width: 620px) {
  .tdk-arquivo { gap: var(--tdk-sp-3); }
  .tdk-arquivo-baixar { font-size: 0; }
  .tdk-arquivo-baixar svg { width: 20px; height: 20px; }
}

/* Na aula deitada do celular: o quarto botão do trilho, o primeiro do grupo de baixo
   (mesma `order` de Conteúdo, e vem antes dele no HTML), com o círculo amarelo e a
   contagem no canto. "Arquivos" embaixo, como os outros — "Arquivos da aula" não
   cabe em 80px sem quebrar em duas linhas. */
@media (pointer: coarse) and (max-width: 600px) and (orientation: portrait),
       (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  body.tdk-foco--aula [data-aula="arquivos"] { order: 1; position: relative; }
  body.tdk-foco--aula .tdk-foco-arquivos .tdk-foco-rotulo { display: none; }
  body.tdk-foco--aula .tdk-foco-arquivos::after { content: "Arquivos"; color: var(--tdk-gold); }
  body.tdk-foco--aula .tdk-foco-arquivos svg {
    border-color: rgba(242, 184, 30, 0.55);
    background: var(--tdk-gold-soft);
    color: var(--tdk-gold);
  }
  body.tdk-foco--aula .tdk-foco-arquivos-conta {
    position: absolute;
    top: 0;
    right: 12px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
  }
  /* Na janela deitada, uma linha por arquivo, sem a palavra "Baixar". */
  body.tdk-foco--aula .tdk-arquivo-baixar { font-size: 0; }
}

/* Quatro botões e Sair pedem 369px de trilho, e ele tem menos em dois casos comuns:
   o Android de 360px em pé (a altura do trilho é a largura do celular) e o celular
   deitado com a barra do navegador (medido: 340). Só aí, e só quando a aula tem
   arquivos, o trilho aperta — círculos de 38 e vãos de 8 — e cabe em 315. Sem
   arquivos ele continua o da prancheta. */
@media (pointer: coarse) and (max-width: 379px) and (orientation: portrait),
       (pointer: coarse) and (max-height: 379px) and (orientation: landscape) {
  body.tdk-foco--aula:has([data-aula="arquivos"]) .tdk-foco-barra {
    padding-top: var(--tdk-sp-2);
    padding-bottom: calc(var(--tdk-sp-2) + var(--d-baixo));
  }
  body.tdk-foco--aula:has([data-aula="arquivos"]) .tdk-foco-barra-direita { gap: var(--tdk-sp-2); }
  body.tdk-foco--aula:has([data-aula="arquivos"]) .tdk-foco-controle svg,
  body.tdk-foco--aula:has([data-aula="arquivos"]) .tdk-foco-voltar-x { width: 20px; height: 20px; padding: 8px; }
  body.tdk-foco--aula:has([data-aula="arquivos"]) .tdk-foco-acao .tdk-conclusao-estado::before,
  body.tdk-foco--aula:has([data-aula="arquivos"]) .tdk-foco-acao .tdk-btn::after { width: 38px; height: 38px; }
}

/* A biblioteca dos arquivos (ticket 70): a mesma marca amarela dos arquivos da aula, e o
   "Baixar" como botão, como no modelo — a linha inteira baixa, o botão diz o que ela faz. */
.tdk-material-marca--arquivo {
  border-color: rgba(242, 184, 30, 0.35);
  background: var(--tdk-gold-soft);
  color: var(--tdk-gold);
}
.tdk-material-marca--arquivo .tdk-material-tipo { color: var(--tdk-gold); }
.tdk-material-baixar {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  padding: var(--tdk-sp-2) var(--tdk-sp-4);
  border: 1px solid var(--tdk-border-hi);
  border-radius: var(--tdk-radius);
  color: var(--tdk-text);
  font-weight: var(--tdk-fw-semi);
  white-space: nowrap;
}
.tdk-material-baixar svg { width: 16px; height: 16px; }
.tdk-material:hover .tdk-material-baixar { border-color: var(--tdk-gold); color: var(--tdk-gold); }
/* No celular, o "Baixar" desce para baixo do texto como o "Abrir" descia, e a linha
   passava de 170px: doze PICs eram rolagem sem fim. Fica só o ícone, à direita, num
   alvo de 44 — a linha inteira continua sendo o link, e o nome dela é o título. */
@media (max-width: 640px) {
  .tdk-material:has(.tdk-material-baixar) { grid-template-columns: 48px minmax(0, 1fr) 44px; gap: var(--tdk-sp-3); }
  .tdk-material-marca--arquivo { width: 48px; height: 48px; }
  .tdk-material-baixar {
    grid-column: auto;
    justify-self: end;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }
  .tdk-material-baixar svg { width: 20px; height: 20px; }
}

/* Um bloco por curso na biblioteca (ticket 70): o nome do curso em cima dos arquivos
   dele, e o caminho até o curso ao lado. */
.tdk-biblioteca-curso { display: flex; flex-direction: column; gap: var(--tdk-sp-3); }
.tdk-biblioteca-curso + .tdk-biblioteca-curso { margin-top: var(--tdk-sp-8); }
.tdk-biblioteca-curso-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tdk-sp-4);
  padding-bottom: var(--tdk-sp-3);
  border-bottom: 1px solid var(--tdk-border);
}
.tdk-biblioteca-curso-nome { margin: var(--tdk-sp-1) 0 0; font-size: 20px; font-weight: var(--tdk-fw-semi); line-height: 1.25; }

/* ============================================================================
   25. A CAPA DA TRILHA E DO CURSO (ticket 72)
   ----------------------------------------------------------------------------
   À direita do título, onde o modelo (04-pagina-curso) desenha "CAPA DO CURSO". A
   imagem chega refeita em 16:10 (App\Support\Capa), e a caixa tem a mesma proporção:
   nada se corta na tela além do que o servidor já cortou. Sem capa, o topo é o de
   sempre — caixa vazia listrada seria enfeite afirmando uma imagem que não existe.
   ============================================================================ */
.tdk-capa {
  margin: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-lg);
  overflow: hidden;
  background: var(--tdk-surface-2);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}
.tdk-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A trilha: o herói e a capa lado a lado. */
.tdk-heroi-com-capa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: var(--tdk-sp-8);
  align-items: center;
}

/* O curso: o texto e a ação na coluna da esquerda, a capa ocupando as duas linhas. */
.tdk-pagina-topo.tem-capa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  column-gap: var(--tdk-sp-8);
  row-gap: var(--tdk-sp-5);
  /* A sobra de altura da capa vai toda para a segunda linha: dividida entre as duas, a
     ação descia para longe do título (medido a 1440: 80px de vão). */
  grid-template-rows: auto 1fr;
  align-items: start;
}
.tdk-pagina-topo.tem-capa > :not(.tdk-capa) { grid-column: 1; justify-self: start; }
.tdk-pagina-topo.tem-capa > .tdk-capa { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* A prévia na edição. */
.tdk-capa-previa {
  display: block;
  width: min(100%, 480px);
  height: auto;
  margin: 0 0 var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
}

/* Estreito, a capa sobe para cima do título, larga e mais baixa. */
@media (max-width: 1100px) {
  .tdk-heroi-com-capa,
  .tdk-pagina-topo.tem-capa { grid-template-columns: minmax(0, 1fr); }
  .tdk-heroi-com-capa > .tdk-capa { order: -1; }
  .tdk-pagina-topo.tem-capa > .tdk-capa { grid-column: 1; grid-row: 1; }
  .tdk-pagina-topo.tem-capa > :not(.tdk-capa) { grid-row: auto; }
  .tdk-capa { aspect-ratio: 16 / 7; max-width: 720px; }
}
@media (max-width: 880px) {
  .tdk-capa { aspect-ratio: 16 / 9; border-radius: var(--tdk-radius-md); }
}

/* ============================================================================
   26. A BUSCA (ticket 73)
   ----------------------------------------------------------------------------
   O campo do topo virou formulário (era desabilitado desde o ticket 04), e a página
   `/buscar` lista os achados em grupos. No celular, uma lupa no topo leva à página.
   ============================================================================ */
.tdk-busca { margin: 0; }
.tdk-busca:focus-within { border-color: var(--tdk-accent); }
.tdk-busca input::-webkit-search-cancel-button { display: none; }

.tdk-topo-busca { display: none; }
@media (max-width: 880px) {
  .tdk-topo-busca {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--tdk-radius-md);
    color: var(--tdk-text-2);
  }
  .tdk-topo-busca svg { width: 20px; height: 20px; }
}

.tdk-busca-pagina {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  max-width: 720px;
  margin: 0 0 var(--tdk-sp-6);
  padding: var(--tdk-sp-1) var(--tdk-sp-1) var(--tdk-sp-1) var(--tdk-sp-4);
  border: 1px solid var(--tdk-border-hi);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface);
}
.tdk-busca-pagina:focus-within { border-color: var(--tdk-accent); }
.tdk-busca-pagina > svg { flex: none; width: 20px; height: 20px; color: var(--tdk-text-3); }
.tdk-busca-pagina input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border: 0;
  background: none;
  color: var(--tdk-text);
  font-size: var(--tdk-fs-md);
  outline: none;
}

.tdk-busca-grupo + .tdk-busca-grupo { margin-top: var(--tdk-sp-6); }
.tdk-busca-grupo-titulo {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  margin: 0 0 var(--tdk-sp-3);
  font-size: 16px;
  font-weight: var(--tdk-fw-semi);
}
.tdk-busca-lista { display: flex; flex-direction: column; gap: var(--tdk-sp-2); max-width: 880px; margin: 0; padding: 0; list-style: none; }
.tdk-busca-item {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  min-height: 56px;
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  background: var(--tdk-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--tdk-trans), background var(--tdk-trans);
}
.tdk-busca-item:hover { border-color: var(--tdk-accent); background: var(--tdk-surface-2); color: inherit; }
.tdk-busca-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tdk-radius);
  background: var(--tdk-surface-3);
  color: var(--tdk-text-2);
}
.tdk-busca-icone svg { width: 18px; height: 18px; }
.tdk-busca-texto { display: flex; flex-direction: column; gap: var(--tdk-sp-1); min-width: 0; }
.tdk-busca-titulo { color: var(--tdk-text); font-weight: var(--tdk-fw-semi); }
/* O termo achado, marcado no título — no azul da marca, sem o amarelo do navegador. */
.tdk-busca-titulo mark { padding: 0 2px; border-radius: 2px; background: rgba(90, 181, 255, 0.18); color: var(--tdk-accent); }