/* Login de Setec Estacionamiento: mismo formato que los otros sistemas de Setec
   (fondo de imagen, tarjeta blanca, íconos en los campos y contacto de Setec abajo).
   Para usar una foto propia: dejar un archivo assets/login-bg.jpg (login.php la detecta y la pone sobre la ilustración). */
:root { color-scheme: light; }
body.lg {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 28px 16px;
  background: url("login-bg.svg") center / cover no-repeat, #0c1424;
  font-family: var(--body); color: #172033;
  position: relative; isolation: isolate;
}
/* velo oscuro: la tarjeta y los textos de abajo siempre se leen bien sobre la imagen */
body.lg::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(8, 13, 26, .52) 0%, rgba(8, 13, 26, .84) 100%);
}

.lg-card {
  width: min(440px, 100%); box-sizing: border-box;
  background: #fff; color: #172033; border-radius: 18px; border-top: 5px solid #2B55E6;
  padding: 26px 30px 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.lg-head { text-align: center; }
.lg-logo { width: 68px; height: 68px; display: block; margin: 0 auto 12px; border-radius: 18px; box-shadow: 0 8px 20px rgba(43, 85, 230, .35); }
.lg-negocio { font: 700 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #2B55E6; overflow-wrap: anywhere; }
.lg-card h1 { margin: 6px 0 4px; font: 800 30px/1.1 var(--display); color: #172033; }
.lg-sub { margin: 0 0 18px; font-size: 15px; line-height: 1.4; color: #4B576B; }

.lg-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #FDECEC; border: 1px solid #F3B4B4; color: #9B1C1C; font-size: 14px; font-weight: 600; }

.lg-field { margin-bottom: 14px; }
.lg-field label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #2A364C; }
.lg-input { position: relative; }
.lg-input > svg.ic { position: absolute; left: 14px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; fill: none; stroke: #6B7789; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lg-input input {
  width: 100%; box-sizing: border-box; height: 50px; padding: 0 46px 0 44px;
  font: 500 17px var(--body); color: #172033; background: #F4F6FA;
  border: 1.5px solid #CBD3E0; border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.lg-input input:focus { border-color: #2B55E6; background: #fff; box-shadow: 0 0 0 4px rgba(43, 85, 230, .18); }
.lg-input input:-webkit-autofill { -webkit-text-fill-color: #172033; box-shadow: 0 0 0 100px #FFF9C4 inset; }
.lg-eye { position: absolute; right: 6px; top: 50%; width: 38px; height: 38px; margin-top: -19px; padding: 0; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; cursor: pointer; color: #6B7789; }
.lg-eye:hover { background: #E7ECF5; color: #172033; }
.lg-eye:focus-visible { outline: 3px solid rgba(43, 85, 230, .45); }
.lg-eye svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lg-eye .off { display: none; }
.lg-eye[aria-pressed="true"] .on { display: none; }
.lg-eye[aria-pressed="true"] .off { display: block; }

.lg-btn {
  width: 100%; height: 52px; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 18px var(--body); letter-spacing: .02em; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #3566F2, #2347C9); border: 0; border-radius: 12px;
  box-shadow: 0 10px 22px rgba(43, 85, 230, .38); transition: transform .08s, filter .15s;
}
.lg-btn:hover { filter: brightness(1.08); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: 3px solid rgba(43, 85, 230, .55); outline-offset: 2px; }
.lg-btn[disabled] { filter: grayscale(.3) brightness(.9); cursor: wait; }
.lg-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.lg-olvido { margin-top: 14px; text-align: right; font-size: 14px; }
.lg-olvido summary { display: inline-block; cursor: pointer; color: #1E3FB8; font-weight: 600; list-style: none; }
.lg-olvido summary::-webkit-details-marker { display: none; }
.lg-olvido summary:hover { text-decoration: underline; }
.lg-olvido p { margin: 8px 0 0; padding: 10px 12px; text-align: left; line-height: 1.45; color: #2A364C; background: #EEF2FA; border-radius: 10px; }
.lg-olvido a { color: #1E3FB8; font-weight: 600; }

.lg-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.lg-pie a {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; min-height: 40px; box-sizing: border-box;
  font: 500 15px var(--body); color: #fff; text-decoration: none;
  background: rgba(10, 16, 32, .88); border: 1px solid rgba(255, 255, 255, .30); border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lg-pie a:hover { background: rgba(10, 16, 32, .96); border-color: rgba(255, 255, 255, .5); }
.lg-pie a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lg-pie svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lg-pie b { font-weight: 700; }
.lg-copy { margin: 0; padding: 7px 16px; text-align: center; font-size: 14px; color: #E6EBF5; background: rgba(10, 16, 32, .88); border-radius: 18px; }
.lg-copy b { color: #fff; }

@media (max-width: 480px) {
  .lg-card { padding: 22px 20px 20px; }
  .lg-card h1 { font-size: 27px; }
  .lg-pie a { width: 100%; justify-content: center; }
}