/* =====================================================================
   LISTA DE MATERIAL INTERATIVA
   Folha própria: enquanto a página não entra no site, ela não mexe em
   nada do que já existe. Quando entrar, isto vira um bloco do style.css.
   ===================================================================== */

.materiais-abas {
  display: flex; flex-wrap: wrap; gap: var(--space-1, 8px);
  margin: 0 0 var(--space-4, 28px);
  border-bottom: 1px solid rgba(20,17,14,0.10);
  padding-bottom: var(--space-2, 14px);
}
.materiais-aba {
  border: 1px solid rgba(20,17,14,0.14);
  background: #fff; color: inherit;
  padding: 8px 16px; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.materiais-aba:hover { border-color: var(--laranja, #c9661e); }
.materiais-aba.ativa {
  background: var(--laranja, #c9661e); border-color: var(--laranja, #c9661e); color: #fff;
}

.materiais-cabecalho h3 { margin: 0 0 var(--space-3, 20px); font-size: 22px; }

.materiais-secao { margin: 0 0 var(--space-4, 28px); }
.materiais-secao-titulo {
  margin: 0 0 var(--space-2, 14px);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--laranja, #c9661e);
}

.materiais-itens { list-style: none; margin: 0; padding: 0; }
.materiais-item {
  display: grid;
  /* Sem coluna de preco: ela saiu junto com o campo. Deixar os 110px
     reservados abriria um buraco e estreitaria o nome do item. */
  grid-template-columns: 22px 1fr auto;
  align-items: start;
  gap: var(--space-2, 14px);
  padding: 10px 0;
  border-bottom: 1px solid rgba(20,17,14,0.06);
}
.materiais-item.comprado .materiais-nome { color: rgba(20,17,14,0.45); text-decoration: line-through; }
.materiais-marca { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--laranja, #c9661e); cursor: pointer; }
.materiais-nome { line-height: 1.5; }
.materiais-tirar {
  border: 0; background: none; color: rgba(20,17,14,0.35);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.materiais-tirar:hover { color: #b3261e; }

.materiais-obs {
  margin: var(--space-2, 14px) 0 0;
  padding: 10px 14px; border-left: 3px solid rgba(201,102,30,0.35);
  background: rgba(201,102,30,0.05);
  font-size: 14px; line-height: 1.55;
}

.materiais-total {
  margin-top: var(--space-4, 28px);
  padding: var(--space-3, 20px);
  border: 1px solid rgba(20,17,14,0.12); border-radius: 14px;
  background: rgba(201,102,30,0.04);
}
.materiais-total-linha { display: flex; justify-content: space-between; padding: 6px 0; }
.materiais-total-linha.destaque { font-size: 20px; border-top: 1px solid rgba(20,17,14,0.12); margin-top: 6px; padding-top: 12px; }
.materiais-total-linha.destaque strong { color: var(--laranja, #c9661e); }

.materiais-acoes { display: flex; flex-wrap: wrap; gap: var(--space-1, 8px); margin-top: var(--space-3, 20px); align-items: center; }
.materiais-limpar { border: 0; background: none; color: rgba(20,17,14,0.5); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.materiais-privado { margin: var(--space-2, 14px) 0 0; font-size: 13px; color: rgba(20,17,14,0.55); max-width: 60ch; }

.materiais-editar {
  margin-top: var(--space-4, 28px); padding-top: var(--space-3, 20px);
  border-top: 1px dashed rgba(20,17,14,0.18);
  display: flex; flex-wrap: wrap; gap: var(--space-1, 8px); align-items: center;
}
.materiais-dica { font-size: 13px; color: rgba(20,17,14,0.55); }
.materiais-editavel { outline: 1px dashed rgba(201,102,30,0.5); outline-offset: 3px; border-radius: 4px; cursor: text; }
.materiais-editavel:focus { outline: 2px solid var(--laranja, #c9661e); }
.materiais-vazio { color: rgba(20,17,14,0.55); }

@media (max-width: 620px) {
  /* Nove abas a 375 px ocupavam quatro fileiras e 152 px de altura, e a
     lista comecava so depois disso. Compactadas cabem em duas, sem
     precisar de rolagem lateral — que num dedo e pior que a quebra. */
  .materiais-aba { padding: 7px 12px; font-size: 14px; }
  .materiais-abas { gap: 6px; }
  .materiais-item { grid-template-columns: 22px 1fr; }
  .materiais-tirar { grid-column: 2; justify-self: end; margin-top: -34px; }
}

/* ---------------------------------------------------------------------
   NO PAPEL
   Some tudo que é de tela: abas, botões, o aviso de privacidade. Fica a
   lista com o que já foi marcado — que é o que a pessoa leva para a
   papelaria.
   --------------------------------------------------------------------- */

/* =====================================================================
   AS CAIXAS DE SÉRIE
   Ocupam o lugar que era dos botões "Baixar PDF". Cada uma abre a lista
   daquela série logo abaixo. O PDF oficial não sumiu: ele fica a um
   clique, dentro da lista que abre.
   ===================================================================== */
.serie-botao {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--color-primary, #F58634);
  border-radius: var(--radius-md, 14px);
  background: var(--color-primary, #F58634);
  color: #fff;
  font: inherit; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.serie-botao strong { font-size: 18px; font-weight: 700; color: #fff; }
.serie-data { font-size: 13px; color: rgba(255,255,255,0.78); }
.serie-chamada {
  margin-top: 6px; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.serie-chamada::after { content: " →"; }

@media (hover: hover) and (pointer: fine) {
  .serie-botao:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 8px 20px rgba(20,17,14,.14)); filter: brightness(1.06); }
}
.serie-botao:active { transform: scale(0.985); }
.serie-botao:focus-visible { outline: 3px solid #14110e; outline-offset: 3px; }

/* A caixa da série que está aberta embaixo CONTINUA LARANJA. Ficar
   preta dava a impressão de desligada, e não de escolhida. O que marca
   qual está aberta é o anel branco e a seta virando para baixo — sinal
   de posição, não troca de cor. */
/* A CAIXA ABERTA MUDA DE COR, e continua laranja.
   O anel branco sozinho era discreto demais: numa fileira de nove caixas
   iguais, ninguem via qual estava aberta. Agora ela escurece para o
   laranja queimado da propria paleta do site — diferenca que se enxerga
   de longe, sem virar outra cor.
   `outline` em vez de `box-shadow` porque a sombra esta na lista de
   transicoes do botao e saia interpolada em transparente. */
.serie-botao.aberta {
  background: #B4520F;
  border-color: #B4520F;
  outline: 3px solid rgba(255,255,255,0.55);
  outline-offset: -3px;
}
.serie-botao.aberta .serie-chamada::after { content: " ▾"; }

/* Com as caixas na página, a fileira de abas repetiria o mesmo trabalho
   em dois lugares — e dois controles para a mesma coisa sempre acabam
   discordando um do outro. */
.tem-caixas-de-serie .materiais-abas { display: none; }

@media print { .serie-botao { display: none !important; } }
/* NAO EXISTE MAIS uma classe que esconde a folha. O bloco vazio nao
   ocupa espaco por si so, e nada precisa "tirar a tampa" depois. Se um
   dia voltar um `display:none` aqui, volta junto o defeito da tela em
   branco quando o JavaScript nao roda. */

.materiais-chamada { margin: 0 0 var(--space-4, 28px); }

.materiais-convite {
  margin: 0; padding: 22px 24px;
  border: 1px dashed rgba(20,17,14,0.18); border-radius: var(--radius-md, 14px);
  color: rgba(20,17,14,0.6); background: rgba(255,255,255,0.5);
}

@media (max-width: 620px) {
  /* Uma caixa por fileira empurrava a lista para 900 px abaixo, e a
     pessoa rolava nove telas antes de ver material nenhum. Duas por
     fileira cortam isso pela metade e o alvo continua grande para o
     dedo: 44 px de altura é o mínimo confortável, e aqui sobra. */
  .arq-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .serie-botao { padding: 14px 14px; }
  .serie-botao strong { font-size: 16px; }
  .serie-data { display: none; }
}
@media (max-width: 380px) {
  .serie-chamada { display: none; }
}

/* =====================================================================
   NO PAPEL: SÓ A LISTA
   ---------------------------------------------------------------------
   Antes daqui, imprimir levava a página inteira — foto de topo, migalhas,
   os dois parágrafos de apresentação, "Área do administrador" e o convite
   final. Cinco folhas para uma lista de material.

   A técnica: apagar a visibilidade de TUDO e devolvê-la só ao bloco da
   lista, que sobe para o topo da folha. Esconder por `display:none` peça
   por peça exigiria conhecer cada seção da página, e qualquer bloco novo
   voltaria a vazar para a impressão sem ninguém perceber.
   ===================================================================== */
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body * { visibility: hidden !important; }
  #folhaMaterial, #folhaMaterial * { visibility: visible !important; }
  #folhaMaterial {
    position: absolute !important;
    left: 0; top: 0; width: 100%;
    margin: 0 !important; padding: 0 !important;
  }
  /* O titulo da secao fala com quem esta no site, nao com quem vai a
     papelaria. Fora da folha. */
  #folhaMaterial .section-head { display: none !important; }

  /* Dentro da lista, o que é de tela também sai. */
  .materiais-abas, .materiais-acoes, .materiais-editar, .materiais-privado,
  .materiais-tirar, .materiais-convite, .serie-botao {
    display: none !important;
  }

  /* O cabeçalho impresso: quem é a escola e de que série é esta folha.
     Na tela ele não aparece; no papel é o que identifica o documento. */
  .materiais-timbre { display: flex !important; gap: 12px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #333; }
  .materiais-marca-escola { height: 38px; }
  .materiais-timbre .escola { font-size: 11px; color: #333; }
  .materiais-cabecalho h3 { font-size: 19px; margin: 0 0 16px; }

  .materiais-secao { break-inside: auto; margin-bottom: 16px; }
  .materiais-secao-titulo { color: #000; break-after: avoid; }
  .materiais-item { break-inside: avoid; border-bottom: 1px solid #ddd; padding: 5px 0; }
  .materiais-nome { line-height: 1.35; }
  .materiais-item.comprado .materiais-nome { color: #666; }

  .materiais-marca {
    -webkit-appearance: none; appearance: none;
    width: 13px; height: 13px; border: 1.3px solid #333; border-radius: 2px;
  }
  .materiais-marca:checked { background: #333; }

  .materiais-total { border: 1px solid #333; background: none; break-inside: avoid; padding: 12px 14px; }
  .materiais-total-linha.destaque strong { color: #000; }

  @page { margin: 14mm; }
}

/* O TIMBRE DA LISTA
   Na tela ele separa a lista do resto da página: a partir dali é o
   documento da escola, e não mais o site. No papel é o que identifica a
   folha depois que o site em volta some. */
.materiais-timbre {
  display: flex; align-items: center; gap: 14px;
  padding: 0 0 16px; margin: 0 0 20px;
  border-bottom: 1px solid rgba(20,17,14,0.10);
}
/* `flex: none` e obrigatorio: o site tem uma regra global de imagem que
   deixa a largura elastica, e dentro de um flex a logo era espremida ate
   zero — carregava, mas nao aparecia. */
.materiais-marca-escola { flex: none; height: 44px; width: auto; max-width: none; display: block; }
.materiais-timbre .escola {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(20,17,14,0.5); line-height: 1.4;
}
@media (max-width: 480px) {
  .materiais-marca-escola { height: 36px; }
  .materiais-timbre .escola { font-size: 11px; }
}