/* Central de Ajuda, avisos (sininho), pesquisa e instalação no celular.
   Usa SÓ tokens de tokens.css (nenhuma cor fixa). Carregado depois de portal/premium: aqui só se
   acrescenta, não se reescreve o visual oficial. */

/* ---------- Topo: pesquisa REAL (formulário) e sino com contador ---------- */
.busca { color: var(--ink-100); }
.busca input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; margin: 0; font: inherit; color: inherit;
  background: transparent; border: 0; outline: none; appearance: none; -webkit-appearance: none;
}
.busca input::placeholder { color: var(--ink-300); opacity: 1; }
.busca input::-webkit-search-cancel-button { display: none; }
.busca:focus-within { border-color: var(--gold-400); }
/* páginas comuns (não premium): a mesma barra, em tamanho de topo de página */
body:not(.pagina-premium) .busca {
  display: flex; align-items: center; gap: var(--sp-2); width: min(20rem, 30vw); height: 40px; padding: 0 var(--sp-3);
  background: var(--scrim); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
body:not(.pagina-premium) .busca .icon { flex: none; width: 20px; height: 20px; color: var(--ink-300); }
.busca-icone { display: none; }

.sino { position: relative; text-decoration: none; color: var(--white); }
body:not(.pagina-premium) .sino .icon { width: 24px; height: 24px; }
body:not(.pagina-premium) .sino {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm);
}
body:not(.pagina-premium) .sino:hover { background: var(--surface-strong); }
.sino__badge {
  position: absolute; right: 2px; top: 0; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center;
  font-size: 0.68rem; font-weight: 800; line-height: 1; color: var(--navy-950); background: var(--danger-400);
  border: 2px solid var(--navy-950); border-radius: 999px; box-sizing: content-box;
}
.sino__badge[hidden] { display: none; }
.pagina-premium .sino__badge { right: calc(2 * var(--k)); top: calc(-3 * var(--k)); }

/* ---------- Painel do sino ---------- */
.avisos-painel {
  position: fixed; z-index: 90; width: min(24rem, calc(100vw - 16px)); max-height: min(34rem, calc(100dvh - 90px)); display: flex; flex-direction: column;
  background: var(--surface-solid); border: 1px solid var(--border-gold); border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  color: var(--ink-100); overflow: hidden;
}
.avisos-painel[hidden] { display: none; }
.avisos-painel__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.avisos-painel__cab h2 { font-size: 1.02rem; }
.avisos-painel__lista { margin: 0; padding: 0; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.avisos-painel__rodape { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); font-size: 0.88rem; }
.avisos-painel__vazio { padding: var(--sp-5) var(--sp-4); color: var(--ink-300); text-align: center; }
.aviso-linha { display: block; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.aviso-linha:last-child { border-bottom: 0; }
.aviso-linha.is-novo { background: var(--estado-liberado-bg); }
.aviso-linha__titulo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: 0.95rem; }
.aviso-linha.is-novo .aviso-linha__titulo::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); }
.aviso-linha__corpo { margin-top: var(--sp-1); font-size: 0.88rem; line-height: 1.45; color: var(--ink-300); }
.aviso-linha__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); font-size: 0.78rem; color: var(--ink-500); }
.aviso-linha__acao { font-size: 0.86rem; font-weight: 600; }
.aviso-botao { padding: var(--sp-1) 0; font: inherit; font-size: 0.86rem; color: var(--gold-300); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.aviso-botao:hover { color: var(--white); }
.aviso-botao[disabled] { color: var(--ink-500); cursor: default; text-decoration: none; }
@media (max-width: 699.98px) {
  .avisos-painel { left: 8px !important; right: 8px; width: auto; }
}

/* ---------- Bloco "Precisa de ajuda?" do menu (agora é link e o QR é de verdade) ---------- */
a.ajuda { text-decoration: none; color: inherit; cursor: pointer; }
a.ajuda:hover, a.ajuda:focus-visible { border-color: var(--gold-400); }
.ajuda__qr svg { display: block; width: 100%; height: 100%; }
.ajuda__qr { display: block; }
.ajuda__qr:empty { visibility: hidden; }

/* QR AMPLIADO (leitura pelo celular): o bloco vira coluna; o QR fica grande, com fundo branco e "zona de
   silêncio" de 4 módulos desenhada dentro do próprio SVG (ver static/js/ajuda_qr.js). Antes: 62 px, sem
   margem — pequeno demais para a câmera ler de uma tela. */
.sidebar .ajuda { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }
.sidebar .ajuda .ajuda__qr { width: clamp(104px, 13.5vh, 136px); height: clamp(104px, 13.5vh, 136px); padding: 0; border-radius: 10px; overflow: hidden; }
.sidebar .ajuda .ajuda__titulo { font-size: 0.95rem; }
.sidebar .ajuda .ajuda__desc { font-size: 0.74rem; }
.pagina-premium .sidebar .ajuda {
  height: auto; padding: calc(12 * var(--k)) calc(12 * var(--k)); gap: calc(8 * var(--k));
}
.pagina-premium .sidebar .ajuda .ajuda__qr { width: clamp(104px, 13.5vh, 136px); height: clamp(104px, 13.5vh, 136px); padding: 0; border-radius: calc(8 * var(--k)); }
/* telas baixas (ex.: 1366x768): menos texto para o QR continuar grande sem rolar o menu */
@media (min-width: 1100px) and (max-height: 860px) {
  .sidebar .ajuda { padding: var(--sp-2); gap: var(--sp-1); }
  .sidebar .ajuda .ajuda__desc { display: none; }
}

/* QR grande da página de ajuda (aluno logado abre a ajuda no celular sem digitar o endereço) */
.aj-celular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--border-gold, var(--border)); border-radius: var(--radius-md); }
.aj-celular__qr { flex: none; width: 220px; height: 220px; background: #fff; border-radius: 12px; overflow: hidden; }
.aj-celular__qr svg { display: block; width: 100%; height: 100%; }
.aj-celular__texto { flex: 1 1 14rem; min-width: 0; }
.aj-celular__texto h2 { font-size: 1.15rem; margin-bottom: var(--sp-1); }
.aj-celular__texto p { color: var(--ink-300); font-size: 0.95rem; }
.aj-celular__url { margin-top: var(--sp-2); font-size: 0.85rem; overflow-wrap: anywhere; color: var(--gold-300); }
@media (max-width: 699.98px) { .aj-celular { display: none; } }  /* já está no celular: o QR não faz sentido */

/* ---------- Páginas de conteúdo: Ajuda, Avisos, Pesquisa ---------- */
.aj-pagina { max-width: 60rem; margin: 0 auto; }
.aj-cab { margin-bottom: var(--sp-5); }
.aj-cab h1 { margin-top: var(--sp-1); }
.aj-cab .lead { margin-top: var(--sp-2); font-size: 1.05rem; color: var(--ink-300); }
.aj-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.aj-atalho { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); text-decoration: none; color: var(--ink-100); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.aj-atalho:hover, .aj-atalho:focus-visible { border-color: var(--gold-400); background: var(--surface-strong); color: var(--ink-100); }
.aj-atalho .icon { width: 26px; height: 26px; color: var(--gold-400); }
.aj-atalho strong { font-size: 1.02rem; }
.aj-atalho span { font-size: 0.9rem; color: var(--ink-300); }
.aj-secao { margin-bottom: var(--sp-6); scroll-margin-top: calc(var(--topbar-h, 64px) + var(--sp-4)); }
.aj-secao > h2 { margin-bottom: var(--sp-2); font-size: 1.35rem; }
.aj-secao > .aj-intro { margin-bottom: var(--sp-4); color: var(--ink-300); }

/* formulário de ajuda */
.aj-form { display: flex; flex-direction: column; gap: var(--sp-1); }
.aj-form label { margin-top: var(--sp-3); font-size: 0.9rem; font-weight: 600; color: var(--ink-300); }
.aj-form select, .aj-form input[type="text"], .aj-form input[type="email"], .aj-form input[type="tel"], .aj-form textarea {
  width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-4); font: inherit; font-size: 1rem; /* 16px: sem zoom no iOS */
  color: var(--ink-100); background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.aj-form textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.aj-form select {
  appearance: none; -webkit-appearance: none; padding-right: var(--sp-6);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-300) 50%), linear-gradient(135deg, var(--ink-300) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat;
}
.aj-form select:focus-visible, .aj-form input:focus-visible, .aj-form textarea:focus-visible { outline-offset: 1px; border-color: var(--gold-400); }
.aj-form [aria-invalid="true"] { border-color: var(--danger-400); }
.aj-erro { font-size: 0.86rem; color: var(--danger-400); }
.aj-fixo { padding: var(--sp-3) var(--sp-4); color: var(--ink-300); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; overflow-wrap: anywhere; }
.aj-dica { margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-size: 0.9rem; color: var(--ink-100); background: var(--estado-liberado-bg); border: 1px solid var(--border-gold); border-radius: var(--radius-sm); }
.aj-dica[hidden] { display: none; }
.aj-dica a { font-weight: 600; }
.aj-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aj-seguro { margin-top: var(--sp-3); font-size: 0.85rem; color: var(--ink-300); }
.aj-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.aj-ok { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--ok-border); border-radius: var(--radius-md); }
.aj-ok h3 { color: var(--ok-400); font-size: 1.2rem; }
.aj-ok p { margin-top: var(--sp-2); color: var(--ink-300); }
.aj-protocolo { display: inline-block; margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-4); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-300); background: var(--field-bg); border: 1px solid var(--border-gold); border-radius: var(--radius-sm); user-select: all; }
.aj-aviso { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); color: var(--danger-400); background: var(--danger-bg); border: 1px solid var(--danger-border); }
.aj-faq details { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.aj-faq details + details { margin-top: var(--sp-2); }
.aj-faq summary { cursor: pointer; font-weight: 600; }
.aj-faq details p { margin-top: var(--sp-2); color: var(--ink-300); font-size: 0.95rem; }

/* ---------- Como instalar no celular ---------- */
.ins-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--sp-4); }
.ins-cartao { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ins-cartao.is-seu { border-color: var(--gold-400); box-shadow: var(--brilho-borda); }
.ins-cartao h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 1.15rem; }
.ins-seu { display: none; }
.ins-cartao.is-seu .ins-seu { display: inline-flex; }
.ins-passos { margin: var(--sp-4) 0 0; padding: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: var(--sp-4); }
.ins-passo { position: relative; display: grid; grid-template-columns: 2.1rem 1fr; gap: var(--sp-3); align-items: start; counter-increment: passo; }
.ins-passo::before {
  content: counter(passo); display: grid; place-items: center; width: 2.1rem; height: 2.1rem; font-weight: 800; color: var(--navy-950);
  background: var(--grad-gold); border-radius: 50%;
}
.ins-passo p { font-size: 0.97rem; line-height: 1.45; }
.ins-passo p small { display: block; margin-top: 2px; color: var(--ink-300); font-size: 0.85rem; }
.ins-icone { display: inline-flex; vertical-align: -0.35em; margin: 0 2px; padding: 3px; width: 1.7em; height: 1.7em; color: var(--navy-950); background: var(--white); border-radius: 7px; }
.ins-icone svg { width: 100%; height: 100%; }
.ins-depois { margin-top: var(--sp-4); }
.ins-nota { margin-top: var(--sp-4); font-size: 0.88rem; color: var(--ink-300); }
.ins-estado { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--ok-border); color: var(--ok-400); background: var(--surface); }
.ins-estado[hidden] { display: none; }
.ins-agora { margin-bottom: var(--sp-4); }
.ins-agora[hidden] { display: none; }

/* ---------- Avisos (página) ---------- */
.av-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.av-item { padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.av-item.is-novo { border-color: var(--border-gold); background: var(--estado-liberado-bg); }
.av-item h2 { display: flex; align-items: center; gap: var(--sp-2); font-size: 1.1rem; }
.av-item.is-novo h2::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-400); }
.av-item p { margin-top: var(--sp-2); color: var(--ink-300); }
.av-item__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); font-size: 0.85rem; color: var(--ink-500); }
.av-item__rodape form { display: inline; margin: 0; }
.av-vazio { padding: var(--sp-6); text-align: center; color: var(--ink-300); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.av-topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.av-topo form { margin: 0; }

/* ---------- Resultados da pesquisa ---------- */
.bs-form { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.bs-form input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 var(--sp-4); font: inherit; font-size: 1rem; color: var(--ink-100); background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bs-form input:focus-visible { outline-offset: 1px; border-color: var(--gold-400); }
.bs-grupo { margin-bottom: var(--sp-5); }
.bs-grupo h2 { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: 1.15rem; }
.bs-grupo h2 small { font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--ink-500); }
.bs-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.bs-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bs-item__texto { flex: 1 1 14rem; min-width: 0; }
.bs-item__titulo { font-weight: 600; overflow-wrap: anywhere; }
.bs-item__detalhe { margin-top: 2px; font-size: 0.86rem; color: var(--ink-300); }
.bs-item__trecho { margin-top: var(--sp-1); font-size: 0.9rem; color: var(--ink-100); overflow-wrap: anywhere; }
.bs-item__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bs-item mark, .bs-item__trecho mark { padding: 0 2px; color: var(--navy-950); background: var(--gold-300); border-radius: 3px; }
.bs-vazio { padding: var(--sp-6); text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.bs-vazio h2 { margin-bottom: var(--sp-2); }
.bs-vazio p { color: var(--ink-300); }
.bs-cobertura { margin-top: var(--sp-5); font-size: 0.88rem; color: var(--ink-300); }
.bs-cobertura summary { cursor: pointer; font-weight: 600; color: var(--ink-100); }
.bs-cobertura ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.btn--sm { min-height: 38px; padding: 0 var(--sp-4); font-size: 0.9rem; }

/* ---------- Celular e tablet em pé: a pesquisa vira um ícone no topo ---------- */
@media (max-width: 699.98px),
       (max-height: 500px) and (pointer: coarse),
       (min-width: 700px) and (max-width: 1099.98px) and (orientation: portrait) and (pointer: coarse) {
  body:not(.pagina-premium) .busca, body.pagina-premium .busca { display: none; }
  .busca-icone {
    display: grid; place-items: center; width: 44px; height: 44px; color: var(--white); text-decoration: none;
    background: transparent; border: 0; border-radius: var(--radius-sm);
  }
  .busca-icone .icon { width: 24px; height: 24px; }
  body:not(.pagina-premium) .sino, body.pagina-premium .sino { width: 44px; height: 44px; }
  .sino__badge, body.pagina-premium .sino__badge { right: 3px; top: 2px; }
}
@media (max-width: 480px) {
  .bs-form { flex-direction: column; }
  .aj-acoes .btn { width: 100%; }
}

/* Notificações da família e boleto parcelado (23/10/2026) */
.av-item__sobre { margin: 0 0 var(--sp-1); font-size: 0.8rem; color: var(--gold-300); }
.av-item__tag { display: inline-block; margin-left: var(--sp-2); padding: 1px 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300); border: 1px solid var(--border); border-radius: 999px; vertical-align: middle; }

/* Aluno menor com acesso bloqueado: conteúdo acinzentado + mensagem neutra ao tocar. */
body[data-bloqueio-neutro] main.content > *:not(.aviso-prazo):not(.env-strip):not(.aj-pagina) { filter: grayscale(.9); opacity: .72; }
.aviso--neutro { color: var(--ink-300); }
.bloqueio-neutro-msg { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--sp-4) + 72px); transform: translateX(-50%); width: min(420px, calc(100vw - 2 * var(--sp-4))); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--gold-400); border-radius: var(--radius-sm); background: var(--surface-solid); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: .92rem; line-height: 1.45; text-align: center; }
.bloqueio-neutro-msg[hidden] { display: none; }
/* Painel de parcelas do responsável */
.parc-acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.parc-atualizado { display: block; margin-top: 2px; font-size: .8rem; color: var(--danger-400); }
.parc-pago { color: var(--ink-300); font-size: .86rem; }

/* Aviso VERMELHO de pendência (responsável, D+1 em diante) */
.aviso-pendencia { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border: 1px solid #e5484d; border-left-width: 6px; border-radius: var(--radius-sm); background: rgba(229, 72, 77, .16); color: #ffd9da; }
.aviso-pendencia a { color: #fff; font-weight: 700; text-decoration: underline; }
.aviso-pendencia p { margin: 0; line-height: 1.45; }
.aviso-pendencia__prazo { margin-top: 4px !important; font-size: .92rem; }
.parc-prazo { display: block; margin-top: 4px; font-size: .78rem; color: var(--danger-400); }
.aviso-linha__sobre { margin-top: 2px; font-size: 0.78rem; color: var(--gold-300); }