/* Estilos das telas. Só usa os tokens de tokens.css. Pensado primeiro para 375 px. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cor-fundo); color: var(--cor-texto);
  font-family: var(--fonte-texto); font-size: var(--texto-base); line-height: var(--altura-linha);
  overflow-wrap: anywhere;
}
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.25; margin: var(--esp-6) 0 var(--esp-3); }
h1 { font-size: var(--texto-h1); margin-top: var(--esp-5); }
h2 { font-size: var(--texto-h2); }
h3, .h3 { font-size: var(--texto-h3); margin-top: var(--esp-4); }
p { margin: 0 0 var(--esp-4); }
a { color: var(--cor-destaque); text-underline-offset: 0.15em; }
code { font-size: 0.95em; background: var(--cor-superficie); padding: 0 var(--esp-1); border-radius: 4px; }

:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; border-radius: 4px; }
h1:focus { outline: none; }

.limite { max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--esp-4); }
main.limite { padding-bottom: var(--esp-7); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: -999px; top: 0; background: var(--cor-destaque); color: var(--cor-sobre-destaque); padding: var(--esp-3) var(--esp-4); z-index: 10; }
.pular:focus { left: var(--esp-2); top: var(--esp-2); }

.faixa-teste { background: var(--cor-aviso-fundo); border-bottom: 2px solid var(--cor-aviso-borda); text-align: center; padding: var(--esp-2) var(--esp-4); font-size: var(--texto-pequeno); }

.topo { border-bottom: 1px solid var(--cor-borda); background: var(--cor-fundo); }
.topo .limite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); padding-top: var(--esp-3); padding-bottom: var(--esp-3); }
.marca { margin: 0; font-weight: 700; }
#menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); }
#menu a { display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--esp-2); text-decoration: none; border-radius: var(--raio); font-size: var(--texto-pequeno); }
#menu a:hover { background: var(--cor-superficie); }
#menu a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; }

.rodape { border-top: 1px solid var(--cor-borda); background: var(--cor-superficie); }
.rodape .limite { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); align-items: center; padding-top: var(--esp-4); padding-bottom: var(--esp-5); font-size: var(--texto-pequeno); }
.rodape a, .rodape .link { min-height: var(--alvo-toque); display: inline-flex; align-items: center; }

.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--esp-4); margin: 0 0 var(--esp-4); box-shadow: var(--sombra); }
.cartao.discreto { box-shadow: none; }
.cartao.destaque { background: var(--cor-destaque-suave); border: 2px solid var(--cor-destaque); }
.cartao.destaque h2 { margin-top: 0; }
.cartao.conheca { border-style: dashed; box-shadow: none; }
.rotulo { display: block; font-size: var(--texto-pequeno); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-apoio); margin: 0 0 var(--esp-1); }
.tempo { font-weight: 400; font-size: var(--texto-pequeno); color: var(--cor-apoio); white-space: nowrap; }
.nota { color: var(--cor-apoio); font-size: var(--texto-pequeno); }
.introducao { font-size: 1.1875rem; }
.aviso { background: var(--cor-aviso-fundo); border-left: 4px solid var(--cor-aviso-borda); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio); margin: var(--esp-4) 0; }
.aviso p:last-child { margin-bottom: 0; }
.aviso-rascunho { background: var(--cor-aviso-fundo); border: 1px solid var(--cor-aviso-borda); padding: var(--esp-3); border-radius: var(--raio); margin-bottom: var(--esp-4); font-size: var(--texto-pequeno); }
.aviso-teste { background: var(--cor-aviso-fundo); border: 2px dashed var(--cor-aviso-borda); padding: var(--esp-3); border-radius: var(--raio); margin-bottom: var(--esp-4); }
.codigo { font-size: 1.5rem; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.texto-longo h2 { font-size: var(--texto-h3); }
.texto-longo h2:first-of-type { margin-top: 0; }
.lista-simples { padding-left: var(--esp-5); }
.lista-simples li { margin-bottom: var(--esp-2); }

/* formulários */
label { display: block; font-weight: 600; margin: var(--esp-4) 0 var(--esp-2); }
input[type="email"], input[type="text"], input:not([type]), input[type="date"], input[inputmode], select, textarea, input[type="file"] {
  display: block; width: 100%; font: inherit; color: var(--cor-texto); background: var(--cor-fundo);
  border: 2px solid var(--cor-borda-campo); border-radius: var(--raio); padding: var(--esp-2) var(--esp-3); min-height: var(--alvo-toque);
}
input[type="file"] { padding: var(--esp-2); }
textarea { resize: vertical; line-height: 1.5; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--esp-4); }
legend { font-weight: 700; margin-bottom: var(--esp-2); padding: 0; }
label.check { display: block; position: relative; padding: var(--esp-2) 0 var(--esp-2) 2.25rem; font-weight: 400; margin: var(--esp-1) 0; min-height: var(--alvo-toque); cursor: pointer; }
label.check input { position: absolute; left: 0; top: calc(var(--esp-2) + 0.2rem); width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--cor-destaque); }
.erro { color: var(--cor-erro); font-weight: 600; margin: var(--esp-2) 0 0; }
.erro:empty { display: none; }
[aria-invalid="true"] { border-color: var(--cor-erro) !important; }
.obrigatorio { font-weight: 400; color: var(--cor-apoio); font-size: var(--texto-pequeno); }

/* botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--alvo-toque); padding: var(--esp-2) var(--esp-5); margin: var(--esp-4) var(--esp-2) 0 0;
  font: inherit; font-weight: 700; border-radius: var(--raio); border: 2px solid var(--cor-destaque);
  cursor: pointer; text-decoration: none; text-align: center;
}
.botao.principal { background: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.botao.secundario, .botao.filtro, .botao.pequeno { background: var(--cor-fundo); color: var(--cor-destaque); }
.botao.grande { width: 100%; font-size: 1.25rem; min-height: 3.5rem; }
.botao.pequeno { padding: var(--esp-1) var(--esp-3); margin: 0; }
.botao.filtro[aria-pressed="true"] { background: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.botao:disabled { opacity: 0.55; cursor: not-allowed; }
.botao:hover:not(:disabled) { filter: brightness(1.08); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--cor-destaque); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.acoes { display: flex; flex-wrap: wrap; }
.filtros { display: flex; flex-wrap: wrap; }
.filtros .botao { margin-top: var(--esp-2); }
.status-copia { min-height: 1.6em; margin: var(--esp-2) 0; font-weight: 600; }
.status-copia.ok { color: var(--cor-ok); }

/* Comece por aqui */
.passos { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.passo { display: flex; gap: var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--cor-borda); }
.passo h3 { margin: 0 0 var(--esp-1); }
.passo p { margin-bottom: var(--esp-1); }
.passo .num { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; border: 2px solid var(--cor-destaque); color: var(--cor-destaque); }
.passo.feito .num { background: var(--cor-ok); border-color: var(--cor-ok); color: var(--cor-fundo); }
.guia { padding-left: var(--esp-5); }
.guia li { margin-bottom: var(--esp-3); }

.grade { display: grid; gap: var(--esp-3); grid-template-columns: 1fr; margin-bottom: var(--esp-4); }
@media (min-width: 40rem) { .grade { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.grade .cartao { margin: 0; display: flex; flex-direction: column; gap: var(--esp-1); }
.link-cartao { text-decoration: none; color: var(--cor-texto); }
.link-cartao strong { color: var(--cor-destaque); text-decoration: underline; }

.video-reservado { aspect-ratio: 16 / 9; display: grid; place-content: center; text-align: center; padding: var(--esp-4); background: var(--cor-superficie); border: 2px dashed var(--cor-borda-campo); border-radius: var(--raio); margin-bottom: var(--esp-2); }
.video-reservado p { margin: 0; }

.prompt h3 { margin-top: 0; }
.prompt details { margin-top: var(--esp-3); }
.prompt summary { cursor: pointer; min-height: var(--alvo-toque); display: flex; align-items: center; color: var(--cor-destaque); font-weight: 600; }
.prompt textarea { font-size: var(--texto-pequeno); margin-top: var(--esp-2); }
.pagina h3 { margin-top: 0; }

/* Painel da equipe */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--esp-2); margin: 0 0 var(--esp-4); }
.numeros div { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--esp-3); }
.numeros dt { font-size: var(--texto-pequeno); color: var(--cor-apoio); }
.numeros dd { margin: 0; font-size: 1.75rem; font-weight: 700; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--texto-pequeno); margin-top: var(--esp-3); }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: var(--esp-2); border-bottom: 1px solid var(--cor-borda); }
.tabela thead th { background: var(--cor-superficie); }
.liberar-linha { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.liberar-linha .botao { white-space: nowrap; }
.liberar-linha select { min-width: 8rem; }
main:has(.tabela) { max-width: 80rem; }

/* No celular, cada aluna vira um cartão */
@media (max-width: 60rem) {
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; width: 100%; }
  .tabela tr { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); margin-bottom: var(--esp-3); padding: var(--esp-2) var(--esp-3); }
  .tabela th[scope="row"] { font-size: var(--texto-h3); border: 0; padding-bottom: 0; }
  .tabela td { border: 0; padding: var(--esp-1) 0; display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--esp-2); }
  .tabela td::before { content: attr(data-rotulo); font-weight: 700; color: var(--cor-apoio); }
  .tabela td[data-rotulo="Liberar nível"] { grid-template-columns: 1fr; }
  .liberar-linha select { min-width: 0; flex: 1 1 8rem; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }