/* Diseño exclusivo del acceso de los usuarios. No afecta al panel Superadmin. */
#login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 44px 24px 62px;
  background: radial-gradient(ellipse at 50% 0%, #192a4b 0%, #101b32 52%, #0e1729 100%);
  color: #f5f7fc;
  overflow: hidden;
}
#login-screen::before {
  inset: auto -80px auto auto;
  top: -110px;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: #203b65;
  opacity: .3;
}
#login-screen::after {
  content: "";
  position: absolute;
  left: -110px;
  bottom: 65px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: #21385a;
  opacity: .28;
  pointer-events: none;
}
#login-screen .theme-switch-login { display: none; }
#login-screen > .login-box {
  z-index: 1;
  width: min(440px, 100%);
  max-width: 440px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5f7fc;
  box-shadow: none;
  backdrop-filter: none;
}
#login-screen .marca { margin: 0 auto 22px; gap: 10px; }
#login-screen .logo-taller { width: 76px; height: 76px; object-fit: contain; }
#login-screen .marca h1 { font-size: 19px; color: #dbe6f5; text-shadow: none; letter-spacing: 0; }
#login-screen .login-bienvenida h2 { margin: 0 0 10px; color: #f5f7fc; font-size: clamp(28px, 4vw, 36px); font-weight: 700; letter-spacing: -.04em; }
#login-screen .login-bienvenida p { margin: 0 0 20px; color: #b7c3d5; font-size: 16px; }
#login-screen #login-contexto { margin: 0 0 6px; color: #c3d0e2; font-size: 13px; }
#login-screen #login-enlace-nota { max-width: 560px; margin: 0 auto 24px; color: #91a2bb; font-size: 12px; line-height: 1.55; }
#login-screen #form-login,
#login-screen #form-registro-saas,
#login-screen #caja-2fa,
#login-screen #caja-mfa-alta {
  padding: 30px;
  background: #1e293b;
  border: 1px solid #344154;
  border-radius: 20px;
  box-shadow: 0 12px 32px #0003;
}
#login-screen #form-login { gap: 0; text-align: left; }
#login-screen .login-etiqueta { display: block; margin: 0 0 9px; color: #c3cedc; font-size: 14px; font-weight: 600; }
#login-screen .login-campo { position: relative; margin: 0 0 22px; }
#login-screen .login-campo input {
  width: 100%; min-height: 54px;
  margin: 0; padding: 14px 48px;
  background: #1d2839; color: #f5f7fc;
  border: 1px solid #3a4658; border-radius: 12px;
  font-size: 16px; box-shadow: none;
}
#login-screen input::placeholder { color: #8f9eb3; opacity: 1; }
#login-screen .login-campo input:focus { border-color: #4b91ff; outline: 3px solid #3b82f633; outline-offset: 0; }
#login-screen .login-icono { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: #b9c6d7; pointer-events: none; }
#login-screen .login-ver-clave {
  position: absolute; top: 0; right: 4px;
  width: 46px; min-height: 54px; padding: 11px;
  background: transparent; color: #b9c6d7; border: 0;
  box-shadow: none; border-radius: 10px;
}
#login-screen .login-ver-clave:hover { transform: none; background: #ffffff0a; }
#login-screen .login-ver-clave svg { width: 24px; height: 24px; display: block; }
#login-screen .login-ojo-tachado { display: none; }
#login-screen .login-ver-clave[aria-pressed="true"] .login-ojo-tachado { display: block; }
#login-screen #btn-entrar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 58px; margin: 4px 0 0;
  border-radius: 14px; background: #367ef2; color: #fff;
  font-size: 17px; font-weight: 600; box-shadow: 0 6px 18px #2563eb40;
}
#login-screen #btn-entrar:hover { background: #478dfb; transform: none; }
#login-screen #btn-entrar svg { width: 22px; height: 22px; }
#login-screen #btn-mostrar-registro {
  width: 100%; margin: 20px 0 0; padding: 14px 10px;
  background: transparent; color: #9fafc6; border: 0;
  box-shadow: none; font-size: 14px; font-weight: 400;
}
#login-screen #btn-mostrar-registro strong { margin-left: 6px; color: #34d3ae; font-weight: 600; }
#login-screen #btn-mostrar-registro:hover { background: #ffffff06; transform: none; }
#login-screen button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
#login-screen #login-error { color: #fca5a5; line-height: 1.5; }
#login-screen #login-build { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: calc(60px + env(safe-area-inset-bottom)); margin: 0; color: #91a2bb; opacity: .85 !important; font-size: 11px; pointer-events: none; }
#login-screen #form-registro-saas input, #login-screen #form-registro-saas select,
#login-screen #caja-2fa input, #login-screen #caja-mfa-alta input { background: #1d2839; color: #f5f7fc; border-color: #3a4658; }
#login-screen #form-registro-saas label, #login-screen #caja-2fa p, #login-screen #caja-mfa-alta p { color: #c3cedc; }
#login-screen #registro-presentacion { margin-top: 24px; padding: 32px; border: 1px solid #344154; border-radius: 22px; background: #1e293b; box-shadow: 0 12px 32px #0003; }
#login-screen .registro-prueba { display: inline-block; padding: 7px 14px; border-radius: 24px; background: #123e3c; color: #70e9c7; font-size: 13px; font-weight: 600; }
#login-screen #registro-presentacion h2 { margin: 22px 0 12px; color: #f5f7fc; font-size: clamp(23px, 3vw, 30px); line-height: 1.2; }
#login-screen .registro-descripcion { max-width: 580px; margin: 0 auto; color: #b7c3d5; line-height: 1.7; }
#login-screen .registro-beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0; text-align: left; }
#login-screen .registro-beneficios article { padding: 20px 16px; border: 1px solid #344154; border-radius: 14px; background: #172337; }
#login-screen .registro-beneficios article > span { color: #70a7ff; font-size: 26px; }
#login-screen .registro-beneficios h3 { margin: 10px 0 8px; color: #e5ecf8; font-size: 16px; }
#login-screen .registro-beneficios p { margin: 0; font-size: 13px; line-height: 1.6; color: #aab9ce; }
#login-screen .registro-personaliza { color: #c3d0e2; font-size: 14px; }
#login-screen #btn-comenzar-registro, #login-screen #form-registro-saas > button[type="submit"] { min-height: 56px; border-radius: 13px; background: #367ef2; color: white; font-size: 16px; box-shadow: 0 6px 18px #2563eb40; }
#login-screen #btn-comenzar-registro { max-width: 400px; margin: 14px auto 4px; }
#login-screen .registro-ayuda { margin: 18px 0 0; color: #91a2bb; font-size: 13px; }
#login-screen #form-registro-saas { margin-top: 24px; gap: 22px; text-align: left; }
#login-screen .registro-instruccion { margin: 0; color: #b7c3d5; line-height: 1.6; }
#login-screen .registro-seccion { min-width: 0; margin: 0; padding: 20px; border: 1px solid #3a4658; border-radius: 14px; }
#login-screen .registro-seccion legend { padding: 0 8px; color: #f5f7fc; font-weight: 600; }
#login-screen .registro-seccion legend span { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 7px; border-radius: 50%; background: #2b5592; color: #dbeafe; font-size: 13px; }
#login-screen .registro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
#login-screen .registro-seccion label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
#login-screen .registro-seccion input, #login-screen .registro-seccion select { width: 100%; min-height: 48px; padding: 12px; border: 1px solid #3a4658; border-radius: 10px; font-size: 16px; }
#login-screen .registro-seccion .hint { margin: 8px 0 16px; color: #91a2bb; font-size: 12px; line-height: 1.6; }
#login-screen .registro-logo-preview { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
#login-screen .registro-logo-preview img { flex-shrink: 0; border-radius: 12px; object-fit: contain; background: #172337; }
#login-screen #btn-cancelar-registro { background: transparent; border: 1px solid #3a4658; box-shadow: none; color: #c3d0e2; }
@media (max-width: 600px) {
  #login-screen #registro-presentacion { padding: 24px 18px; }
  #login-screen .registro-beneficios, #login-screen .registro-grid { grid-template-columns: 1fr; }
  #login-screen .registro-beneficios { gap: 10px; }
  #login-screen .registro-beneficios article { padding: 16px; }
  #login-screen .registro-seccion { padding: 16px 12px; }
}
@media (max-width: 600px) {
  #login-screen { padding: 30px 16px 56px; }
  #login-screen #form-login, #login-screen #form-registro-saas,
  #login-screen #caja-2fa, #login-screen #caja-mfa-alta { padding: 22px 18px; border-radius: 18px; }
  #login-screen .logo-taller { width: 68px; height: 68px; }
  #login-screen #login-enlace-nota { margin-bottom: 20px; }
}

/* v6.10.17: acceso compacto, centrado y adaptable */
#login-screen { box-sizing: border-box; padding: 28px 20px 86px; }
#login-screen > .login-box { margin-inline: auto; min-width: 0; }
#login-screen.registro-amplio > .login-box { width: min(900px, 100%); max-width: 900px; }
#login-screen .marca { margin-bottom: 16px; }
#login-screen .logo-taller { width: 64px; height: 64px; }
#login-screen .login-bienvenida h2 { font-size: 28px; }
#login-screen .login-bienvenida p { margin-bottom: 14px; }
#login-screen #login-enlace-nota { margin-bottom: 18px; }
#login-screen #form-login, #login-screen #caja-2fa, #login-screen #caja-mfa-alta { box-sizing: border-box; width: 100%; padding: 24px; border-radius: 18px; }
#login-screen .login-campo { margin-bottom: 18px; }
#login-screen .login-campo input { box-sizing: border-box; min-height: 48px; padding: 12px 44px; }
#login-screen .login-ver-clave { min-height: 48px; }
#login-screen #btn-entrar { min-height: 50px; font-size: 16px; }
#login-screen #btn-mostrar-registro { margin-top: 12px; padding: 10px; }
@media (max-width: 480px) {
  #login-screen { padding: 22px 16px 86px; }
  #login-screen #form-login, #login-screen #caja-2fa, #login-screen #caja-mfa-alta { padding: 20px 16px; }
}
@media (max-height: 720px) {
  #login-screen { justify-content: flex-start; padding-top: 20px; }
}