/* ============================================================
   Skeleton / shimmer global para imágenes mientras cargan.
   El CDN interno suele tardar, así que toda imagen de contenido
   muestra un brillo "newspaper" hasta que termina de cargar.
   Lo aplica rs-skeleton.js agregando la clase .rs-skel (y .rs-skel--listo
   al terminar). No requiere tocar cada <img>.
   ============================================================ */

/* Oculta el texto alt (el nombre del archivo) mientras la imagen carga, en TODA
   imagen de contenido, tenga o no caja reservada. El skeleton se ve limpio.
   Al cargar (o fallar), rs-skeleton.js quita la clase y se restaura el alt. */
.rs-cargando {
  color: transparent !important;
  font-size: 0 !important;
}

/* Shimmer: solo lo agrega el JS donde la imagen ya tiene caja reservada (galería,
   avatar, flyer con aspect-ratio); si no, daría un cuadradito que salta. */
.rs-skel {
  background-color: color-mix(in srgb, var(--rs-petrol-700, #2b4a4f) 12%, var(--rs-marfil-200, #efe9dd));
  background-image: linear-gradient(
      100deg,
      transparent 20%,
      color-mix(in srgb, var(--rs-marfil-50, #ffffff) 60%, transparent) 50%,
      transparent 80%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  animation: rs-skel-shimmer 1.25s ease-in-out infinite;
}

@keyframes rs-skel-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-skel { animation-duration: 2.4s; }
}