/* Boletim do 1º Ano — o que o design system não traz pronto. */

body.cx { margin: 0; background: var(--cx-fundo); min-height: 100vh; }
.bl-carregando { padding: var(--cx-esp-6); color: var(--cx-texto-suave); }
.bl-oculto { display: none !important; }

/* ---------- topo ---------- */
.bl-topo {
  background: var(--cx-superficie);
  border-bottom: 1px solid var(--cx-borda);
  position: sticky; top: 0; z-index: 5;
}
.bl-topo__interno {
  max-width: 76rem; margin: 0 auto; padding: var(--cx-esp-3) var(--cx-esp-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--cx-esp-3) var(--cx-esp-6);
}
.bl-marca { display: flex; align-items: center; gap: var(--cx-esp-3); text-decoration: none; color: var(--cx-texto); }
.bl-marca img { height: 2.25rem; width: auto; }
.bl-marca strong { font-size: var(--cx-txt-base); }
.bl-marca span { display: block; font-size: var(--cx-txt-xs); color: var(--cx-texto-suave); }
.bl-nav { display: flex; flex-wrap: wrap; gap: var(--cx-esp-1); flex: 1; }
.bl-nav a {
  text-decoration: none; color: var(--cx-texto-suave); font-weight: var(--cx-peso-medio);
  font-size: var(--cx-txt-sm); padding: var(--cx-esp-2) var(--cx-esp-3); border-radius: var(--cx-raio-full);
}
.bl-nav a:hover { color: var(--cx-acao); background: var(--cx-acao-suave); }
.bl-nav a[aria-current="page"] { color: var(--cx-texto-invertido); background: var(--cx-acao); }
.bl-quem { display: flex; align-items: center; gap: var(--cx-esp-3); font-size: var(--cx-txt-sm); color: var(--cx-texto-suave); }
.bl-ano { font: inherit; font-size: var(--cx-txt-sm); padding: var(--cx-esp-1) var(--cx-esp-2); border: 1px solid var(--cx-borda); border-radius: var(--cx-raio-sm); background: var(--cx-superficie); color: var(--cx-texto); }

/* Embutido num iframe da plataforma: topo mais enxuto. */
.bl-embutido .bl-marca img { height: 1.75rem; }
.bl-embutido .bl-marca span { display: none; }

/* ---------- situação do salvamento ---------- */
.bl-status {
  font-size: var(--cx-txt-xs); font-weight: var(--cx-peso-forte);
  padding: var(--cx-esp-1) var(--cx-esp-3); border-radius: var(--cx-raio-full);
  background: var(--cx-pago-fundo); color: var(--cx-pago); white-space: nowrap;
}
.bl-status--salvando { background: var(--cx-pendente-fundo); color: var(--cx-pendente); }
.bl-status--falha { background: var(--cx-atrasado-fundo); color: var(--cx-atrasado); }

/* ---------- página ---------- */
.bl-pagina { max-width: 76rem; margin: 0 auto; padding: var(--cx-esp-6) var(--cx-esp-4) var(--cx-esp-8); }
.bl-pagina h1 { font-size: var(--cx-txt-xl); margin: 0 0 var(--cx-esp-1); color: var(--cx-texto); }
.bl-sub { color: var(--cx-texto-suave); margin: 0 0 var(--cx-esp-6); font-size: var(--cx-txt-sm); }
.bl-abas { display: flex; flex-wrap: wrap; gap: var(--cx-esp-2); margin-bottom: var(--cx-esp-4); }
.bl-abas a {
  text-decoration: none; font-size: var(--cx-txt-sm); font-weight: var(--cx-peso-forte);
  padding: var(--cx-esp-2) var(--cx-esp-4); border: 1px solid var(--cx-borda); border-radius: var(--cx-raio-full);
  color: var(--cx-texto); background: var(--cx-superficie);
}
.bl-abas a[aria-current="page"] { background: var(--cx-acao); border-color: var(--cx-acao); color: var(--cx-texto-invertido); }
.bl-cadeado { font-size: var(--cx-txt-xs); margin-left: var(--cx-esp-1); }

/* ---------- grade de notas ---------- */
.bl-grade-wrap { overflow: auto; max-height: calc(100vh - 14rem); background: var(--cx-superficie); }
.bl-grade { min-width: max-content; }
.bl-grade th, .bl-grade td { padding: var(--cx-esp-2) var(--cx-esp-3); vertical-align: middle; }
.bl-grade thead th { position: sticky; top: 0; background: var(--cx-fundo-alt); z-index: 2; text-align: center; max-width: 7rem; white-space: normal; line-height: 1.2; }
.bl-grade th:first-child, .bl-grade td:first-child { position: sticky; left: 0; background: var(--cx-superficie); z-index: 1; min-width: 12rem; max-width: 18rem; text-align: left; }
.bl-grade thead th:first-child { z-index: 3; background: var(--cx-fundo-alt); }
.bl-grade td a { color: var(--cx-texto); text-decoration: none; font-weight: var(--cx-peso-medio); }
.bl-grade td a:hover { color: var(--cx-acao); text-decoration: underline; }
.bl-nome { color: var(--cx-acao); font-weight: var(--cx-peso-forte); text-decoration: none; }
.bl-nome:hover { text-decoration: underline; }
.bl-celula {
  width: 4.25rem; font: inherit; font-family: var(--cx-fonte-mono); font-variant-numeric: tabular-nums;
  text-align: center; font-size: var(--cx-txt-base); padding: var(--cx-esp-2);
  border: 1px solid var(--cx-borda); border-radius: var(--cx-raio-sm); background: var(--cx-superficie); color: var(--cx-texto);
  transition: background-color .4s, border-color .2s;
}
.bl-celula:hover { border-color: var(--cx-borda-forte); }
.bl-celula:focus { outline: none; box-shadow: var(--cx-foco); border-color: var(--cx-acao); }
.bl-celula[readonly] { background: var(--cx-fundo-alt); color: var(--cx-texto-suave); border-style: dashed; }
.bl-celula--pendente { border-color: var(--cx-pendente); background: var(--cx-pendente-fundo); }
.bl-celula--salvo { background: var(--cx-pago-fundo); }
.bl-celula--abaixo { color: var(--cx-atrasado); font-weight: var(--cx-peso-forte); }
.bl-celula--conflito, .bl-celula--invalida { border-color: var(--cx-atrasado); background: var(--cx-atrasado-fundo); }

.bl-legenda { display: flex; flex-wrap: wrap; gap: var(--cx-esp-4); font-size: var(--cx-txt-xs); color: var(--cx-texto-suave); margin-top: var(--cx-esp-3); }
.bl-amostra { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; margin-right: var(--cx-esp-1); border: 1px solid var(--cx-borda); }

/* ---------- acesso ---------- */
.bl-centro { min-height: 100vh; display: grid; place-items: center; padding: var(--cx-esp-4); box-sizing: border-box; }
.bl-acesso { width: 100%; max-width: 26rem; box-sizing: border-box; }
.bl-acesso img { height: 3rem; display: block; margin-bottom: var(--cx-esp-4); }
.bl-acesso form { display: flex; flex-direction: column; gap: var(--cx-esp-4); }
.bl-erro { color: var(--cx-atrasado); font-size: var(--cx-txt-sm); font-weight: var(--cx-peso-medio); min-height: 1.2em; margin: 0; }

/* ---------- boletim (prévia do documento das famílias) ----------
   Mesmas cores, fonte e ordem do PDF em boletim-pdf.js. As cores são as
   medidas no logo oficial (design-system/marca/LEIA-ME.md), não as do
   design system. */
.bl-doc {
  --doc-roxo: #54397E; --doc-turquesa: #00B8BC; --doc-turquesa-texto: #00777A;
  --doc-tinta: #2B2238; --doc-suave: #6B6478; --doc-linha: #E4DFEC; --doc-fundo: #F5F2F9;
  position: relative; background: #fff; color: var(--doc-tinta);
  border: 1px solid var(--cx-borda); border-radius: var(--cx-raio-lg); box-shadow: var(--cx-sombra-md);
  max-width: 52rem; margin: 0 auto var(--cx-esp-6); padding: 2.5rem 2.5rem 1.5rem; overflow: hidden;
}
.bl-doc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--doc-roxo) 0 70%, var(--doc-turquesa) 70% 100%); }
.bl-doc__cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--doc-linha); }
.bl-doc__cab img { height: 4.25rem; width: auto; }
.bl-doc__titulo { text-align: right; line-height: 1.1; }
.bl-doc__titulo span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--doc-turquesa-texto); }
.bl-doc__titulo strong { font-size: 2.1rem; color: var(--doc-roxo); }
.bl-doc__aluno { display: flex; justify-content: space-between; gap: 1rem; background: var(--doc-fundo);
  border-radius: 10px; padding: .9rem 1.2rem; margin: 1.3rem 0 1.4rem; }
.bl-doc__aluno span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--doc-suave); }
.bl-doc__aluno strong { font-size: 1.15rem; }
.bl-doc__aluno div:last-child { text-align: right; flex: none; }

.bl-doc__notas { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.bl-doc__notas th { background: var(--doc-roxo); color: #fff; font-weight: 700; padding: .6rem .5rem; text-align: center; font-size: .8rem; }
.bl-doc__notas th:first-child { text-align: left; padding-left: 1rem; border-top-left-radius: 8px; }
.bl-doc__notas th:last-child { border-top-right-radius: 8px; }
.bl-doc__notas td { padding: .5rem; text-align: center; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--doc-linha); }
.bl-doc__notas td:first-child { text-align: left; padding-left: 1rem; }
.bl-doc__notas tbody tr:nth-child(even) td { background: #FBFAFD; }
.bl-doc__notas .bl-doc__media { background: var(--doc-fundo) !important; color: var(--doc-roxo); font-weight: 700; width: 4.5rem; }
.bl-doc__notas tfoot td { font-weight: 700; border-bottom: none; border-top: .5rem solid #fff; background: var(--doc-fundo); }
.bl-doc__notas tfoot td:first-child { border-radius: 8px 0 0 8px; }
.bl-doc__notas tfoot td:last-child { border-radius: 0 8px 8px 0; }
.bl-doc__notas small { display: block; font-size: .6rem; font-weight: 400; color: var(--doc-suave); }
.bl-doc .bl-abaixo { color: #B42318; }
.bl-doc__nota { font-size: .75rem; color: var(--doc-suave); margin: .7rem 0 0; }

.bl-doc__pareceres:empty { display: none; }
.bl-doc__pareceres h3 { font-size: 1.05rem; color: var(--doc-roxo); margin: 1.6rem 0 .6rem; }
.bl-doc__parecer { margin-bottom: .9rem; }
.bl-doc__parecer strong { font-size: .8rem; color: var(--doc-turquesa-texto); }
.bl-doc__parecer p { margin: .15rem 0 0; white-space: pre-wrap; font-size: .9rem; line-height: 1.5; }
.bl-doc__assinaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3.5rem; }
.bl-doc__assinaturas div { border-top: 1px solid var(--doc-suave); padding-top: .35rem; text-align: center; font-size: .75rem; color: var(--doc-suave); }
.bl-doc__rodape { text-align: center; font-size: .66rem; color: var(--doc-suave); margin: 1.6rem 0 0; }

.bl-doc-barra { display: flex; justify-content: space-between; align-items: center; gap: var(--cx-esp-3); max-width: 52rem; margin: 0 auto var(--cx-esp-4); flex-wrap: wrap; }
.bl-doc-navega { display: flex; justify-content: space-between; gap: var(--cx-esp-3); max-width: 52rem; margin: var(--cx-esp-6) auto 0; }
main .bl-secao.cx-cartao { max-width: 52rem; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.bl-titulo-acao { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--cx-esp-3); flex-wrap: wrap; }

/* ---------- formulários da direção ---------- */
.bl-form { display: grid; gap: var(--cx-esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: end; }
.bl-checks { display: flex; flex-wrap: wrap; gap: var(--cx-esp-2) var(--cx-esp-4); font-size: var(--cx-txt-sm); }
.bl-checks label { display: flex; gap: var(--cx-esp-1); align-items: center; }
.bl-link { font-family: var(--cx-fonte-mono); font-size: var(--cx-txt-xs); word-break: break-all; background: var(--cx-fundo-alt); padding: var(--cx-esp-3); border-radius: var(--cx-raio-sm); }
.bl-acoes { display: flex; flex-wrap: wrap; gap: var(--cx-esp-2); }
.bl-secao { margin-top: var(--cx-esp-6); }
.bl-secao h2 { font-size: var(--cx-txt-lg); margin: 0 0 var(--cx-esp-3); }
.bl-mini { font-size: var(--cx-txt-xs); color: var(--cx-texto-suave); }

/* ---------- lista de notas (celular) ---------- */
.bl-escolha { margin-bottom: var(--cx-esp-4); }
.bl-escolha select { font-size: var(--cx-txt-base); }
.bl-lista.bl-grade { min-width: 0; }
.bl-lista { list-style: none; margin: 0; padding: 0; background: var(--cx-superficie); border: 1px solid var(--cx-borda); border-radius: var(--cx-raio-md); }
.bl-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--cx-esp-3); padding: var(--cx-esp-3) var(--cx-esp-4); border-bottom: 1px solid var(--cx-borda); }
.bl-lista li:last-child { border-bottom: none; }
.bl-lista a { color: var(--cx-texto); text-decoration: none; font-weight: var(--cx-peso-medio); line-height: 1.3; }
.bl-lista .bl-celula { width: 5rem; flex: none; font-size: 1.125rem; padding: var(--cx-esp-3) var(--cx-esp-2); }

.bl-curto { display: none; }
.bl-menu { display: none; }

/* ---------- celular e tablet estreito ---------- */
@media (max-width: 47.99rem) {
  .bl-topo__interno { flex-wrap: nowrap; gap: var(--cx-esp-3); padding: var(--cx-esp-2) var(--cx-esp-4); }
  .bl-marca { flex: 1; min-width: 0; }
  .bl-marca img { height: 1.9rem; }
  .bl-marca span { white-space: nowrap; }
  .bl-lista a { min-width: 0; overflow-wrap: anywhere; }
  .bl-status { font-size: .7rem; padding: 2px var(--cx-esp-2); }

  /* Menu escondido atrás do botão de três traços. */
  .bl-menu {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 2.75rem; height: 2.75rem; padding: 0 .65rem; flex: none;
    background: none; border: 1px solid var(--cx-borda); border-radius: var(--cx-raio-md); cursor: pointer;
  }
  .bl-menu span { display: block; height: 2px; background: var(--cx-texto); border-radius: 2px; }
  .bl-nav, .bl-quem { display: none; }
  .bl-topo--aberto .bl-topo__interno { flex-wrap: wrap; }
  .bl-topo--aberto .bl-nav { display: flex; flex-direction: column; flex-basis: 100%; gap: 2px; padding-top: var(--cx-esp-2); }
  .bl-topo--aberto .bl-nav a { font-size: var(--cx-txt-base); padding: var(--cx-esp-3) var(--cx-esp-4); border-radius: var(--cx-raio-md); }
  .bl-topo--aberto .bl-quem { display: flex; flex-basis: 100%; justify-content: space-between; padding: var(--cx-esp-2) 0; border-top: 1px solid var(--cx-borda); }

  .bl-pagina { padding: var(--cx-esp-4) var(--cx-esp-4) var(--cx-esp-8); }
  .bl-pagina h1 { font-size: var(--cx-txt-lg); }
  .bl-sub { margin-bottom: var(--cx-esp-4); }

  /* Bimestres numa linha só, rolando para o lado se precisar. */
  .bl-abas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .bl-abas a { white-space: nowrap; flex: none; }

  .cx-btn { min-height: 2.75rem; }
  .bl-acoes .cx-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .cx-campo__controle { font-size: 16px; } /* abaixo de 16px o iPhone dá zoom no campo */

  /* Tabelas de lista viram cartões empilhados. */
  .bl-empilha thead { display: none; }
  .bl-empilha, .bl-empilha tbody, .bl-empilha tr, .bl-empilha td { display: block; width: 100%; box-sizing: border-box; }
  .bl-empilha tr { padding: var(--cx-esp-3) var(--cx-esp-4); border-bottom: 1px solid var(--cx-borda); }
  .bl-empilha tbody tr:last-child { border-bottom: none; }
  .bl-empilha td { border: none; padding: 2px 0; text-align: left !important; }
  .bl-empilha td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--cx-texto-suave); font-size: var(--cx-txt-xs); }
  .bl-empilha td:empty { display: none; }
  .bl-empilha .bl-acoes { margin-top: var(--cx-esp-2); }
  .bl-empilha td.num { font-family: inherit; font-size: var(--cx-txt-sm); }
  .bl-empilha .bl-so-largo { display: none; }
  .bl-empilha .cx-btn--pequeno { min-height: 2.25rem; }
  .bl-empilha--linha tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cx-esp-2); }
  .bl-empilha--linha td { width: auto; }
  .bl-empilha--linha td:first-child { flex: 1; font-weight: var(--cx-peso-forte); }

  /* Boletim: cabe na largura do celular sem rolagem lateral. */
  .bl-doc { padding: 1.6rem 1rem 1rem; border-radius: var(--cx-raio-md); }
  .bl-doc__cab img { height: 3rem; }
  .bl-doc__titulo strong { font-size: 1.5rem; }
  .bl-doc__aluno { padding: .75rem .9rem; }
  .bl-doc__aluno strong { font-size: 1rem; }
  .bl-doc__notas { font-size: .78rem; table-layout: fixed; }
  .bl-doc__notas th { font-size: .68rem; padding: .5rem 2px; }
  .bl-doc__notas td { padding: .45rem 2px; }
  .bl-doc__notas th:first-child, .bl-doc__notas td:first-child { width: 34%; padding-left: .6rem; overflow-wrap: anywhere; }
  .bl-doc__notas .bl-doc__media { width: auto; }
  .bl-doc__assinaturas { gap: 1.5rem; margin-top: 2.5rem; }
  .bl-doc-barra .bl-acoes { width: 100%; }
  .bl-longo { display: none; }
  .bl-curto { display: inline; }

  .bl-form { grid-template-columns: 1fr; }
  #bl-discs .cx-linha { flex-wrap: nowrap; }
  #bl-discs .cx-campo__controle { min-width: 0 !important; }
}

/* ---------- impressão ----------
   O caminho para a família é o PDF (botão Baixar/Enviar). Se alguém imprimir
   a página mesmo assim, sai só o documento. */
@media print {
  @page { size: A4; margin: 10mm; }
  body.cx { background: #fff; }
  .bl-topo, .bl-doc-barra, .bl-doc-navega, .bl-secao, .cx-aviso, #bl-aviso-fila { display: none !important; }
  .bl-pagina { padding: 0; max-width: none; }
  .bl-doc { border: none; box-shadow: none; max-width: none; padding: 0; }
  .bl-doc::before { display: none; }
}