/**
 * Sistema de Cursor Personalizado - Estilos Base
 * Variavista Business Theme
 * 
 * @package Variavista
 * @version 2.7.2
 */

/* ========================================
   CURSOR BASE - ESTRUCTURA
   ======================================== */

/* Cursor exterior (círculo grande) */
#custom-cursor {
    position: fixed;
    width: var(--cursor-size, 60px);
    height: var(--cursor-size, 60px);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, opacity 0.3s ease;
    mix-blend-mode: screen;
    opacity: var(--cursor-opacity, 0.9);
    border-radius: 50%;
    
    /* Colores corporativos con gradiente suave */
    background: radial-gradient(
        circle at center,
        var(--cursor-primary-color, #C8102E) 0%,
        transparent 70%
    );
    
    /* Sin bordes feos */
    border: none;
    
    /* Blur suave para apariencia profesional */
    filter: blur(1px);
}

/* Cursor interior (punto central) */
#custom-cursor-dot {
    position: fixed;
    width: calc(var(--cursor-size, 60px) * 0.2);
    height: calc(var(--cursor-size, 60px) * 0.2);
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 1 !important; /* Siempre visible */
    transition: width 0.2s ease, height 0.2s ease;
    
    /* Punto sólido con color corporativo */
    background: var(--cursor-primary-color, #C8102E);
    
    /* Sin bordes */
    border: none;
    
    /* Sombra suave para mejor visibilidad */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* ========================================
   ESTADOS DEL CURSOR
   ======================================== */

/* Estado hover (sobre elementos interactivos) */
body.cursor-hover #custom-cursor {
    width: calc(var(--cursor-size, 60px) * var(--cursor-design-hover-scale, 1.5));
    height: calc(var(--cursor-size, 60px) * var(--cursor-design-hover-scale, 1.5));
    opacity: calc(var(--cursor-design-hover-glow, 50) / 100);
    filter: blur(1px) drop-shadow(0 0 calc(8px * (var(--cursor-design-hover-glow, 50) / 50)) var(--cursor-primary-color, #C8102E));
}

body.cursor-hover #custom-cursor-dot {
    width: calc(var(--cursor-size, 60px) * 0.3 * var(--cursor-design-hover-scale, 1.5));
    height: calc(var(--cursor-size, 60px) * 0.3 * var(--cursor-design-hover-scale, 1.5));
    opacity: calc(var(--cursor-design-hover-glow, 50) / 100);
    box-shadow: 0 0 calc(10px * (var(--cursor-design-hover-glow, 50) / 50)) var(--cursor-primary-color, #C8102E);
}

/* Estado activo (click) */
body.cursor-active #custom-cursor {
    width: calc(var(--cursor-size, 60px) * 0.8);
    height: calc(var(--cursor-size, 60px) * 0.8);
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

/* Ocultar cursor personalizado en móviles/tablets */
@media (max-width: 1024px), (hover: none) {
    #custom-cursor,
    #custom-cursor-dot {
        display: none !important;
    }
}

/* ========================================
   UTILIDADES
   ======================================== */

/* Clase para deshabilitar cursor personalizado */
body.no-custom-cursor #custom-cursor,
body.no-custom-cursor #custom-cursor-dot {
    display: none !important;
}

/* Prevenir selección de texto durante arrastre */
body.cursor-active {
    user-select: none;
}