/* ============================================================
   MATIOS UI — matios-ui-spinner.css
   MTS.Spinner — Indicadores de carga animados
   Requiere: matios-ui-base.css
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  --mts-spinner-color:   var(--mts-color-primary);
  --mts-spinner-color-2: var(--mts-spinner-color);
  --mts-spinner-color-3: var(--mts-spinner-color);
  /* --mts-spinner-bounce-color-2 NO se define aquí intencionalmente:
     si JS no la setea, el var() cae al fallback → --mts-color-accent */
}

/* ── Wrapper ─────────────────────────────────────────────── */
.mts-spinner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  isolation: isolate;
  color: var(--mts-spinner-color);
}

/* ── Overlay ─────────────────────────────────────────────── */
.mts-spinner--overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Tones ───────────────────────────────────────────────── */
.mts-spinner--warning { --mts-spinner-color: var(--mts-color-warning, #f59e0b); }
.mts-spinner--danger  { --mts-spinner-color: var(--mts-color-danger,  #ef4444); }
.mts-spinner--success { --mts-spinner-color: var(--mts-color-success, #22c55e); }
.mts-spinner--muted   { --mts-spinner-color: var(--mts-text-muted,    #6b7280); }

/* ── Inner — base 80×80px, zoom escala visual + layout ───── */
[class*="mts-spinner__inner--"] {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.mts-spinner--xs [class*="mts-spinner__inner--"] { zoom: 0.20; }
.mts-spinner--sm [class*="mts-spinner__inner--"] { zoom: 0.30; }
.mts-spinner--md [class*="mts-spinner__inner--"] { zoom: 0.45; }
.mts-spinner--lg [class*="mts-spinner__inner--"] { zoom: 0.60; }
.mts-spinner--xl [class*="mts-spinner__inner--"] { zoom: 0.80; }

/* ── Body (contiene el inner, aísla animaciones del label) ── */
.mts-spinner__body {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Label ───────────────────────────────────────────────── */
.mts-spinner__label {
  font-size: 12px;
  color: var(--mts-text-muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   VARIANTES
   ════════════════════════════════════════════════════════════ */

/* ── 1 · dual ───────────────────────────────────────────── */
.mts-spinner__inner--dual,
.mts-spinner__inner--dual::after {
  box-sizing: border-box;
}
.mts-spinner__inner--dual::after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6.4px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: mts-dual 1.2s linear infinite;
}
@keyframes mts-dual {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── 2 · bars ───────────────────────────────────────────── */
.mts-spinner__inner--bars,
.mts-spinner__inner--bars div {
  box-sizing: border-box;
}
.mts-spinner__inner--bars div {
  display: inline-block;
  position: absolute;
  width: 16px;
  background: currentColor;
  animation: mts-bars 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.mts-spinner__inner--bars div:nth-child(1) { left: 8px;  animation-delay: -0.24s; }
.mts-spinner__inner--bars div:nth-child(2) { left: 32px; animation-delay: -0.12s; }
.mts-spinner__inner--bars div:nth-child(3) { left: 56px; animation-delay:     0s; }
@keyframes mts-bars {
  0%        { top: 8px;  height: 64px; }
  50%, 100% { top: 24px; height: 32px; }
}

/* ── 3 · ring ───────────────────────────────────────────── */
.mts-spinner__inner--ring,
.mts-spinner__inner--ring div {
  box-sizing: border-box;
}
.mts-spinner__inner--ring div {
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: mts-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.mts-spinner__inner--ring div:nth-child(1) { animation-delay: -0.45s; }
.mts-spinner__inner--ring div:nth-child(2) { animation-delay: -0.30s; }
.mts-spinner__inner--ring div:nth-child(3) { animation-delay: -0.15s; }
.mts-spinner__inner--ring div:nth-child(4) { animation-delay:     0s; }
@keyframes mts-ring {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── 4 · roller ─────────────────────────────────────────── */
.mts-spinner__inner--roller,
.mts-spinner__inner--roller div,
.mts-spinner__inner--roller div::after {
  box-sizing: border-box;
}
.mts-spinner__inner--roller div {
  animation: mts-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.mts-spinner__inner--roller div::after {
  content: " ";
  display: block;
  position: absolute;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: currentColor;
  margin: -3.6px 0 0 -3.6px;
}
.mts-spinner__inner--roller div:nth-child(1) { animation-delay: -0.036s; }
.mts-spinner__inner--roller div:nth-child(2) { animation-delay: -0.072s; }
.mts-spinner__inner--roller div:nth-child(3) { animation-delay: -0.108s; }
.mts-spinner__inner--roller div:nth-child(4) { animation-delay: -0.144s; }
.mts-spinner__inner--roller div:nth-child(5) { animation-delay: -0.180s; }
.mts-spinner__inner--roller div:nth-child(6) { animation-delay: -0.216s; }
.mts-spinner__inner--roller div:nth-child(7) { animation-delay: -0.252s; }
.mts-spinner__inner--roller div:nth-child(8) { animation-delay: -0.288s; }
.mts-spinner__inner--roller div:nth-child(1)::after { top: 62.62742px; left: 62.62742px; }
.mts-spinner__inner--roller div:nth-child(2)::after { top: 67.71281px; left: 56px;       }
.mts-spinner__inner--roller div:nth-child(3)::after { top: 70.90963px; left: 48.28221px; }
.mts-spinner__inner--roller div:nth-child(4)::after { top: 72px;       left: 40px;       }
.mts-spinner__inner--roller div:nth-child(5)::after { top: 70.90963px; left: 31.71779px; }
.mts-spinner__inner--roller div:nth-child(6)::after { top: 67.71281px; left: 24px;       }
.mts-spinner__inner--roller div:nth-child(7)::after { top: 62.62742px; left: 17.37258px; }
.mts-spinner__inner--roller div:nth-child(8)::after { top: 56px;       left: 12.28719px; }
@keyframes mts-roller {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── 5 · clock ──────────────────────────────────────────── */
.mts-spinner__inner--clock,
.mts-spinner__inner--clock div {
  box-sizing: border-box;
}
.mts-spinner__inner--clock div {
  position: absolute;
  width: 6.4px;
  height: 6.4px;
  background: currentColor;
  border-radius: 50%;
  animation: mts-clock 1.2s linear infinite;
}
.mts-spinner__inner--clock div:nth-child(1)  { animation-delay:    0s; top: 36.8px;    left: 66.24px;    }
.mts-spinner__inner--clock div:nth-child(2)  { animation-delay: -0.1s; top: 22.08px;   left: 62.29579px; }
.mts-spinner__inner--clock div:nth-child(3)  { animation-delay: -0.2s; top: 11.30421px;left: 51.52px;    }
.mts-spinner__inner--clock div:nth-child(4)  { animation-delay: -0.3s; top: 7.36px;    left: 36.8px;     }
.mts-spinner__inner--clock div:nth-child(5)  { animation-delay: -0.4s; top: 11.30421px;left: 22.08px;    }
.mts-spinner__inner--clock div:nth-child(6)  { animation-delay: -0.5s; top: 22.08px;   left: 11.30421px; }
.mts-spinner__inner--clock div:nth-child(7)  { animation-delay: -0.6s; top: 36.8px;    left: 7.36px;     }
.mts-spinner__inner--clock div:nth-child(8)  { animation-delay: -0.7s; top: 51.52px;   left: 11.30421px; }
.mts-spinner__inner--clock div:nth-child(9)  { animation-delay: -0.8s; top: 62.29579px;left: 22.08px;    }
.mts-spinner__inner--clock div:nth-child(10) { animation-delay: -0.9s; top: 66.24px;   left: 36.8px;     }
.mts-spinner__inner--clock div:nth-child(11) { animation-delay:   -1s; top: 62.29579px;left: 51.52px;    }
.mts-spinner__inner--clock div:nth-child(12) { animation-delay: -1.1s; top: 51.52px;   left: 62.29579px; }
@keyframes mts-clock {
  0%, 20%, 80%, 100% { transform: scale(1);   }
  50%                { transform: scale(1.5); }
}

/* ── 6 · ellipsis ───────────────────────────────────────── */
.mts-spinner__inner--ellipsis,
.mts-spinner__inner--ellipsis div {
  box-sizing: border-box;
}
.mts-spinner__inner--ellipsis div {
  position: absolute;
  top: 33.33333px;
  width: 13.33333px;
  height: 13.33333px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.mts-spinner__inner--ellipsis div:nth-child(1) { left: 8px;  animation: mts-ellipsis-in  0.6s infinite; }
.mts-spinner__inner--ellipsis div:nth-child(2) { left: 8px;  animation: mts-ellipsis-mv  0.6s infinite; }
.mts-spinner__inner--ellipsis div:nth-child(3) { left: 32px; animation: mts-ellipsis-mv  0.6s infinite; }
.mts-spinner__inner--ellipsis div:nth-child(4) { left: 56px; animation: mts-ellipsis-out 0.6s infinite; }
@keyframes mts-ellipsis-in  { 0% { transform: scale(0); }        100% { transform: scale(1); }        }
@keyframes mts-ellipsis-out { 0% { transform: scale(1); }        100% { transform: scale(0); }        }
@keyframes mts-ellipsis-mv  { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }

/* ── 7 · grid ───────────────────────────────────────────── */
.mts-spinner__inner--grid,
.mts-spinner__inner--grid div {
  box-sizing: border-box;
}
.mts-spinner__inner--grid div {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  animation: mts-grid 1.2s linear infinite;
}
.mts-spinner__inner--grid div:nth-child(1) { top: 8px;  left: 8px;  animation-delay:    0s; }
.mts-spinner__inner--grid div:nth-child(2) { top: 8px;  left: 32px; animation-delay: -0.4s; }
.mts-spinner__inner--grid div:nth-child(3) { top: 8px;  left: 56px; animation-delay: -0.8s; }
.mts-spinner__inner--grid div:nth-child(4) { top: 32px; left: 8px;  animation-delay: -0.4s; }
.mts-spinner__inner--grid div:nth-child(5) { top: 32px; left: 32px; animation-delay: -0.8s; }
.mts-spinner__inner--grid div:nth-child(6) { top: 32px; left: 56px; animation-delay: -1.2s; }
.mts-spinner__inner--grid div:nth-child(7) { top: 56px; left: 8px;  animation-delay: -0.8s; }
.mts-spinner__inner--grid div:nth-child(8) { top: 56px; left: 32px; animation-delay: -1.2s; }
.mts-spinner__inner--grid div:nth-child(9) { top: 56px; left: 56px; animation-delay: -1.6s; }
@keyframes mts-grid {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.5; }
}

/* ── 8 · ripple ─────────────────────────────────────────── */
.mts-spinner__inner--ripple,
.mts-spinner__inner--ripple div {
  box-sizing: border-box;
}
.mts-spinner__inner--ripple div {
  position: absolute;
  border: 4px solid currentColor;
  opacity: 1;
  border-radius: 50%;
  animation: mts-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.mts-spinner__inner--ripple div:nth-child(2) { animation-delay: -0.5s; }
@keyframes mts-ripple {
  0%   { top: 36px; left: 36px; width: 8px;  height: 8px;  opacity: 0; }
  4.9% { top: 36px; left: 36px; width: 8px;  height: 8px;  opacity: 0; }
  5%   { top: 36px; left: 36px; width: 8px;  height: 8px;  opacity: 1; }
  100% { top: 0;    left: 0;    width: 80px; height: 80px; opacity: 0; }
}

/* ── 9 · activity ───────────────────────────────────────── */
.mts-spinner__inner--activity,
.mts-spinner__inner--activity div,
.mts-spinner__inner--activity div::after {
  box-sizing: border-box;
}
.mts-spinner__inner--activity div {
  transform-origin: 40px 40px;
  animation: mts-activity 1.2s linear infinite;
}
.mts-spinner__inner--activity div::after {
  content: " ";
  display: block;
  position: absolute;
  top: 3.2px;
  left: 36.8px;
  width: 6.4px;
  height: 17.6px;
  border-radius: 20%;
  background: currentColor;
}
.mts-spinner__inner--activity div:nth-child(1)  { transform: rotate(0deg);   animation-delay: -1.1s; }
.mts-spinner__inner--activity div:nth-child(2)  { transform: rotate(30deg);  animation-delay: -1.0s; }
.mts-spinner__inner--activity div:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.9s; }
.mts-spinner__inner--activity div:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.8s; }
.mts-spinner__inner--activity div:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.7s; }
.mts-spinner__inner--activity div:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.6s; }
.mts-spinner__inner--activity div:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.5s; }
.mts-spinner__inner--activity div:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.4s; }
.mts-spinner__inner--activity div:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.3s; }
.mts-spinner__inner--activity div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }
.mts-spinner__inner--activity div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; }
.mts-spinner__inner--activity div:nth-child(12) { transform: rotate(330deg); animation-delay:    0s; }
@keyframes mts-activity {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 10 · triple ────────────────────────────────────────── */
/* Escala: 48→80px (×1.667). border 3→5px, after 40→67px, before 32→53px */
.mts-spinner__inner--triple {
  box-sizing: border-box;
  border-radius: 50%;
  border: 5px solid;
  border-color: currentColor currentColor transparent transparent;
  animation: mts-triple-cw 1s linear infinite;
}
.mts-spinner__inner--triple::after,
.mts-spinner__inner--triple::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  margin: auto;
  border: 5px solid;
  border-radius: 50%;
  transform-origin: center center;
}
.mts-spinner__inner--triple::after {
  color: var(--mts-spinner-color-2);
  border-color: transparent transparent currentColor currentColor;
  width: 67px;
  height: 67px;
  animation: mts-triple-ccw 0.5s linear infinite;
}
.mts-spinner__inner--triple::before {
  color: var(--mts-spinner-color-3);
  border-color: currentColor currentColor transparent transparent;
  width: 53px;
  height: 53px;
  animation: mts-triple-cw 1.5s linear infinite;
}
@keyframes mts-triple-cw  { 0% { transform: rotate(0deg);    } 100% { transform: rotate(360deg);  } }
@keyframes mts-triple-ccw { 0% { transform: rotate(0deg);    } 100% { transform: rotate(-360deg); } }

/* ── 11 · orbital ───────────────────────────────────────── */
.mts-spinner__inner--orbital {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
}
.mts-spinner__inner--orbital::before,
.mts-spinner__inner--orbital::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: mts-orbital-spin 1s linear infinite;
}
.mts-spinner__inner--orbital::after {
  color: var(--mts-spinner-color-2);
  transform: rotateY(70deg);
  animation-delay: 0.4s;
}
@keyframes mts-orbital-spin {
  0%,  100% { box-shadow:  .2em  0    0 0 currentColor; }
  12%        { box-shadow:  .2em  .2em 0 0 currentColor; }
  25%        { box-shadow:  0     .2em 0 0 currentColor; }
  37%        { box-shadow: -.2em  .2em 0 0 currentColor; }
  50%        { box-shadow: -.2em  0    0 0 currentColor; }
  62%        { box-shadow: -.2em -.2em 0 0 currentColor; }
  75%        { box-shadow:  0    -.2em 0 0 currentColor; }
  87%        { box-shadow:  .2em -.2em 0 0 currentColor; }
}

/* ── 12 · dots ──────────────────────────────────────────── */
/* El punto central es ::after centrado en el inner 80×80px */
.mts-spinner__inner--dots {
  box-sizing: border-box;
}
.mts-spinner__inner--dots::after {
  content: '';
  display: block;
  position: absolute;
  top: 34px;
  left: 34px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-sizing: border-box;
  animation: mts-dots 2s linear infinite;
}
@keyframes mts-dots {
  0%   { box-shadow:  14px 0 0 -2px,  38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; }
  25%  { box-shadow:  14px 0 0 -2px,  38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0  2px; }
  50%  { box-shadow:  14px 0 0 -2px,  38px 0 0 -2px, -14px 0 0  2px, -38px 0 0 -2px; }
  75%  { box-shadow:  14px 0 0  2px,  38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; }
  100% { box-shadow:  14px 0 0 -2px,  38px 0 0  2px, -14px 0 0 -2px, -38px 0 0 -2px; }
}

/* ── 13 · bounce ─────────────────────────────────────────── */
/* Migrado desde .mts-loader en base.css                      */
/* color2 aplica en bolitas pares (2ª, 4ª)                    */
.mts-spinner__inner--bounce {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.mts-spinner__inner--bounce div {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  box-sizing: border-box;
  animation: mts-sp-bounce 1.2s ease-in-out alternate infinite;
}
.mts-spinner__inner--bounce div:nth-child(even) {
  background: var(--mts-spinner-bounce-color-2, var(--mts-color-accent, var(--mts-spinner-color)));
}
.mts-spinner__inner--bounce div:nth-child(1) { animation-delay: 0.00s; }
.mts-spinner__inner--bounce div:nth-child(2) { animation-delay: 0.10s; }
.mts-spinner__inner--bounce div:nth-child(3) { animation-delay: 0.20s; }
.mts-spinner__inner--bounce div:nth-child(4) { animation-delay: 0.30s; }
.mts-spinner__inner--bounce div:nth-child(5) { animation-delay: 0.40s; }
@keyframes mts-sp-bounce {
  0%   { transform: translateY(0);     }
  40%  { transform: translateY(-24px); }
  60%  { transform: translateY(-12px); }
  100% { transform: translateY(0);     }
}