/* AgendaFlow — abertura v7 "a agenda se organiza" (PWA do painel).
   Só `transform`/`opacity` são animados. Linha do tempo (s):
   0.00 os dias do mês entram espalhados · 0.15 encaixam com mola no calendário
   0.75 dias agendados acendem desenhando um ✓ · 1.15 o calendário se recolhe
   1.26 nasce o ícone · 1.38 o nome sobe · 1.52 brilho · 2.20 fim da cena
   Toda a coreografia roda no player (Web Animations), não em CSS: se o app
   reanexar a camada durante a hidratação, a cena continua sem recomeçar.
   Saída: o azulejo do ícone se dissolve e só a logo voa até a logo do app. */

html.af-lock,html.af-lock body{overflow:hidden!important}
.af{--ink:#0b1a3a;--blue:#1f6bff;--cyan:#19c6ff;--deep:#0b3fd9;--std:cubic-bezier(.2,.8,.2,1);
  position:fixed;inset:0;z-index:2147483000;overflow:hidden;cursor:default;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
.af *{box-sizing:border-box}
.af-bg{position:absolute;inset:0;background:#fff}
.af-glow{position:absolute;left:50%;top:42%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,107,255,.16),rgba(25,198,255,.06) 45%,transparent 70%);
  opacity:0}

/* Calendário: 7 dias x 5 semanas, centrado em 42% da altura. */
.af-dow{position:absolute;left:50%;top:42%;display:flex;gap:6px;margin:-110px 0 0 -123px;opacity:0}
.af-dow span{width:30px;text-align:center;font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.06em;color:var(--blue)}
.af-grid{position:absolute;left:50%;top:42%;width:0;height:0}
.af-d{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:9px;
  background:#eef4ff;box-shadow:inset 0 0 0 1px #d5e3fb;color:#6b7fa3;
  font-weight:600;font-size:11px;line-height:30px;text-align:center;font-variant-numeric:tabular-nums;opacity:0}
.af-d.out{background:#f7f9fe;box-shadow:inset 0 0 0 1px #e6edf9;color:#b3c0d6}
.af-d b{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--cyan),var(--blue) 58%,var(--deep));
  box-shadow:0 8px 16px -8px rgba(31,107,255,.8);color:#fff;font-weight:700;opacity:0}

/* Ícone do app: azulejo branco + logo. A logo é quem voa na saída. */
.af-mark{position:absolute;left:50%;top:42%;width:112px;height:112px;margin:-56px 0 0 -56px;transform-origin:50% 50%;
  opacity:0}
.af-tile{position:absolute;inset:0;border-radius:30px;background:#fff;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(31,107,255,.1),0 22px 44px -16px rgba(31,107,255,.45)}
.af-shine{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  transform:translateX(-120%)}
.af-logo{position:absolute;left:50%;top:50%;width:78px;height:54.7px;margin:-27.35px 0 0 -39px;
  background:var(--af-logo) center/contain no-repeat;transform-origin:50% 50%}

.af-word{position:absolute;left:0;right:0;top:calc(42% + 84px);height:50px;overflow:hidden;text-align:center}
.af-word span{display:inline-block;font-weight:800;font-size:38px;line-height:50px;letter-spacing:-.045em;color:var(--ink);
  transform:translateY(110%)}
.af-word b{font-weight:800;color:var(--blue)}

/* Movimento reduzido: só o quadro final (ícone + nome), sem trajetórias. */
@media (prefers-reduced-motion:reduce){
  .af-glow{opacity:1}
  .af-dow,.af-d{opacity:0}
  .af-mark{opacity:1}
  .af-word span{transform:none}
}