/* =====================================================================
   ESCOLA ESTADUAL EM TEMPO INTEGRAL ANGELITA FÉLIX BEZERRA
   Folha de estilos do dashboard institucional
   ===================================================================== */

/* ---------- TOKENS DE DESIGN ---------- */
:root {
  /* Cores principais */
  --cor-marinho: #14304A;       /* azul profundo - autoridade institucional */
  --cor-marinho-escuro: #0D2235;
  --cor-verde: #1F7A5C;         /* verde - crescimento e educação */
  --cor-verde-escuro: #16563F;
  --cor-dourado: #F2A93B;       /* dourado - energia e destaque */
  --cor-dourado-escuro: #D6911F;
  --cor-coral: #E2543B;         /* coral - alertas e urgência, uso pontual */
  --cor-azul-acao: #2563EB;     /* CRIADO 2026-07-09 — azul nítido para botões de ação (Ver/Editar) */
  --cor-azul-acao-escuro: #1D4ED8;
  --cor-vermelho-acao: #DC2626; /* CRIADO 2026-07-09 — vermelho nítido para botão Excluir */
  --cor-vermelho-acao-escuro: #B91C1C;

  /* Neutros */
  --cor-fundo: #F3F5F4;
  --cor-superficie: #FFFFFF;
  --cor-papel: #FBF9F4;         /* tom de papel para o mural */
  --cor-borda: #E1E5E3;
  --cor-tinta: #14202B;
  --cor-tinta-suave: #51606A;
  --cor-tinta-clara: #EAF1EE;

  /* Tipografia */
  --fonte-titulo: 'Fraunces', 'Georgia', serif;
  --fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif;
  --fonte-utilitaria: 'IBM Plex Mono', 'Courier New', monospace;

  /* Layout */
  --largura-maxima: 1180px;
  --raio-card: 14px;
  --raio-botao: 999px;
  --sombra-suave: 0 14px 30px -18px rgba(20, 48, 74, 0.35);
  --sombra-forte: 0 22px 45px -20px rgba(20, 48, 74, 0.45);
  --transicao: 200ms ease;
}

/* ---------- RESET BÁSICO ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  color: var(--cor-tinta);
  background: var(--cor-fundo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--fonte-titulo); margin: 0 0 0.4em; color: var(--cor-marinho); line-height: 1.15; }
p { margin: 0 0 1em; color: var(--cor-tinta-suave); }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cor-dourado);
  outline-offset: 2px;
}

.icone-mini { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- ROTÚLOS E ETIQUETAS ---------- */
.rotulo-secao {
  display: inline-block;
  font-family: var(--fonte-utilitaria);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-verde);
  background: var(--cor-tinta-clara);
  padding: 0.35em 0.9em;
  border-radius: var(--raio-botao);
  margin-bottom: 0.9em;
}
.rotulo-secao--claro { color: var(--cor-marinho-escuro); background: rgba(255,255,255,0.85); }

.etiqueta {
  display: inline-block;
  font-family: var(--fonte-utilitaria);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: 6px;
  margin-bottom: 0.6em;
}
.etiqueta--verde { background: rgba(31, 122, 92, 0.14); color: var(--cor-verde-escuro); }
.etiqueta--dourado { background: rgba(242, 169, 59, 0.18); color: var(--cor-dourado-escuro); }
.etiqueta--coral { background: rgba(226, 84, 59, 0.14); color: var(--cor-coral); }

.titulo-letra-manuscrita { font-style: italic; }

/* CRIADO (17/09/2026, a pedido do usuário) — aviso usado quando um filtro
   de Área do Conhecimento na Biblioteca não encontra livro na coleção
   atual (físico/digital), mas a área tem livro(s) na outra coleção. Ver
   BibliotecaLivroController::acervo()/listar() e
   BibliotecaLivroDigitalController::acervoDigital()/listar(). */
.aviso-info {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-left: 4px solid var(--cor-azul-acao);
  color: var(--cor-tinta);
  padding: 0.8em 1em;
  border-radius: 6px;
  margin: 0.6em 0 1em;
}
.aviso-info a { color: var(--cor-azul-acao); font-weight: 600; }

/* ---------- BOTÕES ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85em 1.6em;
  border-radius: var(--raio-botao);
  border: 2px solid transparent;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.botao:hover { transform: translateY(-2px); }

.botao--dourado { background: var(--cor-dourado); color: var(--cor-marinho-escuro); box-shadow: var(--sombra-suave); }
.botao--dourado:hover { background: var(--cor-dourado-escuro); }

.botao--verde { background: var(--cor-verde); color: #fff; box-shadow: var(--sombra-suave); border: none; }
.botao--verde:hover { background: var(--cor-verde-escuro); }

.botao--contorno-claro { border-color: rgba(255,255,255,0.55); color: #fff; }
.botao--contorno-claro:hover { background: rgba(255,255,255,0.12); }

/* ---------- FAIXA UTILITÁRIA SUPERIOR ---------- */
.faixa-utilitaria {
  background: var(--cor-marinho-escuro);
  color: rgba(255,255,255,0.88);
  font-size: 0.82rem;
}
.faixa-utilitaria__conteudo {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0.55em 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faixa-utilitaria__contato { display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap; }
.faixa-utilitaria__contato a { display: inline-flex; align-items: center; gap: 0.4em; }
.faixa-utilitaria__separador { opacity: 0.5; }
.faixa-utilitaria__endereco { opacity: 0.85; }
.faixa-utilitaria__acoes { display: flex; align-items: center; gap: 1.2em; }
.faixa-utilitaria__link:hover { text-decoration: underline; }

.botao-area-aluno {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--cor-dourado);
  color: var(--cor-marinho-escuro);
  font-weight: 700;
  padding: 0.45em 1em;
  border-radius: var(--raio-botao);
  transition: background var(--transicao), transform var(--transicao);
}
.botao-area-aluno:hover { background: var(--cor-dourado-escuro); transform: translateY(-1px); }
.botao-area-aluno .icone-mini { width: 14px; height: 14px; }

/* ---------- CABEÇALHO PRINCIPAL ---------- */
.cabecalho {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  position: sticky;
  top: 0;
  z-index: 50;
}
.cabecalho__conteudo {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.identidade-escola { display: flex; align-items: center; gap: 0.8em; }
.identidade-escola__brasao {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cor-marinho);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.identidade-escola__texto { display: flex; flex-direction: column; line-height: 1.25; }
.identidade-escola__texto strong { font-family: var(--fonte-titulo); font-size: 1rem; color: var(--cor-marinho); }
.identidade-escola__texto small { color: var(--cor-tinta-suave); font-size: 0.78rem; }

.menu-principal { display: flex; align-items: center; gap: 1.6em; }
.menu-principal a { font-weight: 600; font-size: 0.92rem; color: var(--cor-tinta-suave); padding: 0.4em 0; border-bottom: 2px solid transparent; transition: color var(--transicao), border-color var(--transicao); }
.menu-principal a:hover { color: var(--cor-marinho); border-color: var(--cor-dourado); }
.menu-principal__destaque {
  background: var(--cor-marinho);
  color: #fff !important;
  padding: 0.55em 1.1em !important;
  border-radius: var(--raio-botao);
  border-bottom: none !important;
}
.menu-principal__destaque:hover { background: var(--cor-marinho-escuro); }

.botao-menu-mobile {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.botao-menu-mobile span { display: block; height: 2px; width: 18px; margin: 0 auto; background: var(--cor-marinho); transition: transform var(--transicao), opacity var(--transicao); }
.botao-menu-mobile[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.botao-menu-mobile[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.botao-menu-mobile[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  background: radial-gradient(circle at 18% 20%, rgba(242,169,59,0.18), transparent 55%), var(--cor-marinho);
  color: #fff;
  padding: 4.5rem 1.5rem 0;
}
.hero__conteudo { max-width: var(--largura-maxima); margin: 0 auto; padding-bottom: 3rem; }
.hero__titulo { color: #fff; font-size: clamp(2.1rem, 4vw, 3.3rem); max-width: 18ch; font-weight: 600; }
.hero__texto { color: rgba(255,255,255,0.82); max-width: 56ch; font-size: 1.05rem; }
.hero__acoes { display: flex; gap: 1em; flex-wrap: wrap; margin-top: 1.6rem; }

.hero__indicadores {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero__indicador { padding: 1.4rem 1.5rem; border-right: 1px solid rgba(255,255,255,0.14); }
.hero__indicador:last-child { border-right: none; }
.hero__indicador dt { font-family: var(--fonte-utilitaria); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); margin-bottom: 0.3em; }
.hero__indicador dd { margin: 0; font-weight: 600; font-size: 1.02rem; }

/* ---------- SEÇÕES GENÉRICAS ---------- */
.secao { max-width: var(--largura-maxima); margin: 0 auto; padding: 4.5rem 1.5rem; }
.secao--clara { background: var(--cor-superficie); max-width: none; }
.secao--clara > * { max-width: var(--largura-maxima); margin-left: auto; margin-right: auto; }
.secao__cabecalho { max-width: 62ch; margin-bottom: 2.6rem; }
.secao__cabecalho h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* ---------- GRADE DO PAINEL (DASHBOARD) ---------- */
.grade-painel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.cartao-painel {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
  position: relative;
}
.cartao-painel:hover { transform: translateY(-4px); box-shadow: var(--sombra-suave); border-color: var(--cor-verde); }
.cartao-painel__icone {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--cor-tinta-clara);
  color: var(--cor-verde);
  margin-bottom: 0.3em;
}
.cartao-painel__icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cartao-painel__titulo { font-family: var(--fonte-titulo); font-weight: 600; color: var(--cor-marinho); font-size: 1.08rem; }
.cartao-painel__texto { color: var(--cor-tinta-suave); font-size: 0.88rem; }
.cartao-painel[data-em-breve="true"]::after {
  content: "Em breve";
  position: absolute;
  top: 1rem; right: 1rem;
  font-family: var(--fonte-utilitaria);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-dourado-escuro);
  background: rgba(242,169,59,0.16);
  padding: 0.25em 0.6em;
  border-radius: 999px;
}

/* ---------- WIDGET: ESTATÍSTICA DA BIBLIOTECA (DASHBOARD) ---------- */
/* CRIADO — a pedido do usuário (10/09/2026): "Inclua a estatística
   (quantidade) de livros total, e de acordo com a área... disponível em
   todos os perfis, preferencialmente, no Dashboard principal." CSS
   central (em vez de duplicar em <style> por view) porque o mesmo
   widget é incluído em 4 dashboards diferentes — ver
   app/Views/parciais/biblioteca_estatisticas.php. */
.widget-biblioteca-estat-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}
.widget-biblioteca-estat {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  padding: 1.3rem 1.5rem;
}
.widget-biblioteca-estat__cabecalho { display: flex; align-items: center; gap: 0.9rem; }
.widget-biblioteca-estat__icone {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--cor-tinta-clara);
  color: var(--cor-verde);
}
.widget-biblioteca-estat__icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.widget-biblioteca-estat__total { display: block; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.6rem; color: var(--cor-marinho); line-height: 1.1; }
.widget-biblioteca-estat__rotulo { display: block; font-size: 0.8rem; color: var(--cor-tinta-suave); }
/* CRIADO (15/09/2026) — segunda linha, abaixo de __rotulo, com o total de
   exemplares do acervo físico (ver biblioteca_estatisticas.php). */
.widget-biblioteca-estat__subtotal { display: block; font-size: 0.76rem; color: var(--cor-tinta-suave); margin-top: 0.1rem; }
.widget-biblioteca-estat__lista { list-style: none; margin: 1rem 0 0; padding: 0.8rem 0 0; border-top: 1px solid var(--cor-borda); max-height: 220px; overflow-y: auto; }
.widget-biblioteca-estat__lista li { display: flex; justify-content: space-between; gap: 0.8em; padding: 0.32em 0; font-size: 0.85rem; color: var(--cor-tinta-suave); }
.widget-biblioteca-estat__lista strong { color: var(--cor-marinho); font-weight: 700; }
/* CRIADO (15/09/2026) — agrupa título(s)/exemplar(es) do acervo físico
   numa única célula à direita de cada linha de área. */
.widget-biblioteca-estat__lista-valores { text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .widget-biblioteca-estat-grade { grid-template-columns: 1fr; }
}

/* ---------- MURAL DE AVISOS (CORTIÇA) ---------- */
.secao--mural {
  background-color: var(--cor-papel);
  background-image:
    linear-gradient(rgba(20,32,43,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,32,43,0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}
.mural { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; padding-top: 0.5rem; }

.cartao-mural {
  background: #FFFDF7;
  border: 1px solid rgba(20,32,43,0.08);
  border-radius: 4px;
  padding: 1.4rem 1.4rem 1.6rem;
  box-shadow: 0 10px 18px -12px rgba(20,32,43,0.35);
  position: relative;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao-mural:hover { transform: translateY(-4px) rotate(0deg) !important; box-shadow: var(--sombra-forte); z-index: 2; }
.cartao-mural--rotacao-1 { transform: rotate(-1.4deg); }
.cartao-mural--rotacao-2 { transform: rotate(1.2deg); }
.cartao-mural--rotacao-3 { transform: rotate(-0.6deg); }

.cartao-mural__pino {
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a73, var(--cor-coral) 70%);
  box-shadow: 0 3px 4px rgba(0,0,0,0.3);
}
.cartao-mural__fita {
  position: absolute;
  top: -10px; right: 14px;
  width: 46px; height: 18px;
  background: rgba(242,169,59,0.55);
  transform: rotate(4deg);
  border: 1px solid rgba(242,169,59,0.7);
}

.cartao-mural__data {
  display: block;
  font-family: var(--fonte-utilitaria);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cor-tinta-suave);
  margin-bottom: 0.5em;
}
.cartao-mural h3 { font-size: 1.08rem; margin-bottom: 0.4em; }
.cartao-mural p { font-size: 0.9rem; margin: 0; }

/* ---------- NOTÍCIAS ---------- */
.abas-noticias {
  display: flex;
  gap: 0.6em;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.aba-noticia {
  background: transparent;
  border: none;
  padding: 0.8em 0.2em;
  margin-right: 1.4em;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cor-tinta-suave);
  border-bottom: 3px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.aba-noticia:hover { color: var(--cor-marinho); }
.aba-noticia.is-ativa { color: var(--cor-marinho); border-color: var(--cor-dourado); }

.painel-noticia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.painel-noticia[hidden] { display: none; }

.cartao-noticia {
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-verde);
  border-radius: 8px;
  padding: 1.3rem 1.4rem;
  background: var(--cor-fundo);
}
.cartao-noticia__fonte {
  display: block;
  font-family: var(--fonte-utilitaria);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-verde-escuro);
  margin-bottom: 0.6em;
}
.cartao-noticia h3 { font-size: 1.02rem; margin-bottom: 0.4em; }
.cartao-noticia p { font-size: 0.88rem; margin: 0; }

/* ---------- MAPA DO SITE ---------- */
.grade-mapa-site {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.coluna-mapa-site h3 {
  font-family: var(--fonte-utilitaria);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-verde-escuro);
  margin-bottom: 0.9em;
}
.coluna-mapa-site li { margin-bottom: 0.65em; }
.coluna-mapa-site a { color: var(--cor-tinta-suave); font-size: 0.92rem; }
.coluna-mapa-site a:hover { color: var(--cor-marinho); text-decoration: underline; }

/* ---------- CONTATO E LOCALIZAÇÃO ---------- */
.grade-contato { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.6rem; align-items: start; }

.formulario-contato {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1rem;
}
.campo-formulario { display: flex; flex-direction: column; gap: 0.4em; }
/* CORRIGIDO — a pedido do usuário (2026-08-01): mesmo bug já visto em
   ".disciplina-detalhe[hidden]" (ver mais abaixo neste arquivo) — como
   ".campo-formulario" acima é regra do autor com "display: flex", ela
   vence a regra padrão do navegador "[hidden] { display: none }"
   (user-agent stylesheet), então um campo com o atributo HTML "hidden"
   continuava aparecendo. Precisa de uma regra do autor mais específica
   (classe + atributo) reforçando o esconder. Usado para o campo Bairro
   em cadastrar_aluno.php/editar_aluno.php (só aparece com Zona Urbana),
   mas vale para qualquer campo de formulário escondido/exibido por JS. */
.campo-formulario[hidden] { display: none; }
.campo-formulario--largo { grid-column: 1 / -1; }
.campo-formulario label { font-size: 0.86rem; font-weight: 600; color: var(--cor-marinho); }
.campo-formulario input,
.campo-formulario select,
.campo-formulario textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.75em 0.9em;
  border: 1.5px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-superficie);
  color: var(--cor-tinta);
  transition: border-color var(--transicao);
  resize: vertical;
}
.campo-formulario input:focus,
.campo-formulario select:focus,
.campo-formulario textarea:focus { border-color: var(--cor-verde); }
.campo-formulario input.campo-invalido,
.campo-formulario textarea.campo-invalido { border-color: var(--cor-coral); }
.campo-formulario__erro { font-size: 0.78rem; color: var(--cor-coral); min-height: 1.1em; }

.formulario-contato__retorno {
  margin: 0.8em 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cor-verde-escuro);
}
.formulario-contato__retorno.erro { color: var(--cor-coral); }

.bloco-localizacao { display: flex; flex-direction: column; gap: 1.4rem; }
.lista-contato { display: flex; flex-direction: column; gap: 0.9em; }
.lista-contato li { display: flex; align-items: flex-start; gap: 0.7em; font-size: 0.92rem; color: var(--cor-tinta-suave); }
.lista-contato .icone-mini { color: var(--cor-verde); margin-top: 0.15em; }
.lista-contato a:hover { text-decoration: underline; color: var(--cor-marinho); }

.mapa-incorporado {
  border-radius: var(--raio-card);
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-suave);
  aspect-ratio: 4 / 3;
}
.mapa-incorporado iframe { width: 100%; height: 100%; border: 0; }

/* ---------- RODAPÉ ---------- */
.rodape { background: var(--cor-marinho-escuro); color: rgba(255,255,255,0.78); margin-top: 2rem; }
.rodape__conteudo {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
}
.rodape__bloco--identidade { display: flex; gap: 0.9em; }
.identidade-escola__brasao--rodape { background: var(--cor-dourado); color: var(--cor-marinho-escuro); }
.rodape__bloco h4 { font-family: var(--fonte-utilitaria); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 0.9em; }
.rodape__bloco ul li { margin-bottom: 0.6em; font-size: 0.88rem; }
.rodape__bloco a:hover { text-decoration: underline; color: #fff; }
.rodape__bloco p { color: rgba(255,255,255,0.7); font-size: 0.88rem; }

.rodape__base { border-top: 1px solid rgba(255,255,255,0.12); padding: 1.2rem 1.5rem; text-align: center; font-size: 0.78rem; color: rgba(255,255,255,0.55); }

/* ---------- BOTÃO VOLTAR AO TOPO ---------- */
.botao-topo {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--cor-marinho);
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-forte);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  z-index: 40;
}
.botao-topo.is-visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.botao-topo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   RESPONSIVIDADE
   ===================================================================== */

/* Tablets */
@media (max-width: 960px) {
  .grade-painel { grid-template-columns: repeat(2, 1fr); }
  .mural { grid-template-columns: repeat(2, 1fr); }
  .painel-noticia { grid-template-columns: repeat(2, 1fr); }
  .grade-mapa-site { grid-template-columns: repeat(2, 1fr); }
  .grade-contato { grid-template-columns: 1fr; }
  .rodape__conteudo { grid-template-columns: repeat(2, 1fr); }
  .hero__indicadores { grid-template-columns: repeat(2, 1fr); }
  .hero__indicador:nth-child(2) { border-right: none; }
}

/* Celulares */
@media (max-width: 680px) {
  .faixa-utilitaria__endereco { display: none; }
  .faixa-utilitaria__conteudo { padding: 0.55em 1.1rem; }

  .botao-menu-mobile { display: flex; }
  .menu-principal {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 300px);
    background: var(--cor-superficie);
    flex-direction: column;
    align-items: flex-start;
    padding: 5.5rem 1.6rem 2rem;
    gap: 0.4em;
    box-shadow: -18px 0 40px -20px rgba(20,32,43,0.4);
    transform: translateX(100%);
    transition: transform var(--transicao);
  }
  .menu-principal.is-aberto { transform: translateX(0); }
  .menu-principal a { width: 100%; padding: 0.7em 0; border-bottom: 1px solid var(--cor-borda); }
  .menu-principal__destaque { text-align: center; margin-top: 0.6em; border-bottom: none !important; }

  /* CRIADO — nas áreas internas do sistema (Secretaria/Administrador/
     Gestor/Professor) o cabeçalho usa as mesmas classes .cabecalho /
     .menu-principal do site institucional, mas SEM o botão hambúrguer
     (.botao-menu-mobile) e sem incluir js/script.js — porque o menu ali é
     sempre curto (2 a 4 links, tipo "Painel" / "Sair"), diferente do menu
     grande do site público. Sem esta regra, a mesma media query acima
     transformaria esse menu curto num painel "gaveta" fixo de tela cheia
     que nunca abre (não há botão nem JS para ativar .is-aberto) — o menu
     ficava inacessível no celular. Aqui, detectamos esse caso (cabeçalho
     sem o botão hambúrguer como filho) e devolvemos o menu ao fluxo
     normal, só permitindo quebra de linha. */
  .cabecalho__conteudo:not(:has(.botao-menu-mobile)) .menu-principal {
    position: static;
    height: auto;
    width: auto;
    background: transparent;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    gap: 0.5em 0.9em;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .cabecalho__conteudo:not(:has(.botao-menu-mobile)) .menu-principal a {
    width: auto;
    padding: 0.3em 0;
    border-bottom: 2px solid transparent;
    font-size: 0.85rem;
  }
  .cabecalho__conteudo:not(:has(.botao-menu-mobile)) .menu-principal__destaque {
    padding: 0.4em 0.9em !important;
    margin-top: 0;
  }
  .cabecalho__conteudo:has(.menu-principal):not(:has(.botao-menu-mobile)) {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .cabecalho__conteudo { padding: 0.75rem 1.1rem; }
  .identidade-escola__texto small { display: none; }

  .hero { padding: 3rem 1.1rem 0; }
  .hero__indicadores { grid-template-columns: repeat(2, 1fr); }
  .hero__indicador { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); }

  .secao { padding: 3rem 1.1rem; }
  .secao--clara > * { padding-left: 0; padding-right: 0; }

  .grade-painel { grid-template-columns: 1fr; }
  .mural { grid-template-columns: 1fr; }
  .cartao-mural--rotacao-1, .cartao-mural--rotacao-2, .cartao-mural--rotacao-3 { transform: none; }

  .painel-noticia { grid-template-columns: 1fr; }
  .grade-mapa-site { grid-template-columns: 1fr; gap: 1.6rem; }

  .formulario-contato { grid-template-columns: 1fr; }

  .rodape__conteudo { grid-template-columns: 1fr; padding: 2.6rem 1.1rem 2rem; }
  .rodape__bloco--identidade { margin-bottom: 0.6em; }
}


/* ===================== ÁREA DA SECRETARIA: TABELAS E BUSCA ===================== */

.barra-busca {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 1.8rem;
}
.barra-busca input[type="text"] {
  flex: 1;
  padding: 0.7em 1em;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
}

.tabela-dados {
  width: 100%;
  border-collapse: collapse;
  background: var(--cor-superficie);
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}
.tabela-dados th, .tabela-dados td {
  text-align: left;
  padding: 0.85em 1.1em;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--cor-borda);
}
.tabela-dados th {
  font-family: var(--fonte-utilitaria);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-tinta-suave);
  background: var(--cor-tinta-clara);
}
.tabela-dados tbody tr:hover { background: var(--cor-tinta-clara); }
.tabela-dados a.botao-editar {
  color: var(--cor-verde);
  font-weight: 600;
  text-decoration: none;
}
.tabela-dados a.botao-editar:hover { text-decoration: underline; }

/* CRIADO — a pedido do usuário (2026-07-09): botões circulares de ação
   (Ver/Editar/Excluir) nas listagens, para deixar o sistema "mais clean
   e bonito" em vez de links de texto cru. Promovido para cá a partir do
   padrão que já existia só em app/Views/professor/guia_detalhe.php
   (Cronograma de Atividades) — mesmas cores/ícones, agora reutilizável
   em qualquer tela via <a>/<button> com estas classes, sem precisar
   colar CSS de novo em cada view. Raio aumentado (34px, era 28px) a
   pedido do usuário para ficar mais visível. */
.botao-circular {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0;
  text-decoration: none; transition: transform .15s, background .15s, box-shadow .15s;
  flex-shrink: 0;
  /* ALTERADO — a pedido do usuário (2026-07-09): em "Mensagens Enviadas"
     os círculos apareciam como uma caixinha vazia sem cor, porque o
     <button> herdava a aparência nativa do navegador (appearance) por
     cima do nosso background/border customizados. appearance:none tira
     essa "casca" nativa em qualquer <button>/<a> que use esta classe. */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  box-shadow: none; outline: none;
}
.botao-circular:hover { transform: translateY(-2px); box-shadow: var(--sombra-suave); }
.botao-circular:focus-visible { box-shadow: 0 0 0 3px rgba(20,48,74,.35); }
/* ALTERADO — a pedido do usuário (2026-07-09, rodada final): pediu
   explicitamente "azul para o Editar e vermelho para o Excluir", cores
   nítidas (não pastel, não dourado/coral). Ver e Editar usam o mesmo
   azul (--cor-azul-acao, #2563EB — tom "limpo", distinto do marinho
   institucional escuro para não se confundir com texto/cabeçalho);
   Excluir usa vermelho puro (--cor-vermelho-acao, #DC2626) em vez do
   coral usado antes. Ícone branco em cima garante contraste alto. Como
   esta classe é central (css/estilo.css), a mudança vale para TODAS as
   telas que já usam botao-circular (Ocorrências, Turmas, Cursos,
   Mensagens, Biblioteca etc.), não só uma tela específica. */
.botao-circular--ver     { background: var(--cor-azul-acao);     color: #fff; }
.botao-circular--ver:hover     { background: var(--cor-azul-acao-escuro); }
.botao-circular--editar  { background: var(--cor-azul-acao);     color: #fff; }
.botao-circular--editar:hover  { background: var(--cor-azul-acao-escuro); }
.botao-circular--excluir { background: var(--cor-vermelho-acao); color: #fff; }
.botao-circular--excluir:hover { background: var(--cor-vermelho-acao-escuro); }
.botao-circular--info    { background: var(--cor-verde);         color: #fff; }
.botao-circular--info:hover    { background: var(--cor-verde-escuro); }
/* CRIADO — a pedido do usuário (2026-07-09): variante menor, para listas
   compactas (ex.: item de linha em Mensagens Enviadas) onde o botão de
   34px ao lado de texto de 1 linha fica desproporcional. */
.botao-circular--sm { width: 30px; height: 30px; font-size: .95rem; }
.botao-circular svg { width: 15px; height: 15px; }
/* ALTERADO — a pedido do usuário (2026-07-09): no desktop os botões
   Editar/Excluir estavam quebrando para uma segunda linha (um embaixo do
   outro) sempre que a coluna "Ações" ficava espremida por outras colunas
   largas (ex.: Título/Autor(es) em Biblioteca → Livros). Causa: flex-wrap:
   wrap deixava o flexbox livre para quebrar linha assim que a célula da
   tabela apertava, mesmo sobrando espaço na tela. nowrap mantém os dois
   círculos sempre lado a lado; a versão empilhada em cartão (celular,
   ver media query abaixo) continua com wrap, onde há espaço vertical de
   sobra e isso não afeta a leitura. */
.acoes-tabela { display: flex; gap: .6rem; align-items: center; flex-wrap: nowrap; }

/* CRIADO — em telas de tablet retrato/celular, as tabelas de dados (Alunos,
   Turmas, Notas, Ocorrências, Biblioteca etc., quase sempre com 6-8
   colunas) viram uma lista de cartões em vez de rolar horizontalmente:
   cada <tr> vira um cartão e cada <td> mostra seu rótulo (atributo
   data-label, definido em cada view) acima do valor. Usamos 820px (maior
   que o breakpoint geral de celular) porque mesmo um tablet em retrato
   (~768px) não comporta 7-8 colunas de dados de forma legível.
   Colunas puramente visuais (ex.: foto do aluno, capa do livro) não devem
   ter o atributo data-label na view — assim elas não ganham um rótulo
   vazio/sem sentido e recebem tratamento visual próprio (fundo suave,
   alinhado à esquerda) via `td:not([data-label])` abaixo. */
@media (max-width: 820px) {
  .tabela-dados thead { display: none; }

  .tabela-dados,
  .tabela-dados tbody,
  .tabela-dados tr {
    display: block;
    width: 100%;
  }

  .tabela-dados {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .tabela-dados tr {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-suave);
    margin-bottom: 1rem;
    overflow: hidden;
  }
  .tabela-dados tbody tr:hover { background: var(--cor-superficie); }

  .tabela-dados td {
    display: block;
    width: 100%;
    padding: 0.7em 1.1em;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--cor-borda);
  }
  .tabela-dados tr td:last-child { border-bottom: none; }

  .tabela-dados td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--fonte-utilitaria);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-tinta-suave);
    margin-bottom: 0.3em;
  }

  /* Coluna sem data-label (foto/capa/ícone) — sem rótulo, com leve
     destaque de fundo para diferenciar do restante do cartão. */
  .tabela-dados td:not([data-label]) {
    display: flex;
    align-items: center;
    gap: 0.7em;
    background: var(--cor-tinta-clara);
  }

  /* Ações (Editar/Excluir/Ver/etc.) — o wrapper .acoes-tabela já é flex
     com gap; só garantimos que os botões quebrem linha em vez de
     estourar a largura do cartão. */
  .tabela-dados .acoes-tabela { flex-wrap: wrap; row-gap: 0.5rem; }

  /* CRIADO — classe utilitária para marcar colunas "de apoio" (detalhe
     secundário, útil na tabela cheia do desktop mas dispensável num
     resumo rápido em cartão) como ocultas no cartão mobile. Uso: adicionar
     class="col-secundaria-mobile" no <td> da coluna a esconder — o <th>
     correspondente nem precisa da classe, já que o <thead> inteiro fica
     display:none no mobile. Ex.: em Ocorrências, Hora Ocorr./Hora Reg.
     ficam de fora do cartão do celular, mantendo só Número, Data,
     Aluno(s) e Ações — o dado completo continua disponível ao abrir
     "Ver". */
  .tabela-dados td.col-secundaria-mobile { display: none; }
}

.selo-status {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}
.selo-status--ativo { background: rgba(31, 122, 92, 0.14); color: var(--cor-verde-escuro); }
.selo-status--inativo, .selo-status--afastado { background: rgba(226, 84, 59, 0.14); color: var(--cor-coral); }
.selo-status--outro { background: var(--cor-tinta-clara); color: var(--cor-tinta-suave); }

.grade-formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}
.grade-formulario__titulo {
  grid-column: 1 / -1;
  font-family: var(--fonte-titulo);
  color: var(--cor-marinho);
  font-size: 1.05rem;
  margin: 1.4rem 0 0.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--cor-borda);
}
.grade-formulario__titulo:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.grupo-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  background: var(--cor-tinta-clara);
  border-radius: 8px;
  padding: 1rem 1.2rem;
}
.opcao-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.opcao-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--cor-verde);
}

/* ---------- GALERIA DE FOTOS ---------- */
.grade-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.cartao-galeria {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-card);
  background: linear-gradient(145deg, var(--cor-tinta-clara), var(--cor-borda));
  border: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem;
  text-align: center;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao-galeria:hover { transform: translateY(-4px); box-shadow: var(--sombra-suave); }
.cartao-galeria__marcador {
  width: 48px;
  height: 48px;
  color: var(--cor-tinta-suave);
  opacity: 0.55;
}
.cartao-galeria__marcador svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cartao-galeria figcaption {
  font-family: var(--fonte-utilitaria);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--cor-tinta-suave);
}
.galeria__legenda {
  text-align: center;
  font-size: 0.85rem;
  color: var(--cor-tinta-suave);
  margin-top: 1.8rem;
  font-style: italic;
}

@media (max-width: 720px) {
  .grade-galeria { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Link "Ler mais" no cartão do mural ----- */
.cartao-mural__link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cor-verde-escuro);
  text-decoration: none;
}
.cartao-mural__link:hover { text-decoration: underline; }

/* ----- Botão contorno (usado no "Ver todas as publicações") ----- */
.botao--contorno {
  background: transparent;
  border: 2px solid var(--cor-verde);
  color: var(--cor-verde-escuro);
}
.botao--contorno:hover { background: rgba(31,122,92,0.08); }

/* =====================================================================
   LAYOUT COM BARRA LATERAL (sidebar + navbar)
   CRIADO — a pedido do usuário (2026-07-25): novo layout de navegação
   persistente para as telas internas do sistema, inspirado numa
   referência de dashboard (barra lateral fixa + navbar superior),
   adaptado com a paleta institucional já existente (marinho/verde/
   dourado — decisão do usuário: manter a paleta atual). Piloto no
   perfil Professor antes de replicar para os demais perfis.
   Ver app/Views/parciais/cabecalho_sidebar.php.
   ===================================================================== */
.layout-app {
  display: flex;
  min-height: 100vh;
  background: var(--cor-fundo);
}

.barra-lateral {
  width: 250px;
  flex-shrink: 0;
  background: var(--cor-superficie);
  border-right: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 60;
}

.barra-lateral__marca {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--cor-borda);
}
.barra-lateral__marca-texto {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--cor-marinho);
  line-height: 1.2;
}

.barra-lateral__menu { display: flex; flex-direction: column; padding: 0.9rem 0.7rem; gap: 0.15rem; }
.barra-lateral__item {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.65em 0.9em;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cor-tinta-suave);
  transition: background var(--transicao), color var(--transicao);
}
.barra-lateral__item:hover { background: var(--cor-tinta-clara); color: var(--cor-marinho); }
.barra-lateral__item--ativo {
  background: var(--cor-verde);
  color: #fff;
}
.barra-lateral__item--ativo:hover { background: var(--cor-verde-escuro); color: #fff; }
.barra-lateral__separador { height: 1px; background: var(--cor-borda); margin: 0.6rem 0.4rem; }
.barra-lateral__item--sair { color: var(--cor-coral); }
.barra-lateral__item--sair:hover { background: rgba(226,84,59,0.1); color: var(--cor-coral); }

.area-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.navbar-app {
  background: var(--cor-marinho);
  color: #fff;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 55;
}
.navbar-app__alterna {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
}
.navbar-app__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem; }
.navbar-app__perfil {
  margin-left: auto;
  background: var(--cor-dourado);
  color: var(--cor-marinho-escuro);
  font-family: var(--fonte-utilitaria);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3em 0.8em;
  border-radius: var(--raio-botao);
}
.navbar-app__usuario { font-size: 0.88rem; color: rgba(255,255,255,0.85); }

/* Dentro do layout com sidebar, ".secao" não precisa mais centralizar
   nem repetir o espaçamento de topo grande (a navbar já delimita o
   topo da área de conteúdo). */
.layout-app .secao { padding-top: 2.2rem; padding-bottom: 2.2rem; }
.layout-app .rodape { margin-top: auto; }

/* v1.168.00: comportamento tablet/celular (trilho de ícones + menu expansível) está no fim deste arquivo. */

.barra-lateral__item svg { width: 18px; height: 18px; }

/* CRIADO — a pedido do usuário (2026-08-12): sidebar recolhível para
   "só ícones" no desktop, mesmo padrão do projeto escritorio
   (c:\wamp64\www\escritorio\includes\menu-admin.php — classe
   .recolhida, estado persistido em localStorage), e um botão explícito
   de fechar dentro do menu aberto no celular (além do hambúrguer da
   navbar, que já existia — ver .navbar-app__alterna acima). */
.barra-lateral { transition: width 0.18s ease, padding 0.18s ease; }

/* CRIADO — a pedido do usuário (2026-08-12, "botão voltar"): link de
   volta no topo das telas de detalhe/ação do painel, reaproveitando o
   MESMO nome de classe (.link-voltar) que avaliacao_corrigir.php e
   avaliacao_discursivas.php já usavam localmente (<style> por página) —
   agora central em estilo.css para poder ser usado em qualquer tela
   sem repetir CSS. Cada tela informa seu próprio href fixo (destino
   lógico "pai" daquela tela), nunca history.back(). */
.link-voltar {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: var(--cor-marinho);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 1rem;
}
.link-voltar:hover { text-decoration: underline; }

/* CRIADO — a pedido do usuário (2026-08-12): "Minhas Disciplinas e
   Bimestres" (painel do Professor) trocou o grid de cards por uma
   listagem simples e clicável, para "otimizar o visual do dashboard" —
   mesmo comportamento de antes (clicar expande o detalhe da
   disciplina abaixo, ver painel.php), só o container/item mudou de
   .cartao-painel para esta lista vertical. */
.lista-disciplinas {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  overflow: hidden;
  background: #fff;
  margin-bottom: 0.9rem;
}
.lista-disciplinas__item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: 100%;
  text-align: left;
  padding: 0.75em 1.1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--cor-borda);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cor-tinta);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.lista-disciplinas__item:last-child { border-bottom: none; }
.lista-disciplinas__item:hover { background: var(--cor-tinta-clara); }
.lista-disciplinas__item svg { flex-shrink: 0; width: 18px; height: 18px; }
.lista-disciplinas__seta { margin-left: auto; opacity: 0.45; transition: transform var(--transicao); flex-shrink: 0; }
/* Estado ativo — a classe alternada pelo JS já existente em painel.php
   continua sendo "disciplina-item--ativa" (não renomeada, para não
   mexer no script); só o seletor CSS mudou de .cartao-painel para
   .lista-disciplinas__item. */
.lista-disciplinas__item.disciplina-item--ativa,
.lista-disciplinas__item--ativa { background: var(--cor-verde); color: #fff; }
.lista-disciplinas__item.disciplina-item--ativa .lista-disciplinas__seta,
.lista-disciplinas__item--ativa .lista-disciplinas__seta { transform: rotate(90deg); opacity: 1; }

.barra-lateral__marca { justify-content: space-between; }
.barra-lateral__marca-link {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.barra-lateral__recolher,
.barra-lateral__fechar-mobile {
  background: transparent;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-tinta-suave);
  flex-shrink: 0;
}
.barra-lateral__recolher:hover,
.barra-lateral__fechar-mobile:hover { background: var(--cor-tinta-clara); color: var(--cor-marinho); }
.barra-lateral__recolher svg,
.barra-lateral__fechar-mobile svg { width: 16px; height: 16px; transition: transform 0.18s ease; }
.barra-lateral__fechar-mobile { display: none; }

.barra-lateral.recolhida { width: 76px; }
.barra-lateral.recolhida .barra-lateral__marca-texto,
.barra-lateral.recolhida .barra-lateral__item-rotulo { display: none; }
.barra-lateral.recolhida .barra-lateral__marca { justify-content: center; padding-left: 0.6rem; padding-right: 0.6rem; }
.barra-lateral.recolhida .barra-lateral__item { justify-content: center; padding-left: 0; padding-right: 0; }
.barra-lateral.recolhida .barra-lateral__recolher svg { transform: rotate(180deg); }


/* =====================================================================
   CARTÕES DE ACESSO RÁPIDO (modificador --compacto)
   CRIADO — a pedido do usuário (2026-07-25, rodada 2): depois de ver o
   layout com sidebar, o usuário pediu que os cartões do painel
   ficassem no estilo "acesso rápido" de uma referência visual externa
   (ícone num quadrado colorido no topo + rótulo curto embaixo, sem
   texto de descrição) — em vez do cartão maior com título + parágrafo
   já usado em .cartao-painel. Implementado como MODIFICADOR
   (.grade-painel--compacta / .cartao-painel--compacto), aplicado só no
   painel do Professor por enquanto — não altera .cartao-painel/
   .grade-painel "puros", que continuam servindo Aluno/Secretaria até a
   vez deles no rollout do novo layout.
   ===================================================================== */
/* ALTERADO — a pedido do usuário (2026-07-25, rodada 4): as rodadas
   anteriores (flex-wrap com largura fixa, depois largura+altura
   fixas) não bateram com a referência. O usuário apontou o projeto
   "escritorio" (C:\wamp64\www\escritorio) como implementação "em
   conformidade" com a imagem de referência — mesmo projeto/estilo que
   originou o pedido do redesenho. Copiado o padrão de lá quase
   ipsis-literis (ver escritorio/css/estilo.css,
   .grade-atalhos-cliente/.atalho-cliente e
   escritorio/area-cliente/empresa.php): grid com
   repeat(auto-fill, minmax(108px, 1fr)) — todas as colunas de uma
   mesma grade ficam com a MESMA largura automaticamente, e o
   align-items:stretch padrão do grid estica todo cartão de uma linha
   para a MESMA altura (a do cartão mais alto daquela linha), sem
   precisar fixar altura nem cortar texto. Cores adaptadas à paleta já
   existente do Angelita (verde/marinho) em vez das cores do
   escritorio. */
.grade-painel--compacta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 14px;
}
.cartao-painel--compacto {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 8px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(20, 48, 74, 0.08);
}
.cartao-painel--compacto:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-forte);
  border-color: var(--cor-verde);
}
.cartao-painel--compacto .cartao-painel__icone {
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 12px;
  background: rgba(31, 122, 92, 0.14);
  flex-shrink: 0;
}
.cartao-painel--compacto .cartao-painel__icone svg { width: 24px; height: 24px; }
.cartao-painel--compacto .cartao-painel__titulo {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cor-marinho);
}
.cartao-painel--compacto .cartao-painel__texto { display: none; }

/* =====================================================================
   QUADRO "MINHAS DISCIPLINAS E BIMESTRES" — cards + detalhe
   CRIADO — a pedido do usuário (2026-07-25, rodada 5): "exibindo apenas
   o nome das disciplinas, e ao clicar sobre as disciplinas [...] seria
   exibido os vínculos das séries, turmas e bimestres, sucessivamente;
   otimizando o layout." Substitui a tabela cheia (uma linha por
   série/turma) por uma lista com o nome de cada disciplina; clicar
   numa disciplina mostra o painel de detalhe correspondente (JS puro,
   sem recarregar a página — ver app/Views/professor/painel.php).

   ALTERADO — a pedido do usuário (2026-07-25, rodada 6): "ficaria ainda
   mais bonito se as disciplinas ficassem em forma de card, o mesmo
   estilo de Turmas, Guias de Aprendizagem, etc." Os botões de
   disciplina agora usam as MESMAS classes .cartao-painel/
   .cartao-painel--compacto dos cards de acesso rápido (ver bloco
   acima) — .disciplina-item só acrescenta o estado selecionado
   (borda/sombra verde), o restante do visual vem de lá.
   ===================================================================== */
.disciplina-item--ativa {
  border-color: var(--cor-verde) !important;
  box-shadow: 0 0 0 2px rgba(31, 122, 92, 0.28), 0 4px 20px rgba(20, 48, 74, 0.08);
}
.disciplinas-compacto {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  padding: 1.1rem 1.2rem;
}
.disciplinas-compacto__dica { color: var(--cor-tinta-suave); font-size: 0.85rem; margin: 0; }
.disciplina-detalhe { display: flex; flex-direction: column; gap: 0.5rem; }
/* CORRIGIDO — a pedido do usuário (2026-07-25, rodada 7): o atributo
   HTML "hidden" só vira display:none via uma regra de baixíssima
   prioridade do navegador ([hidden] { display: none }, folha de
   estilos do user-agent). Como a regra ".disciplina-detalhe" acima é
   do autor (author stylesheet) e define display:flex, ela VENCE a
   regra do navegador mesmo sem ter "hidden" como seletor — origem do
   bug em que todas as disciplinas apareciam expandidas de uma vez,
   mesmo com só um card selecionado e os outros divs com hidden
   presente no HTML. Precisa de uma regra do autor, mais específica
   (classe + atributo), reforçando display:none quando hidden estiver
   presente. */
.disciplina-detalhe[hidden] { display: none; }
.disciplina-detalhe__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  padding: 0.6em 0.8em;
  background: var(--cor-fundo);
  border-radius: 8px;
  font-size: 0.86rem;
}
.disciplina-detalhe__serie {
  font-weight: 700;
  color: var(--cor-marinho);
  min-width: 6ch;
}
.disciplina-detalhe__bimestres { color: var(--cor-tinta-suave); }
.disciplina-detalhe__bimestres small { color: var(--cor-tinta-suave); }
.disciplina-detalhe__turmas { color: var(--cor-verde-escuro); font-weight: 600; margin-left: auto; }

@media (max-width: 680px) {
  .disciplina-detalhe__linha { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .disciplina-detalhe__turmas { margin-left: 0; }
}

/* CRIADO — a pedido do usuário (2026-10-06): equações químicas (v1.151.00).
   Isótopo empilhado (massa sobre nº atômico) desenhado só por CSS, sem
   aninhar elementos dentro do editor Quill. Ver js/editor-quimica.js. */
.qm-iso { white-space: nowrap; }
.qm-iso::before {
  content: attr(data-m) "\A" attr(data-z);
  display: inline-block;
  white-space: pre;
  text-align: right;
  font-size: .62em;
  line-height: 1.05;
  vertical-align: middle;
  margin-right: .12em;
}
.qm-iso[data-m=""][data-z=""]::before { content: none; }
sub, sup { line-height: 0; }

.qm-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .35rem .5rem; background: #f4f7fa;
  border: 1px solid var(--cor-borda, #ccc); border-bottom: 0;
  font-size: .85rem;
}
.qm-barra__rotulo { font-weight: 700; color: var(--cor-marinho, #14304a); margin-right: .2rem; }
.qm-sep { width: 1px; align-self: stretch; background: var(--cor-borda, #ccc); margin: 0 .25rem; }
.qm-btn, .qm-ok {
  border: 1px solid var(--cor-borda, #bbb); background: #fff; border-radius: 6px;
  padding: .2rem .55rem; cursor: pointer; font: inherit; min-height: 1.9rem;
}
.qm-btn:hover, .qm-ok:hover { background: #e8eef4; }
.qm-ok { background: var(--cor-marinho, #14304a); color: #fff; border-color: transparent; }
.qm-ok:hover { background: var(--cor-verde-escuro, #1d5c3a); }
.qm-painel {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .5rem; background: #fff; border: 1px dashed var(--cor-borda, #bbb); border-radius: 8px;
}
.qm-painel[hidden] { display: none; }
.qm-painel label { display: flex; align-items: center; gap: .3rem; font-size: .8rem; }
.qm-in { border: 1px solid var(--cor-borda, #bbb); border-radius: 6px; padding: .25rem .4rem; font: inherit; }
.qm-in--num { width: 4.2rem; }
.qm-in--sim { width: 4.2rem; }
.qm-in--form { width: 9rem; }
.qm-prev { min-width: 4rem; font-size: 1.15rem; padding: 0 .5rem; }
.qm-barra + .ql-container { border-top: 1px solid var(--cor-borda, #ccc); }

/* CRIADO — a pedido do usuário (2026-10-07, v1.152.00): alternativas com
   texto formatado/química e imagem. */
.alt-img { display:block; max-width:100%; max-height:180px; margin-top:.35rem; border-radius:6px; border:1px solid var(--cor-borda, #ccc); background:#fff; }
.qm-barra[hidden] { display:none; }
.qm-toggle { border:1px solid var(--cor-borda, #bbb); background:#fff; border-radius:6px; padding:0 .5rem; width:auto !important; font-size:.75rem; cursor:pointer; }

/* CRIADO — a pedido do usuário (2026-10-07, v1.153.00): fórmulas matemáticas
   (ver js/editor-matematica.js). */
.qmat-btn { width:auto !important; padding:0 .5rem !important; font-size:.8rem; font-weight:600; border:1px solid var(--cor-borda, #bbb) !important; border-radius:6px; background:#fff; cursor:pointer; }
.ql-formula { cursor:pointer; }
.qmat-overlay { position:fixed; inset:0; z-index:99999; background:rgba(10,20,35,.55); display:flex; align-items:flex-start; justify-content:center; padding:4vh 1rem; overflow:auto; }
.qmat-overlay[hidden] { display:none; }
.qmat-caixa { background:#fff; border-radius:14px; width:min(780px, 100%); padding:1.1rem 1.3rem; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.qmat-titulo { font-weight:700; font-size:1.05rem; color:var(--cor-marinho, #14304a); margin-bottom:.6rem; }
.qmat-campo-wrap { border:1.5px solid var(--cor-borda, #bbb); border-radius:10px; padding:.4rem; min-height:64px; }
.qmat-campo { display:block; width:100%; font-size:1.6rem; border:none; outline:none; }
.qmat-carregando, .qmat-erro { font-size:.85rem; color:var(--cor-tinta-suave, #666); }
.qmat-erro { color:#b00020; }
.qmat-ajuda { font-size:.78rem; color:var(--cor-tinta-suave, #666); margin:.5rem 0 .7rem; line-height:1.4; }
.qmat-grupo { margin-bottom:.55rem; }
.qmat-grupo__titulo { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--cor-tinta-suave, #666); margin-bottom:.25rem; }
.qmat-grupo__itens { display:flex; flex-wrap:wrap; gap:.3rem; }
.qmat-atalho { min-width:2.4rem; min-height:2.2rem; padding:.1rem .45rem; border:1px solid var(--cor-borda, #bbb); border-radius:8px; background:#fff; cursor:pointer; font-size:1rem; }
.qmat-atalho:hover { background:#e8eef4; border-color:var(--cor-marinho, #14304a); }
.qmat-acoes { display:flex; justify-content:flex-end; gap:.6rem; margin-top:.8rem; }
.qmat-cancelar, .qmat-ok { border-radius:8px; padding:.5rem 1.1rem; cursor:pointer; font:inherit; border:1px solid var(--cor-borda, #bbb); background:#fff; }
.qmat-ok { background:var(--cor-marinho, #14304a); color:#fff; border-color:transparent; font-weight:700; }
.qmat-ok:hover { background:var(--cor-verde-escuro, #1d5c3a); }
body.qmat-aberta { overflow:hidden; }
@media (max-width: 520px) { .qmat-caixa { padding:.8rem; } .qmat-campo { font-size:1.3rem; } }
:root { --keyboard-zindex: 100001; }

/* ═════ v1.154.00 — Editor de texto estilo Word (js/editor-rico.js) ═════ */
/* Conteúdo gravado pelo editor: vale em qualquer tela de leitura (e dentro do editor). */
.ql-align-center{text-align:center}.ql-align-right{text-align:right}.ql-align-justify{text-align:justify}.ql-align-left{text-align:left}
.ql-direction-rtl{direction:rtl;text-align:inherit}
.conteudo-rico .ql-indent-1{padding-left:3em}
.conteudo-rico .ql-indent-2{padding-left:6em}
.conteudo-rico .ql-indent-3{padding-left:9em}
.conteudo-rico .ql-indent-4{padding-left:12em}
.conteudo-rico .ql-indent-5{padding-left:15em}
.conteudo-rico .ql-indent-6{padding-left:18em}
.conteudo-rico .ql-indent-7{padding-left:21em}
.conteudo-rico .ql-indent-8{padding-left:24em}
.ql-font-arial{font-family:Arial, Helvetica, sans-serif}
.ql-font-times{font-family:"Times New Roman", Times, serif}
.ql-font-georgia{font-family:Georgia, serif}
.ql-font-verdana{font-family:Verdana, Geneva, sans-serif}
.ql-font-tahoma{font-family:Tahoma, Geneva, sans-serif}
.ql-font-trebuchet{font-family:"Trebuchet MS", Helvetica, sans-serif}
.ql-font-courier{font-family:"Courier New", Courier, monospace}
.ql-size-8{font-size:8pt}
.ql-size-9{font-size:9pt}
.ql-size-10{font-size:10pt}
.ql-size-11{font-size:11pt}
.ql-size-12{font-size:12pt}
.ql-size-14{font-size:14pt}
.ql-size-16{font-size:16pt}
.ql-size-18{font-size:18pt}
.ql-size-20{font-size:20pt}
.ql-size-24{font-size:24pt}
.ql-size-28{font-size:28pt}
.ql-size-32{font-size:32pt}
.ql-size-36{font-size:36pt}
.ql-size-48{font-size:48pt}
.ql-lh-10{line-height:1}
.ql-lh-115{line-height:1.15}
.ql-lh-15{line-height:1.5}
.ql-lh-20{line-height:2}
.ql-lh-25{line-height:2.5}
.ql-lh-30{line-height:3}
.conteudo-rico{line-height:1.6;overflow-wrap:anywhere}
.conteudo-rico p{margin:0 0 .6em}.conteudo-rico h1,.conteudo-rico h2,.conteudo-rico h3{margin:.8em 0 .4em;line-height:1.25}
.conteudo-rico ul,.conteudo-rico ol{margin:0 0 .6em;padding-left:1.8em}
.conteudo-rico blockquote{margin:.6em 0;padding:.2em 1em;border-left:4px solid var(--cor-borda,#ccc);color:inherit;opacity:.9}
.conteudo-rico a{text-decoration:underline}
li[data-list="bullet"]{list-style-type:disc}li[data-list="ordered"]{list-style-type:decimal}
.ql-ui{display:none}.ql-editor .ql-ui{display:inline-block}
/* Moldura do editor gerado a partir de <textarea class="campo-rico"> */
.rico-wrapper{border:1.5px solid var(--cor-borda,#ccc);border-radius:8px;background:#fff;overflow:hidden;margin-top:.25rem}
.rico-wrapper .ql-toolbar{border:none;border-bottom:1.5px solid var(--cor-borda,#ccc);background:var(--cor-fundo,#f7f7f7);display:flex;flex-wrap:wrap;gap:2px 0;padding:6px}
.rico-wrapper .ql-container{border:none;font-size:.95rem}
.rico-wrapper .ql-editor{line-height:1.6;padding:.8rem 1rem}
.rico-wrapper .ql-editor.ql-blank::before{color:var(--cor-tinta-suave,#888);font-style:italic}
/* Barra: seletores com rótulos legíveis */
.ql-snow .ql-toolbar .ql-formats{margin-right:10px}
.ql-snow .ql-picker.ql-font{width:118px}.ql-snow .ql-picker.ql-size{width:58px}.ql-snow .ql-picker.ql-lh{width:62px}
.ql-snow .ql-picker.ql-lh .ql-picker-label:not([data-value])::before,.ql-snow .ql-picker.ql-lh .ql-picker-item:not([data-value])::before{content:'↕ Esp.'}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before{content:'Arial';font-family:Arial, Helvetica, sans-serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before{content:'Times New Roman';font-family:"Times New Roman", Times, serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before{content:'Georgia';font-family:Georgia, serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before{content:'Verdana';font-family:Verdana, Geneva, sans-serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before{content:'Tahoma';font-family:Tahoma, Geneva, sans-serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet"]::before{content:'Trebuchet MS';font-family:"Trebuchet MS", Helvetica, sans-serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before{content:'Courier New';font-family:"Courier New", Courier, monospace}
.ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before,.ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before{content:'Fonte'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8"]::before{content:'8'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9"]::before{content:'9'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10"]::before{content:'10'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11"]::before{content:'11'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before{content:'12'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before{content:'14'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before{content:'16'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before{content:'18'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before{content:'20'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before{content:'24'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before{content:'28'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before{content:'32'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before{content:'36'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48"]::before{content:'48'}
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before,.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before{content:'Tam.'}
.ql-snow .ql-picker.ql-lh .ql-picker-label[data-value="10"]::before,.ql-snow .ql-picker.ql-lh .ql-picker-item[data-value="10"]::before{content:'1,0'}
.ql-snow .ql-picker.ql-lh .ql-picker-label[data-value="115"]::before,.ql-snow .ql-picker.ql-lh .ql-picker-item[data-value="115"]::before{content:'1,15'}
.ql-snow .ql-picker.ql-lh .ql-picker-label[data-value="15"]::before,.ql-snow .ql-picker.ql-lh .ql-picker-item[data-value="15"]::before{content:'1,5'}
.ql-snow .ql-picker.ql-lh .ql-picker-label[data-value="20"]::before,.ql-snow .ql-picker.ql-lh .ql-picker-item[data-value="20"]::before{content:'2,0'}
.ql-snow .ql-picker.ql-lh .ql-picker-label[data-value="25"]::before,.ql-snow .ql-picker.ql-lh .ql-picker-item[data-value="25"]::before{content:'2,5'}
.ql-snow .ql-picker.ql-lh .ql-picker-label[data-value="30"]::before,.ql-snow .ql-picker.ql-lh .ql-picker-item[data-value="30"]::before{content:'3,0'}
.rico-somente-leitura .ql-toolbar{display:none}.rico-somente-leitura{background:var(--cor-fundo,#f7f7f7)}

/* ============================================================
   v1.156 — Aproveitamento de tela em computadores (>= 1100px)
   Painel principal ocupa toda a largura disponível; caixas de texto,
   editores e formulários deixam de ficar presos a larguras fixas.
   Abaixo de 1100px nada muda (celular/tablet continuam iguais).
   ============================================================ */
@media (min-width: 1100px) {
  :is(.layout-app, .tela-cheia) .secao { max-width: none; width: 100%; margin: 0; padding-left: clamp(1.5rem, 2.5vw, 3rem); padding-right: clamp(1.5rem, 2.5vw, 3rem); }
  :is(.layout-app, .tela-cheia) .secao__cabecalho { max-width: 110ch; }
  .tela-cheia .cabecalho__conteudo { max-width: none; padding-left: clamp(1.5rem, 2.5vw, 3rem); padding-right: clamp(1.5rem, 2.5vw, 3rem); }
  :is(.layout-app, .tela-cheia) .secao--clara > * { max-width: none; }

  /* Larguras fixas inline (style="max-width:NNNpx") em forms, blocos e seções */
  :is(.layout-app, .tela-cheia) main form[style*="max-width"],
  :is(.layout-app, .tela-cheia) main section[style*="max-width"],
  :is(.layout-app, .tela-cheia) main > div[style*="max-width"],
  :is(.layout-app, .tela-cheia) main fieldset[style*="max-width"] { max-width: none !important; }

  /* Contêineres locais de leitura/formulário */
  :is(.layout-app, .tela-cheia) .msg-leitura,
  :is(.layout-app, .tela-cheia) .prova-container,
  :is(.layout-app, .tela-cheia) .corr-container,
  :is(.layout-app, .tela-cheia) .res-container,
  :is(.layout-app, .tela-cheia) .bloco-configuracao,
  :is(.layout-app, .tela-cheia) .bloco-editar-material,
  :is(.layout-app, .tela-cheia) .publicacao-detalhe { max-width: min(100%, 1400px); }

  /* Caixas de texto sempre na largura total do campo */
  :is(.layout-app, .tela-cheia) .campo-formulario input:not([type=checkbox]):not([type=radio]):not([type=file]),
  :is(.layout-app, .tela-cheia) .campo-formulario select,
  :is(.layout-app, .tela-cheia) .campo-formulario textarea,
  :is(.layout-app, .tela-cheia) main form > textarea,
  :is(.layout-app, .tela-cheia) main .campo-busca { width: 100%; max-width: none; box-sizing: border-box; }
  :is(.layout-app, .tela-cheia) .campo-formulario textarea { min-height: 9rem; resize: vertical; }

  /* Grade de 2 colunas dos formulários passa a distribuir os campos pela largura */
  :is(.layout-app, .tela-cheia) .grade-form-2col { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

  /* Editores Word-like: altura acompanha a janela */
  :is(.layout-app, .tela-cheia) .rico-wrapper { width: 100%; }
  :is(.layout-app, .tela-cheia) .quill-wrapper .ql-editor,
  :is(.layout-app, .tela-cheia) .ga-editor-wrapper .ql-editor,
  :is(.layout-app, .tela-cheia) .campo-editor-rico .ql-editor { min-height: clamp(180px, 26vh, 520px); }
  :is(.layout-app, .tela-cheia) .quill-wrapper .ql-container,
  :is(.layout-app, .tela-cheia) .ga-editor-wrapper .ql-container,
  :is(.layout-app, .tela-cheia) .campo-editor-rico .ql-container { max-height: 70vh; overflow-y: auto; }
  :is(.layout-app, .tela-cheia) .alt-editor-wrap .ql-editor { min-height: 42px; }

  /* Ocorrências: Data/hora em cima; Alunos e Descrição lado a lado */
  .form-ocorrencia { display: grid !important; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.5fr); column-gap: 1.5rem; align-items: start; }
  .form-ocorrencia > fieldset { margin-bottom: 1.5rem !important; min-width: 0; }
  .form-ocorrencia > fieldset:nth-of-type(1) { grid-column: 1 / -1; }
  .form-ocorrencia > :not(fieldset):not(input) { grid-column: 1 / -1; }
  .form-ocorrencia .lista-checkboxes { max-height: 48vh; }

  /* Tabelas e listas ocupam toda a largura */
  :is(.layout-app, .tela-cheia) main table { width: 100%; }
}
@media (min-width: 1700px) {
  :is(.layout-app, .tela-cheia) .grade-painel { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   v1.163.00 — Menu lateral por CATEGORIAS (escuro, acordeão), no modelo
   do projeto iccontabilidade (.lateral-admin-nova / .grupo-lateral-admin-
   nova). Ativado por $menuEscuro (menu_secretaria.php) via a classe
   .barra-lateral--escura; os demais perfis mantêm a barra clara.
   ===================================================================== */
.barra-lateral--escura {
  background: #111827;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.barra-lateral--escura .barra-lateral__marca { border-bottom-color: rgba(255, 255, 255, 0.08); }
.barra-lateral--escura .barra-lateral__marca-texto { color: #fff; }
.barra-lateral--escura .barra-lateral__recolher,
.barra-lateral--escura .barra-lateral__fechar-mobile { color: rgba(255,255,255,.7); }
.barra-lateral--escura .barra-lateral__recolher:hover,
.barra-lateral--escura .barra-lateral__fechar-mobile:hover { background: rgba(255,255,255,.08); color: #fff; }
.barra-lateral--escura .barra-lateral__item { color: rgba(255, 255, 255, 0.75); font-weight: 500; border-left: 3px solid transparent; }
.barra-lateral--escura .barra-lateral__item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.barra-lateral--escura .barra-lateral__item--ativo,
.barra-lateral--escura .barra-lateral__item--ativo:hover {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  font-weight: 700;
  border-left-color: #10b981;
}
.barra-lateral--escura .barra-lateral__separador { background: rgba(255, 255, 255, 0.08); }
.barra-lateral--escura .barra-lateral__item--sair { color: #f87171; }
.barra-lateral--escura .barra-lateral__item--sair:hover { background: rgba(248,113,113,.12); color: #fca5a5; }

.grupo-lateral { margin-bottom: 2px; }
.grupo-lateral__cabecalho {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0.65em 0.9em;
  border-radius: 10px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  color: var(--cor-tinta-suave);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: inherit;
  text-align: left;
  transition: background var(--transicao), color var(--transicao);
}
.grupo-lateral__cabecalho:hover { background: var(--cor-tinta-clara); color: var(--cor-marinho); }
.grupo-lateral__cabecalho-texto { display: flex; align-items: center; gap: 0.65em; min-width: 0; }
.grupo-lateral__cabecalho svg.icone-mini { width: 18px; height: 18px; flex-shrink: 0; }
.grupo-lateral__seta { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; }
.grupo-lateral.aberto > .grupo-lateral__cabecalho .grupo-lateral__seta { transform: rotate(90deg); }
.grupo-lateral__itens { display: none; flex-direction: column; gap: 2px; padding-left: 14px; margin: 2px 0 8px; }
.grupo-lateral.aberto > .grupo-lateral__itens { display: flex; }
.grupo-lateral__itens .barra-lateral__item { font-size: 0.84rem; padding: 0.5em 0.8em; }
.barra-lateral--escura .grupo-lateral__cabecalho { color: rgba(255, 255, 255, 0.75); }
.barra-lateral--escura .grupo-lateral__cabecalho:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.barra-lateral--escura .grupo-lateral.aberto > .grupo-lateral__cabecalho { color: #fff; }

/* Barra recolhida (só ícones): cabeçalho de grupo vira só o ícone e os
   sub-itens ficam ocultos (clicar no ícone expande a barra). */
.barra-lateral.recolhida .grupo-lateral__cabecalho { justify-content: center; padding-left: 0; padding-right: 0; }
.barra-lateral.recolhida .grupo-lateral__itens { display: none !important; }

/* v1.165.00 — KPIs e gráficos dos painéis de métricas (secretaria/painel.php e secretaria/biblioteca_painel.php); movido do <style> da view. */
  .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin-bottom:1.6rem; }
  .kpi { background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio-card,14px); padding:1rem 1.1rem; display:flex; align-items:center; gap:0.9rem; }
  .kpi__icone { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .kpi__icone svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .kpi__valor { font-family:var(--fonte-titulo); font-size:1.7rem; font-weight:700; line-height:1.1; color:var(--cor-tinta); }
  .kpi__rotulo { font-size:0.8rem; color:var(--cor-tinta-suave); }
  .kpi__nota { font-size:0.72rem; color:var(--cor-coral); font-weight:600; }
  .kpi--verde .kpi__icone { background:rgba(31,122,92,.12); color:#1F7A5C; }
  .kpi--azul .kpi__icone { background:rgba(37,99,235,.12); color:#2563EB; }
  .kpi--dourado .kpi__icone { background:rgba(242,169,59,.18); color:#B97309; }
  .kpi--coral .kpi__icone { background:rgba(226,84,59,.12); color:#E2543B; }
  .kpi--roxo .kpi__icone { background:rgba(124,58,237,.12); color:#7C3AED; }
  .kpi--ciano .kpi__icone { background:rgba(8,145,178,.12); color:#0891B2; }
  .graficos { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.1rem; margin-bottom:1.6rem; }
  .grafico-cartao { background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio-card,14px); padding:1.1rem 1.2rem; min-width:0; }
  .grafico-cartao--largo { grid-column:1 / -1; }
  .grafico-cartao h3 { margin:0 0 0.2rem; font-size:0.98rem; }
  .grafico-cartao__sub { margin:0 0 0.9rem; font-size:0.78rem; color:var(--cor-tinta-suave); }
  .pg-vazio { color:var(--cor-tinta-suave); font-size:0.85rem; margin:0.6rem 0; }
  .pg-barras-h { display:flex; flex-direction:column; gap:0.45rem; max-height:340px; overflow-y:auto; padding-right:4px; }
  .pg-barras-h__linha { display:grid; grid-template-columns:minmax(80px,38%) 1fr 34px; align-items:center; gap:0.6rem; font-size:0.8rem; }
  .pg-barras-h__rotulo { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--cor-tinta); }
  .pg-barras-h__link { color:inherit; text-decoration:none; cursor:pointer; }
  .pg-barras-h__link:hover { color:var(--cor-verde); }
  /* v1.192.02: lista de pendências expansível sem sublinhado nem seta do navegador */
  .pend-prof > summary { list-style:none; }
  .pend-prof > summary::-webkit-details-marker { display:none; }
  .pend-prof > summary::marker { content:''; }
  .pend-prof > summary:hover span:first-child { color:var(--cor-verde); }
  .pg-barras-h__trilho { background:var(--cor-tinta-clara); border-radius:99px; height:12px; overflow:hidden; }
  .pg-barras-h__barra { display:block; height:100%; border-radius:99px; }
  .pg-barras-h__valor { text-align:right; font-weight:700; }
  .pg-colunas { width:100%; height:auto; max-height:230px; }
  .pg-rosca { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
  .pg-rosca__svg { width:150px; height:150px; flex-shrink:0; }
  .pg-rosca__legenda { list-style:none; margin:0; padding:0; font-size:0.83rem; display:flex; flex-direction:column; gap:0.35rem; }
  .pg-rosca__ponto { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:0.5rem; }
  .tabela-status { width:100%; border-collapse:collapse; font-size:0.84rem; }
  .tabela-status th, .tabela-status td { padding:0.5rem 0.4rem; text-align:center; border-bottom:1px solid var(--cor-borda); }
  .tabela-status th:first-child, .tabela-status td:first-child { text-align:left; }

/* v1.166.00 — 2º nível do menu (ex.: Biblioteca > Relatórios > lista). */
.grupo-lateral--nivel2 { margin-bottom: 0; }
.grupo-lateral--nivel2 > .grupo-lateral__cabecalho { font-size: 0.84rem; padding: 0.5em 0.8em; }
.grupo-lateral--nivel2 > .grupo-lateral__itens { margin: 0 0 4px; padding-left: 12px; }
.grupo-lateral--nivel2 .barra-lateral__item { font-size: 0.8rem; }

/* =====================================================================
   v1.168.00 — TABLET E CELULAR
   (a) Menu lateral em "trilho de ícones" sempre visível (recuado), que se
       expande por cima do conteúdo ao tocar no hambúrguer, num grupo ou
       no ícone; o botão de recuo (« ) devolve ao trilho — equivalente ao
       "recolher menu" do desktop.
   (b) Ajustes de telas pequenas: menos informação secundária, toques
       maiores, nada estourando a largura.
   ===================================================================== */
@media (max-width: 960px) {
  .layout-app .barra-lateral, .layout-app .barra-lateral.recolhida {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100%; width: 64px;
    transform: none; box-shadow: none; overflow-x: hidden; z-index: 70;
    transition: width 0.18s ease, box-shadow 0.18s ease;
  }
  .layout-app .area-principal { margin-left: 64px; }
  .layout-app .navbar-app__alterna { display: flex; align-items: center; justify-content: center; }
  .layout-app .navbar-app__titulo { display: none; }

  /* trilho (recuado): só ícones */
  .layout-app .barra-lateral .barra-lateral__marca-texto,
  .layout-app .barra-lateral .barra-lateral__item-rotulo { display: none; }
  .layout-app .barra-lateral .barra-lateral__marca { justify-content: center; padding: 0.8rem 0.4rem; }
  .layout-app .barra-lateral .barra-lateral__item,
  .layout-app .barra-lateral .grupo-lateral__cabecalho { justify-content: center; padding-left: 0; padding-right: 0; }
  .layout-app .barra-lateral .barra-lateral__menu { padding: 0.6rem 0.4rem; }
  .layout-app .barra-lateral .grupo-lateral__itens { display: none !important; }
  .layout-app .barra-lateral .barra-lateral__recolher,
  .layout-app .barra-lateral .barra-lateral__fechar-mobile { display: none; }
  .layout-app .barra-lateral .barra-lateral__item svg,
  .layout-app .barra-lateral .grupo-lateral__cabecalho svg { width: 22px; height: 22px; }

  /* expandido (sobreposto, com fundo escurecido) */
  .layout-app.barra-lateral-aberta::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 65; }
  .layout-app.barra-lateral-aberta .barra-lateral, .layout-app.barra-lateral-aberta .barra-lateral.recolhida {
    width: min(280px, 84vw); box-shadow: var(--sombra-forte); overflow-y: auto;
  }
  .layout-app.barra-lateral-aberta .barra-lateral .barra-lateral__marca-texto,
  .layout-app.barra-lateral-aberta .barra-lateral .barra-lateral__item-rotulo { display: inline; }
  .layout-app.barra-lateral-aberta .barra-lateral .barra-lateral__marca { justify-content: space-between; padding: 1rem 1.1rem; }
  .layout-app.barra-lateral-aberta .barra-lateral .barra-lateral__item,
  .layout-app.barra-lateral-aberta .barra-lateral .grupo-lateral__cabecalho { justify-content: flex-start; padding-left: 0.9em; padding-right: 0.9em; }
  .layout-app.barra-lateral-aberta .barra-lateral .grupo-lateral__cabecalho { justify-content: space-between; }
  .layout-app.barra-lateral-aberta .barra-lateral .grupo-lateral.aberto > .grupo-lateral__itens { display: flex !important; }
  .layout-app.barra-lateral-aberta .barra-lateral .barra-lateral__fechar-mobile { display: flex; }
  .layout-app.barra-lateral-aberta .barra-lateral .barra-lateral__item,
  .layout-app.barra-lateral-aberta .barra-lateral .grupo-lateral__cabecalho { min-height: 44px; }
}
@media (max-width: 600px) {
  .layout-app .barra-lateral, .layout-app .barra-lateral.recolhida { width: 52px; }
  .layout-app .area-principal { margin-left: 52px; }
  .layout-app .barra-lateral .barra-lateral__marca { padding: 0.6rem 0.2rem; }
  .layout-app .barra-lateral .identidade-escola__brasao { width: 34px !important; height: 34px !important; font-size: 0.72rem !important; }
  .layout-app .navbar-app { padding: 0.6rem 0.8rem; gap: 0.6rem; }
  .layout-app .navbar-app__usuario { display: none; }
  .layout-app .secao { padding: 1.2rem 0.85rem 1.6rem; }
  .layout-app .secao__cabecalho { margin-bottom: 1.2rem; }
  .layout-app .secao__cabecalho h2 { font-size: 1.35rem; }
  /* informação secundária: legendas, dicas, kickers e descrições longas */
  .layout-app .rotulo-secao { display: none; }
  .layout-app .secao__cabecalho > h2 + p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.85rem; margin-bottom: 0;
  }
  .layout-app .ajuda-formulario, .layout-app .nota-campo, .layout-app .dica-marcadores,
  .layout-app .meu-horario__dica, .layout-app .disciplinas-compacto__dica, .layout-app .quadro-geral-dia__dica,
  .layout-app .hint-html, .layout-app .grupo-painel__descricao, .layout-app .legenda,
  .layout-app .grafico-cartao__sub, .layout-app .pg-vazio--dica { display: none; }
  .layout-app .item-videoaula__descricao, .layout-app .item-documento-legal__descricao, .layout-app .cartao-painel p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* toques e formulários */
  .layout-app input:not([type=checkbox]):not([type=radio]), .layout-app select, .layout-app textarea { font-size: 16px; }
  .layout-app .botao, .layout-app button.botao, .layout-app .link-alternar { min-height: 44px; }
  .layout-app .cabecalho-lista { flex-direction: column; align-items: stretch; }
  .layout-app .cabecalho-lista .botao { width: 100%; text-align: center; }
  .layout-app .grade-formulario { grid-template-columns: 1fr; }
  .layout-app .kpis { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .layout-app .kpi { padding: 0.7rem; gap: 0.6rem; }
  .layout-app .kpi__valor { font-size: 1.3rem; }
  .layout-app .graficos { grid-template-columns: 1fr; }
  .layout-app .rodape { font-size: 0.78rem; }
  /* larguras fixas e colunas duplas escritas inline */
  .layout-app [style*="width:420px"], .layout-app [style*="width: 420px"], .layout-app [style*="width:480px"], .layout-app [style*="width: 480px"],
  .layout-app [style*="width: 600px"], .layout-app [style*="width:600px"], .layout-app [style*="width: 640px"], .layout-app [style*="width:780px"],
  .layout-app [style*="width:900px"] { max-width: 100% !important; box-sizing: border-box; }
  .layout-app [style*="grid-template-columns:1fr 1fr"], .layout-app [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .layout-app img, .layout-app video, .layout-app canvas, .layout-app iframe { max-width: 100%; height: auto; }
  .layout-app pre, .layout-app code { white-space: pre-wrap; word-break: break-word; }
}
@media (max-width: 960px) {
  .layout-app .secao { overflow-wrap: anywhere; }
  .layout-app .tabela-dados td.col-secundaria-mobile { display: none; }
}

/* v1.193.00 — Aulas Dadas (x/y) */
.ad-xy { display:flex; flex-direction:column; gap:0.4rem; }
.ad-xy__linha { display:grid; grid-template-columns:70px 1fr 52px; align-items:center; gap:0.6rem; font-size:0.8rem; }
.ad-xy__rotulo { color:var(--cor-tinta-suave); }
.ad-xy__trilho { background:var(--cor-tinta-clara,rgba(20,48,74,.1)); border-radius:99px; height:10px; overflow:hidden; display:block; }
.ad-xy__barra { display:block; height:100%; border-radius:99px; }
.ad-xy__valor { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--cor-tinta); }
.ad-disc { padding:.8rem 0; border-top:1px solid var(--cor-borda); }
.ad-disc:first-of-type { border-top:0; }
.ad-disc__nome { font-weight:600; margin:0 0 .45rem; font-size:.9rem; }
.ad-disc__nome a { color:inherit; text-decoration:none; }
.ad-disc__nome a:hover { text-decoration:underline; }
.ad-grade { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }

/* v1.195.00 — animações dos gráficos e grade proporcional do painel */
@keyframes pg-cresce-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes pg-sobe { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes pg-surge { from { opacity:0; transform:scale(.6) rotate(-70deg); } to { opacity:1; transform:none; } }
@keyframes pg-entra { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.graficos > .grafico-cartao { animation:pg-entra .55s ease both; }
.graficos > .grafico-cartao:nth-child(1) { animation-delay:0ms; }
.graficos > .grafico-cartao:nth-child(2) { animation-delay:70ms; }
.graficos > .grafico-cartao:nth-child(3) { animation-delay:140ms; }
.graficos > .grafico-cartao:nth-child(4) { animation-delay:210ms; }
.graficos > .grafico-cartao:nth-child(5) { animation-delay:280ms; }
.graficos > .grafico-cartao:nth-child(6) { animation-delay:350ms; }
.graficos > .grafico-cartao:nth-child(7) { animation-delay:420ms; }
.graficos > .grafico-cartao:nth-child(8) { animation-delay:490ms; }
.graficos > .grafico-cartao:nth-child(9) { animation-delay:560ms; }
.graficos > .grafico-cartao:nth-child(10) { animation-delay:630ms; }
.graficos > .grafico-cartao:nth-child(11) { animation-delay:700ms; }
.graficos > .grafico-cartao:nth-child(12) { animation-delay:770ms; }
.graficos > .grafico-cartao:nth-child(13) { animation-delay:840ms; }
.graficos > .grafico-cartao:nth-child(14) { animation-delay:910ms; }
.graficos > .grafico-cartao:nth-child(15) { animation-delay:980ms; }
.graficos > .grafico-cartao:nth-child(16) { animation-delay:1050ms; }
.pg-barras-h__barra, .ad-xy__barra, .pg-seg { transform-origin:left center; animation:pg-cresce-x .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 90ms + 250ms); }
.pg-colunas rect { transform-box:fill-box; transform-origin:bottom center; animation:pg-sobe .8s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 70ms + 250ms); }
.pg-colunas text { animation:pg-entra .5s ease both; animation-delay:.9s; }
.pg-rosca__svg { animation:pg-surge .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:.25s; }
@media (prefers-reduced-motion: reduce) {
  .graficos > .grafico-cartao, .pg-barras-h__barra, .ad-xy__barra, .pg-seg, .pg-colunas rect, .pg-colunas text, .pg-rosca__svg { animation:none !important; }
}
.grafico-cartao--alto .pg-barras-h { max-height:460px; }
@media (min-width:1280px) {
  .graficos { grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .graficos > .grafico-cartao { grid-column:span 2; }
  .graficos > .grafico-cartao--meio { grid-column:span 3; }
  .graficos > .grafico-cartao--alto { grid-row:span 2; }
  .graficos > .grafico-cartao--largo { grid-column:1 / -1; }
}
/* v1.195.01 — usado pelo JS para reiniciar as animações ao reaparecer na tela */
.pg-parado, .pg-parado * { animation:none !important; }

/* v1.196.01 — tabela compacta "Minhas turmas" (painel do professor) */
.pt-tabela { display:flex; flex-direction:column; font-size:0.82rem; }
.pt-linha { display:grid; grid-template-columns:minmax(90px,1.3fr) 3.2rem minmax(110px,2fr) 3rem; gap:0.6rem; align-items:center; padding:0.32rem 0; border-bottom:1px solid var(--cor-borda); }
.pt-linha:last-child { border-bottom:none; }
.pt-cab { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--cor-tinta-suave); padding-top:0; }
.pt-turma { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-num { text-align:center; font-weight:700; }
.pt-alerta { color:#E2543B; }
.pt-aprov { display:grid; grid-template-columns:1fr 2.6rem; gap:0.4rem; align-items:center; }
.pt-aprov b { text-align:right; }
.pt-tabela { max-height:300px; overflow-y:auto; }

/* v1.197.00 — Painel do Aluno: média por disciplina, notas por bimestre e adaptação a telas pequenas */
.pa-disc { display:flex; flex-direction:column; gap:0.5rem; }
.pa-disc__linha { display:grid; grid-template-columns:minmax(90px,38%) 1fr 2.6rem; gap:0.6rem; align-items:center; font-size:0.82rem; }
.pa-disc__nome { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pa-disc__val { text-align:right; }
.pa-notas { width:100%; border-collapse:collapse; table-layout:fixed; font-size:0.8rem; }
.pa-notas th, .pa-notas td { padding:0.38rem 0.2rem; text-align:center; border-bottom:1px solid var(--cor-borda); }
.pa-notas th { font-size:0.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--cor-tinta-suave); }
.pa-notas th:first-child, .pa-notas td:first-child { text-align:left; width:34%; }
.pa-notas__disc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Quadro de horários cabe na tela sem rolagem horizontal (aluno e professor) */
@media (max-width: 768px) {
  .meu-horario .grade-horario, .grade-horario-wrap .grade-horario { min-width:0; table-layout:fixed; font-size:0.62rem; }
  .meu-horario .grade-horario th, .meu-horario .grade-horario td,
  .grade-horario-wrap .grade-horario th, .grade-horario-wrap .grade-horario td { padding:0.25rem 0.1rem; word-break:break-word; hyphens:auto; }
  .meu-horario .grade-horario thead th, .grade-horario-wrap .grade-horario thead th { font-size:0.54rem; letter-spacing:0; }
  .meu-horario .grade-horario td.grade-horario__rotulo, .grade-horario-wrap .grade-horario td.grade-horario__rotulo { white-space:normal; font-size:0.55rem; }
  .meu-horario .grade-horario small, .grade-horario-wrap .grade-horario small { font-size:0.54rem; }
  .meu-horario { padding:0.6rem 0.4rem; overflow-x:visible; }
  .grade-horario-wrap { overflow-x:visible; }
  .meu-horario__dica { display:none !important; }
  .pa-disc__linha { grid-template-columns:minmax(70px,34%) 1fr 2.3rem; font-size:0.76rem; }
  .pa-notas { font-size:0.72rem; }
}
/* Telas com vários botões/filtros: quebram de linha em vez de rolar na horizontal */
.layout-app main { max-width:100%; }
.layout-app main .botao, .layout-app main button, .layout-app main .botao-area-aluno { white-space:normal; max-width:100%; }
.layout-app main form, .layout-app main .barra-filtros, .layout-app main [class*="acoes"], .layout-app main [class*="botoes"] { flex-wrap:wrap; }
.layout-app main img, .layout-app main video, .layout-app main iframe { max-width:100%; height:auto; }
.layout-app main { font-size:clamp(0.9rem, 0.84rem + 0.3vw, 1.02rem); }
@media (max-width: 480px) {
  .layout-app main .graficos, .layout-app main .kpis { gap:0.6rem; }
  .layout-app main .grafico-cartao { padding:0.8rem 0.7rem; }
  .layout-app main .grafico-cartao h3 { font-size:0.9rem; }
  .layout-app main .kpi__rotulo { font-size:0.74rem; }
}

/* v1.198.00 — modo visualização discreto na barra lateral */
.barra-lateral__item--imp{background:rgba(154,96,0,.18);color:#d98a00;font-weight:700}
.barra-lateral__item--imp:hover{background:rgba(154,96,0,.3)}
.barra-lateral__imp-aviso{font-size:.62rem;line-height:1.2;opacity:.75;padding:0 .9rem .35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v1.199.02 — Painel do Aluno: quadros fluem em colunas (sem buracos); só os com dados aparecem.
   1 coluna no celular, 2 no tablet, 3 no PC; Notas por bimestre e Meu Horário ocupam a largura toda. */
.pa-layout { column-count:1; column-gap:1rem; margin-bottom:1.2rem; }
.pa-layout > * { break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 1rem !important; min-width:0; }
.pa-layout > .pa-notas-cartao, .pa-layout > .pa-hor, .pa-layout > .meu-horario__dica { column-span:all; }
.pa-prov .resumo-provas__grupo { padding:.55rem .75rem; margin-bottom:.5rem; }
.pa-prov .resumo-provas__cabecalho { margin-bottom:.4rem; font-size:.7rem; }
.pa-prov .resumo-provas__lista { gap:.3rem; max-height:190px; overflow-y:auto; }
.pa-prov .resumo-provas__item { padding:.3rem .55rem; gap:.4rem; }
.pa-prov .resumo-provas__item-titulo { font-size:.8rem; }
.pa-prov .resumo-provas__item-disc { font-size:.7rem; }
.pa-prov .resumo-provas__item-nota { font-size:.74rem; }
.pa-layout .grafico-cartao { padding:.8rem .9rem; }
.pa-layout .tabela-dados th, .pa-layout .tabela-dados td { padding:.35rem .4rem; font-size:.76rem; }
.pa-notas td, .pa-notas th { padding:.28rem .15rem; }
@media (min-width: 761px)  { .pa-layout { column-count:2; } }
@media (min-width: 1200px) { .pa-layout { column-count:3; }
  .pa-hor .grade-horario { min-width:0; font-size:.78rem; }
  .pa-hor .grade-horario th, .pa-hor .grade-horario td { padding:.3rem .35rem; } }

/* v1.200.00 — Demonstrativo de Resultados no Painel do Aluno */
.pa-layout > .pa-dr { column-span:all; background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio-card); padding:.8rem .9rem; }
.pa-dr__titulo { margin:0 0 .15rem; }
.pa-dr__grade { display:grid; grid-template-columns:minmax(0,1fr); gap:.8rem; }
@media (min-width: 900px) { .pa-dr__grade { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.pa-dr .grafico-cartao { margin:0 !important; box-shadow:none; }
.pa-dr .acg-hbar__linha { grid-template-columns:minmax(0,1fr); }
.pa-dr .acg-hbar__nome { display:none; }
.pa-dr .acg-hbar__cab { display:none; }
.pa-dr__quadro td { padding:.3rem .2rem; }

/* v1.200.01 — animações do Painel do Aluno (mesmo padrão dos painéis Professor/Administrador) */
.pa-layout > .grafico-cartao, .pa-layout > .resumo-provas, .pa-layout > .pa-dr .grafico-cartao { animation:pg-entra .55s ease both; }
.pa-layout > :nth-child(1) { animation-delay:0ms; }
.pa-layout > :nth-child(2) { animation-delay:70ms; }
.pa-layout > :nth-child(3) { animation-delay:140ms; }
.pa-layout > :nth-child(4) { animation-delay:210ms; }
.pa-layout > :nth-child(5) { animation-delay:280ms; }
.pa-layout > :nth-child(6) { animation-delay:350ms; }
.pa-layout > :nth-child(7) { animation-delay:420ms; }
.pa-layout > :nth-child(8) { animation-delay:490ms; }
.pa-dr__grade > .grafico-cartao:nth-child(2) { animation-delay:90ms; }
.pa-dr__grade > .grafico-cartao:nth-child(3) { animation-delay:180ms; }
.acg-hbar__barra { transform-origin:left center; animation:pg-cresce-x .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:250ms; }
.acg-hbar__area > .acg-hbar__trilho:nth-child(2) .acg-hbar__barra { animation-delay:340ms; }
.acg-hbar__area > .acg-hbar__trilho:nth-child(3) .acg-hbar__barra { animation-delay:430ms; }
.acg-hbar__area > .acg-hbar__trilho:nth-child(4) .acg-hbar__barra { animation-delay:520ms; }
.acg-hbar__valor { animation:pg-entra .5s ease both; animation-delay:.9s; }
.pa-notas tbody tr, .pa-dr__quadro tbody tr { animation:pg-entra .45s ease both; }
.pa-notas tbody tr:nth-child(1) { animation-delay:200ms; } .pa-notas tbody tr:nth-child(2) { animation-delay:260ms; }
.pa-notas tbody tr:nth-child(3) { animation-delay:320ms; } .pa-notas tbody tr:nth-child(4) { animation-delay:380ms; }
.pa-notas tbody tr:nth-child(5) { animation-delay:440ms; } .pa-notas tbody tr:nth-child(6) { animation-delay:500ms; }
.pa-notas tbody tr:nth-child(7) { animation-delay:560ms; } .pa-notas tbody tr:nth-child(8) { animation-delay:620ms; }
.pa-notas tbody tr:nth-child(n+9) { animation-delay:680ms; }
@media (prefers-reduced-motion: reduce) {
  .pa-layout > .grafico-cartao, .pa-layout > .resumo-provas, .pa-layout > .pa-dr .grafico-cartao, .acg-hbar__barra, .acg-hbar__valor, .pa-notas tbody tr, .pa-dr__quadro tbody tr { animation:none !important; }
}

/* v1.201.00 — Painel do Professor: quadros fluem em colunas (sem espaços vazios) + Aulas Dadas compacto + Biblioteca compacta */
.graficos.graficos--fluxo { display:block; column-count:1; column-gap:1rem; }
.graficos.graficos--fluxo > .grafico-cartao { break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 1rem; grid-column:auto; grid-row:auto; }
@media (min-width: 761px)  { .graficos.graficos--fluxo { column-count:2; } }
@media (min-width: 1200px) { .graficos.graficos--fluxo { column-count:3; } }
.graficos--fluxo .grafico-cartao { padding:.8rem .9rem; }
.graficos--fluxo .grafico-cartao__sub { margin-bottom:.55rem; }
.ad-cmp { display:flex; flex-direction:column; max-height:300px; overflow-y:auto; font-size:.78rem; }
.ad-cmp__linha { display:grid; grid-template-columns:minmax(70px,1.5fr) repeat(3, minmax(0,1fr)); gap:.5rem; align-items:center; padding:.3rem 0; border-top:1px solid var(--cor-borda); }
.ad-cmp__cab { border-top:0; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--cor-tinta-suave); position:sticky; top:0; background:var(--cor-superficie); z-index:1; }
.ad-cmp__nome { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-cmp__cel { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ad-cmp__cel b { font-size:.7rem; font-variant-numeric:tabular-nums; }
.ad-cmp .ad-xy__trilho { height:7px; }
.widget-biblioteca-estat-grade { gap:.8rem; margin-bottom:1.4rem; }
.widget-biblioteca-estat { padding:.8rem 1rem; }
.widget-biblioteca-estat__icone { width:36px; height:36px; }
.widget-biblioteca-estat__total { font-size:1.35rem; }
.widget-biblioteca-estat__lista { margin-top:.6rem; padding-top:.4rem; max-height:190px; display:block; }
.widget-biblioteca-estat__lista li { padding:.2em 0; font-size:.78rem; align-items:baseline; border-bottom:1px dashed var(--cor-borda); }
.widget-biblioteca-estat__lista li:last-child { border-bottom:0; }
.widget-biblioteca-estat__lista li > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* v1.201.01 — tabelas dentro dos quadros do painel: compactas, sem estourar a coluna */
.graficos--fluxo .grafico-cartao { overflow-x:auto; }
.graficos--fluxo .tabela-dados, .graficos--fluxo .tabela-status { box-shadow:none; background:transparent; border-radius:0; table-layout:auto; }
.graficos--fluxo .tabela-dados th, .graficos--fluxo .tabela-dados td { padding:.35rem .4rem; font-size:.76rem; white-space:nowrap; }
.graficos--fluxo .tabela-dados th { font-size:.64rem; letter-spacing:.03em; }
.graficos--fluxo .tabela-status th, .graficos--fluxo .tabela-status td { padding:.3rem .4rem; font-size:.78rem; }

/* v1.202.00 — Minhas Disciplinas e Bimestres: tabela única no computador, lista clicável no celular/tablet */
.pd-tabela { display:none; }
@media (min-width: 1100px) {
  .pd-tabela { display:block; background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio-card); padding:.4rem .8rem .6rem; max-height:380px; overflow:auto; }
  .pd-tabela table { width:100%; border-collapse:collapse; font-size:.8rem; }
  .pd-tabela th { position:sticky; top:0; background:var(--cor-superficie); text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--cor-tinta-suave); padding:.45rem .4rem; border-bottom:2px solid var(--cor-borda); z-index:1; }
  .pd-tabela td { padding:.32rem .4rem; border-bottom:1px solid var(--cor-borda); vertical-align:top; }
  .pd-tabela__inicio td { border-top:1px solid var(--cor-borda); }
  .pd-tabela__disc { font-weight:700; color:var(--cor-marinho); }
  .pd-tabela small { color:var(--cor-tinta-suave); }
  .paineis-professor .lista-disciplinas, .paineis-professor .disciplinas-compacto { display:none; }
}

/* v1.202.01 — no computador, Disciplinas e Horário em linhas separadas (tabela em largura total, cada disciplina/série em UMA linha) */
@media (min-width: 1100px) {
  .paineis-professor { grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .pd-tabela td, .pd-tabela th { white-space:nowrap; }
  .pd-tabela__disc { white-space:normal; min-width:220px; }
  .pd-tabela td:last-child { white-space:normal; }
  .pd-tabela table { table-layout:auto; }
  .paineis-professor .grade-horario-wrap, .paineis-professor .grade-horario { width:100%; }
}

/* v1.202.02 — força coluna única (o <style> inline da view vinha depois e vencia) e remove a rolagem vertical da tabela de disciplinas */
@media (min-width: 1100px) {
  main .paineis-professor { grid-template-columns:minmax(0,1fr) !important; gap:1.2rem !important; }
  main .pd-tabela { max-height:none !important; overflow:visible !important; }
  main .pd-tabela td:last-child { white-space:nowrap; }
  main .pd-tabela th { position:static; }
}

/* v1.203.00 — Painel do Professor (computador): Meu Horário + Acervo físico + Acervo digital em 3 colunas */
.pp-trio { margin-bottom:1.4rem; }
.pp-trio__horario, .pp-trio__bib, .pp-trio__cal { min-width:0; }
.pp-trio__cal .cal-painel { margin:0 0 1rem; max-width:none; }
@media (min-width: 1100px) {
  main .pp-trio { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:1rem; align-items:start; }
  main .pp-trio__cal .cal-painel { margin:0; padding:10px; }
  main .pp-trio__cal .cal-painel__dia { font-size:.78rem; }
  main .pp-trio__bib .widget-biblioteca-estat-grade { grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; margin-bottom:0; }
  main .pp-trio .secao__cabecalho { margin-bottom:.6rem; }
  main .pp-trio .secao__cabecalho h3 { font-size:1.05rem; }
  main .pp-trio .grade-horario-wrap { margin-bottom:0; }
  main .pp-trio .grade-horario { min-width:0; font-size:.7rem; }
  main .pp-trio .grade-horario th, main .pp-trio .grade-horario td { padding:.28rem .2rem; }
  main .pp-trio .grade-horario thead th { font-size:.6rem; letter-spacing:0; }
  main .pp-trio .grade-horario td.grade-horario__rotulo { font-size:.62rem; white-space:normal; }
  main .pp-trio .grade-horario__aula { font-size:.72rem; }
  main .pp-trio .grade-horario__aula small { font-size:.62rem; }
  main .pp-trio .widget-biblioteca-estat { padding:.7rem .8rem; }
  main .pp-trio .widget-biblioteca-estat__total { font-size:1.2rem; }
  main .pp-trio .widget-biblioteca-estat__lista li { font-size:.7rem; gap:.4em; }
  main .pp-trio .widget-biblioteca-estat__lista-valores { white-space:normal; }
}

/* v1.204.00 — módulo Documentação (leitor de .md), somente Administrador */
.filtros-documentacao { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1.1rem; }
.filtros-documentacao input[type="text"] { flex:1; min-width:200px; padding:.45em .7em; border:1.5px solid var(--cor-borda); border-radius:8px; font-family:inherit; }
.documento-md-info { color:var(--cor-tinta-suave); font-size:.85rem; margin:-.4rem 0 1rem; }
.documento-md-layout { display:flex; gap:1.1rem; align-items:flex-start; }
.documento-md-sumario { flex:0 0 260px; position:sticky; top:80px; max-height:calc(100vh - 110px); overflow:auto; font-size:.85rem; background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio-card); padding:.8rem 1rem; }
.documento-md-sumario ul { list-style:none; margin:.5rem 0 0; padding:0; }
.documento-md-sumario li { margin:.25rem 0; }
.documento-md-sumario li.nivel-2 { padding-left:.7rem; }
.documento-md-sumario li.nivel-3 { padding-left:1.4rem; opacity:.85; }
.documento-md { flex:1; min-width:0; line-height:1.65; overflow-wrap:anywhere; background:var(--cor-superficie); border:1px solid var(--cor-borda); border-radius:var(--raio-card); padding:1.2rem 1.5rem; }
.documento-md h1, .documento-md h2, .documento-md h3, .documento-md h4 { margin:1.4em 0 .5em; scroll-margin-top:80px; }
.documento-md h1:first-child { margin-top:0; }
.documento-md h2 { border-bottom:1px solid var(--cor-borda); padding-bottom:4px; }
.documento-md p { margin:.7em 0; }
.documento-md ul, .documento-md ol { margin:.6em 0; padding-left:1.6em; }
.documento-md code { background:rgba(128,128,128,.18); padding:1px 5px; border-radius:4px; font-size:.9em; }
.documento-md pre { background:rgba(128,128,128,.15); padding:12px; border-radius:8px; overflow:auto; }
.documento-md pre code { background:none; padding:0; }
.documento-md blockquote { margin:.8em 0; padding:4px 14px; border-left:4px solid rgba(128,128,128,.5); opacity:.9; }
.documento-md hr { border:0; border-top:1px solid var(--cor-borda); margin:1.4em 0; }
.documento-md-tabela { overflow-x:auto; margin:.8em 0; }
@media (max-width: 900px) { .documento-md-layout { flex-direction:column; } .documento-md-sumario { position:static; flex:none; width:100%; max-height:240px; } }

/* Calendário interativo do painel (1.205.00) */
.cal-painel { background:var(--cor-superficie,#fff); color:var(--cor-tinta,#1b2a3a); border:1px solid var(--cor-borda,#dde3ea); border-radius:12px; padding:14px; margin:1.2rem 0 2rem; max-width:520px; }
.cal-painel__topo { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cal-painel__titulo { flex:1; text-align:center; color:var(--cor-marinho); }
.cal-painel__btn, .cal-painel__hoje { border:1px solid var(--cor-borda,#dde3ea); background:transparent; color:inherit; border-radius:8px; cursor:pointer; padding:4px 10px; font-size:1rem; }
.cal-painel__hoje { font-size:.8rem; }
.cal-painel__btn:hover, .cal-painel__hoje:hover { background:rgba(128,128,128,.15); }
.cal-painel__semana, .cal-painel__grade { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.cal-painel__semana { font-size:.72rem; opacity:.7; margin-bottom:4px; }
.cal-painel__dia { position:relative; aspect-ratio:1/1; border:1px solid transparent; background:transparent; color:inherit; border-radius:8px; cursor:pointer; font-size:.9rem; }
.cal-painel__dia:hover { background:rgba(128,128,128,.15); }
.cal-painel__dia--sel { border-color:var(--cor-verde); }
.cal-painel__dia--hoje { background:var(--cor-verde); color:#fff; font-weight:700; box-shadow:0 0 0 2px var(--cor-dourado); }
.cal-painel__dia--hoje:hover { background:var(--cor-verde-escuro); }
.cal-painel__ponto { position:absolute; left:50%; bottom:4px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--cor-dourado); }
.cal-painel__detalhe { margin-top:10px; padding-top:10px; border-top:1px solid var(--cor-borda,#dde3ea); font-size:.88rem; }
.cal-painel__data { font-weight:700; margin-bottom:4px; }
.cal-painel__ev { padding:6px 8px; margin-top:4px; border-left:3px solid var(--cor-dourado); background:rgba(128,128,128,.08); border-radius:4px; }
.cal-painel__nada { opacity:.7; }

/* Painel Secretaria/Admin/Gestor: indicadores ao lado do calendário (1.205.02) */
.painel-topo__kpis, .painel-topo__cal { min-width:0; }
.painel-topo__cal .cal-painel { margin:0 0 1.6rem; max-width:none; }
@media (min-width:1100px) {
  main .painel-topo { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.2rem; align-items:start; margin-bottom:1.6rem; }
  main .painel-topo .kpis { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-bottom:0; }
  main .painel-topo__cal .cal-painel { margin:0; padding:10px; }
  main .painel-topo__cal .cal-painel__dia { font-size:.8rem; }
}

/* v1.212.00 — dropdown de horários ao passar o mouse nas datas do calendário do painel */
.cal-painel { position:relative; }
.cal-painel__dropdown { position:absolute; z-index:50; min-width:210px; max-width:260px; background:#fff; color:#1b2a3a; border:1px solid #cfd6dd; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:.55rem .7rem; font-size:.8rem; pointer-events:none; }
.cal-painel__dropdown[hidden] { display:none; }
.cal-painel__drop-tit { font-weight:700; margin-bottom:.35rem; border-bottom:1px solid #e3e8ec; padding-bottom:.25rem; }
.cal-painel__aula { padding:.2rem 0; border-bottom:1px dashed #e3e8ec; line-height:1.3; }
.cal-painel__aula:last-child { border-bottom:0; }

/* v1.226.00 — pendências em vermelho (Alerta do painel → disciplina → item) */
.pend-vermelho { border-color:#c62828 !important; background:#fdecea !important; color:#8e1b1b !important; }
.pend-vermelho h3, .pend-vermelho span, .pend-vermelho .contagem { color:#8e1b1b !important; }
.pend-selo { display:inline-block; background:#c62828; color:#fff !important; font-size:.7rem; font-weight:700; padding:.12rem .5rem; border-radius:999px; margin-left:.4rem; vertical-align:middle; letter-spacing:.02em; }
tr.pend-vermelho td { background:#fdecea !important; color:#8e1b1b; }
.pend-caixa { border:1px solid #c62828; background:#fdecea; color:#8e1b1b; border-radius:10px; padding:.8rem 1rem; margin:0 0 1rem; font-size:.9rem; }
.pend-caixa strong { color:#8e1b1b; } .pend-caixa ul { margin:.4rem 0 0 1.1rem; padding:0; } .pend-caixa a { color:#8e1b1b; font-weight:700; }

/* v1.233.00: perfil/nome piscantes no topo quando o usuário está no modo "ver como" (impersonação). */
@keyframes imp-pisca { 0%,100% { background:#E2543B; color:#fff; } 50% { background:#F2A93B; color:#222; } }
.navbar-app__imp-pisca { animation: imp-pisca 1s ease-in-out infinite; padding:.2em .7em; border-radius:999px; font-weight:700; }
@media (prefers-reduced-motion: reduce) { .navbar-app__imp-pisca { animation:none; background:#E2543B; color:#fff; } }


/* v1.256.00 — Calendário do painel legível no modo escuro / alto contraste:
   o fundo usava uma variável inexistente (ficava branco) com texto claro herdado. */
.cal-painel__semana { opacity:.85; }
.cal-painel__dia:disabled { opacity:.5; }
.cal-painel__filtro select { background:var(--cor-superficie,#fff); color:var(--cor-tinta,#1b2a3a); }
html.tema-escuro .cal-painel { background:var(--cor-superficie); color:var(--cor-tinta); border-color:var(--cor-borda); }
html.tema-escuro .cal-painel__titulo { color:var(--cor-tinta); }
html.tema-escuro .cal-painel__btn, html.tema-escuro .cal-painel__hoje { color:var(--cor-tinta); border-color:var(--cor-borda); }
html.tema-escuro .cal-painel__dia { color:var(--cor-tinta); }
html.tema-escuro .cal-painel__dia:hover { background:rgba(255,255,255,.12); }
html.tema-escuro .cal-painel__dia--hoje { background:var(--cor-verde); color:#fff; }
html.tema-escuro .cal-painel__ev { background:rgba(255,255,255,.08); }
html.tema-escuro .cal-painel__dropdown { background:#1F2D3A; color:#F0F4F8; border-color:#3A4B5C; }
html.tema-escuro .cal-painel__drop-tit, html.tema-escuro .cal-painel__aula { border-color:#3A4B5C; }
html.a11y-alto-contraste .cal-painel { background:#000; color:#fff; border:2px solid #fff; }
html.a11y-alto-contraste .cal-painel__titulo, html.a11y-alto-contraste .cal-painel__dia, html.a11y-alto-contraste .cal-painel__btn, html.a11y-alto-contraste .cal-painel__hoje { color:#fff; }
html.a11y-alto-contraste .cal-painel__dia--hoje { background:#ffeb3b; color:#000; }
html.a11y-alto-contraste .cal-painel__filtro select { background:#000; color:#fff; border-color:#fff; }