/* CIF Escolas — folha única, escrita à mão.
   A meta continua a mesma: tela inteira abaixo de 150 KB, sem framework de front.
   O que mudou nesta versão é o acabamento — hierarquia de tipo, respiro, sombra
   de duas camadas e estados de foco visíveis. Nada aqui depende de JavaScript. */

/* A fonte é carregada por <link> no head do layout, não por @import: o
   @import só é descoberto depois que esta folha termina de baixar. */

:root{
  /* marca */
  --marca:#14538A; --marca-forte:#0E3C66; --marca-viva:#1E6FB8;
  --marca-clara:#EAF2FA; --marca-borda:#C9DDEF;

  /* neutros com viés de azul: cinza puro lê como descuido */
  --ink:#0F1922; --ink-2:#44515F; --ink-3:#71808F; --ink-4:#9AA7B4;
  --linha:#E2E8F0; --linha-forte:#CBD5E1;
  --fundo:#F5F7FA; --branco:#fff; --chapa:#FAFBFD;

  /* semânticas — separadas da marca de propósito */
  --verde:#0F7B4F; --verde-bg:#E6F5EE; --verde-borda:#B7E2CD;
  --vermelho:#B02318; --vermelho-bg:#FCEDEB; --vermelho-borda:#F3CCC7;
  --amarelo:#8A5A00; --amarelo-bg:#FDF4E3; --amarelo-borda:#EFD9AC;
  --roxo:#5B3FA8; --roxo-bg:#F1EDFB;

  --raio:10px; --raio-p:7px;
  /* sombra em duas camadas: a rasa dá o contorno, a funda dá a profundidade */
  --sombra:0 1px 2px rgba(15,25,34,.05), 0 1px 3px rgba(15,25,34,.06);
  --sombra-2:0 2px 4px rgba(15,25,34,.05), 0 8px 20px rgba(15,25,34,.08);
  --anel:0 0 0 3px rgba(20,83,138,.18);
  --transicao:.15s ease;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo); color:var(--ink);
  font:15px/1.55 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
a{color:var(--marca);text-decoration:none;transition:color var(--transicao)}
a:hover{color:var(--marca-viva);text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--anel);border-radius:var(--raio-p)}

h1,h2,h3{margin:0;line-height:1.25;font-weight:700;letter-spacing:-.012em}
h1{font-size:23px}
h2{font-size:17px;font-weight:650}
h3{font-size:14.5px;font-weight:650}

/* ---------- ícones ----------
   Sprite SVG embutido no layout: 20 símbolos, ~3 KB, sem fonte de ícone e sem
   requisição extra. Herdam a cor do texto por currentColor. */
.ico{width:19px;height:19px;flex:0 0 auto;stroke:currentColor;fill:none;
     stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico-g{width:22px;height:22px}
.ico-p{width:15px;height:15px}

/* ---------- topo ---------- */
.topo{
  background:var(--marca-forte); color:#fff; padding:0 20px;
  display:flex; align-items:center; gap:16px; height:58px;
  position:sticky; top:0; z-index:30;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 1px 3px rgba(15,25,34,.18);
}
.topo .marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;
  color:#fff;letter-spacing:-.01em}
.topo .marca:hover{text-decoration:none;color:#fff}
.topo .marca img{display:block;height:32px;width:auto}
.topo .escola-topo{
  font-size:12.5px;font-weight:600;color:#CFE2F3;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  padding:4px 11px;border-radius:20px;white-space:nowrap;
}
.topo .espaco{flex:1}
.topo .usuario{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-size:12px;color:#B9D2E8;line-height:1.25;padding:5px 9px;border-radius:var(--raio-p);
  transition:background var(--transicao);
}
.topo a.usuario:hover{background:rgba(255,255,255,.09);text-decoration:none}
.topo a.usuario:hover strong{text-decoration:none}
.topo .usuario strong{color:#fff;font-size:13.5px;font-weight:600}
.topo form{margin:0}
.topo .sair{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;
  padding:7px 13px;border-radius:var(--raio-p);cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;transition:background var(--transicao);
}
.topo .sair:hover{background:rgba(255,255,255,.18)}

/* ---------- menu lateral ---------- */
.corpo{display:flex;min-height:calc(100vh - 58px)}
.menu{
  width:238px;background:var(--branco);border-right:1px solid var(--linha);
  padding:12px 10px 26px;flex-shrink:0;
}
.menu .grupo{
  padding:16px 10px 6px;font-size:10.5px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink-4);font-weight:700;
}
.menu a{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;margin-bottom:1px;color:var(--ink-2);font-size:14px;font-weight:500;
  border-radius:var(--raio-p);transition:background var(--transicao),color var(--transicao);
}
.menu a .ico{color:var(--ink-4);transition:color var(--transicao)}
.menu a:hover{background:var(--chapa);color:var(--ink);text-decoration:none}
.menu a:hover .ico{color:var(--ink-3)}
.menu a.ativo{background:var(--marca-clara);color:var(--marca);font-weight:650}
.menu a.ativo .ico{color:var(--marca)}
.menu .sair-escola{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;margin:2px 0 0;background:none;border:none;border-radius:var(--raio-p);
  font:inherit;font-size:13.5px;font-weight:600;color:var(--vermelho);
  cursor:pointer;text-align:left;transition:background var(--transicao);
}
.menu .sair-escola:hover{background:var(--vermelho-bg)}

/* ---------- conteúdo ---------- */
.conteudo{flex:1;padding:26px 28px 60px;max-width:1280px;min-width:0}
.cabecalho{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.cabecalho .espaco{flex:1}
.cabecalho h1{margin-bottom:3px}
.cabecalho p{margin:0;color:var(--ink-3);font-size:13.5px}

/* ---------- cartão ---------- */
.cartao{
  background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden;
}
.cartao + .cartao{margin-top:18px}
.cartao .cabeca{
  padding:14px 18px;border-bottom:1px solid var(--linha);
  display:flex;align-items:center;gap:12px;background:var(--branco);
}
.cartao .cabeca .espaco{flex:1}
.cartao .miolo{padding:18px}
.cartao .rodape{
  padding:14px 18px;border-top:1px solid var(--linha);background:var(--chapa);
  display:flex;gap:9px;justify-content:flex-end;align-items:center;flex-wrap:wrap;
}

/* ---------- tabela ---------- */
.rolagem{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;padding:11px 16px;background:var(--chapa);color:var(--ink-3);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid var(--linha);white-space:nowrap;
}
td{padding:12px 16px;border-bottom:1px solid #EEF2F7;vertical-align:middle;color:var(--ink-2)}
td a{font-weight:600;color:var(--ink)}
td a:hover{color:var(--marca)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--transicao)}
tbody tr:hover{background:var(--chapa)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.acoes{white-space:nowrap;text-align:right}
td.acoes .btn + .btn,td.acoes form{margin-left:5px}
td.acoes form{display:inline}

.vazio{padding:52px 24px;text-align:center;color:var(--ink-3);font-size:13.5px}
.vazio strong{display:block;color:var(--ink);margin-bottom:5px;font-size:15.5px;font-weight:650}
.vazio .ico{color:var(--ink-4);margin:0 auto 12px;display:block;width:34px;height:34px;stroke-width:1.4}

/* ---------- indicadores do início ---------- */
.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.indicador{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:16px 18px;display:flex;align-items:flex-start;gap:13px;
  transition:box-shadow var(--transicao),transform var(--transicao);
}
.indicador:hover{box-shadow:var(--sombra-2);transform:translateY(-1px);text-decoration:none}
.indicador .selo{
  width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--marca-clara);color:var(--marca);flex:0 0 auto;
}
.indicador .selo.verde{background:var(--verde-bg);color:var(--verde)}
.indicador .selo.amarelo{background:var(--amarelo-bg);color:var(--amarelo)}
.indicador .selo.roxo{background:var(--roxo-bg);color:var(--roxo)}
.indicador .valor{font-size:26px;font-weight:700;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.indicador .rotulo{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ---------- formulário ---------- */
.campos{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.campo{grid-column:span 12;display:flex;flex-direction:column;gap:6px;min-width:0}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}
.c8{grid-column:span 8}.c9{grid-column:span 9}
label{font-size:12.5px;font-weight:650;color:var(--ink-2);letter-spacing:.005em}
label .opc{font-weight:400;color:var(--ink-4)}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],input[type=search],input[type=tel],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--linha-forte);border-radius:var(--raio-p);
  font:inherit;font-size:14px;color:var(--ink);background:var(--branco);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover{border-color:var(--ink-4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marca);box-shadow:var(--anel)}
input:disabled,select:disabled,textarea:disabled{background:var(--chapa);color:var(--ink-3);cursor:not-allowed}
input.erro,select.erro,textarea.erro{border-color:var(--vermelho)}
input.erro:focus,select.erro:focus{box-shadow:0 0 0 3px rgba(176,35,24,.15)}
select{
  appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371808F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
}
.msg-erro{color:var(--vermelho);font-size:12.5px;font-weight:500}
.ajuda{color:var(--ink-3);font-size:12.5px;line-height:1.5}
textarea{min-height:104px;resize:vertical;line-height:1.6}
.linha-check{display:flex;align-items:center;gap:9px}
.linha-check input[type=checkbox],.linha-check input[type=radio]{
  width:17px;height:17px;accent-color:var(--marca);cursor:pointer;flex:0 0 auto;
}
.linha-check label{font-weight:500;cursor:pointer;color:var(--ink-2)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 17px;border-radius:var(--raio-p);border:1px solid transparent;
  font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;text-align:center;
  white-space:nowrap;transition:background var(--transicao),border-color var(--transicao),
  box-shadow var(--transicao),color var(--transicao);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(.5px)}
.btn-p{background:var(--marca);color:#fff;box-shadow:0 1px 2px rgba(15,25,34,.12)}
.btn-p:hover{background:var(--marca-viva);color:#fff}
.btn-s{background:var(--branco);color:var(--ink-2);border-color:var(--linha-forte);box-shadow:0 1px 2px rgba(15,25,34,.04)}
.btn-s:hover{background:var(--chapa);border-color:var(--ink-4);color:var(--ink)}
.btn-d{background:var(--branco);color:var(--vermelho);border-color:var(--vermelho-borda)}
.btn-d:hover{background:var(--vermelho-bg)}
.btn-mini{padding:6px 11px;font-size:12.5px;gap:5px;border-radius:6px}
.btn-grande{padding:13px 24px;font-size:15px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.link-aviso{
  background:none;border:none;padding:0;font:inherit;font-weight:650;
  color:inherit;text-decoration:underline;cursor:pointer;
}

/* ---------- avisos e etiquetas ---------- */
.aviso{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;border-radius:var(--raio-p);margin-bottom:18px;
  font-size:13.5px;line-height:1.55;border:1px solid;
}
.aviso .ico{margin-top:1px}
.aviso-ok{background:var(--verde-bg);color:var(--verde);border-color:var(--verde-borda)}
.aviso-erro{background:var(--vermelho-bg);color:var(--vermelho);border-color:var(--vermelho-borda)}
.aviso-info{background:var(--marca-clara);color:var(--marca-forte);border-color:var(--marca-borda)}
.aviso-alerta{background:var(--amarelo-bg);color:var(--amarelo);border-color:var(--amarelo-borda)}
.aviso strong{font-weight:700}
.aviso a{color:inherit;font-weight:650;text-decoration:underline}

.etq{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:650;
  letter-spacing:.005em;white-space:nowrap;border:1px solid transparent;
}
.etq-ok{background:var(--verde-bg);color:var(--verde);border-color:var(--verde-borda)}
.etq-off{background:#EEF2F7;color:var(--ink-3);border-color:var(--linha)}
.etq-alerta{background:var(--amarelo-bg);color:var(--amarelo);border-color:var(--amarelo-borda)}
.etq-erro{background:var(--vermelho-bg);color:var(--vermelho);border-color:var(--vermelho-borda)}
.etq-marca{background:var(--marca-clara);color:var(--marca);border-color:var(--marca-borda)}

.selo-pendente{
  display:inline-flex;align-items:center;margin-left:6px;padding:2px 8px;border-radius:20px;
  font-size:11px;font-weight:650;vertical-align:middle;
  background:var(--amarelo-bg);color:var(--amarelo);border:1px dashed var(--amarelo-borda);
}

/* ---------- paginação ---------- */
.paginacao{display:flex;align-items:center;gap:10px;font-size:13px;margin-top:16px}
.paginacao .pg{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:1px solid var(--linha-forte);border-radius:var(--raio-p);
  background:var(--branco);color:var(--marca);font-weight:650;
  transition:background var(--transicao),border-color var(--transicao);
}
.paginacao .pg:hover{text-decoration:none;background:var(--marca-clara);border-color:var(--marca-borda)}
.paginacao .pg-off{color:var(--ink-4);background:var(--chapa);cursor:default;border-color:var(--linha)}
.paginacao .pg-off:hover{background:var(--chapa);border-color:var(--linha)}
.paginacao .pg-conta{color:var(--ink-3)}

/* ---------- entrada ---------- */
.entrada{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:24px;background:var(--marca-forte);
  background-image:
    radial-gradient(60rem 40rem at 50% -10%, rgba(46,127,196,.42) 0, transparent 60%),
    radial-gradient(40rem 30rem at 90% 110%, rgba(20,83,138,.55) 0, transparent 55%);
}
.entrada .caixa{
  background:var(--branco);border-radius:16px;padding:34px 34px 32px;width:100%;max-width:398px;
  box-shadow:0 10px 15px rgba(9,25,42,.12), 0 24px 60px rgba(9,25,42,.28);
}
.entrada .marca-entrada{display:block;width:230px;max-width:100%;height:auto;margin:0 auto 10px}
.entrada h1{text-align:center;color:var(--marca);margin-bottom:4px}
.entrada .sub{text-align:center;color:var(--ink-3);font-size:13.5px;margin:0 0 24px}
.entrada .campos{gap:14px}
.entrada .btn{width:100%;margin-top:10px;padding:12px}
.entrada .aviso{margin-bottom:16px}
.rodape-entrada{margin:0;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.01em}

/* ---------- celular ---------- */
@media (max-width:900px){
  .topo{padding:0 14px;gap:11px}
  .topo .escola-topo{display:none}
  .topo .usuario{display:none}
  .corpo{flex-direction:column}
  .menu{
    width:100%;border-right:none;border-bottom:1px solid var(--linha);
    display:flex;flex-wrap:wrap;gap:4px;padding:9px 10px;overflow-x:auto;
  }
  .menu .grupo{display:none}
  .menu a{padding:8px 12px;margin:0;white-space:nowrap;font-size:13.5px}
  .menu .sair-escola{width:auto}
  .conteudo{padding:18px 14px 44px}
  .campo,.c3,.c4,.c6,.c8,.c9{grid-column:span 12}
  th,td{padding:10px 12px}
  .cartao .miolo,.cartao .cabeca,.cartao .rodape{padding:14px}
  .indicadores{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  h1{font-size:20px}
}

/* Quem pediu menos movimento não recebe movimento nenhum. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .indicador:hover{transform:none}
}

/* Impressão: fora a folha, tudo que é navegação some. */
@media print{
  .topo,.menu,.cabecalho .btn,.acoes,.rodape,.paginacao{display:none!important}
  .conteudo{padding:0;max-width:none}
  .cartao{border:1px solid #999;box-shadow:none;break-inside:avoid}
  body{background:#fff}
}

/* ---------- busca ---------- */
.busca{display:flex;gap:8px;align-items:center}
.busca .caixa-busca{position:relative;display:flex;align-items:center}
.busca .caixa-busca .ico{
  position:absolute;left:11px;color:var(--ink-4);pointer-events:none;width:16px;height:16px;
}
.busca input{width:250px;padding-left:35px}
@media (max-width:900px){ .busca input{width:100%} .busca{flex:1} }

/* ==========================================================================
   Blocos por módulo. Vivem no fim da folha, depois do sistema base: são as
   telas que têm forma própria e não se resolvem só com cartão e tabela.
   ========================================================================== */
/* ---------- chamada ---------- */
/* A tela que o professor abre todo dia, muitas vezes de pé com a turma na
   frente: nome grande, linha inteira clicável e a falta pintada, para ele
   conferir a lista de longe antes de salvar. */
.chamada .nome{font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.chamada tbody tr.linha{cursor:pointer}
.chamada tbody tr.linha:hover{background:var(--marca-clara)}
.chamada tbody tr.ausente{background:var(--vermelho-bg)}
.chamada tbody tr.ausente:hover{background:#F6DDDB}
.chamada tbody tr.ausente .nome{color:var(--vermelho)}
.chamada input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--marca)}
.chamada .linha-check label{cursor:pointer;font-size:13px;color:var(--ink-2)}
.chamada .linha-check input:disabled + label{color:var(--ink-3)}

/* Uma definição só: três telas pediram esta marca com medidas diferentes,
   e três definições no fim da folha fariam a última vencer as outras. */

/* ---------- lançamento de notas ---------- */
.num-in{width:96px;padding:7px 9px;text-align:right;font-variant-numeric:tabular-nums}
.grade-notas td{padding-top:7px;padding-bottom:7px}
.grade-notas .nota-campo{font-size:17px;font-weight:600}
.grade-notas .nota-campo:focus{background:var(--marca-clara)}
.grade-notas tr:focus-within td{background:var(--marca-clara)}
.grade-notas .msg-erro{display:block;margin-top:3px}

/* ---------- boletim na tela ---------- */
/* Matriz estreita e com muitas colunas: a primeira fica presa na rolagem
   para o nome da disciplina não sumir no celular. */
.boletim-notas th,
.boletim-notas td{padding:6px 7px;font-size:13px}
.boletim-notas thead th{font-size:11.5px;line-height:1.25;white-space:nowrap}
.boletim-notas td:first-child,
.boletim-notas th:first-child{position:sticky;left:0;background:var(--branco);z-index:1}
.boletim-notas thead th:first-child{background:#F7F9FB}

/* ========== MÓDULO EAD ==========
   Uma definição só por classe: três agentes propuseram versões diferentes
   das mesmas classes, e esta é a que casa com a marcação entregue. */


/* A sala vem no HTML com o palco primeiro: no celular, onde a grade é de uma
   coluna só, quem abre a aula precisa cair no vídeo e não numa lista de aulas
   ocupando a tela. No computador a lista volta para a coluna da esquerda. */
.sala > .sala-lista{order:-1}
@media (max-width:820px){
  .sala > .sala-lista{order:0}
}
/* ---------- EAD: catálogo ---------- */
.curso-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.curso-cartao{
  display:flex;flex-direction:column;background:var(--branco);color:var(--ink);
  border:1px solid var(--linha);border-radius:var(--raio-p);box-shadow:var(--sombra);overflow:hidden;
}
.curso-cartao:hover{text-decoration:none;border-color:#C6D3E0;box-shadow:0 2px 8px rgba(16,24,40,.10)}
.curso-capa{aspect-ratio:16/9;background:var(--marca-clara);display:flex;align-items:center;justify-content:center;overflow:hidden}
.curso-capa img{width:100%;height:100%;object-fit:cover;display:block}
.curso-capa span{font-size:34px;font-weight:700;color:var(--marca)}
.curso-corpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.curso-corpo h3{color:var(--ink)}
.curso-linha{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.curso-meta{margin:0;color:var(--ink-3);font-size:12.5px}
.curso-retomar{align-self:flex-start;margin-top:4px}

.barra-progresso{height:6px;border-radius:20px;background:#EEF1F5;overflow:hidden}
.barra-progresso > span{display:block;height:100%;background:var(--verde);border-radius:20px}

.aula-tipo{display:inline-block;padding:1px 7px;border-radius:4px;background:#EEF1F5;color:var(--ink-3);font-size:11.5px;font-weight:600}

/* ---------- EAD: sala de aula ---------- */
.sala{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
.sala-lista{position:sticky;top:70px}
.sala-sumario{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-p);
  box-shadow:var(--sombra);overflow:auto;max-height:calc(100vh - 90px);
}
.sala-sumario > summary{
  padding:12px 14px;border-bottom:1px solid var(--linha);cursor:pointer;background:var(--branco);
  font-weight:650;font-size:14px;color:var(--ink-2);position:sticky;top:0;z-index:1;
}
.sala-sumario > summary:hover{background:#FAFBFC}
.sala-conta{float:right;color:var(--ink-3);font-weight:400;font-size:12.5px}
.sala-progresso{padding:12px 14px;border-bottom:1px solid var(--linha);display:flex;flex-direction:column;gap:6px}
.sala-secao{padding:10px 14px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

.aula-lista{list-style:none;margin:0;padding:0}
.aula-item{border-bottom:1px solid #EEF1F5}
.aula-lista li:last-child{border-bottom:none}
.aula-item > a{display:flex;gap:10px;padding:9px 14px;color:var(--ink-2);border-left:3px solid transparent}
.aula-item > a:hover{background:#FAFBFC;text-decoration:none}
.aula-item.atual > a{background:var(--marca-clara);border-left-color:var(--marca)}
.aula-marca{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;position:relative;
  font-size:11.5px;color:var(--ink-3);background:var(--branco);
}
.aula-item.feita .aula-marca{background:var(--verde-bg);border-color:#BFE3D1;color:transparent}
/* Marca de concluída desenhada em CSS: o projeto não tem fonte de ícone e não usa emoji. */
.aula-item.feita .aula-marca::after{
  content:"";position:absolute;left:7px;top:4px;width:4px;height:9px;
  border:solid var(--verde);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.aula-texto{display:flex;flex-direction:column;gap:3px;min-width:0}
.aula-texto strong{color:var(--ink);font-size:13.5px;font-weight:600}
.aula-texto .curso-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.sala-palco{min-width:0}
.sala-media{overflow:hidden;border-radius:var(--raio-p) var(--raio-p) 0 0;background:var(--branco)}
/* Vence o justify-content:flex-end de ".cartao .rodape" — por isso os três seletores. */
.cartao .rodape.sala-acoes{justify-content:flex-start;align-items:center;flex-wrap:wrap}
.sala-acoes .espaco{flex:1}
.btn-grande{padding:12px 22px;font-size:15px}

/* 16:9 sem biblioteca: a proporção é do contêiner, o iframe só preenche. */
.video-embed{aspect-ratio:16/9;width:100%;background:#000}
.video-embed iframe{width:100%;height:100%;border:0;display:block}
.aula-pdf{background:#F1F3F6}
.aula-pdf iframe{width:100%;height:72vh;min-height:420px;border:0;display:block}
.aula-baixar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--linha)}

.aula-conteudo{padding:18px 20px;max-width:70ch;color:var(--ink);line-height:1.75}
.aula-conteudo p{margin:0 0 12px}
.aula-conteudo h2,.aula-conteudo h3,.aula-conteudo h4{margin:20px 0 8px}
.aula-conteudo ul,.aula-conteudo ol{margin:0 0 12px;padding-left:22px}
.aula-conteudo li{margin-bottom:4px}
.aula-conteudo blockquote{margin:0 0 12px;padding:6px 14px;border-left:3px solid var(--linha);color:var(--ink-2)}
.aula-conteudo hr{border:none;border-top:1px solid var(--linha);margin:18px 0}
.aula-conteudo > *:last-child{margin-bottom:0}

@media (max-width:820px){
  .sala{grid-template-columns:1fr}
  /* A lista vira barra recolhível em cima do vídeo. A altura é limitada para
     um curso de 30 aulas não empurrar a aula para fora da tela. */
  .sala-lista{position:static}
  .sala-sumario{max-height:50vh}
  .curso-grade{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
  .aula-pdf iframe{height:60vh;min-height:320px}
}
/* As duas caixas de marcação da chamada. A de presença é o alvo principal:
   o professor bate nela dezenas de vezes seguidas, muitas vezes de pé. */
.chamada input.presenca{width:20px;height:20px}
.chamada input.justif{accent-color:var(--amarelo)}
.chamada input.justif:disabled + label{color:var(--ink-4)}