:root {
  /* Cores do site da escola: azul dos botões, cinza escuro dos textos e o verde do uniforme */
  --azul: #0066cc;
  --azul-esc: #004f9e;
  --azul-claro: #e6f0fa;
  --lateral: #262b30;
  --uniforme: #1f7a45;
  --verde: #2e7d4f;
  --verde-claro: #e6f4ec;
  --vermelho: #b3372e;
  --vermelho-claro: #fbeae8;
  --amarelo: #a86b00;
  --amarelo-claro: #fdf3dd;
  --texto: #333333;
  --suave: #5f6b7a;
  --borda: #dfe4ea;
  --fundo: #f4f6f9;
  --branco: #fff;
  --raio: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo); color: var(--texto); font-size: 15px; line-height: 1.45;
}
a { color: var(--azul); }
h1 { font-size: 1.45rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 0 0 10px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Layout ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: 250px; background: var(--lateral); color: #fff;
  display: flex; flex-direction: column; z-index: 30; transition: transform .2s;
}
.marca { display: flex; gap: 10px; align-items: center; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.marca-ico { width: 34px; height: 34px; stroke: #6fcf97; }
.marca-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; flex-shrink: 0; }
.marca .mantenedora { display: block; color: #9aa6b2; font-size: .72rem; margin-top: 2px; }
.marca strong { display: block; font-size: .92rem; line-height: 1.25; }
.marca small { color: #b7c0c9; font-size: .78rem; }
.lateral nav { flex: 1; overflow-y: auto; padding: 10px 8px; }
.lateral nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  color: #dde3e8; text-decoration: none; font-size: .93rem; margin-bottom: 2px;
}
.lateral nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.lateral nav a.ativo { background: #fff; color: var(--azul); font-weight: 600; box-shadow: inset 4px 0 0 var(--uniforme); }
.usuario-box { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.12); }
.usuario-box strong { display: block; font-size: .88rem; }
.usuario-box small { color: #b7c0c9; font-size: .78rem; }
.conteudo { margin-left: 250px; padding: 26px 30px 60px; max-width: 1250px; }
.conteudo-solto { padding: 20px; }
.topo { display: none; }
.sombra { display: none; }

@media (max-width: 900px) {
  .lateral { transform: translateX(-100%); }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .sombra { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 20; }
  .topo {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; z-index: 10;
    background: #fff; color: #000; padding: 12px 16px; border-bottom: 1px solid var(--borda);
  }
  .topo-nome { font-weight: 700; font-size: 1rem; order: -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-btn { background: none; border: 0; color: #333; padding: 4px; cursor: pointer; }
  .menu-btn svg { width: 26px; height: 26px; }
  .conteudo { margin-left: 0; padding: 16px 16px 50px; }
}

/* ---------- Componentes ---------- */
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecalho p { margin: 0; color: var(--suave); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.card { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; margin-bottom: 18px; }
.card-tabela { padding: 0; overflow: hidden; }
.card-tabela .card-topo { padding: 14px 18px; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-tabela .card-topo h2 { margin: 0; }

.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(--borda); border-radius: var(--raio); padding: 16px; }
.indicador small { color: var(--suave); font-size: .82rem; display: block; }
.indicador strong { font-size: 1.5rem; display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.indicador .det { font-size: .8rem; color: var(--suave); }
.ind-verde strong { color: var(--verde); }
.ind-vermelho strong { color: var(--vermelho); }
.ind-azul strong { color: var(--azul); }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .grade-2 { grid-template-columns: 1fr; } }

/* Botões */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  background: var(--azul); color: #fff; border: 1px solid var(--azul); border-radius: 8px;
  padding: 9px 15px; font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit;
}
.btn:hover { background: var(--azul-esc); }
.btn svg { width: 17px; height: 17px; }
.btn-sm { padding: 5px 10px; font-size: .82rem; }
.btn-claro { background: #fff; color: var(--azul); border-color: var(--borda); }
.btn-claro:hover { background: var(--azul-claro); }
.btn-verde { background: var(--verde); border-color: var(--verde); }
.btn-verde:hover { background: #24653f; }
.btn-perigo { background: #fff; color: var(--vermelho); border-color: #efc8c4; }
.btn-perigo:hover { background: var(--vermelho-claro); }
.lateral .btn-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }

/* Formulários */
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-largo { grid-column: 1 / -1; }
label { font-size: .84rem; font-weight: 600; color: #3b4756; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #cdd5de; border-radius: 8px;
  font: inherit; background: #fff; color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #9cc3e3; border-color: var(--azul); }
textarea { min-height: 80px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check input { width: auto; }
.form-acoes { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { min-width: 150px; flex: 1; }
.filtros .campo-btn { flex: 0; }

/* Tabelas */
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th { background: #f8fafc; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); font-weight: 700; white-space: nowrap; }
tbody tr:hover { background: #fafcfe; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.centro, th.centro { text-align: center; }
td .acoes { flex-wrap: nowrap; }
tfoot td { font-weight: 700; background: #f8fafc; }
.vazio { padding: 30px; text-align: center; color: var(--suave); }

.selo { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.selo-verde { background: var(--verde-claro); color: var(--verde); }
.selo-vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.selo-amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.selo-azul { background: var(--azul-claro); color: var(--azul); }
.selo-cinza { background: #eef0f3; color: var(--suave); }
.txt-verde { color: var(--verde); }
.txt-vermelho { color: var(--vermelho); }
.txt-suave { color: var(--suave); }

.aviso { padding: 11px 15px; border-radius: 8px; margin-bottom: 14px; font-weight: 500; }
.aviso-ok { background: var(--verde-claro); color: #1f5c39; border: 1px solid #bfe2cc; }
.aviso-erro { background: var(--vermelho-claro); color: #8c2a23; border: 1px solid #efc8c4; }
.aviso-info { background: var(--azul-claro); color: var(--azul-esc); border: 1px solid #c7dcec; }

/* Notas e chamada */
.input-nota { width: 72px; text-align: center; padding: 6px; }
.chamada-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.chamada-linha:last-child { border-bottom: 0; }
.alterna { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.alterna input { display: none; }
.alterna label { padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--suave); margin: 0; }
.alterna input[value="1"]:checked + label { background: var(--verde); color: #fff; }
.alterna input[value="0"]:checked + label { background: var(--vermelho); color: #fff; }

/* Barras simples */
.barra-linha { display: grid; grid-template-columns: 150px 1fr 110px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: .87rem; }
.barra { height: 10px; background: #eef1f4; border-radius: 99px; overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 99px; }
@media (max-width: 600px) { .barra-linha { grid-template-columns: 1fr 90px; } .barra { grid-column: 1 / -1; order: 3; } }

/* Login no estilo da página inicial do site: foto da escola com véu escuro */
.login-pagina { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.login-topo { padding: 22px 28px; font-weight: 700; font-size: 1.15rem; color: #000; display: flex; align-items: center; gap: 12px; }
.login-topo img { height: 42px; width: auto; }
.login-hero {
  flex: 1; display: grid; grid-template-columns: 1.2fr minmax(300px, 400px); gap: 40px; align-items: center;
  padding: 48px clamp(20px, 6vw, 80px); color: #fff; position: relative;
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), var(--capa, linear-gradient(135deg, #1f7a45, #0b4f8a)) center / cover no-repeat;
}
.login-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.12; text-transform: uppercase; margin: 0 0 14px; font-weight: 800; }
.login-hero p.slogan { font-size: 1.1rem; max-width: 460px; margin: 0; opacity: .95; }
.login-hero .card { color: var(--texto); box-shadow: 0 18px 40px rgba(0,0,0,.25); border: 0; margin: 0; }
.login-rodape { padding: 16px 28px; font-size: .85rem; color: var(--suave); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 800px) {
  .login-hero { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px; }
  .login-topo { padding: 16px; font-size: 1rem; }
}

/* Documentos para impressão (boletim / recibo) */
.documento { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px; max-width: 900px; }
.doc-cab { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--texto); padding-bottom: 12px; margin-bottom: 16px; }
.doc-cab h2 { margin: 0; font-size: 1.15rem; }
.doc-logo { display: flex; gap: 12px; align-items: center; }
.doc-logo img { height: 56px; width: auto; }
.doc-cab p { margin: 2px 0 0; font-size: .85rem; color: var(--suave); }
.doc-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 18px; margin-bottom: 16px; font-size: .9rem; }
.documento table th, .documento table td { border: 1px solid #c9d1da; padding: 7px 9px; }
.assinaturas { display: flex; gap: 40px; margin-top: 60px; }
.assinaturas div { flex: 1; border-top: 1px solid var(--texto); text-align: center; padding-top: 6px; font-size: .85rem; }
.quebra { page-break-after: always; margin-bottom: 30px; }

@media print {
  .lateral, .topo, .sombra, .nao-imprimir, .aviso { display: none !important; }
  .conteudo { margin: 0; padding: 0; max-width: none; }
  body { background: #fff; font-size: 12px; }
  .documento { border: 0; padding: 0; max-width: none; }
  .card { border: 0; padding: 0; }
}

.contador { margin-left: auto; background: #e8a33d; color: #1d1d1d; font-size: .72rem; font-weight: 700; border-radius: 99px; padding: 1px 8px; }