:root.snp-login-active,
:root.snp-login-active body {
  margin: 0;
  min-height: 100%;
  background: #020b13;
}

.snp-login-gate,
.snp-login-gate * { box-sizing: border-box; }

.snp-login-gate {
  --snp-bg: #04111d;
  --snp-panel: rgba(3, 24, 40, .88);
  --snp-line: rgba(101, 213, 235, .76);
  --snp-text: #f5f9fc;
  --snp-muted: #a8b5c5;
  --snp-green: #0dd6a3;
  --snp-cyan: #22b9db;
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(470px, .88fr);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--snp-text);
  background:
    linear-gradient(90deg, rgba(0, 7, 13, .72) 0%, rgba(2, 13, 22, .46) 45%, rgba(3, 16, 27, .28) 100%),
    url("/safenet-login-business.webp") center center / cover no-repeat;
}

.snp-login-gate__veil {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 72% 44%, rgba(0, 145, 197, .15), transparent 34%),
    linear-gradient(180deg, rgba(0, 6, 12, .10), rgba(0, 9, 18, .20));
}

.snp-login-story,
.snp-login-panel { position: relative; z-index: 1; }

.snp-login-story {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px, 7vw, 132px) clamp(56px, 7.5vw, 155px) 78px;
}

.snp-login-story__content { width: min(690px, 100%); margin-top: 10px; }
.snp-login-eyebrow {
  margin-bottom: 22px;
  color: #29e4c6;
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 800;
  letter-spacing: .26em;
}

.snp-login-story h1 { margin: 0; line-height: .98; letter-spacing: -.04em; }
.snp-login-story h1 span,
.snp-login-story h1 strong { display: block; }
.snp-login-story h1 span {
  color: #fff;
  font-size: clamp(50px, 5vw, 86px);
  font-weight: 850;
}
.snp-login-story h1 strong {
  margin-top: 6px;
  color: transparent;
  background: linear-gradient(90deg, #16d49e 0%, #14cfc4 52%, #169fdb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: clamp(52px, 5.25vw, 92px);
  font-weight: 850;
}

.snp-login-benefits { list-style: none; display: grid; gap: 15px; margin: 34px 0 0; padding: 0; }
.snp-login-benefits li { display: flex; align-items: center; gap: 14px; color: #f2f5f7; font-size: clamp(16px, 1.25vw, 22px); }
.snp-login-benefits svg { width: 26px; height: 26px; flex: 0 0 26px; fill: none; stroke: #0ee1ba; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.snp-login-modules { display: grid; gap: 14px; }
.snp-login-modules--desktop { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(700px, 100%); margin-top: 82px; }
.snp-login-modules > div {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 13px 18px;
  border: 1px solid rgba(17, 216, 182, .58);
  border-radius: 14px;
  color: #f3f8fb;
  background: rgba(3, 21, 34, .58);
  box-shadow: inset 0 0 30px rgba(4, 94, 112, .06);
  backdrop-filter: blur(8px);
  font-size: 16px;
  font-weight: 650;
}
.snp-login-modules svg { width: 31px; height: 31px; fill: none; stroke: #0fe0b2; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.snp-login-panel {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 42px clamp(30px, 5vw, 92px) 42px 24px;
}

.snp-login-card {
  width: min(100%, 566px);
  padding: clamp(38px, 4vw, 58px) clamp(42px, 4.2vw, 64px) 46px;
  border: 1px solid rgba(118, 225, 245, .88);
  border-radius: 24px;
  color: var(--snp-text);
  background:
    linear-gradient(155deg, rgba(4, 36, 58, .92), rgba(2, 18, 32, .95)),
    rgba(2, 22, 37, .92);
  box-shadow: 0 0 0 1px rgba(23, 136, 177, .16), 0 24px 70px rgba(0, 0, 0, .42), inset 0 0 45px rgba(9, 82, 116, .08);
  backdrop-filter: blur(18px);
}

.snp-login-brand { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 44px; }
.snp-login-brand img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.snp-login-brand > div { display: grid; gap: 2px; }
.snp-login-brand b { color: #fff; font-size: clamp(26px, 2vw, 34px); line-height: 1; letter-spacing: -.025em; }
.snp-login-brand b strong { color: #1bd3a6; }
.snp-login-brand small { color: #b9c4d0; font-size: 14px; }

.snp-login-title { margin-bottom: 37px; }
.snp-login-title h2 { margin: 0 0 5px; color: #fff; font-size: clamp(31px, 2.4vw, 42px); line-height: 1.1; letter-spacing: -.025em; }
.snp-login-title p { margin: 0; color: #aeb9c7; font-size: 16px; }

.snp-login-label { display: block; margin: 0 0 9px; color: #f4f6f8; font-size: 13px; font-weight: 750; }
.snp-login-field {
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  border: 1px solid rgba(131, 164, 192, .49);
  border-radius: 12px;
  background: rgba(3, 22, 37, .72);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  overflow: hidden;
}
.snp-login-field:focus-within {
  border-color: rgba(62, 206, 229, .90);
  box-shadow: 0 0 0 3px rgba(25, 178, 207, .12), 0 0 22px rgba(13, 129, 180, .10);
  background: rgba(4, 29, 47, .92);
}
.snp-login-field__icon {
  position: absolute;
  left: 17px;
  top: 50%;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: #a9bed1;
  pointer-events: none;
  z-index: 2;
}
.snp-login-field__icon svg,
.snp-login-eye svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.snp-login-field input,
.snp-login-field input:focus {
  width: 100%;
  min-width: 0;
  height: 56px;
  margin: 0;
  padding: 0 54px 0 52px;
  border: 0 !important;
  outline: 0 !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  caret-color: #fff;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 15px;
}
.snp-login-field input::placeholder { color: #7f8ea0 !important; -webkit-text-fill-color: #7f8ea0 !important; opacity: 1; }

/*
 * Protección explícita para gestores de contraseñas/autofill.
 * Chrome/Edge/Safari pueden imponer amarillo; Firefox puede imponer su propio fondo.
 * Se fuerza contraste oscuro + texto claro para que las credenciales sigan legibles.
 */
.snp-login-gate input:-webkit-autofill,
.snp-login-gate input:-webkit-autofill:hover,
.snp-login-gate input:-webkit-autofill:focus,
.snp-login-gate input:-webkit-autofill:active {
  -webkit-text-fill-color: #f3f7fb !important;
  caret-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #061b2c inset !important;
  box-shadow: 0 0 0 1000px #061b2c inset !important;
  transition: background-color 99999s ease-out 0s !important;
  border-radius: 10px;
}
.snp-login-gate input:-moz-autofill {
  color: #f3f7fb !important;
  background-color: #061b2c !important;
  box-shadow: 0 0 0 1000px #061b2c inset !important;
}
.snp-login-gate input:autofill {
  color: #f3f7fb !important;
  -webkit-text-fill-color: #f3f7fb !important;
  background: #061b2c !important;
  box-shadow: 0 0 0 1000px #061b2c inset !important;
}

.snp-login-eye {
  position: absolute;
  z-index: 3;
  right: 12px;
  top: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #9ebbd2;
  background: transparent;
  cursor: pointer;
}
.snp-login-eye:hover,
.snp-login-eye:focus-visible { color: #16dbb3; background: rgba(16, 209, 175, .08); outline: 0; }

.snp-login-error {
  display: none;
  margin: -11px 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 117, 131, .34);
  border-radius: 10px;
  color: #ffd9dd;
  background: rgba(124, 22, 34, .22);
  font-size: 13px;
  line-height: 1.4;
}
.snp-login-error.is-visible { display: block; }

.snp-login-submit {
  width: 100%;
  min-height: 59px;
  display: grid;
  place-items: center;
  margin-top: 8px;
  padding: 0 22px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(90deg, #0787ef 0%, #0ebccf 47%, #10d68d 100%);
  box-shadow: 0 13px 30px rgba(0, 136, 205, .20);
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  transition: transform .16s ease, filter .16s ease;
}
.snp-login-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.snp-login-submit:focus-visible { outline: 3px solid rgba(80, 224, 229, .45); outline-offset: 3px; }
.snp-login-submit:disabled { opacity: .72; cursor: wait; }

.snp-login-help { margin-top: 28px; text-align: center; }
.snp-login-help button {
  padding: 3px 8px;
  border: 0;
  color: #12d8aa;
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.snp-login-help p { margin: 6px 0 0; color: #9faebd; font-size: 12px; line-height: 1.45; transition: color .2s ease; }
.snp-login-help p.is-emphasized { color: #e6f5f5; }

.snp-login-mobile-separator,
.snp-login-modules--mobile { display: none; }

@media (max-width: 1180px) {
  .snp-login-gate { grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr); }
  .snp-login-story { padding-inline: 58px 32px; }
  .snp-login-modules--desktop > div { font-size: 14px; padding-inline: 12px; }
  .snp-login-panel { padding-right: 40px; }
}

@media (max-width: 900px) {
  .snp-login-gate {
    display: block;
    min-height: 100dvh;
    overflow-y: auto;
    background:
      linear-gradient(180deg, rgba(1, 8, 14, .68), rgba(1, 12, 22, .78)),
      url("/safenet-login-business.webp") 72% center / cover fixed no-repeat;
  }
  .snp-login-story { display: none; }
  .snp-login-panel {
    min-height: 100dvh;
    display: block;
    padding: max(28px, env(safe-area-inset-top)) 18px max(34px, env(safe-area-inset-bottom));
  }
  .snp-login-card {
    width: min(100%, 620px);
    margin: 0 auto;
    padding: 24px 12px 26px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .snp-login-brand { display: grid; justify-items: center; gap: 14px; margin: 2px 0 43px; text-align: center; }
  .snp-login-brand img { width: 82px; height: 82px; border-radius: 22px; }
  .snp-login-brand > div { justify-items: center; }
  .snp-login-brand b { font-size: clamp(34px, 8vw, 47px); }
  .snp-login-brand small { margin-top: 5px; font-size: 17px; }
  .snp-login-title { margin-bottom: 36px; }
  .snp-login-title h2 { font-size: clamp(35px, 8vw, 44px); }
  .snp-login-title p { margin-top: 8px; font-size: 17px; }
  .snp-login-label { margin-bottom: 10px; font-size: 15px; }
  .snp-login-field { min-height: 67px; margin-bottom: 29px; border-radius: 13px; background: rgba(2, 17, 30, .76); }
  .snp-login-field input,
  .snp-login-field input:focus { height: 65px; padding-left: 62px; padding-right: 58px; font-size: 17px; }
  .snp-login-field__icon { left: 19px; width: 28px; height: 28px; }
  .snp-login-field__icon svg,
  .snp-login-eye svg { width: 27px; height: 27px; }
  .snp-login-eye { right: 13px; width: 44px; height: 44px; }
  .snp-login-submit { min-height: 66px; margin-top: 12px; font-size: 20px; border-radius: 12px; }
  .snp-login-help { margin-top: 32px; }
  .snp-login-help button { font-size: 17px; }
  .snp-login-help p { width: min(430px, 92%); margin: 8px auto 0; font-size: 14px; }
  .snp-login-mobile-separator { display: flex; align-items: center; gap: 18px; margin: 45px 0 23px; color: #aeb7c4; font-size: 14px; white-space: nowrap; }
  .snp-login-mobile-separator::before,
  .snp-login-mobile-separator::after { content: ""; flex: 1; height: 1px; background: rgba(169, 188, 205, .26); }
  .snp-login-modules--mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
  .snp-login-modules--mobile > div { min-height: 134px; flex-direction: column; gap: 12px; padding: 13px 6px; border-radius: 17px; font-size: 14px; text-align: center; }
  .snp-login-modules--mobile svg { width: 38px; height: 38px; }
}

@media (max-width: 420px) {
  .snp-login-panel { padding-inline: 14px; }
  .snp-login-card { padding-inline: 4px; }
  .snp-login-brand { margin-bottom: 37px; }
  .snp-login-brand img { width: 76px; height: 76px; }
  .snp-login-brand small { font-size: 15px; }
  .snp-login-title { margin-bottom: 31px; }
  .snp-login-field { margin-bottom: 25px; }
  .snp-login-modules--mobile { gap: 9px; }
  .snp-login-modules--mobile > div { min-height: 116px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .snp-login-gate *, .snp-login-gate *::before, .snp-login-gate *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}