/* =========================================
   🌿 RECUPERAR PASSWORD PREMIUM OPTIMIZADO
========================================= */

/* =========================================
   RESET LOCAL
========================================= */

.recuperar-body *,
.recuperar-body *::before,
.recuperar-body *::after{
    box-sizing:border-box;
}

/* =========================================
   BODY
========================================= */

.recuperar-body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

    position:relative;

    overflow-x:hidden;

    font-family:'Averia Libre', cursive;

    isolation:isolate;
}

/* =========================================
   FONDO OPTIMIZADO
========================================= */

.recuperar-body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
        url('../img/Fondo.webp')
        center/cover no-repeat;

    transform:scale(1.05);

    z-index:-2;

    will-change:transform;
}

/* CAPA OSCURA SUAVE */

.recuperar-body::after{

    content:"";

    position:fixed;

    inset:0;

    background:
        rgba(255,255,255,0.45);

    backdrop-filter:blur(4px);

    z-index:-1;
}

/* =========================================
   CARD
========================================= */

.card-recuperar{

    width:100%;
    max-width:500px;

    background:rgba(255,255,255,0.90);

    border-radius:28px;

    padding:40px;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.18);

    backdrop-filter:blur(10px);

    position:relative;

    overflow:hidden;

    animation:fadeCard .5s ease;
}

/* =========================================
   BORDE SUPERIOR
========================================= */

.card-recuperar::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #2563eb
        );
}

/* =========================================
   LOGO
========================================= */

.logo-recuperar{

    width:105px;

    margin-bottom:15px;

    object-fit:contain;

    animation:floatLogo 3s ease-in-out infinite;
}

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

.card-recuperar h3{

    color:#198754;

    font-weight:700;

    font-size:2rem;

    margin-bottom:10px;
}

/* =========================================
   SUBTEXTO
========================================= */

.subtexto-recuperar{

    color:#666;

    font-size:14px;

    line-height:1.5;

    margin-bottom:30px;
}

/* =========================================
   LABEL
========================================= */

.form-label{

    font-weight:700;

    color:#334155;

    margin-bottom:8px;
}

/* =========================================
   INPUT GROUP
========================================= */

.input-group{

    overflow:hidden;

    border-radius:16px;

    border:1px solid #dbe4ea;

    transition:.3s;

    background:white;
}

.input-group:focus-within{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,0.12);
}

/* ICONO */

.input-group-text{

    background:#f8fafc;

    border:none;

    color:#2563eb;

    padding:0 16px;
}

/* INPUT */

.form-control{

    border:none !important;

    box-shadow:none !important;

    padding:14px 16px;

    font-size:15px;

    background:white;
}

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

.btn-recuperar{

    width:100%;

    border:none;

    padding:15px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #2563eb
        );

    color:white;

    font-weight:700;

    font-size:15px;

    transition:.3s;

    position:relative;

    overflow:hidden;
}

/* HOVER */

.btn-recuperar:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(37,99,235,.25);
}

/* CLICK */

.btn-recuperar:active{

    transform:scale(.98);
}

/* =========================================
   MENSAJES
========================================= */

.mensaje-recuperar{

    margin-top:15px;

    padding:12px;

    border-radius:14px;

    text-align:center;

    font-size:14px;

    font-weight:600;
}

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

.volver-login{

    color:#198754;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.volver-login:hover{

    color:#2563eb;
}

/* =========================================
   HR
========================================= */

hr{

    opacity:.15;
}

/* =========================================
   ANIMACIONES SUAVES
========================================= */

@keyframes fadeCard{

    from{
        opacity:0;
        transform:translateY(20px);
    }

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

}

@keyframes floatLogo{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }

}

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

@media(max-width:768px){

    .recuperar-body{

        padding:15px;
    }

    .card-recuperar{

        padding:30px 22px;

        border-radius:24px;
    }

    .logo-recuperar{

        width:85px;
    }

    .card-recuperar h3{

        font-size:1.7rem;
    }

    .subtexto-recuperar{

        font-size:13px;
    }

}

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

@media(max-width:480px){

    .card-recuperar{

        padding:25px 18px;
    }

    .btn-recuperar{

        padding:14px;

        font-size:14px;
    }

    .form-control{

        font-size:14px;
    }

    .card-recuperar h3{

        font-size:1.5rem;
    }

}

/* =========================================
   OPTIMIZACION PERFORMANCE MOVIL
========================================= */

@media(max-width:768px){

    .recuperar-body::after{

        backdrop-filter:blur(2px);
    }

    .card-recuperar{

        backdrop-filter:none;
    }

}