/* IBADAG — folha unica. Sem framework, sem build. */
:root{
  --tinta:#0f172a; --suave:#64748b; --linha:#e2e8f0; --fundo:#f1f5f9;
  --papel:#fff; --azul:#1d4ed8; --azul-claro:#eff6ff;
  --verde:#059669; --verde-claro:#ecfdf5; --vermelho:#dc2626; --vermelho-claro:#fef2f2;
  --ambar:#b45309; --ambar-claro:#fffbeb;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     background:var(--fundo);color:var(--tinta);font-size:15px;line-height:1.5}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- topo e menu ---------- */
.topo{background:#0f172a;color:#fff;position:sticky;top:0;z-index:40}
.topo-in{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:18px;min-height:56px}
.marca{font-weight:800;letter-spacing:.2px;color:#fff;font-size:16px;white-space:nowrap}
.marca span{color:#93c5fd;font-weight:500;font-size:13px}
.menu{display:flex;gap:4px;align-items:center;margin-left:auto;flex-wrap:wrap}
.menu a,.menu button{color:#cbd5e1;background:none;border:0;font:inherit;cursor:pointer;
     padding:8px 12px;border-radius:8px;white-space:nowrap}
.menu a:hover,.menu button:hover{background:#1e293b;color:#fff;text-decoration:none}
.menu a.ativo{background:var(--azul);color:#fff}
.drop{position:relative}
.drop-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:#fff;
     border:1px solid var(--linha);border-radius:10px;box-shadow:0 12px 28px rgba(15,23,42,.16);
     min-width:190px;padding:6px;z-index:50}
.drop-menu.aberto{display:block}
.drop-menu a{display:block;color:var(--tinta);padding:9px 12px;border-radius:7px}
.drop-menu a:hover{background:var(--azul-claro);color:var(--azul)}
.hamburguer{display:none}
.usuario{color:#94a3b8;font-size:13px;white-space:nowrap}
.usuario b{color:#fff}
.selo-papel{background:#334155;color:#cbd5e1;border-radius:999px;padding:1px 8px;font-size:10.5px;
     font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-left:6px}
.selo-papel.leitura{background:#78350f;color:#fde68a}

/* ---------- estrutura ---------- */
.pagina{max-width:1180px;margin:0 auto;padding:22px 16px 60px}
h1{font-size:22px;margin:0 0 4px}
.sub{color:var(--suave);margin:0 0 20px}
.caixa{background:var(--papel);border:1px solid var(--linha);border-radius:12px;
     padding:18px 20px;margin-bottom:18px}
.caixa h2{font-size:16px;margin:0 0 14px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.card{background:var(--papel);border:1px solid var(--linha);border-radius:12px;padding:16px 18px}
.card .rot{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave);font-weight:700}
.card .num{font-size:26px;font-weight:800;margin:6px 0 2px}
.card .det{font-size:12.5px;color:var(--suave)}
.card.destaque{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border:0}
.card.destaque .rot,.card.destaque .det{color:#dbeafe}
.card.verde .num{color:var(--verde)}
.card.vermelho .num{color:var(--vermelho)}
.card.ambar .num{color:var(--ambar)}

/* ---------- tabela ---------- */
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th,table.t td{padding:9px 10px;border-bottom:1px solid #eef2f7;text-align:left}
table.t th{background:#f8fafc;color:#475569;font-size:11.5px;text-transform:uppercase;
     letter-spacing:.04em;font-weight:800}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}
table.t tr:hover td{background:#f8fafc}
table.t tfoot td{font-weight:800;background:#f8fafc;border-top:2px solid var(--linha)}
.rolagem{max-height:560px;overflow:auto;border:1px solid var(--linha);border-radius:10px}

/* ---------- formularios e botoes ---------- */
.btn{background:var(--azul);color:#fff;border:0;padding:9px 16px;border-radius:8px;
     font-size:14px;font-weight:600;cursor:pointer;display:inline-block;text-decoration:none}
.btn:hover{background:#1e40af;text-decoration:none;color:#fff}
.btn.claro{background:#fff;color:#334155;border:1px solid #cbd5e1}
.btn.claro:hover{background:#f8fafc;color:#334155}
.btn.perigo{background:var(--vermelho)}
.btn.perigo:hover{background:#b91c1c}
.btn.verde{background:var(--verde)}
.btn.pequeno{padding:5px 10px;font-size:12.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
label{display:block;font-size:12.5px;color:var(--suave);margin-bottom:4px;font-weight:600}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
     width:100%;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;
     font-family:inherit;background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:2px solid #bfdbfe;border-color:var(--azul)}
.linha{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.linha>div{flex:1;min-width:140px}
.linha>.fix{flex:0 0 auto;min-width:0}

/* ---------- selos ---------- */
.selo{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;
     text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.selo.ok{background:var(--verde-claro);color:var(--verde)}
.selo.nao{background:#f1f5f9;color:var(--suave)}
.selo.alerta{background:var(--vermelho-claro);color:var(--vermelho)}
.selo.aviso{background:var(--ambar-claro);color:var(--ambar)}
.selo.info{background:var(--azul-claro);color:var(--azul)}

/* ---------- grade da ficha do aluno ---------- */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.mes{border:1px solid var(--linha);border-radius:10px;padding:12px;text-align:center;background:#fff}
.mes.pago{background:var(--verde-claro);border-color:#a7f3d0}
.mes.aberto{background:#f8fafc}
.mes.fora{opacity:.45}
.mes .m{font-weight:800;font-size:13px;text-transform:capitalize}
.mes .v{font-size:16px;font-weight:800;margin:5px 0 3px;color:var(--verde)}
.mes .s{font-size:11.5px;color:var(--suave)}
.mes .acao{margin-top:8px}

/* ---------- modal ---------- */
.fundo-modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:100;
     align-items:flex-start;justify-content:center;padding:28px 14px;overflow:auto}
.fundo-modal.aberto{display:flex}
.modal{background:#fff;border-radius:14px;width:100%;max-width:520px;padding:22px;
     box-shadow:0 24px 60px rgba(15,23,42,.3)}
.modal h3{margin:0 0 4px;font-size:17px}
.modal .dica{color:var(--suave);font-size:13px;margin:0 0 16px}
.modal-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* ---------- avisos ---------- */
.aviso{padding:11px 14px;border-radius:9px;margin-bottom:16px;font-size:14px}
.aviso.ok{background:var(--verde-claro);color:#065f46;border:1px solid #a7f3d0}
.aviso.erro{background:var(--vermelho-claro);color:#991b1b;border:1px solid #fecaca}
.aviso.info{background:var(--azul-claro);color:#1e40af;border:1px solid #bfdbfe}
.aviso.leitura{background:var(--ambar-claro);color:#92400e;border:1px solid #fde68a}
.nota{margin-top:16px;padding:12px 14px;background:#f8fafc;border-left:3px solid #94a3b8;
     border-radius:6px;color:var(--suave);font-size:12.5px;line-height:1.55}

/* ---------- login ---------- */
.login-tela{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
     background:linear-gradient(140deg,#0f172a,#1e3a8a)}
.login-caixa{background:#fff;border-radius:16px;padding:32px;width:100%;max-width:390px;
     box-shadow:0 24px 60px rgba(0,0,0,.3)}
.login-caixa h1{text-align:center;margin:0 0 4px}
.login-caixa .sub{text-align:center;margin-bottom:22px}
.login-caixa .campo{margin-bottom:14px}

/* ---------- impressao ---------- */
@media print{
  .topo,.btn,.linha,.nao-imprime{display:none !important}
  body{background:#fff}
  .caixa{border:0;padding:0;box-shadow:none}
  .pagina{max-width:none;padding:0}
  table.t th{background:#eee !important;-webkit-print-color-adjust:exact}
}

/* ---------- celular ---------- */
@media(max-width:820px){
  .hamburguer{display:block;margin-left:auto}
  .menu{display:none;position:absolute;top:56px;left:0;right:0;background:#0f172a;
        flex-direction:column;align-items:stretch;padding:8px;gap:2px;
        box-shadow:0 12px 24px rgba(0,0,0,.3)}
  .menu.aberto{display:flex}
  .menu a,.menu button{text-align:left;width:100%}
  .drop-menu{position:static;box-shadow:none;border:0;background:#1e293b;margin:2px 0 6px}
  .drop-menu a{color:#cbd5e1}
  .drop-menu a:hover{background:#334155;color:#fff}
  .usuario{order:-1;margin-left:auto}
}