/* =========================================================
   RIFA MASTER - EFECTOS DE BARRA (FRONTEND + PREVIEW ADMIN)
   TODOS LOS ESTILOS TIENEN ANIMACIÓN DE MOVIMIENTO
   ========================================================= */

/* ---------- BASE GENERAL PARA LA BARRA ---------- */
/* Aplica a la barra real (.rm-bar-fill) y al preview (#p_bar_fill) */

#p_bar_fill,
.rm-bar-fill {
  position: relative;
  overflow: hidden;
  /* Dejar que el PHP/JS controle height, width, font, etc. */
  background: linear-gradient(
    90deg,
    var(--rm-fill-1, #e63946),
    var(--rm-fill-2, #ff8a80)
  );
}

#p_bar_fill span,
.rm-bar-fill span {
  position: relative;
  z-index: 2;
}

/* Capa animada por defecto (por si algún estilo no aplica nada extra) */
#p_bar_fill::before,
.rm-bar-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ---------- KEYFRAMES GENERALES REUTILIZABLES ---------- */

/* Rayas diagonales desplazándose de derecha a izquierda */
@keyframes rmStripesSlide {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

/* Brillo que recorre la barra de izquierda a derecha */
@keyframes rmShineMove {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  30% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Pulso suave de “respiración” */
@keyframes rmPulseSoft {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.25);
  }
  100% {
    filter: brightness(1);
  }
}

/* Ondas horizontales (simula líquido / fluido) */
@keyframes rmWave {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 80px 0;
  }
}

/* Pixel / bloques deslizándose */
@keyframes rmBlocksMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 32px 0;
  }
}

/* Glow externo intermitente */
@keyframes rmOuterGlow {
  0% {
    box-shadow: 0 0 0px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 255, 255, 0.1);
  }
}

/* Rayas dobles en direcciones opuestas (parallax) */
@keyframes rmParallaxA {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 60px 0;
  }
}
@keyframes rmParallaxB {
  from {
    background-position: 60px 0;
  }
  to {
    background-position: 0 0;
  }
}

/* =========================================================
   STYLE 1 - CLÁSICO RAYAS DIAGONALES
   ========================================================= */

#p_bar_fill.style-1,
.rm-bar-fill.style-1 {
  background: linear-gradient(
    90deg,
    var(--rm-fill-1, #e63946),
    var(--rm-fill-2, #ff8a80)
  );
}

#p_bar_fill.style-1::before,
.rm-bar-fill.style-1::before {
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.35) 75%,
    transparent 75%,
    transparent
  );
  background-size: 28px 28px;
  animation: rmStripesSlide 0.7s linear infinite;
}

/* =========================================================
   STYLE 2 - DEGRADADO SUAVE + BRILLO QUE PASA
   ========================================================= */

#p_bar_fill.style-2,
.rm-bar-fill.style-2 {
  background: linear-gradient(
    90deg,
    var(--rm-fill-1, #FF6B6B),
    var(--rm-fill-2, #FFD93D)
  );
  animation: rmPulseSoft 1.4s ease-in-out infinite;
}

#p_bar_fill.style-2::before,
.rm-bar-fill.style-2::before {
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.9) 40%,
    rgba(255, 255, 255, 0.9) 60%,
    transparent 100%
  );
  width: 60%;
  transform: translateX(-100%);
  animation: rmShineMove 1.8s linear infinite;
}

/* =========================================================
   STYLE 3 - RAYAS MULTICOLOR (EFECTO “CINTA”
   ========================================================= */

#p_bar_fill.style-3,
.rm-bar-fill.style-3 {
  background: linear-gradient(
    90deg,
    var(--rm-fill-1, #00C6FF),
    var(--rm-fill-2, #0072FF)
  );
}

#p_bar_fill.style-3::before,
.rm-bar-fill.style-3::before {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0px,
    rgba(255, 255, 255, 0.08) 6px,
    rgba(0, 0, 0, 0.14) 6px,
    rgba(0, 0, 0, 0.14) 12px
  );
  background-size: 32px 32px;
  animation: rmStripesSlide 0.5s linear infinite;
}

/* =========================================================
   STYLE 4 - ONDA FLUIDA (WAVE)
   ========================================================= */

#p_bar_fill.style-4,
.rm-bar-fill.style-4 {
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 25%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0.1) 75%
    ),
    linear-gradient(
      90deg,
      var(--rm-fill-1, #00b09b),
      var(--rm-fill-2, #96c93d)
    );
  background-size: 80px 100%, 100% 100%;
  animation: rmWave 1.1s linear infinite;
}

/* =========================================================
   STYLE 5 - GLOW NEÓN (BARRA “ENERGÉTICA”)
   ========================================================= */

#p_bar_fill.style-5,
.rm-bar-fill.style-5 {
  background: linear-gradient(
    90deg,
    var(--rm-fill-1, #34D399),
    var(--rm-fill-2, #22C55E)
  );
  animation: rmOuterGlow 1.2s ease-in-out infinite;
}

#p_bar_fill.style-5::before,
.rm-bar-fill.style-5::before {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.25),
    transparent 60%
  );
  background-size: 40px 100%;
  animation: rmStripesSlide 1s linear infinite;
}

/* =========================================================
   STYLE 6 - BLOQUES / PIXEL (SEGMENTOS QUE SE MUEVEN)
   ========================================================= */

#p_bar_fill.style-6,
.rm-bar-fill.style-6 {
  background-image: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16) 0,
      rgba(255, 255, 255, 0.16) 12px,
      transparent 12px,
      transparent 24px
    ),
    linear-gradient(
      90deg,
      var(--rm-fill-1, #6366F1),
      var(--rm-fill-2, #A855F7)
    );
  background-size: 32px 100%, 100% 100%;
  animation: rmBlocksMove 0.7s linear infinite;
}

/* =========================================================
   STYLE 7 - DOBLE CAPA PARALLAX (DOS RAYADOS CRUZADOS)
   ========================================================= */

#p_bar_fill.style-7,
.rm-bar-fill.style-7 {
  background: linear-gradient(
    90deg,
    var(--rm-fill-1, #EF4444),
    var(--rm-fill-2, #F97316)
  );
}

#p_bar_fill.style-7::before,
.rm-bar-fill.style-7::before {
  background-image: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.18) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0.18) 75%,
      transparent 75%,
      transparent
    ),
    linear-gradient(
      -120deg,
      rgba(0, 0, 0, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(0, 0, 0, 0.15) 50%,
      rgba(0, 0, 0, 0.15) 75%,
      transparent 75%,
      transparent
    );
  background-size: 40px 40px, 40px 40px;
  animation: rmParallaxA 1s linear infinite, rmParallaxB 1.2s linear infinite;
}

/* =========================================================
   STYLE 8 - BARRA “GLASS” (VIDRIO CON BRILLO CONSTANTE)
   ========================================================= */

#p_bar_fill.style-8,
.rm-bar-fill.style-8 {
  background: linear-gradient(
    90deg,
    var(--rm-fill-1, #0EA5E9),
    var(--rm-fill-2, #22D3EE)
  );
  backdrop-filter: blur(2px);
}

#p_bar_fill.style-8::before,
.rm-bar-fill.style-8::before {
  background: radial-gradient(
    circle at 0% 50%,
    rgba(255, 255, 255, 0.9) 0,
    transparent 55%
  );
  animation: rmShineMove 2s ease-in-out infinite;
}

/* =========================================================
   STYLE 9 - “LAVA” (MEZCLA VIVA + PULSO)
   ========================================================= */

#p_bar_fill.style-9,
.rm-bar-fill.style-9 {
  background-image: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.18),
      transparent 60%
    ),
    linear-gradient(
      90deg,
      var(--rm-fill-1, #F97316),
      var(--rm-fill-2, #FACC15)
    );
  background-size: 120px 100%, 100% 100%;
  animation: rmWave 0.9s linear infinite, rmPulseSoft 1.6s ease-in-out infinite;
}

#p_bar_fill.style-9::before,
.rm-bar-fill.style-9::before {
  background-image: radial-gradient(
    circle at 30% 50%,
    rgba(255, 255, 255, 0.25),
    transparent 55%
  );
  opacity: 0.8;
}

/* =========================================================
   STYLE 10 - MONOCOLOR ELEGANTE + SHINE LENTO
   ========================================================= */

#p_bar_fill.style-10,
.rm-bar-fill.style-10 {
  background: linear-gradient(
    90deg,
    var(--rm-fill-1, #1F2937),
    var(--rm-fill-2, #4B5563)
  );
  animation: rmPulseSoft 1.8s ease-in-out infinite;
}

#p_bar_fill.style-10::before,
.rm-bar-fill.style-10::before {
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );
  width: 70%;
  animation: rmShineMove 2.4s linear infinite;
}