/*==================================================
RECUPERAR CONTRASEÑA - ContactosW
Tema: negro + rojo (BestFans style)
==================================================*/

html,
body{
    margin:0;
    padding:0;

    font-family:'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    min-height:100vh;

    /* FONDO DE IMAGEN */
    background-image: url('../img/fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    background-color: #000000;

    box-sizing:border-box;
}

/* Capa oscura para que resalte la tarjeta y el texto sea legible */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 70% de oscuridad */
    z-index: -1;
}

/*==================================================
WRAPPER
==================================================*/

.recuperar-wrapper{
    min-height:100vh;

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

    padding:30px 16px;

    box-sizing:border-box;

    background: transparent;
}

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

.recuperar-card{
    width:100%;
    max-width:420px;

    /* Tarjeta semitransparente con desenfoque */
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border:2px solid #dc2626;

    border-radius:20px;

    padding:40px 32px;

    box-shadow:
        0 0 0 1px rgba(220,38,38,.2),
        0 0 40px rgba(220,38,38,.25),
        0 20px 60px rgba(0,0,0,.8);

    animation:fadeInLogin .5s ease;

    box-sizing:border-box;

    position:relative;
}

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

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

.recuperar-logo{
    text-align:center;
    margin-bottom:22px;
}

.recuperar-logo img{
    height:64px;
    width:auto;
    object-fit:contain;
    display:inline-block;
}

/*==================================================
TÍTULOS
==================================================*/

.recuperar-titulo{
    text-align:center;
    font-size:26px;
    font-weight:800;
    color:#ffffff;
    margin:0 0 6px;
    letter-spacing:-.4px;
}

.recuperar-subtitulo{
    text-align:center;
    font-size:14px;
    color:#a1a1aa;
    font-weight:500;
    margin:0 0 30px;
}

/*==================================================
CAMPOS
==================================================*/

.recuperar-field{
    margin-bottom:18px;
}

.recuperar-label{
    display:block;
    font-size:13.5px;
    font-weight:600;
    color:#e4e4e7;
    margin-bottom:8px;
    letter-spacing:.1px;
}

.recuperar-input{
    width:100%;
    padding:13px 16px;
    background:#1a1a1a;
    border:1px solid #2a2a2a;
    border-radius:12px;
    font-size:15px;
    color:#ffffff;
    font-family:inherit;
    outline:none;
    transition:.2s;
    box-sizing:border-box;
}

.recuperar-input::placeholder{
    color:#71717a;
}

.recuperar-input:hover{
    background:#1f1f1f;
    border-color:#3a3a3a;
}

.recuperar-input:focus{
    background:#1a1a1a;
    border-color:#dc2626;
    box-shadow:0 0 0 4px rgba(220,38,38,.15);
}

/*==================================================
BOTÓN
==================================================*/

.recuperar-btn{
    width:100%;
    padding:14px 20px;
    background:#dc2626;
    color:#ffffff;
    border:none;
    border-radius:12px;
    font-size:15.5px;
    font-weight:700;
    letter-spacing:.2px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(220,38,38,.35);
    transition:.25s;
    font-family:inherit;
    margin-top:10px;
}

.recuperar-btn:hover:not(:disabled){
    background:#ef4444;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(220,38,38,.5);
}

.recuperar-btn:active:not(:disabled){
    transform:translateY(0);
    box-shadow:0 6px 16px rgba(220,38,38,.35);
}

.recuperar-btn:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
}

/*==================================================
ENLACES (Volver al login)
==================================================*/

.recuperar-login{
    text-align:center;
    font-size:14px;
    color:#a1a1aa;
    margin-top:24px;
}

.recuperar-login a{
    color:#dc2626;
    font-weight:700;
    text-decoration:none;
    transition:.15s;
}

.recuperar-login a:hover{
    color:#ef4444;
    text-decoration:underline;
}

/*==================================================
MÓVIL: FULL-SCREEN
==================================================*/

@media(max-width:600px){

    .recuperar-wrapper{
        padding:0;
        min-height:100vh;
        align-items:stretch;
    }

    .recuperar-card{
        max-width:100%;
        border-radius:0;
        border:none;
        min-height:100vh;
        padding:50px 26px 40px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        box-shadow:none;
        background: rgba(10, 10, 10, 0.9);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation:none;
    }

    .recuperar-logo img{ height:58px; }
    .recuperar-titulo{ font-size:24px; }
    .recuperar-subtitulo{ font-size:13.5px; margin-bottom:26px; }
    .recuperar-input{ font-size:16px; padding:14px 16px; }
    .recuperar-btn{ font-size:16px; padding:15px 20px; }

}

/*==================================================
SWAL PERSONALIZADO (Para mensajes de éxito/error)
==================================================*/

.swal-error-popup{
    background:#0a0a0a !important;
    border:2px solid #dc2626 !important;
    border-radius:20px !important;
    box-shadow:
        0 0 0 1px rgba(220,38,38,.2),
        0 0 40px rgba(220,38,38,.3),
        0 20px 60px rgba(0,0,0,.8) !important;
}

.swal-error-popup .swal2-title{
    color:#ffffff !important;
    font-weight:800 !important;
    font-size:22px !important;
}

.swal-error-popup .swal2-html-container,
.swal-error-popup .swal2-content{
    color:#a1a1aa !important;
    font-size:14.5px !important;
    line-height:1.55 !important;
}

.swal-error-btn{
    background:#dc2626 !important;
    border-radius:12px !important;
    font-weight:700 !important;
    padding:12px 28px !important;
    transition:all .2s ease !important;
    color:#ffffff !important;
}

.swal-error-btn:hover{
    background:#ef4444 !important;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(220,38,38,.5) !important;
}

/*==================================================
MÓVIL: QUITAR IMAGEN DE FONDO
==================================================*/
@media (max-width: 600px) {
    html, body {
        background-image: none !important;
        background-color: #0a0a0a !important;
    }
    
    body::before {
        display: none;
    }
    
    .recuperar-card {
        background: #0a0a0a !important;
    }
}