/* ============================================================================
   MACOF · Set de loaders institucionales
   Paleta PROFEPA (verde #1e5b4f / #40916c / #6ee7b7, beige #e6d194, magenta #9b2247)
   Todas las clases van namespaced con "mloader-" para no chocar con
   Bootstrap (.spinner-border) ni con clases genéricas (.loader).

   Tipos disponibles (usa el que corresponda al contexto):
     1. .mloader-satellite  → análisis satelital pesado (Sentinel-2 / GEE)
     2. .mloader-scan       → escaneo/clasificación de territorio (uso de suelo)
     3. .mloader-bars       → procesamiento de datos / generación de reportes
     4. .mloader-ring       → spinner limpio genérico (reemplaza spinner-border)
     5. .mloader-dots       → carga pequeña en línea (botones, tarjetas)

   Helpers:
     .mloader-wrap   → contenedor centrado vertical con texto
     .mloader-label  → texto auxiliar bajo el loader
   ============================================================================ */

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

/* Contenedor / etiqueta -----------------------------------------------------*/
.mloader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.mloader-label {
  font-size: 0.85rem;
  color: #9ca3af;
  text-align: center;
  letter-spacing: .3px;
}
.mloader-label small { display: block; font-size: 0.72rem; color: #6b7280; margin-top: 2px; }

/* ============================================================================
   1) SATÉLITE EN ÓRBITA  — análisis satelital
   HTML: <span class="mloader-satellite"><span></span></span>
   ============================================================================ */
.mloader-satellite {
  width: 80px; height: 80px; position: relative; display: inline-block;
}
.mloader-satellite::before {            /* "Tierra" */
  content: ""; position: absolute; inset: 25px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9ff5d0, #1e5b4f 72%);
  box-shadow: 0 0 16px rgba(64,145,108,.55), inset -4px -4px 8px rgba(0,0,0,.25);
}
.mloader-satellite::after {             /* Órbita punteada */
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 2px dashed rgba(110,231,183,.35);
}
.mloader-satellite > span {             /* Eje de giro del satélite */
  position: absolute; inset: 0; animation: mloader-spin 2.4s linear infinite;
}
.mloader-satellite > span::before {     /* Satélite */
  content: ""; position: absolute; top: -4px; left: 50%; width: 14px; height: 14px;
  margin-left: -7px; border-radius: 3px;
  background: linear-gradient(135deg, #f0dca0, #c9a227);
  box-shadow: 0 0 10px rgba(230,209,148,.9);
}

/* ============================================================================
   2) ESCANEO DE TERRITORIO  — clasificación de uso de suelo
   HTML:
   <div class="mloader-scan">
     <div class="mloader-scan__bars"><span></span><span></span><span></span><span></span></div>
     <span class="mloader-scan__lens"></span>
   </div>
   ============================================================================ */
.mloader-scan {
  position: relative; width: 150px; height: 64px; display: inline-block;
}
.mloader-scan__bars {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; padding-top: 6px;
}
.mloader-scan__bars span {
  height: 9px; border-radius: 6px;
  background: linear-gradient(90deg, #1e5b4f, #6ee7b7, #1e5b4f);
  background-size: 200% 100%;
  animation: mloader-scan-bar 2.4s ease-in-out infinite alternate;
}
.mloader-scan__bars span:nth-child(1) { width: 100%; }
.mloader-scan__bars span:nth-child(2) { width: 70%;  animation-delay: .15s; }
.mloader-scan__bars span:nth-child(3) { width: 88%;  animation-delay: .30s; }
.mloader-scan__bars span:nth-child(4) { width: 55%;  animation-delay: .45s; }
@keyframes mloader-scan-bar {
  0%   { background-position: 0% 0;   opacity: .55; }
  100% { background-position: 100% 0; opacity: 1; }
}
.mloader-scan__lens {                   /* Lupa que recorre el terreno */
  position: absolute; top: 8px; left: 0; width: 26px; height: 26px;
  border: 3px solid #6ee7b7; border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,183,.20), transparent 70%);
  box-shadow: 0 0 10px rgba(110,231,183,.5);
  animation: mloader-scan-lens 2.4s ease-in-out infinite alternate;
}
.mloader-scan__lens::after {            /* Mango de la lupa */
  content: ""; position: absolute; right: -7px; bottom: -7px;
  width: 12px; height: 3px; border-radius: 2px; background: #6ee7b7;
  transform: rotate(45deg); transform-origin: left center;
}
@keyframes mloader-scan-lens {
  0%   { transform: translate(0, 0)      rotate(-8deg); }
  100% { transform: translate(120px, 26px) rotate(8deg); }
}

/* ============================================================================
   3) BARRAS DE DATOS  — procesamiento / reportes (estilo ecualizador)
   HTML: <span class="mloader-bars"><span></span>×5</span>
   ============================================================================ */
.mloader-bars {
  display: inline-flex; align-items: flex-end; gap: 5px; height: 42px;
}
.mloader-bars span {
  width: 7px; height: 100%; border-radius: 4px; transform-origin: bottom;
  background: linear-gradient(#6ee7b7, #1e5b4f);
  animation: mloader-bars-eq 1s ease-in-out infinite;
}
.mloader-bars span:nth-child(2) { animation-delay: .12s; }
.mloader-bars span:nth-child(3) { animation-delay: .24s; }
.mloader-bars span:nth-child(4) { animation-delay: .36s; }
.mloader-bars span:nth-child(5) { animation-delay: .48s; }
@keyframes mloader-bars-eq {
  0%, 100% { transform: scaleY(.28); }
  50%      { transform: scaleY(1); }
}

/* ============================================================================
   4) ANILLO LIMPIO  — spinner genérico (reemplaza .spinner-border)
   HTML: <span class="mloader-ring"></span>   ·   variante: .mloader-ring.sm
   ============================================================================ */
.mloader-ring {
  width: 42px; height: 42px; border-radius: 50%; display: inline-block;
  border: 3px solid rgba(64,145,108,.22);
  border-top-color: #40916c; border-right-color: #6ee7b7;
  animation: mloader-spin .8s linear infinite;
}
.mloader-ring.sm { width: 18px; height: 18px; border-width: 2px; }
.mloader-ring.lg { width: 60px; height: 60px; border-width: 4px; }

/* ============================================================================
   5) PUNTOS  — carga pequeña en línea (botones, tarjetas)
   HTML: <span class="mloader-dots"><span></span><span></span><span></span></span>
   ============================================================================ */
.mloader-dots { display: inline-flex; align-items: center; gap: 5px; }
.mloader-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: #40916c;
  animation: mloader-dots-pulse 1s ease-in-out infinite;
}
.mloader-dots span:nth-child(2) { animation-delay: .2s; }
.mloader-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes mloader-dots-pulse {
  0%, 100% { opacity: .3; transform: scale(.7); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* Variantes de color por contexto (opcional) --------------------------------*/
.mloader-amber  .mloader-bars span,
.mloader-amber.mloader-bars span { background: linear-gradient(#fcd34d, #b45309); }
.mloader-magenta .mloader-ring,
.mloader-ring.magenta { border-top-color: #9b2247; border-right-color: #d98aa0; }

/* Respeto a usuarios con movimiento reducido --------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .mloader-satellite > span,
  .mloader-scan__bars span,
  .mloader-scan__lens,
  .mloader-bars span,
  .mloader-ring,
  .mloader-dots span { animation-duration: 3s; }
}