/* ===== GLOBAL ===== */
body{
    margin:0;
    font-family:'Segoe UI';
    overflow:hidden;
    color:white;
}

/* ===== FONDO EPICO ===== */
.bg{
    position:fixed;
    width:100%;
    height:100%;
    background:
        radial-gradient(circle at 20% 30%, #1a0033, #003400 60%),
        radial-gradient(circle at 80% 70%, #34006e, #000300 70%);
    background-size:200% 200%;
    animation:moveBg 12s infinite alternate;
    z-index:-1;
}

@keyframes moveBg{
    0%{background-position:0% 50%,100% 50%;}
    100%{background-position:100% 50%,0% 50%;}
}

/* ===== LUCES ===== */
.bg::before,
.bg::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    filter:blur(100px);
}

.bg::before{
    background:#8000ff55;
    top:-100px;
    left:-100px;
    animation:lightMove 10s infinite alternate;
}

.bg::after{
    background:#ff00ff33;
    bottom:-100px;
    right:-100px;
    animation:lightMove2 12s infinite alternate;
}

@keyframes lightMove{
    to{transform:translate(200px,150px);}
}

@keyframes lightMove2{
    to{transform:translate(-200px,-150px);}
}

/* ===== LOADER ===== */
.loader{
    position:fixed;
    width:100%;
    height:100%;
    background:#020003;
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:10;
}

.spinner{
    width:50px;
    height:50px;
    border:4px solid #8000ff;
    border-top:4px solid transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    to{transform:rotate(360deg);}
}

/* ===== LAYOUT ===== */
.container{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}

/* ===== CARD ===== */
.card{
    width:350px;
    padding:40px;
    border-radius:20px;
    text-align:center;

    background:rgba(10,10,20,0.6);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.05);

    box-shadow:
        0 0 40px rgba(128,0,255,0.3),
        0 0 80px rgba(128,0,255,0.2);
}

/* ===== LOGO ===== */
.logo{
    width:280px;
    margin-bottom:10px;
}

/* ===== INPUT ===== */
input{
    width:100%;
    margin:10px 0;
    padding:12px;
    border-radius:10px;
    border:1px solid #333;
    background:#0f0f1a;
    color:white;
    box-sizing:border-box;
}

.password-field{
    position:relative;
}

.password-field input{
    padding-right:52px;
}

.password-field > .password-toggle{
    position:absolute;
    top:50%;
    right:10px;
    width:36px;
    height:36px;
    margin:0;
    padding:0;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    background:rgba(255,255,255,0.04);
    color:#d8dff8;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%);
    appearance:none;
    -webkit-appearance:none;
    box-sizing:border-box;
    flex:0 0 36px;
}

.password-field > .password-toggle:hover{
    box-shadow:0 0 12px rgba(128,0,255,0.45);
}

.password-toggle-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
}

.password-field > .password-toggle .password-toggle-icon{
    pointer-events:none;
}

.password-toggle-icon svg{
    width:18px;
    height:18px;
}

/* ===== BOTONES ===== */
button:not(.password-toggle){
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    background:linear-gradient(45deg,#8000ff,#ff00ff);
    color:white;
    cursor:pointer;
    margin-top:5px;
    box-sizing:border-box;
}

button:not(.password-toggle):hover{
    box-shadow:0 0 20px #8000ff;
}

.google-btn{
    background:linear-gradient(45deg,#ffffff,#dcffe7);
    color:#10131d;
    font-weight:700;
}

.google-btn:hover{
    box-shadow:0 0 18px rgba(105,255,174,0.42);
}

.ghost{
    background:transparent;
    border:1px solid #8000ff;
}

/* ===== MENSAJES ===== */
.success{color:#00ff88;}
.error{color:#ff3c3c;}

/* 🔥 CONTENEDOR RELATIVO */
.card {
    position: relative;
    z-index: 1;
}



/* ⚡ BORDE LASER */
.card::before {
    content: "";
    position: absolute;
    inset: -4px; /* tamaño del borde */
    border-radius: 22px;

    background: linear-gradient(
        90deg,
        #8000ff,
        #002fff,
        #02d0d0,
        #05ee85,
        #00ff73,
        #00ff73,
        #05ee85,
        #02d0d0,
        #002fff,
        #8000ff  
    );

    background-size: 300% 300%;

    animation: laserMove 4s linear infinite;

    z-index: -1;
}

.card::before {
    filter: blur(10px);
    opacity: 10;
}

/* 🧊 INTERIOR (para que no tape el fondo) */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(10,10,20,0.95);
    z-index: -1;
}

/* 🎯 ANIMACIÓN */
@keyframes laserMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ===== LOADER ===== */
.loader{
    position:fixed;
    width:100%;
    height:100%;
    background: radial-gradient(circle, #020003, #000);
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:999;
}

/* ===== MOUSE LOADER MEJORADO ===== */
.mouse-loader {
    width: 60px;
    height: 90px;
    border: 3px solid #8000ff;
    border-radius: 30px;
    position: relative; /* Mantiene todo adentro */
    box-shadow: 0 0 20px #8000ff;
    animation: spinJump 1.5s ease-in-out infinite;
    /* Evita que las partículas se desplacen fuera de su eje */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ruedita del Mouse (Scroll) */
.mouse-loader::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 12px;
    background: #00ffa6;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
    animation: scroll 1s infinite;
    z-index: 2;
}

/* EFECTO DE PARTÍCULAS (Ancladas al centro del mouse) */
.mouse-loader::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translate(-50%, -50%); /* Las centra exacto */
    pointer-events: none;
    /* Partículas iniciales invisibles */
    box-shadow: 0 0 transparent;
    animation: particlesEmit 0.8s ease-out infinite;
}

/* --- Animaciones --- */

@keyframes spinJump {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(90deg); }
    50% { transform: translateY(0) rotate(180deg); }
    75% { transform: translateY(-15px) rotate(270deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

@keyframes scroll {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 15px); }
}

@keyframes particlesEmit {
    0% {
        opacity: 0;
        box-shadow: 
            0 0 #8000ff, 
            0 0 #00ffa6, 
            0 0 #8000ff, 
            0 0 #00ffa6;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        /* Aquí defines hacia dónde salen disparadas (relativo al centro) */
        box-shadow: 
            35px -35px 2px #8000ff, 
            -35px 35px 2px #00ffa6, 
            35px 35px 2px #8000ff, 
            -35px -35px 2px #00ffa6;
    }
}

.divider{
    width:100%;
    height:2px;
    margin:15px 0;
    background:linear-gradient(90deg,
        transparent,
        #8000ff,
        #ff00ff,
        transparent
    );
    box-shadow:0 0 10px #8000ff;
}

/* =========================
   🔥 LÍNEA LÁSER
========================= */
.laser-line{
    position:relative;
    width:100%;
    height:2px;
    margin:20px 0;
    background:rgba(255,255,255,0.1);
    overflow:hidden;
    border-radius:10px;
}