/* ============================================================================
   SISCREDI - SPINNER SVG DE DOBLE ARCO
   ============================================================================
   Sistema unificado de loading states con spinner SVG animado.
   Dos arcos independientes (ambar exterior + verde interior) con
   animaciones de inercia organica.

   Tamanios:
   - .sc-spinner-xs (16px) — inputs, badges, inline
   - .sc-spinner-sm (24px) — botones, pills, ClickGuard
   - .sc-spinner-md (44px) — contenedores, cards, secciones (default)
   - .sc-spinner-lg (80px) — overlays fullscreen, modales

   Variantes automaticas:
   - Light mode: arco exterior ambar, interior verde oscuro
   - Dark mode: arco exterior ambar, interior blanco
   - Fondo ambar: arco exterior verde oscuro, interior blanco
   ============================================================================ */

/* ==========================================================================
   VARIABLES CSS
   ========================================================================== */

:root {
  --sc-spinner-outer: #F5A623;
  --sc-spinner-inner: #2B4A1E;
  --sc-spinner-size: 44px;
  --sc-spinner-stroke: 5;
}

[data-bs-theme="dark"] {
  --sc-spinner-inner: #FFFFFF;
}

/* ==========================================================================
   ANIMACIONES DE INERCIA
   ========================================================================== */

/*
  Arco AMBAR (exterior):
  Avanza rapido, hesita, retrocede ligeramente, luego lanza de nuevo.
  Ciclo de ~3.2s, rotacion neta: +360deg
*/
@keyframes sc-amber-inertia {
  0%   { transform: rotate(0deg);    }
  15%  { transform: rotate(140deg);  }
  28%  { transform: rotate(155deg);  }
  38%  { transform: rotate(130deg);  }
  52%  { transform: rotate(290deg);  }
  63%  { transform: rotate(310deg);  }
  72%  { transform: rotate(295deg);  }
  88%  { transform: rotate(400deg);  }
  100% { transform: rotate(360deg);  }
}

/*
  Arco VERDE (interior):
  Ritmo completamente independiente. Lento al inicio, reversa dos veces, estalla.
  Ciclo de ~2.6s
*/
@keyframes sc-green-inertia {
  0%   { transform: rotate(0deg);    }
  10%  { transform: rotate(-40deg);  }
  22%  { transform: rotate(80deg);   }
  35%  { transform: rotate(70deg);   }
  48%  { transform: rotate(240deg);  }
  58%  { transform: rotate(215deg);  }
  68%  { transform: rotate(260deg);  }
  80%  { transform: rotate(250deg);  }
  100% { transform: rotate(360deg);  }
}

/* ==========================================================================
   SPINNER BASE
   ========================================================================== */

.sc-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-spinner-svg {
  width: var(--sc-spinner-size);
  height: var(--sc-spinner-size);
}

.sc-arc-outer {
  transform-origin: 22px 22px;
  animation: sc-amber-inertia 3.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.sc-arc-inner {
  transform-origin: 22px 22px;
  animation: sc-green-inertia 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: -0.4s;
}

/* ==========================================================================
   TAMANOS
   ========================================================================== */

.sc-spinner-xs { --sc-spinner-size: 16px; }
.sc-spinner-sm { --sc-spinner-size: 24px; }
.sc-spinner-md { --sc-spinner-size: 44px; }
.sc-spinner-lg { --sc-spinner-size: 80px; }

/* ==========================================================================
   VARIANTES DE COLOR
   ========================================================================== */

/* Dark mode automatico */
[data-bs-theme="dark"] .sc-arc-inner circle {
  stroke: #FFFFFF;
}

/* Fondo ambar (para pills/badges sobre fondo primary) */
.sc-spinner-amber .sc-arc-outer circle {
  stroke: #2B4A1E;
}

.sc-spinner-amber .sc-arc-inner circle {
  stroke: #FFFFFF;
}

/* ==========================================================================
   SPINNER CON MENSAJE (para overlays y contenedores)
   ========================================================================== */

.sc-spinner-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--bs-spacer-8, 2rem);
  text-align: center;
}

.sc-spinner-message {
  margin-top: var(--bs-spacer-4, 1rem);
  font-size: var(--bs-body-font-size, 1rem);
  color: var(--bs-body-color, #596066);
  font-weight: var(--bs-font-weight-medium, 500);
}

.sc-spinner-sm + .sc-spinner-message,
.sc-spinner-xs + .sc-spinner-message {
  margin-top: var(--bs-spacer-2, 0.5rem);
  font-size: var(--bs-font-size-sm, 0.875rem);
}

.sc-spinner-lg + .sc-spinner-message {
  margin-top: var(--bs-spacer-6, 1.5rem);
  font-size: var(--bs-font-size-lg, 1.25rem);
}

/* ==========================================================================
   SPINNER INLINE (dentro de botones, al lado de texto)
   ========================================================================== */

.sc-spinner-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  vertical-align: middle;
}

.sc-spinner-inline .sc-spinner {
  flex-shrink: 0;
}

/* ==========================================================================
   OVERLAY FULLSCREEN
   ========================================================================== */

.sc-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1060; /* Encima de modales Bootstrap (1055) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--bs-transition-duration-normal, 250ms) var(--bs-transition-timing-smooth, ease);
}

.sc-spinner-overlay.sc-spinner-overlay--visible {
  opacity: 1;
}

[data-bs-theme="dark"] .sc-spinner-overlay {
  background: rgba(31, 41, 55, 0.92);
}

.sc-spinner-overlay .sc-spinner-message {
  margin-top: var(--bs-spacer-6, 1.5rem);
  font-size: var(--bs-font-size-lg, 1.25rem);
}

/* Overlay contenido (position: absolute, para cubrir un contenedor especifico) */
.sc-spinner-overlay--contained {
  position: absolute;
  z-index: 10;
}

/* ==========================================================================
   DOTS ANIMADOS (para procesos largos)
   ========================================================================== */

.sc-spinner-dots {
  display: flex;
  gap: var(--bs-spacer-1, 0.25rem);
  justify-content: center;
  margin-top: var(--bs-spacer-2, 0.5rem);
}

.sc-spinner-dots span {
  width: 8px;
  height: 8px;
  background: var(--bs-primary, #f5a941);
  border-radius: 50%;
  animation: sc-dots-bounce 1.2s ease-in-out infinite;
}

.sc-spinner-dots span:nth-child(1) { animation-delay: 0s; }
.sc-spinner-dots span:nth-child(2) { animation-delay: 0.2s; }
.sc-spinner-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes sc-dots-bounce {
  0%, 60%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  30% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* ==========================================================================
   BARRA DE PROGRESO
   ========================================================================== */

.sc-spinner-progress {
  width: 100%;
  max-width: 240px;
  margin-top: var(--bs-spacer-4, 1rem);
}

.sc-spinner-progress .progress {
  height: 6px;
  background-color: var(--bs-light, #f8f9fa);
  border-radius: var(--bs-border-radius-pill, 50rem);
}

.sc-spinner-progress .progress-bar {
  background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
  transition: width 0.3s ease;
}

/* ==========================================================================
   SKELETON SHIMMER UNIFICADO
   ========================================================================== */

.sc-skeleton {
  background: linear-gradient(
    90deg,
    var(--bs-light, #f8f9fa) 25%,
    var(--bs-tertiary-bg, #FAFAFA) 50%,
    var(--bs-light, #f8f9fa) 75%
  );
  background-size: 200% 100%;
  animation: sc-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--bs-border-radius-sm, 0.25rem);
}

[data-bs-theme="dark"] .sc-skeleton {
  background: linear-gradient(
    90deg,
    var(--bs-light, #374151) 25%,
    var(--bs-tertiary-bg, #4b5563) 50%,
    var(--bs-light, #374151) 75%
  );
  background-size: 200% 100%;
}

@keyframes sc-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton para filas de tabla */
.sc-skeleton-row {
  display: flex;
  gap: var(--bs-spacer-3, 0.75rem);
  padding: var(--bs-spacer-3, 0.75rem) var(--bs-spacer-4, 1rem);
  border-bottom: 1px solid var(--bs-border-color, #e3e5e7);
}

.sc-skeleton-cell {
  height: 1rem;
  flex: 1;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 575px) {
  .sc-spinner-block {
    padding: var(--bs-spacer-6, 1.5rem) var(--bs-spacer-4, 1rem);
  }

  .sc-spinner-message {
    font-size: var(--bs-font-size-sm, 0.875rem);
  }

  .sc-spinner-lg {
    --sc-spinner-size: 64px;
  }
}

/* ==========================================================================
   ACCESIBILIDAD - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sc-arc-outer,
  .sc-arc-inner,
  .sc-spinner-dots span {
    animation: none;
  }

  .sc-arc-outer {
    opacity: 0.7;
  }

  .sc-arc-inner {
    opacity: 0.9;
  }

  .sc-spinner-dots span {
    opacity: 0.7;
  }

  .sc-skeleton {
    animation: none;
    opacity: 0.7;
  }

  .sc-spinner-overlay {
    transition: none;
  }
}

/* ==========================================================================
   ESTADOS ESPECIFICOS CON GLOW (compatibilidad con loading_state.html)
   ========================================================================== */

.sc-spinner-block[data-state="processing_payment"] .sc-spinner-svg {
  filter: drop-shadow(0 0 8px rgba(var(--bs-success-rgb, 34, 197, 94), 0.4));
}

.sc-spinner-block[data-state="generating_report"] .sc-spinner-svg,
.sc-spinner-block[data-state="exporting_data"] .sc-spinner-svg {
  filter: drop-shadow(0 0 8px rgba(var(--bs-secondary-rgb, 67, 80, 59), 0.4));
}

.sc-spinner-block[data-state="validating_data"] .sc-spinner-svg,
.sc-spinner-block[data-state="sending_notification"] .sc-spinner-svg {
  filter: drop-shadow(0 0 8px rgba(var(--bs-info-rgb, 59, 130, 246), 0.4));
}

.sc-spinner-block[data-state="calculating_amortization"] .sc-spinner-svg {
  filter: drop-shadow(0 0 8px rgba(var(--bs-primary-rgb, 245, 169, 65), 0.4));
}

.sc-spinner-block[data-state="error"] .sc-spinner-svg {
  filter: drop-shadow(0 0 8px rgba(var(--bs-danger-rgb, 220, 53, 69), 0.5));
}

.sc-spinner-block[data-state="error"] .sc-arc-outer,
.sc-spinner-block[data-state="error"] .sc-arc-inner {
  animation-duration: 4s;
}