/* Complemento visual no mesmo desenho de sistema_escolar.html */
.titulo-pagina { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.titulo-pagina h2, .card h3 { font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif; font-weight: 800; color: #606062; }
.titulo-pagina h2 { font-size: 1.5rem; }
.suave { color: rgba(96, 96, 98, .75); font-size: .82rem; }
.aviso { background: #fff; border: 1px solid #E6E7E8; border-radius: 1rem; padding: 16px; }

.card, .kpi {
  background: #fff;
  border: 1px solid #E6E7E8;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(72, 72, 74, .06);
  padding: 16px 18px;
}
.grade-kpis, .grade-2, .grade-cards { display: grid; gap: 12px; }
.grade-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-2 { grid-template-columns: 1.2fr .8fr; }
.grade-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kpi span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(96,96,98,.7); }
.kpi strong { display: block; margin-top: 4px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.7rem; font-weight: 800; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: .75rem; font-weight: 700; }
.campo input, .campo select, .campo textarea, .busca, .seletor {
  width: 100%;
  min-height: 44px;
  border: 1px solid #E6E7E8;
  background: #F9F6F0;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  color: #606062;
}
.filtros .seletor, .filtros .busca { width: auto; min-width: 160px; flex: 1; }
.campo textarea { min-height: 84px; font-weight: 500; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .busca:focus, .seletor:focus {
  outline: none;
  background: #fff;
  border-color: #F07335;
}

.btn {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.btn-laranja { background: #F07335; color: #fff; }
.btn-laranja:hover { background: #D95F22; }
.btn-grafite { background: #606062; color: #fff; }
.btn-claro { background: #F2EBDF; color: #606062; border: 1px solid #E6E7E8; }
.btn-perigo { background: #dc2626; color: #fff; }
.btn-bloco { width: 100%; }
.linha-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.selo {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .72rem;
  font-weight: 800;
  background: #F2EBDF;
}
.opcoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.opcao { min-height: 44px; border-radius: 12px; border: 1px solid #E6E7E8; background: rgba(242, 235, 223, .6); font-weight: 800; }
.opcao.sim { background: #059669; color: #fff; border-color: #059669; }
.opcao.nao { background: #dc2626; color: #fff; border-color: #dc2626; }
.opcao.parcial { background: #F07335; color: #fff; border-color: #F07335; }
.opcao.na { background: #606062; color: #fff; border-color: #606062; }
.barra { height: 8px; background: #E6E7E8; border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; background: #F07335; }
.tabela { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabela th { text-align: left; font-size: .72rem; text-transform: uppercase; padding: 8px; background: #606062; color: #fff; }
.tabela td { padding: 8px; border-top: 1px solid #E6E7E8; vertical-align: top; }
.progresso-topo { display: flex; justify-content: space-between; gap: 8px; align-items: end; margin-bottom: 8px; }

@media (max-width: 980px) {
  .grade-kpis, .grade-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grade-kpis, .opcoes { grid-template-columns: 1fr 1fr; }
  .titulo-pagina { flex-direction: column; }
}