/* ========================================================================== TrascendIT CRM — Estilos del layout de autenticación v3 ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Outfit:wght@600;700;800&display=swap'); body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; /* Audit Capa 3.2 — color de fondo dinámico vía CSS var. login-theme.js (cargado en ) lee data-login-bg de y setea --login-bg en documentElement.style ANTES del primer paint, por lo que la página arranca con el color correcto. */ background-color: var(--login-bg, #1e3a5f); } .auth-wrapper { width: 100%; max-width: 440px; animation: fadeInUp .45s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .card { border-radius: 16px; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 8px 40px rgba(0,0,0,.15), 0 2px 12px rgba(0,0,0,.06); backdrop-filter: blur(8px); overflow: hidden; } .card-body { padding: 2rem 1.75rem; } /* Logo / Branding area */ .card .text-center h4, .card .text-center .h4 { font-family: 'Outfit', sans-serif; font-weight: 700; letter-spacing: -0.02em; } .form-control, .form-select { border-radius: 8px; border: 1.5px solid #e0e5ed; font-size: .9rem; padding: .6rem .9rem; font-family: 'DM Sans', sans-serif; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1); } .form-control:hover, .form-select:hover { border-color: #c5cdd8; } .form-control:focus, .form-select:focus { border-color: var(--login-primary, #4f8ffc); box-shadow: 0 0 0 3px rgba(79, 143, 252, .2); } .input-group-text { background: #f8fafc; border: 1.5px solid #e0e5ed; border-radius: 8px 0 0 8px !important; color: #94a3b8; } .input-group > .form-control:not(:first-child) { border-left: none; } .input-group > .form-control:last-child { border-radius: 0 8px 8px 0; } .btn-primary { border-radius: 8px; padding: .65rem 1.25rem; font-weight: 600; letter-spacing: .02em; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1); /* Audit Capa 3.2 — el color primario configurable se aplica aquí cuando --login-primary está definida (login-theme.js lo setea en ). Si no está, conservamos el gradiente original como fallback. */ background: var(--login-primary, linear-gradient(135deg, #4f8ffc 0%, #6c5ce7 100%)); border: 1px solid var(--login-primary, transparent); box-shadow: 0 3px 12px rgba(79, 143, 252, .3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79, 143, 252, .4); /* Cuando hay --login-primary lo oscurecemos un poco vía filter (equivalente al `filter: brightness(0.9)` del inline original); cuando NO hay var, mantenemos el gradiente original más oscuro. */ background: var(--login-primary, linear-gradient(135deg, #3b6de0 0%, #5b4cc7 100%)); filter: brightness(0.9); } .btn-primary:active { transform: translateY(0); } .form-label { font-family: 'Outfit', sans-serif; font-size: .82rem; font-weight: 600; color: #344054; letter-spacing: 0.01em; } .form-check-label { color: #667085; font-size: .85rem; } .form-check-input { border-radius: 4px; border: 1.5px solid #d0d5dd; } .form-check-input:checked { background-color: #4f8ffc; border-color: #4f8ffc; box-shadow: 0 2px 4px rgba(79,143,252,.3); } a { color: var(--login-primary, #4f8ffc); transition: color .2s; font-weight: 500; } a:hover { color: #3b6de0; } /* Input password con boton de mostrar/ocultar */ .input-group > .input-group-text:last-child { border-radius: 0 8px 8px 0; cursor: pointer; border-left: none; transition: color .2s; } .input-group > .input-group-text:last-child:hover { color: #4f8ffc; } /* Boton Microsoft O365 */ .btn-o365 { border-radius: 8px !important; border: 1.5px solid #e0e5ed !important; transition: all .25s cubic-bezier(0.4, 0, 0.2, 1) !important; font-weight: 600; padding: .6rem 1rem; } .btn-o365:hover { background-color: #f0f4f9 !important; box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; border-color: #c5cdd8 !important; transform: translateY(-1px) !important; } /* Divisor "o usar..." */ #togglePasswordForm { color: #667085; font-size: .8rem; white-space: nowrap; text-decoration: none !important; font-weight: 500; transition: color .2s; } #togglePasswordForm:hover { color: var(--login-primary, #4f8ffc); } /* Responsive mobile */ @media (max-width: 480px) { .card-body { padding: 1.5rem 1.25rem; } .auth-wrapper { max-width: 100%; } }