/* =========================================================
   EFECTOS-CAMINO.CSS
   Galería de efectos ambientales para el fondo de "Mi camino de
   capacitaciones" (.pac-board-fondo). Ninguno de estos efectos
   depende de qué haya DIBUJADO en la imagen de fondo -- son capas
   flotando por encima (partículas, destellos, niebla...) o atadas a
   la curva del camino que ya calcula JS, no a un punto fijo de la
   foto. Así, cuando cambies de imagen (fábrica, oficina, lo que
   sea), el efecto elegido sigue viéndose bien sin tocar código.

   Solo se anima "transform" y "opacity" en todos los efectos -- son
   las dos únicas propiedades que el navegador puede animar usando
   la tarjeta gráfica en vez de recalcular el diseño de la página en
   cada fotograma, así que corren suaves incluso en un celular
   modesto.
========================================================= */

.pac-board-fondo {
    overflow: hidden;
}

.pac-efecto-capa {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Si el usuario tiene activado "reducir movimiento" en su sistema
   operativo/navegador, se apagan TODOS los efectos -- no es un
   capricho de accesibilidad, hay gente a la que el movimiento
   constante de fondo le genera mareo real. La imagen se queda
   quieta, nada más. */
@media (prefers-reduced-motion: reduce) {
    .pac-efecto-capa { display: none !important; }
}

/* =========================================================
   1) BRILLO EN EL CAMINO
   REDISEÑADO (2026-09-08, 2ª vuelta): el trazo de brillo vive
   SIEMPRE en el HTML como un elemento propio (#pac-board-path-glow,
   ver mis-capacitaciones.php), separado del trazo base
   (#pac-board-path-line) -- así el punteado que define el camino
   NUNCA desaparece, pase lo que pase con los efectos: el brillo se
   dibuja ENCIMA como una capa extra, no lo reemplaza. Su forma se
   actualiza en el mismo lugar y momento que el trazo base (ver
   dibujarCamino() en mis-capacitaciones.php), así que nunca puede
   quedar desincronizado -- y al activarse por puro CSS (este mismo
   selector, reaccionando al atributo del contenedor), tampoco puede
   chocar con ningún otro efecto combinado.
========================================================= */
.pac-board-fondo[data-efecto-camino*="brillo-camino"] #pac-board-path-glow {
    stroke: #fff;
    stroke-width: 5;
    stroke-dasharray: 30 3000;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.9));
    animation: pac-efecto-recorrer 5s linear infinite;
    opacity: .95;
}
@keyframes pac-efecto-recorrer {
    from { stroke-dashoffset: 3000; }
    to   { stroke-dashoffset: 0; }
}

/* Variante "cometa": una estela más larga que se va desvaneciendo,
   en vez de un segmento de brillo parejo -- dan ganas de decir que
   "algo viaja" por el camino, no solo que brilla parejo. */
.pac-board-fondo[data-efecto-camino*="brillo-camino-cometa"] #pac-board-path-glow {
    stroke: #fff;
    stroke-width: 6;
    stroke-dasharray: 4 8 4 20 4 40 4 2960;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.95));
    animation: pac-efecto-recorrer 4s linear infinite;
    opacity: .95;
}

/* Variante "de colores": el mismo recorrido, pero el color del
   trazo va cambiando despacio entre varios tonos -- un aire más
   festivo/llamativo. (Nota: no se puede lograr con hue-rotate sobre
   blanco -- el blanco no tiene tono que rotar, por eso se anima el
   color directamente.) */
.pac-board-fondo[data-efecto-camino*="brillo-camino-color"] #pac-board-path-glow {
    stroke-width: 5;
    stroke-dasharray: 30 3000;
    stroke-linecap: round;
    opacity: .95;
    animation: pac-efecto-recorrer 5s linear infinite, pac-efecto-cambiar-color 6s linear infinite;
}
@keyframes pac-efecto-cambiar-color {
    0%   { stroke: #4f8cff; filter: drop-shadow(0 0 5px #4f8cff); }
    33%  { stroke: #5dcaa5; filter: drop-shadow(0 0 5px #5dcaa5); }
    66%  { stroke: #f2a623; filter: drop-shadow(0 0 5px #f2a623); }
    100% { stroke: #4f8cff; filter: drop-shadow(0 0 5px #4f8cff); }
}

/* =========================================================
   2) PARTÍCULAS ASCENDENTES
   Puntos suaves subiendo desde abajo -- sirve para vapor, polvo,
   luciérnagas, lo que se preste según la imagen, sin apuntar a
   nada concreto de la foto.
   FIX (2026-09-08): antes viajaban un % de su propio tamaño (unos
   pocos píxeles) desde el borde del contenedor -- invisibles en un
   camino largo. Ahora JS las reparte en TODA la altura real (ver
   generarFlotantes) y aquí solo hacen un flotar local suave, sin
   depender del tamaño del contenedor.
========================================================= */
.pac-particula {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
    filter: blur(1px);
    animation-name: pac-efecto-flotar-local;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes pac-efecto-flotar-local {
    0%, 100% { transform: translate(0, 0); opacity: .35; }
    50%      { transform: translate(var(--deriva, 15px), -45px); opacity: .8; }
}

/* =========================================================
   3) DESTELLOS
   Puntitos de luz titilando en posiciones fijas -- como polvo de
   estrellas o chispas de soldadura, funciona sobre casi cualquier
   fondo sin representar nada literal.
========================================================= */
.pac-destello {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 2px rgba(255,255,255,.8);
    animation-name: pac-efecto-titilar;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes pac-efecto-titilar {
    0%, 100% { opacity: 0; transform: scale(.4); }
    50%      { opacity: 1; transform: scale(1); }
}

/* =========================================================
   4) BURBUJAS
   Como las partículas, pero redondas con borde fino (huecas) y
   con un leve balanceo lateral -- pensadas para fondos con agua o
   líquidos, pero ambientales igual, no señalan un punto exacto.
   Mismo fix que partículas: flotar local, repartidas en toda la
   altura real por JS.
========================================================= */
.pac-burbuja {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.65);
    animation-name: pac-efecto-flotar-local-grande;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes pac-efecto-flotar-local-grande {
    0%, 100% { transform: translate(0, 0); opacity: .5; }
    50%      { transform: translate(var(--deriva, 15px), -60px); opacity: .9; }
}

/* =========================================================
   5) NIEBLA FLOTANTE
   1-2 bandas anchas, muy tenues y difuminadas, que se deslizan de
   lado a lado despacio -- ambiental puro, no depende de nada de
   la imagen.
========================================================= */
.pac-niebla {
    position: absolute;
    width: 140%;
    height: 320px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    filter: blur(8px);
    animation: pac-efecto-derivar 22s ease-in-out infinite;
}
@keyframes pac-efecto-derivar {
    0%, 100% { transform: translateX(-15%); }
    50%      { transform: translateX(5%); }
}

/* =========================================================
   6) COPOS CAYENDO
   Puntos pequeños con vaivén lateral -- nieve, pétalos, ceniza,
   hojas... según la imagen que pongas, sin representar ninguno de
   forma literal. Mismo fix: flotar local (hacia abajo en vez de
   hacia arriba), repartidos en toda la altura real por JS.
========================================================= */
.pac-copo {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    animation-name: pac-efecto-caer-local;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes pac-efecto-caer-local {
    0%, 100% { transform: translate(0, 0); opacity: .4; }
    50%      { transform: translate(var(--deriva, 15px), 45px); opacity: .8; }
}

/* =========================================================
   7) RAYOS DE LUZ
   Una franja diagonal de brillo que recorre todo el ancho cada
   tantos segundos -- el mismo efecto "shine" que se ve en botones
   premium, aplicado despacio y sutil sobre toda el área.
========================================================= */
.pac-rayo {
    position: absolute;
    top: -20%;
    left: -60%;
    width: 40%;
    height: 140%;
    background: linear-gradient(75deg, transparent, rgba(255,255,255,.25), transparent);
    animation: pac-efecto-barrer 9s ease-in-out infinite;
}
@keyframes pac-efecto-barrer {
    0%, 70%, 100% { transform: translateX(0); }
    85%           { transform: translateX(260%); }
}

/* =========================================================
   8) AURORA (degradado con vida)
   Un lavado de color muy suave que cambia de posición e
   intensidad despacio -- da sensación de luz ambiental viva sin
   ningún elemento que se pueda leer como "objeto" en pantalla.
========================================================= */
.pac-aurora {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 30% 20%, rgba(120,200,255,.25), transparent 55%),
                radial-gradient(circle at 75% 60%, rgba(180,255,210,.2), transparent 55%);
    animation: pac-efecto-aurora 16s ease-in-out infinite;
    mix-blend-mode: soft-light;
}
@keyframes pac-efecto-aurora {
    0%, 100% { transform: translate(0,0) scale(1); opacity: .8; }
    50%      { transform: translate(4%,-3%) scale(1.08); opacity: 1; }
}

/* =========================================================
   9) LÍNEAS DE ENERGÍA
   Trazos delgados que aparecen y se desvanecen en diagonal, como
   pulsos recorriendo un circuito -- da un aire más tecnológico,
   útil si el fondo elegido tiene ese estilo.
========================================================= */
.pac-linea-energia {
    position: absolute;
    height: 2px;
    width: 90px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
    animation-name: pac-efecto-pulso-linea;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes pac-efecto-pulso-linea {
    0%, 100% { opacity: 0; transform: scaleX(.3); }
    50%      { opacity: 1; transform: scaleX(1); }
}

/* =========================================================
   10) DESTELLOS EN EL CAMINO
   Como "Destellos", pero en vez de posiciones al azar en toda la
   pantalla, aparecen a lo largo de la MISMA curva del camino --
   usa la API de SVG para tomar puntos reales sobre esa curva, así
   que sigue el camino tenga la forma que tenga (nunca una posición
   fija en la imagen).
========================================================= */
.pac-destello-camino {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 7px 2px rgba(255,255,255,.85);
    animation-name: pac-efecto-titilar;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    z-index: 2;
}

/* =========================================================
   11) MANCHAS ORGÁNICAS
   2-3 formas suaves de color, con bordes redondeados irregulares
   que van cambiando de forma despacio (border-radius animado) y
   flotando muy lento -- el tipo de fondo "blob" que se ve en sitios
   modernos de tecnología, sin representar ningún objeto concreto.
========================================================= */
.pac-mancha {
    position: absolute;
    width: 220px;
    height: 220px;
    filter: blur(30px);
    opacity: .35;
    animation-name: pac-efecto-flotar-mancha, pac-efecto-morfear;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    mix-blend-mode: soft-light;
}
@keyframes pac-efecto-flotar-mancha {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(6%, -8%) scale(1.15); }
}
@keyframes pac-efecto-morfear {
    0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
    50%      { border-radius: 60% 40% 30% 70% / 55% 65% 35% 45%; }
}

/* =========================================================
   12) GEOMETRÍA FLOTANTE
   Figuras simples (triángulo, cuadrado, círculo) a la deriva,
   girando muy despacio -- estética de ilustración moderna, sin
   representar nada del fondo.
========================================================= */
.pac-figura {
    position: absolute;
    opacity: .5;
    animation-name: pac-efecto-derivar-figura;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.pac-figura--circulo  { border-radius: 50%; border: 2px solid rgba(255,255,255,.8); }
.pac-figura--cuadrado { border: 2px solid rgba(255,255,255,.8); }
.pac-figura--triangulo {
    width: 0; height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 24px solid rgba(255,255,255,.75);
}
@keyframes pac-efecto-derivar-figura {
    0%   { transform: translate(0,0) rotate(0deg); }
    50%  { transform: translate(var(--deriva, 20px), -18px) rotate(180deg); }
    100% { transform: translate(0,0) rotate(360deg); }
}

/* =========================================================
   13) BOKEH
   Círculos grandes, muy difuminados y translúcidos, pulsando
   despacio -- el efecto de "luces desenfocadas" típico de fotos
   nocturnas, da un aire elegante sin ningún elemento reconocible.
========================================================= */
.pac-bokeh {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
    filter: blur(2px);
    animation-name: pac-efecto-pulso-bokeh;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes pac-efecto-pulso-bokeh {
    0%, 100% { opacity: .25; transform: scale(.85); }
    50%      { opacity: .6;  transform: scale(1.1); }
}

/* =========================================================
   14) ÍCONOS DE ESTUDIO FLOTANTES
   Íconos de Font Awesome (ya cargado en todo el sitio) con temática
   de estudio/capacitación -- birrete, libro, lápiz, bombilla,
   diploma, maletín -- flotando suave, como las partículas. No son
   parte del dibujo de fondo, así que funcionan igual sin importar
   qué imagen elijas.
========================================================= */
.pac-icono-flotante {
    position: absolute;
    color: rgba(255,255,255,.8);
    text-shadow: 0 0 4px rgba(0,0,0,.35);
    animation-name: pac-efecto-flotar-icono;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes pac-efecto-flotar-icono {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .55; }
    50%      { transform: translate(var(--deriva, 15px), -30px) rotate(8deg); opacity: .9; }
}

/* =========================================================
   15) ÍCONO/LOGO PERSONALIZADO FLOTANTE
   Igual que el anterior, pero con una imagen que el super
   administrador sube (ver admin/fondos_camino.php) en vez de un
   ícono de catálogo -- para un logo propio, un ícono de la empresa,
   lo que sea. Difuminado y semitransparente para que se vea como
   ambiente, no como un elemento que compite con el camino.
========================================================= */
.pac-icono-personalizado {
    position: absolute;
    opacity: .55;
    filter: blur(.5px) drop-shadow(0 0 3px rgba(0,0,0,.3));
    animation-name: pac-efecto-flotar-icono;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}