/* ============================================================
   COSMÉTICOS — Keyframes globales (cargado en _base.html)
   Necesario para que las animaciones de bordes de avatar
   funcionen en TODAS las páginas (navbar, planes, perfil…)
============================================================ */

/* Brillo Plum */
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 14px #8562cc; }
  50%      { box-shadow: 0 0 28px #8562cc, 0 0 50px #8562cc44; }
}

/* Brillo Rosa */
@keyframes pulseGlowRosa {
  0%,100% { box-shadow: 0 0 14px #ff69b4; }
  50%      { box-shadow: 0 0 28px #ff69b4, 0 0 50px #ff69b444; }
}

/* Arcoíris */
@keyframes rainbowBorder {
  0%   { border-color: #ff0000; box-shadow: 0 0 12px #ff000088; }
  16%  { border-color: #ff8800; box-shadow: 0 0 12px #ff880088; }
  33%  { border-color: #ffff00; box-shadow: 0 0 12px #ffff0088; }
  50%  { border-color: #00ff00; box-shadow: 0 0 12px #00ff0088; }
  66%  { border-color: #0088ff; box-shadow: 0 0 12px #0088ff88; }
  83%  { border-color: #8800ff; box-shadow: 0 0 12px #8800ff88; }
  100% { border-color: #ff0000; box-shadow: 0 0 12px #ff000088; }
}

/* Llamas */
@keyframes flameBorder {
  0%, 100% { border-color: #ff4500; box-shadow: 0 0 16px #ff4500, 0 0 32px rgba(255,69,0,.45); }
  25%       { border-color: #ff8c00; box-shadow: 0 0 22px #ff8c00, 0 0 44px rgba(255,140,0,.45); }
  50%       { border-color: #ffd700; box-shadow: 0 0 24px #ffd700, 0 0 50px rgba(255,215,0,.35); }
  75%       { border-color: #ff4500; box-shadow: 0 0 18px #ff6a00, 0 0 38px rgba(255,106,0,.45); }
}

/* Galaxia */
@keyframes galaxiaBorder {
  0%   { border-color: #4a90e2; box-shadow: 0 0 14px #4a90e2, 0 0 28px rgba(74,144,226,.3); }
  33%  { border-color: #9b59b6; box-shadow: 0 0 14px #9b59b6, 0 0 28px rgba(155,89,182,.3); }
  66%  { border-color: #00d4aa; box-shadow: 0 0 14px #00d4aa, 0 0 28px rgba(0,212,170,.3); }
  100% { border-color: #4a90e2; box-shadow: 0 0 14px #4a90e2, 0 0 28px rgba(74,144,226,.3); }
}

/* Glitch */
@keyframes glitchBorder {
  0%, 88%, 100% { box-shadow: 0 0 12px #00ffff; border-color: #00ffff; transform: translate(0,0); }
  90%  { transform: translate(-3px, 1px); border-color: #ff00ff; box-shadow: 3px 0 12px #ff00ff, -3px 0 12px #00ffff; }
  92%  { transform: translate(3px, -1px); border-color: #ffff00; box-shadow: 0 0 12px #ffff00; }
  94%  { transform: translate(-2px, 2px); border-color: #00ffff; box-shadow: 0 0 12px #00ffff; }
  96%  { transform: translate(2px, -2px); border-color: #ff00ff; box-shadow: -3px 0 12px #ff00ff; }
  98%  { transform: translate(0,0); border-color: #00ffff; }
}

/* Aurora Boreal */
@keyframes auroraBorder {
  0%   { border-color: #00ff87; box-shadow: 0 0 20px #00ff87, 0 0 40px rgba(0,255,135,.25); }
  25%  { border-color: #60efff; box-shadow: 0 0 20px #60efff, 0 0 40px rgba(96,239,255,.25); }
  50%  { border-color: #0061ff; box-shadow: 0 0 20px #0061ff, 0 0 40px rgba(0,97,255,.25); }
  75%  { border-color: #ff61ef; box-shadow: 0 0 20px #ff61ef, 0 0 40px rgba(255,97,239,.25); }
  100% { border-color: #00ff87; box-shadow: 0 0 20px #00ff87, 0 0 40px rgba(0,255,135,.25); }
}

/* Cristal Helado */
@keyframes hieloBorder {
  0%, 100% { border-color: #a8d8ff; box-shadow: 0 0 10px rgba(168,216,255,.8), 0 0 5px rgba(168,216,255,.4); }
  50%       { border-color: #e8f4ff; box-shadow: 0 0 22px rgba(232,244,255,1), 0 0 44px rgba(168,216,255,.5); }
}

/* Ciberpunk */
@keyframes ciberpunkBorder {
  0%, 100% { border-color: #00ffff; box-shadow: 0 0 14px #00ffff, -4px 0 14px #ff00ff44, 4px 0 14px #00ffff44; }
  50%       { border-color: #ff00ff; box-shadow: 0 0 14px #ff00ff, -4px 0 14px #00ffff44, 4px 0 14px #ff00ff44; }
}