/* Área das famílias — Escola Monteiro Lobato (manual da marca: Archivo, vermelho #c00010, grafite #3b4150) */
:root {
  --vermelho: #c00010; --vermelho-escuro: #8a000b; --coracao: #ec3013; --grafite: #3b4150; --suave: #6e7480;
  --papel: #f3f2f2; --tinta: #201e1d; --borda: #e4e2e2; --branco: #fff;
  --ok: #1d7a46; --ok-fundo: #e7f4ec; --alerta-fundo: #fdecea; --info-fundo: #eceef2; --proc-fundo: #fff6e0;
  --raio: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.5 Archivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.etq { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
[hidden] { display: none !important; }

/* Botões */
.btn { border: 1px solid var(--borda); background: #fff; color: var(--tinta); border-radius: 10px; padding: 10px 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; line-height: 1.2; }
.btn:hover { border-color: var(--grafite); }
.btn:focus-visible, .link:focus-visible, .abas button:focus-visible { outline: 2px solid var(--coracao); outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.primario { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn.primario:hover { background: var(--vermelho-escuro); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn:disabled { opacity: .6; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--vermelho); font-weight: 700; font-size: 13px; text-decoration: none; }

/* Cabeçalho */
.topo { background: var(--branco); border-bottom: 1px solid var(--borda); }
.topo-in { max-width: 1080px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.topo .logo { height: 38px; width: auto; }
.topo .flex { flex: 1; }
.topo .btn { padding: 8px 12px; font-size: 14px; }
.aviso-admin { background: var(--grafite); color: #fff; font-size: 13px; text-align: center; padding: 6px 16px; }

main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 48px; }
.ola { margin: 4px 0 18px; }
.ola h1 { margin: 2px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }

.grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.coluna { display: grid; gap: 16px; min-width: 0; }
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; min-width: 0; }
.cartao h2 { margin: 0 0 12px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }

/* Situação */
.situacao { border-radius: var(--raio); padding: 20px 22px; display: flex; gap: 16px; align-items: center; }
.situacao .icone { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.situacao .icone svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.situacao h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.situacao p { margin: 2px 0 0; }
.situacao.em-dia { background: var(--ok-fundo); color: #13502e; }
.situacao.em-dia .icone { background: var(--ok); color: #fff; }
.situacao.pendente { background: var(--vermelho); color: #fff; }
.situacao.pendente .icone { background: #fff; color: var(--vermelho); }
.situacao .btn-claro { margin-left: auto; background: #fff; color: var(--vermelho); border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; white-space: nowrap; }

/* Próximo pagamento */
.proximo { display: grid; gap: 14px; }
.proximo .valor { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.proximo .linha { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--grafite); align-items: center; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.nota { font-size: 13px; color: var(--suave); margin: 0; }

/* Selos */
.selo { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.s-pago { background: var(--ok-fundo); color: var(--ok); }
.s-aberto { background: var(--info-fundo); color: var(--grafite); }
.s-vencido { background: var(--alerta-fundo); color: var(--vermelho-escuro); }
.s-proc { background: var(--proc-fundo); color: #7a5200; }

/* Abas e lista de boletos */
.abas { display: flex; gap: 4px; background: var(--papel); padding: 4px; border-radius: 10px; margin-bottom: 8px; }
.abas button { flex: 1; border: 0; background: transparent; padding: 8px 6px; border-radius: 8px; font-weight: 600; color: var(--suave); font-size: 14px; }
.abas button[aria-selected="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.boletos { list-style: none; margin: 0; padding: 0; }
.boleto { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--borda); }
.boleto:last-child { border-bottom: 0; }
.mes { width: 46px; height: 46px; border-radius: 10px; background: var(--papel); display: grid; place-content: center; text-align: center; line-height: 1.05; }
.mes b { font-size: 15px; font-weight: 800; display: block; }
.mes span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.boleto.vencido .mes { background: var(--alerta-fundo); color: var(--vermelho-escuro); }
.boleto.vencido .mes span { color: var(--vermelho-escuro); }
.boleto .desc { min-width: 0; }
.boleto .desc strong { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boleto .desc small { color: var(--suave); }
.boleto .lado { text-align: right; display: grid; gap: 4px; justify-items: end; }
.boleto .lado b { font-size: 15px; white-space: nowrap; }
.vazio { color: var(--suave); text-align: center; padding: 18px 0; list-style: none; }

/* Alunos e ano */
.aluno { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.aluno:last-child { border-bottom: 0; }
.aluno .foto { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--info-fundo); color: var(--grafite); display: grid; place-items: center; font-weight: 800; }
.aluno small { display: block; color: var(--suave); }
.barra-prog { height: 10px; background: var(--papel); border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.barra-prog i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.resumo-ano { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.resumo-ano div { background: var(--papel); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.resumo-ano b { display: block; font-size: 17px; white-space: nowrap; }

.contato { background: var(--grafite); color: #fff; border: 0; }
.contato p { margin: 0 0 12px; color: #e3e5ea; }
.contato .btn { background: #fff; border-color: #fff; }

/* Janela (PIX, senha) */
dialog { border: 0; border-radius: var(--raio); padding: 0; width: min(480px, calc(100vw - 32px)); color: var(--tinta); }
dialog::backdrop { background: rgba(32, 30, 29, .55); }
.janela { padding: 20px 22px; display: grid; gap: 12px; }
.janela h2 { margin: 0; font-size: 20px; font-weight: 800; }
.janela p { margin: 0; }
.codigo { font: 13px/1.4 ui-monospace, Consolas, monospace; background: var(--papel); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; user-select: all; }
.passos { margin: 0; padding-left: 20px; color: var(--grafite); }
.passos li { margin: 2px 0; }

/* Formulários (entrar, senha) */
.campo { display: grid; gap: 4px; font-weight: 600; color: var(--grafite); font-size: 14px; }
.campo input { padding: 11px 12px; border: 1px solid #c9c7c7; border-radius: 10px; font-size: 16px; color: var(--tinta); background: #fff; }
.campo input:focus { outline: 2px solid var(--coracao); outline-offset: 0; border-color: transparent; }
.erro { margin: 0; padding: 8px 12px; background: var(--alerta-fundo); color: var(--vermelho-escuro); border-radius: 10px; font-weight: 600; font-size: 14px; }
.sucesso { margin: 0; padding: 8px 12px; background: var(--ok-fundo); color: var(--ok); border-radius: 10px; font-weight: 600; font-size: 14px; }

.entrar { max-width: 420px; margin: 48px auto; padding: 0 16px; }
.entrar .cartao { padding: 26px 24px; display: grid; gap: 14px; }
.entrar .logo { width: 220px; max-width: 100%; height: auto; }
.entrar h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.entrar .btn { width: 100%; padding: 12px; font-size: 16px; }
.separador { display: flex; align-items: center; gap: 10px; color: var(--suave); font-size: 13px; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.rodape { text-align: center; color: var(--suave); font-size: 12px; margin-top: 28px; }
.rodape a { color: var(--suave); }

@media (max-width: 820px) {
  .grade { grid-template-columns: minmax(0, 1fr); }
  .ola h1 { font-size: 24px; }
  .situacao { flex-wrap: wrap; }
  .situacao .btn-claro { margin-left: 0; width: 100%; }
  .proximo .valor { font-size: 30px; }
  .topo .rotulo { display: none; }
  .topo .logo { height: 32px; }
  .entrar { margin-top: 24px; }
}

@media print {
  .topo, .aviso-admin, .situacao, .proximo, .abas, .contato, .acoes, .link, .so-tela { display: none !important; }
  body { background: #fff; }
  .grade { grid-template-columns: 1fr; }
  .cartao { border: 0; padding: 0; }
}