/* ==========================================================================
   Painel de Monitoramento — UETEP/SEDUC-PI
   Tela. As regras de papel ficam em print.css.

   O documento tem a largura útil de uma folha A4 já na tela, para que o que
   se vê seja o que sai na impressão — é o único jeito de não descobrir a
   quebra de página só no Ctrl+P.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Superfícies */
  --fundo:       #f5f6f8;
  --superficie:  #ffffff;
  --superficie-2:#fafbfc;

  /* Tinta */
  --tinta:       #141a21;
  --tinta-2:     #5a636e;
  --tinta-3:     #98a1ac;

  /* Traços */
  --borda:       #e3e7ec;
  --borda-forte: #cdd4dc;

  /* Fundo das faixas de título e das células da grade */
  --faixa:       #eef0f3;

  /* Acento institucional */
  --acento:      #0f5e57;
  --acento-2:    #14796f;
  --acento-suave:#e8f2f0;

  --alerta:      #a33a2a;
  --alerta-suave:#fdefec;

  /* Escala de estado (boa / atenção / séria / crítica).
     Reservada para condição — nunca para diferenciar itens de uma lista, senão
     uma cor de estado passa a significar duas coisas no mesmo documento.
     Em superfície clara, o amarelo e o laranja ficam abaixo de 3:1; por isso a
     cor vai no ícone e na borda, e o texto usa tinta normal. */
  --st-ok:       #0ca30c;
  --st-atencao:  #fab219;
  --st-serio:    #ec835a;
  --st-critico:  #d03b3b;

  /* A4 retrato (210mm) menos as margens de impressão */
  --larg-doc:    186mm;

  --raio:        10px;
  --raio-p:      7px;
  --sombra:      0 1px 2px rgba(20, 26, 33, .05), 0 8px 24px rgba(20, 26, 33, .06);

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

/* ==========================================================================
   Barra de filtros
   ========================================================================== */

.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--borda);
}

.barra-inner {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1360px;
  margin: 0 auto;
  padding: 14px 24px;
}

.marca {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding-bottom: 2px;
  margin-right: 4px;
}
.marca-titulo { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.marca-sub    { font-size: 11.5px; color: var(--tinta-3); letter-spacing: .04em; text-transform: uppercase; }

.campos {
  display: flex;
  gap: 12px;
  flex: 1 1 520px;
  min-width: 0;
}

.campo { display: flex; flex-direction: column; gap: 5px; flex: 1 1 0; min-width: 0; }
.campo-largo { flex: 2 1 0; }

.campo-rotulo {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.campo .form-select {
  font-size: 13.5px;
  padding: 7px 30px 7px 11px;
  border-color: var(--borda-forte);
  border-radius: var(--raio-p);
  color: var(--tinta);
  background-color: var(--superficie);
}
.campo .form-select:focus {
  border-color: var(--acento-2);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
.campo .form-select:disabled { background-color: var(--superficie-2); color: var(--tinta-3); }

.acoes { display: flex; gap: 8px; padding-bottom: 1px; }

.btn-barra {
  font-size: 13px;
  font-weight: 550;
  padding: 8px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  background: var(--superficie);
  color: var(--tinta-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn-barra:hover:not(:disabled) { background: var(--superficie-2); color: var(--tinta); border-color: var(--tinta-3); }
.btn-barra:disabled { opacity: .45; cursor: not-allowed; }

.btn-barra-forte {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.btn-barra-forte:hover:not(:disabled) { background: var(--acento-2); border-color: var(--acento-2); color: #fff; }

/* Troca entre os dois relatórios (Por escola / Por município).
   São links, então precisam perder o sublinhado que o navegador dá e alinhar
   com os botões ao lado — um <a> não centraliza o texto como um <button>.
   A cor é o acento em versão suave: destaca a navegação sem disputar com o
   "Imprimir / PDF", que é a ação principal da barra. */
a.btn-barra {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn-barra-navega {
  background: var(--acento-suave);
  border-color: transparent;
  color: var(--acento);
  font-weight: 600;
}
.btn-barra-navega:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  text-decoration: none;
}

/* Faixa de aviso logo abaixo da barra (erro de leitura, carimbo do cache) */
.barra-estado {
  max-width: 1360px;
  margin: 0 auto;
  padding: 9px 24px;
  font-size: 12.5px;
  border-top: 1px solid var(--borda);
}
.barra-estado[data-tipo="erro"]  { background: var(--alerta-suave); color: var(--alerta); text-align: center; }
.barra-estado[data-tipo="info"]  { background: var(--superficie-2); color: var(--tinta-2); text-align: center; }

/* ==========================================================================
   Palco e estados
   ========================================================================== */

#palco { padding: 28px 24px 64px; }

.vazio {
  max-width: 460px;
  margin: 13vh auto;
  text-align: center;
  color: var(--tinta-2);
}
.vazio-icone {
  width: 44px; height: 44px;
  margin: 0 auto 18px;
  color: var(--tinta-3);
}
.vazio-icone svg { width: 100%; height: 100%; }
.vazio-titulo { font-size: 19px; font-weight: 600; color: var(--tinta); margin: 0 0 8px; letter-spacing: -.01em; }
.vazio-texto  { font-size: 14px; margin: 0; }
.vazio strong { font-weight: 600; color: var(--tinta); }

.carregando {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 13vh auto; color: var(--tinta-2); font-size: 14px;
}
.carregando::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--borda-forte); border-top-color: var(--acento);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ==========================================================================
   Documento (o que vira PDF)
   ========================================================================== */

.documento {
  width: var(--larg-doc);
  max-width: 100%;
  margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 10mm 10mm;
}

/* Cabeçalho centralizado, como no relatório impresso da UETEP. */
.doc-cabecalho { text-align: center; padding-bottom: 10px; }
.doc-brasao { width: auto; height: 60px; margin-bottom: 8px; }
.doc-titulo {
  font-size: 17px; font-weight: 700; letter-spacing: .01em; line-height: 1.25;
  margin: 0 0 6px; text-transform: uppercase; text-wrap: balance;
}
.doc-orgao { font-size: 12px; color: var(--tinta-2); margin: 0; }
.doc-local { font-size: 12px; color: var(--tinta-2); margin: 2px 0 0; }

.doc-rodape {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 26px; padding-top: 10px;
  border-top: 1px solid var(--borda);
  font-size: 10px; color: var(--tinta-3);
}

/* --------------------------------------------------------------------------
   Relatório do município

   O documento repete as mesmas seções para cada escola, então cada bloco
   precisa de uma âncora visual forte: sem ela, ao virar a página não se sabe
   de qual escola são os números que estão ali.
   -------------------------------------------------------------------------- */

.mun-identificacao {
  padding: 16px 0 4px;
  border-bottom: 2px solid var(--tinta);
  margin-bottom: 4px;
}
.mun-nome {
  font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25;
  margin: 0 0 4px; text-wrap: balance;
}
.mun-meta { font-size: 12px; color: var(--tinta-2); margin: 0 0 12px; }

.escola-bloco { padding-top: 26px; }

.escola-cabecalho {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--acento);
}
.escola-nome {
  font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; margin: 0;
  text-wrap: balance;
}
.escola-inep {
  margin-left: auto;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--tinta-3); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Dentro do bloco da escola as seções são subordinadas: a faixa some e o
   título vira um rótulo, para não competir com o nome da escola acima. */
.escola-corpo .secao-cabecalho,
.escola-corpo .area-cabecalho {
  background: none;
  border-left: none;
  padding: 12px 0 4px;
  margin-bottom: 8px;
}
.escola-corpo .secao-titulo,
.escola-corpo .area-titulo {
  font-size: 10px; letter-spacing: .09em; color: var(--tinta-3);
}

/* ==========================================================================
   Bloco de área — o molde que os oito módulos seguem
   ========================================================================== */

.area { padding-top: 22px; }

/* Faixa de título da seção: barra escura + fundo cinza, como no impresso. */
.secao-cabecalho,
.area-cabecalho {
  display: flex; align-items: center; gap: 10px;
  background: var(--faixa);
  border-left: 4px solid var(--tinta);
  padding: 7px 12px;
  margin-bottom: 12px;
}
.secao-titulo,
.area-titulo {
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; margin: 0;
}
.secao-numero { margin-right: 3px; }
.area-nota { font-size: 11.5px; color: var(--tinta-3); margin-left: auto; text-transform: none; }

/* Aviso de fonte ausente, discreto e fora do papel quando for instrução. */
.secao-aviso {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--tinta-3);
}
.secao-aviso code {
  font-size: 11px;
  background: var(--faixa);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--tinta-2);
}

/* --------------------------------------------------------------------------
   Ficha da escola (seção 1)

   Duas grades empilhadas que compartilham as mesmas três colunas, para as
   divisórias correrem retas de cima a baixo. A borda externa é do contêiner:
   assim as duas se encostam sem dobrar a espessura da linha entre elas.

   São divs e não uma <table> porque precisam virar uma coluna só em telas
   estreitas — coisa que tabela não faz.
   -------------------------------------------------------------------------- */

.ficha {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--borda);          /* aparece nos gaps, formando as linhas */
  border: 1px solid var(--borda);
}

.ident,
.resp {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
  gap: 1px;
  background: var(--borda);
}

.ident-celula,
.resp-celula {
  background: var(--superficie-2);
  padding: 8px 11px;
  min-width: 0;
}

/* ------------------------------------------------- identificação da escola */

.ident-celula { display: flex; flex-direction: column; gap: 2px; }
.ident-full   { grid-column: 1 / -1; }

.ident-rotulo {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-2);
}
.ident-valor {
  font-size: 12.5px; line-height: 1.35;
  overflow-wrap: anywhere;          /* nomes longos não estouram a célula */
}
.ident-forte   { font-weight: 650; font-size: 13.5px; }
.ident-num     { font-variant-numeric: tabular-nums; }
.ident-ausente { color: var(--tinta-3); }

/* --------------------------------------------------------- responsáveis */

.resp-celula {
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
}

.resp-cabecalho {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-2);
  padding-top: 6px; padding-bottom: 6px;
}

/* O papel ocupa a altura do grupo (grid-row: span N vem do HTML, porque o
   número de pessoas só se sabe na renderização). */
.resp-papel {
  font-weight: 650;
  align-items: flex-start;
  background: var(--faixa);
}

.resp-fone   { font-variant-numeric: tabular-nums; }
.resp-vazio  { color: var(--tinta-3); }

/* Linha de indicadores */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}
.kpi {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: 11px 13px;
}
.kpi-valor {
  font-size: 23px; font-weight: 660; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-rotulo {
  display: block; margin-top: 3px;
  font-size: 10.5px; font-weight: 550; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3);
}
.kpi-apoio { display: block; margin-top: 5px; font-size: 11px; color: var(--tinta-3); line-height: 1.25; }

/* Não informado nunca vira zero: o travessão distingue a resposta em branco
   de uma escola que declarou nenhum. */
.kpi-ausente { color: var(--tinta-3); }

/* Quatro cartões na mesma linha: colunas fixas, porque o auto-fit padrão
   quebraria em 3+1 na largura da A4. */
.kpis-4 { grid-template-columns: repeat(4, 1fr); }

/* O número do ENEM ao lado do relato que o explica. O cartão fica estreito e
   o texto fica com o espaço, que é onde ele faz falta. */
.enem {
  display: grid;
  grid-template-columns: minmax(104px, 1fr) 3fr;
  gap: 10px;
  align-items: start;   /* o cartão não estica na altura do relato */
}

/* Sem relato, o cartão sozinho não deve ocupar a largura da folha. */
.enem-so-numero { grid-template-columns: minmax(104px, 200px); }

/* Rótulo que agrupa a faixa seguinte — quatro cartões com siglas soltas
   (Alura, IO, AHK) não diriam do que se trata sem ele. */
.sub-rotulo {
  margin: 16px 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.kpi-destaque { background: var(--acento-suave); border-color: transparent; }
.kpi-destaque .kpi-valor { color: var(--acento); }

/* Indicador que exige ação. Aplicado só quando o número é diferente de zero —
   um cartão permanentemente vermelho marcando "0" ensinaria o olho a ignorá-lo
   exatamente onde ele importa. */
.kpi-alerta { background: var(--alerta-suave); border-color: transparent; }
.kpi-alerta .kpi-valor  { color: var(--alerta); }
.kpi-alerta .kpi-rotulo { color: var(--alerta); opacity: .85; }

/* --------------------------------------------------------------------------
   Cartões de condição (seção 4)

   A cor indica a gravidade, mas jamais sozinha: cada cartão traz o estado por
   extenso e um ícone de forma própria (visto, exclamação, triângulo, x). É o
   que mantém o cartão legível para quem não distingue cores e no relatório
   impresso em preto e branco.
   -------------------------------------------------------------------------- */

.labs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.lab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--tinta-3);
  border-radius: var(--raio-p);
}

.lab-condicao {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Tinta normal, não a cor do estado: em superfície clara o amarelo e o
     laranja não alcançam contraste de leitura. */
  color: var(--tinta);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.lab-icone { width: 16px; height: 16px; flex: none; }

.lab-nome {
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.lab-ok           { border-left-color: var(--st-ok); }
.lab-ok .lab-icone{ color: var(--st-ok); }

.lab-atencao           { border-left-color: var(--st-atencao); }
.lab-atencao .lab-icone{ color: #b07d00; }   /* passo escuro do mesmo tom, para o ícone destacar */

.lab-serio           { border-left-color: var(--st-serio); }
.lab-serio .lab-icone{ color: #b85a30; }

.lab-critico            { border-left-color: var(--st-critico); background: var(--alerta-suave); }
.lab-critico .lab-icone { color: var(--st-critico); }

.lab-desconhecido            { border-left-color: var(--borda-forte); }
.lab-desconhecido .lab-icone { color: var(--tinta-3); }
.lab-desconhecido .lab-condicao { color: var(--tinta-2); font-weight: 550; }

/* --------------------------------------------------------------------------
   Relato (texto livre declarado pela escola)

   Apresentado como observação, não como dado: o conteúdo vem de campo aberto
   de formulário, com formato que muda a cada escola. A borda à esquerda e a
   tinta mais fraca sinalizam que ali é citação, não número apurado.
   -------------------------------------------------------------------------- */

.relatos { display: flex; flex-direction: column; gap: 10px; }

.relato {
  padding: 9px 12px;
  background: var(--superficie-2);
  border-left: 2px solid var(--borda-forte);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
}

.relato-rotulo {
  display: block;
  margin-bottom: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.relato-texto {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--tinta-2);
  /* Muitas respostas são uma aprovação por linha; sem isto viram um bloco
     corrido e ilegível. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Total e lista pontilhada — o formato do relatório impresso da UETEP
   -------------------------------------------------------------------------- */

.total-doc {
  margin: 12px 0 0;
  padding: 7px 12px;
  background: var(--faixa);
  border-radius: var(--raio-p);
  font-size: 12px;
  letter-spacing: .01em;
}
.total-doc strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Zero é ausência de registro, não falha de leitura: o original dizia isso
   por extenso, e sem a frase o leitor fica sem saber qual dos dois é. */
.total-vazio { color: var(--tinta-3); font-size: 11.5px; }

/* Legenda das cores de linha. Fica logo abaixo da tabela porque é ali que a
   dúvida aparece — no rodapé do documento já teria passado.

   Discreta de propósito: é chave de leitura, não conteúdo. Se disputasse
   atenção com os dados, atrapalharia justamente quem já entendeu o código. */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 7px 0 0;
  font-size: 9px;
  letter-spacing: .02em;
  color: var(--tinta-3);
}
.legenda-item { display: inline-flex; align-items: center; gap: 5px; }

/* O marcador imita um trecho de linha da tabela — largo, baixo e com a mesma
   divisória inferior. Um quadrado solto obrigaria a traduzir "quadrado verde"
   para "linha verde"; assim a amostra já é o que se procura na tabela. */
.legenda-cor {
  width: 24px;
  height: 10px;
  flex: none;
  border: 1px solid var(--borda);
  border-bottom-color: var(--borda-forte);
  border-radius: 2px;
}
.legenda-nova         { background: var(--acento-suave); }
.legenda-continuidade { background: var(--superficie-2); }
.legenda-alerta       { background: var(--alerta-suave); }

/* Lista com pontilhado ligando o nome ao número, como no impresso. */
.por-componente { margin-top: 14px; }
.por-componente ul { margin: 0; padding: 0; list-style: none; }
.por-componente li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: 11.5px;
}
.pc-nome   { color: var(--tinta-2); }
.pc-pontos {
  flex: 1;
  min-width: 14px;
  border-bottom: 1px dotted var(--borda-forte);
  transform: translateY(-3px);
}
.pc-valor  { font-weight: 650; font-variant-numeric: tabular-nums; }

/* Tabelas das áreas do Oportunidade Jovem */
.tabela-monitoria { table-layout: fixed; }
.tabela-monitoria th:nth-child(1), .tabela-monitoria td:nth-child(1) { width: 44%; }
.tabela-monitoria th:nth-child(2), .tabela-monitoria td:nth-child(2) { width: 22%; }
.tabela-monitoria th, .tabela-monitoria td { overflow-wrap: anywhere; }

.tabela-empreendedorismo { table-layout: fixed; }
.tabela-empreendedorismo th:nth-child(1),
.tabela-empreendedorismo td:nth-child(1) { width: 26%; }
.tabela-empreendedorismo th:nth-child(2),
.tabela-empreendedorismo td:nth-child(2) { width: 20%; }
.tabela-empreendedorismo th:nth-child(4),
.tabela-empreendedorismo td:nth-child(4) { width: 8%; }
.tabela-empreendedorismo th, .tabela-empreendedorismo td { overflow-wrap: anywhere; }

/* Projetos: duas colunas, com o título do projeto levando a maior fatia —
   há nomes de mais de cem caracteres, e o do orientador é previsível. */
.tabela-projetos { table-layout: fixed; }
.tabela-projetos th, .tabela-projetos td { overflow-wrap: anywhere; }
.tabela-projetos th:nth-child(1), .tabela-projetos td:nth-child(1) { width: 62%; }

/* Do Piauí para o Mundo: equipes de até seis pessoas por linha, então as
   colunas de nomes levam a maior parte da largura. */
.tabela-mundo { table-layout: fixed; font-size: 10.5px; }
.tabela-mundo th, .tabela-mundo td { overflow-wrap: anywhere; padding: 5px 6px; }
.tabela-mundo th:nth-child(1), .tabela-mundo td:nth-child(1) { width: 24%; }
.tabela-mundo th:nth-child(2), .tabela-mundo td:nth-child(2) { width: 22%; }
.tabela-mundo th:nth-child(3), .tabela-mundo td:nth-child(3) { width: 32%; }
.tabela-mundo th:nth-child(4), .tabela-mundo td:nth-child(4) { width: 14%; }
.tabela-mundo th:nth-child(5), .tabela-mundo td:nth-child(5) { width: 8%; }

/* Nomes de uma equipe: um por linha. Em texto corrido, cinco nomes completos
   viram um bloco em que não se distingue onde um acaba e o outro começa. */
.lista-pessoas { margin: 0; padding: 0; list-style: none; }
.lista-pessoas li { line-height: 1.35; }
.lista-pessoas li + li { margin-top: 2px; }

/* Códigos de turma são longos; em texto corrido deixam de ser identificáveis,
   então cada um ocupa sua linha dentro da célula. */
.lista-turmas { margin: 0; padding: 0; list-style: none; }
.lista-turmas li { line-height: 1.35; }
.lista-turmas li + li { margin-top: 2px; }

/* Gráficos */
.grafico { position: relative; margin-top: 16px; }
.grafico-caixa { position: relative; width: 100%; }

/* Tabelas */
.tabela-doc {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 12px;
}
.tabela-doc th {
  text-align: left;
  font-size: 9.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--borda-forte);
}
.tabela-doc td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela-doc tbody tr:last-child td { border-bottom: none; }
.tabela-doc .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-doc .cod { font-variant-numeric: tabular-nums; }
.td-ausente { color: var(--tinta-3); }

/* Matriz de cursos: sete colunas numa A4 só cabem com o texto podendo
   quebrar. As larguras guiam onde a quebra acontece, para o código da turma e
   o telefone ficarem inteiros e a sobra ir para os nomes longos. */
.tabela-matriz { table-layout: fixed; font-size: 10.5px; }
.tabela-matriz th, .tabela-matriz td { overflow-wrap: anywhere; padding: 5px 6px; }
.tabela-matriz th:nth-child(1), .tabela-matriz td:nth-child(1) { width: 20%; }
.tabela-matriz th:nth-child(2), .tabela-matriz td:nth-child(2) { width: 14%; }
.tabela-matriz th:nth-child(3), .tabela-matriz td:nth-child(3) { width: 17%; }
.tabela-matriz th:nth-child(4), .tabela-matriz td:nth-child(4) { width: 6%; }
.tabela-matriz th:nth-child(5), .tabela-matriz td:nth-child(5) { width: 17%; }
.tabela-matriz th:nth-child(6), .tabela-matriz td:nth-child(6) { width: 11%; }
.tabela-matriz th:nth-child(7), .tabela-matriz td:nth-child(7) { width: 15%; }

/* Oferta: seis colunas. O espaço da antiga contagem de componentes foi
   para curso, eixo e turma, que são os textos que mais quebram linha. */
.tabela-oferta { table-layout: fixed; font-size: 10.5px; }
.tabela-oferta th, .tabela-oferta td { overflow-wrap: anywhere; padding: 5px 6px; }
.tabela-oferta th:nth-child(1), .tabela-oferta td:nth-child(1) { width: 25%; }
.tabela-oferta th:nth-child(2), .tabela-oferta td:nth-child(2) { width: 20%; }
.tabela-oferta th:nth-child(3), .tabela-oferta td:nth-child(3) { width: 10%; }
.tabela-oferta th:nth-child(4), .tabela-oferta td:nth-child(4) { width: 10%; }
.tabela-oferta th:nth-child(5), .tabela-oferta td:nth-child(5) { width: 26%; }
.tabela-oferta th:nth-child(6), .tabela-oferta td:nth-child(6) { width: 9%; }

/* Faixa de alerta: aparece só onde há problema, então pode ser vistosa sem
   virar ruído — em 85% das escolas ela nem é renderizada. */
.alerta {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--alerta);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  background: var(--alerta-suave);
  color: var(--alerta);
  font-size: 12px;
}
.alerta strong { font-weight: 650; }

/* Turma aberta neste ano. Fundo tênue: é contexto de leitura, não pendência —
   numa escola só de turmas novas, um destaque forte pintaria a tabela inteira
   e deixaria de destacar coisa alguma. */
.linha-nova td { background: var(--acento-suave); }

/* A turma com carga a lotar fica localizável dentro da tabela.
   DECLARADA DEPOIS DE .linha-nova de propósito: as duas classes podem estar na
   mesma linha, e, com a mesma especificidade, vence a última — que é o que se
   quer, porque carga horária a lotar pede ação e "oferta nova" só informa. */
.linha-alerta td { background: var(--alerta-suave); }
.selo-falta {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--alerta);
  color: #fff;
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Turma encerrada continua no relatório, mas recuada: quem lê precisa
   distinguir a oferta corrente sem que a informação desapareça. */
.linha-inativa td { color: var(--tinta-3); }
.selo-inativo {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  border: 1px solid var(--borda-forte);
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}

/* Área sem registros — precisa aparecer, e não sumir do documento */
.sem-dados {
  padding: 14px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-p);
  font-size: 12.5px;
  color: var(--tinta-3);
  text-align: center;
}

/* Falha ao carregar uma área: as outras continuam de pé */
.area-erro {
  padding: 12px 14px;
  border: 1px solid #f0cdc6;
  border-radius: var(--raio-p);
  background: var(--alerta-suave);
  color: var(--alerta);
  font-size: 12.5px;
}

/* ==========================================================================
   Telas estreitas
   ========================================================================== */

@media (max-width: 900px) {
  .barra-inner { gap: 14px; padding: 12px 16px; }
  .campos { flex: 1 1 100%; flex-wrap: wrap; }
  .campo, .campo-largo { flex: 1 1 200px; }
  .acoes { flex: 1 1 100%; }
  .btn-barra { flex: 1 1 auto; }
  .barra-estado { padding: 9px 16px; }
}

@media (max-width: 600px) {
  #palco { padding: 18px 16px 48px; }
  .documento { padding: 20px 16px; border-radius: var(--raio-p); }
  .doc-titulo { font-size: 15px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  /* Quatro colunas não cabem no celular; aí o auto-fit decide quantas. */
  .kpis-4 { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  /* O número passa a ficar acima do relato, não ao lado. */
  .enem,
  .enem-so-numero { grid-template-columns: 1fr; }
  .tabela-doc { font-size: 11.5px; }

  /* As grades de três colunas não cabem: cada campo passa a ocupar a linha.
     O papel deixa de ser coluna e vira o título do seu grupo — por isso o
     !important, que cancela o grid-row calculado no HTML. */
  .ident,
  .resp { grid-template-columns: 1fr; }
  .ident-full { grid-column: 1 / -1; }

  .resp-papel { grid-row: auto !important; background: var(--faixa); }
  .resp-cabecalho { display: none; }
  .resp-fone::before { content: "Contato: "; color: var(--tinta-3); }
}