/* ============================================================
   demokratian — loaders.css
   Dos loaders reutilizables, sin dependencias.
   Cada uno con variante .on-dark para fondos oscuros.
   Respeta prefers-reduced-motion.
   ============================================================ */

:where(.loader) {
  /* tokens locales — sobreescribibles desde fuera */
  --loader-green:      var(--brand);
  --loader-green-deep: var(--brand-deep);
  --loader-ink:        #1A1D1A;
  --loader-paper:      #FAFAF7;
  --loader-line:       #E5E5DF;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* ============================================================
   LOADER · dots — tres puntos en degradado de verde → tinta
   Tamaño por defecto: 48×12. Cambia --dot-size para escalar.
   ============================================================ */

.loader-dots {
  --dot-size: 10px;
  --dot-gap:  10px;
  gap: var(--dot-gap);
}
.loader-dots > span {
  width:  var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  display: inline-block;
  animation: loader-dots-pulse 1.2s ease-in-out infinite;
}
.loader-dots > span:nth-child(1) { background: var(--loader-green);      }
.loader-dots > span:nth-child(2) { background: var(--loader-green-deep); animation-delay: 0.15s; }
.loader-dots > span:nth-child(3) { background: var(--loader-ink);        animation-delay: 0.30s; }

/* Variante para fondo oscuro: el tercer punto pasa de tinta → papel */
.loader-dots.on-dark > span:nth-child(3) { background: var(--loader-paper); }

@keyframes loader-dots-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* Tamaños predefinidos */
.loader-dots.is-sm { --dot-size: 6px;  --dot-gap: 6px;  }
.loader-dots.is-md { --dot-size: 10px; --dot-gap: 10px; } /* default */
.loader-dots.is-lg { --dot-size: 14px; --dot-gap: 14px; }


/* ============================================================
   LOADER · ballot — casilla de voto que se rellena y vacía
   Tamaño por defecto: 56×56. Cambia --ballot-size.
   ============================================================ */

.loader-ballot {
  --ballot-size: 56px;
  --ballot-border: 2px;
  --ballot-radius: 8px;
  width:  var(--ballot-size);
  height: var(--ballot-size);
  position: relative;
}
.loader-ballot::before,
.loader-ballot::after {
  content: "";
  position: absolute;
  border-radius: var(--ballot-radius);
}
.loader-ballot::before {
  inset: 0;
  border: var(--ballot-border) solid var(--loader-ink);
  background: #fff;
}
.loader-ballot::after {
  inset: calc(var(--ballot-border) + 2px);
  background: var(--loader-green);
  transform-origin: bottom center;
  animation: loader-ballot-fill 1.8s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes loader-ballot-fill {
  0%   { transform: scaleY(0); opacity: 0; transform-origin: bottom center; }
  35%  { transform: scaleY(1); opacity: 1; transform-origin: bottom center; }
  75%  { transform: scaleY(1); opacity: 1; transform-origin: top center; }
  100% { transform: scaleY(0); opacity: 0; transform-origin: top center; }
}

/* Variante para fondo oscuro: borde papel, fondo interior oscuro */
.loader-ballot.on-dark::before {
  border-color: var(--loader-paper);
  background: transparent;
}
.loader-ballot.on-dark::after {
  background: var(--loader-green);
}

/* Tamaños predefinidos */
.loader-ballot.is-sm { --ballot-size: 32px; --ballot-border: 1.5px; --ballot-radius: 5px; }
.loader-ballot.is-md { --ballot-size: 56px; }
.loader-ballot.is-lg { --ballot-size: 80px; --ballot-border: 2.5px; --ballot-radius: 10px; }


/* ============================================================
   Accesibilidad — respeta usuarios con reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .loader-dots > span,
  .loader-ballot::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    opacity: 0.6;
  }
  .loader-ballot::after { transform: scaleY(1); opacity: 0.4; }
}