/* stars-login-glow.css */
:root {
    --glow-color-primary: rgba(59, 130, 246, 0.5); /* Azul */
    --glow-color-secondary: rgba(168, 85, 247, 0.5); /* Púrpura */
    --glow-color-accent: rgba(34, 197, 94, 0.5); /* Verde */
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* Fondo espacial */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: 
        /* Fondo espacial base */
        radial-gradient(ellipse at center, #0a0a2a 0%, #000033 50%, #000000 100%),
        
        /* Estrellas principales con glow */
        radial-gradient(circle at 20% 30%, 
            rgba(255, 255, 255, 1) 0px,
            rgba(255, 255, 255, 0.8) 1px,
            rgba(255, 255, 255, 0.4) 2px,
            rgba(255, 255, 255, 0.2) 4px,
            transparent 6px),
        
        radial-gradient(circle at 50% 70%, 
            var(--glow-color-primary) 0px,
            rgba(59, 130, 246, 0.3) 2px,
            rgba(59, 130, 246, 0.1) 4px,
            transparent 8px),
        
        radial-gradient(circle at 80% 20%, 
            var(--glow-color-secondary) 0px,
            rgba(168, 85, 247, 0.3) 3px,
            rgba(168, 85, 247, 0.1) 6px,
            transparent 12px),
        
        /* Campo de estrellas de fondo */
        radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 25% 45%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 40% 75%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 60% 25%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 75% 55%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 90% 85%, rgba(255, 255, 255, 0.9), transparent);
    
    background-size: 100% 100%, 100% 100%, 100% 100%, 
                     400px 400px, 400px 400px, 400px 400px,
                     400px 400px, 400px 400px, 400px 400px;
    
    animation: 
        glowAnimation 8s ease-in-out infinite alternate,
        starsMove 120s linear infinite;
}

/* Asegurar que el contenido principal sea clickeable */
main, .template, #root, .app-container, [class*="container"] {
    position: relative;
    z-index: 2;
}

/* Todos los elementos interactivos */
button, input, a, select, textarea, [role="button"], 
[tabindex]:not([tabindex="-1"]) {
    position: relative;
    z-index: 3;
}

/* Para elementos específicos de template */
template {
    display: block !important;
    position: relative;
    z-index: 10;
}

@keyframes glowAnimation {
    0% {
        filter: brightness(1) contrast(1);
    }
    100% {
        filter: brightness(1.1) contrast(1.1);
    }
}

@keyframes starsMove {
    0% {
        background-position: 
            0 0, 0 0, 0 0, 
            0 0, 100px 100px, 200px 200px,
            300px 300px, 400px 400px, 500px 500px;
    }
    100% {
        background-position: 
            0 0, 0 0, 0 0,
            400px 400px, 500px 500px, 600px 600px,
            700px 700px, 800px 800px, 900px 900px;
    }
}