/* Public access screens: shared by tutor and clinic sign-in. */
:root {
    --qp-login-ink: #08314a;
    --qp-login-teal: #009eaa;
    --qp-login-aqua: #1bc9ce;
    --qp-login-muted: #66808b;
}

html:has(.qp-login-page),
body.qp-login-page {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    /* Nunca prenda formulários longos dentro do viewport. */
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
}

.qp-login-shell {
    display: grid;
    grid-template-columns: minmax(520px, 56%) minmax(420px, 44%);
    min-height: 100dvh;
    width: 100%;
}

.qp-login-story {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100%;
    overflow: hidden;
    padding: clamp(40px, 6vw, 86px);
    color: #fff;
    background: radial-gradient(circle at 88% 83%, rgba(8, 184, 183, .5), transparent 31%), linear-gradient(154deg, #012d49 0%, #003f57 58%, #006e78 100%);
}

.qp-login-story::before,
.qp-login-story::after {
    position: absolute;
    z-index: -1;
    width: min(67vw, 760px);
    height: min(67vw, 760px);
    border: 1px solid rgba(37, 198, 201, .2);
    border-radius: 50%;
    content: '';
}

.qp-login-story::before { top: -430px; right: -190px; }
.qp-login-story::after { top: -310px; right: -80px; width: min(52vw, 590px); height: min(52vw, 590px); }

.qp-login-scene {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 42%;
    opacity: .49;
    background: linear-gradient(180deg, rgba(0, 62, 84, 0) 0%, rgba(0, 75, 88, .37) 35%, rgba(0, 108, 116, .82) 100%), url('/assets/img/cachorro1.webp') center 45% / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%);
    mask-image: linear-gradient(to bottom, transparent, #000 35%);
}

.qp-login-story-inner {
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 620px);
}

.qp-login-brand img { display: block; width: min(204px, 50vw); height: auto; }

.qp-login-story-copy { margin: auto 0; padding: 72px 0 60px; }

.qp-login-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
    color: #83e5e3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
}

.qp-login-eyebrow::before { width: 24px; height: 2px; background: #83e5e3; content: ''; }

.qp-login-story h1 {
    max-width: 570px;
    margin: 0;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(48px, 5vw, 80px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.055em;
}

.qp-login-story-description {
    max-width: 520px;
    margin: 28px 0 0;
    color: rgba(226, 248, 248, .86);
    font-size: 16px;
    line-height: 1.7;
}

.qp-login-proof { display: flex; align-items: center; gap: 15px; }
.qp-login-proof-icons { display: flex; }
.qp-login-proof-icons span {
    display: grid;
    width: 34px;
    height: 34px;
    margin-right: -5px;
    place-items: center;
    border: 2px solid #03435b;
    border-radius: 50%;
    color: #06435a;
    font-size: 16px;
}
.qp-login-proof-icons span:nth-child(1) { background: #ffd49a; }
.qp-login-proof-icons span:nth-child(2) { background: #b8e5dc; }
.qp-login-proof-icons span:nth-child(3) { background: #18c1cf; color: #fff; }
.qp-login-proof strong { display: block; color: #fff; font-size: 13px; }
.qp-login-proof small { display: block; margin-top: 2px; color: rgba(226, 248, 248, .62); font-size: 10px; }
.qp-login-copyright { color: rgba(150, 223, 223, .54); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }

.qp-login-form-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(34px, 5vw, 90px);
    background: #fff;
}
.qp-login-form-wrap { width: min(100%, 450px); }
.qp-login-register-links { display: flex; align-items: flex-end; flex-direction: column; gap: 12px; margin: 0 0 58px; text-align: right; }
.qp-login-register { margin: 0 0 72px; color: var(--qp-login-muted); font-size: 14px; text-align: right; white-space: nowrap; }
.qp-login-register-links .qp-login-register { margin: 0; }
.qp-login-register-account { color: #294b53; font-size: 14px; font-weight: 800; }
.qp-login-register-account > span { display: block; margin-bottom: 9px; }
.qp-login-register-options { display: flex; justify-content: flex-end; gap: 9px; }
.qp-login-register-option { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 13px; border: 1px solid #b9dfdc; border-radius: 10px; color: #087c86; background: #f4fbfa; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.qp-login-register-option i { font-size: 17px; }
.qp-login-register-option.is-primary { border-color: #009da7; color: #fff; background: linear-gradient(100deg, #08bbc1, #008d98); box-shadow: 0 8px 17px rgba(0, 156, 168, .2); }
.qp-login-register-option:hover { color: #06717a; background: #e6f7f5; transform: translateY(-1px); }
.qp-login-register-option.is-primary:hover { color: #fff; background: linear-gradient(100deg, #00a8af, #007e89); box-shadow: 0 11px 21px rgba(0, 137, 149, .27); }
.qp-login-register-community { color: #637e85; font-size: 12px; }
.qp-login-register a, .qp-login-help a { color: var(--qp-login-ink); font-weight: 700; text-decoration: none; }
.qp-login-register a:hover, .qp-login-help a:hover { color: var(--qp-login-teal); text-decoration: underline; }
.qp-login-overline { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--qp-login-teal); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.qp-login-overline::before { width: 21px; height: 2px; background: var(--qp-login-teal); content: ''; }
.qp-login-card h1 { margin: 0; color: #182e37; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 3.2vw, 52px); font-weight: 500; letter-spacing: -.04em; }
.qp-login-intro { max-width: 410px; margin: 18px 0 32px; color: #60747c; font-size: 15px; line-height: 1.65; }
.qp-login-card .alert { margin-bottom: 20px; border-radius: 11px; font-size: 14px; }
.qp-login-socials { display: grid; gap: 10px; margin-bottom: 17px; }
.qp-login-social {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid #d5e2e4;
    border-radius: 10px;
    color: #24404a;
    background: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qp-login-social i { margin-right: 9px; font-size: 19px; }
.qp-login-social.apple { border-color: #142e38; color: #fff; background: #142e38; }
.qp-login-social:hover { transform: translateY(-1px); border-color: var(--qp-login-teal); box-shadow: 0 8px 18px rgba(5, 90, 98, .11); color: #24404a; }
.qp-login-social.apple:hover { color: #fff; }
.qp-login-divider { display: flex; align-items: center; gap: 13px; margin: 19px 0; color: #92a1a6; font-size: 12px; }
.qp-login-divider::before, .qp-login-divider::after { height: 1px; flex: 1; background: #e1e9ea; content: ''; }
.qp-login-field { margin-bottom: 19px; }
.qp-login-field label { display: block; margin-bottom: 8px; color: #173740; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.qp-login-input { position: relative; }
.qp-login-input > i { position: absolute; top: 50%; left: 15px; z-index: 1; color: #789096; font-size: 19px; transform: translateY(-50%); }
.qp-login-input input { width: 100%; height: 52px; padding: 0 48px 0 45px; border: 1px solid #cedfe1; border-radius: 10px; color: #123642; background: #fff; box-shadow: none; font-size: 14px; outline: 0; transition: border-color .18s ease, box-shadow .18s ease; }
.qp-login-input input:focus { border-color: var(--qp-login-teal); box-shadow: 0 0 0 4px rgba(0, 158, 170, .11); }
.qp-login-password-toggle { position: absolute; top: 50%; right: 7px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; transform: translateY(-50%); border: 0; border-radius: 8px; color: #648088; background: transparent; font-size: 19px; }
.qp-login-password-toggle:hover { color: var(--qp-login-teal); background: #effafb; }
.qp-login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 1px 0 25px; font-size: 13px; }
.qp-login-options .form-check { min-height: 0; margin: 0; }
.qp-login-options .form-check-input { border-color: #b9cdcf; }
.qp-login-options .form-check-input:checked { border-color: var(--qp-login-teal); background-color: var(--qp-login-teal); }
.qp-login-options .form-check-label { color: #49636c; }
.qp-login-help { white-space: nowrap; }
.qp-login-submit { width: 100%; min-height: 53px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(100deg, #06bfc5, #008d98); box-shadow: 0 13px 25px rgba(0, 157, 169, .22); font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; transition: transform .18s ease, box-shadow .18s ease; }
.qp-login-submit i { margin-left: 10px; font-size: 19px; vertical-align: -2px; }
.qp-login-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(0, 157, 169, .3); }
.qp-login-security { margin: 24px 0 0; padding-top: 21px; border-top: 1px solid #deeaeb; color: #8da0a4; font-size: 11px; text-align: center; }
.qp-login-security i { margin-right: 5px; font-size: 14px; vertical-align: -1px; }

@media (max-width: 900px) {
    /* Alguns navegadores móveis elegem o html como raiz de rolagem; outros,
       o body. Liberamos os dois para que nenhum campo fique abaixo da dobra. */
    html:has(.qp-login-page),
    html,
    body.qp-login-page {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .qp-login-shell { display: block; min-height: 100dvh; height: auto !important; overflow: visible !important; }
    .qp-login-story { display: block; min-height: 278px; padding: 30px 28px; }
    .qp-login-story::before { top: -290px; right: -110px; }
    .qp-login-story::after { top: -205px; right: -55px; }
    .qp-login-scene { height: 72%; opacity: .38; }
    .qp-login-story-inner { min-height: 218px; }
    .qp-login-brand img { width: 164px; }
    .qp-login-story-copy { margin: auto 0 0; padding: 0; }
    .qp-login-eyebrow { margin-bottom: 13px; font-size: 9px; }
    .qp-login-story h1 { font-size: clamp(35px, 10vw, 49px); }
    .qp-login-story-description, .qp-login-proof, .qp-login-copyright { display: none; }
    .qp-login-form-panel { min-height: 0; padding: 38px 24px 48px; overflow: visible; }
    .qp-login-register { margin-bottom: 44px; }
    .qp-login-register-links { margin-bottom: 44px; }
}
@media (max-width: 480px) {
    .qp-login-form-panel { align-items: flex-start; padding: 28px 20px; }
    .qp-login-register { margin-bottom: 48px; font-size: clamp(10px, 2.8vw, 13px); letter-spacing: -.015em; }
    .qp-login-register-account { font-size: clamp(12px, 3.2vw, 14px); }
    .qp-login-register-options { gap: 7px; }
    .qp-login-register-option { min-height: 39px; padding: 0 10px; font-size: clamp(11px, 3vw, 13px); }
    .qp-login-register-community { font-size: clamp(10px, 2.75vw, 12px); }
    .qp-login-register-links { margin-bottom: 48px; }
    .qp-login-card h1 { font-size: 40px; }
    .qp-login-options { align-items: flex-start; flex-direction: column; }
}