/* Proton's orbital identity stays in the brand panel; the form remains quiet. */
.login-view{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.login-brand{padding:clamp(32px,4vw,76px);background:#101b35;isolation:isolate}
.login-brand::before,.login-brand::after{content:"";position:absolute;pointer-events:none;z-index:-1;width:760px;height:360px;border:1px solid #38bdf826;border-radius:50%;right:-340px;top:20%;transform:rotate(-38deg)}
.login-brand::after{border-color:#34d39920;transform:rotate(38deg);top:32%;right:-380px}
.login-brand .wordmark{font-size:36px;gap:14px}
.login-brand .wordmark img{width:56px;height:56px;border-radius:14px}
.login-story{max-width:620px;margin:48px 0 32px}
.login-story h1{font-size:clamp(34px,3.4vw,62px);font-weight:750;line-height:1.12;letter-spacing:-1.8px;margin-bottom:20px;text-wrap:balance}
.login-story p{color:#b3c2da;font-size:16px;max-width:400px;line-height:1.65}
.login-story .brand-line{width:44px;height:3px;background:#38bdf8;margin-bottom:28px}
.login-illustration{border:0;padding:0;margin-top:28px;max-width:470px}
.login-devices-img{max-width:470px;filter:none;transform:none!important;mask-image:none}
.login-hero-author{margin-top:18px;color:#9aaccc}
.login-brand>small{color:#9aaccc;font-size:12px}
.login-form-wrap{padding:48px clamp(28px,5vw,96px);background:#fff}
.login-form-wrap form{max-width:410px}
.login-form-wrap .eyebrow{font-size:13px;color:#2563eb;margin-bottom:12px}
.login-form-wrap h2{font-size:32px;letter-spacing:-1px;line-height:1.2;margin-bottom:12px}
.login-form-wrap .muted{font-size:14px;line-height:1.6;margin-bottom:28px}
.login-form-wrap .login-company{cursor:default;background:#f8fafc;border:1px solid #e2e8f0;border-left:3px solid #2563eb;padding:14px 16px;border-radius:10px;margin-bottom:28px}
.login-form-wrap .login-company:hover{background:#f8fafc;border-color:#e2e8f0;border-left-color:#2563eb}
.login-company-chevron{display:none}
.login-company-meta strong{font-size:14px}
.login-company-badge{box-shadow:none;background:#eef4ff;width:40px;height:40px}
.login-input-group{margin-bottom:20px}
.login-input-group input{height:54px;border-color:#d5dce7;border-radius:10px;background:#fff;transition:border-color 160ms ease,box-shadow 160ms ease}
.login-input-group input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb12;outline:none}
.login-options-row{margin-top:4px;margin-bottom:24px;gap:12px}
.login-form-wrap .btn-login-submit{height:54px;border-radius:10px;box-shadow:0 5px 14px #2563eb1c;font-size:15px}
.login-form-wrap .demo-quick-access{
  margin-top:20px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:14px 14px 12px;
  box-shadow:0 1px 3px rgba(0,0,0,0.02);
  transition:border-color 160ms ease;
}
.login-form-wrap .demo-quick-access:hover{
  border-color:#cbd5e1;
}
.demo-qa-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.demo-qa-title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.demo-qa-badge{
  display:inline-flex;
  align-items:center;
  font-size:10px;
  font-weight:750;
  letter-spacing:0.04em;
  color:#1d4ed8;
  background:#dbeafe;
  border:1px solid #bfdbfe;
  padding:2px 7px;
  border-radius:999px;
  line-height:1;
}
.demo-qa-title-wrap strong{
  font-size:12px;
  font-weight:700;
  color:#1e293b;
}
.demo-qa-action-hint{
  font-size:10.5px;
  color:#64748b;
  font-weight:500;
}
.demo-qa-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.btn-demo-qa{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 9px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  background:#fff;
  transition:transform 140ms ease,box-shadow 140ms ease,border-color 140ms ease,background-color 140ms ease;
  user-select:none;
}
.btn-demo-qa:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(15,23,42,0.06);
}
.btn-demo-qa:active{
  transform:translateY(0);
}
.btn-demo-qa.active-role{
  box-shadow:0 0 0 2px #2563eb,0 2px 6px rgba(37,99,235,0.15)!important;
}
.qa-icon{
  font-size:16px;
  line-height:1;
  flex-shrink:0;
}
.qa-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.qa-role-name{
  font-size:11.5px;
  font-weight:700;
  line-height:1.2;
}
.qa-role-desc{
  font-size:9.5px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
}
.btn-demo-qa.role-admin{
  background:#eff6ff;
  border-color:#bfdbfe;
}
.btn-demo-qa.role-admin .qa-role-name{color:#1d4ed8}
.btn-demo-qa.role-admin .qa-role-desc{color:#3b82f6}
.btn-demo-qa.role-admin:hover{border-color:#93c5fd;background:#e0edff}

.btn-demo-qa.role-supervisor{
  background:#f5f3ff;
  border-color:#ddd6fe;
}
.btn-demo-qa.role-supervisor .qa-role-name{color:#6d28d9}
.btn-demo-qa.role-supervisor .qa-role-desc{color:#8b5cf6}
.btn-demo-qa.role-supervisor:hover{border-color:#c4b5fd;background:#ede9fe}

.btn-demo-qa.role-cajero{
  background:#ecfdf5;
  border-color:#a7f3d0;
}
.btn-demo-qa.role-cajero .qa-role-name{color:#047857}
.btn-demo-qa.role-cajero .qa-role-desc{color:#059669}
.btn-demo-qa.role-cajero:hover{border-color:#6ee7b7;background:#d1fae5}

@media(max-width:440px){
  .demo-qa-grid{grid-template-columns:1fr;gap:6px}
  .demo-qa-action-hint{display:none}
}
@keyframes login-content-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes login-orbit-enter{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
@keyframes login-spinner{to{transform:rotate(1turn)}}
@keyframes pos-shell-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.login-view.is-entering .login-brand>.wordmark,.login-view.is-entering .login-story,.login-view.is-entering .login-form-wrap form{animation:login-content-enter 240ms cubic-bezier(.23,1,.32,1) both}
.login-view.is-entering .login-story{animation-delay:45ms}
.login-view.is-entering .login-form-wrap form{animation-delay:75ms}
.login-view.is-entering .login-brand::before,.login-view.is-entering .login-brand::after{animation:login-orbit-enter 300ms cubic-bezier(.23,1,.32,1) both}
.login-view.is-entering .login-brand::after{animation-delay:55ms}
.btn-login-submit[aria-busy=true]::before{content:"";width:16px;height:16px;border:2px solid #ffffff80;border-top-color:#fff;border-radius:50%;animation:login-spinner 700ms linear infinite}
.btn-login-submit[aria-busy=true] svg{display:none}
.app-shell.is-entering{animation:pos-shell-enter 190ms cubic-bezier(.23,1,.32,1) both}
@media(max-width:1100px){.login-brand{padding:36px}.login-form-wrap{padding:40px 32px}.login-story h1{font-size:36px;letter-spacing:-1px}.login-form-wrap h2{font-size:28px}}
@media(max-width:700px){.login-view{grid-template-columns:1fr}.login-brand{padding:28px 24px}.login-brand .wordmark{font-size:29px}.login-brand .wordmark img{width:44px;height:44px}.login-story{margin:28px 0 0;max-width:none}.login-story h1{font-size:32px;margin-bottom:10px}.login-story p{font-size:14px;margin-bottom:0}.login-story h1 br{display:none}.login-illustration,.login-hero-author,.login-brand>small{display:none}.login-form-wrap{padding:32px 24px 40px}.login-form-wrap form{max-width:440px}.login-brand::before,.login-brand::after{top:-80px;right:-480px}.login-options-row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.login-view *{transition:none!important}.login-view.is-entering .login-brand>.wordmark,.login-view.is-entering .login-story,.login-view.is-entering .login-form-wrap form,.login-view.is-entering .login-brand::before,.login-view.is-entering .login-brand::after,.app-shell.is-entering{animation:none!important}.btn-login-submit[aria-busy=true]::before{display:none}}
/* Scale the composition with the viewport, instead of keeping a small form
   and illustration in the middle of increasingly empty panels. */
@media(min-width:1400px){
 .login-view{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);min-height:100dvh}
 .login-brand{padding:clamp(44px,3.5vw,112px)}
 .login-story{max-width:none;width:100%;margin:clamp(28px,4vh,64px) 0}
 .login-story h1{font-size:clamp(48px,3.3vw,96px);letter-spacing:-.035em}
 .login-story p{font-size:clamp(17px,1.05vw,26px);max-width:90%}
 .login-illustration{width:100%;max-width:none;margin-top:clamp(20px,3vh,48px)}
 .login-devices-img{width:92%;max-width:880px;max-height:43dvh;object-fit:contain;object-position:left center}
 .login-brand::before,.login-brand::after{width:80vw;height:38vw;right:-48vw}
 .login-form-wrap{padding:clamp(32px,4vh,80px) clamp(40px,4vw,128px)}
 .login-form-wrap form{width:100%;max-width:clamp(460px,29vw,720px)}
 .login-form-wrap h2{font-size:clamp(32px,2vw,48px)}
 .login-form-wrap .muted{font-size:clamp(14px,.9vw,20px)}
 .login-form-wrap .eyebrow,.login-input-group,.login-company-meta strong{font-size:clamp(14px,.85vw,20px)}
 .login-input-group input,.login-form-wrap .btn-login-submit{height:clamp(54px,3.3vw,76px);font-size:clamp(15px,.9vw,21px)}
 .login-form-wrap .login-company{padding:clamp(14px,1vw,24px);margin-bottom:clamp(24px,2.5vh,40px)}
 .login-input-group{margin-bottom:clamp(20px,2.3vh,36px)}
 .login-form-wrap .demo-note{font-size:clamp(12px,.75vw,17px)}
 .login-options-row{font-size:clamp(13px,.8vw,18px)}
}
@media(min-width:1400px) and (max-height:800px){
 .login-brand{padding-top:28px;padding-bottom:28px}
 .login-story{margin:20px 0}
 .login-story h1{font-size:clamp(42px,3vw,66px);margin-bottom:12px}
 .login-devices-img{max-height:34dvh}
 .login-form-wrap{padding-top:24px;padding-bottom:24px}
 .login-input-group{margin-bottom:16px}
}