/* ============================================================
   loading.css — Sistema de Loading Animaciones (SPEC006)
   ============================================================ */

/* ---- Animación C — Puntos de calor (liviana, inline) ---- */

.loading-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.loading-dots span {
  width: 8px; height: 8px;
  background: var(--color-accent, #00ADEF);
  border-radius: 50%;
  animation: heat-pulse 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }
.loading-dots span:nth-child(4) { animation-delay: 0.45s; }
.loading-dots span:nth-child(5) { animation-delay: 0.6s; }

@keyframes heat-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.4; }
  50%       { transform: scale(1.6); opacity: 1;   }
}

/* ---- Animación A — Camiseta llenándose (page transition) ---- */

.loading-page-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(14, 52, 97, 0.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.loading-page-overlay.active {
  opacity: 1; pointer-events: all;
}
.loading-page-inner {
  display: flex; flex-direction: column; align-items: center;
}
.loading-shirt { width: 100px; height: 84px; }
.shirt-outline {
  fill: none; stroke: #00ADEF; stroke-width: 2.5;
}
.shirt-filled { fill: #0090D9; }
#shirt-fill-rect {
  transition: y 0.4s ease, height 0.4s ease;
}
.loading-page-text {
  color: #D6EEFC; margin-top: 16px;
  font-size: 0.9rem; letter-spacing: 0.05em;
}

/* ---- Animación B — Plotter cortando (splash) ---- */

.loading-splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--color-primary, #0E3461);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease 0.2s;
}
.loading-splash.fade-out { opacity: 0; pointer-events: none; }
.loading-splash.hidden { display: none; }

.loading-splash-inner {
  display: flex; flex-direction: column; align-items: center;
}

.plotter-track {
  width: 300px; height: 4px;
  background: rgba(0, 144, 217, 0.3);
  border-radius: 2px;
  position: relative; margin-bottom: 20px;
}
.plotter-head {
  position: absolute; top: -14px; left: -12px;
  width: 24px; height: 30px;
  background: #00ADEF; border-radius: 3px;
  box-shadow: 0 0 12px #00ADEF88;
  transition: left 0.8s ease;
}
.plotter-blade {
  position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 8px;
  background: white;
}

.splash-logo-text {
  font-family: 'Arial Black', sans-serif;
  font-size: 52px; font-weight: 900;
  fill: none;
  stroke: #00ADEF;
  stroke-width: 1.5;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 0.8s ease;
}
.splash-logo-text.revealed { stroke-dashoffset: 0; }

.splash-tagline {
  color: rgba(214, 238, 252, 0.7);
  font-size: 0.85rem; letter-spacing: 0.15em;
  text-transform: uppercase; margin-top: 12px;
  opacity: 0; transition: opacity 0.4s ease 0.6s;
}
.loading-splash.show-tagline .splash-tagline { opacity: 1; }

/* ---- Animación E — Progress bar con copy (pesada, alta carga) ---- */

.loading-progress-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(14, 52, 97, 0.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.loading-progress-overlay.active { opacity: 1; pointer-events: all; }

.loading-progress-card {
  background: white; border-radius: 16px;
  padding: 36px 40px; text-align: center;
  min-width: 300px; max-width: 380px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.progress-icon {
  margin-bottom: 16px;
  color: var(--color-accent, #00ADEF);
}
.progress-message {
  font-size: 1rem; color: var(--color-primary, #0E3461);
  font-weight: 600; margin-bottom: 16px;
  min-height: 1.5em;
  transition: opacity 0.3s ease;
}
.progress-bar-track {
  height: 8px; background: #E8F4FD;
  border-radius: 4px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #00ADEF, #0090D9);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.progress-percent {
  font-size: 0.8rem; color: #666;
  margin-top: 8px;
}
.progress-hint {
  font-size: 0.75rem; color: #999;
  margin-top: 12px; min-height: 1em;
}
.progress-error {
  color: #c0392b;
  font-size: 0.9rem;
  margin-top: 12px;
  font-weight: 600;
}

/* ---- Accesibilidad — prefers-reduced-motion ---- */

@media (prefers-reduced-motion: reduce) {
  .loading-dots span,
  .shirt-filled,
  .plotter-head,
  .progress-bar-fill,
  #shirt-fill-rect,
  .splash-logo-text,
  .splash-tagline,
  .loading-splash,
  .loading-page-overlay,
  .loading-progress-overlay {
    animation: none !important;
    transition: none !important;
  }
}