/* ===============================================
   THINSCEN - WELLNESS ANIMATED BORDER
   Archivo: wellness-animated-border.css
   Propósito: Clase para animar bordes con paleta wellness
   ===============================================
   
   USO:
   Agrega la clase "wellness-glow-border" a cualquier botón
   Ejemplo: <button class="btn btn-primary wellness-glow-border">Click</button>
   =============================================== */

/* ═══════════════════════════════════════════════════════════════
   WELLNESS ANIMATED BORDER CLASS
   ═══════════════════════════════════════════════════════════════ */
/* ===============================================
   THINSCEN - WELLNESS ANIMATED BORDER
   Archivo: wellness-animated-border.css
   Propósito: Clase para animar bordes con paleta wellness
   ===============================================
   
   USO:
   1. IMPORTANTE: Incluye primero thinscen-central-palette.css
   2. Agrega la clase "wellness-glow-border" a cualquier botón
   
   EJEMPLO:
   <link rel="stylesheet" href="thinscen-central-palette.css">
   <link rel="stylesheet" href="wellness-animated-border.css">
   
   <button class="btn btn-primary wellness-glow-border">Click</button>
   
   NOTA: Este archivo usa las variables CSS (--lavender-light, 
   --primary-dark, etc.) definidas en thinscen-central-palette.css
   =============================================== */

/* ═══════════════════════════════════════════════════════════════
   VARIABLES WELLNESS RGBA PARA GLOWS
   ═══════════════════════════════════════════════════════════════ */

   :root {
    /* Wellness colors en formato rgba para efectos de glow */
    --wellness-lavender-light-glow: rgba(231, 228, 253, 0.5);
    --wellness-lavender-medium-glow: rgba(165, 162, 237, 0.6);
    --wellness-primary-light-glow: rgba(131, 126, 219, 0.7);
    --wellness-accent-hover-glow: rgba(122, 107, 224, 0.8);
    --wellness-primary-dark-glow: rgba(5, 3, 66, 0.9);
    --wellness-theme-text-glow: rgba(67, 64, 161, 0.8);
    --wellness-accent-purple-glow: rgba(98, 81, 211, 0.7);
  }
  
  /* ═══════════════════════════════════════════════════════════════
     WELLNESS ANIMATED BORDER CLASS
     ═══════════════════════════════════════════════════════════════ */
  
  .wellness-glow-border {
    position: relative;
    border: 1px solid !important;
    border-color: var(--lavender-light, #e7e4fd);
    animation: wellnessGlowAnimation 2s ease-in-out infinite;
    transition: all 0.3s ease;
  }
  
  /* Shadow claro para dark mode - manejado por animación específica */
  
  /* Animación de colores de la paleta wellness
     Del más claro al más oscuro (1s) y vuelta (1s) 
     Usando variables CSS del theme */
  @keyframes wellnessGlowAnimation {
    /* Inicio: Color más claro */
    0% {
      border-color: var(--lavender-light);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-lavender-light-glow);
    }
    
    /* 14% del ciclo completo */
    14% {
      border-color: var(--lavender-medium);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-lavender-medium-glow);
    }
    
    /* 28% del ciclo completo */
    28% {
      border-color: var(--primary-light);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-primary-light-glow);
    }
    
    /* 42% del ciclo completo */
    42% {
      border-color: var(--accent-hover);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-accent-hover-glow);
    }
    
    /* 50%: Color más oscuro (mitad de la animación) */
    50% {
      border-color: var(--primary-dark);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-primary-dark-glow);
    }
    
    /* 58% - Regreso */
    58% {
      border-color: var(--theme-text-primary);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-theme-text-glow);
    }
    
    /* 72% - Regreso */
    72% {
      border-color: var(--accent-purple);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-accent-purple-glow);
    }
    
    /* 86% - Regreso */
    86% {
      border-color: var(--primary-light);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-primary-light-glow);
    }
    
    /* 100%: Vuelve al color más claro */
    100% {
      border-color: var(--lavender-light);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-lavender-light-glow);
    }
  }
  
  
  /* ═══════════════════════════════════════════════════════════════
     VARIANTE: BORDE DE 1PX (MÁS SUTIL)
     ═══════════════════════════════════════════════════════════════ */
  
  .wellness-glow-border-subtle {
    position: relative;
    border: 1px solid;
    border-color: var(--lavender-light, #e7e4fd);
    animation: wellnessGlowAnimation 2s ease-in-out infinite;
    transition: all 0.3s ease;
  }
  
  /* Shadow claro para dark mode - manejado por animación específica */
  
  
  /* ═══════════════════════════════════════════════════════════════
     VARIANTE: SIN BOX-SHADOW (SOLO COLOR DE BORDE)
     ═══════════════════════════════════════════════════════════════ */
  
  .wellness-border-only {
    position: relative;
    border: 1px solid !important;
    border-color: var(--lavender-light, #e7e4fd);
    animation: wellnessBorderOnlyAnimation 2s ease-in-out infinite;
    transition: all 0.3s ease;
  }
  
  /* Shadow claro para dark mode - manejado por animación específica */
  
  /* Versión solo borde (sin glow animado, solo shadow fijo)
     Usando variables CSS del theme */
  @keyframes wellnessBorderOnlyAnimation {
    0% { 
      border-color: var(--lavender-light);
      box-shadow: var(--theme-shadow-sm);
    }
    14% { 
      border-color: var(--lavender-medium);
      box-shadow: var(--theme-shadow-sm);
    }
    28% { 
      border-color: var(--primary-light);
      box-shadow: var(--theme-shadow-sm);
    }
    42% { 
      border-color: var(--accent-hover);
      box-shadow: var(--theme-shadow-sm);
    }
    50% { 
      border-color: var(--primary-dark);
      box-shadow: var(--theme-shadow-sm);
    }
    58% { 
      border-color: var(--theme-text-primary);
      box-shadow: var(--theme-shadow-sm);
    }
    72% { 
      border-color: var(--accent-purple);
      box-shadow: var(--theme-shadow-sm);
    }
    86% { 
      border-color: var(--primary-light);
      box-shadow: var(--theme-shadow-sm);
    }
    100% { 
      border-color: var(--lavender-light);
      box-shadow: var(--theme-shadow-sm);
    }
  }
  
  /* Versión dark para border-only 
     Usando variables CSS del theme */
  @keyframes wellnessBorderOnlyAnimationDark {
    0% { 
      border-color: var(--lavender-light);
      box-shadow: var(--theme-shadow-sm);
    }
    14% { 
      border-color: var(--lavender-medium);
      box-shadow: var(--theme-shadow-sm);
    }
    28% { 
      border-color: var(--primary-light);
      box-shadow: var(--theme-shadow-sm);
    }
    42% { 
      border-color: var(--accent-hover);
      box-shadow: var(--theme-shadow-sm);
    }
    50% { 
      border-color: var(--primary-dark);
      box-shadow: var(--theme-shadow-sm);
    }
    58% { 
      border-color: var(--theme-text-primary);
      box-shadow: var(--theme-shadow-sm);
    }
    72% { 
      border-color: var(--accent-purple);
      box-shadow: var(--theme-shadow-sm);
    }
    86% { 
      border-color: var(--primary-light);
      box-shadow: var(--theme-shadow-sm);
    }
    100% { 
      border-color: var(--lavender-light);
      box-shadow: var(--theme-shadow-sm);
    }
  }
  
  
  /* ═══════════════════════════════════════════════════════════════
     VARIANTE: VELOCIDAD RÁPIDA (1.5s TOTAL)
     ═══════════════════════════════════════════════════════════════ */
  
  .wellness-glow-border-fast {
    position: relative;
    border: 1px solid !important;
    border-color: var(--lavender-light, #e7e4fd);
    animation: wellnessGlowAnimation 1.5s ease-in-out infinite;
    transition: all 0.3s ease;
  }
  
  /* Shadow claro para dark mode - manejado por animación específica */
  
  
  /* ═══════════════════════════════════════════════════════════════
     VARIANTE: VELOCIDAD LENTA (3s TOTAL)
     ═══════════════════════════════════════════════════════════════ */
  
  .wellness-glow-border-slow {
    position: relative;
    border: 1px solid !important;
    border-color: var(--lavender-light, #e7e4fd);
    animation: wellnessGlowAnimation 3s ease-in-out infinite;
    transition: all 0.3s ease;
  }
  
  /* Shadow claro para dark mode - manejado por animación específica */
  
  
  /* ═══════════════════════════════════════════════════════════════
     COMPATIBILIDAD CON DARK MODE
     ═══════════════════════════════════════════════════════════════ */
  
  /* ═══════════════════════════════════════════════════════════════
     COMPATIBILIDAD CON DARK MODE
     ═══════════════════════════════════════════════════════════════ */
  
  /* Animación específica para dark mode (shadow fijo claro) 
     Usando variables CSS del theme */
  @keyframes wellnessGlowAnimationDark {
    0% {
      border-color: var(--lavender-light);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-lavender-light-glow);
    }
    14% {
      border-color: var(--lavender-medium);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-lavender-medium-glow);
    }
    28% {
      border-color: var(--primary-light);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-primary-light-glow);
    }
    42% {
      border-color: var(--accent-hover);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-accent-hover-glow);
    }
    50% {
      border-color: var(--primary-dark);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-primary-dark-glow);
    }
    58% {
      border-color: var(--theme-text-primary);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-theme-text-glow);
    }
    72% {
      border-color: var(--accent-purple);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-accent-purple-glow);
    }
    86% {
      border-color: var(--primary-light);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-primary-light-glow);
    }
    100% {
      border-color: var(--lavender-light);
      box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-lavender-light-glow);
    }
  }
  
  /* Aplicar animación dark a todas las variantes */
  [data-theme="dark"] .wellness-glow-border,
  [data-theme="dark"] .wellness-glow-border-subtle,
  [data-theme="dark"] .wellness-glow-border-fast,
  [data-theme="dark"] .wellness-glow-border-slow {
    animation-name: wellnessGlowAnimationDark;
  }
  
  [data-theme="dark"] .wellness-border-only {
    animation-name: wellnessBorderOnlyAnimationDark;
  }
  
  [data-theme="dark"] .wellness-glow-border,
  [data-theme="dark"] .wellness-glow-border-subtle,
  [data-theme="dark"] .wellness-border-only {
    /* En dark mode, los colores se ven aún mejor */
    animation-play-state: running;
  }
  
  
  /* ═══════════════════════════════════════════════════════════════
     COMPATIBILIDAD CON BOTONES BOOTSTRAP Y THEME
     ═══════════════════════════════════════════════════════════════ */
  
  /* Asegura que funcione con cualquier botón del sistema */
  .btn.wellness-glow-border,
  .btn.wellness-glow-border-subtle,
  .btn.wellness-border-only,
  .theme-btn.wellness-glow-border,
  .theme-btn.wellness-glow-border-subtle,
  .theme-btn.wellness-border-only {
    position: relative;
    overflow: visible; /* Permite que el glow se vea */
  }
  
  /* Mantiene la funcionalidad hover del botón */
  .btn.wellness-glow-border:hover,
  .btn.wellness-glow-border-subtle:hover,
  .theme-btn.wellness-glow-border:hover {
    transform: translateY(-2px);
  }
  
  
  /* ═══════════════════════════════════════════════════════════════
     OPCIÓN: PAUSAR ANIMACIÓN EN HOVER
     ═══════════════════════════════════════════════════════════════ */
  
  .wellness-glow-border.pause-on-hover:hover,
  .wellness-glow-border-subtle.pause-on-hover:hover,
  .wellness-border-only.pause-on-hover:hover {
    animation-play-state: paused;
  }
  
  
  /* ═══════════════════════════════════════════════════════════════
     RESPONSIVE: AJUSTES PARA MÓVIL
     ═══════════════════════════════════════════════════════════════ */
  
  @media (max-width: 768px) {
    /* En móvil, usa bordes más sutiles para mejor performance */
    .wellness-glow-border {
      border-width: 1px;
    }
    
    /* Reduce el box-shadow en móvil - mantiene shadow fijo + glow reducido */
    @keyframes wellnessGlowAnimation {
      0%, 100% { 
        box-shadow: var(--theme-shadow-sm), 0 0 4px var(--wellness-lavender-light-glow);
      }
      50% { 
        box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-primary-dark-glow);
      }
    }
    
    /* Versión dark para móvil */
    @keyframes wellnessGlowAnimationDark {
      0%, 100% { 
        box-shadow: var(--theme-shadow-sm), 0 0 4px var(--wellness-lavender-light-glow);
      }
      50% { 
        box-shadow: var(--theme-shadow-sm), 0 0 12px var(--wellness-primary-dark-glow);
      }
    }
  }
  
  
  /* ═══════════════════════════════════════════════════════════════
     ACCESIBILIDAD: RESPETA PREFERENCIAS DE ANIMACIÓN
     ═══════════════════════════════════════════════════════════════ */
  
  @media (prefers-reduced-motion: reduce) {
    .wellness-glow-border,
    .wellness-glow-border-subtle,
    .wellness-border-only,
    .wellness-glow-border-fast,
    .wellness-glow-border-slow {
      animation: none;
      border-color: var(--accent-purple, #6251d3);
    }
  }
  
  
  /* ═══════════════════════════════════════════════════════════════
     EJEMPLOS DE USO EN COMENTARIOS
     ═══════════════════════════════════════════════════════════════
  
     EJEMPLO 1 - Botón Bootstrap con glow:
     <button class="btn btn-primary wellness-glow-border">
       Guardar
     </button>
  
     EJEMPLO 2 - Botón theme con borde sutil:
     <button class="theme-btn theme-btn-primary wellness-glow-border-subtle">
       Aceptar
     </button>
  
     EJEMPLO 3 - Botón sin box-shadow, solo borde:
     <button class="btn btn-outline-primary wellness-border-only">
       Cancelar
     </button>
  
     EJEMPLO 4 - Botón con pausa en hover:
     <button class="btn btn-success wellness-glow-border pause-on-hover">
       Confirmar
     </button>
  
     EJEMPLO 5 - Botón con animación rápida:
     <button class="btn btn-info wellness-glow-border-fast">
       Quick Action
     </button>
  
     EJEMPLO 6 - Aplicar a cualquier elemento:
     <div class="card wellness-glow-border">
       Contenido de la tarjeta
     </div>
  
     ═══════════════════════════════════════════════════════════════ */