/* ZAME - Motion compartido: frasco mini (botones) y fundido de imagenes */

/* Frasco mini: indicador de "procesando" dentro de botones. Hereda el color del texto. */
.zm-mini { position: relative; display: inline-block; flex: none; width: 14px; height: 16.3px; margin-right: 10px; vertical-align: -3px; }
.zm-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; }
.zm-mini .zm-shell { opacity: .28; }
.zm-mini .zm-fill { clip-path: inset(100% 0 0 0); animation: zm-fill 1.3s cubic-bezier(.77, 0, .175, 1) infinite; }
@keyframes zm-fill { 0% { clip-path: inset(100% 0 0 0); } 78%, 100% { clip-path: inset(0 0 0 0); } }

/* Imagenes diferidas: aparecen con fundido cuando terminan de cargar */
img[loading="lazy"]:not(.zm-loaded) { opacity: 0; }
img[loading="lazy"] { transition: opacity .45s cubic-bezier(.23, 1, .32, 1); }

@media (prefers-reduced-motion: reduce) {
    .zm-mini .zm-fill { animation: none; clip-path: inset(40% 0 0 0); }
    img[loading="lazy"] { transition: none; }
}