body { background: linear-gradient(135deg, #e8f0ff, #ffffff); font-family: 'Inter', sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .card { animation: fadeInUp 0.6s ease; border: none; border-radius: 16px; } @keyframes fadeInUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .logo-login { max-height: 60px; margin-bottom: 10px; } h4 { font-weight: 600; color: #1e293b; } .form-control:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25); } .input-group-text { background-color: #f8f9fa; } button[type="submit"] { font-weight: 600; padding: 12px; font-size: 16px; transition: all 0.3s ease; } button[type="submit"]:hover { opacity: 0.95; } #togglePassword { border-left: 0; } .spinner-border { vertical-align: middle; } /* --- Overlay full-screen --- */ #welcome-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 1050; /* por encima de la card */ text-align: center; padding: 24px; } #welcome-overlay.show { display: flex; } #welcome-overlay .title { color: #fff; font-size: 36px; font-weight: 800; letter-spacing: .5px; } #welcome-overlay .subtitle { color: rgba(255,255,255,.9); margin-top: 8px; font-size: 16px; } #welcome-overlay.success { background: radial-gradient(1200px 600px at 50% 50%, rgba(13,110,253,.75), rgba(0,0,0,.65)); } #welcome-overlay.error { background: radial-gradient(1200px 600px at 50% 50%, rgba(220,53,69,.85), rgba(0,0,0,.65)); } /* --- Halo/ripple del botón --- */ #login-btn { position: relative; overflow: hidden; } .btn-ripple { position: absolute; border-radius: 9999px; transform: translate(-50%, -50%); pointer-events: none; width: 12px; height: 12px; opacity: .35; background: #fff; animation: ripple 600ms ease-out forwards; } @keyframes ripple { to { width: 360px; height: 360px; opacity: 0; } } /* --- Destello del logo --- */ .logo-login { position: relative; overflow: hidden; } .logo-login.shine::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%); animation: logo-shine 900ms ease-out forwards; } @keyframes logo-shine { to { left: 140%; } } /* Opcional: desactiva tu animación CSS previa de la card para no duplicar */ .card { /* animation: none; */ border: none; border-radius: 16px; } /* Suavizado general */ .card, .form-control, #login-btn { will-change: transform, opacity; } /* antes tenías solo #login-btn */ #login-btn, .btn-halo { position: relative; overflow: hidden; } /* ==== Ajuste de login para móviles ==== */ /* Evita el centrado vertical global del en esta página */ .login-page{ min-height: 100dvh; /* alto real del viewport en móviles */ display: block; /* anula el display:flex del body */ } /* Contenedor del login: más arriba en móvil, centrado en pantallas medianas+ */ .auth-shell{ min-height: 100dvh; display: flex; align-items: flex-start; /* arriba en móvil */ justify-content: center; padding: 8vh 16px 16px; /* empuja ~8% desde arriba */ } /* Ancho cómodo de la tarjeta */ .login-page .card{ width: 100%; max-width: 400px; margin: 0 auto; } /* A partir de 576px, céntralo verticalmente */ @media (min-width: 576px){ .auth-shell{ align-items: center; padding-top: 0; } } /* Safe area bottom en móviles (barra de navegación) */ @media (max-width: 575.98px){ .auth-shell{ padding-bottom: calc(16px + env(safe-area-inset-bottom)); } }