﻿/* AM Club v711 - Login premium polish
   Objetivo:
   - pulir la línea visual premium sin reemplazar Login.aspx
   - mantener los fixes v700-v710 vigentes
   - mejorar legibilidad, foco, proporciones y comportamiento móvil
   - no tocar Font Awesome ni lógica C#
*/

/* Base visual cargada al último: normaliza solo el login */
html body.am-body .am-login-v700{
    --am-v711-panel:rgba(7, 9, 24, .82);
    --am-v711-panel-strong:rgba(8, 10, 27, .90);
    --am-v711-line:rgba(255,255,255,.135);
    --am-v711-line-hot:rgba(229,75,218,.34);
    --am-v711-text:#f7f8ff;
    --am-v711-muted:rgba(236,242,255,.72);
    --am-v711-muted-2:rgba(236,242,255,.55);
    --am-v711-pink:#f24fd3;
    --am-v711-violet:#9668ff;
    --am-v711-cyan:#5ed9ff;
    font-family:var(--am-font-body, "Segoe UI", Arial, sans-serif)!important;
    text-rendering:geometricPrecision!important;
    -webkit-font-smoothing:antialiased!important;
}

/* Mantiene Font Awesome intacto: solo ajusta alineación de íconos dentro del login */
html body.am-body .am-login-v700 i.fa-solid,
html body.am-body .am-login-v700 i.fa-regular,
html body.am-body .am-login-v700 i.fa-brands{
    line-height:1!important;
    flex:0 0 auto!important;
}

/* Capa cinematográfica suave sobre el fondo, sin cambiar las imágenes aprobadas */
html body.am-body .am-login-v700::before{
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.025), transparent 0 18%, transparent 44%, rgba(0,0,0,.10) 78%, rgba(0,0,0,.24) 100%),
        linear-gradient(120deg, rgba(7,9,24,.34) 0%, rgba(7,9,24,.08) 42%, rgba(7,9,24,.36) 100%)!important;
    opacity:.88!important;
}

html body.am-body .am-login-v700 .am-login-v482__texture{
    opacity:.030!important;
}

/* Marca: más respiración, menos ruido y logo limpio */
html body.am-body .am-login-v700 .am-login-v482__brand{
    width:min(424px, 100%)!important;
    min-height:62px!important;
    padding:9px 13px 9px 11px!important;
    border-radius:20px!important;
    border:1px solid rgba(255,255,255,.095)!important;
    background:
        linear-gradient(90deg, rgba(18,18,44,.70), rgba(71,21,88,.30), rgba(7,10,28,.72))!important;
    box-shadow:
        0 18px 42px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,255,255,.018),
        0 0 22px rgba(242,79,211,.055)!important;
    backdrop-filter:blur(18px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
}

html body.am-body .am-login-v700 .am-login-logo-v699,
html body.am-body .am-login-v700 .am-login-v482__brand-logo{
    width:58px!important;
    max-width:58px!important;
    flex:0 0 58px!important;
    filter:
        drop-shadow(0 0 5px rgba(242,79,211,.14))
        drop-shadow(0 0 8px rgba(94,217,255,.10))!important;
}

html body.am-body .am-login-v700 .am-login-v482__brand-name,
html body.am-body .am-login-v700 .am-login-v688__wordmark{
    font-family:var(--am-font-display, "Segoe UI", Arial, sans-serif)!important;
    font-size:clamp(1.55rem, 2.65vw, 2.06rem)!important;
    line-height:.95!important;
    letter-spacing:.008em!important;
    font-weight:330!important;
    color:var(--am-v711-text)!important;
    text-shadow:0 8px 18px rgba(0,0,0,.20)!important;
}

html body.am-body .am-login-v700 .am-login-v482__brand-name span,
html body.am-body .am-login-v700 .am-login-v688__wordmark span{
    background:linear-gradient(135deg, #fff 0%, #d8c8ff 30%, var(--am-v711-pink) 62%, var(--am-v711-cyan) 100%)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
}

html body.am-body .am-login-v700 .am-login-v482__brand-copy small{
    margin-top:2px!important;
    font-size:.52rem!important;
    line-height:1.15!important;
    letter-spacing:.34em!important;
    color:rgba(241,245,255,.64)!important;
}

/* Tarjeta: más premium, más legible, mismo markup */
html body.am-body .am-login-v700 .am-login-v482__card{
    width:min(424px, 100%)!important;
    padding:19px 21px 17px!important;
    border-radius:24px!important;
    border:1px solid var(--am-v711-line)!important;
    background:
        linear-gradient(145deg, rgba(43,24,70,.52), rgba(7,12,29,.84) 42%, var(--am-v711-panel-strong))!important;
    box-shadow:
        0 24px 68px rgba(0,0,0,.62),
        0 0 0 1px rgba(255,255,255,.024) inset,
        0 0 24px rgba(242,79,211,.075),
        0 0 18px rgba(94,217,255,.055)!important;
    backdrop-filter:blur(22px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.08)!important;
}

html body.am-body .am-login-v700 .am-login-v482__card-glow{
    opacity:.70!important;
    background:
        radial-gradient(circle at 7% 0%, rgba(242,79,211,.15), transparent 0 33%),
        radial-gradient(circle at 100% 10%, rgba(94,217,255,.12), transparent 0 35%),
        linear-gradient(180deg, rgba(255,255,255,.030), transparent 46%)!important;
}

html body.am-body .am-login-v700 .am-login-v688__seal{
    top:14px!important;
    right:15px!important;
    width:31px!important;
    height:31px!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.105)!important;
    box-shadow:0 10px 22px rgba(0,0,0,.18), 0 0 18px rgba(242,79,211,.08)!important;
}

html body.am-body .am-login-v700 .am-login-v482__eyebrow{
    margin:0 0 8px!important;
    font-size:.62rem!important;
    line-height:1.25!important;
    font-weight:750!important;
    letter-spacing:.235em!important;
    color:rgba(241,245,255,.76)!important;
}

html body.am-body .am-login-v700 .am-login-v482__card h1{
    margin:0!important;
    font-size:clamp(1.92rem, 3.4vw, 2.62rem)!important;
    line-height:.95!important;
    letter-spacing:-.042em!important;
    font-weight:680!important;
    color:#fbfbff!important;
    text-wrap:balance!important;
}

html body.am-body .am-login-v700 .am-login-v482__lead{
    max-width:348px!important;
    margin:8px 0 11px!important;
    font-size:.805rem!important;
    line-height:1.42!important;
    font-weight:500!important;
    color:var(--am-v711-muted)!important;
}

/* Sellos: más consistentes y compactos */
html body.am-body .am-login-v700 .am-login-v688__trust{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    margin:0 0 11px!important;
}

html body.am-body .am-login-v700 .am-login-v688__trust span{
    min-height:24px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    background:rgba(7,12,30,.44)!important;
    border:1px solid rgba(255,255,255,.085)!important;
    color:rgba(241,245,255,.73)!important;
    font-size:.585rem!important;
    line-height:1!important;
    font-weight:650!important;
    letter-spacing:.01em!important;
}

html body.am-body .am-login-v700 .am-login-v688__trust i{
    color:var(--am-v711-cyan)!important;
    font-size:.62rem!important;
}

/* Formulario: foco claro, sin romper ASP.NET */
html body.am-body .am-login-v700 .am-login-v482__form{
    gap:8px!important;
}

html body.am-body .am-login-v700 .am-login-v482__field{
    gap:5px!important;
}

html body.am-body .am-login-v700 .am-login-v482__label{
    font-size:.69rem!important;
    line-height:1.15!important;
    font-weight:680!important;
    color:rgba(241,245,255,.76)!important;
}

html body.am-body .am-login-v700 .am-login-v482__input-wrap{
    min-height:40px!important;
}

html body.am-body .am-login-v700 .am-login-v482__input{
    height:40px!important;
    min-height:40px!important;
    line-height:40px!important;
    border-radius:14px!important;
    border:1px solid rgba(255,255,255,.115)!important;
    background:rgba(4,8,24,.62)!important;
    color:#fbfcff!important;
    font-size:.84rem!important;
    font-weight:560!important;
    caret-color:var(--am-v711-cyan)!important;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease!important;
}

html body.am-body .am-login-v700 .am-login-v482__input:hover{
    border-color:rgba(255,255,255,.18)!important;
    background:rgba(6,10,28,.70)!important;
}

html body.am-body .am-login-v700 .am-login-v482__input:focus,
html body.am-body .am-login-v700 .am-login-v482__input:focus-visible{
    outline:0!important;
    border-color:rgba(94,217,255,.48)!important;
    box-shadow:
        0 0 0 3px rgba(94,217,255,.105),
        0 0 18px rgba(242,79,211,.075),
        inset 0 0 0 1px rgba(255,255,255,.025)!important;
    background:rgba(5,10,29,.82)!important;
}

html body.am-body .am-login-v700 .am-login-v482__input::placeholder{
    color:rgba(241,245,255,.34)!important;
    font-weight:450!important;
}

html body.am-body .am-login-v700 .am-login-v482__input-icon{
    color:rgba(226,238,255,.74)!important;
    opacity:1!important;
}

html body.am-body .am-login-v700 .am-login-v482__eye{
    width:35px!important;
    min-width:35px!important;
    height:35px!important;
    color:rgba(240,245,255,.70)!important;
    transition:color .18s ease, transform .18s ease!important;
}

html body.am-body .am-login-v700 .am-login-v482__eye:hover{
    color:#fff!important;
    transform:translateY(-1px)!important;
}

/* Botones: más sólidos, accesibles y equilibrados */
html body.am-body .am-login-v700 .am-login-v482__btn{
    min-height:40px!important;
    height:40px!important;
    border-radius:14px!important;
    font-size:.825rem!important;
    line-height:1!important;
    font-weight:780!important;
    letter-spacing:.005em!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease!important;
}

html body.am-body .am-login-v700 .am-login-v482__btn:hover{
    transform:translateY(-1px)!important;
}

html body.am-body .am-login-v700 .am-login-v482__btn:focus,
html body.am-body .am-login-v700 .am-login-v482__btn:focus-visible{
    outline:0!important;
    box-shadow:0 0 0 3px rgba(94,217,255,.13), 0 16px 32px rgba(0,0,0,.26)!important;
}

html body.am-body .am-login-v700 .am-login-v482__btn--primary{
    margin-top:5px!important;
    background:
        linear-gradient(90deg, var(--am-v711-pink) 0%, var(--am-v711-violet) 49%, var(--am-v711-cyan) 100%)!important;
    box-shadow:
        0 13px 28px rgba(242,79,211,.145),
        0 9px 24px rgba(94,217,255,.10),
        inset 0 1px 0 rgba(255,255,255,.23)!important;
    color:#fff!important;
}

html body.am-body .am-login-v700 .am-login-v482__btn--primary:hover{
    filter:saturate(1.08) brightness(1.035)!important;
    box-shadow:
        0 16px 32px rgba(242,79,211,.18),
        0 12px 28px rgba(94,217,255,.13),
        inset 0 1px 0 rgba(255,255,255,.25)!important;
}

html body.am-body .am-login-v700 .am-login-v482__btn--ghost{
    background:rgba(5,8,24,.34)!important;
    border:1px solid rgba(190,120,255,.30)!important;
    color:rgba(248,250,255,.88)!important;
}

html body.am-body .am-login-v700 .am-login-v482__btn--ghost:hover{
    border-color:rgba(94,217,255,.34)!important;
    box-shadow:0 10px 22px rgba(0,0,0,.20), 0 0 18px rgba(94,217,255,.06)!important;
}

/* Conserva el <br /> manual, pero controla el espaciado real del enlace */
html body.am-body .am-login-v700 .am-login-v482__btn--ghost + br{
    line-height:0!important;
}

html body.am-body .am-login-v700 .am-login-v482__btn--ghost + br + .am-login-v482__forgot,
html body.am-body .am-login-v700 .am-login-v482__forgot{
    display:inline-flex!important;
    justify-content:center!important;
    align-items:center!important;
    margin-top:3px!important;
    color:#e4a6ff!important;
    font-size:.72rem!important;
    font-weight:620!important;
    text-decoration:none!important;
    transition:color .18s ease, text-shadow .18s ease!important;
}

html body.am-body .am-login-v700 .am-login-v482__forgot:hover{
    color:#fff!important;
    text-shadow:0 0 14px rgba(242,79,211,.32)!important;
}

/* Alertas ASP.NET del login */
html body.am-body .am-login-v700 .am-login-v482__alert{
    margin:0 0 10px!important;
    padding:10px 12px!important;
    border-radius:15px!important;
    border:1px solid rgba(255,83,150,.25)!important;
    background:linear-gradient(135deg, rgba(255,83,150,.13), rgba(94,217,255,.055))!important;
    color:rgba(255,242,247,.93)!important;
    font-size:.78rem!important;
    line-height:1.34!important;
    box-shadow:0 12px 26px rgba(0,0,0,.20)!important;
}

/* Firma y nota inferior más sobrias */
html body.am-body .am-login-v700 .am-login-v688__signature{
    width:min(424px,100%)!important;
    margin-top:3px!important;
    text-align:left!important;
    color:var(--am-v711-muted-2)!important;
}

html body.am-body .am-login-v700 .am-login-v688__signature strong{
    font-size:.59rem!important;
    line-height:1.2!important;
    font-weight:760!important;
    letter-spacing:.17em!important;
    color:rgba(248,250,255,.76)!important;
}

html body.am-body .am-login-v700 .am-login-v688__signature span{
    font-size:.715rem!important;
    line-height:1.3!important;
    font-weight:450!important;
    color:var(--am-v711-muted-2)!important;
}

html body.am-body .am-login-v700 .am-login-v482__footer-note{
    width:min(424px,100%)!important;
    margin-top:4px!important;
    font-size:.705rem!important;
    line-height:1.25!important;
    color:rgba(241,245,255,.68)!important;
}

/* Escritorio: deja el bloque premium centrado, sin invadir el fondo */
@media (min-width:821px){
    html body.am-body .am-login-v700 .am-login-v482__shell{
        width:min(980px, calc(100% - 36px))!important;
        align-items:center!important;
        justify-content:center!important;
        gap:10px!important;
        transform:translateY(-5px)!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__bg{
        filter:saturate(1.10) contrast(1.07) brightness(.89)!important;
    }
}

/* Móvil: mantiene no-scroll, centro vertical y reduce riesgo de corte en pantallas bajas */
@media (max-width:820px){
    html body.am-body .am-login-v700 .am-login-v482__shell{
        width:min(100% - 22px, 390px)!important;
        padding:7px 0!important;
        gap:0!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__brand{
        width:100%!important;
        min-height:56px!important;
        padding:7px 11px!important;
        border-radius:18px!important;
        margin-bottom:8px!important;
    }

    html body.am-body .am-login-v700 .am-login-logo-v699,
    html body.am-body .am-login-v700 .am-login-v482__brand-logo{
        width:49px!important;
        max-width:49px!important;
        flex-basis:49px!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__brand-name,
    html body.am-body .am-login-v700 .am-login-v688__wordmark{
        font-size:1.47rem!important;
        line-height:.96!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__brand-copy small{
        font-size:.465rem!important;
        letter-spacing:.24em!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__card{
        width:100%!important;
        padding:16px 14px 14px!important;
        border-radius:21px!important;
    }

    html body.am-body .am-login-v700 .am-login-v688__seal{
        width:29px!important;
        height:29px!important;
        top:13px!important;
        right:13px!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__eyebrow{
        font-size:.585rem!important;
        letter-spacing:.205em!important;
        margin-bottom:7px!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__card h1{
        font-size:1.88rem!important;
        line-height:.96!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__lead{
        margin:7px 0 9px!important;
        font-size:.745rem!important;
        line-height:1.33!important;
    }

    html body.am-body .am-login-v700 .am-login-v688__trust{
        gap:4px!important;
        margin-bottom:9px!important;
    }

    html body.am-body .am-login-v700 .am-login-v688__trust span{
        min-height:21px!important;
        padding:0 7px!important;
        font-size:.545rem!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__form{
        gap:7px!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__label{
        font-size:.66rem!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__input-wrap,
    html body.am-body .am-login-v700 .am-login-v482__input,
    html body.am-body .am-login-v700 .am-login-v482__btn{
        min-height:38px!important;
        height:38px!important;
        line-height:38px!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__input,
    html body.am-body .am-login-v700 .am-login-v482__btn{
        font-size:.80rem!important;
    }

    html body.am-body .am-login-v700 .am-login-v688__signature{
        margin-top:8px!important;
        text-align:center!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__footer-note{
        margin-top:7px!important;
        text-align:center!important;
    }
}

/* Pantallas móviles muy bajas: prioriza el formulario completo sin romper el centro */
@media (max-width:820px) and (max-height:690px){
    html body.am-body .am-login-v700 .am-login-v482__shell{
        width:min(100% - 18px, 382px)!important;
        padding:5px 0!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__brand{
        min-height:50px!important;
        padding:6px 10px!important;
        margin-bottom:6px!important;
    }

    html body.am-body .am-login-v700 .am-login-logo-v699,
    html body.am-body .am-login-v700 .am-login-v482__brand-logo{
        width:43px!important;
        max-width:43px!important;
        flex-basis:43px!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__brand-name,
    html body.am-body .am-login-v700 .am-login-v688__wordmark{
        font-size:1.34rem!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__card{
        padding:13px 13px 12px!important;
        border-radius:19px!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__card h1{
        font-size:1.68rem!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__lead{
        display:none!important;
    }

    html body.am-body .am-login-v700 .am-login-v688__trust{
        margin-bottom:7px!important;
    }

    html body.am-body .am-login-v700 .am-login-v688__trust span{
        min-height:20px!important;
        font-size:.515rem!important;
    }

    html body.am-body .am-login-v700 .am-login-v688__signature{
        display:none!important;
    }

    html body.am-body .am-login-v700 .am-login-v482__footer-note{
        margin-top:5px!important;
        font-size:.64rem!important;
    }
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
    html body.am-body .am-login-v700 *,
    html body.am-body .am-login-v700 *::before,
    html body.am-body .am-login-v700 *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}
