/* App dos pais (28/10/2026) — só celular. v2 "visão iPhone" (Sandro: enxuto, menos espaço, fechadinho):
   fundo cinza-claro, listas agrupadas com linha fina, letra de sistema. A cor da escola chega em --ap-cor
   (o JS lê de data-cor). Dia e noite pelo aparelho (prefers-color-scheme) OU pelo botão sol/lua do topo
   (30/10/2026: html[data-tema="dia"|"noite"], guardado no aparelho). */
:root {
  --ap-cor: #f20401;
  --ap-cor2: #fcb704;
  --ap-fundo: #fff3b0;      /* amarelo-bebê (Sandro: "bem amarelo") */
  --ap-cartao: #ffffff;
  --ap-texto: #2f2f31;      /* chumbo */
  --ap-mudo: #7c7c80;
  --ap-linha: rgb(47 47 49 / 0.12);
  --ap-ok: #2f2f31;          /* "pago" em chumbo: só vermelho, amarelo, chumbo e cinza */
  --ap-alerta: #f20401;
  --ap-erro: #f20401;
  --ap-raio: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:not([data-tema="dia"]) {
    --ap-fundo: #1f1d16;
    --ap-cartao: #2f2f31;
    --ap-texto: #f2f2f7;
    --ap-mudo: #98989f;
    --ap-linha: rgb(84 84 88 / 0.5);
    color-scheme: dark;
  }
}
html[data-tema="noite"] {
    --ap-fundo: #1f1d16;
    --ap-cartao: #2f2f31;
    --ap-texto: #f2f2f7;
    --ap-mudo: #98989f;
    --ap-linha: rgb(84 84 88 / 0.5);
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* fundo com vida (Sandro: "degradê, nada chapado, mais moderno"): manchas de luz amarela + um calor vermelho
   nos cantos, fixo atrás de tudo; os grupos por cima ficam como vidro. Só amarelo, vermelho, chumbo e cinza. */
body.ap::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 85% 8%, color-mix(in srgb, var(--ap-cor) 16%, transparent), transparent 70%),
    radial-gradient(55% 40% at 10% 30%, color-mix(in srgb, var(--ap-cor2) 55%, transparent), transparent 72%),
    radial-gradient(70% 50% at 90% 75%, color-mix(in srgb, var(--ap-cor2) 45%, transparent), transparent 70%),
    radial-gradient(50% 35% at 15% 95%, color-mix(in srgb, var(--ap-cor) 10%, transparent), transparent 70%),
    linear-gradient(170deg, #fffbe6 0%, #fff1a6 45%, #ffe37a 100%); }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="dia"]) body.ap::before { background:
    radial-gradient(60% 45% at 85% 8%, color-mix(in srgb, var(--ap-cor) 22%, transparent), transparent 70%),
    radial-gradient(60% 45% at 10% 40%, color-mix(in srgb, var(--ap-cor2) 18%, transparent), transparent 72%),
    linear-gradient(170deg, #26231a 0%, #1f1d16 60%, #2a2412 100%); }
}
html[data-tema="noite"] body.ap::before { background:
    radial-gradient(60% 45% at 85% 8%, color-mix(in srgb, var(--ap-cor) 22%, transparent), transparent 70%),
    radial-gradient(60% 45% at 10% 40%, color-mix(in srgb, var(--ap-cor2) 18%, transparent), transparent 72%),
    linear-gradient(170deg, #26231a 0%, #1f1d16 60%, #2a2412 100%); }
.ap .ap-grupo, .ap .ap-filho, .ap .ap-resumo button, .ap .ap-falta, .ap .ap-cartao {
  background: color-mix(in srgb, var(--ap-cartao) 78%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 6px 22px -14px rgb(47 47 49 / 0.45); }
.ap .ap-btn { background: linear-gradient(180deg, color-mix(in srgb, var(--ap-cor) 85%, #fff), var(--ap-cor)); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ap-cor) 70%, transparent); }
.ap .ap-topo { background: linear-gradient(135deg, var(--ap-cor), color-mix(in srgb, var(--ap-cor) 78%, #2f2f31)); box-shadow: 0 6px 18px -10px rgb(0 0 0 / 0.45); }

body.ap { margin: 0; font: 15px/1.35 -apple-system, BlinkMacSystemFont, 'SF Pro Text', Nunito, system-ui, sans-serif; color: var(--ap-texto); background: var(--ap-fundo);
  -webkit-font-smoothing: antialiased; }
.ap h1, .ap h2, .ap h3 { margin: 0; line-height: 1.2; }
[hidden] { display: none !important; }

/* ── Computador: só o QR ── */
.ap-pc { display: none; }
@media (min-width: 820px) and (hover: hover) and (pointer: fine) {
  .ap-cel { display: none; }
  .ap-pc { display: grid; place-items: center; text-align: center; gap: 0.6rem; min-height: 100vh; padding: 3rem; }
  .ap-pc__logo { max-height: 100px; }
  .ap-pc__qr svg { width: 220px; height: 220px; background: #fff; padding: 12px; border-radius: 12px; }
  .ap-pc__link { color: var(--ap-mudo); font-size: 0.9rem; }
}

/* ── Topo (como a barra do iPhone: fina, translúcida) ── */
.ap-topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: calc(env(safe-area-inset-top, 0px) + 0.4rem) 1rem 0.4rem; background: color-mix(in srgb, var(--ap-cartao) 85%, transparent);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 0.5px solid var(--ap-linha); }
/* barra de cima vermelha, nome em amarelo, sininho branco (Sandro, 28/10/2026) */
.ap-topo { min-height: calc(env(safe-area-inset-top, 0px) + 2.9rem); background: var(--ap-cor); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ap-topo { min-height: calc(env(safe-area-inset-top, 0px) + 3.6rem); }
.ap-topo__nome { font-weight: 800; font-size: 1.4rem; color: var(--ap-cor2); letter-spacing: -0.01em; text-shadow: 0 1px 2px rgb(0 0 0 / 0.18); }
/* sininho maior e em destaque (Sandro, 28/10/2026) */
.ap .ap-topo .ap-sino, .ap .ap-topo .ap-sino.is-novo { color: #fff; font-size: 2rem; padding: 0.35rem; }
/* 30/10/2026: botão dia/noite ao lado do sino */
.ap-topo__acoes { display: flex; align-items: center; gap: 0.15rem; }
.ap .ap-topo .ap-tema { display: grid; place-items: center; padding: 0.35rem; border: 0; background: none; color: #fff; font-size: 1.8rem;
  line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ap .ap-topo .ap-tema:active { transform: scale(0.9); }
.ap .ap-topo .ap-sino.is-novo i { animation: ap-balanca 2.4s ease-in-out infinite; transform-origin: 50% 10%; display: inline-block; }
.ap-topo .ap-sino b { background: var(--ap-cor2); color: #2f2f31; min-width: 1.35rem; height: 1.35rem; font-size: 0.78rem; line-height: 1.35rem; top: 0; right: -0.1rem;
  box-shadow: 0 0 0 2px var(--ap-cor); }
@keyframes ap-balanca { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 88% { transform: rotate(8deg); } 94% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .ap .ap-topo .ap-sino.is-novo i { animation: none; } }

/* aviso de ficha incompleta + tela da ficha */
.ap-falta { display: flex; width: 100%; gap: 0.6rem; align-items: center; text-align: left; margin-top: 0.5rem; padding: 0.7rem 0.9rem; border: 0; border-radius: var(--ap-raio);
  background: var(--ap-cartao); color: var(--ap-texto); font: inherit; border-left: 4px solid var(--ap-cor); }
.ap-falta > i:first-child { font-size: 1.4rem; color: var(--ap-cor); }
.ap-falta span { flex: 1; min-width: 0; }
.ap-falta b { display: block; font-size: 0.92rem; }
.ap-falta small { display: block; color: var(--ap-mudo); font-size: 0.78rem; }
.ap-falta > i:last-child { color: var(--ap-mudo); }
.ap-filho[data-ir] { cursor: pointer; }
img.ap-filho__ava { object-fit: cover; }

.ap-ficha__foto { display: grid; justify-items: center; gap: 0.5rem; margin-top: 0.6rem; text-align: center; }
.ap-ficha__foto img, .ap-ficha__foto > span { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; background: var(--ap-cartao); display: grid; place-items: center;
  border: 3px solid var(--ap-cor2); }
.ap-ficha__foto > span i { font-size: 2.4rem; color: var(--ap-mudo); }
.ap-ficha__foto small { color: var(--ap-mudo); font-size: 0.78rem; max-width: 18rem; }
.ap-campo2 { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.5rem; align-items: center; font-size: 0.88rem; }
.ap-campo2 span { color: var(--ap-mudo); }
.ap-campo2 input, .ap-campo2 textarea { width: 100%; border: 0; background: transparent; color: var(--ap-texto); font: inherit; font-size: 0.92rem; padding: 0.15rem 0; resize: vertical; }
.ap-campo2 input:focus, .ap-campo2 textarea:focus { outline: none; }
.ap-campo2 input::placeholder, .ap-campo2 textarea::placeholder { color: var(--ap-cor); font-weight: 600; }

/* sininho dos recados não lidos (28/10/2026) */
.ap-sino { position: relative; background: none; border: 0; padding: 0.3rem; font-size: 1.45rem; line-height: 1; color: var(--ap-mudo); }
.ap-sino.is-novo { color: var(--ap-cor); }
.ap-sino b, .ap-menu__n { position: absolute; top: -0.05rem; right: -0.15rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.28rem; border-radius: 99px;
  background: var(--ap-erro); color: #fff; font: 700 0.66rem/1.1rem system-ui, sans-serif; text-align: center; }
.ap-sino b:empty { display: none; }
.ap-menu__rec { position: relative; }
.ap-menu__n { top: 0; right: calc(50% - 1.35rem); }

/* recado ainda não lido: bolinha da cor da escola */
.ap-aviso--novo .ap-aviso__topo b::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ap-cor); margin-right: 0.4rem; vertical-align: 0.1em; }

/* logomarca grande no fim do Início */
.ap-logo-grande { display: block; width: min(78%, 300px); height: auto; margin: 0.6rem auto 0.4rem; filter: drop-shadow(0 6px 14px rgb(47 47 49 / 0.18)); }
/* 30/10/2026: no modo noite a logo da escola (quase sempre com letra escura) ganha uma placa clara por trás */
@media (prefers-color-scheme: dark) { html:not([data-tema="dia"]) .ap-logo-grande { background: #fffdf5; padding: 0.7rem 1rem; border-radius: 14px; } }
html[data-tema="noite"] .ap-logo-grande { background: #fffdf5; padding: 0.7rem 1rem; border-radius: 14px; }

/* ── Entrar ── */
.ap-entrar { padding: 1.2rem 1rem 3rem; }
.ap-titulo { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.3rem !important; }
.ap-cartao { background: var(--ap-cartao); border-radius: var(--ap-raio); padding: 1rem; }
.ap-cartao p { margin: 0 0 0.4rem; color: var(--ap-mudo); font-size: 0.92rem; }
.ap-campo { display: grid; gap: 0.25rem; margin: 0.8rem 0; font-weight: 600; font-size: 0.8rem; color: var(--ap-mudo); }
.ap-campo input { font: inherit; font-size: 1.1rem; font-weight: 500; padding: 0.7rem 0.85rem; border-radius: 10px; border: 0;
  background: var(--ap-fundo); color: var(--ap-texto); }
.ap-campo input:focus { outline: 2px solid var(--ap-cor); }
.ap-btn { display: block; width: 100%; text-align: center; text-decoration: none; font: 600 1rem/1 -apple-system, system-ui, sans-serif;
  padding: 0.85rem; border: 0; border-radius: var(--ap-raio); color: #fff; background: var(--ap-cor); }
.ap-btn:disabled { opacity: 0.55; }
.ap-btn--p { width: auto; display: inline-block; padding: 0.45rem 0.9rem; font-size: 0.88rem; }
.ap-link { display: block; margin: 0.7rem auto 0; background: none; border: 0; color: var(--ap-cor); font: inherit; font-size: 0.9rem; }
/* 29/10/2026 (Sandro: "o texto está colado no botão, tá feio"): a mensagem fica numa caixinha separada do botão */
.ap-erro, .ap-cartao .ap-erro { color: var(--ap-erro); font-weight: 600; font-size: 0.9rem; line-height: 1.4; margin: 1rem 0 0; padding: 0.7rem 0.85rem;
  border-radius: 10px; background: color-mix(in srgb, var(--ap-erro) 9%, transparent); border-left: 3px solid var(--ap-erro); }
.ap-dica { text-align: center; color: var(--ap-mudo); font-size: 0.8rem; margin-top: 1rem; }
/* 30/10/2026: cartão da demonstração (só aparece no sistema de demo) */
.ap-demo { margin-top: 0.8rem; border: 2px dashed color-mix(in srgb, var(--ap-cor) 45%, transparent); }
.ap-demo strong { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-cor); margin-bottom: 0.3rem; }
.ap-demo .ap-btn { width: 100%; margin-top: 0.4rem; }

/* ── App ── */
.ap-app { padding: 0.6rem 1rem calc(env(safe-area-inset-bottom, 0px) + 5rem); display: block; }
.ap-app section { display: block; }
.ap-sec { font-size: 0.78rem !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ap-mudo);
  margin: 1.1rem 0 0.35rem 0.9rem !important; }
.ap-nota { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--ap-mudo); text-align: center; }
.ap-vazio { text-align: center; color: var(--ap-mudo); padding: 2.2rem 1rem; font-size: 0.92rem; }
.ap-vazio b { display: block; font-size: 2rem; margin-bottom: 0.3rem; }

/* grupo = lista do iPhone (fundo branco, cantos de 12px, linha fina entre os itens) */
.ap-grupo { background: var(--ap-cartao); border-radius: var(--ap-raio); overflow: hidden; }
.ap-linha { position: relative; padding: 0.62rem 0.9rem; }
.ap-linha + .ap-linha::before { content: ''; position: absolute; top: 0; left: 0.9rem; right: 0; border-top: 0.5px solid var(--ap-linha); }
.ap-linha small { display: block; color: var(--ap-mudo); font-size: 0.78rem; margin-top: 0.1rem; }

.ap-tag { font-style: normal; font-weight: 600; font-size: 0.68rem; padding: 0.05rem 0.4rem; border-radius: 5px; background: var(--ap-fundo); color: var(--ap-mudo); margin-right: 0.35rem; }
.ap-tag--cor { background: var(--ap-cor2); color: #2f2f31; }
.ap-tag--ok { background: #2f2f31; color: #fff; }
.ap-tag--alerta { background: var(--ap-cor); color: #fff; }

/* criança (topo do Início) */
.ap-filho { display: flex; gap: 0.75rem; align-items: center; background: var(--ap-cartao); border-radius: var(--ap-raio); padding: 0.75rem 0.9rem; margin-top: 0.4rem; }
.ap-filho__ava { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem;
  background: var(--ap-cor); color: #fff; }
.ap-filho strong { display: block; font-size: 1rem; font-weight: 600; }
.ap-filho small { color: var(--ap-mudo); font-size: 0.8rem; }
.ap-filhos { display: flex; gap: 0.4rem; overflow-x: auto; margin-top: 0.4rem; }
.ap-chip { flex: none; border: 0; background: var(--ap-cartao); color: var(--ap-texto); font: 600 0.85rem system-ui, sans-serif; padding: 0.35rem 0.85rem; border-radius: 99px; }
.ap-chip.is-on { background: var(--ap-cor); color: #fff; }

.ap-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; }
.ap-resumo button { text-align: left; background: var(--ap-cartao); border: 0; border-radius: var(--ap-raio); padding: 0.6rem 0.8rem; color: var(--ap-mudo); font: 500 0.8rem system-ui, sans-serif; }
.ap-resumo b { display: block; font-size: 1.35rem; font-weight: 700; color: var(--ap-texto); }

/* recado: título + uma linha; toque abre a janela */
button.ap-aviso { display: grid; gap: 0.1rem; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }

/* janela do recado (sobe de baixo, X para fechar) */
.ap-janela { position: fixed; inset: 0; z-index: 20; display: grid; align-items: end; }
.ap-janela__fundo { position: absolute; inset: 0; background: rgb(47 47 49 / 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ap-surge 0.2s ease-out; }
.ap-janela__caixa { position: relative; max-height: 82vh; overflow-y: auto; background: var(--ap-cartao); border-radius: 20px 20px 0 0;
  padding: 1.3rem 1.2rem calc(env(safe-area-inset-bottom, 0px) + 1.4rem); box-shadow: 0 -10px 30px rgb(0 0 0 / 0.2); animation: ap-sobe 0.25s cubic-bezier(.2,.8,.2,1);
  border-top: 4px solid var(--ap-cor2); }
.ap-janela__caixa h2 { font-size: 1.2rem; font-weight: 700; margin: 0.25rem 2.4rem 0.6rem 0; }
.ap-janela__txt { font-size: 0.98rem; line-height: 1.55; white-space: pre-line; }
.ap-janela__txt:has(p, ul, ol, h2, h3) { white-space: normal; }
.ap-janela__txt p { margin: 0 0 0.6rem; }
.ap-janela__txt h2, .ap-janela__txt h3 { font-size: 1.05rem; margin: 0.8rem 0 0.3rem; color: var(--ap-cor); }
.ap-janela__txt ul, .ap-janela__txt ol { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.ap-janela__txt blockquote { margin: 0.6rem 0; padding: 0.5rem 0.8rem; border-left: 4px solid var(--ap-cor2); background: var(--ap-fundo); border-radius: 0 8px 8px 0; }
.ap-janela__txt a { color: var(--ap-cor); font-weight: 600; }
.ap-janela--urg .ap-janela__caixa { border-top-color: var(--ap-cor); }
.ap-janela--urg .ap-janela__meta { color: var(--ap-cor); }

.ap-ativar { border-left-color: var(--ap-cor2); }
.ap-ativar > i:first-child { color: var(--ap-cor); }
.ap-fim { height: 1px; }

/* calendário: meses que já passaram descem e ficam apagadinhos */
.ap-passou { margin: 1.6rem 0 0; text-align: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ap-mudo); }
.ap-mes-passou { opacity: 0.55; }

/* divisões dos recados */
/* (Sandro: "parecia um scroll colado embaixo") → quebra linha, sem barra de rolagem, com respiro */
/* preenche de canto a canto: 3 por linha; a última linha com 2 divide ao meio, com 1 ocupa tudo (Sandro) */
.ap-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; overflow: visible; margin: 0.8rem 0 1rem; padding: 0; }
.ap-cats .ap-chip { grid-column: span 2; width: 100%; text-align: center; padding: 0.55rem 0.4rem; box-shadow: 0 2px 8px -4px rgb(47 47 49 / 0.35); white-space: nowrap; }
.ap-cats .ap-chip:nth-child(3n+1):nth-last-child(2), .ap-cats .ap-chip:nth-child(3n+2):last-child { grid-column: span 3; }
.ap-cats .ap-chip:nth-child(3n+1):last-child { grid-column: span 6; }
.ap-filhos { scrollbar-width: none; }
.ap-filhos::-webkit-scrollbar { display: none; }
.ap-cats .ap-chip b { display: inline-block; min-width: 1.1rem; padding: 0 0.3rem; margin-left: 0.2rem; border-radius: 99px; background: var(--ap-cor); color: #fff; font-size: 0.7rem; line-height: 1.1rem; }
.ap-cats .ap-chip.is-on b { background: var(--ap-cor2); color: #2f2f31; }
.ap-chip--urg { color: var(--ap-cor); }
.ap-aviso--urg .ap-aviso__topo b { color: var(--ap-cor); }
.ap-janela__meta { color: var(--ap-mudo); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.ap-janela__x { position: absolute; top: 0.9rem; right: 0.9rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--ap-fundo); color: var(--ap-texto); font-size: 1.2rem; }
.ap--travado { overflow: hidden; }
@keyframes ap-sobe { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ap-surge { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ap-janela__caixa, .ap-janela__fundo { animation: none; } }
.ap-aviso__topo { display: flex; justify-content: space-between; gap: 0.6rem; }
.ap-aviso__topo b { font-weight: 600; font-size: 0.95rem; }
.ap-aviso__topo small { flex: none; margin: 0; }
.ap-aviso__resumo { color: var(--ap-mudo); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-aviso[open] .ap-aviso__resumo { white-space: normal; }
.ap-aviso[open] .ap-aviso__resumo { display: none; }
.ap-aviso__texto { margin: 0.35rem 0 0; font-size: 0.9rem; white-space: pre-line; }
.ap-aviso--fixo .ap-aviso__topo b { color: var(--ap-cor); }

/* calendário: tabela — dia | o quê | tipo */
.ap-cal { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.6rem; align-items: center; }
.ap-cal__d { text-align: center; color: var(--ap-mudo); font-size: 0.68rem; text-transform: uppercase; line-height: 1.05; }
.ap-cal__d b { display: block; color: var(--ap-texto); font-size: 1.15rem; font-weight: 700; }
.ap-cal__t { font-size: 0.92rem; font-weight: 500; min-width: 0; }
.ap-cal__tipo { font-style: normal; font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 5px; color: #fff; background: var(--ap-cor); }
.ap-cal__tipo--feriado { background: var(--ap-erro); }
.ap-cal__tipo--reuniao { background: #2f2f31; }
.ap-cal__tipo--ferias  { background: var(--ap-cor2); color: #2f2f31; }
.ap-cal__tipo--passeio { background: var(--ap-cor2); color: #2f2f31; }
.ap-cal__tipo--aula    { background: #8e8e93; }

/* pares (boletim, cuidados): rótulo à esquerda, valor à direita */
.ap-par { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; font-size: 0.9rem; }
.ap-par > span { color: var(--ap-texto); }
.ap-par > b { font-weight: 500; color: var(--ap-mudo); text-align: right; }
.ap-par .ap-tag { margin: 0; }
.ap-parecer { font-size: 0.9rem; }
.ap-parecer small { margin: 0 0 0.2rem; }

/* pagamentos */
.ap-pag { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.ap-pag__t { font-size: 0.92rem; font-weight: 500; min-width: 0; }
.ap-pag__valor { font-weight: 700; font-size: 1rem; white-space: nowrap; text-align: right; }
.ap-pag__valor s { display: block; font-weight: 500; font-size: 0.75rem; color: var(--ap-mudo); }
.ap-pag--atrasado .ap-pag__valor { color: var(--ap-erro); }

.ap-app .ap-btn { margin-top: 1rem; }

/* ── Menu de baixo (barra de abas do iPhone) ── */
.ap-menu { position: fixed; inset-inline: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 0.3rem 0.2rem calc(env(safe-area-inset-bottom, 0px) + 0.25rem); background: color-mix(in srgb, var(--ap-cartao) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 0.5px solid var(--ap-linha); }
.ap-menu button { display: grid; justify-items: center; gap: 0.05rem; background: none; border: 0; padding: 0.2rem 0; font: 500 0.64rem system-ui, sans-serif; color: var(--ap-mudo); }
.ap-menu button i { font-size: 1.45rem; }
/* Pagamentos no meio, em destaque: bolha vermelha que sobe um pouco da barra */
.ap-menu .ap-menu__meio { position: relative; }
.ap-menu .ap-menu__meio i { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-top: -1.4rem; border-radius: 50%; font-size: 1.55rem;
  color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--ap-cor) 80%, #fff), var(--ap-cor)); box-shadow: 0 6px 16px -6px var(--ap-cor), 0 0 0 4px var(--ap-cartao); }
.ap-menu .ap-menu__meio.is-on { color: var(--ap-cor); }

/* botão de contorno (Avisar falta) */
.ap .ap-btn--linha { background: color-mix(in srgb, var(--ap-cartao) 85%, transparent); color: var(--ap-cor); box-shadow: inset 0 0 0 2px var(--ap-cor); margin-top: 1rem; }
.ap .ap-btn--linha + .ap-btn { margin-top: 0.6rem; }
.ap-form-falta .ap-btn { margin: 0; }

/* botão Boletim escolar: amarelo forte, letra vermelha, igual ao "Falar com a escola" */
.ap .ap-btn--boletim { background: linear-gradient(180deg, #ffd23a, var(--ap-cor2)); color: var(--ap-cor); font-weight: 800;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ap-cor2) 90%, #000); }
.ap .ap-btn--boletim + .ap-btn { margin-top: 0.6rem; }

/* destaque do boletim + eventos (28/10/2026) */
.ap-destaque { display: flex; width: 100%; gap: 0.7rem; align-items: center; text-align: left; margin-top: 0.6rem; padding: 0.85rem 0.9rem; border: 0; border-radius: var(--ap-raio);
  font: inherit; color: #2f2f31; background: linear-gradient(135deg, var(--ap-cor2), color-mix(in srgb, var(--ap-cor2) 70%, #fff)); box-shadow: 0 8px 20px -12px rgb(47 47 49 / 0.5); }
.ap-destaque > i:first-child { font-size: 1.8rem; color: var(--ap-cor); }
.ap-destaque span { flex: 1; }
.ap-destaque b { display: block; font-size: 1rem; }
.ap-destaque small { font-size: 0.8rem; opacity: 0.8; }
.ap-eventos { display: grid; gap: 0.8rem; }
.ap-evento { display: grid; width: 100%; padding: 0; border: 0; text-align: left; font: inherit; color: var(--ap-texto); border-radius: 16px; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--ap-cartao) 82%, transparent); box-shadow: 0 8px 22px -14px rgb(47 47 49 / 0.5); }
.ap-evento--passou { opacity: 0.55; }
/* moldura fixa 16:9; a foto fica presa dentro e é cortada para caber (cover) — nunca estoura (Sandro) */
.ap-evento__capa { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, var(--ap-cor2), color-mix(in srgb, var(--ap-cor) 35%, var(--ap-cor2))); }
.ap-evento__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-evento__capa > i { font-size: 3rem; color: #fff; opacity: 0.9; }
.ap-evento__data { position: absolute; top: 0.6rem; left: 0.6rem; background: #fff; color: #2f2f31; border-radius: 10px; padding: 0.25rem 0.6rem; text-align: center; font-size: 0.7rem;
  font-weight: 700; text-transform: uppercase; line-height: 1.05; box-shadow: 0 4px 10px rgb(0 0 0 / 0.2); }
.ap-evento__data b { display: block; font-size: 1.35rem; color: var(--ap-cor); }
.ap-evento__info { padding: 0.7rem 0.9rem 0.8rem; display: grid; gap: 0.15rem; }
.ap-evento__info b { font-size: 1rem; }
.ap-evento__info small { color: var(--ap-mudo); font-size: 0.8rem; }
.ap-janela__capa { width: calc(100% + 2.4rem); max-width: none; margin: -1.3rem -1.2rem 0.9rem; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; border-radius: 16px 16px 0 0; }
.ap-menu button.is-on { color: var(--ap-cor); }

/* documentos em PDF (28/10/2026) */
.ap-doc { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0.6rem; align-items: center; }
.ap-doc__ico { font-size: 1.4rem; color: var(--ap-erro); }
.ap-doc__t { font-size: 0.92rem; font-weight: 500; min-width: 0; }
.ap-doc--novo .ap-doc__t small { color: var(--ap-cor); font-weight: 600; }
.ap-doc__btn { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ap-fundo); color: var(--ap-cor); font-size: 1.1rem; text-decoration: none; }

.ap-vazio i { display: block; font-size: 2rem; margin-bottom: 0.3rem; }
.ap-btn i { font-size: 1.1rem; vertical-align: -0.15em; margin-right: 0.25rem; }

/* ── Instalar ── */
.ap-instalar { position: fixed; inset-inline: 0.7rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 4.2rem); z-index: 7; display: flex; flex-wrap: wrap;
  gap: 0.4rem; align-items: center; justify-content: space-between; padding: 0.6rem 0.8rem; border-radius: var(--ap-raio);
  background: var(--ap-cartao); box-shadow: 0 8px 28px rgb(0 0 0 / 0.18); font-weight: 600; font-size: 0.88rem; }
.ap-instalar small { flex-basis: 100%; font-weight: 500; color: var(--ap-mudo); }
.ap-entrar ~ .ap-instalar { bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }

/* 29/10/2026: desconto de pontualidade na mensalidade (verde, abaixo do vencimento) */
.ap-pag__desc { display: block; margin-top: .3rem; color: #15803d; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="dia"]) .ap-pag__desc { color: #4ade80; }
}
html[data-tema="noite"] .ap-pag__desc { color: #4ade80; }
/* 29/10/2026: aba Pagamentos — resumo (total em aberto, atrasados) e o aviso do desconto */
.ap-resumo--pag > div { background: var(--ap-cartao); border-radius: var(--ap-raio); padding: 0.6rem 0.8rem; color: var(--ap-mudo); font: 500 0.8rem system-ui, sans-serif; }
.ap-nota--desc { padding: 0.6rem 0.8rem; border-radius: var(--ap-raio); background: rgba(22, 163, 74, .12); color: #15803d; font-weight: 600; text-align: left; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="dia"]) .ap-nota--desc { color: #4ade80; }
}
html[data-tema="noite"] .ap-nota--desc { color: #4ade80; }
/* 29/10/2026: lista de material (marcar o que já comprou) e recibo de cada pagamento pago */
.ap-mat-dest { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ap-mat-dest small { display: block; color: var(--ap-mudo); }
.ap-mat { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.ap-mat input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--ap-cor); }
/* Sandro (29/10): a lista mostra TUDO sempre; o que a família já tem fica marcado (check verde + "já tenho"), sem riscar nem sumir */
.ap-mat input { accent-color: #16a34a; }
.ap-mat input:checked + span::after { content: "já tenho"; margin-left: .5rem; padding: .1rem .45rem; border-radius: 99px; background: rgba(22, 163, 74, .14); color: #15803d; font-size: .72rem; font-weight: 700; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="dia"]) .ap-mat input:checked + span::after { color: #4ade80; }
}
html[data-tema="noite"] .ap-mat input:checked + span::after { color: #4ade80; }
.ap-pag__recibo { display: block; margin-top: .2rem; font-size: .78rem; font-weight: 600; color: var(--ap-cor); text-decoration: none; }
.ap-mat-parte { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ap-cor); }

/* 29/10/2026 (Sandro: "faça o financeiro no app"): botão Pagar, formas de pagar e a janela de pagamento
   (Pix da escola com QR e copia e cola · cartão em breve · na secretaria) com o envio do comprovante */
.ap-resumo--pag { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-resumo--pag b { font-size: 1.05rem; }
.ap-pag__pagar { display: block; margin: .35rem 0 0 auto; padding: .4rem 1rem; border: 0; border-radius: 8px; background: var(--ap-cor); color: #fff; font: 700 .82rem system-ui, sans-serif; cursor: pointer; }
.ap-pag__comp { display: block; margin-top: .3rem; color: #15803d; font-weight: 600; }
.ap-forma { display: flex; align-items: center; gap: .75rem; }
.ap-forma > i { font-size: 1.4rem; color: var(--ap-cor); flex: none; }
.ap-forma small { display: block; color: var(--ap-mudo); font-size: .8rem; }
.ap-pagar__valor { font-size: 2rem; font-weight: 800; text-align: center; margin: .2rem 0 .8rem !important; }
.ap-pagar__formas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; padding: .25rem; border-radius: 12px; background: var(--ap-fundo); margin-bottom: 1rem; }
.ap-pagar__formas button { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .55rem .3rem; border: 0; border-radius: 10px; background: none; color: var(--ap-mudo); font: 600 .8rem system-ui, sans-serif; cursor: pointer; }
.ap-pagar__formas button i { font-size: 1.35rem; }
.ap-pagar__formas button.is-on { background: var(--ap-cartao); color: var(--ap-cor); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.ap-pagar__qr { width: min(240px, 70vw); margin: 0 auto .8rem; padding: .6rem; background: #fff; border-radius: 12px; }
.ap-pagar__qr svg { display: block; width: 100%; height: auto; }
.ap-pagar__dica { font-size: .88rem; color: var(--ap-mudo); text-align: center; }
.ap-pagar__codigo { width: 100%; font: 500 .75rem ui-monospace, monospace; padding: .6rem; border: 0; border-radius: 10px; background: var(--ap-fundo); color: var(--ap-texto); resize: none; word-break: break-all; margin-bottom: .6rem; }
.ap-pagar__comp { cursor: pointer; }
.ap-pagar__comp.is-enviando { opacity: .55; pointer-events: none; }
.ap-pagar__obs { display: block; text-align: center; color: var(--ap-mudo); margin-top: .5rem; font-size: .78rem; }
.ap-pagar__em-breve { display: grid; justify-items: center; gap: .3rem; text-align: center; color: var(--ap-mudo); font-size: .9rem; margin: .4rem 0 1rem !important; }
.ap-pagar__em-breve i { font-size: 2.2rem; color: var(--ap-cor); }
.ap-pagar__em-breve b { color: var(--ap-texto); font-size: 1rem; }
.ap-pagar__aviso { text-align: left; padding: .7rem .8rem; border-radius: var(--ap-raio); background: var(--ap-fundo); }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="dia"]) .ap-pag__comp { color: #4ade80; }
}
html[data-tema="noite"] .ap-pag__comp { color: #4ade80; }

/* 29/10/2026 (Sandro: "Pix e cartão pelo Mercado Pago, com resposta — deixa todo o design pronto"): passos do Pix,
   Pix gerado esperando a confirmação, formulário do cartão com o cartão desenhado, processando, aprovado e recusado */
.ap-pagar__demo { margin: 0 0 .8rem !important; padding: .55rem .75rem; border-radius: 10px; background: color-mix(in srgb, var(--ap-cor2) 30%, transparent); color: var(--ap-texto) !important; font-size: .82rem; font-weight: 600; }
.ap-pagar__demo i { color: var(--ap-cor); }
.ap-pagar__passos { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: .55rem; }
.ap-pagar__passos li { counter-increment: passo; display: flex; align-items: center; gap: .65rem; font-size: .92rem; }
.ap-pagar__passos li::before { content: counter(passo); flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--ap-cor); color: #fff; font-weight: 700; font-size: .8rem; }
.ap-pagar__seguro { margin: 1rem 0 0 !important; text-align: center; font-size: .78rem; color: var(--ap-mudo); }
.ap-pagar__valor--p { font-size: 1.4rem; margin-bottom: .6rem !important; }
.ap-pagar__espera { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .88rem; }
.ap-pulso { flex: none; width: .65rem; height: .65rem; border-radius: 50%; background: var(--ap-cor2); animation: ap-pulso 1.4s infinite; }
@keyframes ap-pulso { 0% { box-shadow: 0 0 0 0 rgb(252 183 4 / .7); } 70% { box-shadow: 0 0 0 10px rgb(252 183 4 / 0); } 100% { box-shadow: 0 0 0 0 rgb(252 183 4 / 0); } }
.ap-pagar__estado { display: grid; justify-items: center; text-align: center; gap: .35rem; padding: 1.2rem 0 .4rem; }
.ap-janela__txt .ap-pagar__estado h3 { margin: .5rem 0 0; font-size: 1.25rem; color: var(--ap-texto); }
.ap-janela__txt .ap-pagar__estado--erro h3 { color: var(--ap-erro); }
.ap-pagar__estado p { color: var(--ap-mudo); margin: 0 0 .6rem !important; }
.ap-pagar__estado p b { color: var(--ap-texto); }
.ap-pagar__estado .ap-btn { width: 100%; }
.ap-girando { width: 3rem; height: 3rem; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--ap-cor) 18%, transparent); border-top-color: var(--ap-cor); animation: ap-gira .8s linear infinite; }
@keyframes ap-gira { to { transform: rotate(360deg); } }
.ap-pagar__selo { width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; color: #fff; background: #16a34a; animation: ap-selo .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.ap-pagar__estado--erro .ap-pagar__selo { background: var(--ap-erro); }
@keyframes ap-selo { from { transform: scale(.3); opacity: 0; } }
/* o cartão desenhado acompanha o que é digitado (número, bandeira, nome, validade) */
.ap-cc { position: relative; aspect-ratio: 1.586; width: min(100%, 320px); margin: 0 auto 1rem; padding: 1rem 1.1rem; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, #2f2f31 0%, #4a4a4f 55%, color-mix(in srgb, var(--ap-cor) 70%, #2f2f31) 100%);
  box-shadow: 0 10px 24px rgb(0 0 0 / .22); display: grid; grid-template-rows: auto 1fr auto; font-family: ui-monospace, monospace; }
.ap-cc__chip { width: 2.3rem; height: 1.7rem; border-radius: 5px; background: linear-gradient(135deg, #f7d774, #c9a227); }
.ap-cc__band { position: absolute; top: 1rem; right: 1.1rem; font: 700 .9rem system-ui, sans-serif; }
.ap-cc__num { align-self: center; font-size: 1.15rem; letter-spacing: .08em; white-space: nowrap; }
.ap-cc__rodape { display: flex; justify-content: space-between; gap: .6rem; font-size: .72rem; letter-spacing: .06em; }
.ap-cc__rodape span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-cc-form .ap-campo { margin: .55rem 0; }
.ap-campo-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ap-campo input { width: 100%; }
.ap-campo select { font: inherit; font-size: 1rem; font-weight: 500; padding: .7rem .85rem; border-radius: 10px; border: 0; background: var(--ap-fundo); color: var(--ap-texto); }
.ap-campo select:focus { outline: 2px solid var(--ap-cor); }
.ap-cc-form .ap-btn { margin-top: .6rem; }
/* tablet e computador: o cartão desenhado ao lado dos campos (a janela não vira uma tela comprida) */
@media (min-width: 700px) {
  .ap-cc-form { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 1.2rem; align-items: start; }
  .ap-cc-form > * { grid-column: 2; }
  .ap-cc-form > .ap-cc { grid-column: 1; grid-row: 1 / span 7; position: sticky; top: 0; margin: .55rem 0 0; padding: .8rem .9rem; }
  .ap-cc__num { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .ap-pulso, .ap-girando, .ap-pagar__selo { animation: none; } }

/* ══════════ Responsivo (29/10/2026, Sandro: "vai ser instalado no computador, no tablet e em celular de formato diferente
   — tem que ser responsivo"). Celular continua igual; tablet e computador aproveitam a largura em vez de ficar vazio. ══════════ */
.ap-pc { display: none !important; }                       /* o app agora funciona também no computador */
@media (min-width: 820px) and (hover: hover) and (pointer: fine) { .ap-cel { display: block; } }

/* tablet e telas largas: conteúdo centralizado, duas colunas, menu de baixo centralizado, janelas no meio */
@media (min-width: 700px) {
  .ap-entrar { max-width: 460px; margin: 0 auto; padding-top: 3rem; }
  .ap-app { max-width: 1080px; margin: 0 auto; padding-inline: 1.6rem; }
  .ap-app > section[data-aba="inicio"], .ap-app > section[data-aba="pagamentos"], .ap-app > section[data-aba="calendario"],
  .ap-app > section[data-aba="boletim"] { columns: 2; column-gap: 1.2rem; }
  .ap-app > section > * { break-inside: avoid; }
  .ap-sec { break-after: avoid; }
  .ap-app > section[data-aba="inicio"] > .ap-logo-grande { margin-top: 0; }
  /* recados, ficha e faltas: uma coluna mais estreita, fácil de ler */
  .ap-app > section[data-aba="recados"], .ap-app > section[data-aba="ficha"], .ap-app > section[data-aba="faltas"] { max-width: 760px; margin-inline: auto; }
  /* lista de material: os itens em duas colunas dentro do mesmo cartão */
  .ap-app > section[data-aba="material"] .ap-grupo { columns: 2; column-gap: 0; }
  .ap-app > section[data-aba="material"] .ap-linha { break-inside: avoid; }
  .ap-eventos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-menu { max-width: 640px; margin-inline: auto; border-radius: 18px 18px 0 0; border: 0.5px solid var(--ap-linha); border-bottom: 0; }
  .ap-janela { align-items: center; justify-items: center; }
  .ap-janela__caixa { width: min(600px, 92vw); max-height: 86vh; border-radius: 20px; }
  .ap-topo { padding-inline: max(1rem, calc((100% - 1080px) / 2 + 1.6rem)); }
}

/* computador: o menu vira uma coluna à esquerda (como um sistema), o conteúdo ocupa o resto */
@media (min-width: 1100px) {
  .ap-menu { top: calc(env(safe-area-inset-top, 0px) + 3.6rem); bottom: 0; right: auto; width: 230px; max-width: none; margin: 0;
    display: flex; flex-direction: column; gap: 0.25rem; padding: 1.2rem 0.8rem; border-radius: 0; border: 0; border-right: 0.5px solid var(--ap-linha); }
  .ap-menu button { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border-radius: 12px; font-size: 0.98rem; text-align: left; cursor: pointer; }
  .ap-menu button:hover { background: color-mix(in srgb, var(--ap-cor) 8%, transparent); }
  .ap-menu button.is-on { background: color-mix(in srgb, var(--ap-cor) 14%, transparent); color: var(--ap-cor); }
  .ap-menu .ap-menu__meio i { width: auto; height: auto; margin: 0; border-radius: 0; font-size: 1.45rem; background: none; box-shadow: none; color: inherit; }
  .ap-menu .ap-menu__n { position: static; margin-left: auto; }
  .ap-menu__rec { position: static; }
  .ap-app { max-width: none; margin: 0 0 0 230px; padding: 1.2rem max(2rem, calc((100vw - 230px - 1100px) / 2)) 3rem; }
  .ap-app > section[data-aba="material"] .ap-grupo { columns: 3; }
  .ap-eventos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-topo { padding-inline: 1.6rem; }
}
/* ══════════ Animações (29/10/2026, Sandro: "o app está muito estático, dá umas animações"). Regra dele: em sequência,
   SOBREPOSTAS — o próximo começa antes do anterior terminar (duração 0,5 s, atraso 70 ms). Quem pediu menos
   movimento no aparelho (prefers-reduced-motion) vê tudo parado. ══════════ */

/* entrada de cada aba: os blocos sobem um após o outro; as linhas de cada grupo deslizam logo atrás */
.ap-entra > * { animation: ap-entra .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--ap-i, 0) * 70ms); }
.ap-entra :is(.ap-grupo, .ap-eventos) > * { animation: ap-linha .45s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--ap-i, 0) * 70ms + var(--ap-j, 0) * 45ms + 110ms); }
@keyframes ap-entra { from { opacity: 0; transform: translateY(16px) scale(.985); } }
@keyframes ap-linha { from { opacity: 0; transform: translateX(-10px); } }

/* placas "carregando" enquanto os dados chegam */
.ap-esq { display: grid; gap: .7rem; padding-top: .5rem; }
.ap-esq span { display: block; height: 4.4rem; border-radius: var(--ap-raio); background-size: 200% 100%; animation: ap-brilho 1.2s linear infinite;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--ap-cartao) 55%, transparent) 25%, var(--ap-cartao) 50%, color-mix(in srgb, var(--ap-cartao) 55%, transparent) 75%); }
.ap-esq span:first-child { width: min(70%, 260px); height: 8.5rem; margin: 0 auto .4rem; }
.ap-esq span:nth-child(4) { height: 3.4rem; }
@keyframes ap-brilho { to { background-position: -200% 0; } }

/* toque: afunda um pouquinho, como app nativo; no computador, sobe ao passar o mouse */
.ap-filho, .ap-falta, .ap-resumo > *, .ap-btn, .ap-pag__pagar, .ap-chip, .ap-evento, .ap-mat-dest, button.ap-aviso, .ap-menu button, .ap-sino, .ap-mat {
  transition: transform .16s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease; }
:is(.ap-filho, .ap-falta, .ap-resumo button, .ap-btn, .ap-pag__pagar, .ap-chip, .ap-evento, .ap-mat-dest, button.ap-aviso, .ap-mat, .ap-sino):active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  :is(.ap-filho, .ap-falta, .ap-resumo button, .ap-evento, .ap-mat-dest):hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgb(47 47 49 / .35); }
  :is(.ap-btn, .ap-pag__pagar):hover { transform: translateY(-1px); filter: brightness(1.05); }
}

/* menu: o ícone da aba escolhida dá um pulinho; o botão do meio "respira" quando há conta em aberto */
.ap-menu button.is-on i { animation: ap-pula .5s cubic-bezier(.2, 1.4, .4, 1); }
.ap-menu .ap-menu__meio.tem-aberto:not(.is-on) i { animation: ap-respira 2.8s ease-in-out infinite; }
@keyframes ap-pula { 0% { transform: scale(.7) translateY(4px); } 60% { transform: scale(1.15) translateY(-3px); } 100% { transform: none; } }
@keyframes ap-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* logomarca flutua de leve; ficha incompleta chama atenção de tempos em tempos */
.ap-logo-grande { animation: ap-flutua 6s ease-in-out infinite; }
.ap-entra > .ap-logo-grande { animation: ap-entra .5s cubic-bezier(.2, .8, .2, 1) both, ap-flutua 6s ease-in-out .6s infinite; animation-delay: calc(var(--ap-i, 0) * 70ms), .6s; }
@keyframes ap-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ap-falta > i:first-child { animation: ap-atencao 3s ease-in-out infinite; }
@keyframes ap-atencao { 0%, 80%, 100% { transform: scale(1); } 86% { transform: scale(1.22) rotate(-8deg); } 92% { transform: scale(1.1) rotate(6deg); } }

/* botão Pagar: um brilho passa de tempos em tempos */
.ap-pag__pagar { position: relative; overflow: hidden; }
.ap-pag__pagar::after { content: ''; position: absolute; inset: 0; transform: translateX(-120%); animation: ap-reflexo 3.2s ease-in-out infinite;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%); }
@keyframes ap-reflexo { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* lista de material: o "já tenho" do item que acabou de marcar estala */
.ap-mat.is-novo input:checked + span::after { display: inline-block; animation: ap-estalo .4s cubic-bezier(.2, 1.5, .4, 1); }
.ap-mat.is-novo input:checked { animation: ap-estalo .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes ap-estalo { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* chips de filho/categoria: troca suave */
.ap-chip.is-on { box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ap-cor) 60%, transparent); }

/* janela (recado, evento, pagar): desce ao fechar */
.ap-janela.is-saindo .ap-janela__caixa { animation: ap-desce .2s ease-in forwards; }
.ap-janela.is-saindo .ap-janela__fundo { animation: ap-some .2s ease-in forwards; }
@keyframes ap-desce { to { transform: translateY(100%); opacity: .6; } }
@keyframes ap-some { to { opacity: 0; } }
@media (min-width: 700px) { @keyframes ap-desce { to { transform: translateY(24px) scale(.97); opacity: 0; } } }

/* troca de conteúdo dentro da janela de pagar (Pix gerado, processando, aprovado) */
.ap-pagar > * { animation: ap-entra .35s cubic-bezier(.2, .8, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .ap-entra > *, .ap-entra :is(.ap-grupo, .ap-eventos) > *, .ap-esq span, .ap-menu button.is-on i, .ap-menu .ap-menu__meio.tem-aberto i, .ap-logo-grande,
  .ap-entra > .ap-logo-grande, .ap-falta > i:first-child, .ap-pag__pagar::after, .ap-mat.is-novo input, .ap-mat.is-novo input + span::after,
  .ap-janela.is-saindo .ap-janela__caixa, .ap-janela.is-saindo .ap-janela__fundo, .ap-pagar > * { animation: none !important; }
  :is(.ap-filho, .ap-falta, .ap-resumo button, .ap-btn, .ap-pag__pagar, .ap-chip, .ap-evento, .ap-mat-dest, button.ap-aviso, .ap-mat, .ap-sino) { transition: none; transform: none !important; }
}

/* 29/10/2026 (Sandro: "todo textarea com negrito, itálico, a barrinha em cima"): caixa de texto da ficha com barrinha
   leve (sem biblioteca) e texto formatado vindo da escola (parecer do boletim) */
.ap-campo2--rico { align-items: start; }
.ap-rico { display: grid; gap: .35rem; min-width: 0; }
.ap-rico__barra { display: flex; gap: .25rem; }
.ap-rico__barra button { min-width: 2.1rem; height: 2rem; padding: 0 .45rem; border: 0; border-radius: 8px; background: var(--ap-fundo); color: var(--ap-texto);
  font: 600 .9rem system-ui, sans-serif; cursor: pointer; }
.ap-rico__barra button.is-on { background: var(--ap-cor); color: #fff; }
.ap-rico__area { min-height: 4.2rem; padding: .5rem .6rem; border-radius: 8px; background: var(--ap-fundo); color: var(--ap-texto); font-size: .92rem; line-height: 1.45; outline: none; overflow-wrap: anywhere; }
.ap-rico__area:focus { box-shadow: 0 0 0 2px var(--ap-cor); }
.ap-rico__area:empty::before { content: attr(data-vazio); color: var(--ap-cor); font-weight: 600; }
.ap-rico__area p, .ap-rico__area div, .ap-rico-txt p { margin: 0 0 .25rem; }
.ap-rico__area ul, .ap-rico__area ol, .ap-rico-txt ul, .ap-rico-txt ol { margin: .2rem 0; padding-left: 1.2rem; }
.ap-rico-txt > :last-child { margin-bottom: 0; }