/* ==========================================================================
   KDS Loader — los 4 puntitos que dicen "esperá, estoy trabajando".
   ==========================================================================

   Uso:   <div class="ds-loader"><span></span><span></span><span></span><span></span></div>
   Con texto: envolverlo en <div class="ds-loader-wrap"> ... <p>Texto</p></div>
   En un botón: ponerlo adentro y deshabilitar el botón mientras espera.

   Vivía en admin/theme-buttons.css, que sólo carga el panel: la tienda no tenía cómo usarlo y
   seguía con ruedas girando (#907). La pieza es la misma para los dos; cada uno la viste con
   sus colores por las cuatro variables de abajo (la tienda, en components/tienda-kds.css).

   Variables:
     --kds-loader-1..4   color de cada puntito (el panel usa teal, verde, rosa y ámbar)
   ========================================================================== */

.ds-loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.ds-loader-wrap p {
    margin-top: 1rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.ds-loader {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ds-loader span {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    animation: ds-dot-bounce 1.4s ease-in-out infinite;
}

.ds-loader span:nth-child(1) { background-color: var(--kds-loader-1, var(--color-teal, #2EB8A8));  animation-delay: 0s; }
.ds-loader span:nth-child(2) { background-color: var(--kds-loader-2, var(--color-green, #77b65d)); animation-delay: 0.15s; }
.ds-loader span:nth-child(3) { background-color: var(--kds-loader-3, var(--color-rose, #E6607B));  animation-delay: 0.3s; }
.ds-loader span:nth-child(4) { background-color: var(--kds-loader-4, var(--color-amber, #E8B30E)); animation-delay: 0.45s; }

@keyframes ds-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1.2); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-loader span { animation-duration: 2.8s; }
}

/* Puntitos DENTRO de un botón (#948): van en chico, los de 12px desbordan un botón chico. También
   en los botones del cartel de confirmar y de anotar (#1022). */
.btn > .ds-loader,
.kds-confirm__btn > .ds-loader {
    display: inline-flex;
    gap: .1875rem;
    vertical-align: middle;
}

.btn > .ds-loader span,
.kds-confirm__btn > .ds-loader span {
    width: .375rem;
    height: .375rem;
}

/* Loader dentro de un botón mientras guarda: mismos 4 puntitos, más chicos y en el color del
   texto para leerse sobre el fondo sólido de la primaria. Vivía en admin/theme-buttons.css; la
   librería es la única fuente (#1022). */
.ds-loader--btn { display: inline-flex; gap: .3125rem; vertical-align: middle; }
.ds-loader--btn span { width: .4375rem; height: .4375rem; background-color: currentColor !important; }

/* Chico y en línea, al lado de un dato que se está trayendo o recalculando (#1260): los mismos
   4 puntitos de colores, del alto de una letra. */
.ds-loader--chico { display: inline-flex; gap: .1875rem; vertical-align: middle; }
.ds-loader--chico span { width: .3125rem; height: .3125rem; }