/* ── Animaciones SVG — reemplazo de Lottie ─────────────────── */

/* Spinner de carga */
.svg-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.svg-spinner-lg {
  width: 32px;
  height: 32px;
}

.svg-spinner-sm {
  width: 12px;
  height: 12px;
}

/* Checkmark animado */
@keyframes checkmark-draw {
  0%   { stroke-dashoffset: 50; opacity: 0; }
  30%  { opacity: 1; }
  100% { stroke-dashoffset: 0; }
}

@keyframes checkmark-circle {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes check-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

.svg-check .check-circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: checkmark-circle .4s ease forwards;
}

.svg-check .check-mark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkmark-draw .3s ease .3s forwards;
}

.svg-check {
  animation: check-pop .35s ease forwards;
}

/* X animado (rechazo) */
@keyframes x-draw {
  0%   { stroke-dashoffset: 40; opacity: 0; }
  100% { stroke-dashoffset: 0;  opacity: 1; }
}

.svg-x .x-circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: checkmark-circle .4s ease forwards;
}

.svg-x .x-line1,
.svg-x .x-line2 {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.svg-x .x-line1 { animation: x-draw .25s ease .3s forwards; }
.svg-x .x-line2 { animation: x-draw .25s ease .4s forwards; }

/* Dot pulsante para semáforo */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.3); opacity: .7; }
}

.svg-dot-pulse { animation: dot-pulse 2s ease-in-out infinite; }
.svg-dot-pulse-fast { animation: dot-pulse .8s ease-in-out infinite; }

/* Sync / loading circle */
@keyframes sync-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.svg-sync-arc { 
  transform-origin: center;
  animation: sync-spin .8s linear infinite;
}