/* ==========================================
   KFITNESS - LOGIN FITNESS PREMIUM
   ========================================== */

.pagina-login-premium {
    background: #080809;
}

/* Fondo deportivo */

.login-premium {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 790px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 75px 20px;
    background: #080809;
}

.login-premium-fondo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("../img/login-premium-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-premium-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient( 90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.72) ), radial-gradient( ellipse at 50% 75%, rgba(210, 0, 25, 0.18), transparent 65% );
}

/* Contenedor */

.login-premium-contenedor {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Tarjeta */

.login-premium-tarjeta {
    box-sizing: border-box;
    width: 100%;
    max-width: 540px;
    padding: 42px 44px;
    background: rgba(14, 14, 17, 0.94);
    border: 1px solid rgba(237, 28, 46, 0.48);
    border-radius: 22px;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.65), 0 0 35px rgba(237, 28, 46, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: loginPremiumEntrada 0.65s ease both;
}

/* Encabezado */

.login-premium-encabezado {
    text-align: center;
    margin-bottom: 30px;
}

.login-premium-logo {
    display: block;
    width: 125px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 20px;
    object-fit: contain;
}

.login-premium-encabezado h1 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 2.1rem;
    font-weight: 800;
}

.login-premium-subtitulo {
    margin: 0;
    color: #b8b8bf;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Formulario */

.login-premium-formulario {
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .login-premium-formulario > label {
        margin: 0 0 10px;
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: 600;
    }

.login-premium-campo {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 23px;
}

    .login-premium-campo input {
        box-sizing: border-box;
        width: 100%;
        height: 56px;
        padding: 0 50px;
        color: #ffffff;
        background: rgba(23, 23, 27, 0.95);
        border: 1px solid #45454d;
        border-radius: 11px;
        font-family: inherit;
        font-size: 0.95rem;
        outline: none;
        transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

        .login-premium-campo input::placeholder {
            color: #85858e;
        }

        .login-premium-campo input:focus {
            background: #1a1a20;
            border-color: #ed1c2e;
            box-shadow: 0 0 0 3px rgba(237, 28, 46, 0.13);
        }

/* Iconos */

.login-premium-icono {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #a3a3ad;
    pointer-events: none;
}

    .login-premium-icono svg,
    .login-premium-ver svg {
        width: 21px;
        height: 21px;
    }

.login-premium-campo:focus-within .login-premium-icono {
    color: #ed1c2e;
}

/* Mostrar contraseña */

.login-premium-ver {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #a3a3ad;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .login-premium-ver:hover {
        color: #ffffff;
    }

    .login-premium-ver:focus-visible {
        outline: 2px solid #ed1c2e;
        outline-offset: 2px;
    }

/* Recordarme y recuperación */

.login-premium-opciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 0 0 27px;
}

.login-premium-recordarme {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #ffffff;
    font-size: 0.87rem;
    cursor: pointer;
}

    .login-premium-recordarme input {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: #ed1c2e;
    }

.login-premium-opciones a {
    color: #ff4052;
    font-size: 0.87rem;
    text-decoration: none;
}

    .login-premium-opciones a:hover {
        text-decoration: underline;
    }

/* Botón principal */

.login-premium-boton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 57px;
    padding: 14px 22px;
    background: linear-gradient(110deg, #bc071b, #ed1c2e);
    border: 1px solid #ed1c2e;
    border-radius: 11px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

    .login-premium-boton:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(237, 28, 46, 0.35);
    }

    .login-premium-boton:disabled {
        cursor: wait;
        opacity: 0.8;
    }

.login-premium-boton-flecha {
    font-size: 1.4rem;
    transition: transform 0.25s ease;
}

.login-premium-boton:hover:not(:disabled)
.login-premium-boton-flecha {
    transform: translateX(5px);
}

/* Animación de carga */

.login-premium-spinner {
    display: none;
    width: 21px;
    height: 21px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: loginPremiumGirar 0.7s linear infinite;
}

.login-premium-boton.cargando
.login-premium-spinner {
    display: block;
}

.login-premium-boton.cargando
.login-premium-boton-flecha {
    display: none;
}

/* Mensajes */

#login-mensaje {
    margin: 13px 0 0;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.5;
}

    #login-mensaje:empty {
        display: none;
    }

/* Registro */

.login-premium-separador {
    height: 1px;
    width: 100%;
    margin: 25px 0 20px;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.22), transparent );
}

.login-premium-registro {
    margin: 0;
    text-align: center;
    color: #b8b8bf;
    font-size: 0.92rem;
}

    .login-premium-registro a {
        color: #ff4052;
        font-weight: 700;
        text-decoration: none;
    }

        .login-premium-registro a:hover {
            text-decoration: underline;
        }

/* Animaciones */

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

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

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

/* Responsive */

@media (max-width: 600px) {
    .login-premium {
        min-height: 700px;
        padding: 45px 15px;
    }

    .login-premium-tarjeta {
        padding: 30px 23px;
        border-radius: 17px;
    }

    .login-premium-encabezado h1 {
        font-size: 1.8rem;
    }

    .login-premium-opciones {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-premium-tarjeta,
    .login-premium-spinner {
        animation: none;
    }

    .login-premium-boton,
    .login-premium-boton-flecha {
        transition: none;
    }
}

/* ==========================================
   KFITNESS - FOOTER FLOTANTE DE CRISTAL
   Exclusivo de la página de login
========================================== */

.pagina-login-premium {
    background: #080809;
}

    /* Continuación del fondo del gimnasio */
    .pagina-login-premium .site-footer {
        position: relative;
        isolation: isolate;
        background: transparent;
        padding: 30px 24px 35px;
        overflow: hidden;
    }

        /* Imagen de fondo del footer */
        .pagina-login-premium .site-footer::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            background: url("../img/login-premium-bg.jpg") center bottom / cover no-repeat;
        }

        /* Capa oscura para mejorar la lectura */
        .pagina-login-premium .site-footer::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: rgba(0, 0, 0, 0.65);
        }

        /* Panel principal de cristal */
        .pagina-login-premium .site-footer .footer-grid {
            position: relative;
            box-sizing: border-box;
            max-width: 1150px;
            margin: 0 auto;
            padding: 38px 42px;
            background: rgba(18, 18, 22, 0.68);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(237, 28, 46, 0.35);
            border-radius: 22px;
            box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45), 0 0 30px rgba(237, 28, 46, 0.08);
        }

        /* Títulos */
        .pagina-login-premium .site-footer h3 {
            color: #ffffff;
            font-weight: 700;
            margin-bottom: 15px;
        }

        /* Información de contacto */
        .pagina-login-premium .site-footer p {
            color: #d1d1d5;
            line-height: 1.7;
        }

        /* Enlaces */
        .pagina-login-premium .site-footer a {
            color: #dedee2;
            transition: color 0.25s ease;
        }

            .pagina-login-premium .site-footer a:hover {
                color: #ff4050;
            }

        /* Logo */
        .pagina-login-premium .site-footer .footer-logo img {
            max-width: 175px;
            height: auto;
        }

        /* Derechos reservados */
        .pagina-login-premium .site-footer .footer-copyright {
            max-width: 1150px;
            margin: 18px auto 0;
            padding: 10px 0;
            text-align: center;
            background: transparent;
            border: none;
        }

            .pagina-login-premium .site-footer .footer-copyright p {
                color: #b9b9bf;
                font-size: 13px;
            }

/* Adaptación para móviles */
@media (max-width: 768px) {
    .pagina-login-premium .site-footer {
        padding: 20px 15px 25px;
    }

        .pagina-login-premium .site-footer .footer-grid {
            padding: 28px 24px;
            border-radius: 18px;
            gap: 25px;
        }

        .pagina-login-premium .site-footer .footer-copyright {
            margin-top: 15px;
        }
}

/* ==========================================
   KFITNESS - FONDO CONTINUO LOGIN + FOOTER
========================================== */

/* Una sola imagen para toda la página */
body.pagina-login-premium {
    background-image: linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30) ), url("../img/login-premium-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.kf-global-bg.pagina-login-premium {
    background-image: none;
}

/* La sección del login deja ver el fondo general */
.pagina-login-premium .login-premium {
    background: transparent;
}

/* Desactivamos la imagen duplicada del formulario */
.pagina-login-premium .login-premium-fondo {
    display: none;
}

.kf-global-bg.pagina-login-premium .login-premium-overlay {
    display: none;
}

/* Desactivamos la imagen duplicada del footer */
.pagina-login-premium .site-footer::before {
    content: none;
}

/* Quitamos la capa oscura independiente del footer */
.pagina-login-premium .site-footer::after {
    content: none;
}

/* El footer conserva su efecto de cristal */
.pagina-login-premium .site-footer {
    background: transparent;
}


/* ==========================================
   KFITNESS - NAVBAR DE CRISTAL
   Exclusivo de la página de login
========================================== */

.pagina-login-premium .site-header {
    background: rgba(12, 12, 16, 0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(237, 28, 46, 0.35);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 20px rgba(237, 28, 46, 0.06);
    transition: background 0.3s ease;
}

    /* Enlaces de navegación */
    .pagina-login-premium .site-header .nav-links a {
        color: #f0f0f2;
        transition: color 0.25s ease;
    }

        /* Efecto al pasar el cursor */
        .pagina-login-premium .site-header .nav-links a:hover {
            color: #ff4050;
        }

        /* Enlace activo */
        .pagina-login-premium .site-header .nav-links a.activo {
            color: #ff4050;
        }