/**
 * @file
 * Throbber + indicadores de carga (Drupal 10–11).
 *
 * - AJAX legacy: .ajax-progress-throbber .throbber + throbber-active.svg (core)
 * - Claro / D11 admin: .ajax-progress--throbber .ajax-progress__throbber (azul --color-absolutezero)
 * - Autocomplete jQuery UI: .ui-autocomplete-loading + SVG core
 * - Claro autocomplete: .form-autocomplete.is-autocompleting (#003ecc)
 *
 * Carga vía libraries-extend tras core/drupal.ajax y core/drupal.autocomplete
 * para ganar en cascada. Depende de tokens en base.css (:root).
 */

@keyframes lafour-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Spinner anillo rojo (mismo trazo que Claro, stroke marca) — campo autocomplete */
.js input.form-autocomplete.ui-autocomplete-loading,
.js[dir="rtl"] input.form-autocomplete.ui-autocomplete-loading {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23e30613' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
}

.js input.form-autocomplete.ui-autocomplete-loading {
  background-position: 100% 50% !important;
}

.js[dir="rtl"] input.form-autocomplete.ui-autocomplete-loading {
  background-position: 0% 50% !important;
}

.js .form-autocomplete.is-autocompleting,
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23e30613' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e") !important;
  background-position: center right -10px !important;
}

.js[dir="rtl"] .form-autocomplete.is-autocompleting {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23e30613' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e") !important;
  background-position: center left 10px !important;
}

/* ── AJAX legacy (core misc/ajax-progress.module.css) ─────── */
.ajax-progress.ajax-progress-throbber .throbber,
.ajax-progress-throbber .throbber {
  position: relative !important;
  box-sizing: border-box !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  display: inline-block !important;
  vertical-align: middle;
  animation: none !important;
  overflow: hidden;
  line-height: 0 !important;
  text-indent: -9999px;
}

.ajax-progress.ajax-progress-throbber .throbber::after,
.ajax-progress-throbber .throbber::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg,
    var(--c-brand),
    var(--c-surface-2),
    rgba(227, 6, 19, 0.35),
    var(--c-brand)
  );
  animation: lafour-spin 900ms linear infinite;
  -webkit-mask-image: var(--lafour-ninja-throbber-mask);
  mask-image: var(--lafour-ninja-throbber-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ── Claro (core/themes/claro/js/ajax.js + ajax-progress.module.css) ── */
.ajax-progress.ajax-progress--throbber .ajax-progress__throbber:not(.ajax-progress__throbber--fullscreen),
.ajax-progress--throbber .ajax-progress__throbber:not(.ajax-progress__throbber--fullscreen),
.ui-dialog .ajax-progress__throbber {
  position: relative !important;
  box-sizing: border-box !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
  line-height: 0 !important;
  overflow: hidden;
  text-indent: -9999px;
}

.ajax-progress.ajax-progress--throbber .ajax-progress__throbber:not(.ajax-progress__throbber--fullscreen)::after,
.ajax-progress--throbber .ajax-progress__throbber:not(.ajax-progress__throbber--fullscreen)::after,
.ui-dialog .ajax-progress__throbber::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg,
    var(--c-brand),
    var(--c-surface-2),
    rgba(227, 6, 19, 0.35),
    var(--c-brand)
  );
  animation: lafour-spin 900ms linear infinite;
  -webkit-mask-image: var(--lafour-ninja-throbber-mask);
  mask-image: var(--lafour-ninja-throbber-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Pantalla completa Claro */
.ajax-progress--fullscreen {
  position: fixed !important;
  z-index: 1261 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: rgba(10, 10, 10, 0.65) !important;
  background-image: none !important;
}

.ajax-progress--fullscreen .ajax-progress__throbber--fullscreen {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border: none !important;
  animation: none !important;
}

.ajax-progress--fullscreen .ajax-progress__throbber--fullscreen::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg,
    var(--c-brand),
    var(--c-surface-2),
    rgba(227, 6, 19, 0.35),
    var(--c-brand)
  );
  animation: lafour-spin 900ms linear infinite;
  -webkit-mask-image: var(--lafour-ninja-throbber-mask);
  mask-image: var(--lafour-ninja-throbber-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Diálogo jQuery UI: caja compacta (no cubrir todo el viewport) */
.ui-dialog .ajax-progress--throbber {
  position: fixed !important;
  z-index: 1262 !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: 50% !important;
  background: var(--c-surface) !important;
  box-shadow: none !important;
}

.ajax-progress-fullscreen {
  position: fixed !important;
  z-index: 1261;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) !important;
  opacity: 0.92;
  border-radius: 0 !important;
  background-color: rgba(10, 10, 10, 0.65) !important;
  background-image: none !important;
}

.ajax-progress-fullscreen .throbber {
  display: none !important;
}

.ajax-progress-fullscreen::after {
  content: '';
  width: 44px;
  height: 44px;
  background: conic-gradient(
    from 0deg,
    var(--c-brand),
    var(--c-surface-2),
    rgba(227, 6, 19, 0.35),
    var(--c-brand)
  );
  animation: lafour-spin 900ms linear infinite;
  -webkit-mask-image: var(--lafour-ninja-throbber-mask);
  mask-image: var(--lafour-ninja-throbber-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ajax-progress-throbber,
.ajax-progress:not(.ajax-progress-fullscreen):not(.ajax-progress--fullscreen) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: 0;
  padding: 0;
}

.ajax-progress-throbber .message,
.ajax-progress .message:not(.ajax-progress__message) {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: none !important;
  margin: 0;
}

.ajax-progress__message {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-muted);
}