/* ================================================================
   SAMAR Corporate Login Page
   scp/css/login.css  |  Versión 1.0  |  Mayo 2026
   ================================================================ */

/* ── BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { font-size: 14px; height: 100%; }
body {
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #0D0D0D;
  height: 100%;
  min-height: 100vh;
  margin: 0;
  text-align: left;
  background: linear-gradient(135deg, #1B2F57 0%, #243E73 55%, #2D5090 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
#brickwall, #background-compat, #background, #blur { display: none !important; }

/* ── LOGIN CARD ───────────────────────────────────────────────── */
#loginBox {
  width: 400px;
  max-width: 94vw;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.16);
  padding: 0;
  overflow: hidden;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  text-align: left;
  mix-blend-mode: normal;
  isolation: auto;
}
#loginBox::after, #loginBox:after { display: none !important; content: none !important; }

/* ── LOGO / HEADER AREA ───────────────────────────────────────── */
#logo { display: block; padding: 28px 32px 24px; border-bottom: 1px solid #EEF1F6; text-align: center; }
#logo a { display: inline-block; text-decoration: none; height: auto !important; }
#logo a img, #logo img { max-height: 48px; max-width: 180px; height: auto; width: auto; vertical-align: middle; outline: none; border: none; }
.valign-helper { display: none !important; }

h3#login-message {
  margin: 0;
  padding: 18px 32px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #243E73;
  line-height: 1.3;
  font-family: inherit;
}
div.banner {
  color: #5A6A7A; font-size: 13px; line-height: 1.5; text-align: center; padding: 10px 32px 0;
}
div.banner:empty { display: none; }

/* ── FORM ─────────────────────────────────────────────────────── */
form#login { padding: 20px 32px 28px; width: auto !important; margin: 0 !important; }
fieldset { border: none !important; margin: 0 !important; padding: 0 !important; }

fieldset input[type="text"],
fieldset input[type="password"],
fieldset input[type="email"],
input[type="text"],
input[type="password"],
input[type="email"] {
  display: block; width: 100%; padding: 10px 14px; font-size: 14px;
  font-family: inherit; color: #0D0D0D; background: #fff;
  border: 1px solid #DDE3EC; border-radius: 6px; margin-bottom: 14px;
  outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
fieldset input[type="text"]:focus,
fieldset input[type="password"]:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #4F638C;
  box-shadow: 0 0 0 3px rgba(36,62,115,0.12);
  background: #fff !important;
}

.submit.button, button.submit, input[type="submit"], button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 11px 20px;
  background: #243E73; color: #fff; font-size: 14px; font-weight: 600;
  font-family: inherit; border: none; border-radius: 6px; cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  margin-top: 4px; text-decoration: none;
}
.submit.button:hover, button.submit:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
  background: #2D4E8F;
  box-shadow: 0 4px 14px rgba(36,62,115,0.30);
  color: #fff; text-decoration: none;
}

h3 a#reset-link, h3 a {
  display: inline-block; color: #4F638C; font-size: 12px;
  font-weight: 400; text-decoration: none; margin-bottom: 14px;
}
h3 a:hover { color: #243E73; text-decoration: underline; }
h3 a.hidden, #reset-link.hidden { display: none !important; }
h3 { margin: 0 0 8px; text-align: left; font-size: 12px; font-weight: 400; color: inherit; }

div.or { padding: 0 32px; }
div.or hr { border: none; border-top: 1px solid #EEF1F6; margin: 4px 0 16px; }
.external-auth { padding: 0 32px 10px; text-align: center; }

#company { border-top: 1px solid #EEF1F6; padding: 12px 32px; }
#company .content { font-size: 11px; color: #8A9AAA; text-align: center; }

#poweredBy {
  margin-top: 28px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-family: inherit;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
#poweredBy a { color: rgba(255,255,255,0.60); text-decoration: none; }
#poweredBy a:hover { color: rgba(255,255,255,0.90); }
#poweredBy img.osticket-logo {
  height: 13px; width: auto; opacity: 0.50; vertical-align: middle;
  margin-left: 3px; filter: brightness(0) invert(1);
}

::placeholder { color: #9AAAB8; font-style: normal; opacity: 1; }
:-webkit-input-placeholder { color: #9AAAB8; font-style: normal; }
:-moz-placeholder { color: #9AAAB8; font-style: normal; }

input:focus {
  border: 1px solid #4F638C;
  box-shadow: 0 0 0 3px rgba(36,62,115,0.12);
  outline: none;
}

@media (max-width: 480px) {
  #loginBox { width: 96vw !important; border-radius: 8px; }
  form#login, #logo, #company, .external-auth, div.or, div.banner, h3#login-message {
    padding-left: 20px !important; padding-right: 20px !important;
  }
}

/* ── LOADING / SPINNER ────────────────────────────────────────── */
#loading {
  padding: 28px 32px !important;
  text-align: center !important;
}
#loading h1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #243E73 !important;
  margin: 0 !important;
  font-family: inherit !important;
}
#loading h1 i.icon-spinner {
  font-size: 26px !important;
  color: #4F638C !important;
}

/* ── MFA 6-DIGIT INPUT ────────────────────────────────────────── */
.mfa-hint {
  text-align: center;
  color: #5A6A7A;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.mfa-digits {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  margin: 0 0 24px !important;
}
.mfa-digit {
  width: 48px !important;
  height: 58px !important;
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1B2F57 !important;
  background: #fff !important;
  border: 2px solid #DDE3EC !important;
  border-radius: 8px !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  caret-color: transparent !important;
  -moz-appearance: textfield !important;
}
.mfa-digit::-webkit-outer-spin-button,
.mfa-digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mfa-digit:focus {
  border-color: #243E73 !important;
  box-shadow: 0 0 0 3px rgba(36,62,115,0.15) !important;
  background: #F5F8FF !important;
}
.mfa-digit.filled {
  border-color: #4F638C !important;
  background: #EEF3FF !important;
}