:root{--jp-blue:#001b57;--jp-blue-2:#29235c;--jp-text:#111827;--jp-muted:#64748b;--jp-border:#e5e7eb;--jp-bg:#f8fafc;--jp-green:#16a34a;--jp-yellow:#fbbf24}html{-webkit-text-size-adjust:100%}body.jp-auth-body{margin:0;background:var(--jp-bg);color:var(--jp-text);font-family:Inter,Arial,sans-serif}input,select,button{font-size:16px;font-family:inherit}button,a{touch-action:manipulation}.jp-auth-header{height:72px;background:#fff;border-bottom:1px solid var(--jp-border);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,env(safe-area-inset-left));position:sticky;top:0;z-index:20}.jp-auth-logo{font-size:34px;font-weight:900;color:var(--jp-blue-2);letter-spacing:-1px}.jp-auth-back,.jp-auth-help{color:#475569;font-size:18px;font-weight:600;text-decoration:none}.jp-auth-back:hover,.jp-auth-help:hover{text-decoration:none;color:var(--jp-blue)}.jp-auth-main{min-height:calc(100vh - 72px);padding:64px 16px}.jp-verify-card,.jp-register-card{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--jp-border);border-radius:18px;padding:56px 48px;box-shadow:0 20px 50px rgba(15,23,42,.04)}.jp-verify-card{text-align:center}.jp-verify-icon{width:84px;height:84px;background:#dbeafe;color:var(--jp-blue);border-radius:999px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center}.jp-verify-icon ion-icon{font-size:42px}.jp-verify-card h1,.jp-register-card h1{font-size:38px;line-height:1.1;font-weight:900;margin-bottom:14px}.jp-auth-subtitle{color:#475569;font-size:16px;text-align:center;margin-bottom:28px}.jp-verify-text{color:#475569;font-size:20px;line-height:1.5;margin-bottom:38px}.jp-verify-text strong{color:var(--jp-text)}.jp-code-label{display:block;font-size:18px;color:#334155;font-weight:700;margin-bottom:24px}.jp-code-inputs{display:grid;grid-template-columns:repeat(6,64px);justify-content:center;gap:12px}.jp-code-inputs input{width:64px;height:72px;border:2px solid #d1d5db;border-radius:14px;text-align:center;font-size:28px;font-weight:900;outline:none;background:#fff}.jp-code-inputs input:focus{border-color:var(--jp-blue);box-shadow:0 0 0 4px rgba(0,27,87,.12)}.jp-auth-primary{width:100%;min-height:56px;border:0;border-radius:14px;background:var(--jp-blue);color:#fff;font-weight:900;box-shadow:0 14px 30px rgba(0,27,87,.22)}.jp-auth-primary:disabled{background:#d1d5db;color:#111827;box-shadow:0 14px 30px rgba(15,23,42,.12)}.jp-link-button{border:0;background:transparent;color:var(--jp-blue);font-weight:900}.jp-change-email{display:inline-block;margin-top:18px;color:#475569;font-weight:700;text-decoration:none}.jp-tip-box{margin-top:38px;background:#fffbeb;border:1px solid #facc15;color:#92400e;padding:18px;border-radius:14px;font-size:16px}.jp-support-text{text-align:center;margin-top:34px;color:#64748b;font-size:17px}.jp-support-text a{color:var(--jp-blue);font-weight:900}.jp-alert{padding:14px 16px;border-radius:12px;margin-bottom:22px;font-weight:700}.jp-alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac}.jp-alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.jp-register-card{max-width:640px}.jp-auth-google-btn{width:100%;min-height:52px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#111827;font-weight:900;display:flex;align-items:center;justify-content:center;gap:12px;text-decoration:none}.jp-auth-google-btn:hover{text-decoration:none;color:#111827;border-color:var(--jp-blue)}.jp-google-mark{font-weight:900;color:#4285f4}.jp-auth-divider{display:flex;align-items:center;gap:14px;color:#64748b;font-size:14px;margin:28px 0}.jp-auth-divider:before,.jp-auth-divider:after{content:"";height:1px;background:#e5e7eb;flex:1}.jp-auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.jp-auth-field{margin-bottom:16px}.jp-auth-field label{display:block;font-size:14px;font-weight:800;color:#334155;margin-bottom:8px}.jp-auth-field label span{color:#ef4444}.jp-auth-field input,.jp-auth-field select{width:100%;min-height:52px;border:1px solid #dbe1ea;border-radius:12px;padding:0 14px;background:#fff;color:#111827;outline:none}.jp-auth-field input:focus,.jp-auth-field select:focus{border-color:var(--jp-blue);box-shadow:0 0 0 4px rgba(0,27,87,.1)}.jp-auth-check{display:flex;align-items:flex-start;gap:10px;color:#334155;font-size:14px;margin-bottom:12px}.jp-auth-check input{margin-top:3px;min-width:16px}.jp-auth-check a{font-weight:900;color:var(--jp-blue)}.jp-auth-safe-box{background:#eef5ff;border:1px solid #bfdbfe;color:#1e3a8a;padding:14px;border-radius:12px;font-size:14px;margin:18px 0}.jp-auth-bottom{text-align:center;margin-top:18px;color:#64748b}.jp-auth-bottom a{color:var(--jp-blue);font-weight:900}.invalid-feedback{display:block;color:#dc2626;font-weight:700;font-size:13px;margin-top:6px}@media(max-width:575.98px){.jp-auth-header{height:64px;padding:0 16px}.jp-auth-logo{font-size:24px}.jp-auth-back,.jp-auth-help{font-size:14px}.jp-auth-main{padding:32px 12px}.jp-verify-card,.jp-register-card{padding:34px 20px;border-radius:16px}.jp-verify-card h1,.jp-register-card h1{font-size:30px}.jp-verify-text{font-size:17px}.jp-code-inputs{grid-template-columns:repeat(6,1fr);gap:8px}.jp-code-inputs input{width:100%;height:58px;font-size:22px}.jp-auth-grid{grid-template-columns:1fr}}

/* Ajustes 2026-07-27: /continue y /signin estilo Figma */
.jp-auth-back,
.jp-auth-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.jp-auth-back ion-icon,
.jp-auth-help ion-icon {
    font-size: 22px;
}

.jp-auth-brand-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #111827;
    font-size: 20px;
    font-weight: 900;
}

.jp-brand-square {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #002266;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 34, 102, .20);
}

.jp-brand-square ion-icon {
    font-size: 22px;
}

.jp-auth-main-choice {
    padding-top: 44px;
}

.jp-auth-choice-heading {
    text-align: center;
    margin-bottom: 44px;
}

.jp-auth-choice-heading h1 {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 900;
    color: #111827;
    margin: 0 0 12px;
}

.jp-auth-choice-heading p {
    margin: 0;
    color: #64748b;
    font-size: 20px;
}

.jp-auth-choice-card {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 38px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .035);
}

.jp-auth-choice-button,
.jp-auth-google,
.jp-auth-create,
.jp-auth-login-outline {
    width: 100%;
    min-height: 68px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.jp-auth-google {
    background: #ffffff;
    color: #111827;
    border: 2px solid #d1d5db;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
}

.jp-auth-create {
    background: linear-gradient(135deg, #ffb703, #ffd43b);
    color: #111827;
    border: 0;
    box-shadow: 0 14px 28px rgba(251, 191, 36, .30);
}

.jp-auth-login-outline {
    margin-top: 18px;
    background: #ffffff;
    color: #111827;
    border: 2px solid #d1d5db;
}

.jp-auth-google:hover,
.jp-auth-create:hover,
.jp-auth-login-outline:hover {
    transform: translateY(-1px);
    text-decoration: none;
    color: #111827;
}

.jp-auth-separator {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
    color: #94a3b8;
}

.jp-auth-separator span {
    height: 1px;
    background: #e5e7eb;
}

.jp-auth-separator strong {
    font-size: 16px;
    font-weight: 800;
}

.jp-auth-info-box {
    margin-top: 28px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    line-height: 1.45;
}

.jp-auth-main-login {
    padding-top: 56px;
}

.jp-login-card {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 40px 36px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .035);
}

.jp-login-card h1 {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 12px;
    color: #111827;
}

.jp-login-card p {
    margin: 0;
    color: #64748b;
    font-size: 18px;
}

.jp-login-google {
    min-height: 56px;
    font-size: 18px;
    margin-top: 36px;
    box-shadow: none;
}

.jp-login-separator {
    margin: 34px 0;
}

.jp-login-field {
    margin-bottom: 18px;
}

.jp-input-icon-wrap {
    position: relative;
}

.jp-input-icon-wrap > ion-icon:first-child {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 22px;
    pointer-events: none;
}

.jp-auth-field .jp-input-icon-wrap input {
    padding-left: 46px;
    padding-right: 46px;
}

.jp-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    cursor: pointer;
}

.jp-password-toggle ion-icon {
    font-size: 22px;
}

.jp-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 24px;
    color: #334155;
    font-size: 16px;
    font-weight: 600;
}

.jp-login-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.jp-login-options a,
.jp-login-bottom a {
    color: #001b57;
    font-weight: 900;
    text-decoration: none;
}

.jp-auth-submit-yellow {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffb703, #ffd43b);
    color: #111827;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(251, 191, 36, .30);
}

.jp-login-bottom {
    text-align: center;
    margin-top: 28px !important;
    color: #64748b !important;
    font-size: 16px !important;
}

@media (max-width: 575.98px) {
    .jp-auth-brand-compact {
        font-size: 16px;
        gap: 8px;
    }

    .jp-brand-square {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .jp-auth-choice-heading {
        margin-bottom: 28px;
    }

    .jp-auth-choice-heading h1 {
        font-size: 28px;
    }

    .jp-auth-choice-heading p {
        font-size: 16px;
    }

    .jp-auth-choice-card,
    .jp-login-card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .jp-auth-google,
    .jp-auth-create,
    .jp-auth-login-outline {
        min-height: 58px;
        font-size: 16px;
    }

    .jp-auth-info-box {
        font-size: 15px;
    }

    .jp-login-card h1 {
        font-size: 24px;
    }

    .jp-login-card p {
        font-size: 15px;
    }

    .jp-login-options {
        align-items: flex-start;
        flex-direction: column;
        font-size: 15px;
    }
}

/* Ajustes 2026-07-30: cambio de correo y logout en verificación */
.jp-auth-logout-form {
    margin: 0;
}

.jp-auth-logout {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-weight: 800;
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    line-height: 1.1;
}

.jp-auth-logout:hover {
    background: #f8fafc;
}

.jp-auth-muted {
    color: #64748b;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 28px;
}

.jp-change-email-card {
    text-align: left;
}

.jp-change-email-card h1 {
    text-align: center;
}

.jp-change-email-card .jp-auth-muted {
    text-align: center;
}

.jp-change-email-icon {
    margin-left: auto;
    margin-right: auto;
}

.jp-form-group {
    margin-bottom: 18px;
}

.jp-form-group label {
    display: block;
    font-weight: 800;
    color: #334155;
    margin-bottom: 8px;
}

.jp-form-group label span {
    color: #ef4444;
}

.jp-form-group input,
.jp-form-group select {
    width: 100%;
    min-height: 54px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    padding: 0 16px;
    color: #111827;
    background: #ffffff;
    outline: none;
}

.jp-form-group input:focus,
.jp-form-group select:focus {
    border-color: #001b57;
    box-shadow: 0 0 0 4px rgba(0, 27, 87, .12);
}

.jp-form-group input:disabled {
    background: #f1f5f9;
    color: #64748b;
}

@media (max-width: 575.98px) {
    .jp-auth-logout {
        padding: 8px 12px;
        font-size: 13px;
    }
}
