:root {
    --pdd-deep: #002e70;
    --pdd-deeper: #001d42;
    --pdd-primary: #002e70;
    --pdd-primary-2: #145c8c;
    --pdd-violet: #336e9f;
    --pdd-lilac: #dceaf3;
    --pdd-soft: #f6fafc;
    --pdd-border: #cbdce7;
    --pdd-text: #202632;
    --pdd-muted: #687083;
    --pdd-white: #ffffff;
    --pdd-danger: #c03445;
    --pdd-shadow: 0 24px 70px rgba(41, 24, 75, .14);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

body.pdd-client-login {
    min-height: 100vh;
    padding: clamp(22px, 4vw, 58px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    color: var(--pdd-text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background:
        radial-gradient(circle at 12% 20%, rgba(129, 86, 190, .16), transparent 31%),
        radial-gradient(circle at 88% 78%, rgba(91, 44, 163, .13), transparent 28%),
        linear-gradient(145deg, #fbfdff 0%, #edf5f9 50%, #fbfdff 100%);
}

body.pdd-client-login::before,
body.pdd-client-login::after {
    content: "";
    position: fixed;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(2px);
}

body.pdd-client-login::before {
    width: 420px;
    height: 420px;
    left: -180px;
    bottom: -220px;
    background: rgba(91, 44, 163, .08);
}

body.pdd-client-login::after {
    width: 320px;
    height: 320px;
    right: -110px;
    top: -160px;
    background: rgba(123, 75, 193, .08);
}

.pdd-login-layout {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(390px, 520px) minmax(410px, 1fr);
    align-items: center;
    gap: clamp(44px, 7vw, 100px);
}

.pdd-login-card {
    overflow: hidden;
    border: 1px solid rgba(91, 44, 163, .12);
    border-radius: 30px;
    background: #fff;
    box-shadow: var(--pdd-shadow);
}

.pdd-login-brand {
    min-height: 116px;
    padding: 26px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 0%, rgba(255, 255, 255, .16), transparent 34%),
        linear-gradient(135deg, var(--pdd-deep), var(--pdd-primary) 55%, var(--pdd-violet));
}

.pdd-login-logo {
    width: 190px;
    max-width: 100%;
    height: auto;
    display: block;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

.pdd-login-brand > span {
    color: rgba(255, 255, 255, .82);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .045em;
}

.pdd-login-content { padding: 34px 34px 30px; }
.pdd-login-heading { margin-bottom: 22px; }

.pdd-eyebrow {
    display: inline-flex;
    min-height: 27px;
    padding: 0 11px;
    align-items: center;
    border-radius: 999px;
    color: var(--pdd-primary);
    background: var(--pdd-lilac);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.pdd-login-heading h1 {
    margin: 13px 0 9px;
    color: var(--pdd-text);
    font-size: clamp(1.9rem, 4vw, 2.55rem);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -.045em;
}

.pdd-login-heading p {
    margin: 0;
    color: var(--pdd-muted);
    font-size: .94rem;
    line-height: 1.58;
    font-weight: 600;
}

.pdd-login-modes {
    margin-bottom: 24px;
    padding: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    border-radius: 15px;
    background: #eaf3f8;
}

.pdd-login-modes button {
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: #4f6576;
    background: transparent;
    font-size: .8rem;
    font-weight: 850;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.pdd-login-modes button.is-active {
    color: var(--pdd-primary);
    background: #fff;
    box-shadow: 0 5px 14px rgba(54, 30, 88, .1);
}

.pdd-field { margin-bottom: 17px; }
.pdd-field > label {
    display: block;
    margin: 0 0 8px;
    color: #3f4552;
    font-size: .77rem;
    font-weight: 850;
}

.pdd-field > small {
    display: block;
    margin-top: 7px;
    color: #7b8190;
    font-size: .72rem;
    font-weight: 600;
}

.pdd-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pdd-input-wrap > i {
    position: absolute;
    left: 16px;
    z-index: 2;
    color: var(--pdd-primary);
    font-size: .92rem;
}

.pdd-input-wrap input {
    width: 100%;
    height: 54px;
    padding: 0 54px 0 45px;
    outline: 0;
    border: 1.5px solid var(--pdd-border);
    border-radius: 15px;
    color: var(--pdd-text);
    background: #fff;
    font-size: .91rem;
    font-weight: 700;
    box-shadow: 0 6px 15px rgba(42, 27, 67, .035);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pdd-input-wrap input::placeholder { color: #9a9dab; }
.pdd-input-wrap input:focus {
    border-color: var(--pdd-primary);
    box-shadow: 0 0 0 4px rgba(91, 44, 163, .11), 0 10px 22px rgba(42, 27, 67, .07);
    transform: translateY(-1px);
}

.pdd-password-toggle {
    position: absolute;
    right: 8px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--pdd-primary);
    background: var(--pdd-soft);
}

.pdd-login-submit {
    width: 100%;
    min-height: 56px;
    margin-top: 3px;
    padding: 0 19px;
    border: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--pdd-deep), var(--pdd-primary), var(--pdd-primary-2));
    font-size: .88rem;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(91, 44, 163, .25);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.pdd-login-submit i,
.pdd-login-submit span { color: #fff !important; opacity: 1 !important; }
.pdd-login-submit:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 21px 40px rgba(91, 44, 163, .31); }
.pdd-login-submit:disabled { cursor: wait; opacity: .72; transform: none; }

.pdd-login-message {
    min-height: 23px;
    margin: 0 0 6px;
    font-size: .78rem;
    font-weight: 750;
}

.pdd-login-message.is-error {
    min-height: 0;
    margin: 0 0 13px;
    padding: 10px 12px;
    border: 1px solid #f2c2c8;
    border-radius: 11px;
    color: var(--pdd-danger);
    background: #fff3f4;
}

.pdd-login-security {
    margin-top: 22px;
    padding-top: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-top: 1px solid #e5eff5;
    color: #777e8d;
    font-size: .74rem;
    line-height: 1.45;
    font-weight: 650;
}

.pdd-login-security i { color: var(--pdd-primary); }

.pdd-login-journey {
    position: relative;
    min-height: 590px;
    padding: 42px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pdd-journey-intro {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin-bottom: 34px;
}

.pdd-journey-intro > span {
    color: var(--pdd-primary);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pdd-journey-intro h2 {
    margin: 11px 0 12px;
    color: var(--pdd-deep);
    font-size: clamp(2.2rem, 5vw, 3.55rem);
    line-height: 1.03;
    font-weight: 900;
    letter-spacing: -.05em;
}

.pdd-journey-intro p {
    max-width: 520px;
    margin: 0;
    color: #626a79;
    font-size: .98rem;
    line-height: 1.62;
    font-weight: 600;
}

.pdd-journey-card {
    position: relative;
    z-index: 3;
    width: min(390px, 80%);
    min-height: 105px;
    padding: 17px 20px;
    border: 1px solid rgba(91, 44, 163, .11);
    border-radius: 22px;
    display: grid;
    grid-template-columns: 49px 1fr;
    align-items: center;
    gap: 14px;
    color: var(--pdd-text);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 17px 42px rgba(52, 33, 82, .11);
    backdrop-filter: blur(15px);
}

.pdd-journey-card-one { margin-left: 5%; }
.pdd-journey-card-two { margin: -6px 0 0 auto; }
.pdd-journey-card-three { margin: 16px auto 0 14%; }

.pdd-step-number {
    position: absolute;
    top: 12px;
    right: 15px;
    color: rgba(91, 44, 163, .2);
    font-size: .74rem;
    font-weight: 900;
}

.pdd-step-icon {
    width: 49px;
    height: 49px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--pdd-primary), var(--pdd-primary-2));
    box-shadow: 0 10px 23px rgba(91, 44, 163, .23);
}

.pdd-step-icon i { color: #fff !important; opacity: 1 !important; font-size: 1.18rem; }
.pdd-journey-card strong { display: block; margin-bottom: 5px; color: #282e39; font-size: .94rem; font-weight: 900; }
.pdd-journey-card small { display: block; color: #747b89; font-size: .75rem; line-height: 1.4; font-weight: 600; }

.pdd-login-orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(91, 44, 163, .14), rgba(161, 123, 210, .08));
}

.pdd-login-orb-one { width: 310px; height: 310px; right: 15%; top: 34%; }
.pdd-login-orb-two { width: 150px; height: 150px; right: 3%; top: 19%; }

@media (max-width: 980px) {
    .pdd-login-layout { grid-template-columns: minmax(350px, 560px); justify-content: center; }
    .pdd-login-journey { display: none; }
}

@media (max-width: 580px) {
    body.pdd-client-login { padding: 14px; align-items: flex-start; }
    .pdd-login-card { border-radius: 22px; }
    .pdd-login-brand { min-height: 100px; padding: 23px 24px; }
    .pdd-login-logo { width: 165px; }
    .pdd-login-content { padding: 27px 23px 24px; }
    .pdd-login-heading h1 { font-size: 1.9rem; }
    .pdd-login-modes { grid-template-columns: 1fr; }
}


/* PT V6.1.6 FINAL - Identidad GNP para acceso */
:root{
    --pdd-deep:#002e70;
    --pdd-deeper:#001d42;
    --pdd-primary:#002e70;
    --pdd-primary-2:#145c8c;
    --pdd-accent:#f36c0a;
    --pdd-soft:#eaf3f8;
    --pdd-border:#cbdce7;
}
body.pdd-client-login{background:radial-gradient(circle at 10% 10%,rgba(51,110,159,.12),transparent 30%),radial-gradient(circle at 90% 88%,rgba(243,108,10,.08),transparent 27%),#f5f9fc;}
.pdd-login-brand{background:radial-gradient(circle at 88% 0%,rgba(255,255,255,.14),transparent 35%),linear-gradient(135deg,#001d42 0%,#002e70 64%,#145c8c 100%);border-bottom:4px solid #f36c0a;}
.pdd-eyebrow{color:#002e70;background:#eaf3f8;border:1px solid #d7e7f0;}
.pdd-login-modes{background:#eaf3f8;}
.pdd-login-modes button{color:#52697a;}
.pdd-login-modes button.is-active{color:#002e70;box-shadow:0 5px 14px rgba(0,59,112,.12);}
.pdd-input-wrap:focus-within{border-color:#002e70;box-shadow:0 0 0 4px rgba(0,59,112,.09);}
.pdd-input-wrap>i,.pdd-password-toggle{color:#002e70;}
.pdd-login-submit{background:linear-gradient(135deg,#002e70,#145c8c);box-shadow:0 13px 28px rgba(0,59,112,.22);border-bottom:3px solid #f36c0a;}
.pdd-login-submit:hover{background:linear-gradient(135deg,#001d42,#002e70);}
.pdd-login-security i,.pdd-step-number{color:#f36c0a;}
.pdd-login-journey{background:linear-gradient(150deg,#001d42 0%,#002e70 58%,#145c8c 100%);}
.pdd-journey-card{border-color:rgba(255,255,255,.16);}