/* 🔐 Karpus Kids — Login page styles
   Estilos previamente inline en login.html; externalizados para una CSP restrictiva. */

* { font-family: 'Nunito', sans-serif; }

@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp .5s ease both; }
.fade-up-2 { animation: fadeUp .5s .1s ease both; }
.fade-up-3 { animation: fadeUp .5s .2s ease both; }

@keyframes wiggle { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.wiggle:hover { animation: wiggle .4s ease; }

.kk .k1{color:#f97316} .kk .k2{color:#3b82f6} .kk .k3{color:#ec4899}
.kk .k4{color:#22c55e} .kk .k5{color:#f97316} .kk .k6{color:#3b82f6}
.kk .k7{color:#22c55e} .kk .k8{color:#ec4899} .kk .k9{color:#3b82f6} .kk .k10{color:#f97316}

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #f8fafc inset !important; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; }

@keyframes bannerSlide {
  from { opacity:0; transform:translateY(60px) scale(0.92); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
.pwa-banner-inner { animation: bannerSlide .5s cubic-bezier(0.34,1.56,0.64,1) both; }

@keyframes iconBounce {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-8px) rotate(3deg); }
}
.pwa-icon-bounce { animation: iconBounce 1.5s ease-in-out infinite; }

/* ── Banner grande de suspensión del servicio (sube desde abajo) ── */
@keyframes suspSlideUp {
  from { transform: translateY(130%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.susp-banner { will-change: transform, opacity; }
.susp-banner-open { animation: suspSlideUp .65s cubic-bezier(.16,1,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .susp-banner-open { animation-duration: .01s; }
}