/*=========================
      VARIABLES
==========================*/
:root{
    --primary:#6366F1;
    --secondary:#8B5CF6;
    --success:#10B981;
    --white:#ffffff;
    --text:#1f2937;
    --text2:#6B7280;
    --glass:rgba(255,255,255,.15);
    --border:rgba(255,255,255,.25);
}

/*=========================
      GENERAL
==========================*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    overflow:hidden;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* SEPARAR LAS PROPIEDADES EVITA CONFLICTOS CON LA ANIMACIÓN */
    background: url("../../images/SVISION.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    
    /* Tu animación de movimiento */
    animation: bgMove 12s ease infinite;
}

/*=========================
      FONDO ANIMADO
==========================*/

body::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:#fff;
    opacity:.10;
    border-radius:50%;
    top:-120px;
    left:-100px;
    filter:blur(20px);
    animation:float1 8s ease-in-out infinite;
}

body::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:#ffffff;
    opacity:.08;
    border-radius:50%;
    bottom:-180px;
    right:-150px;
    filter:blur(30px);
    animation:float2 10s ease-in-out infinite;
}

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

@keyframes float1{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(40px);}
}

@keyframes float2{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-40px);}
}

/*=========================
      LOGIN
==========================*/

form {
    position: relative;
    z-index: 10;
    width: 420px;
    padding: 45px;
    border-radius: 25px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Blur mínimo para que no empañe la imagen SVISION.png */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); 

    /* Transparencia extrema (sólo un 3% de blanco) */
    background: rgba(255, 255, 255, 0.03);

    /* Borde ultra sutil para delimitar el contenedor sin ensuciar */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Sombra muy suave para dar profundidad */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    animation: login .8s ease;
}
@keyframes login{

    from{
        opacity:0;
        transform:translateY(50px) scale(.9);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

/*=========================
      TITULO
==========================*/

form::before{
    content:"Sistema de Gestión de Proyectos";
    display:block;
    font-size:34px;
    font-weight:700;
    text-align:center;
    /* Cambiado a blanco para integrarse con la transparencia */
    color: rgb(8, 8, 78); 
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Sombra para legibilidad */
    margin-bottom: 25px; /* Un poco más de espacio */
}


/*=========================
      INPUTS
==========================*/

.form-floating{

position:relative;

margin-bottom:22px;

}

.form-control {
    width: 100%;
    height: 60px;
    padding: 22px 18px 5px;
    
    /* Inputs casi invisibles para heredar el fondo */
    background: rgba(255, 255, 255, 0.02);
    border: 5px solid rgba(7, 7, 7, 0.1);
    border-radius: 15px;
    font-size: 15px;
    /* Cambiado a blanco para contraste */
    color: black; 
    transition: .45s;
}

.form-control::placeholder{

color:transparent;

}

.form-control:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.01);
}

.form-floating label{
    position:absolute;
    top:18px;
    left:18px;
    /* Gris claro para legibilidad sobre el fondo */
    color: rgba(6, 38, 124, 0.7); 
    pointer-events:none;
    transition:.3s;
}

.form-control:focus~label,
.form-control:not(:placeholder-shown)~label{
    transform:translateY(-15px);
    font-size:12px;
    /* Blanco cuando sube */
    color: black; 
}

/*=========================
      BOTON
==========================*/

.btn-primary{

width:100%;

height:58px;

border:none;

border-radius:15px;

cursor:pointer;

font-size:17px;

font-weight:600;

color:white;

background:linear-gradient(135deg,#6366F1,#8B5CF6);

position:relative;

overflow:hidden;

transition:.35s;

box-shadow:

0 10px 30px rgba(0,0,0,.25);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 18px 40px rgba(0,0,0,.35);

}

.btn-primary:before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transition:.8s;

}

.btn-primary:hover:before{

left:100%;

}

/*=========================
      LINKS
==========================*/

.links{

display:flex;

justify-content:space-between;

font-size:13px;

margin-top:-10px;

}

.links a{

color:white;

text-decoration:none;

transition:.3s;

}

.links a:hover{

color:#FFD54F;

}

/*=========================
      RESPONSIVE
==========================*/

@media(max-width:500px){

form{

width:95%;

padding:35px;

}

}