/* =========================================================================
   SRE — Sistema Rota nas Escolas
   Folha de estilo — versão "folha de rota".

   O sistema acompanha uma fila: segunda, quarta, sexta, uma escola por vez.
   O visual vem daí. A estrutura é feita de filetes e espaço em branco, não
   de caixas empilhadas. Papel neutro, tinta escura, números tabulares.
   O azul institucional aparece como sinal — nunca como decoração.

   Todas as classes são as mesmas da versão anterior: trocar este arquivo
   muda a aparência de todas as telas sem alterar uma linha de PHP.
   ========================================================================= */

:root{
  /* ---- Superfícies ---- */
  --papel:        #f6f7f8;   /* fundo geral */
  --superficie:   #ffffff;   /* painéis e tabelas */
  --superficie-2: #fafbfc;   /* faixas internas, cabeçalhos de tabela */

  /* ---- Tinta ---- */
  --tinta:        #131a24;   /* texto principal */
  --tinta-media:  #4c5666;   /* texto de apoio */
  --tinta-fraca:  #78828f;   /* rótulos e metadados */

  /* ---- Filetes ---- */
  --regua:        #e4e7eb;   /* divisor padrão */
  --regua-forte:  #d2d7de;   /* contorno de campos */

  /* ---- Azul institucional ---- */
  --azul:         #14428f;
  --azul-vivo:    #1d5bc0;
  --azul-lavado:  #eef3fb;

  /* ---- Sinais de status ---- */
  --ok:           #0e6b45;   --ok-lavado:     #e9f4ee;
  --alerta:       #8a5a00;   --alerta-lavado: #fdf3e3;
  --erro:         #a32218;   --erro-lavado:   #fdeeed;
  --info:         #1a5b86;   --info-lavado:   #eaf3f9;

  /* ---- Medidas ---- */
  --raio:      10px;
  --raio-sm:   6px;
  --raio-selo: 4px;
  --rail:      232px;   /* largura da barra lateral */
  --topo:      54px;

  /* Uma sombra só no sistema inteiro, e apenas para o que flutua. */
  --sombra-flutuante: 0 20px 48px -24px rgba(19, 26, 36, .38);
}

[data-tema="escuro"]{
  --papel:        #0f1319;
  --superficie:   #161b23;
  --superficie-2: #1a212a;
  --tinta:        #e8ecf2;
  --tinta-media:  #a8b2c0;
  --tinta-fraca:  #7b8695;
  --regua:        #252d38;
  --regua-forte:  #333d4b;
  --azul:         #5b93e8;
  --azul-vivo:    #7aabf0;
  --azul-lavado:  #16233a;
  --ok-lavado:     #10251c;
  --alerta-lavado: #2a2110;
  --erro-lavado:   #2d1614;
  --info-lavado:   #101f2b;
  --sombra-flutuante: 0 20px 48px -24px rgba(0,0,0,.7);
}

/* ---------------------------------------------------------------- base */

*{ box-sizing: border-box }

html{ -webkit-text-size-adjust: 100% }

body{
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  /* Segoe UI é o que roda nas máquinas da secretaria; as demais são queda. */
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               Arial, system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4{ margin: 0; font-weight: 600; line-height: 1.2 }
h1{ font-size: 26px; letter-spacing: -.021em }
h2{ font-size: 16px; letter-spacing: -.011em }
h3{ font-size: 14.5px; letter-spacing: -.006em }

p{ margin: 0 0 10px }

a{ color: var(--azul); text-decoration: none }
a:hover{ text-decoration: underline; text-underline-offset: 2px }

:focus-visible{
  outline: 2px solid var(--azul-vivo);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}

/* ------------------------------------------------------------ estrutura */

.app{ min-height: 100vh }

/* A barra lateral é um trilho claro, separado por um filete.
   O item ativo é marcado por uma barra à esquerda — o marcador da rota. */
.lateral{
  position: fixed; inset: 0 auto 0 0; width: var(--rail);
  background: var(--superficie);
  border-right: 1px solid var(--regua);
  display: flex; flex-direction: column; z-index: 40;
}

.lateral-marca{
  display: flex; gap: 11px; align-items: center;
  padding: 17px 18px 16px;
  border-bottom: 1px solid var(--regua);
}
.lateral-marca .emblema{
  width: 34px; height: 34px; flex: none; border-radius: 8px;
  background: var(--azul); color: #fff;
  display: grid; place-items: center; font-size: 16px;
}
.lateral-marca .orgao{
  font-size: 10.5px; color: var(--tinta-fraca); font-weight: 600; letter-spacing: .04em;
}
.lateral-marca .sigla{
  font-size: 17px; font-weight: 700; color: var(--tinta);
  line-height: 1.1; letter-spacing: -.015em;
}
.lateral-marca .desc{ font-size: 11.5px; color: var(--tinta-fraca); margin-top: 1px }

.menu{ flex: 1; overflow-y: auto; padding: 10px 10px 16px }
.menu a{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; margin-bottom: 1px; border-radius: var(--raio-sm);
  color: var(--tinta-media); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: color .12s, background .12s;
}
.menu a:hover{ background: var(--superficie-2); color: var(--tinta); text-decoration: none }
.menu a.ativo{ color: var(--azul); font-weight: 600; background: var(--azul-lavado) }
.menu a.ativo::before{
  content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--azul);
}
.menu a .ic{
  width: 17px; flex: none; text-align: center; font-size: 14px;
  color: var(--tinta-fraca); transition: color .12s;
}
.menu a.ativo .ic, .menu a:hover .ic{ color: inherit }

.menu .submenu{
  margin: 2px 0 6px 27px; padding-left: 11px;
  border-left: 1px solid var(--regua);
}
.menu .submenu a{ font-size: 13px; padding: 6px 9px }
.menu .submenu a.ativo::before{ display: none }

.lateral-rodape{ padding: 11px; border-top: 1px solid var(--regua) }
.usuario-bloco{
  display: flex; gap: 10px; align-items: center;
  padding: 7px; border-radius: var(--raio-sm); color: var(--tinta);
}
.usuario-bloco:hover{ background: var(--superficie-2); text-decoration: none }
.avatar{
  width: 31px; height: 31px; flex: none; border-radius: 50%;
  background: var(--azul-lavado); color: var(--azul);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
.usuario-bloco .nome{
  font-size: 13px; font-weight: 600; color: var(--tinta);
  display: block; max-width: 128px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usuario-bloco .papel{ font-size: 11px; color: var(--tinta-fraca) }

.conteudo{ margin-left: var(--rail); min-height: 100vh }

.barra-topo{
  position: sticky; top: 0; z-index: 30; height: var(--topo);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--regua);
}
.barra-topo .titulo-movel{ font-weight: 600; font-size: 14.5px; flex: 1 }
.botao-menu{ display: none }

.pagina{ padding: 26px 24px 56px; max-width: 1320px; width: 100%; margin: 0 auto }

@media (max-width: 960px){
  .lateral{ transform: translateX(-100%); transition: transform .18s ease }
  .lateral.aberta{ transform: none; box-shadow: var(--sombra-flutuante) }
  .conteudo{ margin-left: 0 }
  .botao-menu{ display: inline-flex }
  .pagina{ padding: 18px 14px 44px }
  .cortina{ position: fixed; inset: 0; background: rgba(15,19,25,.5); z-index: 35 }
}

/* ------------------------------------------------------------ cabeçalho */

.cabecalho-pagina{
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 22px;
  border-bottom: 1px solid var(--regua);
}
.cabecalho-pagina .sub{
  color: var(--tinta-fraca); font-size: 13.5px; margin-top: 5px;
  max-width: 74ch;
}
.acoes-cabecalho{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center }

/* -------------------------------------------------------------- painéis */

.cartao{
  background: var(--superficie);
  border: 1px solid var(--regua);
  border-radius: var(--raio);
}
.cartao-corpo{ padding: 18px }
.cartao-cabeca{
  padding: 14px 18px;
  border-bottom: 1px solid var(--regua);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cartao-cabeca h2, .cartao-cabeca h3{ font-size: 14.5px }
.cartao-cabeca .sub{ font-size: 12.5px; color: var(--tinta-fraca); margin-top: 3px }

.grade{ display: grid; gap: 16px }
.grade-2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.grade-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.grade-4{ grid-template-columns: repeat(4, minmax(0,1fr)) }

@media (max-width: 1100px){ .grade-4{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 760px){
  .grade-2, .grade-3, .grade-4{ grid-template-columns: 1fr }
  .grade[style]{ grid-template-columns: 1fr !important }
}

/* ---- Faixa de indicadores ------------------------------------------- */
/* Os quatro números viram uma régua contínua, não quatro cartões soltos.
   É o único gesto forte da interface; o resto fica quieto.               */

.grade-4{
  gap: 0;
  background: var(--superficie);
  border: 1px solid var(--regua);
  border-radius: var(--raio);
  overflow: hidden;
}

.indicador{
  background: transparent; border: 0; border-radius: 0;
  padding: 18px 20px 20px;
  display: block;
}
.grade-4 .indicador + .indicador{ border-left: 1px solid var(--regua) }

@media (max-width: 1100px){
  .grade-4 .indicador:nth-child(odd){ border-left: 0 }
  .grade-4 .indicador:nth-child(n+3){ border-top: 1px solid var(--regua) }
}
@media (max-width: 760px){
  .grade-4 .indicador{ border-left: 0 !important }
  .grade-4 .indicador + .indicador{ border-top: 1px solid var(--regua) }
}

/* Número primeiro, rótulo depois: a leitura vai ao dado, não à etiqueta. */
.indicador > div{ display: flex; flex-direction: column }
.indicador .valor{
  font-size: 32px; font-weight: 600; line-height: 1;
  letter-spacing: -.028em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
  order: 1;
}
.indicador .rotulo{
  order: 2;
  font-size: 13px; font-weight: 400; color: var(--tinta-media);
  letter-spacing: 0; text-transform: none;
  margin-top: 9px;
}
.indicador .nota{ order: 3; font-size: 12.5px; color: var(--tinta-fraca); margin-top: 4px }

/* Os quadradinhos coloridos de ícone saem: eram decoração, não informação. */
.indicador .icone{ display: none }

/* ------------------------------------------------------------- tabelas */
/* A tabela é a peça principal do sistema. Linhas altas, filetes finos,
   nenhum preenchimento alternado.                                        */

.tabela-caixa{ overflow-x: auto; -webkit-overflow-scrolling: touch }

table.tabela{ width: 100%; border-collapse: collapse; font-size: 14px }

table.tabela th{
  text-align: left; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--tinta-fraca);
  letter-spacing: 0; text-transform: none;
  padding: 11px 14px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--regua);
}
table.tabela td{
  padding: 13px 14px;
  border-bottom: 1px solid var(--regua);
  vertical-align: middle;
}
table.tabela tbody tr:last-child td{ border-bottom: 0 }
table.tabela tbody tr:hover{ background: var(--superficie-2) }
table.tabela th a{ color: inherit; display: inline-flex; gap: 4px; align-items: center }

.col-acoes{ text-align: right; white-space: nowrap; width: 1% }
.num{ font-variant-numeric: tabular-nums; text-align: right }
.principal{ font-weight: 600; color: var(--tinta) }
.secundario{ font-size: 12.5px; color: var(--tinta-fraca); margin-top: 3px }
.mono{
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: 13px; color: var(--tinta-media);
}

/* --------------------------------------------------------------- selos */
/* Chapados, cantos discretos, sem contorno. Cor só onde carrega sentido. */

.selo{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--raio-selo);
  font-size: 12px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; border: 0;
}
.selo-ok    { background: var(--ok-lavado);     color: var(--ok) }
.selo-info  { background: var(--info-lavado);   color: var(--info) }
.selo-alerta{ background: var(--alerta-lavado); color: var(--alerta) }
.selo-erro  { background: var(--erro-lavado);   color: var(--erro) }
.selo-azul  { background: var(--azul-lavado);   color: var(--azul) }
.selo-neutro{ background: var(--superficie-2);  color: var(--tinta-fraca);
              box-shadow: inset 0 0 0 1px var(--regua) }

a.selo:hover{ text-decoration: none; filter: brightness(.97) }

/* -------------------------------------------------------------- botões */

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--raio-sm);
  border: 1px solid var(--azul); background: var(--azul); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover{ background: #0f3576; border-color: #0f3576; color: #fff; text-decoration: none }
.btn:disabled{ opacity: .5; cursor: not-allowed }

.btn-secundario{
  background: var(--superficie); color: var(--tinta); border-color: var(--regua-forte);
}
.btn-secundario:hover{ background: var(--superficie-2); color: var(--tinta); border-color: var(--tinta-fraca) }

.btn-perigo{ background: var(--erro); border-color: var(--erro) }
.btn-perigo:hover{ background: #86180f; border-color: #86180f }

.btn-pequeno{ padding: 5px 10px; font-size: 12.5px }
.btn-bloco{ width: 100% }

.btn-icone{
  padding: 5px 8px; background: transparent; color: var(--tinta-fraca);
  border-color: transparent; font-size: 14px;
}
.btn-icone:hover{ background: var(--azul-lavado); color: var(--azul); border-color: transparent }
.btn-icone.perigo:hover{ background: var(--erro-lavado); color: var(--erro) }

/* ---------------------------------------------------------- formulários */

.campo{ margin-bottom: 15px }
.campo label, .rotulo{
  display: block; font-size: 13px; font-weight: 500;
  color: var(--tinta-media); margin-bottom: 6px;
}
.campo .ajuda{ font-size: 12.5px; color: var(--tinta-fraca); margin-top: 6px; max-width: 62ch }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], input[type=tel],
input[type=file], select, textarea{
  width: 100%; padding: 8px 11px;
  font: inherit; font-size: 14px; color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--regua-forte); border-radius: var(--raio-sm);
  transition: border-color .12s;
}
input:hover, select:hover, textarea:hover{ border-color: var(--tinta-fraca) }
input:focus, select:focus, textarea:focus{
  outline: 2px solid var(--azul-vivo); outline-offset: -1px;
  border-color: var(--azul);
}
input:disabled, select:disabled, textarea:disabled{
  background: var(--superficie-2); color: var(--tinta-fraca); cursor: not-allowed;
}
::placeholder{ color: var(--tinta-fraca); opacity: 1 }

textarea{ min-height: 92px; resize: vertical; line-height: 1.55 }

select{
  appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2378828f' d='M6 8 2.5 4.5h7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}

.linha{ display: grid; gap: 0 16px; grid-template-columns: repeat(2, minmax(0,1fr)) }
.linha-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.linha .largo{ grid-column: 1 / -1 }
@media (max-width: 700px){ .linha, .linha-3{ grid-template-columns: 1fr } }

/* Agrupamento por filete superior, não por caixa dentro de caixa. */
.grupo-caixa{
  border: 0; border-top: 1px solid var(--regua);
  border-radius: 0; background: transparent;
  padding: 16px 0 4px; margin: 4px 0 14px;
}
.grupo-caixa > .titulo{
  font-size: 13px; font-weight: 600; color: var(--tinta); margin-bottom: 12px;
}

.check{
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 400; color: var(--tinta);
  cursor: pointer; padding: 5px 0;
}
.check input{ width: 15px; height: 15px; accent-color: var(--azul); cursor: pointer; flex: none }

.barra-filtros{
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 18px;
}
.barra-filtros input[type=search], .barra-filtros input[type=text]{ width: 280px }
.barra-filtros input[type=date]{ width: auto }
.barra-filtros select{ width: auto; min-width: 152px }
.barra-filtros .check{ padding: 0 4px }
@media (max-width: 700px){
  .barra-filtros{ flex-direction: column; align-items: stretch }
  .barra-filtros input, .barra-filtros select{ width: 100% }
}

/* -------------------------------------------------------------- avisos */

.aviso{
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 15px; margin-bottom: 14px;
  border: 1px solid var(--regua); border-radius: var(--raio-sm);
  background: var(--superficie); font-size: 13.5px; color: var(--tinta);
}
.aviso strong{ display: block; margin-bottom: 2px; font-weight: 600 }
.aviso .ic{ font-size: 14px; line-height: 1.45; flex: none }

.aviso-ok    { background: var(--ok-lavado);     border-color: transparent; color: var(--ok) }
.aviso-erro  { background: var(--erro-lavado);   border-color: transparent; color: var(--erro) }
.aviso-alerta{ background: var(--alerta-lavado); border-color: transparent; color: var(--alerta) }
.aviso-info  { background: var(--azul-lavado);   border-color: transparent; color: var(--azul) }

/* Alertas da agenda: filete à esquerda, como marca de linha na folha. */
.destaque-agenda{
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  padding: 15px 18px; margin-bottom: 10px;
  background: var(--superficie);
  border: 1px solid var(--regua);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio-sm);
}
.destaque-agenda strong{ font-weight: 600 }
.destaque-agenda .pequeno{ margin-top: 3px }
.destaque-agenda.urgente{ border-left-color: var(--erro) }

/* --------------------------------------------------------------- vazio */

.vazio{
  text-align: center; padding: 46px 24px;
  color: var(--tinta-fraca);
  border: 0; border-radius: 0; background: transparent;
}
.vazio .ic{ font-size: 22px; opacity: .35; display: block; margin-bottom: 12px }
.vazio .titulo{
  font-weight: 600; color: var(--tinta); font-size: 15px; margin-bottom: 6px;
  letter-spacing: -.008em;
}
.vazio p{ font-size: 13.5px; max-width: 46ch; margin: 0 auto; line-height: 1.6 }

/* -------------------------------------------------------------- barras */

.barra-progresso{
  height: 4px; border-radius: 99px; background: var(--regua); overflow: hidden;
}
.barra-progresso > i{ display: block; height: 100%; border-radius: 99px; background: var(--azul) }
.barra-progresso > i.ok    { background: var(--ok) }
.barra-progresso > i.alerta{ background: var(--alerta) }
.barra-progresso > i.info  { background: var(--info) }

.lista-setores{ list-style: none; margin: 0; padding: 0 }
.lista-setores li{ padding: 11px 0; border-bottom: 1px solid var(--regua) }
.lista-setores li:first-child{ padding-top: 2px }
.lista-setores li:last-child{ border-bottom: 0; padding-bottom: 2px }
.lista-setores .topo{
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13.5px; margin-bottom: 7px;
}

/* -------------------------------------------------------------- modais */

dialog.modal{
  border: 0; border-radius: 12px; padding: 0;
  width: min(700px, 94vw);
  background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-flutuante);
}
dialog.modal::backdrop{ background: rgba(15, 19, 25, .42) }
dialog.modal .modal-cabeca{
  padding: 18px 22px 15px; border-bottom: 1px solid var(--regua);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
dialog.modal .modal-cabeca .sub{ font-size: 12.5px; color: var(--tinta-fraca); margin-top: 4px }
dialog.modal .modal-corpo{ padding: 20px 22px; max-height: min(66vh, 620px); overflow-y: auto }
dialog.modal .modal-rodape{
  padding: 14px 22px; border-top: 1px solid var(--regua);
  background: var(--superficie-2);
  display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap;
  border-radius: 0 0 12px 12px;
}
dialog.modal.estreito{ width: min(460px, 94vw) }

/* ----------------------------------------------------------- paginação */

.paginacao{
  display: flex; gap: 8px; align-items: center; justify-content: center;
  margin-top: 18px; flex-wrap: wrap;
}
.paginacao a, .paginacao span{
  padding: 6px 12px; border-radius: var(--raio-sm); font-size: 13.5px;
  border: 1px solid var(--regua-forte); color: var(--tinta);
  background: var(--superficie);
}
.paginacao a:hover{ background: var(--superficie-2); text-decoration: none }
.paginacao .atual{ background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 600 }
.paginacao .info{ border: 0; background: transparent; color: var(--tinta-fraca) }

/* ----------------------------------------------------------------- abas */

.abas{
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--regua); margin-bottom: 22px;
}
.abas a{
  padding: 9px 13px; font-size: 13.5px; font-weight: 500;
  color: var(--tinta-fraca);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas a:hover{ color: var(--tinta); text-decoration: none }
.abas a.ativa{ color: var(--azul); border-bottom-color: var(--azul); font-weight: 600 }

/* ------------------------------------------------------- busca de escola */

.busca-escola{ position: relative }
.busca-escola .resultados{
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--superficie);
  border: 1px solid var(--regua-forte); border-radius: var(--raio-sm);
  box-shadow: var(--sombra-flutuante);
  max-height: 264px; overflow-y: auto; display: none;
}
.busca-escola .resultados.visivel{ display: block }
.busca-escola .resultados button{
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--tinta); cursor: pointer;
  border-bottom: 1px solid var(--regua);
}
.busca-escola .resultados button:last-child{ border-bottom: 0 }
.busca-escola .resultados button:hover,
.busca-escola .resultados button.marcado{ background: var(--azul-lavado) }
.busca-escola .resultados .nada{ padding: 13px; font-size: 13px; color: var(--tinta-fraca) }

/* -------------------------------------------------------------- gráfico */

.barras{ display: flex; align-items: flex-end; gap: 10px; height: 148px; padding-top: 8px }
.barras .col{
  flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 7px; height: 100%;
}
.barras .col i{
  display: block; width: 100%; min-height: 2px;
  background: var(--azul-lavado);
  border-top: 2px solid var(--azul);
  border-radius: 2px 2px 0 0;
}
.barras .col strong{ font-size: 12px; color: var(--tinta-media); font-weight: 500 }
.barras .col span{ font-size: 11.5px; color: var(--tinta-fraca); white-space: nowrap }

.grafico-linha{ width: 100%; height: auto; display: block }
.grafico-linha .area{ fill: var(--azul); opacity: .07 }
.grafico-linha .traco{ fill: none; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round }
.grafico-linha .ponto{ fill: var(--azul) }
.grafico-linha .eixo{ stroke: var(--regua); stroke-width: 1 }
.grafico-linha text{ fill: var(--tinta-fraca); font-size: 11px }

/* --------------------------------------------------------- tela de login */

.tela-entrada{ min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr }

.entrada-visual{
  background: var(--azul);
  color: #fff; padding: 56px 52px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
/* A marca d'água é a própria rota: traços paralelos, como a agenda fixa. */
.entrada-visual::after{
  content: ""; position: absolute; right: -80px; bottom: -60px;
  width: 340px; height: 340px;
  background:
    linear-gradient(to right, rgba(255,255,255,.09) 3px, transparent 3px) 0 0 / 84px 100%;
  transform: rotate(-14deg);
  pointer-events: none;
}
.entrada-visual h1{ font-size: 34px; line-height: 1.12; max-width: 14ch; letter-spacing: -.026em }
.entrada-visual p{ opacity: .82; max-width: 44ch; margin-top: 16px; font-size: 15px; line-height: 1.6 }
.entrada-visual .emblema-grande{
  width: 46px; height: 46px; border-radius: 11px;
  background: rgba(255,255,255,.16);
  display: grid; place-items: center; font-size: 22px; margin-bottom: 28px;
}
.entrada-visual .rodape{ font-size: 12.5px; opacity: .7; position: relative }

.entrada-form{
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; background: var(--superficie);
}
.entrada-form .caixa{ width: min(380px, 100%) }
.entrada-form h2{ font-size: 20px; letter-spacing: -.018em }

@media (max-width: 900px){
  .tela-entrada{ grid-template-columns: 1fr }
  .entrada-visual{ padding: 32px 24px; min-height: auto }
  .entrada-visual h1{ font-size: 25px }
  .entrada-visual .rodape, .entrada-visual::after{ display: none }
}

.alternar-tema{
  background: transparent; border: 1px solid var(--regua-forte);
  color: var(--tinta-fraca); border-radius: var(--raio-sm);
  padding: 5px 9px; cursor: pointer; font-size: 13px; line-height: 1.4;
}
.alternar-tema:hover{ background: var(--superficie); color: var(--tinta) }

/* ------------------------------------------------------------ impressão */

@media print{
  .lateral, .barra-topo, .acoes-cabecalho, .barra-filtros,
  .paginacao, .nao-imprime, .abas{ display: none !important }
  .conteudo{ margin-left: 0 }
  body{ background: #fff; font-size: 11pt }
  .cartao, .grade-4{ border-color: #ccc; break-inside: avoid }
  .pagina{ padding: 0; max-width: none }
  a{ color: inherit; text-decoration: none }
  table.tabela th{ background: transparent }
}

/* ---------------------------------------------------------- utilitários */

.flex{ display: flex; gap: 10px; align-items: center }
.flex-entre{ display: flex; gap: 10px; align-items: center; justify-content: space-between }
.flex-fim{ display: flex; gap: 8px; align-items: center; justify-content: flex-end }
.envolve{ flex-wrap: wrap }

.fraco{ color: var(--tinta-fraca) }
.pequeno{ font-size: 12.5px }
.negrito{ font-weight: 600 }
.centro{ text-align: center }

.mt-0{ margin-top: 0 }    .mt-1{ margin-top: 8px }
.mt-2{ margin-top: 16px } .mt-3{ margin-top: 26px }
.mb-0{ margin-bottom: 0 }    .mb-1{ margin-bottom: 8px }
.mb-2{ margin-bottom: 16px } .mb-3{ margin-bottom: 26px }

.oculto{ display: none !important }
.somente-leitor{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

code{
  background: var(--superficie-2); border: 1px solid var(--regua);
  padding: 1px 5px; border-radius: 4px; font-size: 12.5px;
  font-family: ui-monospace, Consolas, Menlo, monospace;
}