/* =============================================================================
   TURUNA · Secretaria — base.css
   Padrão máscara: NENHUMA cor de marca cravada aqui dentro; o tema vem das
   variáveis abaixo (escola veste com um CSS-tema, como em 07_MASCARAS).
   Minimalista · responsivo · zero dependências.
   ========================================================================== */

:root {
  /* TEMA _MODELO (escola de demonstração) — um CSS-tema por escola sobrescreve */
  --cor-primaria: #1565C0;
  --cor-marinho: #0A2540;
  --cor-primaria-suave: #E8F0FA;
  --fundo: #F6F8FA;
  --superficie: #FFFFFF;
  --texto: #1A2430;
  --texto-suave: #5A6B7B;
  --borda: #D9E0E7;
  /* estados — sempre cor + texto/ícone, nunca só cor (ETAPA 1, UX);
     tons ajustados na ETAPA 7 para contraste AA ≥ 4.5 sobre o -suave */
  --verde: #177145;  --verde-suave: #E5F4EC;
  --amarelo: #8A6100; --amarelo-suave: #FCF3DC;
  --vermelho: #B3261E; --vermelho-suave: #FBE9E7;
  --azul: #1565C0;   --azul-suave: #E8F0FA;
  --cinza: #616A76;  --cinza-suave: #EFF1F3;
  --raio: 8px;
  --sombra: 0 1px 3px rgba(10, 37, 64, .08);
  --header-h: 56px;
  --menu-w: 224px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  background: var(--fundo); color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--texto); }

/* foco visível (acessibilidade) */
:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ----------------------------------------------------------- estrutura ---- */
.app { display: flex; min-height: 100vh; }
.menu {
  width: var(--menu-w); background: var(--cor-marinho); color: #FFF;
  position: fixed; inset: 0 auto 0 0; padding: 12px 8px; overflow-y: auto;
  display: flex; flex-direction: column; z-index: 30;
}
.menu .marca {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 10px;
}
.menu .marca .brasao {
  width: 34px; height: 34px; border-radius: 50%; background: var(--cor-primaria);
  display: grid; place-items: center; font-weight: 700; color: #FFF; flex: none;
}
.menu .marca strong { font-size: .95rem; line-height: 1.2; display: block; }
.menu .marca small { color: rgba(255,255,255,.65); font-size: .72rem; }
.menu .grupo { color: rgba(255,255,255,.5); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; padding: 12px 12px 4px; }
.menu a {
  display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85);
  padding: 9px 12px; border-radius: var(--raio); font-size: .9rem;
}
.menu a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.menu a.ativa { background: var(--cor-primaria); color: #FFF; font-weight: 600; }
.menu a .ico { width: 18px; text-align: center; flex: none; }

.conteudo { flex: 1; margin-left: var(--menu-w); display: flex; flex-direction: column; min-width: 0; }

.topo {
  height: var(--header-h); background: var(--superficie); border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  position: sticky; top: 0; z-index: 20;
}
.topo .escola { font-weight: 600; white-space: nowrap; }
.topo .escola small { display: block; color: var(--texto-suave); font-weight: 400; font-size: .72rem; }
.topo select { padding: 5px 8px; border: 1px solid var(--borda); border-radius: var(--raio); background: #FFF; }
.topo .busca {
  flex: 1; max-width: 380px; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 6px 10px; background: var(--fundo);
}
.topo .busca input { border: 0; background: transparent; flex: 1; outline: none; }
.topo .sino { position: relative; border: 1px solid var(--borda); background: #FFF;
  border-radius: var(--raio); padding: 6px 10px; }
.topo .sino .n { position: absolute; top: -6px; right: -6px; background: var(--vermelho);
  color: #FFF; font-size: .68rem; border-radius: 10px; padding: 1px 6px; font-weight: 700; }
.topo .usuario { display: flex; align-items: center; gap: 8px; font-size: .85rem; white-space: nowrap; }
.topo .usuario .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--cor-marinho);
  color: #FFF; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }

.principal { padding: 20px; max-width: 1280px; width: 100%; margin: 0 auto; }
.principal h1 { font-size: 1.25rem; margin-bottom: 4px; }
.principal .sub { color: var(--texto-suave); font-size: .85rem; margin-bottom: 18px; }

/* ------------------------------------------------------------- cartões ---- */
.grade { display: grid; gap: 12px; }
.grade.indicadores { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px; box-shadow: var(--sombra);
}
.cartao.clicavel { cursor: pointer; text-align: left; width: 100%; background: var(--superficie); }
.cartao.clicavel:hover { border-color: var(--cor-primaria); }
.cartao .numero { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.cartao .rotulo { font-size: .82rem; color: var(--texto-suave); margin-top: 2px; }
.cartao .dica { font-size: .72rem; margin-top: 6px; color: var(--cor-primaria); }
.cartao.alerta { border-left: 4px solid var(--vermelho); }
.cartao.atencao { border-left: 4px solid var(--amarelo); }
.cartao.ok { border-left: 4px solid var(--verde); }

.painel { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 16px; }
.painel > .cab { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.painel > .cab h2 { font-size: 1rem; }
.painel > .corpo { padding: 14px 16px; }
.painel > .corpo.sem-pad { padding: 0; }

/* -------------------------------------------------------------- botões ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borda);
  background: #FFF; color: var(--texto); border-radius: var(--raio); padding: 8px 14px;
  font-size: .87rem; min-height: 38px;
}
.btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); text-decoration: none; }
.btn.primario { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #FFF; }
.btn.primario:hover { filter: brightness(1.08); color: #FFF; }
.btn.perigo { color: var(--vermelho); border-color: var(--vermelho); }
.btn.perigo:hover { background: var(--vermelho-suave); }
.btn.pequeno { padding: 5px 10px; min-height: 32px; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.icone { padding: 8px 10px; }

/* -------------------------------------------------------------- badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600;
  border-radius: 12px; padding: 2px 10px; white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.verde { background: var(--verde-suave); color: var(--verde); }
.badge.amarelo { background: var(--amarelo-suave); color: var(--amarelo); }
.badge.vermelho { background: var(--vermelho-suave); color: var(--vermelho); }
.badge.azul { background: var(--azul-suave); color: var(--azul); }
.badge.cinza { background: var(--cinza-suave); color: var(--cinza); }

/* -------------------------------------------------------------- tabela ---- */
.tabela-inv { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tabela th {
  text-align: left; padding: 10px 12px; color: var(--texto-suave); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--borda);
  background: var(--fundo); cursor: pointer; user-select: none; white-space: nowrap;
}
.tabela th:hover { color: var(--cor-primaria); }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.clicavel:hover { background: var(--cor-primaria-suave); }
.tabela .acoes { white-space: nowrap; text-align: right; }
.paginacao { display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 10px 16px; font-size: .82rem; color: var(--texto-suave); }

/* -------------------------------------------------------------- filtros ---- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filtros .campo { display: flex; flex-direction: column; gap: 4px; }
.filtros label { font-size: .72rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; }
.filtros input, .filtros select {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 10px; background: #FFF;
  min-height: 38px; min-width: 140px;
}

/* --------------------------------------------------------------- modal ---- */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(10, 37, 64, .45); z-index: 50;
  display: grid; place-items: center; padding: 16px;
}
.modal {
  background: #FFF; border-radius: 12px; width: 100%; max-width: 640px;
  max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.modal.grande { max-width: 900px; }
.modal > .cab { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--borda); }
.modal > .cab h3 { font-size: 1.05rem; }
.modal > .corpo { padding: 16px 18px; overflow-y: auto; }
.modal > .rodape { display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--borda); flex-wrap: wrap; }
.fechar-x { border: 0; background: none; font-size: 1.2rem; color: var(--texto-suave); }

/* ---------------------------------------------------------------- abas ---- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; flex-wrap: wrap; }
.abas button {
  border: 0; background: none; padding: 9px 14px; font-size: .87rem; color: var(--texto-suave);
  border-bottom: 2px solid transparent;
}
.abas button.ativa { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); font-weight: 600; }

/* --------------------------------------------------------------- forms ---- */
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grade .cheio { grid-column: 1 / -1; }
.form-grade label { display: flex; flex-direction: column; gap: 5px; font-size: .8rem;
  color: var(--texto-suave); font-weight: 600; }
.form-grade input, .form-grade select, .form-grade textarea {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 9px 10px;
  font-weight: 400; color: var(--texto); background: #FFF;
}
.form-grade .erro-campo { color: var(--vermelho); font-size: .75rem; font-weight: 400; }

/* --------------------------------------------------------------- wizard ---- */
.wizard-passos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.wizard-passos span {
  font-size: .72rem; padding: 4px 10px; border-radius: 12px; background: var(--cinza-suave);
  color: var(--cinza); font-weight: 600;
}
.wizard-passos span.feito { background: var(--verde-suave); color: var(--verde); }
.wizard-passos span.atual { background: var(--cor-primaria); color: #FFF; }
.barra-progresso { height: 8px; background: var(--cinza-suave); border-radius: 4px; overflow: hidden; margin-bottom: 16px; }
.barra-progresso > div { height: 100%; background: var(--cor-primaria); transition: width .3s; }

/* -------------------------------------------------------------- diversos ---- */
.aviso {
  border: 1px solid var(--borda); border-left: 4px solid var(--azul); background: var(--azul-suave);
  padding: 10px 14px; border-radius: var(--raio); font-size: .85rem; margin-bottom: 12px;
}
.aviso.atencao { border-left-color: var(--amarelo); background: var(--amarelo-suave); }
.aviso.erro { border-left-color: var(--vermelho); background: var(--vermelho-suave); }
.vazio { text-align: center; color: var(--texto-suave); padding: 40px 16px; font-size: .9rem; }
.vazio strong { display: block; font-size: 1rem; color: var(--texto); margin-bottom: 6px; }
.foto, .foto-ph {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--cor-primaria-suave); color: var(--cor-primaria);
  display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem;
}
.linha-pessoa { display: flex; align-items: center; gap: 10px; }
.toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 60; background: var(--cor-marinho);
  color: #FFF; padding: 12px 18px; border-radius: var(--raio); font-size: .87rem;
  box-shadow: var(--sombra); max-width: 360px;
}
.toast.ok { background: var(--verde); }
.toast.erro { background: var(--vermelho); }
.grade-carometro { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card-aluno { text-align: center; }
.card-aluno .foto-g { width: 100%; aspect-ratio: 3/4; border-radius: var(--raio);
  display: grid; place-items: center; font-size: 1.6rem; font-weight: 700;
  background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.card-aluno.sem-foto .foto-g { background: var(--cinza-suave); color: var(--cinza); }
.card-aluno .nome { font-size: .8rem; font-weight: 600; margin-top: 6px; }
.card-aluno .detalhe { font-size: .72rem; color: var(--texto-suave); }
.card-aluno.tam-p .foto-g { aspect-ratio: 1; font-size: 1.1rem; }
.card-aluno.tam-g .foto-g { font-size: 2.2rem; }

/* ---------------------------------------------------------- responsivo ---- */
/* ETAPA 7: faixa intermediária — entre 721px e 1024px o menu lateral segue,
   mas o topo precisa quebrar linha (senão escola+busca+sino+usuário somam
   ~970px e a página rola na horizontal — achado do teste de tablet 768px) */
@media (max-width: 1024px) {
  .topo { flex-wrap: wrap; height: auto; padding: 8px 10px; gap: 8px; }
  .topo .busca { order: 3; max-width: none; width: 100%; }
}

@media (max-width: 720px) {
  .menu {
    inset: auto 0 0 0; width: 100%; height: 60px; flex-direction: row;
    padding: 0 4px; align-items: center; overflow-x: auto; overflow-y: hidden;
  }
  .menu .marca, .menu .grupo { display: none; }
  .menu a { flex-direction: column; gap: 2px; font-size: .62rem; padding: 6px 8px; }
  .menu a .ico { font-size: 1rem; }
  .conteudo { margin-left: 0; margin-bottom: 60px; }
  .topo { flex-wrap: wrap; height: auto; padding: 8px 10px; gap: 8px; }
  .topo .busca { order: 3; max-width: none; width: 100%; }
  .principal { padding: 14px 10px; }
  .form-grade { grid-template-columns: 1fr; }
  /* tabela vira cartões empilhados */
  table.tabela thead { display: none; }
  table.tabela, table.tabela tbody, table.tabela tr, table.tabela td { display: block; width: 100%; }
  table.tabela tr { border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 10px; padding: 6px; }
  table.tabela td { border: 0; padding: 5px 8px; }
  table.tabela td::before { content: attr(data-label); display: block; font-size: .68rem;
    color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
  table.tabela td[data-label=""]::before { display: none; }
  .tabela .acoes { text-align: left; }
}

/* -------------------------------------------------------------- impressão ---- */
@media print {
  .menu, .topo, .filtros, .btn, .paginacao, .nao-imprime { display: none !important; }
  .conteudo { margin: 0; }
  .principal { padding: 0; max-width: none; }
  .painel, .cartao { box-shadow: none; }
  body { background: #FFF; }
}

/* ==================== ETAPA 6 — carregamento global (api.js) ============== */
#carregando {
  position: fixed; inset: 0; z-index: 999;
  display: none; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55);
}
#carregando.ativo { display: flex; }
#carregando .spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #d8d3c8; border-top-color: #3d6b4f;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }