/* Login isolado dos estilos do painel. A identidade continua definida no servidor. */
:root { color-scheme:light; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body.portal-login {
 --login-ink:#18334b; --login-muted:#5b6e80; --login-line:#d6e1eb; --login-primary:#05579e;
 --login-button:#f6b024; --login-button-ink:#18334b; --login-story:#073e69; --login-accent:#ffd17a;
 margin:0; min-height:100vh; min-height:100dvh; padding:40px 24px 24px;
 display:flex; flex-direction:column; align-items:center; justify-content:center;
 background:radial-gradient(ellipse at 10% 0,#e5f0fa,transparent 55%),#f4f7fb;
 color:var(--login-ink); font:15px/1.5 "Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased;
}
html[data-portal-produto="QUICKPAYSOFT"] body.portal-login {
 --login-primary:#7055e5; --login-button:#7055e5; --login-button-ink:#fff;
 --login-story:#292145; --login-accent:#cfc1ff;
 background:radial-gradient(ellipse at 10% 0,#eeebfb,transparent 55%),#f7f6fb;
}
.portal-login a { color:inherit; }
.portal-login button,.portal-login input { font:inherit; }
.portal-login :is(a,button):focus-visible { outline:3px solid var(--login-primary); outline-offset:4px; }
.portal-login .access-shell {
 width:100%; max-width:1040px; display:grid; grid-template-columns:1fr 1.08fr;
 border:1px solid #dce5ee; border-radius:24px; background:#fff; overflow:hidden;
 box-shadow:0 20px 65px #163b5b0d;
}
.portal-login .access-story {
 position:relative; isolation:isolate; min-width:0; padding:40px;
 display:flex; flex-direction:column; gap:24px; color:#fff;
 background:radial-gradient(ellipse at 100% 0,#2878a980,transparent 65%),var(--login-story);
}
html[data-portal-produto="QUICKPAYSOFT"] .portal-login .access-story {
 background:radial-gradient(ellipse at 100% 0,#7055e570,transparent 65%),var(--login-story);
}
.portal-login .brand { display:inline-flex; align-items:center; gap:12px; width:fit-content; text-decoration:none; font-size:24px; font-weight:700; letter-spacing:-.6px; }
.portal-login .brand small { display:block; margin-top:5px; color:#d3e3f0; font-size:12px; font-weight:400; letter-spacing:.02em; }
.portal-login .brand .brand-mark { width:40px; height:40px; flex:0 0 40px; }
.portal-login .brand .brand-mark svg { width:36px; height:36px; }
.portal-login .story-copy { margin-top:8px; }
.portal-login h1 { margin:0; font-size:clamp(28px,3vw,36px); font-weight:650; line-height:1.22; letter-spacing:-1.1px; }
.portal-login h1 em { font-style:normal; color:var(--login-accent); }
.portal-login .story-copy>p { max-width:29ch; margin:16px 0 0; color:#d6e7f4; font-size:15px; line-height:1.65; }
.portal-login .operation-art { width:100%; max-width:310px; margin:0 auto; color:white; }
.portal-login .operation-art svg { display:block; width:100%; height:auto; }
.portal-login .art-accent { fill:var(--login-accent); }
.portal-login .story-foot { margin-top:auto; color:#c0d5e7; font-size:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.portal-login .login-motion-toggle { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:5px 7px; border:1px solid #ffffff30; border-radius:8px; color:#d8e9f6; background:#ffffff08; font-size:11px; cursor:pointer; }
.portal-login .login-motion-toggle:hover { background:#ffffff16; color:#fff; }
.portal-login .login-motion-toggle:focus-visible { outline-color:var(--login-accent); }
.portal-login .login-motion-toggle svg { width:13px; height:13px; flex:none; }
.portal-login .motion-play { display:none; }
.portal-login .login-motion-toggle[aria-pressed="true"] .motion-pause { display:none; }
.portal-login .login-motion-toggle[aria-pressed="true"] .motion-play { display:block; }
.portal-login .art-product,.portal-login .art-scan-line { opacity:0; }
.portal-login .art-terminal-check { stroke-dasharray:1; }
.portal-login .access-form-panel { min-width:0; display:flex; flex-direction:column; justify-content:center; padding:48px clamp(28px,4vw,54px); }
.portal-login .form-eyebrow { display:block; color:var(--login-primary); font-size:11px; font-weight:700; letter-spacing:.12em; }
.portal-login h2 { margin:10px 0; font-size:30px; font-weight:650; line-height:1.2; letter-spacing:-.7px; }
.portal-login .form-heading>p { margin:0; color:var(--login-muted); font-size:14px; }
.portal-login .access-form { display:grid; gap:20px; margin-top:30px; }
.portal-login .field { min-width:0; }
.portal-login .field label { display:block; margin-bottom:8px; font-size:14px; font-weight:600; }
.portal-login .input-wrap { position:relative; min-height:54px; border:1px solid var(--login-line); border-radius:12px; background:#fff; transition:border-color .15s,box-shadow .15s; }
.portal-login .input-wrap:focus-within { border-color:var(--login-primary); box-shadow:0 0 0 3px #05579e18; box-shadow:0 0 0 3px color-mix(in srgb,var(--login-primary) 14%,transparent); }
.portal-login .input-icon { position:absolute; top:50%; left:16px; transform:translateY(-50%); width:20px; height:20px; color:#74899b; pointer-events:none; z-index:1; }
.portal-login .input-wrap input { display:block; width:100%; min-width:0; min-height:54px; padding:14px 48px; border:0; border-radius:11px; outline:none; background:#fff; color:var(--login-ink); font-size:16px; line-height:1.5; }
.portal-login .input-wrap input[autocomplete="username"] { padding-right:16px; }
.portal-login .input-wrap input::placeholder { color:#7c8c9a; opacity:1; }
/* O autofill preenche o campo inteiro; não deixa retângulos azuis entre ícones. */
.portal-login .input-wrap input:-webkit-autofill,
.portal-login .input-wrap input:-webkit-autofill:hover,
.portal-login .input-wrap input:-webkit-autofill:focus {
 -webkit-text-fill-color:var(--login-ink); -webkit-box-shadow:0 0 0 1000px #fff inset; box-shadow:0 0 0 1000px #fff inset; caret-color:var(--login-ink);
}
.portal-login .input-wrap input:autofill { background:#fff; color:var(--login-ink); box-shadow:0 0 0 1000px #fff inset; }
.portal-login .input-wrap:has(.input-validation-error) { border-color:#c24747; }
.portal-login .password-toggle { position:absolute; right:5px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; padding:10px; border:0; border-radius:8px; background:transparent; color:#647b8e; cursor:pointer; }
.portal-login .password-toggle svg { width:21px; height:21px; }
.portal-login .password-toggle:hover { color:var(--login-primary); background:#f1f5fa; }
.portal-login .password-toggle:focus-visible { outline-offset:-3px; }
.portal-login .caps-lock { display:block; margin-top:7px; color:#955b12; font-size:13px; }
.portal-login .login-submit { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:54px; margin-top:4px; padding:14px 20px; border:1px solid transparent; border-radius:12px; background:var(--login-button); color:var(--login-button-ink); font-size:15px; font-weight:650; cursor:pointer; transition:filter .15s,box-shadow .15s; }
.portal-login .login-submit:hover { filter:brightness(.97); box-shadow:0 4px 12px #173b5712; }
.portal-login .login-submit:disabled { cursor:wait; opacity:.8; }
.portal-login .submit-arrow { width:20px; height:20px; margin-left:4px; }
.portal-login .login-submit[aria-busy="true"] .submit-arrow { display:none; }
.portal-login .login-spinner { width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:login-spin .8s linear infinite; }
.portal-login .access-help { margin:24px 0 0; text-align:center; color:var(--login-muted); font-size:13px; line-height:1.7; }
.portal-login .access-help a { color:var(--login-primary); text-underline-offset:3px; font-weight:600; }
.portal-login .form-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; width:100%; margin-top:22px; color:#65798b; font-size:12px; }
.portal-login .login-feedback { padding:13px 15px; border:1px solid #efc4c4; border-radius:10px; background:#fff4f4; color:#9c3030; font-size:14px; overflow-wrap:anywhere; }
.portal-login .login-feedback ul { margin:0; padding-left:18px; }
.portal-login .validation-summary-valid { display:none; }
@keyframes login-spin { to { transform:rotate(360deg); } }
/* O movimento é decorativo, independente de login, rede ou dados da loja. */
@media(prefers-reduced-motion:no-preference) and (min-width:801px) {
 .portal-login .access-story::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 90% 15%,#39b6f129,transparent 58%); animation:login-glow 16s ease-in-out infinite alternate; }
 .portal-login .art-store { animation:login-store-float 6.8s ease-in-out infinite; }
 .portal-login .art-shadow { transform-box:fill-box; transform-origin:center; animation:login-shadow 6.8s ease-in-out infinite; }
 .portal-login .art-terminal { transform-box:fill-box; transform-origin:50% 90%; animation:login-terminal-float 6.8s ease-in-out infinite; }
 .portal-login .art-product { transform-box:fill-box; transform-origin:center; animation:login-product-scan 6.8s cubic-bezier(.3,.7,.25,1) infinite; }
 .portal-login .art-scan-line { animation:login-scan-beam 6.8s ease-in-out infinite; }
 .portal-login .art-terminal-check { animation:login-check-draw 6.8s ease-in-out infinite; }
 .portal-login .art-confirmation { transform-box:fill-box; transform-origin:center; animation:login-confirmation 6.8s ease-in-out infinite; }
 .portal-login .art-particle-one { animation:login-particle 5s ease-in-out infinite alternate; }
 .portal-login .art-particle-two { animation:login-particle 7s ease-in-out -2s infinite alternate-reverse; }
 .portal-login .submit-arrow { transition:transform .22s ease; }
 .portal-login .login-submit:hover:not(:disabled) .submit-arrow { transform:translateX(4px); }
 .portal-login[data-login-motion="paused"] .operation-art svg *,
 .portal-login[data-login-motion="paused"] .access-story::before { animation-play-state:paused; }
}
@keyframes login-store-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes login-shadow { 0%,100%{transform:scaleX(1);opacity:.09} 50%{transform:scaleX(.93);opacity:.06} }
@keyframes login-terminal-float { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-3px) rotate(-2deg)} 65%{transform:translateY(-1px) rotate(1deg)} }
@keyframes login-product-scan { 0%,8%{opacity:0;transform:translate(10px,10px) rotate(8deg)} 18%{opacity:1;transform:translate(0,0) rotate(2deg)} 32%,43%{opacity:1;transform:translate(-30px,1px) rotate(-7deg)} 58%,100%{opacity:0;transform:translate(-7px,-22px) rotate(5deg)} }
@keyframes login-scan-beam { 0%,22%{opacity:0;transform:translateY(0)} 27%{opacity:.8;transform:translateY(0)} 33%{opacity:.8;transform:translateY(12px)} 39%{opacity:.8;transform:translateY(0)} 45%{opacity:.8;transform:translateY(12px)} 49%,100%{opacity:0;transform:translateY(0)} }
@keyframes login-check-draw { 0%,18%{opacity:1;stroke-dashoffset:0} 23%,48%{opacity:0;stroke-dashoffset:1} 52%{opacity:1;stroke-dashoffset:1} 64%,100%{opacity:1;stroke-dashoffset:0} }
@keyframes login-confirmation { 0%,45%,100%{transform:translateY(0) scale(1)} 58%{transform:translateY(-4px) scale(1.08)} 74%{transform:translateY(-2px) scale(1)} }
@keyframes login-particle { from{transform:translateY(0)} to{transform:translateY(-7px)} }
@keyframes login-glow { from{opacity:.4;transform:translateY(0)} to{opacity:1;transform:translateY(12px)} }
@media(max-width:800px) {
 body.portal-login { padding:24px 18px; }
 .portal-login .access-shell { max-width:470px; grid-template-columns:minmax(0,1fr); border-radius:20px; }
 .portal-login .access-story { padding:26px 28px; gap:0; }
 .portal-login .story-copy,.portal-login .operation-art,.portal-login .story-foot { display:none; }
 .portal-login .access-form-panel { padding:32px 28px; }
 .portal-login h2 { font-size:28px; }
 .portal-login .access-form { margin-top:26px; }
}
@media(max-width:380px) {
 body.portal-login { padding:16px 12px; }
 .portal-login .access-story { padding:23px 22px; }
 .portal-login .access-form-panel { padding:28px 22px; }
 .portal-login h2 { font-size:26px; }
 .portal-login .access-help a { display:inline-block; }
}
@media(max-height:650px) and (min-width:801px) {
 body.portal-login { justify-content:flex-start; padding-top:24px; }
 .portal-login .operation-art { max-width:240px; }
 .portal-login .access-story { gap:20px; padding:32px 40px; }
 .portal-login .access-form-panel { padding-top:32px; padding-bottom:32px; }
}
@media(prefers-reduced-motion:reduce) {
 .portal-login * { transition:none !important; animation:none !important; }
}