/* em-obra.css — A TELA QUE DIZ "esta home está em criação".
 *
 * Dispositivo de PROTÓTIPO, e não componente de produto: existe só enquanto a
 * home nova estiver passando pelas etapas, e sai do repositório junto com o
 * `data-visao="dev"` que a envolve. Por isso mora num arquivo próprio, em vez
 * de engordar css/styles.css com algo que vai ser apagado.
 *
 * POR QUE ELA EXISTE. As homes do GESTOR e do ADMIN LEKTO vivem inteiras no
 * Futuro — desde 23/09/2026 (Gustavo), o herói da home do professor aplicado
 * ao contexto de cada um; antes disso, quadros de widgets, que saíram. Deixar
 * uma versão no Pronto pra DEV mandaria implementar uma tela que ainda está em
 * desenho — a confusão que o par de visões existe para acabar. Então ele fica
 * com o aviso: esta home está em criação, e o desenho vivo está do outro lado
 * do interruptor. A Formação e a Avaliação usam o mesmo aviso pelo mesmo motivo.
 *
 * A HOME DO PROFESSOR NÃO USA ISTO, de propósito. Lá o Pronto pra DEV tem
 * conteúdo aprovado e implementável — as fileiras de conteúdos atribuídos,
 * recomendados e turmas —, e o Futuro serve outra Início, a landing. Placeholder
 * só onde não há o que entregar; onde há, trocar por um aviso de obra seria
 * esconder trabalho pronto.
 *
 * Só tokens; lint-design.mjs vigia este arquivo.
 */

.obra {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(62vh, 520px);
  padding: var(--spacing-xl) var(--spacing-md);
}

/* A borda TRACEJADA é o que dá o recado antes de qualquer texto: linha cheia
   parece componente pronto, e este bloco precisa parecer andaime. */
.obra__cx {
  max-width: 560px;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  border: 1.5px dashed var(--theme-border-subtle);
  border-radius: var(--border-radius-md);
  background: var(--theme-surface-muted);
}

.obra__ic {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--spacing-sm);
  border-radius: var(--border-radius-sm-14);
  background: var(--color-primary-tinted);
  color: var(--color-primary-dark);
}
.obra__ic svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.obra__t {
  font-family: var(--theme-font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--theme-text-heading);
  letter-spacing: -0.01em;
}

.obra__p {
  margin-top: var(--spacing-xxs);
  font-size: var(--font-size-xs);
  line-height: 1.55;
  color: var(--color-surface-pure);
}
.obra__p b { font-weight: var(--font-weight-bold); color: var(--theme-text-heading); }

/* O botão leva ao desenho vivo em vez de pedir que a pessoa ache o
   interruptor da barra do protótipo. Troca AO VIVO (LektoVisao.set), sem
   recarregar: recarregar devolveria a demonstração ao começo. */
.obra__b {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xquark);
  margin-top: var(--spacing-md);
  padding: var(--spacing-xxs) var(--spacing-sm);
  font-family: var(--theme-font-family-base);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  color: var(--color-essence-ivory);
  background: var(--color-primary-pure);
  border: 0;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  transition: background var(--motion-dur-fast) var(--motion-ease);
}
.obra__b:hover { background: var(--color-primary-dark); }
.obra__b svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.obra__n {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-xxs);
  border-top: 1px solid var(--theme-border-subtle);
  font-size: var(--font-size-xxxs);
  line-height: 1.5;
  color: var(--theme-text-muted);
}
.obra__n a { color: var(--color-primary-dark); font-weight: var(--font-weight-bold); }

@media (prefers-reduced-motion: reduce) {
  .obra__b { transition: none; }
}