/* ============================================================
   BEDEEL AUTH R6 SOCIAL PREMIUM
   Login + Register
   Dark first
============================================================ */

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

html,
body{
    margin:0;
    min-width:320px;
    min-height:100%;
}

body.npa5-body{
    min-height:100vh;
    min-height:100dvh;

    overflow:hidden;

    color:var(--np-text);

    background:
        radial-gradient(
            circle at 52% -15%,
            rgba(80,78,228,.12),
            transparent 32%
        ),
        var(--np-page);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* ============================================================
   SHELL
============================================================ */

.npa5-shell{
    height:100vh;
    height:100dvh;

    display:grid;

    grid-template-rows:
        56px
        minmax(0,1fr);

    overflow:hidden;
}

/* ============================================================
   HEADER
============================================================ */

.npa5-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    padding:0 clamp(16px,3vw,44px);

    border-bottom:1px solid var(--np-border);

    background:
        color-mix(
            in srgb,
            var(--np-page) 94%,
            transparent
        );

    backdrop-filter:blur(20px);

    position:relative;
    z-index:40;
}

.npa5-brand{
    min-width:0;

    display:flex;
    align-items:center;

    gap:9px;

    color:var(--np-text);

    text-decoration:none;
}

.npa5-brand-icon{
    width:35px;
    height:35px;

    flex:0 0 35px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #327eff,
            #7155ff
        );

    box-shadow:
        0 10px 25px rgba(55,84,255,.20);

    font-size:15px;
    font-weight:950;
}

.npa5-brand-copy{
    min-width:0;

    display:flex;
    flex-direction:column;
}

.npa5-brand-copy strong{
    font-size:13px;
    line-height:1;
}

.npa5-brand-copy small{
    margin-top:3px;

    overflow:hidden;

    color:var(--np-muted);

    font-size:7px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.npa5-explore{
    display:flex;
    align-items:center;

    gap:6px;

    padding:8px 9px;

    border-radius:8px;

    color:var(--np-muted);

    font-size:9px;
    font-weight:800;

    text-decoration:none;
}

.npa5-explore:hover{
    color:var(--np-text);

    background:var(--np-surface);
}

/* ============================================================
   MAIN
============================================================ */

.npa5-main{
    min-height:0;

    display:grid;

    grid-template-columns:
        minmax(460px,1.05fr)
        minmax(540px,.95fr);

    overflow:hidden;
}

/* ============================================================
   PREVIEW
============================================================ */

.npa5-preview{
    min-width:0;
    min-height:0;

    display:grid;

    grid-template-rows:
        minmax(260px,1fr)
        auto
        auto;

    padding:
        clamp(18px,3vh,28px)
        clamp(22px,3vw,40px);

    gap:10px;

    border-right:1px solid var(--np-border);
}

.npa5-preview-media{
    min-height:0;

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #143761,
            #225c9b
        );

    box-shadow:
        0 22px 60px rgba(0,0,0,.10);
}

.npa5-preview-media>img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.npa5-preview-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,12,26,.91) 0%,
            rgba(3,12,26,.70) 42%,
            rgba(3,12,26,.20) 78%,
            rgba(3,12,26,.08)
        );
}

.npa5-preview-copy{
    max-width:540px;

    position:absolute;

    left:26px;
    top:50%;

    z-index:3;

    transform:translateY(-50%);
}

.npa5-eyebrow{
    display:inline-flex;

    color:#83b9ff;

    font-size:7px;
    font-weight:950;

    letter-spacing:.12em;
}

.npa5-preview-copy h1{
    max-width:520px;

    margin:8px 0;

    color:#fff;

    font-size:clamp(32px,3vw,48px);
    line-height:.98;

    letter-spacing:-.045em;
}

.npa5-preview-copy h1 strong{
    display:block;

    color:#5ed9b5;
}

.npa5-preview-copy p{
    max-width:440px;

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:10px;
    line-height:1.5;
}

.npa5-live-pill{
    position:absolute;

    right:15px;
    top:15px;

    z-index:4;

    display:flex;
    align-items:center;

    gap:7px;

    padding:7px 9px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;

    background:rgba(5,17,35,.62);

    backdrop-filter:blur(12px);
}

.npa5-live-pill>i{
    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:#3adeac;

    box-shadow:
        0 0 12px rgba(58,222,172,.72);
}

.npa5-live-pill>span{
    display:grid;
}

.npa5-live-pill strong{
    color:#fff;

    font-size:6px;
}

.npa5-live-pill small{
    color:rgba(255,255,255,.52);

    font-size:5px;
}

/* ============================================================
   PREVIEW ACTIVITY
============================================================ */

.npa5-preview-stream{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:7px;
}

.npa5-stream-item{
    min-width:0;
    min-height:59px;

    display:grid;

    grid-template-columns:
        33px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:7px;

    padding:7px;

    border:1px solid var(--np-border);
    border-radius:12px;

    color:var(--np-text);

    background:var(--np-surface);

    text-decoration:none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.npa5-stream-item:hover{
    transform:translateY(-1px);

    border-color:
        color-mix(
            in srgb,
            #438cff 30%,
            var(--np-border)
        );

    background:var(--np-surface-2);
}

.npa5-stream-icon{
    width:33px;
    height:33px;

    display:grid;
    place-items:center;

    border-radius:10px;

    font-size:11px;
    font-weight:900;
}

.npa5-stream-icon.is-buy{
    color:#ffb45e;

    background:rgba(245,166,66,.10);
}

.npa5-stream-icon.is-sell{
    color:#42d1a1;

    background:rgba(50,204,150,.10);
}

.npa5-stream-icon.is-connect{
    color:#8e84ff;

    background:rgba(112,85,255,.11);
}

.npa5-stream-item>span:nth-child(2){
    min-width:0;

    display:grid;
}

.npa5-stream-item small{
    color:#68a7ff;

    font-size:5px;
    font-weight:950;
}

.npa5-stream-item strong{
    margin-top:1px;

    overflow:hidden;

    font-size:7px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.npa5-stream-item em{
    margin-top:1px;

    overflow:hidden;

    color:var(--np-muted);

    font-size:5px;
    font-style:normal;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.npa5-stream-item>b{
    color:var(--np-muted);
}

/* FOOT */

.npa5-preview-foot{
    display:flex;
    align-items:center;

    gap:7px;

    min-height:24px;

    color:var(--np-muted);
}

.npa5-status-dot{
    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:#3ad7a7;

    box-shadow:
        0 0 11px rgba(58,215,167,.48);
}

.npa5-preview-foot p{
    margin:0;

    font-size:6.5px;
}

/* ============================================================
   AUTH AREA
============================================================ */

.npa5-auth{
    min-width:0;
    min-height:0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.012),
            transparent 18%
        );
}

.npa5-auth-scroll{
    width:100%;
    height:100%;

    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:thin;

    scrollbar-color:
        var(--np-border)
        transparent;
}

.npa5-auth-holder{
    width:100%;
    min-height:100%;

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

    padding:
        clamp(14px,2.5vh,24px)
        clamp(18px,3vw,34px);
}

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

.npa5-card{
    width:100%;
    max-width:600px;

    padding:20px;

    border:1px solid var(--np-border);
    border-radius:18px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(104,74,255,.065),
            transparent 32%
        ),
        var(--np-surface);

    box-shadow:
        0 25px 70px rgba(0,0,0,.10);
}

.npa5-card-head{
    margin-bottom:12px;
}

.npa5-card-eyebrow{
    display:block;

    margin-bottom:4px;

    color:#62a5ff;

    font-size:7px;
    font-weight:950;

    letter-spacing:.11em;
}

.npa5-card-head h2{
    margin:0;

    color:var(--np-text);

    font-size:27px;
    line-height:1.03;

    letter-spacing:-.035em;
}

.npa5-card-head p{
    max-width:520px;

    margin:5px 0 0;

    color:var(--np-muted);

    font-size:9px;
    line-height:1.45;
}

/* ============================================================
   ALERT
============================================================ */

.npa5-alert{
    margin-bottom:9px;

    padding:8px 9px;

    border:1px solid var(--np-border);
    border-radius:9px;

    color:var(--np-text);

    background:var(--np-surface-2);

    font-size:8px;
}

/* ============================================================
   SOCIAL TITLE
============================================================ */

.npa5-social-title{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-bottom:7px;
}

.npa5-social-title strong{
    font-size:8px;
}

.npa5-social-title span{
    color:var(--np-muted);

    font-size:6px;
}


/* ============================================================
   PACTOPIA360 PRIMARY IDENTITY
============================================================ */

.npa5-p360-primary{
    width:100%;
    min-height:58px;

    display:grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        34px;

    align-items:center;

    gap:10px;

    padding:8px 10px;

    border:1px solid
        color-mix(
            in srgb,
            #4f78ff 55%,
            var(--np-border)
        );

    border-radius:11px;

    color:var(--np-text);

    background:
        linear-gradient(
            135deg,
            rgba(49,112,255,.11),
            rgba(111,79,255,.08)
        ),
        var(--np-surface-2);

    text-decoration:none;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.015);

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.npa5-p360-primary:hover{
    transform:translateY(-1px);

    border-color:#5786ff;

    background:
        linear-gradient(
            135deg,
            rgba(49,112,255,.17),
            rgba(111,79,255,.13)
        ),
        var(--np-surface-2);

    box-shadow:
        0 10px 28px rgba(44,80,220,.10);
}

.npa5-p360-primary-icon{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #327eff,
            #7055ff
        );

    box-shadow:
        0 8px 20px rgba(59,82,255,.20);

    font-size:12px;
    font-weight:950;
}

.npa5-p360-primary-copy{
    min-width:0;

    display:grid;
}

.npa5-p360-primary-copy small{
    color:#72aaff;

    font-size:5px;
    font-weight:950;

    letter-spacing:.09em;
}

.npa5-p360-primary-copy strong{
    margin-top:1px;

    overflow:hidden;

    font-size:8px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.npa5-p360-primary-copy em{
    margin-top:2px;

    overflow:hidden;

    color:var(--np-muted);

    font-size:5.5px;
    font-style:normal;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.npa5-p360-primary-arrow{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border-radius:9px;

    color:#72b8ff;

    background:
        color-mix(
            in srgb,
            var(--np-surface) 90%,
            transparent
        );

    font-size:13px;
}

.npa5-divider-social{
    margin-top:8px;
    margin-bottom:8px;
}

/* ============================================================
   PROVIDERS
============================================================ */

.npa5-provider-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    grid-auto-rows:48px;

    gap:6px;
}

.npa5-provider{
    min-width:0;
    min-height:48px;
    height:48px;

    display:grid;

    grid-template-columns:
        27px
        minmax(0,1fr);

    align-items:center;

    gap:7px;

    padding:6px 8px;

    border:1px solid var(--np-border);
    border-radius:10px;

    color:var(--np-text);

    background:var(--np-surface-2);

    text-align:left;
    text-decoration:none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

button.npa5-provider{
    width:100%;
}

.npa5-provider.is-ready:hover{
    transform:translateY(-1px);

    border-color:#3e79b0;

    background:var(--np-surface-3);
}

.npa5-provider.is-pending{
    opacity:.52;

    cursor:not-allowed;
}

.npa5-provider-icon{
    width:26px;
    height:26px;

    display:grid;
    place-items:center;
}

.npa5-provider-icon svg,
.npa5-provider-icon img{
    width:22px;
    height:22px;
}

.npa5-provider>span:last-child{
    min-width:0;

    display:grid;
}

.npa5-provider strong,
.npa5-provider small{
    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.npa5-provider strong{
    font-size:7px;
}

.npa5-provider small{
    margin-top:1px;

    color:var(--np-muted);

    font-size:5px;
}

/* ============================================================
   DIVIDER
============================================================ */

.npa5-divider{
    display:flex;
    align-items:center;

    gap:9px;

    margin:9px 0;

    color:var(--np-muted);

    font-size:6px;
}

.npa5-divider::before,
.npa5-divider::after{
    content:"";

    height:1px;

    flex:1;

    background:var(--np-border);
}

/* ============================================================
   FORM
============================================================ */

.npa5-form{
    display:grid;

    gap:8px;
}

.npa5-register-form{
    gap:7px;
}

.npa5-form-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:7px 8px;
}

.npa5-field{
    min-width:0;

    display:grid;

    gap:4px;
}

.npa5-field>span{
    color:var(--np-text);

    font-size:7px;
    font-weight:850;
}

.npa5-field>input,
.npa5-field .np-password-field>input{
    width:100%;
    height:38px;

    padding:0 10px;

    border:1px solid var(--np-border);
    border-radius:9px;

    outline:0;

    color:var(--np-text);

    background:var(--np-surface-2);

    font-size:9px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.npa5-field input::placeholder{
    color:var(--np-muted);
}

.npa5-field>input:focus,
.npa5-field .np-password-field>input:focus{
    border-color:#4489ff;

    box-shadow:
        0 0 0 3px rgba(68,137,255,.08);
}

/* ============================================================
   PASSWORD
============================================================ */

.np-password-field{
    position:relative;
}

.np-password-field>input{
    padding-right:40px !important;
}

.np-password-toggle{
    position:absolute;

    right:5px;
    top:50%;

    transform:translateY(-50%);

    width:29px;
    height:29px;

    display:grid;
    place-items:center;

    padding:0;

    border:0;

    color:var(--np-muted);

    background:transparent;

    cursor:pointer;
}

.np-eye{
    width:16px;
    height:16px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.np-eye-hide{
    display:none;
}

.np-password-toggle.is-visible .np-eye-show{
    display:none;
}

.np-password-toggle.is-visible .np-eye-hide{
    display:block;
}

/* ============================================================
   PASSWORD RULES
============================================================ */

.np-password-rules{
    display:flex;
    flex-wrap:wrap;

    gap:4px 9px;
}

.np-password-rules span{
    display:flex;
    align-items:center;

    gap:4px;

    color:var(--np-muted);

    font-size:6px;
}

.np-password-rules i{
    width:11px;
    height:11px;

    display:grid;
    place-items:center;

    border:1px solid var(--np-border);
    border-radius:50%;

    color:transparent;

    font-size:6px;
    font-style:normal;
}

.np-password-rules span.is-valid{
    color:#3ad3a2;
}

.np-password-rules span.is-valid i{
    color:#06111f;

    border-color:#3ad3a2;

    background:#3ad3a2;
}

.np-match-status{
    min-height:7px;

    color:var(--np-muted);

    font-size:6px;
}

.np-match-status.is-valid{
    color:#3ad3a2;
}

.np-match-status.is-invalid{
    color:#ff7b8a;
}

/* ============================================================
   OPTIONS
============================================================ */

.npa5-form-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.npa5-check{
    display:flex;
    align-items:flex-start;

    gap:6px;

    color:var(--np-muted);

    font-size:6.5px;
    line-height:1.4;
}

.npa5-check input{
    width:13px;
    height:13px;

    flex:0 0 13px;

    margin:0;

    accent-color:#347dff;
}

/* ============================================================
   CAPTCHA
============================================================ */

.npa5-captcha{
    min-height:42px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        125px;

    align-items:center;

    gap:8px;

    padding:6px 7px 6px 9px;

    border:1px solid var(--np-border);
    border-radius:9px;

    background:var(--np-surface-2);
}

.npa5-captcha>div{
    display:grid;
}

.npa5-captcha small{
    color:#67a6ff;

    font-size:5px;
    font-weight:950;

    letter-spacing:.09em;
}

.npa5-captcha strong{
    margin-top:1px;

    font-size:7px;
}

.npa5-captcha input{
    width:100%;
    height:31px;

    border:1px solid var(--np-border);
    border-radius:8px;

    outline:0;

    color:var(--np-text);

    background:var(--np-surface);

    text-align:center;

    font-size:8px;
}

/* ============================================================
   PRIMARY
============================================================ */

.npa5-primary{
    width:100%;
    height:38px;

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

    gap:7px;

    border:0;
    border-radius:9px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2b7eff,
            #7054ff
        );

    box-shadow:
        0 10px 25px rgba(58,81,255,.18);

    font-size:8px;
    font-weight:950;

    cursor:pointer;

    transition:
        transform .15s ease,
        filter .15s ease;
}

.npa5-primary:hover{
    transform:translateY(-1px);

    filter:brightness(1.06);
}

/* ============================================================
   FOOTER
============================================================ */

.npa5-card-footer{
    margin-top:8px;

    display:flex;
    justify-content:center;

    gap:4px;

    color:var(--np-muted);

    font-size:6.5px;
}

.npa5-card-footer a{
    color:#68b6ff;

    font-weight:900;

    text-decoration:none;
}

.npa5-error{
    color:#ff798a;

    font-size:6px;
}

/* ============================================================
   THEME FLOATING
============================================================ */

.npa5-theme{
    position:fixed;

    right:16px;
    bottom:16px;

    z-index:100;
}

.npa5-theme .np-theme-toggle{
    width:40px;
    height:40px;

    border-radius:50%;

    background:var(--np-surface);

    box-shadow:
        0 13px 36px rgba(0,0,0,.18);
}

.npa5-theme>span{
    position:absolute;

    right:48px;
    top:50%;

    padding:6px 8px;

    transform:
        translateY(-50%)
        translateX(4px);

    border:1px solid var(--np-border);
    border-radius:8px;

    color:var(--np-text);

    background:var(--np-surface);

    font-size:6px;

    white-space:nowrap;

    opacity:0;
    visibility:hidden;

    transition:.15s ease;
}

.npa5-theme:hover>span{
    opacity:1;
    visibility:visible;

    transform:translateY(-50%);
}

/* ============================================================
   LIGHT
============================================================ */

:root[data-theme="light"] body.npa5-body{
    background:
        radial-gradient(
            circle at 52% -15%,
            rgba(80,78,228,.07),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #edf3f9,
            #eaf1f7
        );
}

:root[data-theme="light"] .npa5-header{
    border-bottom-color:#d7e1ea;

    background:rgba(248,250,253,.94);
}

:root[data-theme="light"] .npa5-card{
    border-color:#d4dfe9;

    background:#fff;

    box-shadow:
        0 22px 60px rgba(40,60,82,.07);
}

:root[data-theme="light"] .npa5-provider,
:root[data-theme="light"] .npa5-field>input,
:root[data-theme="light"] .npa5-field .np-password-field>input,
:root[data-theme="light"] .npa5-captcha{
    border-color:#d4dee8;

    background:#f7fafc;
}

:root[data-theme="light"] .npa5-p360{
    border-color:#cad8e6;

    background:#f7f9fc;
}

:root[data-theme="light"] .npa5-stream-item{
    border-color:#d5e0e9;

    background:#fff;

    box-shadow:
        0 8px 22px rgba(39,59,80,.04);
}


:root[data-theme="light"] .npa5-p360-primary{
    border-color:#c2d4ff;

    background:
        linear-gradient(
            135deg,
            rgba(49,112,255,.075),
            rgba(111,79,255,.055)
        ),
        #f8faff;
}

:root[data-theme="light"] .npa5-p360-primary:hover{
    border-color:#91b0ff;

    background:
        linear-gradient(
            135deg,
            rgba(49,112,255,.11),
            rgba(111,79,255,.08)
        ),
        #ffffff;
}

/* ============================================================
   LAPTOP LOW HEIGHT
============================================================ */

@media(max-height:760px) and (min-width:981px){

    .npa5-shell{
        grid-template-rows:
            52px
            minmax(0,1fr);
    }

    .npa5-main{
        grid-template-columns:
            minmax(420px,1fr)
            minmax(520px,.95fr);
    }

    .npa5-preview{
        padding:
            13px
            clamp(18px,2.5vw,30px);

        gap:7px;
    }

    .npa5-preview-media{
        border-radius:15px;
    }

    .npa5-preview-copy h1{
        font-size:34px;
    }

    .npa5-preview-stream{
        gap:5px;
    }

    .npa5-stream-item{
        min-height:52px;
    }

    .npa5-auth-holder{
        align-items:flex-start;

        padding-top:12px;
        padding-bottom:12px;
    }

    .npa5-card{
        padding:16px;
    }

    .npa5-card-head{
        margin-bottom:9px;
    }

    .npa5-card-head h2{
        font-size:24px;
    }

    .npa5-p360-primary{
        min-height:51px;

        padding-top:6px;
        padding-bottom:6px;
    }

    .npa5-p360-primary-icon{
        width:34px;
        height:34px;
    }

    .npa5-provider-grid{
        grid-auto-rows:43px;
    }

    .npa5-provider{
        min-height:43px;
        height:43px;
    }

    .npa5-divider{
        margin:7px 0;
    }

    .npa5-field>input,
    .npa5-field .np-password-field>input{
        height:35px;
    }

    .npa5-primary{
        height:35px;
    }
}

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

@media(max-width:980px){

    body.npa5-body{
        overflow:auto;
    }

    .npa5-shell{
        height:auto;
        min-height:100vh;
        min-height:100dvh;

        grid-template-rows:
            54px
            auto;
    }

    .npa5-main{
        display:block;

        overflow:visible;
    }

    .npa5-preview{
        display:block;

        padding:14px;

        border-right:0;
        border-bottom:1px solid var(--np-border);
    }

    .npa5-preview-media{
        height:265px;
    }

    .npa5-preview-stream{
        margin-top:8px;
    }

    .npa5-preview-foot{
        margin-top:8px;
    }

    .npa5-auth-scroll{
        overflow:visible;
    }

    .npa5-auth-holder{
        min-height:auto;

        padding:14px;
    }

}

/* ============================================================
   MOBILE
============================================================ */

@media(max-width:680px){

    .npa5-brand-copy small{
        display:none;
    }

    .npa5-explore{
        font-size:8px;
    }

    .npa5-preview{
        padding:10px;
    }

    .npa5-preview-media{
        height:265px;

        border-radius:15px;
    }

    .npa5-preview-copy{
        left:17px;
        right:17px;
        bottom:20px;
        top:auto;

        transform:none;
    }

    .npa5-preview-copy h1{
        font-size:29px;
    }

    .npa5-live-pill{
        right:10px;
        top:10px;
    }

    .npa5-preview-stream{
        display:none;
    }

    .npa5-preview-foot{
        padding:0 3px;
    }

    .npa5-auth-holder{
        padding:9px;
    }

    .npa5-card{
        padding:14px;

        border-radius:15px;
    }

    .npa5-provider-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .npa5-form-grid{
        grid-template-columns:1fr;
    }

    .npa5-captcha{
        grid-template-columns:1fr;
    }

    .npa5-captcha input{
        height:35px;
    }
.npa5-theme{
        right:11px;
        bottom:11px;
    }

}


@media(max-width:680px){

    .npa5-p360-primary{
        grid-template-columns:
            36px
            minmax(0,1fr)
            30px;

        min-height:55px;
    }

    .npa5-p360-primary-copy em{
        white-space:normal;
    }

}

/* ============================================================
   VERY SMALL
============================================================ */

@media(max-width:410px){

    .npa5-explore{
        font-size:0;
    }

    .npa5-explore>span{
        font-size:15px;
    }

    .npa5-provider-grid{
        grid-template-columns:1fr;
    }

}


/* ============================================================
   BEDEEL LOGIN R6
   Social Premium Login
   Login != Register
============================================================ */

/* ------------------------------------------------------------
   AREA DERECHA
------------------------------------------------------------ */

.npa5-auth{
    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 48% 34%,
            rgba(55,110,255,.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 78% 70%,
            rgba(109,80,255,.045),
            transparent 31%
        );
}

.npa5-auth::before{
    content:"";

    width:390px;
    height:390px;

    position:absolute;

    left:50%;
    top:48%;

    transform:translate(-50%,-50%);

    border:1px solid
        color-mix(
            in srgb,
            var(--np-border) 40%,
            transparent
        );

    border-radius:50%;

    opacity:.18;

    pointer-events:none;
}

.npa5-auth::after{
    content:"";

    width:520px;
    height:520px;

    position:absolute;

    left:50%;
    top:48%;

    transform:translate(-50%,-50%);

    border:1px solid
        color-mix(
            in srgb,
            var(--np-border) 32%,
            transparent
        );

    border-radius:50%;

    opacity:.11;

    pointer-events:none;
}

.npa5-auth-scroll{
    position:relative;

    z-index:2;
}

.npa5-auth-holder{
    align-items:center;

    padding:
        clamp(18px,3vh,30px)
        clamp(28px,4vw,54px);
}

/* ------------------------------------------------------------
   LOGIN SIN TARJETA EXTERIOR
------------------------------------------------------------ */

.npa6-login{
    width:100%;
    max-width:490px;

    position:relative;

    display:grid;

    align-content:center;
}

.npa6-head{
    margin-bottom:20px;
}

.npa6-kicker{
    display:block;

    margin-bottom:7px;

    color:#69a9ff;

    font-size:9px;
    font-weight:900;

    letter-spacing:.11em;
}

.npa6-head h2{
    margin:0;

    color:var(--np-text);

    font-size:34px;
    line-height:1;

    letter-spacing:-.045em;
}

.npa6-head p{
    margin:9px 0 0;

    color:var(--np-muted);

    font-size:12px;
    line-height:1.45;
}

/* ------------------------------------------------------------
   ALERT
------------------------------------------------------------ */

.npa6-alert{
    margin-bottom:14px;

    padding:10px 12px;

    border:1px solid var(--np-border);
    border-radius:10px;

    color:var(--np-text);

    background:
        color-mix(
            in srgb,
            var(--np-surface) 75%,
            transparent
        );

    font-size:10px;
}

/* ------------------------------------------------------------
   PACTOPIA360
------------------------------------------------------------ */

.npa6-p360{
    min-height:56px;

    display:grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        32px;

    align-items:center;

    gap:11px;

    padding:8px 9px 8px 10px;

    border:1px solid rgba(79,126,255,.65);
    border-radius:12px;

    color:var(--np-text);

    background:
        linear-gradient(
            135deg,
            rgba(49,113,255,.13),
            rgba(105,79,255,.075)
        );

    text-decoration:none;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.012);

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.npa6-p360:hover{
    transform:translateY(-1px);

    border-color:#6a92ff;

    background:
        linear-gradient(
            135deg,
            rgba(49,113,255,.19),
            rgba(105,79,255,.12)
        );

    box-shadow:
        0 12px 26px rgba(37,73,200,.10);
}

.npa6-p360-icon{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #347fff,
            #7054ff
        );

    box-shadow:
        0 7px 20px rgba(59,85,255,.24);

    font-size:13px;
    font-weight:950;
}

.npa6-p360-copy{
    min-width:0;

    display:grid;
}

.npa6-p360-copy strong{
    overflow:hidden;

    font-size:11px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.npa6-p360-copy small{
    margin-top:2px;

    color:var(--np-muted);

    font-size:8px;
}

.npa6-arrow{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border-radius:9px;

    color:#79bbff;

    background:
        color-mix(
            in srgb,
            var(--np-surface) 68%,
            transparent
        );

    font-size:14px;
}

/* ------------------------------------------------------------
   DIVISORES
------------------------------------------------------------ */

.npa6-divider{
    display:flex;
    align-items:center;

    gap:11px;

    margin:13px 0;

    color:var(--np-muted);

    font-size:8px;
}

.npa6-divider::before,
.npa6-divider::after{
    content:"";

    height:1px;

    flex:1;

    background:
        color-mix(
            in srgb,
            var(--np-border) 78%,
            transparent
        );
}

.npa6-divider-email{
    margin-top:15px;
    margin-bottom:13px;
}

/* ------------------------------------------------------------
   SOCIAL PROVIDERS
------------------------------------------------------------ */

.npa6-social-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:7px;
}

.npa6-social{
    min-width:0;
    height:45px;

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

    gap:8px;

    padding:0 10px;

    border:1px solid
        color-mix(
            in srgb,
            var(--np-border) 78%,
            transparent
        );

    border-radius:10px;

    color:var(--np-text);

    background:
        color-mix(
            in srgb,
            var(--np-surface) 48%,
            transparent
        );

    text-decoration:none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

button.npa6-social{
    width:100%;

    font-family:inherit;

    text-align:left;
}

.npa6-social.is-ready:hover{
    transform:translateY(-1px);

    border-color:
        color-mix(
            in srgb,
            #4d91ff 55%,
            var(--np-border)
        );

    background:
        color-mix(
            in srgb,
            var(--np-surface) 82%,
            transparent
        );
}

.npa6-social.is-pending{
    opacity:.46;

    cursor:not-allowed;
}

.npa6-social-icon{
    width:24px;
    height:24px;

    flex:0 0 24px;

    display:grid;
    place-items:center;
}

.npa6-social-icon svg,
.npa6-social-icon img{
    width:21px;
    height:21px;
}

.npa6-social strong{
    overflow:hidden;

    font-size:9px;
    font-weight:750;

    white-space:nowrap;
    text-overflow:ellipsis;
}

/* ------------------------------------------------------------
   FORMULARIO
------------------------------------------------------------ */

.npa6-form{
    display:grid;

    gap:13px;
}

.npa6-field{
    display:grid;

    gap:6px;
}

.npa6-field>span{
    color:var(--np-text);

    font-size:9px;
    font-weight:800;
}

.npa6-control{
    height:47px;

    position:relative;

    display:grid;

    grid-template-columns:
        35px
        minmax(0,1fr);

    align-items:center;

    overflow:hidden;

    border:1px solid
        color-mix(
            in srgb,
            var(--np-border) 92%,
            transparent
        );

    border-radius:11px;

    background:
        color-mix(
            in srgb,
            var(--np-surface) 58%,
            transparent
        );

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.npa6-control:focus-within{
    border-color:#468cff;

    background:
        color-mix(
            in srgb,
            var(--np-surface) 82%,
            transparent
        );

    box-shadow:
        0 0 0 3px rgba(70,140,255,.07);
}

.npa6-control-icon{
    width:35px;
    height:100%;

    display:grid;
    place-items:center;

    color:#6c9ed5;

    font-size:12px;
    font-weight:700;
}

.npa6-lock{
    font-size:16px;
}

.npa6-control>input{
    width:100%;
    height:100%;

    padding:0 12px 0 0;

    border:0;
    outline:0;

    color:var(--np-text);

    background:transparent;

    font-family:inherit;
    font-size:11px;
}

.npa6-control>input::placeholder{
    color:var(--np-muted);
}

/* PASSWORD */

.npa6-control.np-password-field{
    grid-template-columns:
        35px
        minmax(0,1fr);
}

.npa6-control.np-password-field>input{
    padding-right:44px !important;
}

.npa6-control .np-password-toggle{
    right:5px;

    width:34px;
    height:34px;
}

.npa6-control .np-eye{
    width:17px;
    height:17px;
}

/* ------------------------------------------------------------
   REMEMBER
------------------------------------------------------------ */

.npa6-options{
    display:flex;
    align-items:center;

    margin-top:-2px;
}

.npa6-remember{
    display:flex;
    align-items:center;

    gap:7px;

    color:var(--np-muted);

    font-size:8px;

    cursor:pointer;
}

.npa6-remember input{
    width:15px;
    height:15px;

    margin:0;

    accent-color:#347fff;
}

/* ------------------------------------------------------------
   SUBMIT
------------------------------------------------------------ */

.npa6-submit{
    width:100%;
    height:47px;

    display:grid;

    grid-template-columns:
        1fr
        auto;

    align-items:center;

    padding:0 15px 0 19px;

    border:0;
    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            110deg,
            #2f7fff 0%,
            #526bff 48%,
            #7154ff 100%
        );

    box-shadow:
        0 12px 28px rgba(54,79,255,.16);

    font-family:inherit;
    font-size:10px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease;
}

.npa6-submit:hover{
    transform:translateY(-1px);

    filter:brightness(1.06);

    box-shadow:
        0 15px 32px rgba(54,79,255,.20);
}

.npa6-submit span{
    justify-self:center;

    padding-left:15px;
}

.npa6-submit b{
    font-size:15px;
    font-weight:500;
}

/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */

.npa6-footer{
    margin-top:17px;

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

    gap:5px;

    color:var(--np-muted);

    font-size:9px;
}

.npa6-footer a{
    color:#6fb4ff;

    font-weight:850;

    text-decoration:none;
}

.npa6-footer a:hover{
    text-decoration:underline;
}

/* ------------------------------------------------------------
   ERROR
------------------------------------------------------------ */

.npa6-error{
    color:#ff7c89;

    font-size:7px;
}

/* ============================================================
   LIGHT MODE
============================================================ */

:root[data-theme="light"] .npa5-auth{
    background:
        radial-gradient(
            circle at 48% 34%,
            rgba(55,110,255,.06),
            transparent 30%
        ),
        radial-gradient(
            circle at 78% 70%,
            rgba(109,80,255,.035),
            transparent 31%
        );
}

:root[data-theme="light"] .npa6-p360{
    border-color:#b8ccff;

    background:
        linear-gradient(
            135deg,
            rgba(49,113,255,.075),
            rgba(105,79,255,.05)
        );
}

:root[data-theme="light"] .npa6-social{
    border-color:#d3dee8;

    background:rgba(255,255,255,.72);
}

:root[data-theme="light"] .npa6-control{
    border-color:#ccd8e4;

    background:rgba(255,255,255,.78);
}

:root[data-theme="light"] .npa6-control:focus-within{
    border-color:#5c92ff;

    background:#fff;
}

/* ============================================================
   LAPTOP 1366 / LOW HEIGHT
============================================================ */

@media(max-height:760px) and (min-width:981px){

    .npa5-auth-holder{
        padding:
            12px
            clamp(26px,3vw,44px);
    }

    .npa6-login{
        max-width:470px;
    }

    .npa6-head{
        margin-bottom:13px;
    }

    .npa6-kicker{
        margin-bottom:4px;

        font-size:7px;
    }

    .npa6-head h2{
        font-size:29px;
    }

    .npa6-head p{
        margin-top:5px;

        font-size:9px;
    }

    .npa6-p360{
        min-height:49px;

        grid-template-columns:
            33px
            minmax(0,1fr)
            28px;

        padding-top:6px;
        padding-bottom:6px;
    }

    .npa6-p360-icon{
        width:33px;
        height:33px;
    }

    .npa6-p360-copy strong{
        font-size:9px;
    }

    .npa6-p360-copy small{
        font-size:6px;
    }

    .npa6-divider{
        margin:8px 0;

        font-size:6px;
    }

    .npa6-social-grid{
        gap:6px;
    }

    .npa6-social{
        height:40px;
    }

    .npa6-social strong{
        font-size:8px;
    }

    .npa6-divider-email{
        margin-top:9px;
        margin-bottom:8px;
    }

    .npa6-form{
        gap:9px;
    }

    .npa6-field{
        gap:4px;
    }

    .npa6-field>span{
        font-size:8px;
    }

    .npa6-control{
        height:40px;
    }

    .npa6-control>input{
        font-size:9px;
    }

    .npa6-submit{
        height:40px;

        font-size:9px;
    }

    .npa6-footer{
        margin-top:10px;

        font-size:7px;
    }

}

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

@media(max-width:980px){

    .npa6-login{
        max-width:520px;
    }

}

/* ============================================================
   MOBILE
============================================================ */

@media(max-width:680px){

    .npa5-auth::before,
    .npa5-auth::after{
        display:none;
    }

    .npa5-auth-holder{
        padding:22px 14px 26px;
    }

    .npa6-login{
        max-width:none;
    }

    .npa6-head h2{
        font-size:30px;
    }

    .npa6-social-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .npa6-social{
        height:46px;
    }

}

/* ============================================================
   VERY SMALL
============================================================ */

@media(max-width:410px){

    .npa6-head h2{
        font-size:27px;
    }

    .npa6-p360-copy small{
        display:none;
    }

}


/* ============================================================
   PACTOPIA360 INLINE LOGIN
============================================================ */

body.np-modal-open{
    overflow:hidden;
}

.npa6-p360{
    width:100%;

    font-family:inherit;
    text-align:left;

    cursor:pointer;
}

.np-p360-modal{
    position:fixed;

    inset:0;

    z-index:500;

    display:grid;
    place-items:center;

    padding:18px;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}

.np-p360-modal[hidden]{
    display:none;
}

.np-p360-modal.is-visible{
    opacity:1;
    visibility:visible;
}

.np-p360-modal-backdrop{
    position:absolute;

    inset:0;

    background:
        rgba(1,8,18,.72);

    backdrop-filter:
        blur(8px);
}

.np-p360-modal-card{
    width:100%;
    max-width:420px;

    position:relative;

    z-index:2;

    padding:20px;

    border:1px solid
        color-mix(
            in srgb,
            #4c82ff 34%,
            var(--np-border)
        );

    border-radius:17px;

    color:var(--np-text);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(104,78,255,.09),
            transparent 35%
        ),
        var(--np-surface);

    box-shadow:
        0 30px 90px rgba(0,0,0,.35);

    transform:
        translateY(8px)
        scale(.985);

    transition:
        transform .18s ease;
}

.np-p360-modal.is-visible .np-p360-modal-card{
    transform:
        translateY(0)
        scale(1);
}

.np-p360-modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;
}

.np-p360-modal-brand{
    display:flex;
    align-items:center;

    gap:10px;
}

.np-p360-modal-brand-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #327fff,
            #7054ff
        );

    box-shadow:
        0 8px 24px rgba(60,82,255,.22);

    font-size:13px;
    font-weight:950;
}

.np-p360-modal-brand>div{
    display:grid;
}

.np-p360-modal-brand small{
    color:#6daaff;

    font-size:6px;
    font-weight:900;

    letter-spacing:.10em;
}

.np-p360-modal-brand strong{
    margin-top:2px;

    font-size:15px;
}

.np-p360-modal-close{
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    padding:0;

    border:1px solid var(--np-border);
    border-radius:9px;

    color:var(--np-muted);

    background:
        var(--np-surface-2);

    font-size:18px;
    line-height:1;

    cursor:pointer;
}

.np-p360-modal-close:hover{
    color:var(--np-text);
}

.np-p360-modal-copy{
    margin:
        13px
        0
        15px;

    color:var(--np-muted);

    font-size:9px;
    line-height:1.5;
}

.np-p360-inline-form{
    display:grid;

    gap:11px;
}

.np-p360-inline-field{
    display:grid;

    gap:5px;
}

.np-p360-inline-field>span{
    color:var(--np-text);

    font-size:8px;
    font-weight:800;
}

.np-p360-inline-field>input,
.np-p360-inline-password{
    width:100%;
    height:43px;

    border:1px solid var(--np-border);
    border-radius:10px;

    color:var(--np-text);

    background:
        var(--np-surface-2);
}

.np-p360-inline-field>input{
    padding:0 11px;

    outline:0;

    font-family:inherit;
    font-size:10px;
}

.np-p360-inline-password{
    position:relative;
}

.np-p360-inline-password>input{
    width:100%;
    height:100%;

    padding:
        0
        43px
        0
        11px;

    border:0;
    outline:0;

    color:var(--np-text);

    background:transparent;

    font-family:inherit;
    font-size:10px;
}

.np-p360-inline-field>input:focus,
.np-p360-inline-password:focus-within{
    border-color:#4a8cff;

    box-shadow:
        0 0 0 3px rgba(74,140,255,.07);
}

.np-p360-inline-password .np-password-toggle{
    right:5px;
}

.np-p360-inline-remember{
    display:flex;
    align-items:center;

    gap:7px;

    color:var(--np-muted);

    font-size:8px;
}

.np-p360-inline-remember input{
    width:14px;
    height:14px;

    margin:0;

    accent-color:#347fff;
}

.np-p360-inline-message{
    padding:8px 9px;

    border-radius:8px;

    font-size:8px;
    line-height:1.4;
}

.np-p360-inline-message.is-error{
    color:#ff9aa6;

    background:
        rgba(255,84,105,.08);

    border:1px solid
        rgba(255,84,105,.18);
}

.np-p360-inline-message.is-success{
    color:#67dfb7;

    background:
        rgba(50,205,153,.08);

    border:1px solid
        rgba(50,205,153,.18);
}

.np-p360-inline-submit{
    width:100%;
    height:43px;

    display:grid;

    grid-template-columns:
        1fr
        auto;

    align-items:center;

    padding:
        0
        13px
        0
        17px;

    border:0;
    border-radius:10px;

    color:#fff;

    background:
        linear-gradient(
            110deg,
            #2f7fff,
            #5468ff 52%,
            #7154ff
        );

    font-family:inherit;
    font-size:9px;
    font-weight:900;

    cursor:pointer;
}

.np-p360-inline-submit span{
    justify-self:center;

    padding-left:12px;
}

.np-p360-inline-submit b{
    font-size:14px;
    font-weight:500;
}

.np-p360-inline-submit:disabled{
    opacity:.68;

    cursor:wait;
}

.np-p360-modal-foot{
    margin-top:11px;

    padding-top:10px;

    border-top:1px solid var(--np-border);

    color:var(--np-muted);

    text-align:center;

    font-size:6.5px;
}

/* LIGHT */

:root[data-theme="light"] .np-p360-modal-backdrop{
    background:
        rgba(32,49,68,.38);
}

:root[data-theme="light"] .np-p360-modal-card{
    border-color:#cbd9e8;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(104,78,255,.06),
            transparent 35%
        ),
        #ffffff;
}

:root[data-theme="light"] .np-p360-inline-field>input,
:root[data-theme="light"] .np-p360-inline-password{
    border-color:#cedae5;

    background:#f6f9fc;
}

/* MOBILE */

@media(max-width:520px){

    .np-p360-modal{
        align-items:end;

        padding:8px;
    }

    .np-p360-modal-card{
        max-width:none;

        border-radius:
            18px
            18px
            12px
            12px;
    }

}

/* ============================================================
   END AUTH R5
============================================================ */





/* ============================================================
   BEDEEL REGISTER R8
   P360 como opción de registro + distribución compacta sin scroll
============================================================ */

body.npa7-register-page .npa5-main{
    grid-template-columns:minmax(520px,1.02fr) minmax(500px,.98fr);
}

body.npa7-register-page .npa5-auth-scroll{
    width:100%;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
}

.npa7-preview{
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    gap:8px;
    padding:clamp(12px,2vh,20px) clamp(18px,2.4vw,30px);
    border-right:1px solid var(--np-border);
}

.npa7-hero{
    min-height:0;
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:
        radial-gradient(circle at 70% 20%,rgba(82,111,255,.34),transparent 34%),
        linear-gradient(145deg,#061326,#102d55 58%,#0f4d64);
    box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.npa7-hero>img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    filter:saturate(.88) contrast(1.04);
}

.npa7-hero-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(2,10,23,.94) 0%,rgba(2,10,23,.72) 46%,rgba(2,10,23,.22) 78%,rgba(2,10,23,.14)),
        linear-gradient(0deg,rgba(2,10,23,.30),transparent 36%);
}

.npa7-hero-copy{
    width:min(490px,72%);
    position:absolute;
    z-index:3;
    left:clamp(24px,2.8vw,40px);
    top:50%;
    transform:translateY(-54%);
}

.npa7-hero-copy>span{
    color:#7fb8ff;
    font-size:9px;
    font-weight:950;
    letter-spacing:.16em;
}

.npa7-hero-copy h1{
    margin:10px 0 10px;
    color:#fff;
    font-size:clamp(34px,3.8vw,58px);
    line-height:.95;
    letter-spacing:-.055em;
}

.npa7-hero-copy h1 strong{
    display:block;
    color:#66e0bb;
}

.npa7-hero-copy p{
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:13px;
    line-height:1.4;
}

.npa7-network{
    width:166px;
    height:166px;
    position:absolute;
    right:clamp(18px,2vw,28px);
    bottom:clamp(18px,2.4vh,28px);
    z-index:4;
    opacity:.94;
}

.npa7-network::before,
.npa7-network::after{
    content:"";
    position:absolute;
    inset:32px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:50%;
}

.npa7-network::after{
    inset:56px;
    border-color:rgba(101,214,183,.30);
}

.npa7-network-core{
    width:50px;
    height:50px;
    position:absolute;
    left:58px;
    top:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:16px;
    color:#fff;
    background:linear-gradient(145deg,#2f82ff,#7655ff);
    box-shadow:0 16px 38px rgba(42,93,255,.34);
    font-size:20px;
    font-weight:950;
}

.npa7-network-node{
    position:absolute;
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
    color:rgba(255,255,255,.82);
    background:rgba(5,18,36,.62);
    backdrop-filter:blur(10px);
    font-size:9px;
    font-weight:850;
    white-space:nowrap;
}

.npa7-network-node.is-one{left:0;top:24px;}
.npa7-network-node.is-two{right:0;top:12px;}
.npa7-network-node.is-three{right:0;bottom:18px;}
.npa7-network-node.is-four{left:0;bottom:16px;}

.npa7-preview-foot{
    min-height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--np-muted);
    font-size:9px;
    font-weight:850;
}

.npa7-preview-foot i{
    width:3px;
    height:3px;
    border-radius:50%;
    background:#4b8cff;
}

body.npa7-register-page .npa5-auth-holder{
    padding:clamp(10px,1.8vh,18px) clamp(16px,2.4vw,28px);
}

.npa7-register{
    width:100%;
    max-width:590px;
    margin:auto;
    padding:16px 16px 14px;
    border:1px solid var(--np-border);
    border-radius:18px;
    background:
        radial-gradient(circle at 100% 0%,rgba(104,74,255,.06),transparent 32%),
        var(--np-surface);
    box-shadow:0 24px 64px rgba(0,0,0,.12);
}

.npa7-head{
    margin-bottom:10px;
}

.npa7-kicker{
    display:block;
    margin-bottom:4px;
    color:#6ba8ff;
    font-size:9px;
    font-weight:950;
    letter-spacing:.12em;
}

.npa7-head h2{
    margin:0;
    color:var(--np-text);
    font-size:24px;
    line-height:1.02;
    letter-spacing:-.04em;
}

.npa7-head p{
    margin:4px 0 0;
    color:var(--np-muted);
    font-size:12px;
}

.npa7-alert{
    margin-bottom:10px;
    padding:10px 12px;
    border:1px solid rgba(74,140,255,.2);
    border-radius:10px;
    color:var(--np-text);
    background:rgba(74,140,255,.07);
    font-size:12px;
}

.npa7-divider{
    display:flex;
    align-items:center;
    gap:9px;
    margin:8px 0;
    color:var(--np-muted);
    font-size:10px;
}

.npa7-divider::before,
.npa7-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:var(--np-border);
}

.npa7-social-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.npa7-social{
    min-width:0;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 8px;
    border:1px solid var(--np-border);
    border-radius:11px;
    color:var(--np-text);
    background:var(--np-surface-2);
    text-decoration:none;
    transition:transform .15s ease,border-color .15s ease,background .15s ease;
}

button.npa7-social{
    width:100%;
    cursor:pointer;
    font-family:inherit;
}

.npa7-social.is-ready:hover{
    transform:translateY(-1px);
    border-color:#3e79b0;
    background:var(--np-surface-3);
}

.npa7-social.is-pending{
    opacity:.42;
    cursor:not-allowed;
}

.npa7-social-icon{
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    flex:0 0 18px;
}

.npa7-social-icon svg,
.npa7-social-icon img{
    width:18px;
    height:18px;
}

.npa7-social strong{
    min-width:0;
    overflow:hidden;
    font-size:10px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.npa7-social-p360{
    grid-column:span 2;
    justify-content:flex-start;
    padding:0 12px;
    border-color:color-mix(in srgb,#4b84ff 34%,var(--np-border));
    background:linear-gradient(110deg,rgba(47,126,255,.12),rgba(111,82,255,.07)),var(--np-surface-2);
}

.npa7-social-p360:hover{
    border-color:#4a8cff;
    background:linear-gradient(110deg,rgba(47,126,255,.17),rgba(111,82,255,.10)),var(--np-surface-2);
}

.npa7-p360-badge{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:8px;
    color:#fff;
    background:linear-gradient(145deg,#307fff,#7154ff);
    font-size:10px;
    font-weight:950;
    box-shadow:0 8px 18px rgba(49,103,255,.20);
}

.npa7-form{
    display:grid;
    gap:8px;
}

.npa7-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.npa7-field{
    min-width:0;
    display:grid;
    gap:4px;
}

.npa7-field>span{
    color:var(--np-text);
    font-size:10px;
    font-weight:850;
}

.npa7-field>input,
.npa7-control{
    width:100%;
    height:40px;
    border:1px solid var(--np-border);
    border-radius:10px;
    color:var(--np-text);
    background:var(--np-surface-2);
}

.npa7-field>input{
    padding:0 10px;
    outline:0;
    font-family:inherit;
    font-size:12px;
}

.npa7-control{
    position:relative;
}

.npa7-control>input{
    width:100%;
    height:100%;
    padding:0 38px 0 10px;
    border:0;
    outline:0;
    color:var(--np-text);
    background:transparent;
    font-family:inherit;
    font-size:12px;
}

.npa7-field>input:focus,
.npa7-control:focus-within{
    border-color:#4a8cff;
    box-shadow:0 0 0 3px rgba(74,140,255,.07);
}

.npa7-control .np-password-toggle{
    right:4px;
}

.npa7-password-note{
    display:flex;
    align-items:center;
    gap:5px;
    min-height:20px;
}

.npa7-password-note span{
    min-width:26px;
    height:20px;
    display:grid;
    place-items:center;
    padding:0 6px;
    border:1px solid var(--np-border);
    border-radius:999px;
    color:var(--np-muted);
    background:var(--np-surface-2);
    font-size:8px;
    font-weight:900;
    transition:.15s ease;
}

.npa7-password-note span.is-valid{
    color:#5fe0b5;
    border-color:rgba(63,211,162,.26);
    background:rgba(63,211,162,.07);
}

.npa7-match{
    min-height:12px;
    color:var(--np-muted);
    font-size:9px;
}

.npa7-match.is-valid{color:#5edcaf;}
.npa7-match.is-invalid{color:#ff7e8f;}

.npa7-captcha{
    min-height:42px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 112px;
    align-items:center;
    gap:8px;
    padding:6px 7px 6px 10px;
    border:1px solid var(--np-border);
    border-radius:10px;
    background:var(--np-surface-2);
}

.npa7-captcha strong{
    font-size:10px;
}

.npa7-captcha input{
    width:100%;
    height:30px;
    padding:0 7px;
    border:1px solid var(--np-border);
    border-radius:8px;
    outline:0;
    color:var(--np-text);
    background:var(--np-surface);
    text-align:center;
    font-family:inherit;
    font-size:10px;
}

.npa7-terms{
    display:flex;
    align-items:flex-start;
    gap:7px;
    color:var(--np-muted);
    font-size:10px;
    line-height:1.45;
}

.npa7-terms input{
    width:14px;
    height:14px;
    flex:0 0 14px;
    margin:0;
    accent-color:#347dff;
}

.npa7-terms a,
.npa7-terms-link{
    color:#6eaeff;
    text-decoration:none;
}

.npa7-submit{
    width:100%;
    height:42px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    padding:0 13px 0 17px;
    border:0;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(110deg,#2f7fff,#5468ff 52%,#7154ff);
    box-shadow:0 10px 25px rgba(58,81,255,.16);
    font-family:inherit;
    font-size:11px;
    font-weight:950;
    cursor:pointer;
}

.npa7-submit span{
    justify-self:center;
    padding-left:12px;
}

.npa7-submit b{
    font-size:14px;
    font-weight:500;
}

.npa7-footer{
    margin-top:8px;
    display:flex;
    justify-content:center;
    gap:5px;
    color:var(--np-muted);
    font-size:10px;
}

.npa7-footer a{
    color:#68b6ff;
    font-weight:900;
    text-decoration:none;
}

.npa7-error{
    color:#ff798a;
    font-size:9px;
}

:root[data-theme="light"] .npa7-hero{
    box-shadow:0 24px 64px rgba(41,63,88,.14);
}

:root[data-theme="light"] .npa7-register{
    border-color:#d7e1eb;
    background:#fff;
    box-shadow:0 24px 64px rgba(41,63,88,.10);
}

:root[data-theme="light"] .npa7-social,
:root[data-theme="light"] .npa7-field>input,
:root[data-theme="light"] .npa7-control,
:root[data-theme="light"] .npa7-captcha,
:root[data-theme="light"] .npa7-password-note span{
    border-color:#d7e1eb;
    background:#f7f9fc;
}

@media (min-width:981px) and (max-height:860px){
    .npa7-preview{
        padding:10px 18px;
    }

    .npa7-hero-copy h1{
        font-size:clamp(32px,3.4vw,50px);
    }

    .npa7-hero-copy p{
        font-size:12px;
    }

    .npa7-network{
        width:150px;
        height:150px;
    }

    .npa7-network::before{
        inset:28px;
    }

    .npa7-network::after{
        inset:48px;
    }

    .npa7-network-core{
        width:46px;
        height:46px;
        left:52px;
        top:52px;
    }

    .npa7-network-node{
        font-size:8px;
        padding:5px 8px;
    }

    body.npa7-register-page .npa5-auth-holder{
        padding:8px 18px;
    }

    .npa7-register{
        max-width:575px;
        padding:14px 14px 12px;
    }

    .npa7-head h2{
        font-size:22px;
    }

    .npa7-head p,
    .npa7-alert,
    .npa7-field>input,
    .npa7-control>input,
    .npa7-submit,
    .npa7-footer,
    .npa7-terms{
        font-size:10px;
    }

    .npa7-social{
        height:42px;
    }

    .npa7-social strong{
        font-size:9px;
    }

    .npa7-field>input,
    .npa7-control{
        height:38px;
    }

    .npa7-captcha{
        min-height:40px;
    }

    .npa7-submit{
        height:40px;
    }
}

@media(max-width:980px){
    body.npa7-register-page .npa5-main{
        display:block;
    }

    .npa7-preview{
        display:block;
        padding:14px;
        border-right:0;
        border-bottom:1px solid var(--np-border);
    }

    .npa7-hero{
        height:310px;
    }

    .npa7-preview-foot{
        margin-top:8px;
    }

    .npa7-social-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .npa7-social-p360{
        grid-column:span 3;
    }
}

@media(max-width:680px){
    .npa7-preview{
        padding:9px;
    }

    .npa7-hero{
        height:285px;
        border-radius:16px;
    }

    .npa7-hero-copy{
        width:76%;
        left:18px;
        top:auto;
        bottom:24px;
        transform:none;
    }

    .npa7-hero-copy h1{
        font-size:34px;
    }

    .npa7-network{
        width:132px;
        height:132px;
        right:10px;
        bottom:7px;
        opacity:.72;
    }

    .npa7-network::before{
        inset:24px;
    }

    .npa7-network::after{
        inset:42px;
    }

    .npa7-network-core{
        width:40px;
        height:40px;
        left:46px;
        top:46px;
        border-radius:14px;
    }

    .npa7-network-node{
        font-size:6px;
        padding:5px 7px;
    }

    .npa7-preview-foot{
        display:none;
    }

    .npa7-register{
        padding:14px;
        border-radius:15px;
    }

    .npa7-social-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .npa7-social-p360{
        grid-column:span 2;
    }

    .npa7-form-grid{
        grid-template-columns:1fr;
    }

    .npa7-captcha{
        grid-template-columns:1fr;
    }

    .npa7-captcha input{
        height:34px;
    }
}

@media(max-width:410px){
    .npa7-network{
        display:none;
    }

    .npa7-hero-copy{
        width:auto;
        right:18px;
    }

    .npa7-hero-copy h1{
        font-size:31px;
    }

    .npa7-social-grid{
        grid-template-columns:1fr 1fr;
    }

    .npa7-social-p360{
        grid-column:span 2;
    }
}

/* BEDEEL REGISTER R8.2 START */
/*
   Ajuste final de proporción:
   - conserva cero scroll en escritorio/laptop
   - recupera legibilidad
   - centra visualmente la tarjeta
   - no modifica Login ni OAuth
*/

@media (min-width:981px) and (max-height:760px){

    body.npa7-register-page .npa5-auth-holder{
        padding:8px 18px;
    }

    .npa7-register{
        max-width:590px;
        padding:15px 16px 13px;
        border-radius:18px;
    }

    .npa7-head{
        margin-bottom:8px;
    }

    .npa7-kicker{
        margin-bottom:3px;
        font-size:8.5px;
    }

    .npa7-head h2{
        font-size:23px;
        line-height:1.04;
    }

    .npa7-head p{
        margin-top:3px;
        font-size:11px;
    }

    .npa7-divider{
        margin:7px 0;
        font-size:9.5px;
    }

    .npa7-social-grid{
        gap:7px;
    }

    .npa7-social{
        height:41px;
        border-radius:10px;
    }

    .npa7-social strong{
        font-size:9.5px;
    }

    .npa7-social-icon,
    .npa7-social-icon svg,
    .npa7-social-icon img{
        width:18px;
        height:18px;
    }

    .npa7-p360-badge{
        width:24px;
        height:24px;
        border-radius:8px;
        font-size:10px;
    }

    .npa7-form{
        gap:7px;
    }

    .npa7-form-grid{
        gap:7px;
    }

    .npa7-field{
        gap:4px;
    }

    .npa7-field>span{
        font-size:9.5px;
    }

    .npa7-field>input,
    .npa7-control{
        height:37px;
        border-radius:9px;
    }

    .npa7-field>input,
    .npa7-control>input{
        font-size:10.5px;
    }

    .npa7-password-note{
        min-height:18px;
        gap:5px;
    }

    .npa7-password-note span{
        min-width:24px;
        height:18px;
        padding:0 5px;
        font-size:7.5px;
    }

    .npa7-match{
        min-height:10px;
        font-size:8.5px;
    }

    .npa7-captcha{
        min-height:38px;
        padding:5px 7px 5px 10px;
        border-radius:9px;
    }

    .npa7-captcha strong{
        font-size:9.5px;
    }

    .npa7-captcha input{
        height:28px;
        font-size:9.5px;
    }

    .npa7-terms{
        gap:6px;
        font-size:9.5px;
        line-height:1.35;
    }

    .npa7-terms input{
        width:13px;
        height:13px;
        flex-basis:13px;
    }

    .npa7-submit{
        height:39px;
        border-radius:9px;
        font-size:10.5px;
    }

    .npa7-footer{
        margin-top:6px;
        font-size:9.5px;
    }

    .npa7-preview{
        gap:7px;
        padding:8px 16px 9px;
    }

    .npa7-hero{
        border-radius:18px;
    }

    .npa7-hero-copy{
        left:32px;
        width:min(500px,74%);
    }

    .npa7-hero-copy>span{
        font-size:8.5px;
    }

    .npa7-hero-copy h1{
        margin:8px 0 8px;
        font-size:clamp(34px,3.45vw,52px);
        line-height:.97;
    }

    .npa7-hero-copy p{
        font-size:11.5px;
    }

    .npa7-network{
        width:150px;
        height:150px;
        right:18px;
        bottom:16px;
    }

    .npa7-network::before{
        inset:29px;
    }

    .npa7-network::after{
        inset:49px;
    }

    .npa7-network-core{
        width:46px;
        height:46px;
        left:52px;
        top:52px;
        border-radius:14px;
        font-size:18px;
    }

    .npa7-network-node{
        padding:5px 8px;
        font-size:7.5px;
    }

    .npa7-preview-foot{
        min-height:20px;
        font-size:8.5px;
    }
}

/*
   Ajuste fino para alturas cercanas a 700px.
   Conserva tipografía legible y sólo recorta espacios.
*/
@media (min-width:981px) and (max-height:705px){

    body.npa7-register-page .npa5-auth-holder{
        padding-top:6px;
        padding-bottom:6px;
    }

    .npa7-register{
        padding:13px 15px 11px;
    }

    .npa7-head{
        margin-bottom:7px;
    }

    .npa7-divider{
        margin:6px 0;
    }

    .npa7-social{
        height:40px;
    }

    .npa7-form{
        gap:6px;
    }

    .npa7-field>input,
    .npa7-control{
        height:36px;
    }

    .npa7-captcha{
        min-height:36px;
    }

    .npa7-submit{
        height:38px;
    }

    .npa7-preview{
        padding-top:7px;
        padding-bottom:7px;
    }
}

/*
   Evita scroll interno por pocos píxeles en escritorio.
   El contenido sigue centrado verticalmente.
*/
@media (min-width:981px){
    body.npa7-register-page .npa5-auth-scroll{
        overflow-y:hidden;
    }

    body.npa7-register-page .npa5-auth-holder{
        min-height:100%;
        align-items:center;
    }
}
/* BEDEEL REGISTER R8.2 END */

/* BEDEEL REGISTER R8.3 START */
/*
   Cuadrado final:
   - no cambia tamaños
   - no cambia tipografías
   - no cambia flujos
   - corrige el centrado vertical real del panel de registro
*/
@media (min-width:981px){

    body.npa7-register-page .npa5-auth{
        min-height:0;
    }

    body.npa7-register-page .npa5-auth-scroll{
        height:100%;
        min-height:0;
        overflow-y:hidden;
    }

    body.npa7-register-page .npa5-auth-holder{
        width:100%;
        height:100%;
        min-height:0;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    body.npa7-register-page .npa7-register{
        margin:0 auto;
    }
}
/* BEDEEL REGISTER R8.3 END */

/* BEDEEL REGISTER R8.4 START */
/*
   Alineación interna final del Registro.
   No modifica tamaños globales, tipografías ni flujos.
*/

@media (min-width:981px){

    .npa7-register{
        display:grid;
        grid-template-columns:minmax(0,1fr);
        align-content:center;
    }

    .npa7-register > *{
        min-width:0;
        width:100%;
    }

    .npa7-head,
    .npa7-divider,
    .npa7-form,
    .npa7-footer,
    .npa7-social-grid{
        width:100%;
        margin-left:0;
        margin-right:0;
    }

    /*
       7 proveedores en una sola línea:
       PACTOPIA360 + Google + Microsoft + LinkedIn + Facebook + Apple + TikTok
    */
    .npa7-social-grid{
        grid-template-columns:repeat(7,minmax(0,1fr));
        align-items:stretch;
    }

    .npa7-social-p360{
        grid-column:auto;
        justify-content:center;
        padding-left:7px;
        padding-right:7px;
    }

    .npa7-social{
        width:100%;
        justify-content:center;
        padding-left:6px;
        padding-right:6px;
    }

    .npa7-social strong{
        text-align:center;
    }

    /*
       Mantener icono + texto centrados y con idéntica altura visual.
    */
    .npa7-social-icon{
        flex:0 0 18px;
    }

    .npa7-social-p360 .npa7-social-icon{
        flex-basis:24px;
    }

    /*
       Retícula única del formulario.
    */
    .npa7-form-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:8px;
        row-gap:7px;
    }

    .npa7-field{
        width:100%;
    }

    .npa7-field>input,
    .npa7-control{
        width:100%;
    }

    /*
       Elementos de ancho completo exactamente a la misma guía.
    */
    .npa7-password-note,
    .npa7-captcha,
    .npa7-terms,
    .npa7-submit{
        width:100%;
    }

    /*
       CAPTCHA: texto e input balanceados respecto al formulario.
    */
    .npa7-captcha{
        grid-template-columns:minmax(0,1fr) 120px;
    }

    .npa7-captcha input{
        justify-self:stretch;
    }

    /*
       Footer centrado sobre el mismo eje de toda la tarjeta.
    */
    .npa7-footer{
        align-items:center;
        text-align:center;
    }
}

/*
   En laptop de poca altura conservamos la misma retícula interna.
*/
@media (min-width:981px) and (max-height:760px){

    .npa7-social-grid{
        gap:6px;
    }

    .npa7-social{
        padding-left:5px;
        padding-right:5px;
    }

    .npa7-social strong{
        font-size:8.5px;
    }

    .npa7-social-p360 strong{
        font-size:8px;
    }
}

/*
   Tablet: 4 + 3, pero centrado.
*/
@media (min-width:681px) and (max-width:980px){

    .npa7-social-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .npa7-social-p360{
        grid-column:auto;
    }

    .npa7-social-grid > :nth-child(5){
        grid-column:2;
    }
}

/*
   Móvil: dos columnas consistentes.
*/
@media (max-width:680px){

    .npa7-social-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .npa7-social-p360{
        grid-column:auto;
    }
}
/* BEDEEL REGISTER R8.4 END */

/* BEDEEL REGISTER R8.5 START */
/*
   Ajuste final de proveedores:
   - 4 arriba / 3 abajo centrados
   - sin truncar nombres
   - alineación horizontal con formulario
   - sin cambiar tamaños globales
*/

@media (min-width:981px){

    .npa7-social-grid{
        display:grid;
        grid-template-columns:repeat(8,minmax(0,1fr));
        gap:8px;
        align-items:stretch;
    }

    .npa7-social-grid > *{
        grid-column:span 2;
        min-width:0;
    }

    /* Segunda fila centrada: deja 1 columna vacía a cada lado */
    .npa7-social-grid > :nth-child(5){
        grid-column:2 / span 2;
    }

    .npa7-social-grid > :nth-child(6){
        grid-column:4 / span 2;
    }

    .npa7-social-grid > :nth-child(7){
        grid-column:6 / span 2;
    }

    .npa7-social-p360{
        grid-column:span 2;
    }

    .npa7-social{
        width:100%;
        justify-content:center;
        padding-left:9px;
        padding-right:9px;
        gap:7px;
    }

    .npa7-social strong{
        overflow:visible;
        text-overflow:clip;
        white-space:nowrap;
        font-size:9px;
    }

    .npa7-social-p360 strong{
        font-size:8.5px;
    }

    .npa7-social-icon{
        flex:0 0 18px;
    }

    .npa7-social-p360 .npa7-social-icon{
        flex-basis:24px;
    }

    /*
       Misma guía horizontal para redes, divisores y formulario.
    */
    .npa7-social-grid,
    .npa7-divider,
    .npa7-form-grid,
    .npa7-password-note,
    .npa7-captcha,
    .npa7-terms,
    .npa7-submit,
    .npa7-footer{
        width:100%;
        margin-left:0;
        margin-right:0;
    }

    .npa7-form-grid{
        column-gap:8px;
        row-gap:7px;
    }

    .npa7-captcha{
        grid-template-columns:minmax(0,1fr) 118px;
    }
}

@media (min-width:981px) and (max-height:760px){

    .npa7-social-grid{
        gap:6px 7px;
    }

    .npa7-social{
        height:39px;
    }

    .npa7-social strong{
        font-size:8.5px;
    }

    .npa7-social-p360 strong{
        font-size:8px;
    }
}

/* Tablet */
@media (min-width:681px) and (max-width:980px){

    .npa7-social-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .npa7-social-grid > *{
        grid-column:auto;
    }

    .npa7-social-grid > :nth-child(5){
        grid-column:1;
    }

    .npa7-social-grid > :nth-child(6){
        grid-column:2;
    }

    .npa7-social-grid > :nth-child(7){
        grid-column:3;
    }
}

/* Mobile */
@media (max-width:680px){

    .npa7-social-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .npa7-social-grid > *{
        grid-column:auto;
    }
}
/* BEDEEL REGISTER R8.5 END */

/* BEDEEL REGISTER R8.6 START */
/*
   Alineación quirúrgica del formulario.
   No modifica redes, tamaños globales ni flujos.
*/

@media (min-width:981px){

    /* Divisor de correo perfectamente centrado y separado del formulario */
    .npa7-divider-email{
        margin-top:7px;
        margin-bottom:7px;
    }

    /* Dos columnas con la misma guía y mismas alturas internas */
    .npa7-form-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:8px;
        row-gap:7px;
        align-items:start;
    }

    .npa7-field{
        width:100%;
        min-width:0;
        align-content:start;
    }

    .npa7-field>span{
        display:flex;
        align-items:center;
        min-height:11px;
        line-height:1;
    }

    .npa7-field>input,
    .npa7-control{
        width:100%;
        margin:0;
    }

    /*
       El mensaje de coincidencia estaba reservando altura sólo
       en la columna derecha y hacía que el bloque pareciera chueco.
    */
    .npa7-match:empty{
        display:none;
        min-height:0;
    }

    .npa7-match:not(:empty){
        display:block;
        min-height:10px;
        margin-top:2px;
    }

    /*
       Reglas de contraseña alineadas a la misma guía izquierda
       y sin margen irregular.
    */
    .npa7-password-note{
        width:100%;
        min-height:18px;
        margin:0;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:5px;
    }

    /*
       CAPTCHA, términos y CTA comparten exactamente
       los mismos bordes izquierdo y derecho del formulario.
    */
    .npa7-captcha,
    .npa7-terms,
    .npa7-submit{
        width:100%;
        margin-left:0;
        margin-right:0;
    }

    .npa7-captcha{
        grid-template-columns:minmax(0,1fr) 118px;
        align-items:center;
    }

    .npa7-captcha strong{
        display:flex;
        align-items:center;
        min-height:28px;
        line-height:1.2;
    }

    .npa7-captcha input{
        width:100%;
        margin:0;
        align-self:center;
    }

    .npa7-terms{
        display:flex;
        align-items:center;
        min-height:14px;
        margin-top:0;
        margin-bottom:0;
        line-height:1.2;
    }

    .npa7-terms input{
        margin:0;
    }

    /* Ritmo vertical uniforme desde campos hasta CTA */
    .npa7-form{
        gap:7px;
    }
}

@media (min-width:981px) and (max-height:760px){

    .npa7-divider-email{
        margin-top:6px;
        margin-bottom:6px;
    }

    .npa7-form{
        gap:6px;
    }

    .npa7-form-grid{
        row-gap:6px;
    }

    .npa7-field>span{
        min-height:10px;
    }

    .npa7-password-note{
        min-height:17px;
    }

    .npa7-captcha strong{
        min-height:26px;
    }
}
/* BEDEEL REGISTER R8.6 END */

/* BEDEEL REGISTER R8.7 START */
/*
   Reglas de contraseña claras para usuario final.
   Conserva data-rule y el comportamiento actual del JS.
*/

.npa7-password-note{
    min-height:18px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px 10px;
    padding:0;
    margin:0;
}

.npa7-password-note span{
    min-width:0;
    width:auto;
    height:auto;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:0;
    border:0;
    border-radius:0;
    color:var(--np-muted);
    background:transparent;
    font-size:9px;
    font-weight:750;
    line-height:1.2;
}

.npa7-password-note span::before{
    content:"•";
    color:color-mix(in srgb,var(--np-muted) 75%,transparent);
    font-size:10px;
    line-height:1;
}

.npa7-password-note span.is-valid{
    color:#5fe0b5;
    border:0;
    background:transparent;
}

.npa7-password-note span.is-valid::before{
    content:"✓";
    color:#5fe0b5;
    font-weight:950;
}

@media (min-width:981px) and (max-height:760px){
    .npa7-password-note{
        min-height:17px;
        gap:4px 9px;
    }

    .npa7-password-note span{
        font-size:8.5px;
    }
}

@media (max-width:680px){
    .npa7-password-note{
        gap:5px 9px;
    }

    .npa7-password-note span{
        font-size:9px;
    }
}
/* BEDEEL REGISTER R8.7 END */

/* ============================================================
   BEDEEL UI R2 / AUTH IDENTITY START
============================================================ */

.npa5-brand-icon,
.npa7-network-core{
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb,var(--np-blue) 92%,#ffffff 8%),
            #6b5cff
        ) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    color:#fff !important;
    box-shadow:
        0 10px 28px rgba(23,104,255,.24),
        inset 0 1px 0 rgba(255,255,255,.18);
    font-weight:950 !important;
    letter-spacing:-.04em;
}

.npa5-brand-copy strong{
    font-size:15px;
    letter-spacing:-.02em;
}

.npa5-brand-copy small{
    opacity:.78;
}

.npa5-auth-holder{
    border-color:
        color-mix(
            in srgb,
            var(--np-border) 84%,
            var(--np-blue) 16%
        );
}

.npa6-kicker,
.npa7-kicker{
    color:
        color-mix(
            in srgb,
            var(--np-blue) 82%,
            var(--np-text) 18%
        ) !important;
    letter-spacing:.12em !important;
}

.npa6-head h2,
.npa7-head h2{
    letter-spacing:-.035em;
}

.npa6-p360{
    border-color:
        color-mix(
            in srgb,
            var(--np-border) 84%,
            var(--np-blue) 16%
        ) !important;
}

.npa6-submit,
.npa7-submit{
    background:
        linear-gradient(
            135deg,
            var(--np-blue),
            #675cff
        ) !important;
    box-shadow:0 10px 24px rgba(23,104,255,.18);
}

.npa6-social.is-ready:hover,
.npa7-social.is-ready:hover,
.npa6-p360:hover{
    border-color:
        color-mix(
            in srgb,
            var(--np-blue) 54%,
            var(--np-border)
        ) !important;
}

.npa5-preview-copy strong,
.npa7-hero-copy strong{
    color:#8fb7ff;
}

html[data-theme="light"] .npa5-preview-copy strong,
html[data-theme="light"] .npa7-hero-copy strong{
    color:#145fd6;
}

@media(max-width:680px){
    .npa5-brand-copy small{
        display:none;
    }
}

/* BEDEEL UI R2 / AUTH IDENTITY END */


/* BEDEEL_LOGIN_V8_FINAL */

/* ============================================================
   LOGIN V8
   Identidad visual alineada con Home publica
============================================================ */

body.npa8-login-page{
    --bd-coral:#ef6859;
    --bd-coral-soft:#ff8070;
    --bd-blue:#4489ff;
    --bd-teal:#34c89a;
    --bd-violet:#7565f7;

    margin:0;

    min-height:100vh;
    min-height:100dvh;

    overflow:hidden;

    background:#090a0c;
}

/* ------------------------------------------------------------
   SHELL
------------------------------------------------------------ */

.npa8-shell{
    width:100%;
    height:100vh;
    height:100dvh;

    display:grid;

    grid-template-rows:
        72px
        minmax(0,1fr);

    overflow:hidden;
}

/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */

.npa8-header{
    min-width:0;

    position:relative;
    z-index:100;

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

    gap:24px;

    padding:
        0
        clamp(20px,3vw,48px);

    border-bottom:
        1px solid
        rgba(255,255,255,.075);

    background:
        rgba(7,8,10,.92);

    backdrop-filter:
        blur(24px);
}

.npa8-brand{
    height:52px;

    display:flex;
    align-items:center;

    gap:10px;

    text-decoration:none;
}

.npa8-brand-symbol{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 34px rgba(0,0,0,.22);
}

.npa8-brand-symbol img{
    width:78%;
    height:78%;

    display:block;

    object-fit:contain;
}

.npa8-brand-wordmark{
    width:126px;
    height:46px;

    display:flex;
    align-items:center;
}

.npa8-brand-wordmark img{
    width:100%;
    height:auto;

    display:block;

    object-fit:contain;
}

.npa8-header-actions{
    display:flex;
    align-items:center;

    gap:16px;
}

.npa8-back-home{
    min-height:38px;

    display:flex;
    align-items:center;

    gap:7px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:999px;

    color:
        rgba(255,255,255,.68);

    background:
        rgba(255,255,255,.025);

    text-decoration:none;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.npa8-back-home span{
    color:var(--bd-coral);

    font-size:13px;
}

.npa8-back-home strong{
    font-size:10px;
    font-weight:800;
}

.npa8-back-home:hover{
    transform:translateY(-1px);

    color:#fff;

    border-color:
        rgba(239,104,89,.30);

    background:
        rgba(239,104,89,.07);
}

/* ------------------------------------------------------------
   LANGUAGE SWITCHER
------------------------------------------------------------ */

.npa8-header .bd-lang-switcher{
    display:flex;
    align-items:center;

    gap:7px;

    margin:0;
}

.npa8-header .bd-lang-button{
    width:auto;
    height:38px;

    position:relative;

    display:flex;
    align-items:center;

    gap:7px;

    padding:
        4px
        10px
        4px
        4px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:999px;

    color:
        rgba(255,255,255,.65);

    background:
        rgba(255,255,255,.035);

    text-decoration:none;

    cursor:pointer;

    pointer-events:auto;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.npa8-header .bd-lang-button:hover{
    transform:translateY(-1px);

    color:#fff;

    border-color:
        rgba(239,104,89,.38);

    background:
        rgba(255,255,255,.055);
}

.npa8-header .bd-lang-button.is-active{
    color:#fff;

    border-color:
        rgba(239,104,89,.70);

    background:
        linear-gradient(
            135deg,
            rgba(239,104,89,.16),
            rgba(239,104,89,.05)
        );

    box-shadow:
        0 0 0 2px
        rgba(239,104,89,.08);
}

.npa8-header .bd-lang-dot{
    width:27px;
    height:27px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;

    background:
        rgba(255,255,255,.07);

    font-size:8px;
    font-weight:900;
}

.npa8-header .bd-lang-button.is-active .bd-lang-dot{
    background:
        var(--bd-coral);
}

.npa8-header .bd-lang-name{
    position:static;

    transform:none;

    color:inherit;

    font-size:8px;
    font-weight:900;

    opacity:1;
}

/* ------------------------------------------------------------
   MAIN
------------------------------------------------------------ */

.npa8-main{
    min-width:0;
    min-height:0;

    display:grid;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(500px,.88fr);

    overflow:hidden;
}

/* ------------------------------------------------------------
   EXPERIENCE
------------------------------------------------------------ */

.npa8-experience{
    min-width:0;
    min-height:0;

    display:grid;

    grid-template-rows:
        minmax(0,1fr)
        auto
        auto;

    gap:12px;

    padding:
        clamp(18px,2.6vh,30px)
        clamp(22px,3vw,46px)
        17px;

    border-right:
        1px solid
        rgba(255,255,255,.07);

    background:
        radial-gradient(
            circle at 0 0,
            rgba(68,137,255,.10),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #101216,
            #0a0b0d 76%
        );
}

.npa8-experience-media{
    min-height:0;

    position:relative;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        24px;

    background:
        #111318;

    box-shadow:
        0 32px 90px
        rgba(0,0,0,.32);
}

.npa8-experience-media>img{
    width:100%;
    height:100%;

    position:absolute;
    inset:0;

    display:block;

    object-fit:cover;

    filter:
        saturate(.82)
        contrast(1.05)
        brightness(.76);

    transform:scale(1.015);
}

.npa8-shade{
    position:absolute;
    inset:0;

    z-index:1;

    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(68,137,255,.10),
            transparent 26%
        ),
        radial-gradient(
            circle at 70% 76%,
            rgba(52,200,154,.08),
            transparent 30%
        ),
        linear-gradient(
            90deg,
            rgba(5,7,10,.96) 0%,
            rgba(5,7,10,.84) 40%,
            rgba(5,7,10,.43) 72%,
            rgba(5,7,10,.52)
        );
}

.npa8-network-decoration{
    position:absolute;

    right:8%;
    top:20%;

    z-index:2;

    width:190px;
    height:190px;

    opacity:.55;
}

.npa8-network-decoration::before,
.npa8-network-decoration::after{
    content:"";

    position:absolute;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:50%;
}

.npa8-network-decoration::before{
    inset:20px;
}

.npa8-network-decoration::after{
    inset:58px;
}

.npa8-network-decoration span{
    width:9px;
    height:9px;

    position:absolute;

    border-radius:50%;

    box-shadow:
        0 0 24px
        currentColor;
}

.npa8-network-decoration .is-a{
    left:20px;
    top:72px;

    color:var(--bd-blue);

    background:currentColor;
}

.npa8-network-decoration .is-b{
    right:24px;
    top:36px;

    color:var(--bd-coral);

    background:currentColor;
}

.npa8-network-decoration .is-c{
    right:40px;
    bottom:28px;

    color:var(--bd-teal);

    background:currentColor;
}

.npa8-experience-content{
    max-width:
        min(720px,78%);

    position:absolute;

    left:
        clamp(28px,4vw,62px);

    top:50%;

    z-index:3;

    transform:
        translateY(-50%);
}

.npa8-kicker{
    display:inline-flex;

    margin-bottom:
        16px;

    color:
        var(--bd-coral-soft);

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}

.npa8-experience-content h1{
    max-width:
        700px;

    margin:
        0;

    color:#fff;

    font-size:
        clamp(
            43px,
            4.1vw,
            70px
        );

    line-height:
        .96;

    letter-spacing:
        -.055em;
}

.npa8-experience-content h1 strong{
    display:block;

    margin-top:
        4px;

    color:
        var(--bd-coral);

    font-weight:
        950;
}

.npa8-experience-content p{
    max-width:
        580px;

    margin:
        18px
        0
        0;

    color:
        rgba(255,255,255,.70);

    font-size:
        clamp(
            12px,
            1vw,
            15px
        );

    line-height:
        1.6;
}

.npa8-live{
    position:absolute;

    right:
        20px;

    top:
        20px;

    z-index:3;

    display:flex;
    align-items:center;

    gap:9px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        999px;

    background:
        rgba(7,8,10,.76);

    backdrop-filter:
        blur(16px);
}

.npa8-live>i{
    width:
        8px;

    height:
        8px;

    flex:
        0 0 8px;

    border-radius:
        50%;

    background:
        var(--bd-coral);

    box-shadow:
        0 0
        0
        5px
        rgba(239,104,89,.10);
}

.npa8-live span{
    display:flex;

    flex-direction:
        column;
}

.npa8-live strong{
    color:#fff;

    font-size:
        9px;
}

.npa8-live small{
    margin-top:
        2px;

    color:
        rgba(255,255,255,.46);

    font-size:
        7px;
}

/* ------------------------------------------------------------
   BUSINESS ACTIONS
------------------------------------------------------------ */

.npa8-business-actions{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        10px;
}

.npa8-business-actions>a{
    min-width:0;
    min-height:
        64px;

    display:grid;

    grid-template-columns:
        34px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:
        10px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        15px;

    color:#fff;

    background:
        rgba(255,255,255,.026);

    text-decoration:none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.npa8-business-actions>a:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(255,255,255,.14);

    background:
        rgba(255,255,255,.045);
}

.npa8-business-icon{
    width:
        34px;

    height:
        34px;

    display:grid;

    place-items:center;

    border-radius:
        10px;

    background:
        rgba(255,255,255,.06);

    font-size:
        14px;

    font-weight:
        900;
}

.npa8-business-actions .is-buy .npa8-business-icon{
    color:#ffb75f;

    background:
        rgba(255,183,95,.10);
}

.npa8-business-actions .is-sell .npa8-business-icon{
    color:#48d7a9;

    background:
        rgba(72,215,169,.10);
}

.npa8-business-actions .is-connect .npa8-business-icon{
    color:#8d80ff;

    background:
        rgba(141,128,255,.10);
}

.npa8-business-actions a>span:nth-child(2){
    min-width:0;

    display:flex;

    flex-direction:
        column;

    gap:
        3px;
}

.npa8-business-actions small{
    color:
        rgba(255,255,255,.44);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}

.npa8-business-actions strong{
    overflow:hidden;

    color:
        rgba(255,255,255,.90);

    font-size:
        9px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}

.npa8-business-actions b{
    color:
        rgba(255,255,255,.40);

    font-size:
        15px;
}

.npa8-experience-footer{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:
        20px;

    color:
        rgba(255,255,255,.35);

    font-size:
        8px;
}

.npa8-experience-footer>span{
    display:flex;

    align-items:center;

    gap:
        8px;
}

.npa8-experience-footer i{
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--bd-teal);

    box-shadow:
        0 0
        12px
        rgba(52,200,154,.42);
}

.npa8-experience-footer strong{
    color:
        rgba(255,255,255,.24);

    font-size:
        9px;

    letter-spacing:
        .16em;
}

/* ------------------------------------------------------------
   AUTH COLUMN
------------------------------------------------------------ */

.npa8-auth{
    min-width:0;
    min-height:0;

    position:relative;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(239,104,89,.045),
            transparent 26%
        ),
        #090a0c;
}

.npa8-auth::before{
    content:"";

    position:absolute;

    left:0;
    top:12%;

    width:1px;
    height:76%;

    background:
        linear-gradient(
            transparent,
            rgba(239,104,89,.22),
            transparent
        );
}

.npa8-auth-scroll{
    width:100%;
    height:100%;

    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:
        thin;
}

.npa8-auth-holder{
    width:100%;
    min-height:100%;

    display:flex;

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

    padding:
        clamp(30px,4.4vh,60px)
        clamp(40px,5vw,86px);
}

/* ------------------------------------------------------------
   ACTUAL LOGIN CONTENT
------------------------------------------------------------ */

body.npa8-login-page .npa6-login{
    width:
        min(100%,560px);

    margin:
        0
        auto;

    padding:
        0;
}

body.npa8-login-page .npa6-head{
    margin-bottom:
        22px;
}

body.npa8-login-page .npa6-kicker{
    display:block;

    margin-bottom:
        9px;

    color:
        var(--bd-coral);

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .15em;
}

body.npa8-login-page .npa6-head h2{
    margin:
        0;

    color:
        var(--np-text);

    font-size:
        clamp(
            36px,
            3vw,
            48px
        );

    line-height:
        .98;

    letter-spacing:
        -.045em;
}

body.npa8-login-page .npa6-head p{
    max-width:
        450px;

    margin:
        10px
        0
        0;

    color:
        var(--np-muted);

    font-size:
        12px;

    line-height:
        1.55;
}

/* ------------------------------------------------------------
   P360
------------------------------------------------------------ */

body.npa8-login-page .npa6-p360{
    width:
        100%;

    min-height:
        62px;

    display:grid;

    grid-template-columns:
        42px
        minmax(0,1fr)
        28px;

    align-items:center;

    gap:
        12px;

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        15px;

    color:
        var(--np-text);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.025)
        );

    cursor:pointer;

    text-align:left;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

body.npa8-login-page .npa6-p360:hover{
    transform:
        translateY(-1px);

    border-color:
        rgba(68,137,255,.34);

    background:
        linear-gradient(
            135deg,
            rgba(68,137,255,.09),
            rgba(255,255,255,.025)
        );
}

body.npa8-login-page .npa6-p360-icon{
    width:
        42px;

    height:
        42px;

    display:grid;

    place-items:center;

    border-radius:
        12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #4c73ff,
            #7459f5
        );

    font-size:
        16px;

    font-weight:
        950;

    box-shadow:
        0 10px 28px
        rgba(77,102,255,.20);
}

body.npa8-login-page .npa6-p360-copy{
    display:flex;

    flex-direction:
        column;

    gap:
        3px;
}

body.npa8-login-page .npa6-p360-copy strong{
    color:
        var(--np-text);

    font-size:
        11px;
}

body.npa8-login-page .npa6-p360-copy small{
    color:
        var(--np-muted);

    font-size:
        8px;
}

body.npa8-login-page .npa6-arrow{
    color:
        var(--bd-blue);

    font-size:
        16px;
}

/* ------------------------------------------------------------
   DIVIDER
------------------------------------------------------------ */

body.npa8-login-page .npa6-divider{
    display:grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:center;

    gap:
        11px;

    margin:
        17px
        0;
}

body.npa8-login-page .npa6-divider::before,
body.npa8-login-page .npa6-divider::after{
    content:"";

    height:
        1px;

    background:
        var(--np-border);
}

body.npa8-login-page .npa6-divider span{
    color:
        var(--np-muted);

    font-size:
        7px;
}

/* ------------------------------------------------------------
   SOCIAL
------------------------------------------------------------ */

body.npa8-login-page .npa6-social-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        9px;
}

body.npa8-login-page .npa6-social{
    min-width:0;
    min-height:
        48px;

    display:flex;

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

    gap:
        9px;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius:
        13px;

    color:
        var(--np-text);

    background:
        rgba(255,255,255,.025);

    text-decoration:none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        opacity .18s ease;
}

body.npa8-login-page a.npa6-social:hover{
    transform:
        translateY(-1px);

    border-color:
        rgba(239,104,89,.28);

    background:
        rgba(255,255,255,.045);
}

body.npa8-login-page .npa6-social-icon{
    width:
        24px;

    height:
        24px;

    flex:
        0 0 24px;

    display:grid;

    place-items:center;
}

body.npa8-login-page .npa6-social-icon svg{
    width:
        20px;

    height:
        20px;
}

body.npa8-login-page .npa6-social strong{
    overflow:hidden;

    font-size:
        9px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}

body.npa8-login-page .npa6-social.is-pending{
    opacity:
        .44;

    cursor:
        not-allowed;
}

/* ------------------------------------------------------------
   FORM
------------------------------------------------------------ */

body.npa8-login-page .npa6-divider-email{
    margin-top:
        18px;
}

body.npa8-login-page .npa6-form{
    display:grid;

    gap:
        13px;
}

body.npa8-login-page .npa6-field{
    display:grid;

    gap:
        7px;
}

body.npa8-login-page .npa6-field>span{
    color:
        var(--np-text);

    font-size:
        9px;

    font-weight:
        800;
}

body.npa8-login-page .npa6-control{
    min-height:
        52px;

    display:grid;

    grid-template-columns:
        28px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:
        7px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.018);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

body.npa8-login-page .npa6-control:focus-within{
    border-color:
        rgba(239,104,89,.52);

    background:
        rgba(239,104,89,.025);

    box-shadow:
        0 0 0
        3px
        rgba(239,104,89,.07);
}

body.npa8-login-page .npa6-control-icon{
    color:
        var(--bd-blue);

    font-size:
        12px;

    text-align:center;
}

body.npa8-login-page .npa6-control input{
    width:
        100%;

    height:
        50px;

    padding:
        0;

    border:
        0;

    outline:
        0;

    color:
        var(--np-text);

    background:
        transparent;

    font:
        inherit;

    font-size:
        11px;
}

body.npa8-login-page .npa6-control input::placeholder{
    color:
        color-mix(
            in srgb,
            var(--np-muted) 78%,
            transparent
        );
}

body.npa8-login-page .np-password-toggle{
    width:
        34px;

    height:
        34px;

    display:grid;

    place-items:center;

    border:
        0;

    border-radius:
        9px;

    color:
        var(--np-muted);

    background:
        transparent;

    cursor:pointer;
}

body.npa8-login-page .np-password-toggle:hover{
    color:
        var(--np-text);

    background:
        rgba(255,255,255,.04);
}

body.npa8-login-page .np-password-toggle svg{
    width:
        17px;

    height:
        17px;

    fill:none;

    stroke:currentColor;

    stroke-width:
        1.7;
}

/* ------------------------------------------------------------
   REMEMBER
------------------------------------------------------------ */

body.npa8-login-page .npa6-options{
    display:flex;

    align-items:center;
    justify-content:space-between;
}

body.npa8-login-page .npa6-remember{
    display:flex;

    align-items:center;

    gap:
        8px;

    color:
        var(--np-muted);

    font-size:
        8px;

    cursor:pointer;
}

body.npa8-login-page .npa6-remember input{
    width:
        16px;

    height:
        16px;

    accent-color:
        var(--bd-coral);
}

/* ------------------------------------------------------------
   SUBMIT
------------------------------------------------------------ */

body.npa8-login-page .npa6-submit{
    width:
        100%;

    min-height:
        53px;

    display:flex;

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

    gap:
        12px;

    margin-top:
        2px;

    border:
        0;

    border-radius:
        14px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--bd-coral),
            #f17867
        );

    box-shadow:
        0 16px 36px
        rgba(239,104,89,.18);

    cursor:pointer;

    font-size:
        10px;

    font-weight:
        900;

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;
}

body.npa8-login-page .npa6-submit:hover{
    transform:
        translateY(-1px);

    filter:
        brightness(1.04);

    box-shadow:
        0 20px 42px
        rgba(239,104,89,.24);
}

body.npa8-login-page .npa6-submit b{
    position:absolute;

    right:
        max(
            16px,
            calc(50% - 245px)
        );

    font-size:
        15px;
}

/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */

body.npa8-login-page .npa6-footer{
    display:flex;

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

    gap:
        5px;

    margin-top:
        14px;

    color:
        var(--np-muted);

    font-size:
        8px;
}

body.npa8-login-page .npa6-footer a{
    color:
        var(--bd-blue);

    font-weight:
        850;

    text-decoration:none;
}

body.npa8-login-page .npa6-footer a:hover{
    text-decoration:
        underline;
}

/* ------------------------------------------------------------
   LIGHT
------------------------------------------------------------ */

:root[data-theme="light"] body.npa8-login-page{
    background:
        #f3f6f9;
}

:root[data-theme="light"] .npa8-header{
    border-color:
        #dde3e9;

    background:
        rgba(250,252,254,.94);
}

:root[data-theme="light"] .npa8-experience{
    border-color:
        #dce3e9;

    background:
        linear-gradient(
            135deg,
            #edf2f6,
            #e6ecf1
        );
}

:root[data-theme="light"] .npa8-auth{
    background:
        #f8fafc;
}

:root[data-theme="light"] .npa8-header .bd-lang-button,
:root[data-theme="light"] .npa8-back-home{
    border-color:
        #d7dee5;

    color:
        #526171;

    background:
        #fff;
}

/* ------------------------------------------------------------
   THEME CONTROL
------------------------------------------------------------ */

.npa8-theme-control{
    position:fixed;

    right:
        18px;

    bottom:
        18px;

    z-index:
        140;
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */

@media(max-width:1180px){

    .npa8-main{
        grid-template-columns:
            minmax(0,1fr)
            minmax(440px,.94fr);
    }

    .npa8-experience-content{
        max-width:
            86%;
    }

    .npa8-experience-content h1{
        font-size:
            clamp(
                38px,
                4vw,
                54px
            );
    }

    .npa8-auth-holder{
        padding:
            28px
            34px;
    }
}

@media(max-width:940px){

    body.npa8-login-page{
        overflow:auto;
    }

    .npa8-shell{
        height:auto;
        min-height:100vh;
        min-height:100dvh;

        overflow:visible;
    }

    .npa8-main{
        min-height:0;

        display:block;

        overflow:visible;
    }

    .npa8-experience{
        min-height:
            460px;

        border-right:0;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }

    .npa8-experience-media{
        min-height:
            330px;
    }

    .npa8-auth{
        min-height:
            620px;
    }

    .npa8-auth-holder{
        padding:
            56px
            clamp(24px,8vw,80px);
    }
}

@media(max-width:680px){

    .npa8-shell{
        grid-template-rows:
            64px
            auto;
    }

    .npa8-header{
        padding:
            0
            14px;

        gap:
            10px;
    }

    .npa8-brand-symbol{
        width:
            37px;

        height:
            37px;

        border-radius:
            11px;
    }

    .npa8-brand-wordmark{
        width:
            96px;
    }

    .npa8-back-home{
        display:none;
    }

    .npa8-header .bd-lang-button{
        height:
            34px;

        padding:
            3px
            7px
            3px
            3px;
    }

    .npa8-header .bd-lang-dot{
        width:
            25px;

        height:
            25px;
    }

    .npa8-experience{
        min-height:
            400px;

        padding:
            14px;
    }

    .npa8-experience-media{
        min-height:
            300px;

        border-radius:
            18px;
    }

    .npa8-experience-content{
        max-width:
            92%;

        left:
            22px;
    }

    .npa8-kicker{
        font-size:
            8px;
    }

    .npa8-experience-content h1{
        max-width:
            420px;

        font-size:
            clamp(
                34px,
                10vw,
                46px
            );
    }

    .npa8-experience-content p{
        max-width:
            90%;

        font-size:
            11px;
    }

    .npa8-live{
        display:none;
    }

    .npa8-business-actions{
        grid-template-columns:
            1fr;
    }

    .npa8-business-actions>a{
        min-height:
            54px;
    }

    .npa8-experience-footer{
        display:none;
    }

    .npa8-auth{
        min-height:
            auto;
    }

    .npa8-auth-holder{
        padding:
            44px
            18px
            70px;
    }

    body.npa8-login-page .npa6-head h2{
        font-size:
            36px;
    }

    body.npa8-login-page .npa6-social-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .npa8-theme-control{
        right:
            12px;

        bottom:
            12px;
    }
}

@media(max-width:430px){

    .npa8-brand-wordmark{
        width:
            88px;
    }

    .npa8-header .bd-lang-name{
        display:none;
    }

    .npa8-header .bd-lang-button{
        padding:
            3px;
    }

    .npa8-experience{
        min-height:
            350px;
    }

    .npa8-experience-media{
        min-height:
            280px;
    }

    .npa8-business-actions{
        display:none;
    }

    body.npa8-login-page .npa6-social-grid{
        grid-template-columns:
            1fr
            1fr;
    }
}

/* BEDEEL_LOGIN_V8_FINAL_END */



/* BEDEEL_LOGIN_V82_LAYOUT_FIX */

html,
body{
    min-height:100%;
}

html[data-theme="dark"]{
    background:#090a0c;
}

html[data-theme="light"]{
    background:#f4f7fa;
}

body.npa8-login-page{
    width:100%;
    min-height:100vh;
    min-height:100dvh;

    background:#090a0c !important;
}

.npa8-shell{
    width:100%;
    min-height:100vh;
    min-height:100dvh;

    background:#090a0c;
}

.npa8-main{
    width:100%;
    min-height:0;
    height:100%;
}

.npa8-experience,
.npa8-auth{
    height:100%;
    min-height:0;
}

.npa8-experience{
    align-self:stretch;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(68,137,255,.10),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #101216,
            #0a0b0d 76%
        ) !important;
}

:root[data-theme="light"] body.npa8-login-page,
:root[data-theme="light"] .npa8-shell{
    background:#f4f7fa !important;
}

@media(min-width:941px){

    .npa8-shell{
        height:100vh;
        height:100dvh;
    }

    .npa8-main{
        min-height:0;
        height:100%;
    }

    .npa8-experience{
        min-height:0;
        height:100%;
    }

    .npa8-auth{
        min-height:0;
        height:100%;
    }
}

/* BEDEEL_LOGIN_V82_LAYOUT_FIX_END */


/* BEDEEL_LOGIN_V83_VIEWPORT_FIX */

/*
|--------------------------------------------------------------------------
| LOGIN DESKTOP - VIEWPORT COMPLETO
|--------------------------------------------------------------------------
*/

html{
    min-height:100%;
    background:#090a0c;
}

body.npa8-login-page{
    min-height:100vh;
    min-height:100dvh;

    margin:0;

    background:#090a0c !important;
}

body.npa8-login-page .npa8-shell{
    width:100%;

    height:100vh;
    height:100dvh;

    min-height:100vh;
    min-height:100dvh;

    display:grid;

    grid-template-rows:
        72px
        minmax(0,1fr);

    background:#090a0c !important;

    overflow:hidden;
}

body.npa8-login-page .npa8-main{
    width:100%;

    height:auto;
    min-height:0;

    align-self:stretch;

    background:#090a0c !important;

    overflow:hidden;
}

body.npa8-login-page .npa8-experience{
    height:auto;
    min-height:0;

    align-self:stretch;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(68,137,255,.10),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #101216,
            #0a0b0d 76%
        ) !important;
}

body.npa8-login-page .npa8-auth{
    height:auto;
    min-height:0;

    align-self:stretch;

    overflow:hidden;

    background:#090a0c !important;
}

body.npa8-login-page .npa8-auth-scroll{
    min-height:0;
    height:100%;

    background:#090a0c;
}

/*
|--------------------------------------------------------------------------
| ASEGURAR QUE NUNCA APAREZCA EL FONDO BLANCO DEL DOCUMENTO
|--------------------------------------------------------------------------
*/

body.npa8-login-page::before,
body.npa8-login-page::after{
    display:none !important;
}

@media(min-width:941px){

    body.npa8-login-page .npa8-main{
        min-height:calc(100vh - 72px);
        min-height:calc(100dvh - 72px);
    }

    body.npa8-login-page .npa8-experience,
    body.npa8-login-page .npa8-auth{
        min-height:calc(100vh - 72px);
        min-height:calc(100dvh - 72px);
    }
}

/*
|--------------------------------------------------------------------------
| LIGHT MODE
|--------------------------------------------------------------------------
*/

:root[data-theme="light"]{
    background:#f4f7fa;
}

:root[data-theme="light"] body.npa8-login-page{
    background:#f4f7fa !important;
}

:root[data-theme="light"] body.npa8-login-page .npa8-shell,
:root[data-theme="light"] body.npa8-login-page .npa8-main{
    background:#f4f7fa !important;
}

:root[data-theme="light"] body.npa8-login-page .npa8-auth,
:root[data-theme="light"] body.npa8-login-page .npa8-auth-scroll{
    background:#f8fafc !important;
}

/*
|--------------------------------------------------------------------------
| TABLET / MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:940px){

    body.npa8-login-page{
        overflow-x:hidden;
        overflow-y:auto;
    }

    body.npa8-login-page .npa8-shell{
        height:auto;
        min-height:100vh;
        min-height:100dvh;

        grid-template-rows:
            72px
            auto;

        overflow:visible;
    }

    body.npa8-login-page .npa8-main{
        height:auto;

        min-height:0;

        overflow:visible;
    }

    body.npa8-login-page .npa8-experience{
        min-height:460px;
    }

    body.npa8-login-page .npa8-auth{
        min-height:auto;

        overflow:visible;
    }

    body.npa8-login-page .npa8-auth-scroll{
        height:auto;

        overflow:visible;
    }
}

/* BEDEEL_LOGIN_V83_VIEWPORT_FIX_END */


/* BEDEEL_LANGUAGE_SWITCHER_AUTH_V2 */

.npa8-header
.bd-lang-switcher-v2{
    width:auto !important;

    gap:2px !important;

    margin:0 !important;
    padding:3px !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    border-radius:10px !important;

    background:
        rgba(255,255,255,.035) !important;
}

.npa8-header
.bd-lang-switcher-v2
.bd-lang-button-v2{
    width:34px !important;
    min-width:34px !important;

    height:28px !important;
    min-height:28px !important;

    gap:0 !important;

    padding:0 !important;

    border:
        1px solid transparent !important;

    border-radius:7px !important;

    color:
        rgba(255,255,255,.56) !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

.npa8-header
.bd-lang-switcher-v2
.bd-lang-button-v2:hover{
    color:#fff !important;

    border-color:
        rgba(255,255,255,.07) !important;

    background:
        rgba(255,255,255,.045) !important;

    transform:
        none !important;
}

.npa8-header
.bd-lang-switcher-v2
.bd-lang-button-v2.is-active{
    color:#fff !important;

    border-color:
        rgba(239,104,89,.58) !important;

    background:
        linear-gradient(
            135deg,
            rgba(239,104,89,.95),
            rgba(239,104,89,.78)
        ) !important;

    box-shadow:
        0 4px 12px rgba(239,104,89,.16) !important;
}

.npa8-header
.bd-lang-switcher-v2
.bd-lang-label{
    display:block !important;

    position:static !important;

    color:inherit !important;

    font-size:8px !important;
    font-weight:950 !important;

    line-height:1 !important;

    opacity:1 !important;

    transform:none !important;
}

.npa8-header
.bd-lang-switcher-v2
.bd-lang-dot,
.npa8-header
.bd-lang-switcher-v2
.bd-lang-name{
    display:none !important;
}

/* BEDEEL_LANGUAGE_SWITCHER_AUTH_V2_END */