/* Accesos compactos: una sola jerarquía y sin contenido promocional. */
.login-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 28px 18px;
  background:
    radial-gradient(circle at 15% 15%, rgba(66,133,244,.13), transparent 23rem),
    radial-gradient(circle at 88% 84%, rgba(52,168,83,.09), transparent 24rem),
    #f5f7fb;
}
.login-shell::before,
.login-shell::after { display: none; }
.login-stage { width: 100%; max-width: 430px; }
.login-card {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  padding: 42px 38px 38px;
  border: 1px solid rgba(218,225,235,.95);
  border-radius: 22px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 65px rgba(23,43,77,.13);
}
.login-card::before { display: none; }
.login-colors { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: repeat(4,1fr); height: 6px; }
.login-colors i:nth-child(1){background:#4285f4}.login-colors i:nth-child(2){background:#ea4335}.login-colors i:nth-child(3){background:#fbbc04}.login-colors i:nth-child(4){background:#34a853}
.login-heading { margin-bottom: 28px; text-align: left; }
.login-card h1 { margin: 0; color: #172b4d; font-size: 26px; font-weight: 750; line-height: 1.2; letter-spacing: -.035em; }
.login-copy { margin: 8px 0 0; color: #718096; font-size: 13px; line-height: 1.5; }
.login-card .form-group { margin-bottom: 18px; }
.login-card .form-group label { margin-bottom: 7px; color: #506176; font-size: 11px; font-weight: 720; }
.login-card input[type="text"],
.login-card input[type="password"] { min-height: 48px; padding: 11px 14px; border-color: #d8e0ea; border-radius: 10px; background: #fff; font-size: 15px; }
.login-card input:focus { border-color: #4285f4; background: #fff; box-shadow: 0 0 0 3px rgba(66,133,244,.13); }
.login-card .btn { min-height: 48px; margin-top: 5px; border-radius: 10px; background: #1a73e8; box-shadow: 0 8px 20px rgba(26,115,232,.2); }
.login-card .btn:hover { background: #1765cc; }

body[data-screen="login"] .device-shell { align-items: center; padding: 26px 18px; }
body[data-screen="login"] .device-card { max-width: 430px; min-height: 0; border-radius: 22px; box-shadow: 0 24px 65px rgba(23,43,77,.13); transition: max-width .2s ease; }
body[data-screen="login"] #pantalla-login { min-height: 0; padding: 40px 38px 38px; background: #fff; }
body[data-screen="login"] .device-login-head { margin-bottom: 26px; }
body[data-screen="login"] .device-title { margin-bottom: 6px; color: #1967d2; font-size: 10px; }
body[data-screen="login"] .device-name { margin: 0; color: #172b4d; font-size: 27px; }
body[data-screen="login"] #pantalla-login::after { display: none; }
body[data-screen="login"] #pantalla-login .form-group { margin-bottom: 18px; }
body[data-screen="login"] #pantalla-login label { color: #506176; font-size: 11px; }
body[data-screen="login"] #pantalla-login input { min-height: 48px; border-color: #d8e0ea; border-radius: 10px; background: #fff; font-size: 15px; }
body[data-screen="login"] #pantalla-login input:focus { border-color: #4285f4; box-shadow: 0 0 0 3px rgba(66,133,244,.13); }
body[data-screen="login"] #btn-login { min-height: 48px; margin-top: 5px; border-radius: 10px; background: #1a73e8; box-shadow: 0 8px 20px rgba(26,115,232,.2); }

@media (max-width: 520px) {
  .login-shell { align-items: center; padding: 18px 15px; }
  .login-stage { max-width: 400px; }
  .login-card { padding: 36px 24px 27px; border-radius: 18px; }
  .login-card h1 { font-size: 23px; }
  .login-heading { margin-bottom: 25px; }
  body[data-screen="login"] .device-shell { align-items: center; padding: 16px 14px; background: radial-gradient(circle at 50% 0,rgba(66,133,244,.12),transparent 17rem),#f5f7fb; }
  body[data-screen="login"] .device-card { width: 100%; max-width: 400px; min-height: 0; border: 1px solid #dfe5ed; border-radius: 18px; box-shadow: 0 18px 48px rgba(23,43,77,.12); }
  body[data-screen="login"] #pantalla-login { min-height: 0; padding: 35px 23px 27px; background: #fff; }
  body[data-screen="login"] .device-login-head { margin-bottom: 24px; padding: 0; }
  body[data-screen="login"] .device-login-head .device-title { color: #1967d2; opacity: 1; }
  body[data-screen="login"] .device-login-head .device-name { color: #172b4d; font-size: 24px; }
}

@media (max-height: 620px) {
  .login-shell { padding-top: 12px; padding-bottom: 12px; }
  .login-card { padding-top: 31px; padding-bottom: 24px; }
  .login-heading { margin-bottom: 20px; }
  body[data-screen="login"] #pantalla-login { padding-top: 30px; padding-bottom: 24px; }
  body[data-screen="login"] .device-login-head { margin-bottom: 19px; }
}