/* Infantinho 3 — protótipo, variante 2: «Caderno escolar»
   Direção: folha de caderno pautada sobre a mesa, margem vermelha vertical,
   títulos manuscritos (Caveat), destaques Shantell Sans, corpo Nunito (legível),
   cartões como autocolantes/recortes presos com fita-cola, cores de lápis de cor.
   Acolhedor e tátil, com contraste AA em todo o texto. */

:root {
  /* papel e mesa */
  --papel-mesa: #ecdfc6;        /* tampo/cartolina por trás da folha */
  --papel: #fdfaf0;             /* folha de caderno */
  --papel-quente: #f8f1de;
  --cartao: #fffdf6;            /* autocolante / recorte branco */
  --linha-pauta: #d9e4ee;       /* pauta azul clarinha */
  --margem-vermelha: #e2695b;   /* linha de margem */

  /* tinta e lápis de cor (todos os tons de texto passam AA sobre os fundos usados) */
  --tinta: #322e26;
  --tinta-suave: #5b5546;
  --giz: #e6dcc4;               /* contornos suaves (nome mantido: usado em estilos inline) */
  --lapis-vermelho: #b5382b;
  --lapis-vermelho-escuro: #8f2b20;
  --lapis-azul: #2456a6;
  --lapis-azul-escuro: #1a4283;
  --lapis-verde: #2f6b3a;
  --lapis-verde-escuro: #24522d;
  --lapis-ambar: #7a531a;       /* amarelo-torrado para texto */
  --amarelo-autocolante: #f2c94c;
  --capa: #8f3a2b;              /* capa do caderno (terracota) */
  --capa-escura: #6f2a1f;

  /* fitas-cola (washi) */
  --fita-amarela: rgba(242, 201, 76, 0.8);
  --fita-azul: rgba(157, 195, 230, 0.8);
  --fita-rosa: rgba(239, 168, 160, 0.8);
  --fita-verde: rgba(168, 213, 171, 0.85);

  --manuscrita: "Caveat", "Comic Sans MS", cursive;
  --destaque: "Shantell Sans", "Trebuchet MS", system-ui, sans-serif;
  --corpo: "Nunito", "Segoe UI", system-ui, sans-serif;

  --sombra-recorte: 0 1px 2px rgba(50, 46, 38, 0.1), 0 5px 14px rgba(50, 46, 38, 0.08);
  --sombra-alta: 0 2px 4px rgba(50, 46, 38, 0.12), 0 12px 28px rgba(50, 46, 38, 0.16);
  --raio-recorte: 8px 14px 9px 15px; /* cantos ligeiramente irregulares, como recortado à tesoura */
  --pauta: 2.1rem;
  --margem-x: 4.4rem;           /* distância da margem vermelha ao bordo da folha */
  --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;
  /* mesa de trabalho: cartolina com um leve grão pontilhado */
  background:
    radial-gradient(rgba(50, 46, 38, 0.05) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--papel-mesa);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: #f6dd9d; }

/* ---------- estrutura: capa, folha, rodapé ---------- */

.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; }

/* o topo é a capa do caderno */
.topo {
  background:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.06)),
    var(--capa);
  color: #fbe9dd;
}
.topo-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
}

/* a marca é uma etiqueta branca colada na capa, escrita à mão */
.marca {
  font-family: var(--manuscrita);
  font-weight: 700; font-size: 1.75rem; line-height: 1.05;
  color: var(--tinta); text-decoration: none;
  background: var(--cartao);
  padding: 0.2rem 0.95rem 0.3rem;
  border-radius: 4px 12px 6px 10px;
  transform: rotate(-1.4deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
  display: inline-flex; align-items: baseline; gap: 0.6rem;
}
.marca:hover { transform: rotate(0deg); }
.marca-turma {
  font-family: var(--destaque); font-weight: 500; font-size: 0.68rem;
  color: var(--tinta-suave); letter-spacing: 0.08em; text-transform: uppercase;
}

.topo nav { margin-left: auto; }
.topo nav ul { list-style: none; display: flex; gap: 0.35rem; margin: 0; padding: 0; flex-wrap: wrap; }
.topo nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0.3rem 0.95rem;
  color: #fbe9dd; text-decoration: none;
  font-family: var(--destaque); font-weight: 500; font-size: 0.94rem;
  border-radius: 10px 12px 10px 13px;
  border: 1.5px solid transparent;
}
.topo nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.topo nav a[aria-current="page"] {
  color: var(--capa-escura); font-weight: 700;
  background: var(--papel);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* autocolante amarelo do protótipo, com rebordo branco de autocolante */
.chip-proto {
  font-family: var(--destaque); font-size: 0.64rem; letter-spacing: 0.09em;
  text-transform: uppercase; font-weight: 700;
  color: #4a3208; background: var(--amarelo-autocolante);
  padding: 0.3rem 0.7rem; border-radius: 999px;
  box-shadow: 0 0 0 3px #fffdf6, 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: rotate(2deg);
}

/* lombada / fita de sessão */
.barra-sessao {
  background: var(--capa-escura);
  border-top: 2px dashed rgba(255, 255, 255, 0.25);
}
.barra-sessao-inner {
  max-width: var(--max); margin: 0 auto; padding: 0.5rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center;
  font-size: 0.85rem; color: #f3d9c8;
}
.barra-sessao a { color: #ffe3cf; text-underline-offset: 3px; }
.barra-sessao a:hover { color: #fff; }
.barra-sessao .empurra { margin-left: auto; display: flex; gap: 1.25rem; }
.chip-sessao {
  font-family: var(--destaque); font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700;
  padding: 0.22rem 0.65rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.28); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.chip-sessao--privado { background: var(--lapis-verde); border-color: rgba(255, 255, 255, 0.4); }

/* a folha de caderno: pauta azul, margem vermelha, furos de argolas */
main {
  position: relative;
  max-width: var(--max);
  margin: 1.75rem auto 3.25rem;
  padding: 2.5rem 1.75rem 4rem calc(var(--margem-x) + 1.4rem);
  background-color: var(--papel);
  background-image:
    radial-gradient(circle, var(--papel-mesa) 0 0.42rem, rgba(50, 46, 38, 0.22) 0.42rem 0.5rem, transparent 0.55rem),
    radial-gradient(circle, var(--papel-mesa) 0 0.42rem, rgba(50, 46, 38, 0.22) 0.42rem 0.5rem, transparent 0.55rem),
    radial-gradient(circle, var(--papel-mesa) 0 0.42rem, rgba(50, 46, 38, 0.22) 0.42rem 0.5rem, transparent 0.55rem),
    linear-gradient(90deg, transparent var(--margem-x), var(--margem-vermelha) var(--margem-x), var(--margem-vermelha) calc(var(--margem-x) + 2px), transparent calc(var(--margem-x) + 2px)),
    repeating-linear-gradient(180deg, transparent, transparent calc(var(--pauta) - 1px), var(--linha-pauta) calc(var(--pauta) - 1px), var(--linha-pauta) var(--pauta));
  background-position: 1.05rem 12%, 1.05rem 50%, 1.05rem 88%, 0 0, 0 0.55rem;
  background-size: 2rem 2rem, 2rem 2rem, 2rem 2rem, 100% 100%, 100% var(--pauta);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
  border-radius: 4px 12px 10px 6px;
  box-shadow: var(--sombra-recorte);
}

.rodape {
  color: var(--tinta-suave); font-size: 0.9rem;
}
.rodape-inner { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem 2rem; }

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

h1, h2 { font-family: var(--manuscrita); line-height: 1.05; margin: 0 0 0.5rem; color: var(--tinta); }
h1 { font-size: clamp(2.5rem, 5.5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.3rem); font-weight: 600; margin-top: 2.75rem; }
/* traço de lápis de cera por baixo dos títulos de secção */
h2::after {
  content: ""; display: block; width: 4rem; height: 0.3rem; margin-top: 0.2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--margem-vermelha), #f2b556);
  opacity: 0.85;
}
h3 {
  font-family: var(--destaque); font-weight: 700; font-size: 1.05rem;
  line-height: 1.3; margin: 0 0 0.5rem;
}
p { margin: 0.4rem 0 1rem; }
a { color: var(--lapis-azul); text-underline-offset: 3px; }
a:hover { color: var(--lapis-azul-escuro); }

/* “escrito na margem, a vermelho” */
.entrada {
  font-family: var(--destaque); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--lapis-vermelho); display: block; margin-bottom: 0.5rem;
}
.chumbo { max-width: 44rem; color: var(--tinta-suave); font-size: 1.1rem; }

/* carimbo de data escolar */
.carimbo {
  display: inline-block;
  font-family: var(--destaque); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lapis-azul); border: 1.5px dashed currentColor;
  background: rgba(255, 255, 255, 0.65);
  padding: 0.12rem 0.55rem; border-radius: 4px;
  transform: rotate(-2deg);
}
.carimbo--vermelho { color: var(--lapis-vermelho); }
.carimbo--verde { color: var(--lapis-verde); }

/* nota manuscrita à margem — com contenção */
.nota-margem {
  font-family: var(--manuscrita); font-size: 1.35rem; line-height: 1.25;
  font-weight: 500;
  color: var(--lapis-azul-escuro); transform: rotate(-1.2deg);
  max-width: 17rem;
}

/* ---------- mural: recortes colados com fita-cola ---------- */

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

.afixado {
  position: relative;
  background: var(--cartao);
  border: 1px solid #e0d5b6;
  border-radius: var(--raio-recorte);
  box-shadow: var(--sombra-recorte);
  padding: 1.6rem 1.25rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
/* fita-cola no topo de cada recorte */
.afixado::before {
  content: "";
  position: absolute; top: -0.75rem; left: 50%;
  width: 5.5rem; height: 1.5rem;
  transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(45deg, var(--fita-amarela) 0 9px, rgba(242, 201, 76, 0.62) 9px 18px);
  border-left: 2px dotted rgba(255, 255, 255, 0.55);
  border-right: 2px dotted rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(50, 46, 38, 0.18);
}
/* fitas de cores variadas e recortes ligeiramente tortos, como num caderno verdadeiro */
.mural > *:nth-child(odd), .post-lista > *:nth-child(odd) { transform: rotate(-0.5deg); }
.mural > *:nth-child(even), .post-lista > *:nth-child(even) { transform: rotate(0.55deg); }
.mural > *:nth-child(4n+2)::before, .post-lista > *:nth-child(4n+2)::before {
  background: repeating-linear-gradient(45deg, var(--fita-azul) 0 9px, rgba(157, 195, 230, 0.6) 9px 18px);
  transform: translateX(-50%) rotate(2.5deg);
}
.mural > *:nth-child(4n+3)::before, .post-lista > *:nth-child(4n+3)::before {
  background: repeating-linear-gradient(45deg, var(--fita-rosa) 0 9px, rgba(239, 168, 160, 0.6) 9px 18px);
}
.mural > *:nth-child(4n)::before, .post-lista > *:nth-child(4n)::before {
  background: repeating-linear-gradient(45deg, var(--fita-verde) 0 9px, rgba(168, 213, 171, 0.62) 9px 18px);
  transform: translateX(-50%) rotate(2deg);
}
a.afixado { text-decoration: none; color: inherit; }
a.afixado:hover {
  box-shadow: var(--sombra-alta);
  transform: rotate(0deg) translateY(-3px) !important;
}
.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.96rem; }

@keyframes colar {
  from { opacity: 0; transform: translateY(8px) rotate(0deg); }
}
.mural > *, .post-lista > * { animation: colar 0.25s ease backwards; }
.mural > *:nth-child(2), .post-lista > *:nth-child(2) { animation-delay: 0.04s; }
.mural > *:nth-child(3), .post-lista > *:nth-child(3) { animation-delay: 0.08s; }
.mural > *:nth-child(4), .post-lista > *:nth-child(4) { animation-delay: 0.12s; }
.mural > *:nth-child(5), .post-lista > *:nth-child(5) { animation-delay: 0.16s; }
.mural > *:nth-child(6), .post-lista > *:nth-child(6) { animation-delay: 0.2s; }

/* vinheta: desenho colado, como fotografia/recorte */
.vinheta {
  height: 5.5rem;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--giz);
  border-radius: 3px 6px 4px 7px;
  box-shadow: 0 1px 3px rgba(50, 46, 38, 0.08);
  transform: rotate(0.4deg);
}
.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.8rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.15rem 0.7rem; border-radius: 999px; border: 1.5px solid;
  width: fit-content; background: #fff;
}
.estado::before { font-size: 0.9em; }
.estado--publicado, .estado--publico { color: var(--lapis-verde-escuro); border-color: var(--lapis-verde); background: #e8f2e5; }
.estado--publicado::before, .estado--publico::before { content: "●"; }
.estado--aguarda { color: var(--lapis-vermelho-escuro); border-color: var(--lapis-vermelho); background: #fbeae6; }
.estado--aguarda::before { content: "◐"; }
.estado--ativo, .estado--turma { color: var(--lapis-azul-escuro); border-color: var(--lapis-azul); background: #e8eff9; }
.estado--ativo::before { content: "●"; }
.estado--turma::before { content: "◉"; }
.estado--suspenso { color: var(--tinta-suave); border-color: #b3a888; background: #f2ecda; }
.estado--suspenso::before { content: "○"; }
.estado--proposto { color: var(--lapis-ambar); border-color: #d9a441; background: #fbf0d6; }
.estado--proposto::before { content: "◐"; }

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

.superficies { margin-top: 1.75rem; }
/* separadores como abas de caderno */
.superficies-tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  border-bottom: 2.5px solid #d8c9a4; padding: 0 0.5rem;
}
.superficies-tabs button {
  font-family: var(--destaque); font-size: 0.92rem; font-weight: 500; cursor: pointer;
  min-height: 44px; padding: 0.55rem 1.1rem;
  border: 1.5px solid #d8c9a4; border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--papel-quente); color: var(--tinta);
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0;
}
.superficies-tabs button:hover { border-color: var(--lapis-azul); color: var(--lapis-azul-escuro); }
.superficies-tabs button[aria-selected="true"] {
  background: var(--lapis-azul); color: #fff; border-color: var(--lapis-azul);
  font-weight: 700;
}
.superficie { margin-top: 1.5rem; }
.superficie[hidden] { display: none; }

/* superfície 1: o quadro da sala (objeto da sala desenhado sobre a folha) */
.projecao {
  background: #29584a; color: #f2efe2;
  border-radius: 6px; padding: 2.25rem clamp(1.25rem, 4vw, 3rem);
  border: 8px solid #7c5a35; /* moldura de madeira */
  outline: 2px solid #5d4225;
  box-shadow: var(--sombra-alta);
}
.projecao h3 {
  color: #fff; font-family: var(--manuscrita); font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  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.1rem, 2.4vw, 1.4rem); 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.2);
}
.projecao li strong {
  color: var(--amarelo-autocolante); font-family: var(--destaque);
  font-size: 0.78em; font-weight: 700;
}
.projecao .foco {
  background: rgba(242, 201, 76, 0.16); border-left: 4px solid var(--amarelo-autocolante);
  padding-left: 0.9rem; border-radius: 0 6px 6px 0;
}
.projecao .legenda-quadro { margin-top: 1.5rem; font-size: 0.95rem; color: #cfe0d5; }

/* superfície 2: página quadriculada onde cada um marca */
.caderno {
  background:
    linear-gradient(var(--linha-pauta) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha-pauta) 1px, transparent 1px),
    #fff;
  background-size: 24px 24px;
  border: 1px solid #e0d5b6; border-radius: var(--raio-recorte);
  box-shadow: var(--sombra-recorte);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.objetivo {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--giz); border-radius: 6px 10px 7px 11px;
  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: 600; 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 #b3a888; border-radius: 8px 11px 9px 12px;
  font-size: 0.9rem; font-weight: 600; 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(--lapis-azul-escuro); background: var(--lapis-azul); color: #fff;
}
.tristado .simbolo { font-size: 1.05em; }

/* superfície 3: folha para imprimir e colar no caderno */
.folha-wrap { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.folha {
  background: #fff; border: 1px solid var(--giz); border-radius: 3px;
  box-shadow: var(--sombra-recorte);
  width: min(100%, 38rem);
  padding: 2rem 2.25rem;
  font-size: 0.95rem;
}
.folha h3 { font-size: 1.1rem; }
.folha table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.folha th, .folha td { border: 1px solid #8f8877; padding: 0.5rem 0.6rem; text-align: left; }
.folha th {
  font-family: var(--destaque); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.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 #8f8877; padding-top: 0.5rem;
  font-size: 0.8rem; color: var(--tinta-suave);
  display: flex; align-items: center; gap: 0.5rem;
}

/* botões — traço de marcador, cantos irregulares */
.botao {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--corpo); font-size: 1rem; font-weight: 700; cursor: pointer;
  text-decoration: none;
  min-height: 44px; padding: 0.55rem 1.35rem;
  background: var(--lapis-azul); color: #fff;
  border: 0; border-radius: 12px 15px 13px 16px;
  box-shadow: 0 2px 0 var(--lapis-azul-escuro);
}
.botao:hover { background: var(--lapis-azul-escuro); color: #fff; }
.botao--secundario {
  background: rgba(255, 255, 255, 0.7); color: var(--tinta);
  border: 2px solid #b3a888; box-shadow: none;
}
.botao--secundario:hover { border-color: var(--tinta); background: #fff; color: var(--tinta); }

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

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

.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;
}

/* nota verde de aprovação, como papel colado */
.aprovacao {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: #e8f2e5; border: 1px solid #bcd8b9; border-radius: 4px 10px 6px 9px;
  padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--lapis-verde-escuro);
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px rgba(50, 46, 38, 0.08);
}
.aprovacao a { color: var(--lapis-verde-escuro); font-weight: 700; }

/* comentários estruturados */
.comentarios { margin-top: 2.5rem; border-top: 2px dashed #d8c9a4; padding-top: 1.5rem; }
.comentario {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.comentario-tipo {
  font-family: var(--destaque); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  align-self: start;
  padding: 0.25rem 0.55rem; border-radius: 999px; margin-top: 0.15rem;
  box-shadow: 0 0 0 2px #fffdf6, 0 1px 2px rgba(50, 46, 38, 0.15);
  transform: rotate(-1.5deg);
}
.tipo-aprendi { background: #dcecd8; color: var(--lapis-verde-escuro); border: 1px solid #a9cca4; }
.tipo-pergunto { background: #dce7f6; color: var(--lapis-azul-escuro); border: 1px solid #a9c2e4; }
.tipo-sugiro { background: #f8e9c4; color: var(--lapis-ambar); border: 1px solid #e0c07a; }
.comentario-corpo p { margin: 0; }
.comentario-corpo .quem { font-size: 0.85rem; color: var(--tinta-suave); }

.compositor {
  position: relative;
  background: var(--cartao); border: 1px solid #e0d5b6; border-radius: var(--raio-recorte);
  padding: 1.4rem 1.25rem 1.25rem; box-shadow: var(--sombra-recorte); margin-top: 1.75rem;
}
.compositor::before {
  content: "";
  position: absolute; top: -0.7rem; left: 2rem;
  width: 4.5rem; height: 1.4rem; transform: rotate(-2.5deg);
  background: repeating-linear-gradient(45deg, var(--fita-azul) 0 9px, rgba(157, 195, 230, 0.6) 9px 18px);
  border-left: 2px dotted rgba(255, 255, 255, 0.55);
  border-right: 2px dotted rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(50, 46, 38, 0.18);
}
.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 #b3a888; border-radius: 999px; font-weight: 700; 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(--lapis-azul-escuro); background: var(--lapis-azul); color: #fff; }
.compositor-tipos label:has(input:focus-visible) { outline: 3px solid var(--lapis-azul); outline-offset: 2px; }
/* a caixa de escrita tem pauta, como o caderno */
.compositor textarea {
  width: 100%; min-height: 6rem; resize: vertical;
  font: inherit; color: inherit; line-height: 1.9rem;
  padding: 0.35rem 0.75rem;
  border: 1.5px solid #b3a888; border-radius: 8px;
  background:
    repeating-linear-gradient(180deg, transparent, transparent calc(1.9rem - 1px), var(--linha-pauta) calc(1.9rem - 1px), var(--linha-pauta) 1.9rem)
    0 0.45rem / 100% 1.9rem local,
    #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; } }

/* a ficha é um cartão preso com fita-cola */
.ficha {
  position: relative;
  background: var(--cartao); border: 1px solid #e0d5b6; border-radius: var(--raio-recorte);
  box-shadow: var(--sombra-recorte); padding: 1.5rem 1.25rem 1.25rem;
  transform: rotate(0.4deg);
}
.ficha::before {
  content: "";
  position: absolute; top: -0.75rem; left: 50%;
  width: 5rem; height: 1.5rem; transform: translateX(-50%) rotate(2deg);
  background: repeating-linear-gradient(45deg, var(--fita-verde) 0 9px, rgba(168, 213, 171, 0.62) 9px 18px);
  border-left: 2px dotted rgba(255, 255, 255, 0.55);
  border-right: 2px dotted rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(50, 46, 38, 0.18);
}
.ficha dl { margin: 0; display: grid; gap: 0.7rem; }
.ficha dt {
  font-family: var(--destaque); font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--lapis-vermelho);
}
.ficha dd { margin: 0.1rem 0 0; font-weight: 600; }

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

.plano-tabela {
  width: 100%; border-collapse: collapse; margin-top: 0.75rem;
  background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: var(--sombra-recorte);
}
.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(--destaque); font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--tinta-suave); font-weight: 700;
  background: var(--papel-quente);
}
.plano-tabela tr:last-child td { border-bottom: 0; }
.tabela-scroll { overflow-x: auto; }

/* diário de sessões — linha de costura tracejada */
.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: 0; border-left: 2px dashed #c9bd9c;
}
.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(--lapis-verde); }
.sessao-cab { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin-bottom: 0.2rem; }
.sessao-onde {
  font-family: var(--destaque); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-suave);
}
.sessao p { margin: 0.2rem 0 0; }

/* ---------- fases do trabalho (combinadas em conselho) ---------- */

.fases { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; counter-reset: fase; }
.fase {
  counter-increment: fase;
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1.5px solid #dcd2b4; border-radius: 999px;
  background: #fff; padding: 0.3rem 0.85rem 0.3rem 0.4rem;
  font-size: 0.85rem; font-weight: 600;
}
.fase::before {
  content: counter(fase);
  font-family: var(--destaque); font-size: 0.7rem; font-weight: 700;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--papel-quente); color: var(--tinta-suave);
}
.fase--feita { border-color: #a9cca4; background: #e8f2e5; color: var(--lapis-verde-escuro); }
.fase--feita::before { content: "✓"; background: var(--lapis-verde); color: #fff; }
.fase--atual { border-color: var(--lapis-azul); box-shadow: 0 0 0 3px #d5e2f5; }
.fase--atual::before { background: var(--lapis-azul); color: #fff; }

/* ---------- registo de trabalho dos projetos (matriz) ---------- */

.registo { width: 100%; border-collapse: collapse; background: #fff; box-shadow: var(--sombra-recorte); font-size: 0.9rem; }
.registo th, .registo td { border: 1px solid #ddd2b3; padding: 0.45rem 0.55rem; text-align: center; }
.registo th { background: var(--papel-quente); font-weight: 700; }
.registo th.vertical {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--destaque); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave);
  padding: 0.6rem 0.3rem; min-width: 2rem; height: 7.5rem; vertical-align: bottom;
}
.registo td.tema, .registo th.tema { text-align: left; font-weight: 700; min-width: 11rem; }
.registo td.grupo { text-align: left; color: var(--tinta-suave); font-size: 0.85rem; min-width: 8rem; }
.registo .feita { color: var(--lapis-verde); font-weight: 700; }
.registo .atual { color: var(--lapis-azul); background: #e8eff9; font-weight: 700; }
.registo .porfazer { color: #6e6350; }
.registo tfoot td { border: 0; padding-top: 0.6rem; text-align: left; color: var(--tinta-suave); font-size: 0.82rem; }

/* ---------- editor da ficha (modo professor) ---------- */

.editor-grelha { display: grid; gap: 1.75rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 56rem) { .editor-grelha { grid-template-columns: 1.7fr 1fr; align-items: start; } }

.campo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  background: var(--cartao); border: 1px solid #e0d5b6; border-radius: 7px 12px 8px 13px;
  box-shadow: var(--sombra-recorte); padding: 0.8rem 1rem; margin-bottom: 0.7rem;
}
.campo--conselho { border-left: 5px solid var(--amarelo-autocolante); }
.campo .arrasto { color: #8a7d5e; font-size: 1.1rem; cursor: grab; user-select: none; }
.campo .nome { font-weight: 700; flex: 1 1 12rem; }
.campo .nome small { display: block; font-weight: 400; color: var(--tinta-suave); font-size: 0.8rem; }
.tipo-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--destaque); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--papel-quente); border: 1px solid #dcd2b4; border-radius: 5px;
  padding: 0.2rem 0.55rem; color: var(--tinta-suave);
}
.origem {
  font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.6rem;
}
.origem--modelo { background: #e8eff9; color: var(--lapis-azul-escuro); border: 1px solid #c2d4ec; }
.origem--conselho { background: #fbf0d6; color: var(--lapis-ambar); border: 1px solid #e6cb8a; }

.interruptor { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; min-height: 44px; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .pista {
  width: 2.6rem; height: 1.45rem; border-radius: 999px; background: #c2b593;
  position: relative; transition: background 0.15s ease; flex: none;
}
.interruptor .pista::after {
  content: ""; position: absolute; top: 0.15rem; left: 0.15rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(50, 46, 38, 0.3); transition: left 0.15s ease;
}
.interruptor input:checked + .pista { background: var(--lapis-verde); }
.interruptor input:checked + .pista::after { left: 1.3rem; }
.interruptor:has(input:focus-visible) .pista { outline: 3px solid var(--lapis-azul); outline-offset: 2px; }

.tipos-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.tipo-novo {
  font-family: var(--corpo); font-size: 0.9rem; font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.9rem 0.5rem;
  background: rgba(255, 255, 255, 0.7);
  border: 2px dashed #b3a888; border-radius: 9px 13px 10px 14px;
  color: var(--tinta);
}
.tipo-novo:hover { border-color: var(--lapis-azul); color: var(--lapis-azul-escuro); background: #fff; }
.tipo-novo svg { color: var(--tinta-suave); }
.tipo-novo:hover svg { color: var(--lapis-azul); }

.versoes { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.versoes li { border-left: 2px dashed #c9bd9c; padding: 0 0 1.1rem 1rem; position: relative; }
.versoes li::before {
  content: ""; position: absolute; left: -0.45rem; top: 0.3rem;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--papel); border: 2.5px solid #b3a888;
}
.versoes li:first-child::before { border-color: var(--lapis-verde); background: var(--lapis-verde); }
.versoes .v {
  font-family: var(--destaque); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--tinta-suave); text-transform: uppercase;
}

/* ---------- blogue da escola (vista pública, multi-turma) ---------- */

.filtros {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end;
  margin: 1.5rem 0 0.5rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px dashed #c9bd9c; border-radius: 10px 14px 11px 15px;
  padding: 0.9rem 1.1rem;
}
.filtros label { font-weight: 700; font-size: 0.85rem; display: block; }
.filtros select {
  font: inherit; color: inherit; min-height: 44px;
  padding: 0.4rem 0.7rem; margin-top: 0.25rem;
  border: 1.5px solid #b3a888; border-radius: 9px 12px 10px 13px; background: #fff;
  min-width: 9rem;
}
.filtros-resultado { font-size: 0.9rem; color: var(--tinta-suave); margin-left: auto; margin-bottom: 0.35rem; }

/* etiqueta de turma: autocolante pequeno */
.turma-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--destaque); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--capa); color: #fff;
  padding: 0.2rem 0.6rem; border-radius: 999px; width: fit-content;
  box-shadow: 0 0 0 2.5px #fffdf6, 0 1px 2px rgba(50, 46, 38, 0.2);
  transform: rotate(-1.5deg);
}

.sem-resultados {
  border: 2px dashed #b3a888; border-radius: var(--raio-recorte); padding: 1.5rem;
  text-align: center; color: var(--tinta-suave);
  font-family: var(--manuscrita); font-size: 1.4rem;
}
.sem-resultados[hidden] { display: none; }

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

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

/* ---------- ecrãs estreitos (375px funciona bem) ---------- */

@media (max-width: 40rem) {
  :root { --margem-x: 2.1rem; }
  main {
    margin: 1rem 0.5rem 2.5rem;
    padding: 2rem 1rem 3rem calc(var(--margem-x) + 0.9rem);
    background-position: 0.55rem 12%, 0.55rem 50%, 0.55rem 88%, 0 0, 0 0.55rem;
    background-size: 1.4rem 1.4rem, 1.4rem 1.4rem, 1.4rem 1.4rem, 100% 100%, 100% var(--pauta);
  }
  .topo nav { margin-left: 0; width: 100%; }
  .comentario { grid-template-columns: 1fr; }
  .comentario-tipo { justify-self: start; }
  .mural > *, .post-lista > * { transform: none; }
}