*{
    box-sizing: border-box;
}

:root{
    --primary:#4F46E5;
    --primary-dark:#4338CA;
    --bg:#0F172A;
    --card:#111827;
    --text:#E5E7EB;
    --muted:#9CA3AF;
    --error:#EF4444;
}

body{
    margin:0;
    font-family:'Inter', sans-serif;
    background:var(--bg);
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    overflow:hidden;
}

/* 🔥 FONDO PRO */
.bg{
    position:absolute;
    width:100%;
    height:100%;
    background: radial-gradient(circle at 20% 30%, #4F46E5 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, #7C3AED 0%, transparent 40%);
    filter:blur(80px);
    opacity:0.4;
}

/* CARD */
.card{
    position:relative;
    background:rgba(17,24,39,0.7);
    padding:35px 30px;
    width:90%;
    max-width:380px;
    border-radius:20px;
    backdrop-filter: blur(20px);
    box-shadow:0 20px 60px rgba(0,0,0,0.6);
    border:1px solid rgba(255,255,255,0.05);
    animation:fadeIn .5s ease;
    z-index:1;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
}

/* LOGO */
.logo{
    display:flex;
    justify-content:center;
    margin-bottom:10px;
}

.logo img{
    width:140px;
}

/* TITULOS */
.card h2{
    text-align:center;
    color:white;
    margin-bottom:5px;
}

.subtitle{
    text-align:center;
    color:var(--muted);
    font-size:13px;
    margin-bottom:25px;
}

/* INPUTS */
.input-group{
    margin-bottom:18px;
    position:relative;
}

.input-group input{
    width:100%;
    padding:12px 50px 12px 42px; /* 🔥 más espacio para el ojito */
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.05);
    background:rgba(255,255,255,0.04);
    color:white;
    font-size:14px;
    outline:none;
    transition:all 0.2s;
}

.input-group input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,0.25);
}

/* ICONOS */
.icon{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    fill:var(--muted);
}

.icon.left{ 
    left:12px; 
}

/* 🔥 OJITO MEJORADO */
.icon.right{
    right:10px;
    width:26px;
    height:26px;
    cursor:pointer;
    padding:6px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s ease;
}

/* hover pro */
.icon.right:hover{
    background:rgba(79,70,229,0.2);
    transform:translateY(-50%) scale(1.1);
    fill:#A78BFA;
}

/* click feedback */
.icon.right:active{
    transform:translateY(-50%) scale(0.95);
}

/* ERROR */
.input-group.error input{
    border-color:var(--error);
}

.error-text{
    color:var(--error);
    font-size:12px;
    margin-top:5px;
    display:none;
}

.input-group.error .error-text{
    display:block;
}

/* OPTIONS */
.options{
    display:flex;
    justify-content:space-between;
    margin-bottom:18px;
    font-size:13px;
    color:var(--muted);
}

.options.center{
    justify-content:center;
}

.remember{
    display:flex;
    align-items:center;
    gap:6px;
}

.remember input{
    accent-color:var(--primary);
}

.forgot{
    color:var(--muted);
    text-decoration:none;
}

.forgot:hover{
    color:var(--primary);
}

/* BOTON PRO */
button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:10px;
    background:linear-gradient(135deg, #4F46E5, #7C3AED);
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(79,70,229,0.4);
}

button.loading{
    opacity:0.7;
    pointer-events:none;
}

/* SPINNER */
.spinner{
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,0.4);
    border-top:2px solid white;
    border-radius:50%;
    animation:spin .6s linear infinite;
}

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

/* ERROR GLOBAL */
.error{
    text-align:center;
    margin-top:10px;
    font-size:13px;
    color:var(--error);
}

/* SHAKE */
@keyframes shake{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(-4px); }
    50%{ transform:translateX(4px); }
    75%{ transform:translateX(-4px); }
    100%{ transform:translateX(0); }
}

.input-group.shake{
    animation: shake .3s ease;
}