/* ============================================
   CURSOR PERSONALIZADO - RESPONSIVE COMPATIBLE
   VB.NET WebForms .aspx - CSS Único
   ============================================ */

/* === RESETEO BASE === */
* {
    cursor: none !important;
}

/* === ESTILOS DEL CURSOR PERSONALIZADO === */
.cursor {
    width: 40px;
    height: 40px;
    border: 4px solid #00ffff;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease-in-out;
    z-index: 9999;
    animation: pulse 2s infinite;
    /* Previene selección de texto al mover el cursor */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* === ANIMACIÓN PULSE === */
@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.7;
        border-color: #0e21f8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* ============================================
   MEDIA QUERIES RESPONSIVE - CLAVE PARA MÓVILES
   ============================================ */

/* ✅ DISPOSITIVOS CON MOUSE (Escritorio, Laptop, Tablet con mouse conectado) */
@media (pointer: fine) and (hover: hover) {
    .cursor {
        display: block;
        width: 40px;
        height: 40px;
        border-width: 4px;
    }

    /* Cursor más grande en pantallas grandes */
    @media (min-width: 1200px) {
        .cursor {
            width: 50px;
            height: 50px;
            border-width: 5px;
        }
    }
}

/* ❌ DISPOSITIVOS TÁCTILES (Móviles, Tablets sin mouse) - OCULTAR CURSOR PERSONALIZADO */
@media (pointer: coarse), (hover: none), (max-width: 768px) {
    * {
        cursor: auto !important; /* Restaurar cursor nativo para touch */
    }

    .cursor {
        display: none !important; /* Ocultar elemento personalizado */
    }

    /* Asegurar que los elementos interactivos sean usables con touch */
    a, button, input, select, textarea, [role="button"], .clickable {
        cursor: pointer !important;
        min-height: 44px; /* Área táctil mínima recomendada */
        min-width: 44px;
    }
}

/* ============================================
   AJUSTES ADICIONALES PARA ACCESIBILIDAD
   ============================================ */

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .cursor {
        animation: none !important;
        transition: none !important;
    }
}

/* Alto contraste para mejor visibilidad */
@media (prefers-contrast: high) {
    .cursor {
        border-color: #ffffff !important;
        border-width: 5px !important;
    }
}

/* ============================================
   COMPATIBILIDAD NAVEGADORES MÓVILES
   ============================================ */

/* iOS Safari - Prevenir comportamientos no deseados */
@supports (-webkit-touch-callout: none) {
    @media (pointer: coarse) {
        * {
            cursor: default !important;
        }

        .cursor {
            display: none !important;
        }
    }
}

/* Android Chrome - Ajustes específicos */
@supports (-webkit-appearance: none) and (not (overflow:-webkit-marquee)) {
    @media (max-width: 1024px) and (pointer: coarse) {
        .cursor {
            display: none !important;
        }

        * {
            cursor: auto !important;
        }
    }
}

/* ============================================
   FALLBACK SEGURO: Si JS no carga o hay error
   ============================================ */
.no-js * {
    cursor: auto !important;
}

.no-js .cursor {
    display: none !important;
}