/* ============================================================
   LOGIN / REGISTER / LOST PASSWORD
   Customización del wp-login.php para matchear el theme
   cosmic-dark Apple-style.

   WordPress carga este CSS solo en /wp-login.php (login, register,
   lostpassword, retrievepassword) vía login_enqueue_scripts hook.
   ============================================================ */

/* Fondo cosmic-dark con starfield ambiental */
body.login {
    background: #050811;
    background-image:
        radial-gradient(ellipse at top, rgba(90, 200, 250, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(191, 90, 242, 0.06) 0%, transparent 50%),
        #050811;
    color: #f5f5f7;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Starfield decorativo (mismo que el theme) */
body.login::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 50% 80%, rgba(90,200,250,0.5), transparent),
        radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 35% 85%, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 90% 50%, rgba(191,90,242,0.4), transparent);
    background-size: 100% 100%;
    opacity: 0.8;
}

#login {
    position: relative;
    z-index: 1;
    width: 380px;
    padding: 5vh 0 20px;
}

/* Logo del theme arriba del formulario */
.login h1 {
    margin: 0 0 24px;
}
.login h1 a {
    background-image: url('../img/brand/logo-256.png') !important;
    background-size: 88px 88px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 auto !important;
    text-indent: -9999px !important;
    color: transparent !important;
    filter: drop-shadow(0 6px 20px rgba(90, 200, 250, 0.18));
    transition: filter 280ms ease, transform 280ms ease;
}
.login h1 a:hover,
.login h1 a:focus {
    filter: drop-shadow(0 8px 28px rgba(90, 200, 250, 0.32));
    transform: scale(1.02);
}

/* Caja del formulario */
.login form {
    background: rgba(20, 28, 48, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(245, 245, 247, 0.10);
    border-radius: 14px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 26px 26px 22px;
    margin-top: 0;
    overflow: visible;
}

/* Labels */
.login label {
    color: rgba(245, 245, 247, 0.85);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

/* Inputs */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    background: rgba(10, 16, 32, 0.85) !important;
    border: 1px solid rgba(245, 245, 247, 0.14) !important;
    border-radius: 8px !important;
    color: #f5f5f7 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    padding: 11px 14px !important;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: rgba(90, 200, 250, 0.6) !important;
    background: rgba(10, 16, 32, 1) !important;
    box-shadow: 0 0 0 3px rgba(90, 200, 250, 0.18) !important;
    outline: none !important;
}
.login input[type="text"]::placeholder,
.login input[type="password"]::placeholder,
.login input[type="email"]::placeholder {
    color: rgba(245, 245, 247, 0.35);
}

/* Checkbox "Recuérdame" */
.login .forgetmenot {
    margin-top: 4px;
    margin-bottom: 14px;
}
.login .forgetmenot label {
    color: rgba(245, 245, 247, 0.65);
    font-size: 13px;
    cursor: pointer;
}
.login input[type="checkbox"] {
    accent-color: #5ac8fa;
    background: rgba(10, 16, 32, 0.85);
    border: 1px solid rgba(245, 245, 247, 0.18);
    margin-right: 6px;
}

/* Botón principal "Acceder" / "Registrarse" / "Obtener contraseña nueva" */
.login .submit {
    margin-top: 6px;
    text-align: center;
}
.login .button-primary,
.login #wp-submit {
    background: linear-gradient(135deg, #5ac8fa 0%, #bf5af2 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #050811 !important;
    cursor: pointer;
    display: inline-block !important;
    float: none !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 11px 30px !important;
    height: auto !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    text-transform: none !important;
    box-shadow: 0 8px 24px rgba(90, 200, 250, 0.30) !important;
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease !important;
    width: 100% !important;
}
.login .button-primary:hover,
.login .button-primary:focus,
.login #wp-submit:hover,
.login #wp-submit:focus {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 32px rgba(90, 200, 250, 0.45) !important;
    filter: brightness(1.05);
    outline: none !important;
}

/* Nav abajo del form (¿Olvidaste? / Registrate / Volver) */
.login #nav,
.login #backtoblog {
    margin: 14px 0 0;
    padding: 0 4px;
    text-align: center;
    font-size: 13px;
    color: rgba(245, 245, 247, 0.55);
}
.login #nav a,
.login #backtoblog a {
    color: #5ac8fa !important;
    text-decoration: none;
    transition: color 220ms ease, opacity 220ms ease;
    text-shadow: none;
}
.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus {
    color: #bce8ff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.login #nav {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.login #backtoblog {
    margin-top: 8px;
}

/* Mensajes de error/info */
.login .message,
.login #login_error,
.login .notice {
    background: rgba(90, 200, 250, 0.10) !important;
    border-left: 4px solid #5ac8fa !important;
    border-radius: 8px;
    box-shadow: none !important;
    color: rgba(245, 245, 247, 0.92) !important;
    font-size: 13.5px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.login #login_error {
    background: rgba(255, 69, 58, 0.12) !important;
    border-left-color: #ff453a !important;
    color: #ffaaa0 !important;
}
.login .message strong,
.login #login_error strong {
    color: inherit !important;
}
.login .message a,
.login #login_error a,
.login .notice a {
    color: #5ac8fa !important;
}

/* Privacy policy link en register */
.login .privacy-policy-page-link {
    color: rgba(245, 245, 247, 0.55) !important;
}

/* Indicador de fortaleza de contraseña (registro) */
.pw-weak,
.indicator-hint {
    color: rgba(245, 245, 247, 0.55) !important;
    font-size: 12px !important;
}

/* Botón "mostrar contraseña" */
.login .button.wp-hide-pw {
    background: transparent !important;
    border: 1px solid rgba(245, 245, 247, 0.14) !important;
    border-radius: 0 8px 8px 0 !important;
    color: rgba(245, 245, 247, 0.6) !important;
    height: auto !important;
    padding: 11px 12px !important;
    box-shadow: none !important;
}
.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
    background: rgba(90, 200, 250, 0.08) !important;
    color: #5ac8fa !important;
    outline: none !important;
}

/* Idioma selector (footer wp-login) */
.login .language-switcher {
    text-align: center;
    margin-top: 20px;
}
.login .language-switcher label {
    color: rgba(245, 245, 247, 0.55);
}
.login .language-switcher select {
    background: rgba(10, 16, 32, 0.85);
    border: 1px solid rgba(245, 245, 247, 0.14);
    border-radius: 8px;
    color: #f5f5f7;
    padding: 6px 10px;
    font-family: inherit;
}

/* Responsive — mobile */
@media (max-width: 480px) {
    #login {
        width: calc(100vw - 32px);
        padding: 3vh 0 20px;
    }
    .login form {
        padding: 22px 20px 18px;
    }
    .login h1 a {
        width: 72px !important;
        height: 72px !important;
        background-size: 72px 72px !important;
    }
}