/* Login inspired by the ATLAS office reference. Authentication stays in login.php. */
body.atlas-login-page--vision { overflow: auto; background: #0b1e37; color: #163454; }
.atlas-login-page--vision .atlas-login-shell,
.atlas-login-page--vision .atlas-login-scene,
.atlas-login-page--vision .atlas-login-access,
.atlas-login-page--vision .atlas-login-card { box-sizing: border-box; }
.atlas-login-page--vision .atlas-login-shell {
  display: grid;
  grid-template-columns: minmax(0, 57%) minmax(0, 43%);
  min-height: 100vh;
  overflow: hidden;
  background: url('../../img/login-atlas-office-v1.png') center center / cover no-repeat;
}
.atlas-login-page--vision .atlas-login-scene {
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 100vh;
  overflow: visible;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(90deg, rgba(5, 21, 42, .28), rgba(8, 32, 66, .15) 70%, transparent);
}
.atlas-login-page--vision .atlas-login-scene:before {
  position: absolute;
  inset: 0;
  display: block;
  z-index: -1;
  content: "";
  background: linear-gradient(136deg, transparent 30%, rgba(33, 123, 230, .07) 62%, rgba(99, 73, 212, .05) 100%);
}
.atlas-login-page--vision .atlas-login-scene:after {
  position: absolute;
  inset: auto 0 0;
  display: block;
  height: 19%;
  content: "";
  pointer-events: none;
  background: linear-gradient(transparent, rgba(2, 13, 28, .55));
}
.atlas-scene-logo {
  position: absolute;
  z-index: 3;
  top: clamp(54px, 9.5vh, 100px);
  left: clamp(46px, 7vw, 100px);
  display: block;
  width: clamp(150px, 12.5vw, 180px);
  height: auto;
  filter: drop-shadow(0 9px 24px rgba(0, 9, 25, .28));
}
.atlas-scene-monogram {
  position: absolute;
  top: -6%;
  right: -38%;
  width: min(105%, 900px);
  height: 99%;
  opacity: .59;
  pointer-events: none;
  transform: rotate(-1deg);
  animation: atlas-mark-drift 9s ease-in-out infinite;
}
.atlas-scene-monogram img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(19, 127, 255, .36));
}
.atlas-login-page--vision .atlas-login-message {
  position: absolute;
  z-index: 2;
  top: 36%;
  bottom: auto;
  left: clamp(46px, 7vw, 100px);
  display: block;
  width: min(600px, 76%);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  animation: none;
}
.atlas-login-page--vision .atlas-login-message:before,
.atlas-login-page--vision .atlas-login-message:after { display: none !important; content: none !important; }
.atlas-scene-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  color: #c9e4fa;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 800;
  letter-spacing: .27em;
  text-transform: uppercase;
  white-space: nowrap;
}
.atlas-scene-eyebrow:before,
.atlas-scene-eyebrow:after { display: block; width: 48px; height: 1px; background: #31bafa; content: ""; }
.atlas-scene-eyebrow:after { flex: 1; opacity: .58; }
.atlas-login-page--vision .atlas-login-message h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(39px, 4.2vw, 66px);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-shadow: 0 9px 30px rgba(0, 12, 30, .23);
}
.atlas-login-page--vision .atlas-login-message h1 strong {
  color: #89dffc;
  font-weight: 850;
  background: linear-gradient(90deg, #9beaff 4%, #548cff 57%, #bb83f2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.atlas-login-page--vision .atlas-login-message p {
  max-width: 510px;
  margin: 21px 0 0;
  color: #deebf8;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 450;
  line-height: 1.5;
  text-shadow: 0 3px 12px rgba(0, 12, 30, .2);
}
.atlas-scene-lightline {
  position: absolute;
  z-index: 3;
  bottom: 22%;
  left: 0;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, #32bcff, #6053ed 70%, transparent);
  box-shadow: 0 0 10px rgba(68, 168, 255, .73);
}
.atlas-scene-lightline:after {
  position: absolute;
  top: -3px;
  left: 35%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d7f6ff;
  box-shadow: 0 0 15px 5px rgba(79, 175, 255, .67);
  content: "";
}
.atlas-login-page--vision .atlas-login-access {
  position: relative;
  inset: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  min-height: 100vh;
  padding: 42px clamp(26px, 3.3vw, 54px) 42px clamp(8px, 1vw, 18px);
  overflow: visible;
  clip-path: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.atlas-login-page--vision .atlas-login-access:before,
.atlas-login-page--vision .atlas-login-access:after { display: none !important; content: none !important; }
.atlas-login-page--vision .atlas-login-card {
  position: relative;
  width: min(445px, 100%);
  max-width: none;
  margin: -66px 0 0;
  padding: clamp(30px, 3vw, 44px);
  border: 1px solid rgba(143, 199, 246, .87);
  border-radius: 19px;
  background: rgba(236, 246, 255, .89);
  box-shadow: 0 25px 68px rgba(11, 41, 84, .27), inset 0 1px 0 rgba(255, 255, 255, .97);
  backdrop-filter: blur(21px);
}
.atlas-login-page--vision .atlas-login-language {
  position: relative;
  display: block;
  width: max-content;
  min-height: 0;
  margin: -21px -19px 32px auto;
}
.atlas-login-page--vision .atlas-login-language summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 6px 10px;
  border: 1px solid #d3e5f6;
  border-radius: 10px;
  background: #fff;
  color: #18385d;
  font-size: 11px;
  font-weight: 750;
  list-style: none;
  cursor: pointer;
}
.atlas-login-page--vision .atlas-login-language summary::-webkit-details-marker { display: none; }
.atlas-login-page--vision .atlas-login-language summary:focus-visible { outline: 2px solid #178af0; outline-offset: 2px; }
.atlas-language-globe { font-size: 12px; line-height: 1; }
.atlas-language-caret { margin-left: 6px; font-size: 17px; line-height: .6; }
.atlas-language-current--en { display: none; }
html[lang="en"] .atlas-language-current--es { display: none; }
html[lang="en"] .atlas-language-current--en { display: inline; }
.atlas-login-language-options {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 125px;
  padding: 4px;
  border: 1px solid #d4e5f5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 9px 25px rgba(19, 74, 127, .15);
}
.atlas-login-page--vision .atlas-login-language-options button {
  width: 100%;
  min-height: 29px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #345675;
  font-size: 11px;
  text-align: left;
}
.atlas-login-page--vision .atlas-login-language-options button:hover,
.atlas-login-page--vision .atlas-login-language-options button[aria-pressed="true"] { background: #eaf4ff; color: #086cc7; }
.atlas-login-page--vision .atlas-login-card h2 {
  margin: 0;
  color: #0e2850;
  font-size: clamp(30px, 2.7vw, 39px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.atlas-login-subtitle { margin: 5px 0 24px; color: #3e5978; font-size: 13px; }
.atlas-login-page--vision .atlas-login-form { gap: 11px; }
.atlas-login-page--vision .atlas-login-field { margin: 0; }
.atlas-login-page--vision .atlas-login-input {
  height: 48px;
  padding: 0 10px;
  border: 1px solid #d0e2f3;
  border-radius: 9px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 3px 12px rgba(56, 119, 182, .04);
}
.atlas-login-page--vision .atlas-login-input:focus-within { border-color: #3d9aee; box-shadow: 0 0 0 3px rgba(40, 144, 237, .13); }
.atlas-login-page--vision .atlas-login-input > .atlas-line-icon { flex: none; width: 17px; height: 17px; margin: 0 12px 0 3px; color: #335777; }
.atlas-login-page--vision .atlas-login-input input { min-width: 0; height: 45px; padding: 0 36px 0 0; color: #123456; font-size: 13px; }
.atlas-login-page--vision .atlas-login-input input::placeholder { color: #4e6681; opacity: 1; }
.atlas-login-page--vision .atlas-login-password-toggle { right: 4px; width: 38px; height: 38px; color: #4d6e8e; }
.atlas-login-page--vision .atlas-login-options { margin: 4px 0 0; color: #35526f; font-size: 11px; }
.atlas-login-page--vision .atlas-login-options label { color: #35526f; font-weight: 600; }
.atlas-login-page--vision .atlas-login-options a { color: #0b73d9; font-weight: 700; }
.atlas-login-page--vision .atlas-login-submit {
  height: 47px;
  margin-top: 6px;
  border-radius: 8px;
  background: linear-gradient(100deg, #0b83f0, #1570e9 58%, #7650eb);
  font-size: 13px;
  box-shadow: 0 11px 21px rgba(36, 103, 211, .21);
}
.atlas-login-page--vision .atlas-login-submit:hover,
.atlas-login-page--vision .atlas-login-submit:focus-visible { transform: translateY(-1px); box-shadow: 0 14px 25px rgba(36, 103, 211, .28); }
.atlas-login-page--vision .atlas-login-footer { position: static; margin: 28px 0 0; padding-top: 17px; border-top: 1px solid #c9def1; color: #6683a0; font-size: 10px; text-align: center; }
.atlas-login-page--vision .atlas-login-alert { margin: 0 0 16px; }
.atlas-login-page--vision .atlas-login-help { margin-top: 15px; }
.atlas-login-page--vision .atlas-login-step { margin-bottom: 12px; }
@keyframes atlas-mark-drift { 0%, 100% { transform: translateY(-6px) rotate(-1deg); } 50% { transform: translateY(8px) rotate(1deg); } }
@media (max-width: 1100px) {
  .atlas-login-page--vision .atlas-login-shell { grid-template-columns: minmax(0, 56%) minmax(0, 44%); }
  .atlas-login-page--vision .atlas-login-access { padding-right: 22px; }
  .atlas-login-page--vision .atlas-login-card { padding: 30px 28px; }
  .atlas-login-page--vision .atlas-login-message { width: 81%; }
  .atlas-login-page--vision .atlas-login-message h1 { font-size: clamp(37px, 4.4vw, 52px); }
}
@media (max-width: 760px) {
  .atlas-login-page--vision .atlas-login-shell { display: flex; flex-direction: column; background-position: center top; }
  .atlas-login-page--vision .atlas-login-scene { width: 100%; min-height: 355px; }
  .atlas-scene-logo { top: 23px; left: 27px; width: 108px; }
  .atlas-scene-monogram { top: 3%; right: -3%; width: 48%; height: 82%; }
  .atlas-login-page--vision .atlas-login-message { top: 46%; left: 27px; width: 79%; }
  .atlas-scene-eyebrow { gap: 8px; margin-bottom: 12px; font-size: 8px; letter-spacing: .16em; }
  .atlas-scene-eyebrow:before { width: 21px; }
  .atlas-login-page--vision .atlas-login-message h1 { font-size: clamp(28px, 6.5vw, 41px); }
  .atlas-login-page--vision .atlas-login-message p { max-width: 340px; margin-top: 12px; font-size: 11px; line-height: 1.42; }
  .atlas-scene-lightline { bottom: 7%; width: 36%; }
  .atlas-login-page--vision .atlas-login-access { width: 100%; min-height: auto; justify-content: center; padding: 0 18px 35px; background: linear-gradient(180deg, rgba(231, 243, 255, .8), rgba(231, 243, 255, .67) 70%, transparent); }
  .atlas-login-page--vision .atlas-login-card { width: 100%; max-width: 445px; margin: -20px auto 0; padding: 28px 24px 24px; }
  .atlas-login-page--vision .atlas-login-language { margin: -10px -7px 25px auto; }
}
@media (max-width: 390px) {
  .atlas-login-page--vision .atlas-login-scene { min-height: 330px; }
  .atlas-login-page--vision .atlas-login-message { top: 47%; }
  .atlas-login-page--vision .atlas-login-message h1 { font-size: 27px; }
  .atlas-login-page--vision .atlas-login-message p { font-size: 10px; }
  .atlas-login-page--vision .atlas-login-card { padding: 25px 19px 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-login-page--vision *, .atlas-login-page--vision *:before, .atlas-login-page--vision *:after { animation: none !important; transition: none !important; }
}
