/* =====================================================================
   LISTAS DE MATERIAL ESCOLAR (15/10/2026)
   ---------------------------------------------------------------------
   A folha é desenhada em pontos (pt), a mesma unidade dos PDFs da
   escola: 842 × 595 pt é a A4 deitada. Cada peça (logo, título, régua
   laranja, divisórias e as três colunas) é posicionada pelo JS com as
   medidas tiradas do PDF original (api/listas-escolares-inicio.json).
   Na tela, a folha inteira é encolhida para caber; no papel e no PDF,
   sai no tamanho real.
   ===================================================================== */

.le-lede { max-width: 60ch; margin-bottom: 20px; }

/* ---------- escolha do ano ---------- */
.le-series { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.le-serie {
  font: 600 15px/1 var(--font-display);
  padding: 11px 18px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border); background: var(--color-white);
  color: var(--color-ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.le-serie:hover { border-color: var(--color-primary); }
.le-serie[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.le-serie .le-ponto { width: 8px; height: 8px; border-radius: 50%; background: #B9B2A8; }
.le-serie .le-ponto.liberada { background: #2E9E5B; }
.le-serie[aria-selected="true"] .le-ponto { box-shadow: 0 0 0 2px #fff; }

/* ---------- barra de botões ---------- */
.le-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px; margin-bottom: 14px;
  background: var(--color-gray-50); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.le-barra .le-grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.le-barra .le-separa { flex: 1 1 auto; }
.le-bt {
  font: 600 14px/1 var(--font-body);
  padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border); background: var(--color-white);
  color: var(--color-ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
}
.le-bt:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }
.le-bt:disabled { opacity: .5; cursor: default; }
.le-bt svg { width: 16px; height: 16px; flex-shrink: 0; }
.le-bt.le-forte { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.le-bt.le-forte:hover { background: var(--color-primary-hover); color: #fff; }
.le-bt.le-liberar { border-color: #2E9E5B; color: #1F7A44; }
.le-bt.le-omitir { border-color: #8A847C; color: #5B5650; }
.le-bt.le-fmt { min-width: 40px; justify-content: center; font-family: Georgia, serif; font-size: 16px; }

.le-estado {
  font: 600 13px/1.2 var(--font-body);
  padding: 7px 12px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 6px;
}
.le-estado.omitida { background: #EFEBE6; color: #5B5650; }
.le-estado.liberada { background: #E3F4EA; color: #1F7A44; }
.le-quando { font-size: 12px; color: var(--color-ink-faint); }

.le-aviso {
  padding: 12px 14px; margin-bottom: 14px; border-radius: var(--radius-sm);
  background: var(--color-primary-light); color: var(--color-ink); font-size: 14px;
}
.le-aviso.erro { background: #FDECEC; color: #8A1F1F; }
.le-carregando, .le-vazio { color: var(--color-ink-soft); padding: 30px 0; }

/* ---------- o palco: a folha encolhida para caber ---------- */
.le-palco {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 6px; box-shadow: 0 8px 30px rgba(44, 42, 40, .14);
  background: #fff;
}
.le-palco > .le-folha { transform-origin: 0 0; }

/* ---------- a folha (tamanho real) ---------- */
.le-folha {
  position: relative; width: 842pt; height: 595pt; overflow: hidden;
  background: #fff; color: #231f20;
  font-family: Calibri, Carlito, "Segoe UI", sans-serif;
  font-size: 10pt; line-height: 12.2pt;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.le-folha * { box-sizing: content-box; }
.le-logo { position: absolute; display: block; }
.le-titulo {
  position: absolute; white-space: nowrap; margin: 0;
  font-weight: 400; line-height: 1; color: #231f20; letter-spacing: 0;
}
.le-titulo.arial { font-family: Arial, Arimo, sans-serif; }
.le-titulo.calibri { font-family: Calibri, Carlito, sans-serif; }
.le-titulo.negrito { font-weight: 700; }
.le-regua { position: absolute; background: #F5821F; }
.le-divisoria { position: absolute; width: .75pt; background: #6C6E70; }
/* O texto corrido em 3 colunas, como no Word: o navegador enche a 1ª
   coluna até o pé e continua na 2ª, depois na 3ª. */
.le-texto {
  position: absolute; overflow: hidden;
  column-count: 3; column-fill: auto;
}
.le-texto p { margin: 0; }
/* Linha em branco: 60% de uma linha de texto (19/10/2026). "lh" = a
   entrelinha da própria folha, que muda junto com o ajuste da letra. */
.le-texto p.le-branca { height: .6lh; overflow: hidden; }
.le-texto b { font-weight: 700; }
.le-texto u { text-decoration-thickness: .6pt; text-underline-offset: 1.3pt; }
/* Tópicos e numeração (19/10/2026), na folha e na caixa de edição. O
   style.css do site zera as listas; aqui elas voltam, com o recuo do
   Word: o marcador fica pendurado e o texto alinha embaixo do texto. */
.le-ed-caixa ul, .le-ed-caixa ol { margin: 0; padding: 0 0 0 1em; }
.le-ed-caixa ul { list-style: disc outside; }
.le-ed-caixa ul ul { list-style-type: circle; }
.le-ed-caixa ul ul ul { list-style-type: square; }
/* Na caixa, a numeração fica como na folha: número na borda (pedido do
   Pedro, 19/10/2026: "1 a 3 ficaram com margem diferente"). */
.le-ed-caixa ol { list-style: decimal inside; }
.le-ed-caixa ol.la { list-style-type: lower-alpha; }
.le-ed-caixa ol.ua { list-style-type: upper-alpha; }
.le-ed-caixa ol.lr { list-style-type: lower-roman; }
.le-ed-caixa ol.ur { list-style-type: upper-roman; }
.le-ed-caixa ol { padding-left: 0; }
.le-ed-caixa ul ol, .le-ed-caixa ol ol { padding-left: 1.5em; }
.le-texto li, .le-ed-caixa li { margin: 0; padding: 0; }
/* Na folha o marcador é texto de verdade (js: marcarTopicos), porque o
   gerador de PDF erra o marcador automático. Alinhamento no bloco
   (pedido do Pedro, 19/10/2026): a bolinha ou o número começa na borda
   da coluna, como as outras linhas; o texto do tópico, e a 2ª linha
   dele, ficam alinhados logo depois. Subnível recua um degrau. */
.le-texto ul, .le-texto ol { margin: 0; padding: 0 0 0 1em; list-style: none; }
.le-texto li { position: relative; }
.le-texto .le-marca { position: absolute; left: -1em; white-space: nowrap; font-weight: 400; font-style: normal; text-decoration: none; }
/* Numeração: igual à escrita à mão no modelo ("7. Nome do livro"): o
   número na borda, um espaço, o texto; a 2ª linha volta para a borda.
   Subnível recua um degrau. */
.le-texto ol { padding-left: 0; }
.le-texto ul ol, .le-texto ol ol { padding-left: 1.5em; }
.le-texto ol > li > .le-marca { position: static; }
.le-texto .centro, .le-ed-caixa .centro { text-align: center; }
.le-texto .direita, .le-ed-caixa .direita { text-align: right; }
.le-texto .justo, .le-ed-caixa .justo { text-align: justify; }
/* Trechos que no PDF estavam em Arial Narrow (livros do 8º ano). */
.le-texto .estreita { font-family: "Arial Narrow", "Archivo Narrow", Arial, sans-serif; font-stretch: condensed; }

/* ---------- edição: uma caixa de texto só ---------- */
.le-editor {
  margin-bottom: 18px; padding: 16px;
  background: var(--color-white); border: 1.5px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
}
.le-ed-rotulo { display: block; font: 600 14px/1.3 var(--font-display); color: var(--color-ink); margin-bottom: 6px; }
.le-ed-previa { margin: 4px 0 8px; }
.le-ed-titulo {
  display: block; width: 100%; margin: 6px 0 16px; padding: 10px 12px;
  font: 400 16px/1.3 Arial, Arimo, sans-serif; color: #231f20;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
}
.le-ed-dica { font-size: 13px; color: var(--color-ink-soft); margin: 0 0 8px; }
.le-ed-caixa {
  min-height: 320px; max-height: 60vh; overflow-y: auto;
  padding: 14px 16px; background: #fff; color: #231f20;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.2;
  outline: none;
}
.le-ed-caixa:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.le-ed-caixa p { margin: 0; }
/* Entrelinha e linha em branco iguais às da folha (19/10/2026). */
.le-ed-caixa p.le-branca { height: .6lh; }
.le-ed-caixa .estreita { font-family: "Arial Narrow", "Archivo Narrow", Arial, sans-serif; font-stretch: condensed; }
.le-ed-estouro {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: #FDECEC; color: #8A1F1F; font-size: 14px; font-weight: 600;
}


/* ---------- exibir (tela cheia) ---------- */
.le-visor {
  position: fixed; inset: 0; z-index: 2147483640;
  background: rgba(30, 28, 26, .92);
  display: flex; align-items: center; justify-content: center;
}
.le-visor .le-visor-palco { position: relative; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); overflow: hidden; }
.le-visor .le-visor-palco > .le-folha { transform-origin: 0 0; }
.le-visor-fechar {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font: 600 15px/1 var(--font-body); color: #fff;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-pill); padding: 10px 16px; cursor: pointer;
}
body.le-visor-aberto { overflow: hidden; }

/* ---------- imprimir: só a folha, A4 deitada, sem margem ---------- */
@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.le-imprimindo > * { display: none !important; }
  body.le-imprimindo > .le-papel { display: block !important; }
  /* Na página Lista de Materiais, o css/materiais.css (impressão da lista
     antiga) esconde tudo fora de #folhaMaterial com visibility:hidden, e
     a folha 2027 saía em branco (19/10/2026). Aqui ela volta a aparecer. */
  body.le-imprimindo .le-papel, body.le-imprimindo .le-papel * { visibility: visible !important; }
  body.le-imprimindo .le-papel { position: static !important; }
  .le-papel .le-folha { transform: none !important; height: 594pt; page-break-after: avoid; break-after: avoid; }
  .le-folha { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.le-papel { display: none; }

@media (max-width: 640px) {
  .le-bt { padding: 9px 11px; font-size: 13px; }
  .le-barra { padding: 10px; }
}

/* Dentro da página Lista de Materiais (15/10/2026). */
#leListas[data-externo] { margin-bottom: 48px; }
.le-cabeca { font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 12px; }