/* Infantinho 3 — protótipo de alta fidelidade
   Direção: mesa e mural de trabalho de uma comunidade (§8.3 da especificação)
   Materiais: quadro verde, papel quadriculado, lápis bicolor, carimbo de data */

:root {
  --quadro: #234b3f;
  --quadro-escuro: #1a3a30;
  --papel: #f6f4ec;
  --cartao: #ffffff;
  --tinta: #26241f;
  --tinta-suave: #5c574c;
  --lapis-azul: #2b5ba8;
  --lapis-azul-escuro: #1f4680;
  --lapis-vermelho: #c24e3a;
  --giz: #e9e4d6;
  --quadricula: #e3eaf3;

  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --corpo: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --caligrafia: "Edu SA Beginner", cursive;

  --sombra-cartao: 0 1px 2px rgba(38, 36, 31, 0.08), 0 4px 14px rgba(38, 36, 31, 0.06);
  --sombra-alta: 0 2px 4px rgba(38, 36, 31, 0.1), 0 10px 28px rgba(38, 36, 31, 0.12);
  --raio: 10px;
  --max: 68rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid var(--lapis-azul);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: #d8e4f5; }

/* ---------- estrutura ---------- */

.saltar {
  position: absolute; left: -999px; top: 0;
  background: var(--tinta); color: #fff; padding: 0.6rem 1rem;
  z-index: 99; border-radius: 0 0 8px 0;
}
.saltar:focus { left: 0; }

.topo {
  background: var(--quadro);
  color: #f2efe4;
  border-bottom: 4px solid var(--quadro-escuro);
}
.topo-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
}
.marca {
  font-family: var(--display);
  font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em;
  color: #fff; text-decoration: none;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.marca-turma {
  font-family: var(--corpo); font-weight: 500; font-size: 0.85rem;
  color: #c9d8ce; letter-spacing: 0.01em;
}
.topo nav { margin-left: auto; }
.topo nav ul { list-style: none; display: flex; gap: 0.25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.topo nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0.3rem 0.9rem;
  color: #e6e2d2; text-decoration: none; font-weight: 500;
  border-radius: 8px; border-bottom: 3px solid transparent;
}
.topo nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.topo nav a[aria-current="page"] {
  color: #fff; font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: #e8c766;
}
.chip-proto {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #0e2a22; background: #e8c766;
  padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 500;
}

main { max-width: var(--max); margin: 0 auto; padding: 2.25rem 1.25rem 4rem; }

.rodape {
  border-top: 1px solid var(--giz);
  background: #efece1;
  color: var(--tinta-suave); font-size: 0.9rem;
}
.rodape-inner { max-width: var(--max); margin: 0 auto; padding: 1.25rem; }

/* ---------- tipografia ---------- */

h1, h2, h3 { font-family: var(--display); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.5rem; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-weight: 600; margin-top: 2.5rem; }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0.4rem 0 1rem; }
a { color: var(--lapis-azul); text-underline-offset: 3px; }
a:hover { color: var(--lapis-azul-escuro); }

.entrada {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--tinta-suave); display: block; margin-bottom: 0.5rem;
}
.chumbo { max-width: 44rem; color: var(--tinta-suave); font-size: 1.1rem; }

/* carimbo de data — como um carimbo escolar */
.carimbo {
  display: inline-block;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lapis-azul); border: 1.5px solid currentColor;
  padding: 0.1rem 0.55rem; border-radius: 3px;
  transform: rotate(-1.5deg);
}
.carimbo--vermelho { color: var(--lapis-vermelho); }
.carimbo--verde { color: var(--quadro); }

/* nota manuscrita à margem — usar com extrema contenção */
.nota-margem {
  font-family: var(--caligrafia); font-size: 1.05rem; line-height: 1.4;
  color: var(--lapis-azul-escuro); transform: rotate(-0.8deg);
  max-width: 16rem;
}

/* ---------- mural (cartões afixados) ---------- */

.mural {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  margin-top: 1.5rem;
}

.afixado {
  position: relative;
  background: var(--cartao);
  border: 1px solid var(--giz);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
/* pionés */
.afixado::before {
  content: "";
  position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d9a0, #b98a2e 70%);
  box-shadow: 0 2px 3px rgba(38, 36, 31, 0.35);
}
a.afixado { text-decoration: none; color: inherit; }
a.afixado:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.afixado { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.afixado h3 { margin: 0.25rem 0 0.1rem; }
.afixado .de { color: var(--tinta-suave); font-size: 0.9rem; margin: 0; }
.afixado .resumo { margin: 0.25rem 0 0; font-size: 0.975rem; }

@keyframes assentar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.mural > * { animation: assentar 0.25s ease backwards; }
.mural > *:nth-child(2) { animation-delay: 0.04s; }
.mural > *:nth-child(3) { animation-delay: 0.08s; }
.mural > *:nth-child(4) { animation-delay: 0.12s; }
.mural > *:nth-child(5) { animation-delay: 0.16s; }
.mural > *:nth-child(6) { animation-delay: 0.2s; }

/* vinheta SVG no topo do cartão */
.vinheta {
  height: 5.5rem; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--giz); background: #fbfaf5;
}
.vinheta svg { max-height: 4rem; }
.vinheta--grande svg { max-height: 9.5rem; }

/* ---------- etiquetas de estado (forma + texto, nunca só cor) ---------- */

.estado {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.15rem 0.65rem; border-radius: 999px; border: 1.5px solid;
  width: fit-content;
}
.estado::before { font-size: 0.9em; }
.estado--publicado { color: var(--quadro); border-color: var(--quadro); background: #eef4ef; }
.estado--publicado::before { content: "●"; }
.estado--aguarda { color: #8a3a2a; border-color: var(--lapis-vermelho); background: #faf0ed; }
.estado--aguarda::before { content: "◐"; }
.estado--ativo { color: var(--lapis-azul-escuro); border-color: var(--lapis-azul); background: #eef3fa; }
.estado--ativo::before { content: "●"; }
.estado--suspenso { color: var(--tinta-suave); border-color: #b7b09e; background: #f2f0e8; }
.estado--suspenso::before { content: "○"; }

/* ---------- listas: as três superfícies ---------- */

.superficies { margin-top: 1.5rem; }
.superficies-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  border-bottom: 2px solid var(--giz); padding-bottom: 0.75rem;
}
.superficies-tabs button {
  font: inherit; font-weight: 600; cursor: pointer;
  min-height: 44px; padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--giz); border-radius: 8px;
  background: var(--cartao); color: var(--tinta);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.superficies-tabs button:hover { border-color: var(--lapis-azul); }
.superficies-tabs button[aria-selected="true"] {
  background: var(--tinta); color: #fff; border-color: var(--tinta);
}
.superficie { margin-top: 1.5rem; }
.superficie[hidden] { display: none; }

/* superfície 1: projeção (quadro) */
.projecao {
  background: var(--quadro); color: #f2efe4;
  border-radius: var(--raio); padding: 2.25rem clamp(1.25rem, 4vw, 3rem);
  border: 6px solid #5b4a33; /* moldura de madeira do quadro */
  box-shadow: var(--sombra-alta);
}
.projecao h3 {
  color: #fff; font-size: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 2px solid rgba(255, 255, 255, 0.25); padding-bottom: 0.75rem;
}
.projecao ol { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.projecao li {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.45;
  padding: 0.7rem 0; display: flex; gap: 0.9rem; align-items: baseline;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}
.projecao li strong { color: #e8c766; font-family: var(--mono); font-size: 0.8em; }
.projecao .foco {
  background: rgba(232, 199, 102, 0.14); border-left: 4px solid #e8c766;
  padding-left: 0.9rem; border-radius: 0 6px 6px 0;
}
.projecao .legenda-quadro {
  margin-top: 1.5rem; font-size: 0.95rem; color: #c9d8ce;
}

/* superfície 2: caderno do aluno (papel quadriculado) */
.caderno {
  background:
    linear-gradient(var(--quadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--quadricula) 1px, transparent 1px),
    #fff;
  background-size: 24px 24px;
  border: 1px solid var(--giz); border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.objetivo {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--giz); border-radius: 8px;
  padding: 1rem 1.1rem; margin-bottom: 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  align-items: center; justify-content: space-between;
}
.objetivo p { margin: 0; font-weight: 500; flex: 1 1 16rem; }
.tristado { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.tristado label {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.35rem 0.8rem; cursor: pointer;
  border: 1.5px solid #b7b09e; border-radius: 8px;
  font-size: 0.9rem; font-weight: 500; background: #fff;
}
.tristado input {
  position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0;
  margin: 0; cursor: pointer;
}
.tristado label:has(input:focus-visible) {
  outline: 3px solid var(--lapis-azul); outline-offset: 2px;
}
.tristado label:has(input:checked) {
  border-color: var(--tinta); background: var(--tinta); color: #fff;
}
.tristado .simbolo { font-size: 1.05em; }

/* superfície 3: folha para imprimir */
.folha-wrap { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.folha {
  background: #fff; border: 1px solid var(--giz); border-radius: 4px;
  box-shadow: var(--sombra-cartao);
  width: min(100%, 38rem);
  padding: 2rem 2.25rem;
  font-size: 0.95rem;
}
.folha h3 { font-size: 1.15rem; }
.folha table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.folha th, .folha td { border: 1px solid #999; padding: 0.5rem 0.6rem; text-align: left; }
.folha th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.folha .quadradinho {
  display: inline-block; width: 1.05rem; height: 1.05rem;
  border: 1.5px solid var(--tinta); border-radius: 3px; vertical-align: middle;
}
.folha .picotado {
  margin-top: 1.5rem; border-top: 2px dashed #999; padding-top: 0.5rem;
  font-size: 0.8rem; color: var(--tinta-suave);
  display: flex; align-items: center; gap: 0.5rem;
}

/* botões */
.botao {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  min-height: 44px; padding: 0.55rem 1.3rem;
  background: var(--lapis-azul); color: #fff;
  border: 0; border-radius: 8px;
}
.botao:hover { background: var(--lapis-azul-escuro); color: #fff; }
.botao--secundario {
  background: transparent; color: var(--tinta);
  border: 1.5px solid #b7b09e;
}
.botao--secundario:hover { border-color: var(--tinta); background: #fff; color: var(--tinta); }

/* ---------- blogue ---------- */

.post-lista { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); margin-top: 1.5rem; }

.artigo { max-width: 46rem; }
.artigo-meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center;
  color: var(--tinta-suave); font-size: 0.9rem; margin-bottom: 1.5rem;
}
.aprovacao {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: #eef4ef; border: 1px solid #cfdfd2; border-radius: 8px;
  padding: 0.8rem 1rem; font-size: 0.9rem; color: #23423a;
  margin: 1.5rem 0;
}

/* comentários estruturados */
.comentarios { margin-top: 2.5rem; border-top: 2px solid var(--giz); padding-top: 1.5rem; }
.comentario {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.comentario-tipo {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  writing-mode: horizontal-tb;
  align-self: start;
  padding: 0.2rem 0.5rem; border-radius: 4px; margin-top: 0.15rem;
}
.tipo-aprendi { background: #eef4ef; color: var(--quadro); border: 1px solid #cfdfd2; }
.tipo-pergunto { background: #eef3fa; color: var(--lapis-azul-escuro); border: 1px solid #cdddf1; }
.tipo-sugiro { background: #faf3e6; color: #7a5a1c; border: 1px solid #ecdcb8; }
.comentario-corpo p { margin: 0; }
.comentario-corpo .quem { font-size: 0.85rem; color: var(--tinta-suave); }

.compositor {
  background: var(--cartao); border: 1px solid var(--giz); border-radius: var(--raio);
  padding: 1.25rem; box-shadow: var(--sombra-cartao); margin-top: 1.5rem;
}
.compositor-tipos { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.compositor-tipos label {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0.4rem 1rem; cursor: pointer;
  border: 1.5px solid #b7b09e; border-radius: 999px; font-weight: 600; font-size: 0.92rem;
  background: #fff;
}
.compositor-tipos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.compositor-tipos label:has(input:checked) { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.compositor-tipos label:has(input:focus-visible) { outline: 3px solid var(--lapis-azul); outline-offset: 2px; }
.compositor textarea {
  width: 100%; min-height: 5.5rem; resize: vertical;
  font: inherit; color: inherit; padding: 0.75rem;
  border: 1.5px solid #b7b09e; border-radius: 8px; background: #fff;
}
.compositor .acoes { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; }
.compositor .aviso { font-size: 0.85rem; color: var(--tinta-suave); margin: 0; }

/* ---------- projeto ---------- */

.projeto-cab {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  margin-bottom: 1rem;
}
@media (min-width: 52rem) { .projeto-cab { grid-template-columns: 1.6fr 1fr; align-items: start; } }

.ficha {
  background: var(--cartao); border: 1px solid var(--giz); border-radius: var(--raio);
  box-shadow: var(--sombra-cartao); padding: 1.25rem;
}
.ficha dl { margin: 0; display: grid; gap: 0.7rem; }
.ficha dt {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--tinta-suave);
}
.ficha dd { margin: 0.1rem 0 0; font-weight: 500; }

.pessoas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pessoa {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: #f0eee5; border: 1px solid var(--giz); border-radius: 999px;
  padding: 0.25rem 0.8rem 0.25rem 0.3rem; font-size: 0.9rem; font-weight: 500;
}
.pessoa .inicial {
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--quadro); color: #fff;
  font-family: var(--display); font-size: 0.8rem; font-weight: 600;
}
.pessoa--docente .inicial { background: var(--lapis-azul); }

.plano-tabela { width: 100%; border-collapse: collapse; margin-top: 0.75rem; background: var(--cartao); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-cartao); }
.plano-tabela th, .plano-tabela td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--giz); text-align: left; vertical-align: top; }
.plano-tabela th {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--tinta-suave); font-weight: 500;
  background: #f0eee5;
}
.plano-tabela tr:last-child td { border-bottom: 0; }
.tabela-scroll { overflow-x: auto; }

/* diário de sessões */
.sessoes { list-style: none; margin: 1rem 0 0; padding: 0; position: relative; }
.sessoes::before {
  content: ""; position: absolute; left: 0.55rem; top: 0.5rem; bottom: 0.5rem;
  width: 2px; background: var(--giz);
}
.sessao { position: relative; padding: 0 0 1.5rem 2.2rem; }
.sessao::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.35rem;
  width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--papel); border: 2.5px solid var(--lapis-azul);
}
.sessao--tic::before { border-color: var(--quadro); }
.sessao-cab { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin-bottom: 0.2rem; }
.sessao-onde {
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--tinta-suave);
}
.sessao p { margin: 0.2rem 0 0; }

/* ---------- impressão: só a folha ---------- */

@media print {
  body { background: #fff; }
  .topo, .rodape, .superficies-tabs, .nao-imprimir, .saltar { display: none !important; }
  main { padding: 0; max-width: none; }
  .superficie[hidden] { display: none !important; }
  .folha { box-shadow: none; border: 0; width: 100%; padding: 0; }
  .folha-wrap .botao { display: none; }
}

@media (max-width: 40rem) {
  .topo nav { margin-left: 0; width: 100%; }
  .comentario { grid-template-columns: 1fr; }
}