/* ── Splash, la mascota, cuando hay que esperar ──
   Versión mínima de lo que MiSplash Negocios tiene como componente: acá
   alcanza con una pantalla de espera y tres estados. Los colores salen de las
   variables de im.css, así que se ve bien en los cuatro temas y no define ni
   un matiz propio (SPEC §14).

   Se enciende sola: cualquier formulario o enlace con data-cargando la muestra
   (splash.js). No se usa para cosas que tardan un parpadeo —eso pone nervioso,
   no tranquiliza—, sino para lo que de verdad lleva segundos: armar un ZIP,
   un respaldo, una restauración. */

.sp-espera {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: sp-entrar .22s ease-out forwards;
}
.sp-espera[hidden] { display: none; }

.sp-caja { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

/* La mascota flota, como en la pantalla de error: es el mismo gesto de marca. */
.sp-figura { position: relative; width: 120px; height: 120px; }
.sp-figura img { width: 100%; height: 100%; object-fit: contain; animation: sp-flotar 3s ease-in-out infinite; }
.sp-sombra {
  width: 70px; height: 8px; margin: -6px auto 0; border-radius: 50%;
  background: color-mix(in srgb, var(--bordo-texto) 30%, transparent);
  filter: blur(4px); animation: sp-sombra 3s ease-in-out infinite;
}

.sp-texto { margin: 0; font-size: 14px; color: var(--crema); max-width: 28ch; line-height: 1.5; }

/* Tres puntitos: la señal de que algo sigue pasando aunque no haya novedades. */
.sp-puntos { display: flex; gap: 6px; }
.sp-puntos span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bordo-texto);
  animation: sp-punto 1.2s ease-in-out infinite;
}
.sp-puntos span:nth-child(2) { animation-delay: .15s; }
.sp-puntos span:nth-child(3) { animation-delay: .3s; }

@keyframes sp-entrar { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-flotar { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes sp-sombra { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.8); opacity: .5; } }
@keyframes sp-punto { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Quien pidió menos movimiento ve lo mismo, quieto. */
@media (prefers-reduced-motion: reduce) {
  .sp-espera, .sp-figura img, .sp-sombra, .sp-puntos span { animation: none; }
}