/* Caderneta — painel limpo, referência de clareza: Google Sala de Aula.
   Fonte: Atkinson Hyperlegible (OFL), guardada em /static/fonts. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/fonts/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/fonts/atkinson-hyperlegible-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --fonte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fundo: #f3f4ff;
  --papel: #ffffff;
  --tinta: #1e1b4b;
  --tinta-2: #475569;
  --linha: #dfe2f7;
  --linha-2: #eceefb;
  --campo: #7b83b8;
  --primaria: #4f46e5;
  --primaria-escura: #3730a3;
  --primaria-clara: #eef0ff;
  --noite: #2b2870;
  --moldura: #dfe3fd;
  --acento: #fb923c;
  --foco: #312e81;
  --ok: #17692f;      --ok-fundo: #e3f4e8;
  --aviso: #8a4b00;   --aviso-fundo: #fff1d6;
  --erro: #a8231c;    --erro-fundo: #fde8e6;
  --info: #3730a3;    --info-fundo: #e0e7ff;
  --neutro: #475569;  --neutro-fundo: #edf0f8;
  --sombra: 0 1px 2px rgba(43, 40, 112, .06), 0 10px 28px -16px rgba(43, 40, 112, .28);
  --sombra-alta: 0 2px 4px rgba(43, 40, 112, .08), 0 18px 36px -14px rgba(43, 40, 112, .34);
  --raio: 12px;
  --suave: cubic-bezier(.25, 1, .5, 1);
  --t-peq: .875rem;
  --t-base: 1rem;
  --t-med: 1.125rem;
  --t-gr: 1.375rem;
  --t-xg: 1.75rem;
}
/* Cor de cada escola: a turma herda. Todas passam de 4,5:1 com texto branco. */
.cor-azul { --cor: #1558c0; } .cor-verde { --cor: #17713a; } .cor-turquesa { --cor: #0b6e75; }
.cor-roxo { --cor: #6b3fa0; } .cor-rosa { --cor: #a3145f; } .cor-vermelho { --cor: #b3261e; }
.cor-laranja { --cor: #a64d00; } .cor-grafite { --cor: #3d4856; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 var(--t-base)/1.55 var(--fonte); font-variant-numeric: tabular-nums; }
::selection { background: #c7d2fe; color: var(--tinta); }
input, select, textarea { caret-color: var(--primaria); }
a { color: var(--primaria); text-underline-offset: .18em; }
a:hover { color: var(--primaria-escura); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--papel); padding: 8px 12px; border-radius: var(--raio); z-index: 10; }
.pular:focus { left: 8px; }

/* barra do topo */
.barra { background: var(--papel); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5; }
.barra-in { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.marca { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: var(--t-med); color: var(--primaria); text-decoration: none; }
.menu { display: flex; gap: 4px; margin-left: 8px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--raio); color: var(--tinta-2); text-decoration: none; font-weight: 700; transition: background-color 150ms var(--suave), color 150ms var(--suave); }
.menu a:hover { background: var(--fundo); color: var(--tinta); }
.menu a.ativo { background: var(--primaria-clara); color: var(--primaria-escura); }
.sair { margin: 0 0 0 auto; display: flex; align-items: center; gap: 12px; }
.quem { color: var(--tinta-2); font-size: var(--t-peq); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.texto { background: none; border: 0; padding: 8px; min-height: 44px; color: var(--primaria); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
button.texto:hover { color: var(--primaria-escura); }
/* celular: marca e "Sair" na primeira linha, menu em 3 botões iguais na segunda (cabe em 320px); a barra rola junto com a página para não roubar altura */
@media (max-width: 560px) {
  .quem { display: none; }
  .barra { position: static; }
  .barra-in { flex-wrap: wrap; gap: 0 8px; }
  .marca { order: 1; }
  .sair { order: 2; }
  .menu { order: 3; flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 8px; }
  .menu a { justify-content: center; padding: 8px 4px; }
}

main.wrap { padding-top: 24px; padding-bottom: 40px; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 4px; color: var(--tinta); font-weight: 700; text-wrap: balance; }
h2 { font-size: var(--t-gr); line-height: 1.3; margin: 32px 0 12px; font-weight: 700; text-wrap: balance; }
h3 { font-size: var(--t-med); margin: 0 0 8px; }
@media (min-width: 768px) { h1 { font-size: var(--t-xg); } }
p { margin: 0 0 12px; }
.apoio { color: var(--tinta-2); font-size: var(--t-peq); margin: 0 0 8px; }
.sub { display: flex; align-items: center; gap: 8px; color: var(--tinta-2); margin: 0; }
.ponto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--cor, var(--primaria)); flex: none; }

/* cabeçalho da turma */
.turma-cab { margin-bottom: 8px; }
.voltar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--tinta-2); text-decoration: none; font-weight: 700; }
.voltar:hover { color: var(--primaria-escura); }
.turma-linha { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; }
.trocar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 0; }
.trocar label { width: 100%; margin: 0; }
.trocar select { width: auto; min-width: 12rem; }
.abas { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 16px 0 20px; border-bottom: 1px solid var(--linha); }
.abas a { padding: 12px 16px; text-decoration: none; color: var(--tinta-2); font-weight: 700; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color 150ms var(--suave), border-color 150ms var(--suave); }
.abas a:hover { color: var(--tinta); border-bottom-color: var(--linha); }
.abas a.ativa { color: var(--primaria-escura); border-bottom-color: var(--primaria); }
@media (max-width: 560px) {
  .abas { flex-wrap: nowrap; gap: 0; }
  .abas a { flex: 1 1 auto; text-align: center; padding: 12px 4px; font-size: var(--t-peq); }
}

/* avisos */
.aviso-msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--raio); margin-bottom: 16px; font-weight: 700; }
.aviso-msg .ico { flex: none; margin-top: 1px; }
.aviso-msg.ok { background: var(--ok-fundo); color: var(--ok); }
.aviso-msg.erro { background: var(--erro-fundo); color: var(--erro); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--raio); border: 2px solid var(--primaria); background: var(--primaria); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color 150ms var(--suave), border-color 150ms var(--suave), transform 150ms var(--suave); }
.btn:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.sec { background: var(--papel); color: var(--primaria-escura); }
.btn.sec:hover { background: var(--primaria-clara); color: var(--primaria-escura); }
.btn.perigo { background: var(--erro); border-color: var(--erro); }
.btn.perigo:hover { background: #8a1b15; border-color: #8a1b15; }
.btn.peq { min-height: 44px; padding: 6px 14px; }
.btn[disabled], .btn[aria-disabled=true] { background: var(--neutro-fundo); border-color: var(--linha); color: #6b7685; cursor: not-allowed; }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

/* formulários */
label { display: block; font-weight: 700; margin: 14px 0 6px; }
.dica { display: block; font-weight: 400; color: var(--tinta-2); font-size: var(--t-peq); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--campo); border-radius: var(--raio);
  font: inherit; background: var(--papel); color: var(--tinta);
  transition: border-color 150ms var(--suave), box-shadow 150ms var(--suave);
}
textarea { min-height: 132px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #5f6b7a; }
input:focus, select:focus, textarea:focus { border-color: var(--primaria); box-shadow: 0 0 0 1px var(--primaria); outline: none; }
input[disabled] { background: var(--neutro-fundo); color: #6b7685; }
.grade-campos { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grade-campos { grid-template-columns: 1fr 1fr; } }
.marcar { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; margin-top: 16px; }
.marcar input { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; accent-color: var(--primaria); flex: none; }
.cores { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; border: 0; }
.cores legend { font-weight: 700; padding: 0; margin: 14px 0 0; }
.cor-opcao { position: relative; margin: 0; }
.cor-opcao input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cor-opcao span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border: 2px solid var(--linha); border-radius: 99px; font-weight: 400; background: var(--papel); transition: border-color 150ms var(--suave); }
.cor-opcao input:checked + span { border-color: var(--tinta); font-weight: 700; }
.cor-opcao input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }

/* painéis e cartões */
.painel { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.painel h2:first-child, .painel h3:first-child { margin-top: 0; }
.grade { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grade.tres { grid-template-columns: repeat(3, 1fr); } }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.grade ~ .apoio { margin-top: 24px; }
.filtro { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border-radius: 99px; border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); text-decoration: none; font-weight: 700; white-space: nowrap; transition: background-color 150ms var(--suave), border-color 150ms var(--suave); }
.filtro:hover { background: var(--primaria-clara); color: var(--tinta); }
.filtro.ativa { background: var(--primaria-clara); border-color: var(--primaria); color: var(--primaria-escura); }
.filtro .n { color: var(--tinta-2); font-weight: 400; }

.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 200ms var(--suave); }
.cartao:hover { box-shadow: 0 2px 10px rgba(16, 24, 40, .14); }
.banner { background: var(--cor, var(--primaria)); color: #fff; padding: 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: flex-end; }
.banner h2 { margin: 0; font-size: var(--t-gr); color: #fff; }
.banner p { margin: 2px 0 0; color: #fff; opacity: .95; font-size: var(--t-peq); }
.cartao-corpo { padding: 16px; flex: 1; }
.estats { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.estat strong { display: block; font-size: var(--t-gr); line-height: 1.2; }
.estat span { color: var(--tinta-2); font-size: var(--t-peq); white-space: nowrap; }
.resumo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.resumo-lista li { display: flex; align-items: center; gap: 8px; font-size: var(--t-peq); }
.resumo-lista .ok { color: var(--ok); } .resumo-lista .aviso { color: var(--aviso); } .resumo-lista .neutro { color: var(--neutro); }
.cartao-rodape { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--linha-2); }
.cartao-rodape .btn { flex: 1 1 auto; }
.novo { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 160px; border: 2px dashed var(--campo); border-radius: 12px; color: var(--primaria-escura); font-weight: 700; text-decoration: none; background: transparent; transition: background-color 150ms var(--suave), border-color 150ms var(--suave); }
.novo:hover { background: var(--primaria-clara); border-color: var(--primaria); }

/* primeiros passos e estados vazios */
.passos { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: passo; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.passos li::before { content: counter(passo); width: 36px; height: 36px; border-radius: 50%; background: var(--primaria-clara); color: var(--primaria-escura); font-weight: 700; display: grid; place-items: center; }
.passos li.feito::before { content: "✓"; background: var(--ok-fundo); color: var(--ok); }
.passos strong { display: block; }

/* tutoriais e atalho de ajuda nas abas da turma */
.tutorial { scroll-margin-top: 76px; }
.tutorial h2 { margin-top: 0; }
.tutorial .passos { margin-top: 16px; }
.tutorial .passos .apoio { display: block; font-size: var(--t-base); color: var(--tinta); }
.tutorial .passos .apoio strong { display: inline; }
/* ações em texto (Abrir, Cancelar, Voltar, Imprimir códigos) e títulos de blocos que abrem: área de toque de 44px */
.acoes > a:not(.btn), td > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
details.painel > summary { padding: 10px 0; cursor: pointer; }
.topo-link { margin: 16px 0 0; }
.topo-link a, .ajuda-aba a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }
.ajuda-aba { margin: 8px 0 0; }

/* listas de escolas e de alunos (empilham no celular) */
.itens, .lista-alunos, .contadores { list-style: none; margin: 0; padding: 0; }
.itens { display: grid; gap: 12px; }
.item { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; padding: 16px; display: grid; gap: 12px; }
.item-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.item-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.lista-alunos { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.aluno { display: grid; gap: 10px; padding: 16px; border-bottom: 1px solid var(--linha-2); }
.aluno:last-child { border-bottom: 0; }
.aluno .num { display: none; }
.aluno .copiar input { min-width: 0; }
.codigo-bloco { display: flex; align-items: center; gap: 8px; }
.aluno-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.aluno-acoes a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .aluno { grid-template-columns: 32px minmax(260px, 1fr) auto auto; grid-template-areas: "num nome codigo acoes" "num situacao codigo acoes"; align-items: center; gap: 8px 20px; }
  .aluno .num { grid-area: num; display: block; align-self: start; padding-top: 10px; color: var(--tinta-2); text-align: right; }
  .aluno .copiar { grid-area: nome; }
  .aluno .situacao { grid-area: situacao; }
  .aluno .codigo-bloco { grid-area: codigo; }
  .aluno .aluno-acoes { grid-area: acoes; flex-wrap: nowrap; white-space: nowrap; }
}
.contadores { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin: 0 0 16px; }
.contadores .numero { display: flex; align-items: baseline; gap: 8px; }
.contadores .numero strong { font-size: var(--t-gr); }
.contadores .numero span { color: var(--tinta-2); font-size: var(--t-peq); }

/* situação do aluno */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 99px; font-weight: 700; font-size: var(--t-peq); line-height: 1.3; }
.status.ok { background: var(--ok-fundo); color: var(--ok); }
.status.info { background: var(--info-fundo); color: var(--info); }
.status.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.status.erro { background: var(--erro-fundo); color: var(--erro); }
.status.neutro { background: var(--neutro-fundo); color: var(--neutro); }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 16px 0 0; color: var(--tinta-2); font-size: var(--t-peq); }
.legenda strong { color: var(--tinta); }
.vermelho { color: var(--erro); font-weight: 700; }
.verde { color: var(--ok); font-weight: 700; }

/* tabelas */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: 12px; background: var(--papel); scrollbar-width: thin; scrollbar-color: #aab3c0 var(--fundo); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-base); }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--linha-2); text-align: center; white-space: nowrap; }
th { background: var(--primaria-clara); color: var(--noite); font-size: var(--t-peq); font-weight: 700; line-height: 1.25; }
th .apoio { display: block; margin: 0; font-weight: 400; }
.sit { margin-top: 6px; }
.pilula { margin: 8px 0 0; }
td.nome, th.nome { text-align: left; white-space: normal; min-width: 170px; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--linha-2); }
td.nome { background: var(--papel); }
th.nome { background: var(--primaria-clara); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover td.nome { background: #f7f8ff; }
td input.nota { width: 4.75rem; min-height: 44px; text-align: center; padding: 6px 4px; background: var(--primaria-clara); border-color: #818cf8; }
td input.nota:focus { background: var(--papel); }
.media-celula { font-weight: 700; }
.linha-avaliacao { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--linha-2); }
.linha-avaliacao:last-of-type { border-bottom: 0; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: var(--t-peq); font-weight: 700; background: var(--neutro-fundo); color: var(--neutro); }
form.inline { display: inline; margin: 0; }
.copiar { display: flex; gap: 8px; align-items: stretch; margin: 0; }
.copiar input { flex: 1; min-width: 0; }
.codigo { display: inline-block; font-weight: 700; letter-spacing: .14em; background: var(--primaria-clara); color: var(--primaria-escura); padding: 2px 10px; border-radius: 8px; }

/* chamada */
.chamada-lista { list-style: none; padding: 0; margin: 0; }
.chamada-lista li { border-bottom: 1px solid var(--linha-2); }
.chamada-lista li:last-child { border-bottom: 0; }

/* avaliações editáveis e chamada por aula */
.avaliacao-item { border-bottom: 1px solid var(--linha-2); padding: 4px 0 8px; }
.avaliacao-item .linha-avaliacao { border-bottom: 0; padding: 6px 0; }
details.editar > summary { cursor: pointer; color: var(--primaria-escura); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
details.editar[open] > summary { margin-bottom: 4px; }
.tag.aviso-tag { background: var(--aviso-fundo); color: var(--aviso); }
.chamada-aluno { display: grid; gap: 8px; padding: 12px 4px; border-bottom: 1px solid var(--linha-2); }
.chamada-aluno:last-child { border-bottom: 0; }
.chamada-nome { font-size: var(--t-med); }
.chamada-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.marcas-rotulo { color: var(--tinta-2); font-size: var(--t-peq); }
.aula-caixa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin: 0; font-weight: 700; color: var(--tinta-2); border: 1px solid var(--campo); border-radius: 99px; background: var(--papel); cursor: pointer; transition: background-color 150ms var(--suave), border-color 150ms var(--suave), color 150ms var(--suave); }
.aula-caixa input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--erro); }
.aula-caixa:has(input:checked) { border-color: var(--erro); color: var(--erro); background: var(--erro-fundo); }
.aula-caixa.just input { accent-color: var(--primaria); }
.aula-caixa.just:has(input:checked) { border-color: var(--primaria); color: var(--info); background: var(--info-fundo); }

/* boletim */
.boletim-topo h1 { margin-bottom: 4px; }
.boletim-resumo { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .boletim-resumo { grid-template-columns: 1fr 1fr; } }
.numero-grande { display: block; font-size: 2.25rem; line-height: 1.1; font-weight: 700; }
.frases { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.fichas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ficha { border: 1px dashed #7d8796; padding: 12px; border-radius: var(--raio); background: var(--papel); break-inside: avoid; }
.ficha .codigo { font-size: var(--t-gr); }

/* entrada e página inicial */
.centro { max-width: 440px; margin: 16px auto; }
.inicio { max-width: 640px; margin: 24px auto; }
.inicio h1 { font-size: 2rem; margin-bottom: 12px; }
.inicio .lista { margin: 16px 0 24px; padding-left: 20px; }
.inicio .lista li { margin-bottom: 8px; }
.rodape { color: var(--tinta-2); font-size: var(--t-peq); padding-bottom: 32px; }

/* ===== visual "caderno colorido": índigo vivo, cantos macios, sombras suaves, botões de apertar ===== */
body { background: radial-gradient(900px 340px at 50% -110px, #dde2ff, rgba(221, 226, 255, 0)) no-repeat var(--fundo); }
h1 { letter-spacing: -.02em; }
h2 { margin-top: 44px; }
.estat strong { font-size: 1.75rem; letter-spacing: -.02em; }

/* barra do topo escura, com a marca num selo branco */
.barra { background: var(--noite); border-bottom: 0; }
.marca { color: #fff; }
.marca .ico { width: 34px; height: 34px; padding: 6px; background: #fff; color: var(--primaria); border-radius: 11px; }
.menu a { color: #dfe3ff; }
.menu a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.menu a.ativo { background: #fff; color: var(--noite); }
.quem { color: #dfe3ff; }
.barra button.texto { color: #fff; }
.barra :focus-visible { outline-color: #fff; }

/* boas-vindas do painel */
.ola { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 24px; margin: 6px 6px 30px; border-radius: 28px; color: #fff; background: var(--primaria); box-shadow: 0 0 0 6px var(--moldura); }
.ola::before { content: ""; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.ola::after { content: ""; position: absolute; right: 120px; bottom: -50px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.ola > * { position: relative; z-index: 1; }
.ola h1 { color: #fff; margin: 0 0 4px; }
.ola p { color: #fff; margin: 0; }
.ola-data { font-size: var(--t-peq); font-weight: 700; margin-bottom: 4px; }
.ola-nums { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ola-nums li { background: rgba(255, 255, 255, .2); border-radius: 99px; padding: 6px 14px; font-size: var(--t-peq); }
.ola-nums strong { font-size: var(--t-med); }
.titulo-lista { margin-top: 8px; }

/* botões: chapados e totalmente redondos; o secundário é um degrau de tom, sem contorno */
.btn { border-radius: 99px; border-color: var(--primaria); padding: 10px 22px; transition: background-color 150ms var(--suave), transform 150ms var(--suave); }
.btn:active { transform: translateY(1px); }
.btn.sec { background: var(--primaria-clara); border-color: var(--primaria-clara); color: var(--primaria-escura); }
.btn.sec:hover { background: #dfe3fd; border-color: #dfe3fd; }
.btn.destaque { background: var(--acento); border-color: var(--acento); color: var(--tinta); }
.btn.destaque:hover { background: #f97316; border-color: #f97316; color: var(--tinta); }

/* campos */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { border-width: 2px; padding: 9px 11px; border-radius: 12px; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(79, 70, 229, .2); }

/* abas da turma em pílula */
.abas { background: var(--papel); border: 0; border-radius: 99px; padding: 5px; gap: 4px; margin: 22px 5px 26px; box-shadow: 0 0 0 5px var(--moldura); }
.abas a { border-bottom: 0; margin: 0; border-radius: 99px; padding: 10px 18px; }
.abas a:hover { background: var(--primaria-clara); border-bottom: 0; }
.abas a.ativa { background: var(--primaria); color: #fff; }
@media (max-width: 560px) { .abas { padding: 4px; gap: 0; } .abas a { padding: 12px 2px; min-width: 44px; font-size: .8125rem; } }

/* filtros */
.filtro { border: 2px solid var(--linha); }
.filtro.ativa { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.filtro.ativa .n { color: #fff; }

/* painéis, cartões e listas com cantos macios e sombra */
/* molduras: o contorno é um anel de tom (preenchido, sem linha fina nem sombra em repouso) */
.painel, .item, .lista-alunos { border: 0; border-radius: 22px; margin: 6px 6px 28px; box-shadow: 0 0 0 6px var(--moldura); }
.item { margin: 0 6px; }
.itens { gap: 18px; margin: 6px 0 24px; }
.tabela-wrap { border: 0; border-radius: 22px; margin: 6px 6px 26px; box-shadow: 0 0 0 6px var(--moldura); }
.aviso-msg { border-radius: 18px; }
.cartao { border: 0; border-radius: 26px; box-shadow: 0 0 0 6px var(--moldura); transition: transform 220ms var(--suave), box-shadow 220ms var(--suave); }
.cartao:hover { transform: translateY(-3px); box-shadow: 0 0 0 6px var(--moldura), var(--sombra-alta); }
.grade { gap: 26px; padding: 6px; }
.banner { position: relative; overflow: hidden; padding: 20px 20px 16px; min-height: 112px; background: var(--cor, var(--primaria)); }
.banner::before { content: ""; position: absolute; right: -34px; top: -46px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.banner::after { content: ""; position: absolute; right: 70px; top: 58px; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.banner > * { position: relative; z-index: 1; }
.estats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.estat { background: var(--primaria-clara); border-radius: 14px; padding: 10px 12px; }
.estat span { white-space: normal; }
.cartao-rodape { border-top: 0; padding: 14px 16px 16px; background: var(--primaria-clara); }
.cartao-rodape .btn.sec { background: var(--papel); border-color: var(--papel); }
.novo { border: 0; border-radius: 26px; background: var(--primaria-clara); box-shadow: 0 0 0 6px var(--moldura); }
.novo:hover { background: #dfe3fd; }
.passos li::before { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; box-shadow: 0 4px 10px -4px rgba(79, 70, 229, .7); }
.passos li.feito::before { background: var(--ok-fundo); color: var(--ok); box-shadow: none; }
.aula-caixa { border-width: 2px; }

/* página inicial: campo de cor com a escola desenhada, trecho real da tela, preço e teste grátis */
.lp { display: grid; gap: 56px; margin: 28px 0 8px; }
.lp-hero { display: grid; gap: 28px; align-items: center; padding: clamp(24px, 5vw, 56px); background: var(--primaria); color: #fff; border-radius: 34px; box-shadow: 0 0 0 8px var(--moldura); margin: 8px; }
@media (min-width: 900px) { .lp-hero { grid-template-columns: 1.5fr 1fr; } }
.lp-hero h1 { color: #fff; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 16px; }
.lp-hero p { color: #fff; font-size: var(--t-gr); line-height: 1.4; }
.lp-hero .lp-nota { font-size: var(--t-base); margin: 16px 0 0; }
.lp-hero .btn.sec { background: #fff; border-color: #fff; color: var(--primaria-escura); }
.lp-ilustra { display: block; width: 100%; height: auto; border-radius: 26px; }
/* botões grandes de chamada: texto + selo redondo com seta que avança ao passar o mouse */
.btn.grande { min-height: 58px; padding: 8px 8px 8px 26px; gap: 16px; font-size: var(--t-med); }
.btn.grande.sec { padding: 8px 28px; }
.btn-seta { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--tinta); color: #fff; flex: none; transition: transform 220ms var(--suave); }
.btn.grande:hover .btn-seta { transform: translateX(4px); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
@media (max-width: 560px) { .lp .acoes .btn.grande { width: 100%; justify-content: space-between; } .lp .acoes .btn.grande.sec { justify-content: center; } }
.lp-nota { color: var(--tinta-2); font-size: var(--t-base); margin: 14px 0 0; }
.lp-sec h2 { font-size: clamp(1.5rem, 3.6vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; }
.lp-tela { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .lp-tela { grid-template-columns: 1fr 1fr; gap: 48px; } }
.lp-tela-texto p { font-size: var(--t-med); line-height: 1.5; max-width: 52ch; }
.lp-fragmento { margin: 6px; }
.lp-preco { display: grid; gap: 28px; padding: clamp(24px, 5vw, 48px); background: var(--papel); border-radius: 34px; box-shadow: 0 0 0 8px var(--moldura); margin: 8px; }
@media (min-width: 900px) { .lp-preco { grid-template-columns: 1fr 1fr; align-items: center; } }
.lp-valor { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 8px; }
.lp-valor strong { font-size: clamp(2.5rem, 8vw, 4rem); line-height: 1; letter-spacing: -.03em; color: var(--primaria-escura); }
.lp-valor span { font-size: var(--t-gr); color: var(--tinta-2); }
.lp-inclui { list-style: none; margin: 0; padding: 22px; background: var(--primaria-clara); border-radius: 24px; display: grid; gap: 14px; }
.lp-inclui li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-weight: 700; }
.lp-inclui .ico { color: var(--ok); margin-top: 1px; }
.lp-rodape-nota { text-align: center; }

/* faixa do teste grátis e tela de planos */
.teste-faixa { background: var(--primaria-clara); color: var(--noite); font-weight: 700; }
.teste-faixa .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.teste-faixa a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.teste-faixa.urgente { background: var(--aviso-fundo); color: var(--aviso); }
.teste-faixa.urgente a { color: var(--aviso); }
.planos { display: grid; gap: 28px; margin: 6px 6px 30px; }
@media (min-width: 760px) { .planos { grid-template-columns: 1fr 1fr; } }
.plano { background: var(--papel); border-radius: 24px; padding: 24px; box-shadow: 0 0 0 6px var(--moldura); }
.plano h3 { margin: 0 0 6px; font-size: var(--t-gr); }
.plano-preco { margin: 0 0 6px; }
.plano-preco strong { font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.05; letter-spacing: -.03em; color: var(--primaria-escura); }
.plano-preco small { font-size: var(--t-base); color: var(--tinta-2); font-weight: 400; letter-spacing: 0; }
.btn[disabled] { opacity: 1; }
h1 + .painel, h1 + .planos { margin-top: 18px; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-left: 6px; }

/* aviso de internet: fixo embaixo, no estilo do app */
.rede-aviso { position: fixed; left: 12px; right: 12px; bottom: 12px; max-width: 760px; margin: 0 auto; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 16px; border-radius: 18px; background: var(--noite); color: #fff; font-weight: 700; }
.rede-aviso[hidden] { display: none; }
.rede-aviso.offline { background: #8a4b00; }
.rede-aviso.erro { background: var(--erro); }
.rede-aviso.ok { background: var(--ok); }
.rede-aviso .btn.sec { background: #fff; border-color: #fff; color: var(--noite); }
textarea.curto { min-height: 88px; }
.conteudo-celula { min-width: 220px; white-space: normal; color: var(--tinta-2); font-size: var(--t-peq); }
@media print { .rede-aviso { display: none !important; } }

/* entrada: um campo grande de cor, título grande, uma ação em destaque */
.inicio { max-width: 880px; margin: 30px auto; padding: clamp(28px, 6vw, 60px); background: var(--primaria); color: #fff; border-radius: 34px; box-shadow: 0 0 0 8px var(--moldura); }
.inicio h1 { color: #fff; font-size: clamp(1.9rem, 5.4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 18px; }
.inicio .acoes + .apoio { margin-top: 22px; }
.inicio > p { font-size: var(--t-gr); line-height: 1.4; max-width: 34ch; color: #fff; }
.inicio .lista { list-style: none; padding: 20px 22px; margin: 28px 0; background: var(--primaria-escura); border-radius: 22px; display: grid; gap: 10px; }
.inicio .lista li { margin: 0; color: #fff; font-weight: 700; }
.inicio > p.apoio { color: #fff; font-size: var(--t-base); max-width: none; }
.inicio .btn.sec { background: #fff; border-color: #fff; color: var(--primaria-escura); }
.centro.painel { margin: 28px auto; }
.boletim-topo { color: #fff; background: var(--primaria); box-shadow: 0 0 0 6px var(--moldura); }
.boletim-topo h1, .boletim-topo .apoio { color: #fff; }

/* entrada suave dos blocos (some com "reduzir movimento") */
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ola, .painel, .grade > *, .item, .lista-alunos { animation: sobe 420ms var(--suave) both; }
  .grade > :nth-child(2) { animation-delay: 70ms; }
  .grade > :nth-child(3) { animation-delay: 140ms; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  body { background: #fff; }
  .painel, .cartao, .tabela-wrap, .item, .lista-alunos, .abas, .aviso-msg { box-shadow: none !important; }
  .boletim-topo { background: #fff !important; color: #000 !important; border: 1px solid #999 !important; box-shadow: none !important; }
  .boletim-topo h1, .boletim-topo .apoio { color: #000 !important; }
  .barra, .abas, .rodape, .acoes, .voltar, .nao-imprimir, .aviso-msg, .trocar, .pular { display: none !important; }
  .painel, .tabela-wrap { border: 1px solid #999; }
  th, td.nome { position: static; }
  /* diário de classe: A4 deitado, cada quadro numa folha */
  @page diario { size: A4 landscape; margin: 10mm; }
  .diario { page: diario; }
  body:has(.diario) .turma-cab, body:has(.diario) .wrap { max-width: none; }
  body:has(.diario) .turma-cab { display: none; }
  .diario-pagina + .diario-pagina { break-before: page; }
  .diario .tabela-wrap { border: 0; overflow: visible; }
  .diario tr { break-inside: avoid; }
  .diario thead { display: table-header-group; }
}

/* diário de classe (tela e papel) */
.diario-capa { margin-bottom: 20px; }
.diario-capa h1 { margin-bottom: 8px; }
.diario-linha { margin: 4px 0; }
.diario h2 { margin: 24px 0 8px; font-size: var(--t-med); }
.grade-diario { border-collapse: collapse; width: 100%; font-size: var(--t-peq); }
.grade-diario th, .grade-diario td { border: 1px solid var(--campo); padding: 4px 6px; text-align: center; background: var(--papel); }
.grade-diario th { background: var(--neutro-fundo); font-weight: 700; vertical-align: bottom; }
.grade-diario .nome { text-align: left; white-space: nowrap; }
.grade-diario th span.apoio { display: block; font-weight: 400; }
.grade-diario td.pres { color: var(--tinta-2); }
.grade-diario td.falta-marca { font-weight: 700; }
.grade-diario td.sem-aula { background: var(--neutro-fundo); color: var(--tinta-2); }
.grade-diario td.total { font-weight: 700; }
.grade-diario td.conteudo { text-align: left; white-space: normal; }
.assinaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; text-align: center; }
.assinaturas span { display: block; border-top: 1px solid var(--tinta); margin-bottom: 6px; }

/* ---- termos, privacidade, conta, observações, pagamento ---- */
.legal { max-width: 760px; margin-inline: auto; }
.legal h2 { font-size: var(--t-gr); margin: 28px 0 8px; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 22px; }
.falta-dado { background: var(--aviso-fundo); color: var(--aviso); font-weight: 700; padding: 0 6px; border-radius: 6px; }
.obs-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.qr-pix { max-width: 100%; height: auto; border-radius: 12px; background: #fff; padding: 8px; }
.centralizado { text-align: center; }
a.quem { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
a.quem:hover { text-decoration: underline; }
input[type="file"] { width: 100%; padding: 10px 0; min-height: 44px; }.painel h3 { margin: 22px 0 8px; font-size: var(--t-base); }
.painel form.inline + h3 { margin-top: 24px; }
/* ---- perfil ---- */
.perfil-topo { background: var(--papel); border-radius: 24px; padding: 24px; margin: 6px 6px 28px; box-shadow: 0 0 0 6px var(--moldura); display: grid; gap: 18px; }
.perfil-id { display: flex; align-items: center; gap: 16px; }
.perfil-id h1 { margin: 0; font-size: var(--t-gr); overflow-wrap: anywhere; }
.perfil-id p { margin: 2px 0 0; overflow-wrap: anywhere; }
.avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--primaria); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; }
.perfil-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .perfil-nums { grid-template-columns: repeat(4, 1fr); } }
.perfil-nums li { background: var(--primaria-clara); border-radius: 16px; padding: 12px 14px; display: grid; }
.perfil-nums strong { font-size: 1.6rem; line-height: 1.1; color: var(--primaria-escura); }
.perfil-nums span { color: var(--tinta-2); font-size: var(--t-peq); }
.perfil-plano { margin: 0; }
.perfil-topo .filtros { margin: 0; }
/* ---- tela de entrar ---- */
.entrar { display: grid; gap: 28px; max-width: 940px; margin: 28px auto; }
.entrar .painel { margin: 6px; }
.entrar-form h1 { margin-top: 0; }
.entrar-novo { margin: 20px 0 0; padding-top: 16px; border-top: 2px solid var(--moldura); }
.entrar-info { background: var(--noite); color: #fff; border-radius: 24px; padding: 28px; display: grid; gap: 16px; align-content: center; margin: 6px; }
.entrar-info h2 { margin: 0; color: #fff; }
.entrar-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.entrar-info li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.entrar-info .ico { flex: none; color: var(--acento); margin-top: 1px; }
@media (min-width: 800px) { .entrar { grid-template-columns: 1fr 1fr; align-items: stretch; } .entrar-info { order: -1; } }
/* ---- painel: turmas agrupadas por escola ---- */
.grupo-escola { margin: 8px 0 26px; }
.grupo-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 6px 14px; font-size: var(--t-gr); }
.grupo-titulo small { font-size: var(--t-peq); font-weight: 400; color: var(--tinta-2); }
.banner-escola { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: var(--t-peq); font-weight: 700; max-width: 100%; }
.banner-escola span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- painel: faixa da escola (substitui o título simples) ---- */
.grupo-escola { margin: 10px 0 34px; }
.escola-cab { display: flex; align-items: center; gap: 14px; background: var(--cor, var(--primaria)); color: #fff; border-radius: 20px; padding: 14px 18px; margin: 0 6px 22px; }
.escola-avatar { flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.escola-info { min-width: 0; flex: 1; }
.escola-info h3 { margin: 0; font-size: var(--t-gr); color: #fff; overflow-wrap: anywhere; line-height: 1.2; }
.escola-info p { margin: 2px 0 0; color: #fff; opacity: .95; font-size: var(--t-peq); }
.escola-link { flex: none; color: #fff; font-weight: 700; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 480px) { .escola-link { display: none; } }
/* faixa da escola mais leve: não compete com o topo colorido das turmas */
.escola-cab { background: var(--papel); color: var(--tinta, #1c1b3a); border-radius: 20px; box-shadow: 0 0 0 6px var(--moldura); margin: 6px 6px 24px; }
.escola-avatar { background: var(--cor, var(--primaria)); color: #fff; border-radius: 50%; }
.escola-info h3 { color: var(--tinta, #1c1b3a); }
.escola-info p { color: var(--tinta-2); opacity: 1; }
.escola-link { color: var(--primaria-escura); }
/* ---- avatares e fotos ---- */
.av { flex: none; border-radius: 50%; display: inline-grid; place-items: center; object-fit: cover; background: var(--primaria-clara); vertical-align: middle; }
.av-p { width: 32px; height: 32px; font-size: .8rem; } .av-m { width: 44px; height: 44px; font-size: 1rem; }
.av-g { width: 56px; height: 56px; font-size: 1.2rem; } .av-xg { width: 96px; height: 96px; font-size: 2rem; }
.av-ini { background: var(--cor, var(--primaria)); color: #fff; font-weight: 700; letter-spacing: .02em; }
.perfil-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #dfe3ff; text-decoration: none; font-size: var(--t-peq); font-weight: 700; }
.perfil-btn .quem { max-width: none; color: inherit; }
.perfil-btn:hover .quem, .perfil-btn.ativo .quem { text-decoration: underline; }
.perfil-btn .av { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.filtro .av { margin-right: 2px; }
.sub .av, .item-topo .av { margin-right: 4px; }
.perfil-id .av { box-shadow: 0 0 0 4px var(--moldura); }
.escola-cab .av { box-shadow: 0 0 0 3px var(--moldura); }
.escola-avatar { display: none; }
.ola-perfil { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; padding: 4px 16px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; font-weight: 700; text-decoration: none; }
.ola-perfil:hover { background: rgba(255,255,255,.3); }
.ola-perfil .av { box-shadow: 0 0 0 2px #fff; }
.foto-linha { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.foto-linha > div:last-child { flex: 1 1 220px; min-width: 0; }
.foto-previa .av { box-shadow: 0 0 0 4px var(--moldura); }
/* ---- cartão da turma mais compacto, em colunas que se ajustam à largura ---- */
.grade.tres { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grade.tres > .novo { min-height: 120px; }
.banner { min-height: 88px; padding: 16px 18px 14px; }
.banner h2 { font-size: 1.15rem; overflow-wrap: anywhere; line-height: 1.2; }
.cartao .estats { list-style: none; margin: 0 0 12px; padding: 0; }
.cartao .estat { display: grid; }
.cartao .estat strong { font-size: 1.4rem; }
.cartao .estat span { font-size: .78rem; }
.cartao .resumo-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.cartao .resumo-lista li { padding: 4px 10px; border-radius: 999px; background: var(--neutro-fundo); font-weight: 700; }
.cartao .resumo-lista li.ok { background: var(--ok-fundo); }
.cartao .resumo-lista li.aviso { background: var(--aviso-fundo); }
.vazio-turma { margin: 8px 0 0; color: var(--tinta-2); }
.cartao-rodape .btn.peq { padding-inline: 12px; }
/* ---- chamada em planilha ---- */
.alternar { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--primaria-clara); margin: 0 0 16px; }
.alternar a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--primaria-escura); }
.alternar a.ativa { background: var(--primaria); color: #fff; }
.mes-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 6px 14px; }
.mes-nav h2 { margin: 0; font-size: var(--t-gr); text-align: center; }
.planilha-dica { margin: 0 6px 12px; }
.planilha { max-height: 70vh; overflow: auto; }
.planilha-tab { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.planilha-tab th, .planilha-tab td { border-bottom: 1px solid var(--linha-2); padding: 0; text-align: center; background: var(--papel); }
.planilha-tab thead th { position: sticky; top: 0; z-index: 3; background: var(--primaria-clara); padding: 6px 4px; font-size: var(--t-peq); min-width: 52px; }
.planilha-tab thead th.nome { left: 0; z-index: 4; text-align: left; padding-left: 12px; min-width: 150px; }
.planilha-tab tbody th.nome { position: sticky; left: 0; z-index: 2; text-align: left; font-weight: 700; padding: 0 12px; min-width: 150px; max-width: 190px; height: 48px; box-shadow: 1px 0 0 var(--linha-2); overflow-wrap: anywhere; }
.planilha-tab .num { color: var(--tinta-2); font-weight: 400; margin-right: 8px; font-size: var(--t-peq); }
.planilha-tab thead th.dia a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 28px; font-size: 1.05rem; font-weight: 700; }
.planilha-tab thead th.dia small { display: block; font-weight: 400; color: var(--tinta-2); text-transform: lowercase; line-height: 1.2; }
.planilha-tab thead th.sem { background: var(--neutro-fundo); }
.planilha-tab .todos { min-width: 44px; min-height: 32px; border: 0; border-radius: 10px; background: var(--ok-fundo); color: var(--ok); font-weight: 700; cursor: pointer; }
.planilha-tab td.c { min-width: 52px; height: 48px; }
.planilha-tab td.sem { background: var(--neutro-fundo); color: var(--tinta-2); }
.planilha-tab .cel { width: 100%; min-width: 44px; height: 48px; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 1.1rem; color: var(--tinta-2); cursor: pointer; }
.planilha-tab .cel:hover { background: var(--primaria-clara); }
.planilha-tab .cel[data-v="F"] { background: var(--erro-fundo); color: var(--erro); }
.planilha-tab .cel[data-v="J"] { background: var(--aviso-fundo); color: var(--aviso); }
.planilha-tab .cel[data-v="P"] { background: var(--info-fundo, var(--primaria-clara)); color: var(--primaria-escura); }
.planilha-tab td.tot, .planilha-tab th.tot { min-width: 72px; font-weight: 700; padding: 0 8px; }
.planilha-tab tbody th.nome, .planilha-tab tbody td.tot { font-size: var(--t-base); }
.rodape-tot th, .rodape-tot td { background: var(--neutro-fundo) !important; font-weight: 700; height: 40px; }
.alerta-faltas h2 { display: flex; align-items: center; gap: 10px; margin-top: 0; color: var(--erro); }
.alerta-faltas ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.turno-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; font-size: var(--t-peq); font-weight: 700; }
/* ---- botões: mesmas cores, formato de tecla (cantos de 12 px e borda inferior que afunda ao clicar) ---- */
.btn { border-radius: 12px; font-weight: 700; box-shadow: 0 3px 0 #2e2796; transition: background-color 120ms var(--suave), transform 120ms var(--suave), box-shadow 120ms var(--suave); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #2e2796; }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 #2e2796; }
.btn.sec { box-shadow: 0 3px 0 #bcc4f5; }
.btn.sec:hover { box-shadow: 0 4px 0 #bcc4f5; }
.btn.sec:active { box-shadow: 0 0 0 #bcc4f5; }
.btn.destaque { box-shadow: 0 3px 0 #c2570c; }
.btn.destaque:hover { box-shadow: 0 4px 0 #c2570c; }
.btn.destaque:active { box-shadow: 0 0 0 #c2570c; }
.btn.perigo { box-shadow: 0 3px 0 #7a1812; }
.btn.perigo:active { box-shadow: 0 0 0 #7a1812; }
.btn[disabled], .btn[aria-disabled=true] { box-shadow: none; transform: none; }
.cartao-rodape .btn.sec { box-shadow: 0 3px 0 #cfd5f6; }
.cartao-rodape .btn.sec:active { box-shadow: 0 0 0 #cfd5f6; }
.lp-hero .btn, .inicio .btn, .ola .btn { box-shadow: 0 3px 0 rgba(10, 8, 60, .35); }
.lp-hero .btn:active, .inicio .btn:active, .ola .btn:active { box-shadow: 0 0 0 rgba(10, 8, 60, .35); }
.btn.grande { border-radius: 14px; }
.btn-seta { border-radius: 10px; }
.rede-aviso .btn { box-shadow: none; }
.cartao-rodape { gap: 10px; padding-bottom: 18px; }
@media print { .btn { box-shadow: none !important; } }
/* ---- ata e chamada do dia com presença marcada ---- */
.seg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seg-op { margin: 0; cursor: pointer; }
.seg-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-op span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--campo); border-radius: 99px; background: var(--papel); font-weight: 700; color: var(--tinta-2); transition: background-color 120ms var(--suave), border-color 120ms var(--suave), color 120ms var(--suave); }
.seg-op:hover span { background: var(--primaria-clara); }
.seg-op input:focus-visible + span { outline: 3px solid var(--primaria); outline-offset: 2px; }
.seg-op.pres input:checked + span { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }
.seg-op.falta input:checked + span { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
.seg-op.just input:checked + span { background: var(--aviso-fundo); border-color: var(--aviso); color: var(--aviso); }
.seg-op input:checked + span::before { content: "✓ "; white-space: pre; }
.seg-op.falta input:checked + span::before { content: "✕ "; }
.seg-op.just input:checked + span::before { content: "J "; }
.chamada-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 6px 14px; }
.chamada-conta { margin: 0; font-weight: 700; color: var(--tinta-2); }
.chamada-conta.pendente { color: var(--aviso); }
.ata-resumo { list-style: none; margin: 0 6px 16px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .ata-resumo { grid-template-columns: repeat(5, 1fr); } }
.ata-resumo li { background: var(--papel); border-radius: 16px; padding: 10px 14px; box-shadow: 0 0 0 4px var(--moldura); display: grid; }
.ata-resumo strong { font-size: 1.5rem; line-height: 1.15; }
.ata-resumo span { color: var(--tinta-2); font-size: var(--t-peq); }
.ata-resumo .ok strong { color: var(--ok); } .ata-resumo .erro strong { color: var(--erro); } .ata-resumo .aviso strong { color: var(--aviso); }
.planilha-tab thead th.hoje { background: var(--primaria); color: #fff; }
.planilha-tab thead th.hoje small, .planilha-tab thead th.hoje a { color: #fff; }
.planilha-tab .cel[data-v="V"] { background: var(--ok-fundo); color: var(--ok); }
.planilha-tab .cel[data-v=""] { color: #8b94a6; }
.planilha-tab .todos { display: inline-grid; place-items: center; }
.barra-salvar { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; margin: 14px 6px 0; background: var(--papel); border-radius: 18px; box-shadow: 0 0 0 4px var(--moldura), 0 -6px 18px rgba(30, 27, 75, .12); }
.sujo { font-weight: 700; color: var(--aviso); }
.so-impressao { display: none; }
@media print {
  .so-impressao { display: block; }
  .ata-cab h2 { margin: 0 0 4px; } .ata-cab p { margin: 0 0 10px; }
  .ata-assinatura { margin-top: 28px; }
  .planilha { max-height: none; overflow: visible; box-shadow: none; }
  .planilha-tab { width: 100%; font-size: 10pt; }
  .planilha-tab thead th, .planilha-tab tbody th.nome { position: static; }
  .planilha-tab .cel { color: #000 !important; background: transparent !important; font-weight: 700; }
  .planilha-tab .todos { display: none; }
  .barra-salvar { display: none; }
  @page { size: A4 landscape; margin: 12mm; }
}
/* ---- cartão da turma: cabeçalho claro com faixa da cor da escola, números em linha, ação principal em destaque ---- */
.cartao .banner { background: var(--papel); color: var(--tinta); border-top: 8px solid var(--cor, var(--primaria)); padding: 16px 20px 4px; min-height: 0; justify-content: flex-start; }
.cartao .banner::before, .cartao .banner::after { display: none; }
.cartao .banner h2 { color: var(--tinta); font-size: 1.3rem; line-height: 1.2; margin: 0; letter-spacing: -.01em; text-transform: none; }
.cartao .banner p { color: var(--tinta-2); opacity: 1; margin: 4px 0 0; font-size: var(--t-base); text-transform: none; }
.cartao .banner .turno-tag { background: var(--primaria-clara); color: var(--primaria-escura); margin-top: 10px; }
.cartao .cartao-corpo { padding: 12px 20px 16px; }
.cartao .estats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 0 14px; padding: 12px 0; border-top: 1px solid var(--linha-2); border-bottom: 1px solid var(--linha-2); }
.cartao .estat { background: transparent; border-radius: 0; padding: 0 8px; text-align: center; }
.cartao .estat + .estat { border-left: 1px solid var(--linha-2); }
.cartao .estat strong { font-size: 1.6rem; line-height: 1.1; }
.cartao .estat span { font-size: .8rem; }
.cartao .resumo-lista { gap: 6px; }
.cartao .resumo-lista li { font-size: .85rem; padding: 4px 10px; }
.cartao .cartao-rodape { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px 20px; background: transparent; border-top: 0; }
.cartao .cartao-rodape .btn { width: 100%; }
.cartao .cartao-rodape .btn.destaque { grid-column: 1 / -1; min-height: 48px; font-size: var(--t-base); }
.cartao .cartao-rodape .btn.sec { background: var(--primaria-clara); border-color: var(--primaria-clara); }
.cartao .cartao-rodape .btn.sec:hover { background: #dfe3fd; border-color: #dfe3fd; }
/* =====================================================================
   IDENTIDADE CADERNETA VIRTUAL — verde lousa, giz e amarelo de giz
   (última camada: troca as cores e a marca, mantendo o layout aprovado)
   ===================================================================== */
:root {
  --fundo: #f4f1e6; --papel: #fdfcf8; --tinta: #14201a; --tinta-2: #52615a;
  --linha: #dcd8c9; --linha-2: #ebe7da; --campo: #7d8a82;
  --primaria: #1f6b4f; --primaria-escura: #17543d; --primaria-clara: #e3efe8;
  --noite: #1f4d3a; --moldura: #dce6de; --acento: #f2c94c; --foco: #17543d;
  --info: #1f5a99; --info-fundo: #e1ebf7;
  --neutro: #52615a; --neutro-fundo: #eceadf;
  --sombra: 0 1px 2px rgba(19, 41, 31, .06), 0 10px 28px -16px rgba(19, 41, 31, .28);
  --sombra-alta: 0 2px 4px rgba(19, 41, 31, .08), 0 18px 36px -14px rgba(19, 41, 31, .34);
}
body { background: var(--fundo); }
::selection { background: #cfe5d9; }
.menu a, .quem, .perfil-btn { color: #e3efe8; }
.menu a:hover { color: #fff; }
td input.nota { border-color: #6fa58c; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(31, 107, 79, .25); }
.passos li::before { background: var(--primaria-clara); color: var(--primaria-escura); box-shadow: none; }
.passos li.feito::before { background: var(--ok-fundo); color: var(--ok); }

/* marca no topo */
.marca { gap: 10px; }
.marca .logo-ico { flex: none; border-radius: 10px; }
.marca-nome { display: inline-grid; line-height: 1; }
.marca-nome b { font-size: 1.1rem; letter-spacing: -.01em; }
.marca-nome small { font-size: .62rem; letter-spacing: .3em; color: #cfe0d6; margin-top: 3px; font-weight: 700; }

/* botões nas cores da marca */
.btn { border-color: var(--primaria); }
.btn { box-shadow: 0 3px 0 #0f3b2b; }
.btn:hover { box-shadow: 0 4px 0 #0f3b2b; }
.btn:active { box-shadow: 0 0 0 #0f3b2b; }
.btn.sec { box-shadow: 0 3px 0 #bfd5c8; }
.btn.sec:hover { background: #cfe3d8; border-color: #cfe3d8; box-shadow: 0 4px 0 #bfd5c8; }
.btn.sec:active { box-shadow: 0 0 0 #bfd5c8; }
.btn.destaque { background: var(--acento); border-color: var(--acento); color: var(--tinta); box-shadow: 0 3px 0 #b8941f; }
.btn.destaque:hover { background: #e8bd34; border-color: #e8bd34; color: var(--tinta); box-shadow: 0 4px 0 #b8941f; }
.btn.destaque:active { box-shadow: 0 0 0 #b8941f; }
.btn.perigo { box-shadow: 0 3px 0 #7a1812; }
.btn[disabled], .btn[aria-disabled=true] { box-shadow: none; }
.cartao-rodape .btn.sec { box-shadow: 0 3px 0 #cfe0d6; }
.cartao .cartao-rodape .btn.sec:hover { background: #cfe3d8; border-color: #cfe3d8; }
.novo:hover { background: #cfe3d8; }
.lp-hero .btn, .inicio .btn, .ola .btn { box-shadow: 0 3px 0 rgba(8, 25, 18, .4); }
.lp-hero .btn.destaque, .inicio .btn.destaque, .ola .btn.destaque { box-shadow: 0 3px 0 #b8941f; }

/* faixas e blocos escuros em verde lousa */
.ola, .lp-hero, .inicio, .boletim-topo { background: var(--noite); }
.inicio .lista { background: rgba(255, 255, 255, .1); }
.lp-hero .btn.sec, .inicio .btn.sec { background: #fdfcf8; border-color: #fdfcf8; color: var(--noite); }
.rede-aviso { background: var(--noite); }
.teste-faixa { background: var(--primaria-clara); color: var(--noite); }
.planilha-tab thead th.hoje { background: var(--primaria); }
.cartao .banner .turno-tag { background: var(--primaria-clara); color: var(--primaria-escura); }
.cartao .cartao-rodape .btn.sec { background: var(--primaria-clara); border-color: var(--primaria-clara); }
/* =====================================================================
   AJUSTES PARA CELULAR E COMPUTADOR
   ===================================================================== */
/* toque: sem atraso nem zoom ao tocar duas vezes rápido (importante na ata) */
a, button, .cel, label, summary, select { touch-action: manipulation; -webkit-tap-highlight-color: rgba(31, 107, 79, .18); }

/* nada sai da tela: chips, fichas e navegação de mês quebram linha em vez de estourar a largura */
.filtro { white-space: normal; max-width: 100%; line-height: 1.25; text-align: left; }
.filtro > span:not(.n) { min-width: 0; overflow-wrap: anywhere; }
.fichas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.ficha { min-width: 0; overflow-wrap: anywhere; }
.ficha .codigo { font-size: clamp(1.05rem, 4.6vw, var(--t-gr)); letter-spacing: .1em; }
.mes-nav { flex-wrap: wrap; justify-content: center; }
.mes-nav h2 { flex: 1 1 100%; order: -1; }
@media (min-width: 560px) { .mes-nav { flex-wrap: nowrap; justify-content: space-between; } .mes-nav h2 { flex: 1 1 auto; order: 0; } }

/* alvos de toque de 44 px (cabeçalho da ata, botão ✓ do dia, foto de perfil no topo) */
.planilha-tab thead th.dia a { min-height: 44px; }
.planilha-tab .todos { min-height: 44px; }
.planilha-tab thead th.dia { padding-block: 4px; }
.perfil-btn { min-width: 44px; justify-content: center; }

/* contraste: marca "sem marcação" da ata e botões desativados */
.planilha-tab .cel[data-v=""] { color: #5d6a64; }
.btn[disabled], .btn[aria-disabled=true], .btn[disabled] span { color: #4f5b66; }

/* título de página que não é o principal (o h1 é o nome da turma) */
h2.titulo-pagina { font-size: 1.65rem; line-height: 1.25; letter-spacing: -.02em; margin: 6px 0 8px; }

/* computador: usa melhor a largura da tela */
.wrap { max-width: 1120px; }
@media (min-width: 1280px) { main.wrap:has(.planilha-tab) { max-width: 1400px; } }
@media (min-width: 1100px) { .planilha { max-height: 74vh; } }

/* celular: ata mais compacta e botão de salvar sempre à mão */
@media (max-width: 560px) {
  .planilha-tab thead th.nome, .planilha-tab tbody th.nome { min-width: 118px; max-width: 132px; font-size: .9rem; padding-inline: 8px; }
  .planilha-tab .num { margin-right: 4px; }
  .barra-salvar { margin-inline: 0; border-radius: 14px; padding: 10px; }
  .barra-salvar .btn { flex: 1 1 auto; }
}
/* link longo do boletim na tela de códigos: quebra em vez de estourar a largura */
.codigo { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }

/* ---- painel do administrador ---- */
.admin-cards { list-style: none; margin: 0 6px 20px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.admin-card { background: var(--papel); border-radius: 16px; padding: 14px 16px; box-shadow: 0 0 0 4px var(--moldura); display: grid; gap: 2px; align-content: start; }
.admin-card strong { font-size: 1.7rem; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.admin-card span { color: var(--tinta-2); font-size: var(--t-peq); }
.admin-card.dest { background: var(--primaria-clara); }
.admin-card.ok strong { color: var(--ok); } .admin-card.erro strong { color: var(--erro); } .admin-card.info strong { color: var(--info); }
.admin-duas { display: grid; gap: 0 20px; }
@media (min-width: 900px) { .admin-duas { grid-template-columns: 1fr 1fr; } }
.admin-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.admin-lista li { overflow-wrap: anywhere; }
.admin-busca .copiar { max-width: 560px; }
.grafico { width: 100%; height: auto; display: block; }
.grafico rect { fill: #cdd6d0; } .grafico rect.tem { fill: var(--primaria); }
.grafico .base { stroke: var(--linha); stroke-width: 1; }
.grafico text { font-size: 11px; fill: var(--tinta-2); font-family: var(--fonte); }
.admin-ficha-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: flex-start; }
.admin-ficha-topo p { margin: 0; }
.admin-dados { display: grid; gap: 12px 24px; margin: 14px 0 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.admin-dados dt { color: var(--tinta-2); font-size: var(--t-peq); }
.admin-dados dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.admin-linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 14px; }
.admin-linha > div { flex: 1 1 220px; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 24px; flex-wrap: wrap; }
.paginacao .desativado { opacity: .5; pointer-events: none; }
.destaque-painel { background: var(--primaria-clara); }
.perigo-zona { border: 2px solid var(--erro); }
.perigo-zona h2 { color: var(--erro); margin-top: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.painel h3 { margin: 22px 0 8px; font-size: var(--t-base); }
.painel h3:first-child { margin-top: 0; }
fieldset.so-leitura { border: 0; padding: 0; margin: 0; min-width: 0; opacity: .6; }

/* ---- acabamento de botoes e espacos (so formato/alinhamento; cores iguais) ---- */
/* o botao/dica que vem logo depois de um bloco nao pode colar nele */
.acoes + .apoio { margin-top: 10px; }
form + details.painel, .acoes + details.painel, form + .painel, .acoes + .painel { margin-top: 20px; }
/* avaliacoes do periodo: nome | Editar | Excluir na mesma linha; ao abrir o Editar o formulario ocupa a linha de baixo */
.avaliacao-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 4px 0; }
.avaliacao-item > .linha-avaliacao { display: contents; }
.avaliacao-item .linha-avaliacao > span { flex: 1 1 12rem; order: 1; min-width: 0; }
.avaliacao-item > details.editar { order: 2; }
.avaliacao-item .linha-avaliacao > form { order: 3; }
.avaliacao-item > details.editar[open] { order: 4; flex: 1 0 100%; }
.avaliacao-item > details.editar > summary, .avaliacao-item .linha-avaliacao .texto { padding: 0 10px; }
/* botao "Escolher arquivo" do navegador, no mesmo formato dos botoes do site */
input[type="file"]::file-selector-button { min-height: 44px; padding: 0 18px; margin-right: 12px; border: 0; border-radius: 99px; background: var(--primaria-clara); color: var(--primaria-escura); font: inherit; font-weight: 700; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--neutro-fundo); }@media (max-width: 420px) {
  input[type="file"] { font-size: .8125rem; }
  input[type="file"]::file-selector-button { padding: 0 14px; margin-right: 8px; }
}
/* ---- escolas e formularios: hierarquia e respiro ---- */
.acoes + .apoio { margin-top: 14px; }
.cores legend { margin-top: 22px; margin-bottom: 4px; }
.itens > .item .sub strong { color: var(--tinta); font-size: 1.125rem; }
@media (min-width: 700px) {
  .itens > .item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .itens > .item .item-topo { justify-content: flex-start; gap: 6px 18px; }
}
/* ---- lista de alunos: tudo da linha alinhado pela linha do nome; acoes com o mesmo peso ---- */
.aluno-acoes a, .aluno-acoes .texto { font-weight: 700; }
.acoes + .lista-alunos { margin-top: 24px; }
@media (min-width: 900px) {
  .aluno { grid-template-areas: "num nome codigo acoes" "num situacao . ."; }
  .aluno .codigo-bloco, .aluno .aluno-acoes { grid-row: 1; align-self: center; }
}@media (min-width: 900px) {
  .aluno .codigo-bloco { min-width: 12.5rem; }
  .aluno .codigo-bloco .apoio { line-height: 1; }
  .aluno .codigo { display: inline-block; min-width: 8.5em; text-align: center; }
}
.aluno-acoes .texto { padding-inline: 0; }

/* telas largas (PC): letra e espacos um pouco menores, para nao parecer ampliado; celular continua igual */
@media (min-width: 900px) { html { font-size: 93.75%; } }
@media (min-width: 900px) { .abas a { display: inline-flex; align-items: center; min-height: 44px; } .cor-opcao span { min-height: 44px; } }
@media (min-width: 900px) { summary, header button, header .btn, nav button { min-height: 44px; } }

/* alunos: botao Copiar ao lado do codigo */
.fora-da-tela { position: fixed; top: 0; left: -9999px; opacity: 0; }
.aluno .codigo-bloco { flex-wrap: wrap; }
.aluno .codigo-bloco .btn { min-width: 5.5rem; }
@media (min-width: 900px) { .aluno .codigo-bloco { min-width: 21rem; flex-wrap: nowrap; } .aluno .codigo { min-width: 7.5em; } }
@media print { [data-copiar-lista], [data-copiar-aluno] { display: none !important; } }@media (min-width: 900px) { .aluno .codigo-bloco { min-width: 17.5rem; } }

/* ---- TESTE: moldura de etiqueta (cartao da turma e codigo do aluno). Para desfazer, apague este bloco. ---- */
.cartao .banner { margin: 18px 18px 0; padding: 14px 18px 12px; border-top: 0; border: 4px solid var(--cor, var(--primaria)); border-radius: 16px; background: color-mix(in srgb, var(--cor, var(--primaria)) 16%, var(--papel)); box-shadow: inset 0 0 0 3px var(--papel), inset 0 0 0 4px color-mix(in srgb, var(--cor, var(--primaria)) 45%, transparent); }
.cartao .banner h2 { font-size: 1.2rem; }
.cartao .cartao-corpo { padding-top: 16px; }
.aluno .codigo { border: 1.5px dashed var(--primaria); border-radius: 8px; background: var(--papel); }
/* alunos: caixa de busca */
.aluno[hidden], .busca-alunos[hidden] { display: none; }
.busca-alunos { margin: 18px 0 18px; }
.busca-alunos input { max-width: 30rem; }
input[type=search] { width: 100%; min-height: 44px; padding: 9px 11px; border: 2px solid var(--campo); border-radius: 12px; font: inherit; background: var(--papel); color: var(--tinta); transition: border-color 150ms var(--suave), box-shadow 150ms var(--suave); }
/* turmas: escolha da escola num seletor que abre ao clicar */
.escolha-escola { position: relative; margin: 16px 0 20px; max-width: 30rem; width: fit-content; }
.escolha-escola > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px 6px 16px; border: 2px solid var(--primaria); border-radius: 99px; background: var(--primaria); cursor: pointer; font-weight: 700; color: #fff; }
.escolha-escola > summary::-webkit-details-marker { display: none; }
.escolha-escola > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-2px) rotate(45deg); transition: transform 150ms var(--suave); }
.escolha-escola[open] > summary { background: var(--primaria-escura); border-color: var(--primaria-escura); }
.escolha-escola[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.escolha-rotulo { font-weight: 400; opacity: .9; }
.escolha-atual { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.escolha-atual > span:not(.av) { overflow-wrap: anywhere; }
.escolha-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px; border: 2px solid var(--linha); border-radius: 12px; background: var(--papel); max-height: 60vh; overflow-y: auto; }
.escolha-lista .filtro { border-radius: 10px; width: 100%; }
.escolha-lista .filtro .n { margin-left: auto; }
@media (min-width: 700px) { .escolha-lista { position: absolute; left: 0; min-width: 22rem; z-index: 5; box-shadow: 0 10px 24px rgba(0,0,0,.14); } }
@media print { .escolha-escola { display: none; } }