/* Visual da tela de login (vendedor e parceiro). Copiado igual no <style id="estilo-login"> de prototype/index.html (troque nos dois).
   Vale só para #view-login; a classe lg-p, ligada por setLoginRole, troca as cores e o lado esquerdo para o parceiro. */
#view-login:not(.lg-p) .ls-so-p,#view-login.lg-p .ls-so-v{display:none}

/* Lado esquerdo */
#view-login .login-side{padding:44px 52px;justify-content:flex-start;background:radial-gradient(900px 520px at 85% 95%,rgba(244,63,94,.30),transparent 60%),radial-gradient(700px 500px at 10% 0%,rgba(139,92,246,.38),transparent 60%),linear-gradient(160deg,#1A0F3A 0%,#221550 55%,#2A1660 100%)}
#view-login.lg-p .login-side{background:radial-gradient(900px 520px at 85% 95%,rgba(94,234,212,.26),transparent 60%),radial-gradient(700px 500px at 10% 0%,rgba(20,184,166,.30),transparent 60%),linear-gradient(160deg,#04261F 0%,#06302A 45%,#0D9488 100%)}
#view-login .login-side::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 70% 55%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 55%,#000 30%,transparent 75%)}
#view-login .login-side::after{content:none}
#view-login .login-side>*{position:relative}
#view-login .login-brand{height:46px;width:200px;aspect-ratio:auto;background:linear-gradient(100deg,#fff 0%,#FBCFE8 50%,#FB7185 100%);-webkit-mask:var(--logo) left center/contain no-repeat;mask:var(--logo) left center/contain no-repeat}
#view-login.lg-p .login-brand{background:linear-gradient(100deg,#fff 0%,#b8f5e4 45%,#5eead4 100%)}
#view-login .ls-ttl{margin-top:36px;max-width:460px}
#view-login .ls-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#E9D5FF;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:6px 12px;border-radius:99px;margin-bottom:16px}
#view-login.lg-p .ls-pill{color:#CCFBF1}
#view-login .ls-pill i{width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
#view-login .login-side h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:42px;line-height:1.06;letter-spacing:-.03em;font-weight:700;max-width:none;margin:0}
#view-login .ls-gr{background:linear-gradient(90deg,#FB7185,#C084FC);-webkit-background-clip:text;background-clip:text;color:transparent}
#view-login.lg-p .ls-gr{background-image:linear-gradient(90deg,#5EEAD4,#A7F3D0)}
#view-login #ls-text{margin-top:14px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.72);max-width:none}

/* Cartões flutuantes */
#view-login .ls-stage{height:270px;width:520px;margin:28px 0 20px;flex-shrink:0}
#view-login .ls-stage.ls-so-p{margin-bottom:34px}
#view-login .ls-fc{position:absolute;background:rgba(255,255,255,.97);color:#160D30;border-radius:16px;box-shadow:0 20px 44px rgba(4,4,20,.45);padding:12px 14px;display:flex;gap:11px;align-items:center;animation:ls-flutua 6s ease-in-out infinite}
@keyframes ls-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#view-login .ls-fc small{display:block;font-size:11px;color:#6B6585}
#view-login .ls-fc b{font-size:13px;display:block;line-height:1.3}
#view-login .ls-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-weight:700;font-size:15px}
#view-login .ls-ic-v{background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff}
#view-login .ls-ic-g{background:#D1FAE5;color:#059669}
#view-login .ls-ic-a{background:#FEF3C7;color:#B45309}
#view-login .ls-ic-t{background:linear-gradient(135deg,#0D9488,#14B8A6);color:#fff}
#view-login .ls-big{display:block;padding:16px 18px;color:#fff;width:220px;background:linear-gradient(135deg,#F43F5E,#A855F7)}
#view-login.lg-p .ls-big{background:linear-gradient(135deg,#0F766E,#14B8A6)}
#view-login .ls-big small{color:rgba(255,255,255,.82)}
#view-login .ls-big .ls-n{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:28px;letter-spacing:-.02em;margin-top:2px}
#view-login .ls-big .ls-d{font-size:11.5px;color:rgba(255,255,255,.85);margin-top:2px}
#view-login .ls-bar{height:5px;border-radius:9px;background:#EDE9FE;margin-top:7px;overflow:hidden;width:150px}
#view-login .ls-bar i{display:block;height:100%;width:72%;border-radius:9px;background:linear-gradient(90deg,#8B5CF6,#F43F5E)}
#view-login .ls-queue{display:block;width:250px;padding:14px}
#view-login .ls-queue-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6B6585;margin-bottom:8px}
#view-login .ls-queue-h b{font-size:12px;color:#0F766E;background:#CCFBF1;padding:3px 8px;border-radius:99px}
#view-login .ls-qr{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #F0EEF6;font-size:12.5px}
#view-login .ls-qr span{font-family:monospace;font-size:11px;color:#6B6585}
#view-login .ls-qr .ls-ok{margin-left:auto;flex-shrink:0;width:20px;height:20px;border-radius:6px;background:#D1FAE5;color:#059669;display:grid;place-items:center;font:700 11px 'Inter',sans-serif}
#view-login .ls-qr .ls-no{margin-left:auto;flex-shrink:0;width:20px;height:20px;border-radius:6px;border:1.5px dashed #CBD5E1}
#view-login .ls-v1{left:0;top:6px;animation-delay:.3s}
#view-login .ls-v2{left:258px;top:62px;animation-delay:1.2s}
#view-login .ls-v3{left:0;top:138px;animation-delay:2s}
#view-login .ls-v4{left:280px;top:160px;animation-delay:.8s}
#view-login .ls-p1{left:0;top:0;animation-delay:.4s}
#view-login .ls-p2{left:272px;top:22px;animation-delay:1.4s}
#view-login .ls-p3{left:300px;top:104px;animation-delay:2.1s}
#view-login .ls-p4{left:270px;top:186px;animation-delay:.9s}
@media (prefers-reduced-motion:reduce){#view-login .ls-fc{animation:none}}

/* Pontos e rodapé do lado esquerdo */
#view-login .login-points{gap:8px;max-width:460px;margin:0 0 auto}
#view-login .login-points li{display:flex;gap:11px;align-items:center;font-size:14px;color:rgba(255,255,255,.88);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:9px 14px}
#view-login .login-points li::before{content:none}
#view-login .login-points li i{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;flex-shrink:0;background:rgba(251,113,133,.18);color:#FDA4AF}
#view-login.lg-p .login-points li i{background:rgba(94,234,212,.18);color:#5EEAD4}
#view-login .login-side .foot{margin-top:18px}
#view-login .ls-mini{display:none}

/* Formulário */
#view-login .login-main{padding:40px 28px;background:#F7F5FC;position:relative;overflow:hidden}
#view-login .login-main::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:-180px;filter:blur(10px);background:radial-gradient(circle,rgba(168,85,247,.14),transparent 65%)}
#view-login.lg-p .login-main::before{background:radial-gradient(circle,rgba(20,184,166,.16),transparent 65%)}
#view-login .login-box{position:relative;max-width:430px;background:#fff;border:1px solid #EEEBF5;border-radius:24px;padding:34px 34px 28px;box-shadow:0 34px 80px rgba(22,13,48,.16),0 8px 20px rgba(22,13,48,.05)}
#view-login .role-switch{background:#F3F1F9;border-radius:14px;padding:5px;margin-bottom:26px}
#view-login .role-switch button{padding:10px;border-radius:10px;font:600 14px 'Inter',system-ui,sans-serif;color:#6B6585;display:flex;gap:7px;justify-content:center;align-items:center}
#view-login .role-switch button.on{background:#fff;color:#160D30;box-shadow:0 4px 12px rgba(22,13,48,.1)}
#view-login.lg-p .role-switch button.on{color:#0F766E}
#view-login .ls-dot{width:8px;height:8px;border-radius:50%;background:#F43F5E}
#view-login .ls-dot-p{background:#14B8A6}
#view-login .login-box h1{font-family:'Space Grotesk','Inter',sans-serif;font-size:30px;letter-spacing:-.025em;font-weight:700;margin:0}
#view-login .login-box .sub{font-size:15px;margin:6px 0 24px;line-height:1.5}
#view-login .field{margin-bottom:16px}
#view-login .lbl{font-size:13.5px;font-weight:600;color:#160D30;margin-bottom:7px}
#view-login .ls-inp{display:flex;align-items:center;gap:10px;border:1.5px solid #E5E3EE;border-radius:13px;padding:0 14px;height:50px;background:#fff;transition:border-color .15s,box-shadow .15s}
#view-login .ls-inp:focus-within{border-color:#8B5CF6;box-shadow:0 0 0 4px rgba(139,92,246,.12)}
#view-login.lg-p .ls-inp:focus-within{border-color:#14B8A6;box-shadow:0 0 0 4px rgba(20,184,166,.14)}
#view-login .ls-inp>svg{flex-shrink:0;color:#A09BB5}
#view-login .ls-inp .input{flex:1;min-width:0;width:auto;height:100%;padding:0;border:0;border-radius:0;background:transparent;font-size:15px;color:#160D30}
#view-login .ls-inp .input::placeholder{color:#A09BB5}
#view-login .ls-inp .input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:#160D30}
#view-login .ls-inp .pw-toggle{position:static;transform:none;flex-shrink:0;padding:6px 0;font-size:13px;font-weight:600;color:#8B5CF6}
#view-login.lg-p .ls-inp .pw-toggle{color:#0F766E}
#view-login #lg-btn{height:52px;border:0;border-radius:13px;color:#fff;font:600 16px 'Inter',system-ui,sans-serif;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#F43F5E,#A855F7);box-shadow:0 14px 30px rgba(244,63,94,.32)}
#view-login #lg-btn::after{content:'→'}
#view-login.lg-p #lg-btn{background:linear-gradient(135deg,#0F766E,#14B8A6);box-shadow:0 14px 30px rgba(13,148,136,.32)}
#view-login #lg-btn:hover:not(:disabled){filter:brightness(1.06)}
#view-login .login-links{margin-top:22px;padding-top:18px;border-top:1px solid #F0EEF6;gap:9px}
#view-login .login-links .link{color:#E11D48}
#view-login.lg-p .login-links .link{color:#0F766E}
#view-login #lg-partner-note{display:flex;gap:10px;align-items:flex-start;background:#F0FDFA;border:1px solid #CCFBF1;border-radius:12px;padding:11px 13px;color:#115E59;font-size:13.5px;line-height:1.45}
#view-login #lg-partner-note::before{content:'ⓘ'}

/* Telas menores: encolhe os cartões para caberem ao lado do formulário */
@media (max-width:1240px){#view-login .login-side{padding:44px 28px}}
@media (max-width:1130px){#view-login .ls-stage,#view-login .ls-stage.ls-so-p{transform:scale(.75);transform-origin:left top;margin-bottom:-48px}}

/* Celular e tablet: 3 mini cartões no topo e o formulário logo abaixo */
@media (max-width:900px){
  #view-login .login-side{padding:22px 20px 40px}
  #view-login .login-brand{height:34px;width:150px}
  #view-login .ls-stage,#view-login .login-points,#view-login .login-side .foot{display:none}
  #view-login .ls-ttl{margin-top:22px;max-width:none}
  #view-login .login-side h2{font-size:28px}
  #view-login #ls-text{font-size:14.5px;margin-top:8px}
  #view-login .ls-mini{display:flex;gap:8px;margin-top:18px}
  #view-login .ls-mini .ls-fc{position:static;animation:none;flex:1;min-width:0;padding:9px 10px;gap:8px}
  #view-login .ls-mini .ls-ic{width:28px;height:28px;font-size:13px}
  #view-login .ls-mini b{font-size:12px;white-space:nowrap}
  #view-login .ls-mini small{font-size:10.5px;white-space:nowrap}
  #view-login .login-main{padding:0;background:#fff;align-items:flex-start}
  #view-login .login-main::before{display:none}
  #view-login .login-box{max-width:none;border:0;box-shadow:none;border-radius:24px 24px 0 0;margin-top:-18px;padding:26px max(20px,calc(50% - 215px)) 30px}
  #view-login .login-box h1{font-size:25px}
}