/*
 * 14_cartoes.css — ONDA S, bloco PRODUTO · docs/MARCA.md §3
 * ═══════════════════════════════════════════════════════════════════════════
 * Os CARDS que abrem modal dentro do sistema: curso, pessoa, certificado e
 * linha de relatório. O modal em si é da folha 12 (bloco MOTOR) e não se
 * reescreve aqui; o que mora nesta folha é o lado de fora — a superfície que
 * promete que clicar faz alguma coisa — e o pouco que o CORPO do modal pede e
 * ainda não existia (a prévia da folha A4, a ementa do curso).
 *
 * Número 14 para carregar DEPOIS de 10_componentes.css (onda D, dona de
 * `.curso`, `.cartao`, `.tabela`) e de 12_modal.css, e ANTES de 40_catalogo,
 * 70_admin, 75_relatorios e 80_certificado. Onde esta folha corrige uma regra
 * das outras, ela ganha por ESPECIFICIDADE e não por ordem — está anotado caso
 * a caso, porque ganhar por ordem é o tipo de vitória que some quando alguém
 * renumera um arquivo.
 *
 * Nenhum valor cru: tokens de 01_tokens.css. Anima só `transform` e `opacity`
 * (§2 da MARCA), e nada aqui atrasa informação.
 */

/* ═══ O DEFEITO MEDIDO: O SELO POR CIMA DO TÍTULO ═════════════════════════
 *
 * `/cursos` é a tela principal do aluno, e nela o selo "Catálogo Ellévu" ficava
 * POR CIMA do título do curso — em 1440×900 e em 390×844, nas duas.
 *
 * A causa, e ela não é o selo: `.curso__selo-canto` (10_componentes.css) nasceu
 * para o CANTO DA CAPA — `position: absolute; top/left: var(--esp-3)` —, e a
 * capa (`.curso__capa`, que é `position: relative`) é quem deveria ser o bloco
 * de contenção dele. O catálogo do aluno não tem capa: o selo é filho direto do
 * `<li class="curso">`, que é `position: relative` por causa do `::after` do
 * título, e o absoluto passou a se medir pelo CARTÃO. Como o `.curso__corpo`
 * começa no topo com apenas `var(--esp-4)` de respiro, o selo (≈22 px de altura
 * a 12 px do topo) cai exatamente sobre a primeira linha do `<h2>` — e o título
 * do curso, que é a única coisa que a pessoa veio ler, fica ilegível atrás de
 * uma etiqueta.
 *
 * O conserto é tirar o selo do absoluto QUANDO ele não tem capa para habitar,
 * em vez de empurrar o corpo com um `padding-top` mágico:
 *
 *   · `padding-top` no corpo reservaria espaço para o selo em TODO cartão,
 *     inclusive nos que não têm selo nenhum — e um buraco de 32 px no topo de
 *     nove cartões em dez é o mesmo defeito com o sinal trocado;
 *   · o selo em fluxo normal empurra o que vem depois sozinho, que é o que um
 *     elemento em fluxo faz de graça, e volta a somar altura ao cartão (o
 *     absoluto tinha altura ZERO para a grade, e a linha de cartões ficava
 *     desalinhada quando um deles tinha selo).
 *
 * O seletor é FILHO DIRETO de propósito: `.curso__capa .curso__selo-canto`
 * continua absoluto, porque lá o absoluto está certo — tem capa, tem canto, tem
 * bloco de contenção. `> ` tem especificidade (0,2,0) contra os (0,1,0) da
 * folha 10, então a correção não depende da ordem dos arquivos.
 */

.curso > .curso__selo-canto {
  position: static;
  margin: 0;
  padding: var(--esp-4) var(--esp-4) 0;
}

/* E o corpo encosta no selo em vez de abrir o respiro inteiro de novo: com os
   dois paddings somados sobrariam 32 px entre a etiqueta e o título, que lê
   como dois blocos separados em vez de um cartão só. */
.curso > .curso__selo-canto + .curso__corpo { padding-top: var(--esp-3) }

/* ═══ O CARTÃO DE CURSO ABRE MODAL ════════════════════════════════════════
   `.curso` já tinha `position: relative` e o `::after` do título esticado sobre
   o cartão (folha 10): o alvo de toque sempre foi o cartão inteiro. O que
   faltava era a PROMESSA — cursor, elevação no hover, aro de foco de teclado —,
   e ela já existe com nome no bloco MOTOR: `.cartao--acionavel`
   (03_movimento.css). A view acrescenta a classe; aqui fica só o que é do
   cartão de curso e não cabe naquele componente genérico. */

.curso__rodape {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}

/* O medidor do cartão é FINO e sem rótulo: no cartão ele é um sinal de "você
   está no meio disto", não o relatório de conclusão — esse está no modal. */
.curso__andamento { width: 100%; }
.curso__andamento .medidor__barra { height: 0.3125rem }

/* ═══ O CORPO DO MODAL DE CURSO ═══════════════════════════════════════════
   Ementa, aulas e carga horária. O modal não é lugar de formulário longo
   (§3), então aqui só há texto e uma lista. */

.ementa { margin: 0 0 var(--esp-5); color: var(--texto-suave) }
.ementa:last-child { margin-bottom: 0 }

.ementa__rotulo {
  display: block;
  font-size: var(--texto-xs);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--esp-1);
}

/* A linha de números do curso — aulas, carga, conclusão. Envolve no celular em
   vez de espremer três números numa linha de 390 px. */
.numeros-do-curso {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-6);
  margin: 0 0 var(--esp-5);
  padding: 0;
  list-style: none;
}
.numeros-do-curso > li { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.numeros-do-curso dt,
.numeros-do-curso__rotulo {
  font-size: var(--texto-xs);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.numeros-do-curso__valor {
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}
/* A ressalva embaixo do número ("3 obrigatórias"), só quando há aula opcional.
   Nenhum curso da seed tinha uma, e a linha saiu sem regra na primeira leva —
   em tamanho de corpo, como terceira linha solta. É legenda: pequena e tênue,
   colada no número. */
.numeros-do-curso__nota {
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
  white-space: nowrap;
}

/* A aula que a pessoa vai retomar, destacada dentro da lista do modal. É o
   "continuar de onde parou" visto de dentro: o botão diz para onde vai, e esta
   linha diz qual das seis é. */
.lista__item--retomar { background: var(--cor-marca-suave) }

/* ═══ A LINHA DE RELATÓRIO QUE ABRE A FICHA ═══════════════════════════════
 *
 * §14 — "o gestor está varrendo quem está devendo e quer ver um caso sem
 * perder a lista". A linha inteira é o alvo, com a mesma técnica do cartão: um
 * link real na célula do nome, esticado por `::after` sobre a linha. Só o link
 * é focável e só ele é anunciado; o que é grande é a ÁREA.
 *
 * `position: relative` em `<tr>` é o ponto delicado — foi especificado só no
 * CSS2.1 errata e demorou a chegar aos navegadores, mas está em Chrome, Firefox
 * e Safari há anos. A degradação, se algum dia faltar, é o `::after` se medir
 * pela tabela: o link continua clicável (é um `<a>` de verdade, com o nome
 * dentro), só a área grande é que se perde. Nenhum caminho de navegação depende
 * dela.
 */

.tabela tbody tr.linha-acionavel { position: relative }

@media (hover: hover) {
  .tabela tbody tr.linha-acionavel:hover { background: var(--fundo-elevado) }
}
.tabela tbody tr.linha-acionavel:has(:focus-visible) {
  outline: 2px solid var(--cor-marca);
  outline-offset: -2px;
}

.linha-acionavel__gatilho { color: inherit; text-decoration: none }
.linha-acionavel__gatilho::after { content: ""; position: absolute; inset: 0 }

/* No celular a linha vira cartão (`.tabela--cartao`, folha 10) e o alvo passa a
   ser a caixa inteira — mesma regra, outro desenho. */
@media (max-width: 47.999rem) {
  .tabela--cartao tbody tr.linha-acionavel { cursor: pointer }
}

/* ═══ A PRÉVIA DA FOLHA A4 DENTRO DO MODAL ════════════════════════════════
 *
 * O card de certificado abre "a prévia e as ações" (§3). A prévia é a FOLHA DE
 * VERDADE — o mesmo `app/views/certificados/_folha`, o mesmo HTML que sai na
 * impressora —, reduzida para caber no modal. Uma miniatura desenhada à parte
 * seria uma segunda verdade sobre o papel, e é o papel que o aluno vai levar.
 *
 * A escala é `zoom`, e não `transform: scale()`, pelo mesmo motivo escrito em
 * 80_certificado.css: `transform` não muda o espaço que o elemento OCUPA, então
 * a folha reduzida continuaria reservando 1122 px de largura e 794 de altura, e
 * o modal abriria com um deserto embaixo e rolagem lateral para o nada.
 *
 * Por que faixas, e não a conta contínua: `zoom: min(1, calc(100% / 297mm))` é
 * inválido (não se divide comprimento por comprimento), e o navegador descarta
 * a regra inteira — é o mesmo defeito que a folha 80 documenta, e foi assim que
 * a miniatura saiu em tamanho natural na primeira tentativa.
 *
 * As faixas abaixo se medem pela largura ÚTIL DO MODAL, não pela viewport — é
 * por isso que elas não são as mesmas da folha 80. A conta, MEDIDA no navegador:
 *
 *   caixa do modal   `width: min(34rem, 100vw - 3rem)` acima de 40rem, e
 *                    `100vw` abaixo dela (10_componentes.css);
 *   respiro          40 px de padding da caixa + 16 px desta prévia + 2 de borda;
 *   folha            297 mm = 1122,5 px a 96 dpi.
 *
 * Em 1440x900 isso dá 544 − 58 = 486 px de espaço para 1122,5 → 0,41. Em
 * 390x844, 390 − 58 = 332 → 0,29. Acima de 40rem a caixa TRAVA em 544 px, então
 * a última faixa não precisa de continuação: a partir dali o modal não cresce
 * mais, por mais larga que fique a janela.
 *
 * Especificidade (0,2,0) contra os (0,1,0) de `.folha { zoom: … }` da folha 80:
 * a prévia ganha esteja ela onde estiver na cascata.
 */

.previa-da-folha {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--elevo-papel);
  /* A folha é branca e o app é escuro: sem um respiro, a borda do papel encosta
     na borda do modal e a peça parece cortada, não reduzida. Embaixo o respiro
     é maior porque `zoom` arredonda para cima e a última linha do papel (a
     ressalva da §9) ficava 3 px fora da caixa — medido a 390x844. */
  padding: var(--esp-2) var(--esp-2) var(--esp-4);
}
/* O PALCO de dentro perde a rolagem própria. `.folha-palco` (80_certificado.css)
   é a rede de segurança da folha em tamanho de papel: `overflow-x: auto` mais
   `padding-inline: 16px`. Dentro da prévia, esses 32 px de padding somam à
   largura da folha reduzida e o palco passa a rolar de lado — e a barra
   horizontal come altura, o que fez aparecer TAMBÉM uma barra vertical.
   MEDIDO em 390x844: palco com `scrollWidth` 346 contra `clientWidth` 300, duas
   barras sobre uma miniatura de 314 px que cabia inteira nos 331 disponíveis.
   Um só elemento rola aqui, e é a prévia. */
.previa-da-folha .folha-palco { overflow: visible; padding: 0; max-width: none }
.previa-da-folha .folha { zoom: 0.26; margin: 0 auto }

@media (min-width: 26rem) { .previa-da-folha .folha { zoom: 0.30 } }
@media (min-width: 30rem) { .previa-da-folha .folha { zoom: 0.36 } }
/* 34rem é onde a caixa do modal já passa de 486 px de corpo. Não há faixa acima
   porque a caixa para de crescer em 40rem — 0,41 é o teto útil, e uma faixa a
   mais só devolveria a barra de rolagem lateral que este bloco existe para
   tirar (era 0,52 e sobrava 107 px para fora, medido em 1440x900). */
@media (min-width: 34rem) { .previa-da-folha .folha { zoom: 0.41 } }

/* A folha tem sombra e moldura próprias na tela; dentro da prévia elas viram
   ruído sobre a borda da caixa. */
.previa-da-folha .folha { box-shadow: none }

/* O aviso de que a prévia é reduzida. Vai ABAIXO da miniatura e não acima: em
   cima ele atrasaria a única coisa que a pessoa abriu o modal para ver. */
.previa-da-folha__nota {
  margin: var(--esp-2) 0 var(--esp-5);
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}

/* ═══ A FICHA DA PESSOA DENTRO DO MODAL ═══════════════════════════════════
   A ficha reaproveita `.dados` (70_admin.css) sem tocar nela: duas colunas
   couberam nos 704 px do modal na medição, e mexer na grade de um componente
   do admin a partir daqui mudaria também a tela cheia, que não pediu nada.
   O que falta ali é só o título de seção e a linha de regra da §13.2.

   `container-type: inline-size` no `.modal__corpo` foi tentado e DESCARTADO:
   ele cria contexto de contenção, e contenção troca o bloco de contenção de
   descendentes `position: fixed` — dentro de um `<dialog>` isso é convite a um
   defeito que só aparece na tela de outra onda. */

.ficha__secao { margin-bottom: var(--esp-6) }
.ficha__secao:last-child { margin-bottom: 0 }

/* O aviso da §13.2 vem ANTES da primeira seção e `.aviso` não carrega margem
   inferior (ele nasceu para viver sozinho no topo de uma tela). Sem esta linha
   o rótulo "IDENTIFICAÇÃO" encosta na borda da caixa âmbar e lê como se
   estivesse DENTRO do aviso — visto nas duas larguras. */
.aviso + .ficha__secao { margin-top: var(--esp-5) }
.ficha__titulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-xs);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* §13.2 — a linha que diz que o endereço NUNCA sai para o admin. Ela é regra,
   não legenda: fica visível nos dois invólucros (modal e tela), com o cadeado
   ao lado para ser lida de relance. */
.ficha__regra {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: var(--esp-4) 0 0;
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}

/* ═══ AS AÇÕES DO MODAL ═══════════════════════════════════════════════════
   `.modal__acoes` (folha 12) empilha no celular e alinha à direita no desktop.
   Quando a primeira ação é a PRINCIPAL ("Continuar de onde parou", "Abrir a
   folha"), ela precisa ficar visualmente primeiro no celular — que é a ordem do
   DOM — e por último no desktop, onde o olho vai ao canto direito. */
@media (min-width: 40rem) {
  .modal__acoes .botao--primario { order: 2 }
}

/* A ação secundária que é só um link (validar, ver no site) não briga com os
   botões: ela fica na ponta oposta. */
.modal__acoes .modal__acoes-link {
  margin-right: auto;
  align-self: center;
  font-size: var(--texto-sm);
}
@media (max-width: 39.999rem) {
  .modal__acoes .modal__acoes-link { margin-right: 0; text-align: center }
}


/* ═══ O INTERVALO ENTRE O TOQUE E O <dialog> ══════════════════════════════
   O modal abre por turbo-frame, e a barra de progresso do Turbo Drive não
   cobre navegação de frame: entre o toque e o diálogo (0,3–1,2 s, medido)
   não havia feedback nenhum (Q4 da rodada Q+R). Enquanto `turbo-frame#modal`
   está `busy`: uma linha fina da cor da marca no topo da janela, e o cartão
   que foi tocado (o que tem o foco) baixa a opacidade. Só `transform` e
   `opacity`; `prefers-reduced-motion` desliga o movimento da linha. */
body:has(turbo-frame#modal[busy])::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  z-index: var(--z-aviso);
  width: 100%;
  height: 3px;
  background: var(--cor-marca);
  transform-origin: left;
  animation: modal-carregando 1.4s var(--curva-saida) both;
}
@keyframes modal-carregando {
  from { transform: scaleX(0) }
  60%  { transform: scaleX(0.85) }
  to   { transform: scaleX(0.95) }
}
body:has(turbo-frame#modal[busy]) .cartao--acionavel { cursor: progress }
body:has(turbo-frame#modal[busy]) .cartao--acionavel:has(.cartao__gatilho:focus) { opacity: 0.6 }
@media (prefers-reduced-motion: reduce) {
  body:has(turbo-frame#modal[busy])::before { animation: none; transform: scaleX(0.95) }
}