/* ═══════════════════════════════════════════════════════════════
   CORE EB — Spinner de carga
   Versión: 1.0  |  Solo CSS, sin dependencias

   USO BÁSICO
   ──────────
   1. Incluye este archivo:
        <link rel="stylesheet" href="core-spinner.css">

   2. Pega este HTML donde quieras mostrar el spinner:

      <div class="core-spinner-wrap">
        <div class="core-ring-wrap">
          <div class="cr cr-o"></div>
          <div class="cr cr-m"></div>
          <div class="cr cr-i"></div>
          <div class="cr cr-x"></div>
          <div class="cr-pts">
            <span class="pa" style="--a:69deg;--r:27px"><span class="pd pb1" style="width:3px;height:3px;background:#E2E932;animation-delay:0s"></span></span>
            <span class="pa" style="--a:74deg;--r:25px"><span class="pd pb1" style="width:2px;height:2px;background:#D6E800;animation-delay:-.13s"></span></span>
            <span class="pa" style="--a:71deg;--r:28px"><span class="pd pb1" style="width:2.5px;height:2.5px;background:#E2E932;animation-delay:-.26s"></span></span>
            <span class="pa" style="--a:79deg;--r:24px"><span class="pd pb1" style="width:2px;height:2px;background:#C8DC00;animation-delay:-.39s"></span></span>
            <span class="pa" style="--a:66deg;--r:29px"><span class="pd pb1" style="width:3.5px;height:3.5px;background:#E2E932;animation-delay:-.52s"></span></span>
            <span class="pa" style="--a:83deg;--r:26px"><span class="pd pb1" style="width:2px;height:2px;background:#DDEF00;animation-delay:-.65s"></span></span>
            <span class="pa" style="--a:76deg;--r:27px"><span class="pd pb1" style="width:3px;height:3px;background:#E2E932;animation-delay:-.78s"></span></span>
            <span class="pa" style="--a:88deg;--r:25px"><span class="pd pb1" style="width:2px;height:2px;background:#CCE000;animation-delay:-.91s"></span></span>
            <span class="pa" style="--a:72deg;--r:27px"><span class="pd pb2" style="width:2.5px;height:2.5px;background:#E2E932;animation-delay:-.10s"></span></span>
            <span class="pa" style="--a:67deg;--r:26px"><span class="pd pb2" style="width:2px;height:2px;background:#B8D000;animation-delay:-.42s"></span></span>
            <span class="pa" style="--a:81deg;--r:28px"><span class="pd pb2" style="width:1.5px;height:1.5px;background:#E2E932;animation-delay:-.85s"></span></span>
            <span class="pa" style="--a:64deg;--r:28px"><span class="pd pb3" style="width:2px;height:2px;background:#C8DC00;animation-delay:-.20s"></span></span>
            <span class="pa" style="--a:86deg;--r:26px"><span class="pd pb3" style="width:1.5px;height:1.5px;background:#E2E932;animation-delay:-.70s"></span></span>
            <span class="pa" style="--a:50deg;--r:27px"><span class="pd pb1" style="width:2.5px;height:2.5px;background:#00C4B4;animation-delay:-.06s"></span></span>
            <span class="pa" style="--a:56deg;--r:26px"><span class="pd pb1" style="width:2px;height:2px;background:#00A999;animation-delay:-.33s"></span></span>
            <span class="pa" style="--a:44deg;--r:28px"><span class="pd pb1" style="width:3px;height:3px;background:#00D0BC;animation-delay:-.60s"></span></span>
            <span class="pa" style="--a:48deg;--r:27px"><span class="pd pb2" style="width:2px;height:2px;background:#00A999;animation-delay:-.17s"></span></span>
            <span class="pa" style="--a:60deg;--r:25px"><span class="pd pb2" style="width:2.5px;height:2.5px;background:#00B8A8;animation-delay:-.58s"></span></span>
            <span class="pa" style="--a:42deg;--r:27px"><span class="pd pb2" style="width:2px;height:2px;background:#00C4B4;animation-delay:-1.10s"></span></span>
            <span class="pa" style="--a:53deg;--r:26px"><span class="pd pb3" style="width:1.5px;height:1.5px;background:#00A999;animation-delay:-.47s"></span></span>
            <span class="pa" style="--a:63deg;--r:28px"><span class="pd pb3" style="width:2px;height:2px;background:#00BCA8;animation-delay:-.95s"></span></span>
            <span class="pa" style="--a:35deg;--r:26px"><span class="pd pb2" style="width:2px;height:2px;background:#00A898;animation-delay:-1.40s"></span></span>
            <span class="pa" style="--a:28deg;--r:27px"><span class="pd pb3" style="width:1.5px;height:1.5px;background:#00A090;animation-delay:-.30s"></span></span>
            <span class="pa" style="--a:92deg;--r:26px"><span class="pd pb3" style="width:2px;height:2px;background:#A8C000;animation-delay:-.74s"></span></span>
            <span class="pa" style="--a:100deg;--r:25px"><span class="pd pb3" style="width:1.5px;height:1.5px;background:#00887A;animation-delay:-1.50s"></span></span>
            <span class="pa" style="--a:110deg;--r:26px"><span class="pd pb3" style="width:2px;height:2px;background:#007068;animation-delay:-.55s"></span></span>
            <span class="pa" style="--a:22deg;--r:27px"><span class="pd pb2" style="width:2px;height:2px;background:#00A090;animation-delay:-1.70s"></span></span>
            <span class="pa" style="--a:115deg;--r:25px"><span class="pd pb3" style="width:1.5px;height:1.5px;background:#006858;animation-delay:-.90s"></span></span>
          </div>
        </div>
        <p class="core-spinner-msg">Cargando...</p>
      </div>

   PARÁMETROS AJUSTABLES
   ──────────────────────
   • Tamaño total:  cambia width/height en .core-ring-wrap (actualmente 72px)
   • Mensaje:       el texto dentro de <p class="core-spinner-msg">
   • Velocidades:   animation-duration en .cr-o (3.8s) / .cr-m (2.2s) /
                    .cr-i (1.5s) / .cr-x (2.9s reverse)
   • Grosor anillos: los valores Xpx en los mask de cada .cr-*
═══════════════════════════════════════════════════════════════ */

/* ── Contenedor opcional (centra en pantalla completa) ── */
.core-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.core-spinner-msg {
  font-family: sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
  letter-spacing: .03em;
}

/* ── Wrapper principal ── */
.core-ring-wrap {
  width: 72px;
  height: 72px;
  position: relative;
  animation: core-pulse 3s ease-in-out infinite;
}

/* Halo de fondo difuso */
.core-ring-wrap::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    transparent 22%,
    rgba(0,169,153,.18) 44%,
    rgba(0,210,190,.32) 55%,
    rgba(226,233,50,.48) 65%,
    rgba(0,169,153,.12) 77%,
    transparent 88%
  );
  filter: blur(15px);
  animation: core-spin 2.2s linear infinite;
}

/* Base común a todos los anillos */
.cr {
  position: absolute;
  border-radius: 50%;
  animation: core-spin 2.2s linear infinite;
}

/* ── Anillo EXTERIOR — teal, 6.5px, blur suave ── */
.cr-o {
  inset: 0;
  transform-origin: 50.5% 49.5%;
  animation: core-spin 3.8s linear infinite;
  border-radius: 52% 48% 50% 50% / 48% 50% 53% 47%;
  background: conic-gradient(
    from 185deg,
    rgba(0,10,12,0)      0%,
    rgba(0,48,58,.45)   13%,
    rgba(0,130,118,.8)  31%,
    rgba(0,195,175,1)   47%,
    rgba(0,210,185,.85) 53%,
    rgba(0,169,153,.55) 65%,
    rgba(0,75,70,.35)   80%,
    rgba(0,10,12,0)    100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7.5px), #fff calc(100% - 6.5px));
  mask:         radial-gradient(farthest-side, transparent calc(100% - 7.5px), #fff calc(100% - 6.5px));
  filter: blur(1.8px);
}

/* ── Anillo PRINCIPAL — teal→lime, 5.5px, nítido ── */
.cr-m {
  inset: 3px;
  transform-origin: 49.5% 50.5%;
  animation: core-spin 2.2s linear infinite;
  border-radius: 48% 52% 51% 49% / 52% 47% 49% 52%;
  background: conic-gradient(
    from 200deg,
    #010D10   0%,
    #001A1F   8%,
    #003540  16%,
    #005C5A  28%,
    #00A999  46%,
    #A8C000  59%,
    #E2E932  65%,
    #B4CC00  70%,
    #00A999  78%,
    #005560  88%,
    #002830  94%,
    #010D10 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6.5px), #fff calc(100% - 5.5px));
  mask:         radial-gradient(farthest-side, transparent calc(100% - 6.5px), #fff calc(100% - 5.5px));
  filter: drop-shadow(0 0 6px rgba(226,233,50,.65)) drop-shadow(0 0 3px rgba(0,169,153,.5));
}

/* ── Anillo INTERIOR — lime, 4.5px, difuso ── */
.cr-i {
  inset: 6px;
  transform-origin: 50.3% 49.7%;
  animation: core-spin 1.5s linear infinite;
  border-radius: 50% 50% 47% 53% / 53% 49% 51% 47%;
  background: conic-gradient(
    from 220deg,
    rgba(0,10,12,0)       0%,
    rgba(0,48,58,.35)    22%,
    rgba(0,120,110,.55)  40%,
    rgba(120,185,0,.72)  57%,
    rgba(215,228,28,.95) 65%,
    rgba(180,212,0,.65)  73%,
    rgba(0,120,100,.35)  82%,
    rgba(0,10,12,0)     100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5.5px), #fff calc(100% - 4.5px));
  mask:         radial-gradient(farthest-side, transparent calc(100% - 5.5px), #fff calc(100% - 4.5px));
  filter: blur(1.2px);
}

/* ── Anillo CONTRA-GIRO — teal-lime tenue, 3.5px, sentido inverso ── */
.cr-x {
  inset: 8px;
  transform-origin: 49.6% 50.4%;
  animation: core-spin 2.9s linear infinite reverse;
  border-radius: 51% 49% 48% 52% / 48% 52% 50% 50%;
  background: conic-gradient(
    from 240deg,
    rgba(0,10,12,0)       0%,
    rgba(0,80,74,.3)     28%,
    rgba(0,169,153,.7)   50%,
    rgba(170,192,0,.55)  62%,
    rgba(226,233,50,.8)  67%,
    rgba(0,130,110,.3)   78%,
    rgba(0,10,12,0)     100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #fff calc(100% - 3.5px));
  mask:         radial-gradient(farthest-side, transparent calc(100% - 4.5px), #fff calc(100% - 3.5px));
  filter: blur(0.8px);
}

/* ── Partículas ── */
/* cr-pts: contenedor que co-rota con los anillos */
.cr-pts {
  position: absolute;
  inset: 0;
  animation: core-spin 2.2s linear infinite;
  pointer-events: none;
}

/*
  Arquitectura brazo+punto:
  .pa  = brazo sin dimensiones — coloca el punto en el borde del anillo
         usando var(--a) y var(--r) SOLO en un transform estático.
  .pd  = punto visible — anima con translateY puro (sin custom properties
         en keyframes), heredando el sistema de coordenadas rotado del brazo,
         por lo que siempre se mueve radialmente HACIA AFUERA.
*/
.pa {
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r)));
}

.pd {
  position: absolute;
  border-radius: 50%;
  top: -1px;
  left: -1px;
}

.pb1 { animation: pb1 1.0s ease-out infinite; }
.pb2 { animation: pb2 1.7s ease-out infinite; }
.pb3 { animation: pb3 2.6s ease-out infinite; }

/* ── Keyframes ── */
@keyframes pb1 {
  0%   { transform: translateY(0);     opacity: 1   }
  10%  { transform: translateY(-11px); opacity: .85 }
  35%  { transform: translateY(-27px); opacity: .3  }
  70%  { transform: translateY(-41px); opacity: .06 }
  100% { transform: translateY(-50px); opacity: 0   }
}
@keyframes pb2 {
  0%   { transform: translateY(0);     opacity: .9  }
  15%  { transform: translateY(-8px);  opacity: .7  }
  45%  { transform: translateY(-21px); opacity: .3  }
  100% { transform: translateY(-33px); opacity: 0   }
}
@keyframes pb3 {
  0%   { transform: translateY(0);     opacity: .85 }
  20%  { transform: translateY(-7px);  opacity: .6  }
  55%  { transform: translateY(-16px); opacity: .2  }
  100% { transform: translateY(-24px); opacity: 0   }
}
@keyframes core-spin  { to { transform: rotate(360deg) } }
@keyframes core-pulse {
  0%, 100% { transform: scale(1);    opacity: 1   }
  50%       { transform: scale(1.07); opacity: .91 }
}