/* Pantalla de inicio de sesión: tarjeta central sobre fondo blanco hueso */
.lg { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: #f6f3ec; color: #1b2433; font-family: inherit; }
.lg-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid #e6e1d6; border-radius: 14px;
  padding: 36px 32px 30px; box-shadow: 0 1px 2px rgba(27,36,51,.05), 0 12px 32px -12px rgba(27,36,51,.14); }
.lg-mark { width: 44px; height: 44px; border-radius: 11px; background: #121c2d; color: #fff; display: grid; place-items: center; margin: 0 auto 20px; }
.lg-mark svg { width: 22px; height: 22px; }
.lg h1 { margin: 0; text-align: center; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.lg-sub { margin: 6px 0 26px; text-align: center; font-size: 14px; color: #6b7384; }
.lg form { display: grid; gap: 16px; }
.lg label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #3a4357; }
.lg input { width: 100%; height: 44px; padding: 0 14px; font: inherit; font-size: 16px; /* 16px evita el zoom en iPhone */
  color: #1b2433; background: #fff; border: 1px solid #d6d0c3; border-radius: 9px; outline: none; transition: border-color .15s, box-shadow .15s; }
.lg input:focus { border-color: #1f5fd6; box-shadow: 0 0 0 3px rgba(31,95,214,.15); }
.lg-pass { position: relative; }
.lg-pass input { padding-right: 62px; }
.lg-eye { position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 10px; border: 0; background: transparent;
  color: #1f5fd6; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.lg-eye:hover { background: #eef3fd; }
.lg-err { padding: 10px 12px; font-size: 13.5px; color: #9b1c1c; background: #fdf0ef; border: 1px solid #f3cfcc; border-radius: 9px; }
.lg-btn { height: 46px; border: 0; border-radius: 9px; background: #1f5fd6; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.lg-btn:hover { background: #1a52bb; }
.lg-btn:disabled { opacity: .65; cursor: wait; }
.lg-foot { margin: 22px 0 0; text-align: center; font-size: 12.5px; color: #8a8f9c; }
@media (max-width: 480px) {
  .lg { place-items: start center; padding-top: 12vh; }
  .lg-card { padding: 28px 20px 24px; border-radius: 12px; }
}
@media (min-width: 768px) and (max-width: 1100px) { .lg-card { max-width: 440px; } }
.lg input::placeholder { color: #a3a8b3; font-weight: 400; }