/* ==========================================================================
   Tesela · Loader «Armando el mosaico» (aprobado 2026-10-22)
   Componente global: cargar en template.xhtml, login.xhtml y registro.xhtml, después de xrello-tokens.css.
   Ciclo 1,4 s. Variantes: (oscuro por defecto) · --light · --on-primary (dentro del botón naranja).
   ========================================================================== */
.xl-loader { display: inline-block; flex: none; width: var(--xl-loader-size, 48px); height: var(--xl-loader-size, 48px); }
.xl-loader svg { width: 100%; height: 100%; display: block; overflow: visible; }
.xl-loader__t {
  fill: var(--x-text);
  transform-box: fill-box; transform-origin: center;
  animation: xl-ld-wave 1.4s ease-in-out infinite;
}
.xl-loader__p {
  fill: var(--x-primary);
  transform-box: fill-box; transform-origin: center;
  animation: xl-ld-piece 1.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.xl-loader .i1 { animation-delay: 90ms; }  .xl-loader .i2 { animation-delay: 180ms; }
.xl-loader .i3 { animation-delay: 270ms; } .xl-loader .i4 { animation-delay: 360ms; }
.xl-loader--light .xl-loader__t { fill: #2A3140; }
.xl-loader--on-primary .xl-loader__t { fill: var(--x-on-primary); }
.xl-loader--on-primary .xl-loader__p { fill: #FFFFFF; }
.xl-loader--sm { --xl-loader-size: 20px; }
.xl-loader--lg { --xl-loader-size: 96px; }

@keyframes xl-ld-wave  { 0%, 60%, 100% { opacity: .25; transform: scale(.8); } 25% { opacity: 1; transform: scale(1); } }
@keyframes xl-ld-piece { 0% { opacity: .5; transform: translate(5px, -7px) rotate(35deg); }
                         40%, 70% { opacity: 1; transform: none; }
                         100% { opacity: .5; transform: translate(5px, -7px) rotate(35deg); } }

/* Bloque con texto de estado */
.xl-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; }
.xl-loading__text { font-family: var(--x-font); font-size: 14px; color: var(--x-text-2); }

/* Overlay global (p:ajaxStatus / p:blockUI) */
.xl-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(15, 19, 26, .72);
}
.xl-overlay--local { position: absolute; z-index: 10; border-radius: inherit; }

/* Botón ocupado (login: ajax="false", NO se deshabilita para no cortar el envío) */
.ui-button.xl-btn-primary.is-busy { pointer-events: none; cursor: progress; }
.ui-button.xl-btn-primary.is-busy .ui-icon { display: none !important; }
.ui-button.xl-btn-primary.is-busy::before {
  content: ""; width: 20px; height: 20px; flex: none;
  background: url("/jakarta.faces.resource/img/tesela-loader-on-primary.svg.xhtml") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .xl-loader__t, .xl-loader__p { animation: none; }
  .xl-loader svg { animation: xl-ld-pulse 2s ease-in-out infinite; }
}
@keyframes xl-ld-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }