/* ----------------------------------------------------
   Etcétera Marketing – Preloader Cliente
   ---------------------------------------------------- */

   #emw-client-preloader {
    position: fixed;
    inset: 0;
    background: #ffffff; /* puedes hacer configurable */
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;

    /* transición cuando desaparece */
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.35s ease, visibility 0.35s ease;

    /* tamaño configurable desde inline CSS */
    --emw-size: 80px;
}

/* Ocultación */
#emw-client-preloader.emw-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* contenedor interno */
.emw-client-preloader-inner {
    width: var(--emw-size);
    height: var(--emw-size);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* imagen del usuario */
.emw-client-preloader-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    /* animación base: se sobrescribe por JS */
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* ---- Animaciones ---- */

/* fade */
@keyframes emw-fade {
    0%   { opacity: 0.2; }
    50%  { opacity: 1; }
    100% { opacity: 0.2; }
}

/* pulse */
@keyframes emw-pulse {
    0%   { transform: scale(0.9); opacity: 0.6; }
    50%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.6; }
}

/* ping */
@keyframes emw-ping {
    0%   { transform: scale(0.7); opacity: 1; }
    80%  { transform: scale(1.4); opacity: 0; }
    100% { opacity: 0; }
}

/* scale */
@keyframes emw-scale {
    0%   { transform: scale(0.8); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(0.8); }
}

/* rotate */
@keyframes emw-rotate {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}