/* ============================================================
   div_mensaje_espera_time_dom — componente de mensaje de espera
   Todos los selectores están encapsulados bajo la clase raíz.
   ============================================================ */

.div_mensaje_espera_time_dom {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 10px;
    background: #f5f7ff;
    max-width: 460px;
    box-sizing: border-box;
    animation: _espera__fadein 0.28s ease forwards;
}

/* ── icono giratorio ── */

.div_mensaje_espera_time_dom__icono {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-azul);
    animation: _espera__spin 0.9s linear infinite;
}

/* ── cuerpo: texto + puntos ── */

.div_mensaje_espera_time_dom__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.div_mensaje_espera_time_dom__texto {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-azul);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── tres puntos en loop ── */

.div_mensaje_espera_time_dom__dots {
    display: flex;
    gap: 5px;
    align-items: center;
}

.div_mensaje_espera_time_dom__dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-azul);
    animation: _espera__bounce 1.1s ease-in-out infinite;
}

.div_mensaje_espera_time_dom__dots span:nth-child(2) {
    animation-delay: 0.18s;
}

.div_mensaje_espera_time_dom__dots span:nth-child(3) {
    animation-delay: 0.36s;
}

/* ── salida ── */

.div_mensaje_espera_time_dom--saliendo {
    animation: _espera__fadeout 0.28s ease forwards;
}

/* ============================================================
   @keyframes — todos con prefijo _espera__ para no colisionar
   ============================================================ */

@keyframes _espera__fadein {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes _espera__fadeout {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-5px);
    }
}

@keyframes _espera__spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes _espera__bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spw-in    { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
@keyframes spw-pulse { 0%,100%{opacity:.82} 50%{opacity:1} }
@keyframes spw-dot   { 0%,60%,100%{transform:translateY(0);opacity:.35} 30%{transform:translateY(-4px);opacity:1} }

.str_wait_format {
    display      : inline-flex;
    align-items  : center;
    gap          : .55em;
    padding      : .6em 1em;
    border-radius: .85rem;
    border       : none;
    background             : rgba(255,255,255,.07);
    backdrop-filter        : blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow   :
            0 2px 14px rgba(0,0,0,.22),
            0 1px  3px rgba(0,0,0,.15),
            inset 0  1px 0 rgba(255,255,255,.12),
            inset 0 -1px 0 rgba(0,0,0,.10);
    color        : rgba(236,240,241,.70);
    font-size    : .92em;
    line-height  : 1;
    animation    : spw-in .18s ease-out both,
    spw-pulse 2.2s ease-in-out .18s infinite;
}
.spw-label { font-size:.88em; white-space:nowrap; }
.spw-dots  { display:inline-flex; align-items:center; gap:.22em; }
.spw-dots span {
    display      : block;
    width        : .38em;
    height       : .38em;
    border-radius: 50%;
    background   : rgba(236,240,241,.85);
    will-change  : transform;
    animation    : spw-dot 1.3s ease-in-out infinite;
}
.spw-dots span:nth-child(2) { animation-delay: .18s; }
.spw-dots span:nth-child(3) { animation-delay: .36s; }

/* light */
.light .str_wait_format {
    background:linear-gradient(135deg,rgba(235,228,255,.55),rgba(225,238,255,.55));
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:0 2px 12px rgba(110,80,200,.09),inset 0 1px 0 rgba(255,255,255,.9);
    color:rgba(38,50,56,.6);
}
.light .spw-dots span { background:rgba(38,50,56,.5); }

@media(prefers-reduced-motion:reduce){
    .str_wait_format { animation:spw-in .18s ease-out both; }
    .spw-dots span   { animation:none; opacity:.5; }
}