/* IntegraSI - identidade do catálogo público.
 *
 * Estrutura no espírito de uma plataforma de cursos: fundo claro, cartões com
 * canto arredondado e sombra leve, muito respiro, tipografia sem serifa.
 * A cor vem de onde o sistema mora - o marinho institucional da UFSM (#21376B,
 * amostrado da página do curso) com o azul e o ciano da marca IntegraSI.
 */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains";
  src: url("../fonts/jetbrains.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --marinho: #21376b;
  --marinho-fundo: #1a2c57;
  --azul: #055695;
  --azul-forte: #04477c;
  --azul-suave: #e8f1f9;
  --ciano: #38c2c2;
  /* A cor quente do sistema. Branco sobre ela passa em contraste (cerca de
     4,8:1), o que #f59e0b e os laranjas mais claros nao fazem: um "?" branco
     sobre laranja claro seria bonito e ilegivel - por isso o gatilho de ajuda usa
     estas duas, e nao o tom claro abaixo. */
  --laranja: #d9530e;
  --laranja-forte: #b8440b;
  /* Tinta de fundo, no papel do `--azul-suave`: nao serve de fundo para texto
     branco, serve de chao para cartao. Usada no convite a sugerir um curso, que
     precisa se distinguir dos cartoes de curso sem virar bloco de propaganda. */
  --laranja-suave: #fbeee4;

  --texto: #16202e;
  --cinza: #5a6675;
  --cinza-claro: #8b95a3;
  --linha: #e1e6ec;
  --nevoa: #f5f8fb;
  --branco: #fff;

  --display: "Jakarta", "Inter", system-ui, sans-serif;
  --corpo: "Inter", system-ui, -apple-system, sans-serif;
  --dado: "JetBrains", ui-monospace, monospace;

  /* Breakpoints do projeto, em rem. Custom property nao funciona dentro de
     `@media` (a query e avaliada antes da cascata), entao isto e documentacao,
     nao token: o valor continua escrito em cada query, e esta lista diz qual
     escolher.

       30rem (480px)  celular grande: primeira quebra para duas colunas
       48rem (768px)  tablet retrato: grades de tres ou mais colunas
       62rem (992px)  tablet paisagem e acima: coluna lateral, controles do heroi

     Layout novo escolhe um destes tres. Os 44rem, 56rem e 58rem ainda em uso sao
     anteriores a esta lista - o 56 e o 58 estao a 32px um do outro, fazendo
     coisas diferentes em telas que ninguem tem - e convergem quando o componente
     de cada um for tocado.

     Alvo de toque nao entra aqui: quem decide o tamanho dele e `pointer: coarse`,
     a precisao do ponteiro, e nao a largura da tela. */

  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(22, 32, 46, 0.06), 0 4px 12px rgba(22, 32, 46, 0.06);
  --sombra-alta: 0 2px 4px rgba(22, 32, 46, 0.08), 0 12px 28px rgba(22, 32, 46, 0.12);
}

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

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--azul);
}

.faixa {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* No celular o respiro lateral cede.
   
   O padding nao mudava com a largura: num aparelho de 375px, 24px de cada lado
   do `.faixa` mais 24px de cada lado do `.bloco` somavam 96px, ou 26% da tela
   gastos antes de qualquer conteudo. Com este degrau sobram 40px a mais de
   largura util, 14% de ganho, sem tocar em nenhum layout de desktop. */
@media (max-width: 30rem) {
  .faixa {
    padding-inline: 1rem;
  }

  .bloco,
  .ficha-secao,
  .cartao {
    padding: 1.125rem;
  }
}

/* ---------- barra do topo ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}

.barra .faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4.25rem;
  flex-wrap: wrap;
}

.marcas-barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

/* `max-height` em vez de `height`, com `height: auto`: a marca tem proporcao
   4,81:1 e renderiza a 202px de largura. Com a altura FIXA, o `img { max-width:
   100% }` global reduzia a largura sem reduzir a altura junto - a marca achatava
   em vez de encolher. Assim ela encolhe proporcionalmente quando o espaco
   aperta. */
.marca img {
  display: block;
  height: auto;
  max-height: 2.625rem;
  width: auto;
}

/* O selo institucional: escudo mais nome, separados da marca do sistema por uma
   linha fina. São duas instituições distintas, e emendá-las leria como uma marca
   composta. */
.instituicao {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-left: 1rem;
  border-left: 1px solid var(--linha);
  text-decoration: none;
  color: var(--cinza);
  min-width: 0;
}

.instituicao img {
  height: 2.125rem;
  width: auto;
  display: block;
  flex: none;
}

.instituicao span {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.25;
  min-width: 0;
}

.instituicao strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--marinho);
  letter-spacing: 0.01em;
}

.instituicao:hover strong {
  color: var(--azul);
}

/* Abaixo do tablet fica só o escudo: o nome por extenso empurraria o botão
   "Entrar" para uma segunda linha, que era o que estava quebrando. */
@media (max-width: 56rem) {
  .instituicao span {
    display: none;
  }
  .instituicao {
    padding-left: 0.75rem;
  }
}

/* No celular a marca cede também.
   
   A 2,625rem de altura ela mede 202px de largura, e num aparelho de 320px o
   `.faixa` deixa 272px: a marca mais o escudo mais o separador consumiam a barra
   inteira e o menu ia todo para uma segunda linha, num cabecalho que e `sticky`.
   A 1,875rem ela mede 144px, e os tres itens do menu voltam a caber ao lado. */
@media (max-width: 30rem) {
  .marca img {
    max-height: 1.875rem;
  }
  .marcas-barra {
    gap: 0.625rem;
  }
  .barra .faixa {
    min-height: 3.5rem;
    gap: 0.75rem;
  }
}

.menu {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  font-size: 0.9375rem;
}

/* `:not(.botao)` e essencial, nao estilistico: `.menu a` tem especificidade
   (0,1,1) e `.botao` tem (0,1,0), entao sem a exclusao esta regra vence e pinta
   o texto do botao "Entrar" com a cor da navegacao -- azul escuro sobre fundo
   azul. Era o que fazia o "Entrar" parecer diferente do "Filtrar", que e o mesmo
   componente e nao sofre disso por estar fora do `.menu`.

   Excluir aqui, e nao subir a especificidade do `.botao`: um botao dentro da
   navegacao nao e um link de navegacao, e dizer isso na propria regra evita que
   o proximo botao no menu caia na mesma armadilha. */
.menu a:not(.botao) {
  color: var(--texto);
  text-decoration: none;
  font-weight: 500;
}

.menu a:not(.botao):hover {
  color: var(--azul);
}

.menu .quem {
  color: var(--cinza);
  font-size: 0.875rem;
}

.menu form {
  margin: 0;
}

/* ---------- botões ---------- */

/* Os modificadores entram na base de proposito. A base era `.botao, button`, um
   seletor de ELEMENTO: `.botao-linha` num <button> herdava tudo e ficava certo,
   mas num <a> nao herdava nada e virava link pelado. Foi assim que o "Cancelar"
   da ficha e o "Remover" da equipe deixaram de parecer botao. */
.botao,
.botao-linha,
.botao-largo,
button {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  /* Estas eram a unica diferenca entre o "Entrar" da barra e o "Filtrar" da
     busca: `.busca button` sobrescrevia altura e preenchimento. Subiram para ca
     e a sobrescrita foi apagada -- com um valor so, nao ha o que divergir. */
  min-height: 2.75rem;
  padding: 0.6875rem 1.75rem;
  border-radius: var(--raio-p);
  border: 1px solid transparent;
  background: var(--azul);
  color: var(--branco);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  /* Elevacao sutil: o "Entrar" da barra e o "Filtrar" da busca sao o mesmo
     componente, e o mesmo botao, e precisam ler igual nas duas pontas da tela. */
  box-shadow: 0 1px 2px rgba(4, 71, 124, 0.18), 0 2px 6px rgba(4, 71, 124, 0.12);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.botao:hover,
.botao-linha:hover,
.botao-largo:hover,
button:hover {
  background: var(--azul-forte);
  color: var(--branco);
  box-shadow: 0 2px 4px rgba(4, 71, 124, 0.22), 0 6px 14px rgba(4, 71, 124, 0.18);
  transform: translateY(-1px);
}

.botao:active,
.botao-linha:active,
.botao-largo:active,
button:active {
  transform: none;
  box-shadow: 0 1px 2px rgba(4, 71, 124, 0.2);
}

/* O contorno nao tem elevacao: ele e secundario, e sombra o poria no mesmo peso
   do botao cheio. */
.botao-linha,
.botao-linha:hover {
  box-shadow: none;
}

.botao-linha {
  background: transparent;
  color: var(--azul);
  border-color: #c3d5e6;
}

.botao-linha:hover {
  background: var(--azul-suave);
  color: var(--azul-forte);
}

.botao-largo {
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* Rotulo que o leitor de tela anuncia e a tela nao mostra: o campo de busca tem
   placeholder, mas placeholder nao e rotulo. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- herói ---------- */

.heroi {
  background: linear-gradient(160deg, var(--marinho) 0%, var(--marinho-fundo) 55%, #14224a 100%);
  color: var(--branco);
  position: relative;
  overflow: hidden;
}

/* O halo ciano da marca: profundidade sem virar enfeite. */
.heroi::after {
  content: "";
  position: absolute;
  inset: -20% -10% -40% 52%;
  background: radial-gradient(circle at center, rgba(56, 194, 194, 0.2), transparent 62%);
  pointer-events: none;
}

.heroi .faixa {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem 3.5rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .heroi .faixa {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  }
}

.heroi h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.125rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.heroi .chamada-texto {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.75rem;
  max-width: 34rem;
}

/* Dois cartões, não três colunas de texto: com três, a terceira quebrava em
   qualquer largura intermediária. Dois cabem lado a lado até o celular e
   empilham limpo abaixo disso. */
.numeros {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-top: 2rem;
  max-width: 30rem;
}

.numero {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--raio);
  padding: 1rem 1.125rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.numero strong {
  display: block;
  font-family: var(--display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--branco);
}

.numero span {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- cartão de acesso ---------- */

.acesso {
  background: var(--branco);
  color: var(--texto);
  border-radius: var(--raio);
  padding: 1.75rem;
  box-shadow: var(--sombra-alta);
}

.acesso h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.25rem;
}

.acesso .sub {
  font-size: 0.875rem;
  color: var(--cinza);
  margin: 0 0 1.25rem;
}

.campo {
  margin-bottom: 0.875rem;
}

.campo label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 0.375rem;
}

input,
select,
textarea {
  font: inherit;
  font-size: 0.9375rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid #c9d2dc;
  border-radius: var(--raio-p);
}

input::placeholder,
textarea::placeholder {
  color: var(--cinza-claro);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--azul);
  outline: none;
  box-shadow: 0 0 0 3px rgba(5, 86, 149, 0.13);
}

.erro-acesso {
  background: #fdf0ec;
  border: 1px solid #f3c9ba;
  color: #9a3d18;
  border-radius: var(--raio-p);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  margin: 0 0 1rem;
}

.rodape-acesso {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--cinza);
  text-align: center;
}

/* ---------- busca ---------- */

.busca {
  background: var(--nevoa);
  border-bottom: 1px solid var(--linha);
  padding-block: 1.5rem;
}

.busca form {
  display: grid;
  gap: 0.75rem;
  /* 12.5rem e nao 11: com 11 o primeiro select cortava "Qualquer etapa escolar"
     no proprio rotulo. O botao sai da grade e fica com a largura do texto. */
  /* `min(100%, ...)` como nos outros seis grids fluidos do arquivo: sem ele a
     coluna nao pode ficar menor que 12,5rem, e num container mais estreito que
     isso ela forca rolagem lateral. Era o unico grid da folha sem a guarda. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  align-items: end;
}

.busca .campo-busca {
  grid-column: 1 / -1;
}

.busca .campo-busca input {
  height: 3rem;
  font-size: 1rem;
}

.busca button {
  justify-self: start;
}

/* ---------- seção de cursos ---------- */

.secao {
  padding-block: 3rem 4.5rem;
}

.cabeca-secao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.cabeca-secao h2 {
  font-family: var(--display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.cabeca-secao p {
  margin: 0;
  color: var(--cinza);
  font-size: 0.9375rem;
}

.cursos {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.curso {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.curso:hover {
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
  border-color: #cfdae6;
}

/* Capa: campo de cor da marca em vez de foto de banco de imagens. O selo de
   prática mora aqui porque é a primeira decisão de quem escolhe um curso. */
.capa {
  height: 6.5rem;
  background: linear-gradient(135deg, var(--marinho), var(--azul) 70%, #0a6ba8);
  display: flex;
  align-items: flex-end;
  padding: 0.875rem;
}

.capa.plugada {
  background: linear-gradient(135deg, #05436f, var(--azul) 65%, #0d7ec2);
}
.capa.desplugada {
  background: linear-gradient(135deg, #12564f, #1c8a7a 60%, var(--ciano));
}
.capa.ambas {
  background: linear-gradient(135deg, var(--marinho), var(--azul) 45%, var(--ciano));
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--texto);
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.selo .ponto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--azul);
  flex: none;
}

.selo.desplugada .ponto {
  background: var(--ciano);
}
.selo.ambas .ponto {
  background: linear-gradient(90deg, var(--azul) 50%, var(--ciano) 50%);
}
.selo.nenhuma .ponto {
  background: var(--cinza-claro);
}

.corpo-curso {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
}

.curso h3 {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
}

.curso h3 a {
  color: inherit;
  text-decoration: none;
}

/* O título cobre o cartão inteiro: o alvo de clique é o cartão, e o leitor de
   tela continua ouvindo um link só, com o nome do curso. */
.curso h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.curso .resumo {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--cinza);
}

.meta {
  margin: auto 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--linha);
  font-size: 0.8125rem;
  color: var(--cinza);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.meta .sep {
  color: #c9d2dc;
}

.vazio {
  border: 1px dashed #ccd6e0;
  border-radius: var(--raio);
  background: var(--nevoa);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--cinza);
}

.vazio p {
  margin: 0 0 0.75rem;
}

/* ---------- página do curso ---------- */

.topo-curso {
  background: linear-gradient(160deg, var(--marinho), var(--marinho-fundo));
  color: var(--branco);
  padding-block: 2.5rem 3rem;
}

/* A migalha desenha o caminho; QUEM a pinta e o contexto. A cor clara era da
   regra base porque o unico lugar que a usava era o heroi escuro do catalogo -
   reusada no cabecalho branco do entregavel, ela ficaria branca sobre branco. */
.migalha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
  font-size: 0.875rem;
  color: var(--cinza);
  margin: 0 0 0.5rem;
}

.migalha a {
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.migalha a:hover,
.migalha a:focus-visible {
  color: var(--azul);
  border-bottom-color: currentColor;
}

.migalha .separador {
  color: var(--cinza-claro);
}

/* O selo da etapa entra na migalha, entao perde a margem que ele tinha como
   elemento solto acima do titulo. */
.migalha .selo-etapa {
  margin-bottom: 0;
}

/* O heroi do catalogo, que e escuro. */
.topo-curso .migalha {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1rem;
}

.topo-curso .migalha a {
  color: rgba(255, 255, 255, 0.92);
}

.topo-curso h1 {
  font-family: var(--display);
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  max-width: 46rem;
  text-wrap: balance;
}

.topo-curso .resumo {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.5rem;
  max-width: 44rem;
}

.fatos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.fato {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.colunas {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem 4rem;
  align-items: start;
}

@media (min-width: 58rem) {
  .colunas {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.conteudo h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.75rem;
}

.conteudo h2:first-child {
  margin-top: 0;
}

.etiquetas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.etiquetas li {
  background: var(--azul-suave);
  color: var(--azul-forte);
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* O resumo mora aqui, e nao no heroi: e o que garante que a coluna principal
   nunca fique vazia num curso sem pre-requisitos e sem referencial. */
.sobre {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0;
}

.competencias {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.competencias li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9375rem;
}

/* Código da BNCC é código: monoespaçada informa, não enfeita. */
.codigo {
  font-family: var(--dado);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--marinho);
  background: var(--nevoa);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 0.1875rem 0.4375rem;
  white-space: nowrap;
}

.lateral {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
}

@media (min-width: 58rem) {
  .lateral {
    position: sticky;
    top: 5.5rem;
  }
}

.lateral h2 {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.lateral p {
  font-size: 0.9375rem;
  color: var(--cinza);
  margin: 0 0 1.25rem;
}

.lateral .selo {
  background: var(--nevoa);
  border: 1px solid var(--linha);
  margin-bottom: 1rem;
}

/* ---------- páginas estreitas ---------- */

/* A volta no topo de uma pagina publica estreita. Paragrafo proprio, e nao
   dentro do <h1>, para o botao nao herdar o tamanho do titulo. */
.voltar-topo {
  margin: 0 0 1.25rem;
}

.pagina-estreita {
  max-width: 38rem;
  padding-block: 2.5rem 4rem;
}

.pagina-estreita h1 {
  font-family: var(--display);
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
}

.pagina-estreita .abertura {
  color: var(--cinza);
  margin: 0 0 2rem;
}

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.75rem;
}

.cartao p {
  margin: 0 0 1rem;
}

.cartao label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.helptext {
  display: block;
  font-size: 0.8125rem;
  color: var(--cinza);
  margin-top: 0.25rem;
}

.errorlist {
  list-style: none;
  padding: 0;
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: #b23c17;
}

.finalidade {
  background: var(--nevoa);
  border-left: 3px solid var(--ciano);
  border-radius: var(--raio-p);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--cinza);
}

/* ---------- mensagens ---------- */

.mensagens {
  list-style: none;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
  max-width: 74rem;
  display: grid;
  gap: 0.5rem;
}

.mensagens li {
  background: var(--azul-suave);
  border: 1px solid #cfe1f0;
  border-radius: var(--raio-p);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
}

/* ---------- rodapé ---------- */

.rodape {
  background: var(--marinho-fundo);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 3rem;
  font-size: 0.875rem;
}

.rodape .faixa {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 48rem) {
  .rodape .faixa {
    /* 34rem: sao tres marcas lado a lado -- IntegraSI, brasao da UFSM e o curso.
       Valor fixo, e nao `auto`: com `auto` a coluna cresceria a cada marca nova e
       o texto respiraria menos sem ninguem decidir isso. */
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    gap: 3rem;
  }
}

.marcas-rodape {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* A marca do IntegraSI e um PNG com fundo branco: precisa da caixa clara para
   nao recortar um retangulo no marinho do rodape. */
.marca-integrasi img {
  height: 6.25rem;
  width: auto;
  display: block;
  background: var(--branco);
  border-radius: var(--raio-p);
  padding: 0.75rem 1rem;
}

/* O brasao oficial ja e desenhado para fundo escuro -- o "UFSM" sob o escudo e
   branco --, entao ele assenta direto no rodape. Poe-lo numa caixa branca
   apagaria essa palavra. */
.marca-ufsm img {
  height: 5.25rem;
  width: auto;
  display: block;
}

/* A marca do curso e PNG de fundo transparente com texto escuro: sobre o marinho
   do rodape ela sumiria. Ganha a mesma caixa clara do IntegraSI -- ao contrario
   do brasao, que e desenhado para fundo escuro e assenta direto. */
.marca-si img {
  height: 5.25rem;
  width: auto;
  display: block;
  background: var(--branco);
  border-radius: var(--raio-p);
  padding: 0.5rem 0.875rem;
}

.marca-integrasi,
.marca-ufsm,
.marca-si {
  display: inline-block;
  border-radius: var(--raio-p);
  transition: opacity 0.15s ease;
}

.marca-integrasi:hover,
.marca-ufsm:hover,
.marca-si:hover {
  opacity: 0.85;
}

@media (max-width: 30rem) {
  .marca-integrasi img {
    height: 5rem;
  }
  .marca-ufsm img,
  .marca-si img {
    height: 4.25rem;
  }
}

.rodape a {
  color: var(--branco);
}

.rodape p {
  margin: 0 0 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   Área autenticada - superfície de trabalho, não página de vitrine.
   O catálogo convence; aqui a pessoa decide, aprova e responde. Por isso
   fundo névoa, cabeçalho de página sóbrio e listas densas de registros.
   ===================================================================== */

.trabalho {
  background: var(--nevoa);
  flex: 1;
}

.cabecalho-pagina {
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}

.cabecalho-pagina .faixa {
  padding-block: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
}

.cabecalho-pagina h1 {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
}

.cabecalho-pagina .sub {
  margin: 0.25rem 0 0;
  color: var(--cinza);
  font-size: 0.9375rem;
}

.cabecalho-pagina .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.corpo-trabalho {
  padding-block: 2rem 4rem;
}

/* ---------- painel ---------- */

.saudacao {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 0.25rem;
}

.indicadores {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}

.indicador {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.25rem;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.indicador:hover {
  box-shadow: var(--sombra);
  border-color: #cfdae6;
}

.indicador strong {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--marinho);
}

.indicador a {
  color: var(--texto);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.indicador a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Zero não é um alerta: quando não há nada na fila, o número recua. */
.indicador.zerado strong {
  color: var(--cinza-claro);
}

.atalhos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.atalho {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.25rem;
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.atalho:hover {
  box-shadow: var(--sombra);
  transform: translateY(-2px);
  border-color: #cfdae6;
}

.atalho h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.atalho h3 a {
  color: inherit;
  text-decoration: none;
}

.atalho h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.atalho p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cinza);
}

.titulo-bloco {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

/* ---------- listas de registros ---------- */

.registros {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.registro {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

/* A descricao do material quebra para a propria linha: `.registro` e um flex de
   uma linha so, e sem a base de 100% a frase disputaria espaco com o titulo e a
   duracao no mesmo eixo. */
.descricao-anexo {
  flex-basis: 100%;
  margin: 0;
  color: var(--cinza);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Texto que vem do editor chega embrulhado em <p> (e pode trazer lista ou
   citação). Sem isto o primeiro paragrafo abre uma margem de navegador dentro do
   cartao. Vale para a descricao do material e para a devolutiva do professor. */
.descricao-anexo > :first-child,
.devolutiva-texto > :first-child {
  margin-top: 0;
}

.descricao-anexo > :last-child,
.devolutiva-texto > :last-child {
  margin-bottom: 0;
}

.registro:hover {
  box-shadow: var(--sombra);
  border-color: #cfdae6;
}

.registro h3 {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
}

.registro h3 a {
  color: inherit;
  text-decoration: none;
}

.registro h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.registro .detalhe {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cinza);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.registro .detalhe .sep {
  color: #c9d2dc;
}

/* Onde nome de pessoa e e-mail dividem o mesmo espaco.
   
   `como_pessoa` imprime o endereco quando ainda nao ha nome (professor
   cadastrado so com o e-mail, antes do primeiro acesso), e endereco nao tem
   espaco para o navegador quebrar: um `coordenacao.sistemasdeinformacao@ufsm.br`
   mede cerca de 300px e empurra o container, levando a pagina a rolar de lado no
   celular.
   
   `anywhere`, e nao `break-word`: `break-word` nao encolhe a largura MINIMA do
   item de flex/grid, entao a pilha continuaria empurrando o container mesmo
   quebrando o texto. `min-width: 0` pelo mesmo motivo, do lado do item. */
.etiquetas li,
.registro h3,
.registro .detalhe span,
.dados-lista dd,
.dados-lista span,
.cabecalho-pagina .sub {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ---------- selos de estado ---------- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border-radius: 999px;
  padding: 0.25rem 0.6875rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: #eef1f5;
  color: var(--cinza);
  border: 1px solid transparent;
}

.estado::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.estado.espera {
  background: #fff5e6;
  color: #96601a;
  border-color: #f2ddb9;
}

.estado.ok {
  background: #e8f6ee;
  color: #1c6b41;
  border-color: #c2e5d1;
}

.estado.atencao {
  background: #fdeeea;
  color: #9a3d18;
  border-color: #f3cfc1;
}

.estado.info {
  background: var(--azul-suave);
  color: var(--azul-forte);
  border-color: #cfe1f0;
}

/* ---------- blocos de conteúdo interno ---------- */

/* O cartao das telas de trabalho. UM so, usado por `.bloco` e por
   `.ficha-secao`: os dois eram quase iguais e divergiam em duas coisas (sombra e
   estilo do titulo), o bastante para a tela de editar curso e a do entregavel
   parecerem de sistemas diferentes. */
.bloco,
.ficha-secao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
  margin: 0;
  min-width: 0;
}

/* Quem nao esta numa grade com `gap` carrega a propria margem. */
.bloco {
  margin-bottom: 1.5rem;
}

.coluna-trabalho > .bloco {
  margin-bottom: 0;
}

/* O titulo do cartao e um rotulo, e nao uma manchete: pequeno, em versalete, na
   cor da marca. Era assim so na tela de editar curso. */
.bloco > h2,
.bloco > h3,
.ficha-secao legend {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 1rem;
}

.duas-colunas {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 58rem) {
  .duas-colunas {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.dados-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.dados-lista div {
  display: grid;
  gap: 0.125rem;
}

.dados-lista dt,
.dados-lista .rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cinza-claro);
}

.citacao {
  border-left: 3px solid var(--linha);
  padding-left: 1rem;
  margin: 0;
  color: var(--cinza);
  font-size: 0.9375rem;
}

/* =====================================================================
   Vitrine - os últimos cursos publicados, no herói.

   Cartão branco sólido sobre o azul escuro, e não vidro: o contraste é o que
   faz o painel ler como conteúdo destacado em vez de mais uma camada do mesmo
   gradiente. As tags são coloridas por informação, não por enfeite - o formato
   tem uma cor por valor, então "Online" e "Presencial" se distinguem antes de
   serem lidos.
   ===================================================================== */

.vitrine {
  position: relative;
}

.vitrine-rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 0.875rem;
}

.vitrine-palco {
  position: relative;
  /* O arrasto horizontal é do carrossel; o vertical continua rolando a página.
     Sem isto o navegador segura o gesto para decidir o que fazer com ele, e a
     troca de slide sai atrasada. */
  touch-action: pan-y;
}

.vitrine-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

/* Todos os slides ocupam a mesma célula: a altura do palco é a do maior cartão,
   e a troca não faz a página pular. */
.vitrine-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(1rem) scale(0.99);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.vitrine-slide.ativo {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cartao-vitrine {
  background: var(--branco);
  border: 1px solid rgba(22, 32, 46, 0.06);
  border-radius: 16px;
  padding: 1.75rem;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  color: var(--texto);
  /* Sombra em duas camadas: a curta assenta o cartão, a longa e difusa o levanta
     do gradiente. Uma só faria mancha ou faria borda. */
  box-shadow: 0 2px 6px rgba(8, 18, 40, 0.16), 0 22px 48px rgba(8, 18, 40, 0.32);
}

.etiquetas-vitrine {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.marca-tema,
.marca-formato {
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
  line-height: 1.3;
  border: 1px solid transparent;
}

/* Tema em ciano - a cor da marca IntegraSI. */
.marca-tema {
  background: #e4f7f7;
  color: #0e6a6a;
  border-color: #b6e7e7;
}

/* Formato ganha uma cor por valor: distingue antes de ser lido. */
.marca-formato {
  background: var(--nevoa);
  color: var(--cinza);
  border-color: var(--linha);
}

.marca-formato.presencial {
  background: #e9f7ef;
  color: #1b6b42;
  border-color: #c3e6d2;
}

.marca-formato.hibrido {
  background: #f1ecfb;
  color: #5a3ea9;
  border-color: #ddcff3;
}

.marca-formato.online {
  background: #e9f1fa;
  color: #04477c;
  border-color: #cfe1f0;
}

.cartao-vitrine h3 {
  font-family: var(--display);
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--texto);
  text-wrap: balance;
}

.resumo-vitrine {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--cinza);
}

.dados-vitrine {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--cinza-claro);
}

/* Botão minimalista: contorno, não preenchido. O cheio é o "Entrar" e o
   "Filtrar"; aqui competir com eles tiraria a hierarquia da página. */
.ver-mais {
  margin-top: auto;
  align-self: flex-start;
  /* Volta ao piso de 2,75rem da base de botoes. Este botao escapava dele e
     ficava com cerca de 35px de altura - e o caminho principal do catalogo
     publico, tocado no celular mais do que qualquer outro botao do sistema. O
     desenho nao muda: o padding e a cor continuam os mesmos, so a altura
     minima volta. */
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--azul);
  background: transparent;
  border: 1px solid #c3d5e6;
  border-radius: var(--raio-p);
  text-decoration: none;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ver-mais:hover {
  background: var(--azul-suave);
  border-color: var(--azul);
  color: var(--azul-forte);
  box-shadow: none;
  transform: none;
}

.vazio-vitrine {
  min-height: 0;
}

/* O convite a sugerir um curso, ultimo slide do carrossel.

   Herda a forma do cartao de curso de proposito: ele ocupa o mesmo lugar, e um
   cartao de outro tamanho faria o carrossel pular de altura a cada passagem. O
   que muda e o fundo, para a pessoa perceber que este nao e mais um curso da
   lista - sem virar bloco de propaganda, que numa vitrine de tres cartoes
   cansaria antes da segunda volta. */
/* ---------- as cores dos cartoes da vitrine ----------

   Cada curso pega um tom claro diferente, em ciclo de cinco. Pelo `nth-child` do
   SLIDE, e nao por uma classe vinda do template: a cor e decoracao, e decoracao
   que passa pelo servidor vira dado que alguem um dia tenta interpretar ("por
   que este curso e verde?"). Aqui ela e so a posicao na fila.

   `:not(.convite-vitrine)` em todas: o convite tem cor propria e fecha o
   carrossel, entao ele nao entra no ciclo - senao o laranja dele mudaria conforme
   o numero de cursos publicados.

   Os tons sao claros de proposito. O texto do cartao e `--texto` (#16202e) e
   precisa continuar legivel sobre todos os cinco; um degrade forte deixaria o
   resumo ilegivel na metade de baixo do cartao, que e justamente onde ele fica. */
.vitrine-slide:nth-child(5n + 1) .cartao-vitrine:not(.convite-vitrine) {
  background: linear-gradient(150deg, #eef4fb, #e2ecf7);
  border-color: rgba(5, 86, 149, 0.16);
}

.vitrine-slide:nth-child(5n + 2) .cartao-vitrine:not(.convite-vitrine) {
  background: linear-gradient(150deg, #eaf6f5, #dcefee);
  border-color: rgba(56, 194, 194, 0.24);
}

.vitrine-slide:nth-child(5n + 3) .cartao-vitrine:not(.convite-vitrine) {
  background: linear-gradient(150deg, #f0f3ec, #e5ebde);
  border-color: rgba(93, 122, 74, 0.18);
}

.vitrine-slide:nth-child(5n + 4) .cartao-vitrine:not(.convite-vitrine) {
  background: linear-gradient(150deg, #f2eff8, #e8e2f3);
  border-color: rgba(93, 74, 138, 0.18);
}

.vitrine-slide:nth-child(5n + 5) .cartao-vitrine:not(.convite-vitrine) {
  background: linear-gradient(150deg, #fbf0ee, #f4e3e0);
  border-color: rgba(158, 74, 62, 0.18);
}

/* A etiqueta do tema fica branca em todos: sobre cinco fundos diferentes, um tom
   fixo ou some num deles ou grita noutro. O branco funciona igual nos cinco. */
.vitrine-slide .cartao-vitrine:not(.convite-vitrine) .marca-tema {
  background: rgba(255, 255, 255, 0.72);
}

.convite-vitrine {
  background: linear-gradient(140deg, var(--laranja-suave), #f7e3d3);
  border-color: rgba(217, 83, 14, 0.22);
}

/* A etiqueta acompanha o cartao. `--laranja-forte` no texto, e nao `--laranja`:
   sobre a tinta clara o tom mais escuro e o que passa em contraste. */
.convite-vitrine .marca-tema {
  background: rgba(217, 83, 14, 0.14);
  color: var(--laranja-forte);
}

/* ---------- controles ---------- */

/* Setas brancas, como o cartão: no vidro anterior elas sumiam no gradiente. */
.seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.375rem;
  height: 2.375rem;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 1.375rem;
  line-height: 1;
  border-radius: 50%;
  background: var(--branco);
  border: 1px solid rgba(22, 32, 46, 0.08);
  color: var(--azul);
  box-shadow: 0 2px 6px rgba(8, 18, 40, 0.2);
  z-index: 2;
}

.seta:hover {
  background: var(--branco);
  color: var(--azul-forte);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 12px rgba(8, 18, 40, 0.28);
}

.seta.anterior {
  left: -1.1875rem;
}
.seta.proxima {
  right: -1.1875rem;
}

.pontos {
  display: flex;
  justify-content: center;
  gap: 0.4375rem;
  margin-top: 1.125rem;
}

.ponto {
  width: 0.5rem;
  height: 0.5rem;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  border: 0;
  box-shadow: none;
  transition: background 0.2s ease, width 0.2s ease;
  /* Ancora do alvo de toque, no bloco de `pointer: coarse` abaixo. */
  position: relative;
}

.ponto:hover {
  background: rgba(255, 255, 255, 0.55);
  transform: none;
  box-shadow: none;
}

/* O ativo vira um traço: distingue sem crescer a linha. */
.ponto.ativo {
  width: 1.375rem;
  background: var(--branco);
}

/* Onde o ponteiro é o dedo, o ponto cresce e ganha uma área de toque maior que
   o próprio desenho.

   `pointer: coarse` e não uma largura: o que decide o tamanho do alvo é a
   precisão do ponteiro, não o tamanho da tela. Um tablet grande com dedo precisa
   do alvo; um notebook estreito com trackpad não. E não acrescenta mais um
   breakpoint de largura à lista, que já tem seis.

   Os 44px recomendados NÃO cabem nos dois eixos aqui, e o número explica por
   quê: são até dez pontos (CURSOS_NA_VITRINE), e dez alvos de 44px pedem 440px
   de linha, mais que a tela inteira de um celular. Com 10px de ponto e 1rem de
   vão, a linha mede 244px e cada alvo fica com 26 por 44 pixels: passa dos
   24 por 24 que a WCAG 2.5.8 pede, sem alvos sobrepostos - dois pontos
   disputando o mesmo toque seria pior que um alvo pequeno e previsível. */
@media (pointer: coarse) {
  .pontos {
    gap: 1rem;
  }

  .ponto {
    width: 0.625rem;
    height: 0.625rem;
  }

  .ponto.ativo {
    width: 1.5rem;
  }

  .ponto::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* A largura sai do próprio vão: alvos vizinhos encostam sem se sobrepor. */
    width: calc(100% + 1rem);
    height: 2.75rem;
  }
}

@media (max-width: 62rem) {
  .seta {
    display: none;
  }
  .vitrine-rotulo {
    margin-top: 0.5rem;
  }
}

/* Sem movimento para quem pediu sem movimento; o autoplay é desligado no JS. */
@media (prefers-reduced-motion: reduce) {
  .vitrine-slide {
    transition: none;
    transform: none;
  }
}


/* =====================================================================
   Página "Sobre" - o que o sistema é e como cada papel o percorre.
   ===================================================================== */

.pagina-sobre {
  padding-block: 3rem 4.5rem;
}

.bloco-sobre {
  max-width: 64rem;
  margin: 0 auto 4rem;
}

.bloco-sobre > h2 {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}

.bloco-sobre > p {
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 46rem;
  margin: 0 0 1rem;
}

/* A primeira frase carrega o argumento inteiro: ganha peso de subtítulo. */
.destaque-sobre {
  font-size: 1.25rem !important;
  line-height: 1.55;
  font-weight: 500;
  border-left: 3px solid var(--ciano);
  padding-left: 1.25rem;
}

.pilares {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.pilares li {
  background: var(--nevoa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.25rem;
}

.pilares h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.375rem;
}

.pilares p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--cinza);
}

/* ---------------------------------------------------------------------
   Fluxograma em HTML e CSS.

   Trilho vertical, e não um grafo desenhado: os quatro fluxos têm doze a
   quinze passos e voltas atrás. Um grafo de verdade em CSS só caberia numa
   tela larga e viraria sopa no celular. Aqui a ordem é a da leitura - de
   cima para baixo, sempre - , os desvios de decisão abrem em dois ramos lado
   a lado, e o retorno é dito em palavras em vez de desenhado.

   É `<ol>` de propósito: a sequência é o conteúdo, e o leitor de tela
   anuncia "item 3 de 12" sem precisar de nada a mais.
   --------------------------------------------------------------------- */

.fluxograma {
  --acento: var(--azul);
  --acento-fraco: var(--azul-suave);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: passo;
}

/* Cada fluxo tem sua cor, para que as quatro seções se distingam de relance
   ao rolar a página.
   
   A classe vale no `.fluxo` (o <article>) e no `.fluxograma` (o <ol>) ao mesmo
   tempo. Só no <ol> não bastava: `.fluxo-quem` é irmão dele, fora do elemento, e
   a variável não chegava lá. Era por isso que aquele rótulo trazia a cor num
   `style` inline, furando o sistema de acentos que já existia. */
.fluxo.comunidade,
.fluxograma.comunidade {
  --acento: #0e6a6a;
  --acento-fraco: #e4f7f7;
}
.fluxo.coordenacao,
.fluxograma.coordenacao {
  --acento: var(--azul);
  --acento-fraco: var(--azul-suave);
}
.fluxo.professor,
.fluxograma.professor {
  --acento: #5a3ea9;
  --acento-fraco: #f1ecfb;
}
.fluxo.estudante,
.fluxograma.estudante {
  --acento: #1b6b42;
  --acento-fraco: #e9f7ef;
}

.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 1rem;
  padding-bottom: 1.75rem;
}

/* O conector é uma linha atrás da coluna dos marcadores, e não um elemento
   entre os passos: assim ele acompanha a altura real do bloco, que muda com o
   texto, sem ninguém calcular nada. */
.etapa::before {
  content: "";
  position: absolute;
  left: 1.0625rem;
  top: 2.25rem;
  bottom: 0;
  width: 2px;
  background: var(--linha);
}

.etapa:last-child {
  padding-bottom: 0;
}

.etapa:last-child::before {
  display: none;
}

.etapa-marca {
  grid-row: 1 / -1;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--dado);
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--acento-fraco);
  color: var(--acento);
  border: 1.5px solid var(--acento);
  position: relative;
  z-index: 1;
}

.etapa-marca::before {
  counter-increment: passo;
  content: counter(passo);
}

/* Início e fim não são passos numerados: são estados. */
.etapa.limite .etapa-marca {
  background: var(--acento);
  color: var(--branco);
}

.etapa.limite .etapa-marca::before {
  content: "●";
  font-size: 0.625rem;
}

.etapa-corpo {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.875rem 1.125rem;
  min-width: 0;
}

.etapa-corpo h4 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  color: var(--texto);
}

.etapa-corpo p {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cinza);
}

/* Marca o que o sistema faz sozinho: e-mail enfileirado, estado gravado. */
.etapa.sistema .etapa-corpo {
  background: var(--nevoa);
  border-style: dashed;
}

.etapa.sistema .etapa-marca::before {
  content: "⚙";
  font-size: 0.75rem;
}

/* ---- decisão e seus dois ramos ---- */

.etapa.decisao .etapa-corpo {
  border-color: var(--acento);
  border-left-width: 3px;
  background: var(--acento-fraco);
}

.etapa.decisao .etapa-marca::before {
  content: "?";
  font-size: 0.9375rem;
}

.ramos {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.875rem;
  /* Lado a lado quando cabe, empilhados quando não. `min(100%, 13rem)` é o que
     impede a coluna de forçar rolagem horizontal em tela estreita. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.ramo {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 0.75rem 0.875rem;
}

.ramo-rotulo {
  display: inline-block;
  font-family: var(--dado);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  margin-bottom: 0.375rem;
}

.ramo.sim .ramo-rotulo {
  background: #e9f7ef;
  color: #1b6b42;
}

.ramo.nao .ramo-rotulo {
  background: #fdeeea;
  color: #9a3d18;
}

.ramo p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cinza);
}

/* O retorno é dito, não desenhado: uma seta curva subindo doze passos seria
   ilegível na vertical e impossível no celular. */
.volta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--acento);
}

.volta::before {
  content: "↺";
  font-size: 1rem;
  line-height: 1;
}

/* ---- o bloco de cada fluxo ---- */

.fluxo {
  display: grid;
  gap: 2rem;
  align-items: start;
  padding-block: 2.5rem;
  border-top: 1px solid var(--linha);
}

.fluxo:first-of-type {
  margin-top: 1.5rem;
}

@media (min-width: 62rem) {
  .fluxo {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 3.5rem;
  }
  /* O texto acompanha o fluxograma enquanto ele rola: são doze a quinze passos,
     e sem isto a explicação sai da tela antes do desenho terminar. */
  .fluxo-texto {
    position: sticky;
    top: 5.5rem;
  }
}

.fluxo-quem {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento, var(--ciano));
  margin: 0 0 0.375rem;
}

.fluxo-texto h3 {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.875rem;
}

.fluxo-texto p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cinza);
  margin: 0 0 0.875rem;
}

.nota-fluxo {
  background: var(--azul-suave);
  border-radius: var(--raio-p);
  padding: 0.875rem 1rem;
  color: var(--azul-forte) !important;
  margin-top: 1.25rem !important;
}

.chamada-sobre {
  background: linear-gradient(160deg, var(--marinho), var(--marinho-fundo));
  color: var(--branco);
  border-radius: var(--raio);
  padding: 2.5rem;
  text-align: center;
  margin-bottom: 0;
}

.chamada-sobre h2 {
  color: var(--branco);
  margin-bottom: 0.5rem;
}

.chamada-sobre p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto 1.5rem !important;
  max-width: 34rem;
}

.chamada-sobre .botao {
  background: var(--branco);
  color: var(--marinho);
  border-color: var(--branco);
}

.chamada-sobre .botao:hover {
  background: var(--azul-suave);
  color: var(--marinho);
}

/* ---------- ficha do curso ---------- */

/* A ficha usava `pagina-estreita`, que trava em 38rem: onze campos numa coluna
   de meia tela, com o bloco de habilidades espremido embaixo. Passa a usar a
   faixa inteira, em duas colunas, com as pendencias fixas ao lado enquanto a
   equipe preenche. */

.ficha {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.ficha-secao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
  margin: 0;
  min-width: 0;
}

.ficha-secao legend {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  padding: 0 0.5rem;
  margin-left: -0.5rem;
}

.ficha-secao .secao-apoio {
  font-size: 0.875rem;
  color: var(--cinza);
  margin: 0.25rem 0 1rem;
}

/* Duas colunas para campo curto, uma para campo longo. `minmax(0, 1fr)` e nao
   `1fr`: sem o minmax, um select com opcao comprida (as competencias do Ensino
   Medio) estoura a coluna e leva a pagina inteira a rolar de lado. */
.ficha .campos {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 44rem) {
  .ficha .campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ficha .campo-largo {
  grid-column: 1 / -1;
}

.ficha .campo {
  min-width: 0;
  margin-bottom: 1rem;
}

.ficha textarea,
.ficha input[type="text"],
.ficha input[type="number"],
.ficha select {
  width: 100%;
}

.ficha .ajuda {
  font-size: 0.8125rem;
  color: var(--cinza);
  margin: 0.375rem 0 0;
}

.ficha .erro {
  font-size: 0.8125rem;
  color: #b3261e;
  margin: 0.375rem 0 0;
}

/* As cinco caixas de palavra-chave lado a lado, para deixar visivel quantas se
   espera. Envolvem os inputs que o MultiWidget gera em sequencia. */
.caixas-palavras > input {
  width: 100%;
}

/* Duas colunas no celular grande, cinco so quando ha largura para elas.
   
   Com cinco ja em 480px cada campo ficava com cerca de 55px uteis: cabe uma
   palavra curta e o resto rola dentro do campo. A intencao da regra (mostrar de
   relance que se esperam cinco) sobrevive na contagem das caixas, e nao em elas
   estarem numa linha so. */
@media (min-width: 30rem) {
  .caixas-palavras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: start;
  }

  /* Tudo o que nao e caixa atravessa a linha inteira.
     
     O seletor aponta para `.rotulo-campo`, e nao para `label`: o rotulo passou a
     viver dentro desse invólucro (para o gatilho de ajuda ficar ao lado dele), e a
     regra antiga deixou de casar. O invólucro virou item de grade comum, ocupou
     UMA coluna e empurrou as cinco caixas para fora do lugar.
     
     `.ajuda` continua na lista de proposito: e a classe que qualquer campo com
     texto de apoio usaria, e tira-la agora faria a proxima ajuda visivel quebrar a
     grade do mesmo jeito. */
  .caixas-palavras > .rotulo-campo,
  .caixas-palavras > label,
  .caixas-palavras > .ajuda,
  .caixas-palavras > .erro {
    grid-column: 1 / -1;
  }
}

/* As cinco numa linha so a partir do tablet, onde cada uma tem largura de sobra. */
@media (min-width: 48rem) {
  .caixas-palavras {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.ficha-acoes {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.25rem;
}

/* ---------- bloco de habilidades do referencial ---------- */

#habilidades {
  margin-top: 0.5rem;
}

#habilidades .apoio {
  font-size: 0.875rem;
  color: var(--cinza);
  background: var(--azul-suave);
  border-radius: var(--raio-p);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.grupo-habilidades {
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 1rem 1.125rem 0.5rem;
  margin: 0 0 0.875rem;
  background: var(--nevoa);
}

.grupo-habilidades legend {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marinho);
  padding: 0 0.5rem;
}

.habilidade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  align-items: start;
  padding: 0.625rem 0;
  border-top: 1px solid var(--linha);
  cursor: pointer;
}

.grupo-habilidades .habilidade:first-of-type {
  border-top: none;
}

.habilidade input {
  margin-top: 0.2rem;
  width: auto;
}

.habilidade .codigo {
  grid-column: 2;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--azul);
}

.habilidade .objeto {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--cinza-claro);
}

.habilidade .texto {
  grid-column: 2;
  font-size: 0.875rem;
  color: var(--texto);
  line-height: 1.5;
}

.habilidade:hover {
  background: var(--branco);
}

/* ---------- painel do que falta ---------- */

/* Um componente so para as tres telas (curso, entregavel, revisao). Antes cada
   uma desenhava a mesma lista de um jeito: bloco no topo, coluna esquerda,
   lateral. Tres marcacoes para a mesma informacao faziam as telas parecerem de
   sistemas diferentes. */

/* O mesmo rotulo em versalete dos outros cartoes do sistema (`.bloco > h3`,
   `.lateral-pilha h2`). Estava em 1,125rem, e dentro da pilha de cartoes da tela
   de revisao acabava pegando os dois desenhos conforme a ordem das regras: o
   mesmo painel com dois tamanhos em duas telas. */
.painel-pendencias h2 {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 0.75rem;
}

/* Sem pendencia o painel muda de assunto, e a cor diz isso antes da leitura:
   o mesmo verde do selo "Aprovado". */
.painel-pendencias.sem-pendencia h2 {
  color: #1c6b41;
}

.painel-pendencias.sem-pendencia .tudo-certo {
  color: var(--texto);
  font-weight: 400;
}

.painel-pendencias .apoio-pendencias {
  font-size: 0.875rem;
  color: var(--cinza);
  margin: 0 0 1rem;
  line-height: 1.45;
}

.painel-pendencias .pendencias {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.625rem;
}

.painel-pendencias .pendencias li {
  font-size: 0.875rem;
  color: var(--texto);
  line-height: 1.45;
  padding-left: 1.25rem;
  position: relative;
}

.painel-pendencias .pendencias li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ciano);
}

.painel-pendencias .tudo-certo {
  color: var(--azul);
  font-weight: 600;
  margin: 0;
}

/* ---------- o historico das decisoes ---------- */

/* Fica dentro do cartao da decisao, separado do formulario: e a mesma conversa,
   e o que ja foi dito explica o que vem agora. */
.titulo-historico {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza);
  margin: 1.5rem 0 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
}

.historico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Linha do tempo: o fio liga as decisoes e o ponto marca cada uma. A ordem na
   tela e do mais novo para o mais antigo, entao o fio desce para o passado. */
.historico-item {
  position: relative;
  padding-left: 1.125rem;
}

.historico-item::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.5rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--linha);
  box-shadow: 0 0 0 2px var(--branco);
}

.historico-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.375rem;
  top: 1rem;
  bottom: -1rem;
  width: 1px;
  background: var(--linha);
}

.historico-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.historico-topo time {
  font-family: var(--dado);
  font-size: 0.75rem;
  color: var(--cinza-claro);
  font-variant-numeric: tabular-nums;
}

.historico-quem {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto);
  margin: 0.375rem 0 0;
}

.historico-texto {
  font-size: 0.875rem;
  color: var(--cinza);
  line-height: 1.5;
  margin-top: 0.25rem;
}

.historico-texto > :first-child { margin-top: 0; }
.historico-texto > :last-child { margin-bottom: 0; }

/* A lateral acompanha a rolagem: a lista do que falta so serve enquanto a pessoa
   preenche, e um bloco no topo sai da tela no primeiro rolar. */
@media (min-width: 58rem) {
  .coluna-pendencias {
    position: sticky;
    top: 1.5rem;
  }
}

/* Separa o painel do botao de envio, na tela do entregavel, sem margem inline.
   O `+ h2` que havia aqui era da tela de revisao, onde a decisao virou cartao
   proprio e o irmao deixou de existir. */
.coluna-pendencias .painel-pendencias + form {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linha);
}

.coluna-trabalho {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  min-width: 0;
}

/* ---------- aviso de prévia ---------- */

/* Segue o padrao de aviso que o sistema ja tem em `.mensagens`: painel claro com
   borda, dentro da faixa. A primeira versao era uma tarja escura em `--marinho`,
   a mesma cor do heroi logo abaixo, e lia como um pedaco solto dele. */
.aviso-previa {
  padding-top: 1.5rem;
}

.painel-previa {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  background: var(--azul-suave);
  border: 1px solid #cfe1f0;
  border-radius: var(--raio-p);
  padding: 0.875rem 1.25rem;
}

.painel-previa p {
  margin: 0;
  flex: 1 1 22rem;
  font-size: 0.9375rem;
  color: var(--texto);
}

.painel-previa strong {
  font-family: var(--display);
  font-weight: 700;
  color: var(--azul);
}

.painel-previa .botao-linha {
  background: var(--branco);
}

/* ---------- seções da página pública do curso ---------- */

.secao-publica {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--linha);
}

.secao-publica:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.secao-publica h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza);
  margin: 1.25rem 0 0.625rem;
}

.secao-publica h3:first-of-type {
  margin-top: 0;
}

/* Lista de fatos em duas colunas: rótulo e valor, alinhados, para a escola
   percorrer o que interessa sem ler prosa. */
.fatos-lista {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0;
}

.fatos-lista dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cinza);
}

.fatos-lista dd {
  margin: 0;
  color: var(--texto);
}

.etiquetas-chave li {
  background: var(--azul-suave);
  color: var(--azul-forte);
  border-color: transparent;
}

/* Só a prévia mostra o que falta. Na página publicada o curso já passou pelo
   portão de completude, então estes avisos nunca aparecem para o visitante. */
.por-preencher {
  font-size: 0.9375rem;
  color: var(--cinza);
  font-style: italic;
  background: var(--nevoa);
  border-left: 3px solid var(--ciano);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  padding: 0.75rem 1rem;
  margin: 0;
}

/* ---------- cards dos entregáveis ---------- */

/* Uma cor por etapa. A sequência vai do azul institucional ao verde, passando
   pelo ciano da marca: são seis passos de um mesmo caminho, e não seis avisos
   disputando atenção. A cor entra na borda esquerda e no selo, nunca no fundo do
   card inteiro, que deixaria o texto de estado ilegível. */
:root {
  --etapa-1: #055695;
  --etapa-2: #0f6ea8;
  --etapa-3: #1d8ba4;
  --etapa-4: #2aa79b;
  --etapa-5: #38c2c2;
  --etapa-6: #2f8f6b;
}

.entregavel-card {
  border-left: 4px solid var(--cor-etapa, var(--linha));
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.entregavel-card:hover {
  box-shadow: 0 2px 4px rgba(22, 32, 46, 0.08), 0 8px 20px rgba(22, 32, 46, 0.1);
  transform: translateY(-1px);
}

.entregavel-card.etapa-1 { --cor-etapa: var(--etapa-1); }
.entregavel-card.etapa-2 { --cor-etapa: var(--etapa-2); }
.entregavel-card.etapa-3 { --cor-etapa: var(--etapa-3); }
.entregavel-card.etapa-4 { --cor-etapa: var(--etapa-4); }
.entregavel-card.etapa-5 { --cor-etapa: var(--etapa-5); }
.entregavel-card.etapa-6 { --cor-etapa: var(--etapa-6); }

/* "Etapa N" pequeno, acima do nome: o número solto no título não dizia que
   aquilo era uma sequência de seis passos. */
.selo-etapa {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cor-etapa, var(--azul));
  background: color-mix(in srgb, var(--cor-etapa, var(--azul)) 12%, white);
  border-radius: 999px;
  padding: 0.1875rem 0.625rem;
  margin-bottom: 0.375rem;
}

.entregavel-card h3 {
  margin: 0;
}

/* O selo no cabeçalho da própria página do entregável usa a mesma cor da etapa,
   para a pessoa reconhecer de onde veio. */
.cabecalho-pagina .selo-etapa.etapa-1 { --cor-etapa: var(--etapa-1); }
.cabecalho-pagina .selo-etapa.etapa-2 { --cor-etapa: var(--etapa-2); }
.cabecalho-pagina .selo-etapa.etapa-3 { --cor-etapa: var(--etapa-3); }
.cabecalho-pagina .selo-etapa.etapa-4 { --cor-etapa: var(--etapa-4); }
.cabecalho-pagina .selo-etapa.etapa-5 { --cor-etapa: var(--etapa-5); }
.cabecalho-pagina .selo-etapa.etapa-6 { --cor-etapa: var(--etapa-6); }


/* ---------- peças que substituíram `style` inline ---------- */

/* Onze `style` inline foram limpos de uma vez. Cada um virou classe, e não uma
   utilidade genérica: `margin-top` solto no HTML é decisão de layout escondida
   onde ninguém procura quando o espaçamento sai errado. */

.rodape-titulo {
  color: var(--branco);
}

/* Separação entre duas seções da mesma página. Um valor só, e não os 2,5rem e
   1,5rem que estavam espalhados: dois números ad hoc não são uma escala. */
.afastado {
  margin-top: 2rem;
}

.form-em-linha {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---------- gatilho de ajuda e balões ---------- */

/* Precisa desfazer a base: `.botao, .botao-linha, .botao-largo, button` pinta
   TODO botão de azul com 2,75rem de altura, e o gatilho de ajuda é um `<button>`
   por ser interativo, não por ser um botão de ação. Sem este bloco ele viraria
   um botão azul grande ao lado de cada rótulo. */
/* O rotulo e o gatilho lado a lado. `.campo label` e `display: block`, e sem este
   invólucro o botao caia na linha de baixo, solto sob o texto. */
.rotulo-campo {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.rotulo-campo label {
  margin-bottom: 0;
}

/* O asterisco de campo obrigatorio. Laranja como o gatilho de ajuda, que e a
   unica cor do sistema reservada a meta-informacao sobre o campo (o resto e azul
   e ciano), so que mais apagado: a ajuda convida a clicar, o asterisco so
   informa. Sobe meio corpo com `super` para nao brigar com os dois-pontos do
   rotulo, e vem sem peso proprio para nao virar um segundo acento na linha. */
.obrigatorio {
  color: var(--laranja);
  opacity: 0.75;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  margin-left: 0.1875rem;
  /* Não seleciona junto com o rótulo ao copiar o texto do formulário. */
  user-select: none;
}

/* A legenda que explica o asterisco. Fica acima da coluna de trabalho, discreta:
   quem entende o simbolo passa por ela sem parar, e quem nao entende acha a
   palavra sem procurar. */
.legenda-obrigatorio {
  font-size: 0.8125rem;
  color: var(--cinza);
  margin: 0 0 1.25rem;
}

/* No titulo da secao do Plano de Ensino o rotulo e versalete pequeno, entao o
   asterisco acompanha o tamanho de la em vez de ficar maior que a palavra. */
.bloco > h3 .obrigatorio {
  font-size: 0.625rem;
  margin-left: 0.125rem;
}

/* Laranja de proposito, e a unica coisa laranja do sistema: o resto da interface
   e azul e ciano, entao a ajuda se destaca por ser a excecao. Cinza discreto era
   o que fazia ninguem reparar que havia ajuda ali. */
.ajuda-campo {
  all: unset;
  /* A margem mora AQUI, e nao num seletor de contexto. Ela vivia so em
     `.bloco > h3 .ajuda-campo`, entao o gatilho do titulo dos cartoes de
     progresso (um <h2>) nascia colado na palavra, e qualquer contexto novo
     nasceria colado tambem. `.obrigatorio`, ao lado, ja fazia certo: margem na
     base e ajuste por contexto. */
  margin-left: 0.375rem;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 50%;
  border: none;
  background: var(--laranja);
  color: var(--branco);
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  box-shadow: 0 1px 2px rgba(180, 65, 10, 0.3);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  /* Ancora do alvo de toque, no bloco de `pointer: coarse` abaixo. */
  position: relative;
}

/* No dedo, o "?" de 17px vira um alvo de 36 por 44.
   
   O desenho NAO cresce: um gatilho maior ao lado de cada rotulo e exatamente o
   que o `all: unset` desta regra existe para evitar (ja aconteceu duas vezes,
   com o "?" virando botao azul grande). Cresce so a area que recebe o toque.
   
   36 de largura, e nao 44: o gatilho e o terceiro item de um flex
   (`.rotulo-campo`, com `gap: 0.375rem`) e tem `margin-left: 0.375rem`, entao
   sobram 12px ate o rotulo a esquerda. Um alvo de 44 se estenderia 13,5px para
   cada lado e comeria a ultima letra do rotulo - e clicar no rotulo tem funcao
   propria, que e focar o campo. Com 36 a extensao e de 9,5px e nada se sobrepoe.
   A altura fica nos 44 cheios: acima e abaixo nao ha vizinho para atropelar. */
@media (pointer: coarse) {
  .ajuda-campo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.25rem;
    height: 2.75rem;
  }
}

.ajuda-campo:hover,
.ajuda-campo:focus-visible {
  background: var(--laranja-forte);
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(180, 65, 10, 0.4);
}

.ajuda-campo:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* O balão segue o sistema: fundo escuro da marca, texto claro, mesmo raio dos
   demais painéis. O tema do Tippy é declarado, não sobrescrito por `!important`. */
.tippy-box[data-theme~="integrasi"] {
  background: var(--marinho-fundo);
  color: #eaf1f8;
  border-radius: var(--raio-p);
  font-size: 0.75rem;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(22, 32, 46, 0.22);
}

.tippy-box[data-theme~="integrasi"] .tippy-content {
  padding: 0.5rem 0.625rem;
}

.tippy-box[data-theme~="integrasi"][data-placement^="right"] > .tippy-arrow::before {
  border-right-color: var(--marinho-fundo);
}

.tippy-box[data-theme~="integrasi"][data-placement^="left"] > .tippy-arrow::before {
  border-left-color: var(--marinho-fundo);
}

.tippy-box[data-theme~="integrasi"][data-placement^="top"] > .tippy-arrow::before {
  border-top-color: var(--marinho-fundo);
}

.tippy-box[data-theme~="integrasi"][data-placement^="bottom"] > .tippy-arrow::before {
  border-bottom-color: var(--marinho-fundo);
}

/* ---------- paginação ---------- */

/* Uma so para todas as listas. Fica centrada e afastada do fim da lista: colada
   nela, o "Próxima" lia como se fosse mais um item. */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}

.paginacao-conta {
  font-family: var(--dado);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--cinza);
}

/* ---------- lista de caixas de marcar ---------- */

/* O `<select multiple>` do Django pede Ctrl para escolher mais de um, que e
   conhecimento que ninguem tem por obrigacao. As caixas mostram todas as opcoes
   de uma vez e nao escondem nada atras de um atalho.

   `CheckboxSelectMultiple` poe os atributos em cada <input>, e nao no elemento
   que os envolve, entao nao ha como marcar o container pelo formulario. Isto aqui
   ja casou o container pelo id (`..._temas`), o que deixava o campo seguinte a
   usar caixas sem desenho nenhum; quem marca agora e a classe `campo-marcaveis`,
   que `_campo.html` poe olhando o widget. O Django desenha o container como
   <div>, e nao <ul> - foi o que a primeira versao deste bloco errou. */
.campo-marcaveis > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* O Django envolve cada opcao num <div> proprio; sao eles os itens da flex. */
.campo-marcaveis > div > div {
  min-width: 0;
}

.campo-marcaveis label {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--texto);
  cursor: pointer;
}

.campo-marcaveis input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--azul);
}

/* Campo de escolha sem opção cadastrada: dizer que está vazio é mais honesto que
   desenhar nada, que a pessoa lê como defeito. */
.sem-opcoes {
  font-size: 0.875rem;
  color: var(--cinza);
  font-style: italic;
  margin: 0;
}

/* ---------- editor das seções ---------- */

/* O tema "snow" do Quill vem com botao de 24px e bastante respiro. Sao SETE
   editores na mesma pagina, e o peso soma: a barra ocupava mais altura que o
   texto que ela edita. Aqui ela e compactada e trazida para o sistema, sem
   sobrescrever o tema inteiro, para nao brigar com a biblioteca a cada
   atualizacao. */

.editor-secao {
  border-radius: 0 0 var(--raio-p) var(--raio-p);
  background: var(--branco);
}

/* ---- a barra ---- */

.ql-toolbar.ql-snow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p) var(--raio-p) 0 0;
  background: var(--nevoa);
  font-family: var(--display);
}

.ql-toolbar.ql-snow .ql-formats {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* Um fio separando os grupos, no lugar da margem larga do tema. */
.ql-toolbar.ql-snow .ql-formats + .ql-formats {
  margin-left: 0.375rem;
  padding-left: 0.375rem;
  border-left: 1px solid var(--linha);
}

.ql-toolbar.ql-snow button {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--raio-p);
  cursor: pointer;
  transition: background 0.12s ease;
}

.ql-toolbar.ql-snow button:hover {
  background: var(--azul-suave);
}

.ql-toolbar.ql-snow button.ql-active {
  background: var(--azul-suave);
}

.ql-toolbar.ql-snow button svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* O tema pinta os traços do ícone; aqui eles seguem a cor do texto e o azul
   quando o formato está ligado. */
.ql-snow.ql-toolbar button .ql-stroke,
.ql-snow .ql-picker-label .ql-stroke {
  stroke: var(--cinza);
  stroke-width: 2;
}

.ql-snow.ql-toolbar button .ql-fill {
  fill: var(--cinza);
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--azul);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--azul);
}

/* ---- o seletor de título ---- */

.ql-snow .ql-picker {
  height: 1.5rem;
  font-size: 0.75rem;
  color: var(--cinza);
}

.ql-snow .ql-picker.ql-header {
  width: 6.5rem;
}

.ql-snow .ql-picker-label {
  padding: 0 0.375rem;
  border-radius: var(--raio-p);
  border: none;
  display: flex;
  align-items: center;
}

.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  background: var(--azul-suave);
  color: var(--azul);
}

.ql-snow .ql-picker-options {
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra);
  padding: 0.25rem;
}

.ql-snow .ql-picker-item {
  border-radius: var(--raio-p);
  padding: 0.25rem 0.5rem;
}

.ql-snow .ql-picker-item:hover {
  background: var(--azul-suave);
  color: var(--azul);
}

/* ---- a área de escrita ---- */

.ql-container.ql-snow {
  border: 1px solid var(--linha);
  border-top: none;
  border-radius: 0 0 var(--raio-p) var(--raio-p);
}

.editor-secao .ql-editor {
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texto);
  /* O dobro do minimo anterior, a pedido: escrever ementa e metodologia numa
     janela de seis linhas obrigava a rolar dentro do proprio campo. Sao sete
     editores na mesma pagina, entao o numero pesa sete vezes, mas escrever
     apertado pesa mais. O campo cresce com o texto de qualquer forma. */
  min-height: 13rem;
  padding: 0.875rem 1rem;
}

.editor-secao .ql-editor.ql-blank::before {
  color: var(--cinza-claro);
  font-style: normal;
  left: 1rem;
  right: 1rem;
}

.editor-secao .ql-editor p {
  margin: 0 0 0.5rem;
}

.editor-secao .ql-editor h2,
.editor-secao .ql-editor h3 {
  font-family: var(--display);
  margin: 0.75rem 0 0.375rem;
}

/* O botão de salvar respira depois do editor. */
.bloco form .ql-container + button,
.bloco form .editor-secao + button {
  margin-top: 1rem;
}

/* O envio de vídeo é o único formulário desta tela escrito à mão. A barra e o
   aviso passam a maior parte do tempo `hidden`, ou seja, `display: none`, sem
   altura nenhuma: sem esta margem o botão encosta no campo de duração e parece
   fazer parte dele. Os campos em si vêm de `.campo`, como no resto do sistema. */
/* A barra do envio de vídeo. Nasce zerada e fica logo abaixo do campo do
   arquivo, com o número à direita: sem ele a barra não diz quanto falta de um
   arquivo de um giga, e é justamente nessa espera de meia hora que alguém olha.

   `appearance: none` é o que permite pintá-la; sem isso o navegador desenha a
   barra do sistema e ignora tudo abaixo. Cada motor expõe o preenchimento por um
   pseudoelemento próprio, e eles não podem ser agrupados numa regra só: um
   seletor desconhecido invalida a regra inteira para o outro motor. */
.envio-progresso {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: -0.375rem 0 1rem;
}

.envio-progresso progress,
.barra-progresso {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  height: 0.5rem;
  border: none;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
}

.envio-progresso progress::-webkit-progress-bar,
.barra-progresso::-webkit-progress-bar {
  background: var(--linha);
  border-radius: 999px;
}

.envio-progresso progress::-webkit-progress-value,
.barra-progresso::-webkit-progress-value {
  background: linear-gradient(90deg, var(--azul), var(--ciano));
  border-radius: 999px;
}

.envio-progresso progress::-moz-progress-bar,
.barra-progresso::-moz-progress-bar {
  background: linear-gradient(90deg, var(--azul), var(--ciano));
  border-radius: 999px;
}

/* O editor de uma descrição é mais baixo que o de uma seção do Plano de Ensino:
   aquele tem 13rem porque uma ementa inteira cabe dentro dele, e aqui são uma ou
   duas linhas. Quem escolhe é o `rows` do campo, lido pelo editor.js. O campo
   cresce com o texto de qualquer forma. */
.editor-curto .ql-editor {
  min-height: 5.5rem;
}

/* ---------- a lateral do painel do curso ---------- */

/* Uma pilha de cartoes no lugar de um cartao so com tudo dentro: producao,
   revisao, equipe e acoes sao quatro assuntos, e empilhados sem separacao o olho
   lia tudo como uma lista continua. A `.lateral` perde a moldura e passa a ser so
   a coluna; quem tem moldura sao os filhos. */
.lateral-pilha {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lateral-pilha > * {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  /* O mesmo respiro da `.lateral` que estes cartoes substituiram: a pilha ficou
     mais apertada que a coluna equivalente das outras telas. */
  padding: 1.5rem;
}

/* O titulo do cartao segue o padrao do sistema: rotulo em versalete pequeno, e
   nao manchete. `.lateral h2` (1.125rem) e da lateral do catalogo, onde o cartao
   e um convite com titulo proprio; aqui a coluna e um painel de cartoes, e a
   `Equipe` ao lado dos dois cartoes de progresso era o unico titulo grande. */
.lateral-pilha h2 {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  margin: 0 0 0.75rem;
}

/* O titulo do cartao com uma acao a direita (Equipe / Editar). */
.cabecalho-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.cabecalho-cartao h2 {
  margin: 0;
}

/* O botao dentro do cartao e menor que os da pilha de acoes: ali ele e a acao
   principal da tela, aqui e um atalho ao lado de um titulo. */
.cabecalho-cartao .botao {
  height: 2rem;
  padding-inline: 0.875rem;
  font-size: 0.8125rem;
}

/* ---------- os dois cartoes de progresso ---------- */

/* Cores diferentes porque sao perguntas diferentes: producao no azul do sistema,
   revisao no ciano. A barra reaproveita a pintura da barra do envio de video,
   pelo seletor compartilhado acima - duas barras com desenhos diferentes na
   mesma interface seria o defeito que a rodada da uniformizacao foi corrigir. */
.cartao-progresso {
  --cor-progresso: var(--azul);
}

.cartao-progresso.revisao {
  --cor-progresso: var(--ciano);
}

/* Herda o tamanho e o versalete de `.lateral-pilha h2`; so a cor muda, para o
   acento do proprio cartao. */
.cartao-progresso h2 {
  color: var(--cor-progresso);
}

.progresso-numero {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cor-progresso);
  margin: 0 0 0.75rem;
}

.barra-progresso {
  width: 100%;
}

.cartao-progresso .barra-progresso::-webkit-progress-value {
  background: var(--cor-progresso);
}

.cartao-progresso .barra-progresso::-moz-progress-bar {
  background: var(--cor-progresso);
}

/* Sobrescreve o `.lateral p`, que e cinza pequeno com margem de 1.25rem. */
.progresso-conta {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--cinza);
  margin: 0.625rem 0 0;
}

.envio-numero {
  font-family: var(--dado);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--cinza);
  min-width: 3.5ch;
  text-align: right;
}

[data-upload-video] .aviso {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--cinza);
}

[data-upload-video] button[type="submit"] {
  margin-top: 0.5rem;
}

/* Dentro do `.rotulo-campo` quem separa e o `gap` do flex: a margem do
   componente somaria a ele e afastaria o circulo do rotulo. */
.rotulo-campo .ajuda-campo {
  margin-left: 0;
}

/* ---------- menu da pessoa (cabeçalho) ---------- */

/* Avatar de iniciais. Não há foto no sistema, e um ícone genérico repetido em
   toda tela não diz nada; as iniciais ao menos identificam a conta aberta. */
.avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul) 0%, var(--ciano) 100%);
  color: var(--branco);
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}

.avatar-grande {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.125rem;
  box-shadow: var(--sombra);
}

.menu-pessoa {
  position: relative;
}

/* O triângulo nativo do <summary> sai: a seta desenhada abaixo gira com o estado
   aberto, e os dois juntos seriam dois indicadores da mesma coisa. */
.menu-pessoa > summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.menu-pessoa > summary::-webkit-details-marker {
  display: none;
}

.menu-pessoa > summary:hover,
.menu-pessoa[open] > summary {
  background: var(--azul-suave);
  border-color: var(--linha);
}

.menu-pessoa > summary:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.menu-pessoa .quem {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
  color: var(--cinza);
  font-size: 0.75rem;
  /* Aqui a saida e truncar, e nao quebrar como no resto: a barra e uma linha so,
     e um e-mail longo (o nome de quem ainda nao fez o primeiro acesso) empurraria
     o gatilho inteiro. O nome completo continua no `title` e na tela do perfil. */
  min-width: 0;
  max-width: 11rem;
}

/* A reticencia vai no `strong`, e nao no `.quem`: `.quem` e um flex em coluna, e
   `text-overflow` nao alcanca os itens anonimos que ele cria. O papel, na linha
   de baixo, e curto por natureza ("Professor", "Coordenador") e nao precisa. */
.menu-pessoa .quem strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-pessoa .quem strong {
  color: var(--texto);
  font-size: 0.875rem;
  font-weight: 600;
}

.menu-pessoa .seta {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--cinza-claro);
  border-bottom: 2px solid var(--cinza-claro);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.menu-pessoa[open] .seta {
  transform: translateY(1px) rotate(-135deg);
}

.gaveta-pessoa {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 15rem;
  padding: 0.375rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-alta);
}

.gaveta-pessoa form {
  margin: 0;
}

/* `all: unset` porque a base do projeto pinta TODO `<button>` de azul com 2,75rem
   de altura: sem isto o "Sair" viraria um botão de ação no meio de dois links de
   texto (CLAUDE.md, Interface). */
.gaveta-pessoa .item-gaveta {
  all: unset;
}

.gaveta-pessoa a,
.gaveta-pessoa .item-gaveta {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: var(--raio-p);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
}

.gaveta-pessoa a strong,
.gaveta-pessoa .item-gaveta strong {
  font-weight: 600;
}

.gaveta-pessoa a span,
.gaveta-pessoa .item-gaveta span {
  color: var(--cinza);
  font-size: 0.75rem;
}

.gaveta-pessoa a:hover,
.gaveta-pessoa a:focus-visible,
.gaveta-pessoa .item-gaveta:hover,
.gaveta-pessoa .item-gaveta:focus-visible {
  background: var(--nevoa);
  outline: none;
}

.gaveta-pessoa form {
  border-top: 1px solid var(--linha);
  margin-top: 0.375rem;
  padding-top: 0.375rem;
}

/* ---------- tela do perfil ---------- */

.identidade-pessoa {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.colunas-perfil {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.5rem;
  align-items: start;
}

.colunas-perfil > div {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 62rem) {
  .colunas-perfil {
    grid-template-columns: 1fr;
  }
}

.ficha-pessoa h2 {
  margin-bottom: 1rem;
}

.lista-ficha {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0 0 1rem;
}

.lista-ficha > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--linha);
}

.lista-ficha > div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.lista-ficha dt {
  color: var(--cinza);
  font-size: 0.8125rem;
}

.lista-ficha dd {
  margin: 0;
  text-align: right;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* O peso volta ao normal: `.lista-ficha dd` é 600, e a nota em negrito
   competiria com o próprio dado que ela explica. */
.nota-ficha {
  display: block;
  margin-top: 0.125rem;
  color: var(--cinza);
  font-size: 0.75rem;
  font-weight: 400;
}

/* Fonte de dado nos identificadores: CPF mascarado, matrícula e SIAPE são
   números para conferir dígito a dígito, e a proporcional embaralha isso. */
.lista-ficha dd.dado {
  font-family: var(--dado);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

/* ---------- indicador de carregamento do HTMX ---------- */

/* A convencao que o proprio htmx documenta: o elemento comeca invisivel e
   aparece quando o ancestral ganha a classe `htmx-request`, que o htmx poe e
   tira sozinho durante a requisicao. Escrita aqui, e nao deixada para o
   `includeIndicatorStyles` automatico dele, para usar a mesma transicao suave
   do resto do sistema. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* A regiao que o HTMX troca por inteiro (referencial, etapa, habilidades)
   esmaece enquanto a troca esta a caminho - "estou trabalhando", sem
   acrescentar elemento nenhum a tela. So os elementos com `hx-get` mesmo: um
   `hx-post` com `hx-indicator` proprio (a secao) tem o sinal dele, dedicado. */
.htmx-request[hx-get] {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.acoes-secao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.aviso-salvando {
  color: var(--cinza);
  font-size: 0.875rem;
}