/**
 * iBlod scan loader — reemplaza dot-opacity-loader (3 puntos)
 * Glass blur + glow dinámico + barrido energético no lineal
 */

:root {
 --iblod-top-nav-h: 51px;
}

.dot-opacity-loader {
 --iblod-scan-w: min(300px, 86vw);
 --iblod-scan-primary: #44519e;
 --iblod-scan-primary-dark: #373f7a;
 --iblod-scan-primary-mid: #4f5da8;
 --iblod-scan-primary-soft: #5562b0;
 --iblod-scan-white: rgba(255, 255, 255, 0.92);
 --iblod-scan-duration: 2.75s;

 width: var(--iblod-scan-w);
 height: 44px;
 margin: 18px auto;
 padding: 0;
 border-radius: 0;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 isolation: isolate;
}

.dot-opacity-loader > span {
 position: absolute;
 top: 50%;
 left: 0;
 width: 5px;
 height: 5px;
 margin: 0;
 padding: 0;
 border-radius: 50%;
 border: none;
 background: radial-gradient(circle, var(--iblod-scan-white) 0%, var(--iblod-scan-primary-mid) 45%, transparent 72%);
 box-shadow:
  0 0 6px rgba(68, 81, 158, 0.85),
  0 0 14px rgba(55, 63, 122, 0.55);
 opacity: 0;
 pointer-events: none;
 will-change: transform, opacity;
 animation: iblodScanParticle var(--iblod-scan-duration) cubic-bezier(0.37, 0, 0.18, 1) infinite;
}

.dot-opacity-loader > span:nth-child(1) {
 animation-delay: calc(var(--iblod-scan-duration) * -0.04);
}

.dot-opacity-loader > span:nth-child(2) {
 width: 4px;
 height: 4px;
 animation-delay: calc(var(--iblod-scan-duration) * -0.11);
 filter: blur(0.2px);
}

.dot-opacity-loader > span:nth-child(3) {
 width: 3px;
 height: 3px;
 animation-delay: calc(var(--iblod-scan-duration) * -0.18);
 filter: blur(0.4px);
 opacity: 0.85;
}

/* Cristal / pista */
.dot-opacity-loader::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 50%;
 height: 3px;
 transform: translateY(-50%);
 border-radius: 999px;
 background:
  linear-gradient(
   90deg,
   rgba(68, 81, 158, 0.04) 0%,
   rgba(255, 255, 255, 0.22) 50%,
   rgba(68, 81, 158, 0.04) 100%
  );
 border: 1px solid rgba(255, 255, 255, 0.38);
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.55),
  inset 0 -1px 0 rgba(68, 81, 158, 0.08),
  0 0 0 1px rgba(68, 81, 158, 0.06),
  0 4px 18px rgba(68, 81, 158, 0.1);
 backdrop-filter: blur(14px) saturate(160%);
 -webkit-backdrop-filter: blur(14px) saturate(160%);
 animation: iblodScanTrackGlow var(--iblod-scan-duration) cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
}

/* Haz de escaneo */
.dot-opacity-loader::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 width: 78px;
 height: 3px;
 transform: translateY(-50%) translateX(-78px);
 border-radius: 999px;
 background: linear-gradient(
  90deg,
  transparent 0%,
  rgba(68, 81, 158, 0.2) 12%,
  var(--iblod-scan-primary-mid) 38%,
  var(--iblod-scan-white) 50%,
  var(--iblod-scan-primary-mid) 62%,
  rgba(55, 63, 122, 0.25) 88%,
  transparent 100%
 );
 box-shadow:
  0 0 8px rgba(68, 81, 158, 0.75),
  0 0 20px rgba(55, 63, 122, 0.5),
  0 0 36px rgba(68, 81, 158, 0.32);
 opacity: 0;
 will-change: transform, opacity, width, filter;
 animation: iblodScanBeam var(--iblod-scan-duration) cubic-bezier(0.37, 0, 0.18, 1) infinite;
}

@keyframes iblodScanBeam {
 0% {
  transform: translateY(-50%) translateX(-88px) scaleX(0.72);
  opacity: 0;
  filter: blur(1.5px) brightness(0.85);
  width: 56px;
 }
 7% {
  opacity: 1;
  filter: blur(0) brightness(1.15);
 }
 22% {
  transform: translateY(-50%) translateX(calc(var(--iblod-scan-w) * 0.22)) scaleX(1.08);
  width: 92px;
 }
 48% {
  transform: translateY(-50%) translateX(calc(var(--iblod-scan-w) * 0.52)) scaleX(1);
  width: 78px;
  filter: blur(0) brightness(1.25);
 }
 74% {
  transform: translateY(-50%) translateX(calc(var(--iblod-scan-w) * 0.86)) scaleX(0.94);
  width: 68px;
  opacity: 0.95;
 }
 92% {
  transform: translateY(-50%) translateX(calc(var(--iblod-scan-w) + 88px)) scaleX(0.7);
  opacity: 0;
  filter: blur(1.2px) brightness(0.9);
 }
 100% {
  transform: translateY(-50%) translateX(-88px) scaleX(0.72);
  opacity: 0;
  width: 56px;
 }
}

@keyframes iblodScanParticle {
 0%, 100% {
  transform: translateY(-50%) translateX(-12px) scale(0.4);
  opacity: 0;
 }
 8% {
  opacity: 0.95;
  transform: translateY(-50%) translateX(0) scale(1);
 }
 30% {
  transform: translateY(calc(-50% - 1px)) translateX(calc(var(--iblod-scan-w) * 0.28)) scale(0.92);
  opacity: 0.75;
 }
 55% {
  transform: translateY(calc(-50% + 1px)) translateX(calc(var(--iblod-scan-w) * 0.58)) scale(0.85);
  opacity: 0.55;
 }
 78% {
  transform: translateY(-50%) translateX(calc(var(--iblod-scan-w) * 0.9)) scale(0.65);
  opacity: 0.25;
 }
 92% {
  transform: translateY(-50%) translateX(calc(var(--iblod-scan-w) + 16px)) scale(0.35);
  opacity: 0;
 }
}

@keyframes iblodScanTrackGlow {
 0%, 100% {
  box-shadow:
   inset 0 1px 0 rgba(255, 255, 255, 0.55),
   inset 0 -1px 0 rgba(68, 81, 158, 0.08),
   0 0 0 1px rgba(68, 81, 158, 0.06),
   0 4px 14px rgba(68, 81, 158, 0.08);
 }
 38% {
  box-shadow:
   inset 0 1px 0 rgba(255, 255, 255, 0.62),
   inset 0 -1px 0 rgba(68, 81, 158, 0.18),
   0 0 0 1px rgba(68, 81, 158, 0.16),
   0 0 22px rgba(68, 81, 158, 0.24),
   0 4px 20px rgba(55, 63, 122, 0.16);
 }
 62% {
  box-shadow:
   inset 0 1px 0 rgba(255, 255, 255, 0.58),
   inset 0 -1px 0 rgba(79, 93, 168, 0.16),
   0 0 0 1px rgba(68, 81, 158, 0.18),
   0 0 30px rgba(68, 81, 158, 0.28),
   0 4px 24px rgba(55, 63, 122, 0.18);
 }
}

/* ── Carga al hacer scroll (inline, sin barra fija ni placeholders) ── */
.iblod-load-more {
 overflow: hidden;
 max-height: 56px;
 padding: 10px 0;
 margin: 0;
 text-align: center;
 pointer-events: none;
}

.iblod-load-more .dot-opacity-loader {
 display: none !important;
}

.iblod-ring-loader {
 --iblod-ring-primary: #44519e;
 --iblod-ring-primary-dark: #373f7a;
 --iblod-ring-primary-mid: #4f5da8;
 --iblod-ring-size: 40px;
 width: var(--iblod-ring-size);
 height: var(--iblod-ring-size);
 margin: 0 auto;
 position: relative;
 border-radius: 50%;
 isolation: isolate;
}

.iblod-ring-loader::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: 50%;
 border: 3px solid rgba(68, 81, 158, 0.14);
 box-shadow:
  inset 0 0 10px rgba(68, 81, 158, 0.1),
  0 0 16px rgba(68, 81, 158, 0.12);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
}

.iblod-ring-loader::after {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: 50%;
 border: 3px solid transparent;
 border-top-color: var(--iblod-ring-primary-mid);
 border-right-color: rgba(255, 255, 255, 0.88);
 box-shadow:
  0 0 8px rgba(68, 81, 158, 0.65),
  0 0 18px rgba(55, 63, 122, 0.4);
 animation: iblodRingSpin 0.95s cubic-bezier(0.42, 0.12, 0.28, 0.88) infinite;
 will-change: transform;
}

@keyframes iblodRingSpin {
 to {
  transform: rotate(360deg);
 }
}

/* ── Barra horizontal fija: solo carga inicial / cambio de URL ── */
.container-scroller .content-wrapper > #loading-index,
.container-scroller .list-wrapper > #loading-index,
.container-scroller .list-wrapper > #loading-red {
 position: fixed;
 top: var(--iblod-top-nav-h);
 left: 0;
 right: 0;
 width: 100%;
 height: 3px;
 margin: 0;
 padding: 0;
 max-height: none !important;
 z-index: 1031;
 pointer-events: none;
 overflow: visible;
 background: transparent;
}

.container-scroller .content-wrapper > #loading-index .dot-opacity-loader,
.container-scroller .list-wrapper > #loading-index .dot-opacity-loader,
.container-scroller .list-wrapper > #loading-red .dot-opacity-loader {
 --iblod-scan-w: 100vw;
 --iblod-scan-duration: 2.4s;

 width: 100%;
 height: 3px;
 margin: 0;
}

.container-scroller .content-wrapper > #loading-index .dot-opacity-loader > span,
.container-scroller .list-wrapper > #loading-index .dot-opacity-loader > span,
.container-scroller .list-wrapper > #loading-red .dot-opacity-loader > span {
 display: none;
}

.container-scroller .content-wrapper > #loading-index .dot-opacity-loader::before,
.container-scroller .list-wrapper > #loading-index .dot-opacity-loader::before,
.container-scroller .list-wrapper > #loading-red .dot-opacity-loader::before {
 left: 0;
 right: 0;
 top: 0;
 height: 100%;
 transform: none;
 border-radius: 0;
 border: none;
 border-bottom: 1px solid rgba(255, 255, 255, 0.12);
 background:
  linear-gradient(
   90deg,
   rgba(55, 63, 122, 0.28) 0%,
   rgba(68, 81, 158, 0.14) 50%,
   rgba(55, 63, 122, 0.28) 100%
  );
 box-shadow:
  inset 0 -1px 0 rgba(68, 81, 158, 0.35),
  0 1px 12px rgba(68, 81, 158, 0.22);
 backdrop-filter: blur(10px) saturate(140%);
 -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.container-scroller .content-wrapper > #loading-index .dot-opacity-loader::after,
.container-scroller .list-wrapper > #loading-index .dot-opacity-loader::after,
.container-scroller .list-wrapper > #loading-red .dot-opacity-loader::after {
 top: 0;
 height: 100%;
 transform: translateX(-88px);
 border-radius: 0;
 box-shadow:
  0 0 10px rgba(68, 81, 158, 0.85),
  0 0 22px rgba(55, 63, 122, 0.6),
  0 0 40px rgba(68, 81, 158, 0.38);
}

@keyframes iblodScanBeamTop {
 0% {
  transform: translateX(-88px) scaleX(0.72);
  opacity: 0;
  filter: blur(1.5px) brightness(0.85);
  width: 56px;
 }
 7% {
  opacity: 1;
  filter: blur(0) brightness(1.2);
 }
 22% {
  transform: translateX(calc(100vw * 0.22)) scaleX(1.08);
  width: 92px;
 }
 48% {
  transform: translateX(calc(100vw * 0.52)) scaleX(1);
  width: 78px;
  filter: blur(0) brightness(1.3);
 }
 74% {
  transform: translateX(calc(100vw * 0.86)) scaleX(0.94);
  width: 68px;
  opacity: 0.95;
 }
 92% {
  transform: translateX(calc(100vw + 88px)) scaleX(0.7);
  opacity: 0;
  filter: blur(1.2px) brightness(0.9);
 }
 100% {
  transform: translateX(-88px) scaleX(0.72);
  opacity: 0;
  width: 56px;
 }
}

.container-scroller .content-wrapper > #loading-index .dot-opacity-loader::after,
.container-scroller .list-wrapper > #loading-index .dot-opacity-loader::after,
.container-scroller .list-wrapper > #loading-red .dot-opacity-loader::after {
 animation-name: iblodScanBeamTop;
}

/* Inline / modal — mantiene loader centrado en su contexto */
.comentario-modal-loading .dot-opacity-loader,
#loading-comentario-modal .dot-opacity-loader,
#loading-comentario .dot-opacity-loader {
 --iblod-scan-w: min(220px, 72vw);
 height: 36px;
 margin: 8px auto;
}

@media (prefers-reduced-motion: reduce) {
 .dot-opacity-loader::after,
 .dot-opacity-loader::before,
 .dot-opacity-loader > span,
 .iblod-ring-loader::after {
  animation-duration: 4.5s;
  animation-timing-function: linear;
 }
}

/* WhatsApp / OTP — loader clásico de 3 puntos (anima opacidad) */
.dot-opacity-loader--classic {
 --iblod-scan-w: unset;
 --iblod-scan-duration: unset;
 width: 100px;
 height: 100px;
 border-radius: 100%;
 position: relative;
 margin: 0 auto;
 padding: 0;
 display: block;
 background: transparent;
 isolation: auto;
}

.dot-opacity-loader--classic::before,
.dot-opacity-loader--classic::after {
 content: none;
 display: none;
 animation: none;
}

.dot-opacity-loader--classic > span {
 position: static;
 display: inline-block;
 width: 20px;
 height: 20px;
 border-radius: 100%;
 background: #44519e;
 background-color: #44519e;
 margin: 35px 5px;
 padding: 0;
 border: none;
 opacity: 0;
 box-shadow: none;
 filter: none;
 pointer-events: auto;
 will-change: opacity;
 animation: dotOpacityClassic 1s ease-in-out infinite;
}

.dot-opacity-loader--classic > span:nth-child(1) {
 animation-delay: 0s;
}

.dot-opacity-loader--classic > span:nth-child(2) {
 width: 20px;
 height: 20px;
 filter: none;
 animation-delay: 0.33s;
}

.dot-opacity-loader--classic > span:nth-child(3) {
 width: 20px;
 height: 20px;
 filter: none;
 opacity: 0;
 animation-delay: 0.66s;
}

.loading-spinner .dot-opacity-loader--classic,
#loading-registro .dot-opacity-loader--classic,
#loading .dot-opacity-loader--classic,
#loading-codigo-whatsapp .dot-opacity-loader--classic,
#loading-whatsapp-codigo .dot-opacity-loader--classic,
#loading-admin-whatsapp .dot-opacity-loader--classic {
 width: 80px;
 height: 50px;
}

.loading-spinner .dot-opacity-loader--classic > span,
#loading-registro .dot-opacity-loader--classic > span,
#loading .dot-opacity-loader--classic > span,
#loading-codigo-whatsapp .dot-opacity-loader--classic > span,
#loading-whatsapp-codigo .dot-opacity-loader--classic > span,
#loading-admin-whatsapp .dot-opacity-loader--classic > span {
 width: 12px;
 height: 12px;
 margin: 19px 4px;
}

.loading-spinner .dot-opacity-loader--classic > span:nth-child(2),
.loading-spinner .dot-opacity-loader--classic > span:nth-child(3),
#loading-registro .dot-opacity-loader--classic > span:nth-child(2),
#loading-registro .dot-opacity-loader--classic > span:nth-child(3),
#loading .dot-opacity-loader--classic > span:nth-child(2),
#loading .dot-opacity-loader--classic > span:nth-child(3),
#loading-codigo-whatsapp .dot-opacity-loader--classic > span:nth-child(2),
#loading-codigo-whatsapp .dot-opacity-loader--classic > span:nth-child(3),
#loading-whatsapp-codigo .dot-opacity-loader--classic > span:nth-child(2),
#loading-whatsapp-codigo .dot-opacity-loader--classic > span:nth-child(3),
#loading-admin-whatsapp .dot-opacity-loader--classic > span:nth-child(2),
#loading-admin-whatsapp .dot-opacity-loader--classic > span:nth-child(3) {
 width: 12px;
 height: 12px;
 filter: none;
}

@keyframes dotOpacityClassic {
 0%,
 100% {
  opacity: 0;
 }
 60% {
  opacity: 1;
 }
}

@media (prefers-reduced-motion: reduce) {
 .dot-opacity-loader--classic > span {
  animation-duration: 1.8s;
 }
}