/* // Nombre del archivo: login.css // Ubicaci贸n: /Modules/Usuarios/Assets/css/login.css // Descripci贸n: Estilos exclusivos para la pantalla de autenticaci贸n y efectos glassmorphism. */ /* 1. Fondo Oscuro Profundo Base (Casi Negro) */ .blob-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; background: radial-gradient(circle at 50% 50%, var(--nx-login-bg) 0%, var(--nx-login-bg-deep) 100%); } /* Textura Org谩nica Oscura */ .blob-bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.12; mix-blend-mode: multiply; pointer-events: none; z-index: 2; } /* ========================================================= 馃挕 Orbes de Luz (Fondo) - VERSI脫N OPTIMIZADA (CERO LAG) ========================================================= */ .blob { position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.35; z-index: 1; /* ELIMINADO: animation: floatBlob... -> Animar un blur gigante colapsaba la PC */ /* Forzamos a la GPU a pintar el blur una sola vez y guardarlo en memoria */ transform: translateZ(0); will-change: transform; } .blob-1 { width: 700px; height: 700px; background-color: var(--nx-login-glow-1); top: -100px; left: -150px; } .blob-2 { width: 800px; height: 800px; background-color: var(--nx-login-glow-2); bottom: -200px; right: -150px; } /* 鈿狅笍 IMPORTANTE: Borramos el bloque @keyframes floatBlob por completo */ /* ========================================================= 馃挕 Levitaci贸n del Logotipo (VERSI脫N ULTRA-FAST: CERO FILTROS) --------------------------------------------------------- Arquitectura: Eliminamos 'drop-shadow' para garantizar 60 FPS (cuadros por segundo) incluso en hardware viejo. Usamos solo Transforms para aceleraci贸n nativa de GPU. ========================================================= */ .logo-magico { animation: floatLogo 4.5s ease-in-out infinite; cursor: pointer; /* ELIMINADO: filter: drop-shadow(...) -> Ganancia de rendimiento bruta */ /* Blindaje Anti-Blur y Aceleraci贸n nativa */ will-change: transform; transform: translateZ(0); backface-visibility: hidden; } @keyframes floatLogo { /* Animaci贸n pura de composici贸n (Transforms). Ultraligera. */ 0% { transform: translateY(0px) translateZ(0); } 50% { transform: translateY(-10px) translateZ(0); } /* Movimiento limpio arriba */ 100% { transform: translateY(0px) translateZ(0); } } /* EL EFECTO MAYALAND: Dark Glassmorphism Interactivo */ .mayaland-glass-card { background: var(--nx-login-card) !important; backdrop-filter: blur(15px) saturate(120%) !important; -webkit-backdrop-filter: blur(15px) saturate(120%) !important; border: 1px solid var(--nx-login-card-border) !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 20px 50px var(--nx-login-card-shadow) !important; border-radius: 16px !important; } .mayaland-glass-card:hover { transform: translateY(-3px); background: var(--nx-login-card-hover) !important; border-color: var(--nx-login-field-border) !important; } .mayaland-glass-card form, .mayaland-glass-card .modal-info-side, .mayaland-glass-card .modal-header, .mayaland-glass-card .modal-footer { background: transparent !important; } /* Textos e Inputs */ .mayaland-glass-card h3, .mayaland-glass-card h5, .mayaland-glass-card .global-text-primary { color: var(--nx-login-text) !important; text-shadow: 1px 1px 3px var(--nx-login-text-shadow); } .mayaland-glass-card .text-muted-custom, .mayaland-glass-card .global-label { color: var(--nx-login-muted) !important; } .mayaland-glass-card .global-input { background-color: var(--nx-login-field) !important; border: 1px solid var(--nx-login-field-border) !important; color: var(--nx-login-text) !important; padding: 10px 14px !important; } .mayaland-glass-card .global-input:focus { background-color: var(--nx-login-bg-deep) !important; border-color: var(--nx-primary) !important; } /* Entrada Suave */ .card-entrance { animation: slideUpFade 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes slideUpFade { 0% { opacity: 0; transform: translateY(40px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= 馃挕 REGLAS DE RESPONSIVIDAD Y COMPACTACI脫N (FIX M脫VIL CHROME) ========================================================= */ .modal-overlay.active { position: fixed !important; inset: 0 !important; /* Se ancla a las 4 esquinas reales de la pantalla */ height: 100% !important; /* 馃挕 Evita el bug de 100vh en m贸viles */ display: flex; align-items: flex-start !important; /* Vital para que el scroll funcione hacia abajo */ justify-content: center; padding: 2rem 1rem !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; /* 馃挕 Scroll de mantequilla en iOS/Android */ background: transparent !important; } .login-glass-wrapper { display: flex; flex-direction: row; width: 100%; max-width: 980px; margin: auto; height: max-content; /* 馃挕 Evita que la tarjeta se auto-corte */ } .login-form-panel { flex: 1; display: flex; flex-direction: column; padding: 2.5rem 3.5rem; border-right: 1px solid var(--nx-login-divider); } .login-info-panel { flex: 1; padding: 2.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; } .mobile-only { display: none; } .desktop-only { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; } .company-title { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.5px; line-height: 1.3; word-wrap: break-word; white-space: normal; } .compact-margin { margin-bottom: 14px !important; } /* 馃摫 REGLAS EXCLUSIVAS PARA TEL脡FONOS */ @media (max-width: 768px) { .modal-overlay.active { padding: 1rem !important; /* Menos relleno en las orillas para aprovechar espacio */ } .login-glass-wrapper { flex-direction: column; margin: 10px auto 60px auto !important; /* 馃挕 EL TRUCO: 60px de colch贸n abajo para evadir la barra de Chrome */ } .login-form-panel { border-right: none; border-bottom: 1px solid var(--nx-login-divider); padding: 1.5rem 1rem; } .login-info-panel { padding: 1.5rem 1rem; } .mobile-only { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 15px; } .desktop-only { display: none !important; } } /* ========================================================= 馃挕 SOBREESCRIBIR EL AUTOCOMPLETADO AMARILLO DEL NAVEGADOR ========================================================= */ .mayaland-glass-card .global-input:-webkit-autofill, .mayaland-glass-card .global-input:-webkit-autofill:hover, .mayaland-glass-card .global-input:-webkit-autofill:focus, .mayaland-glass-card .global-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--nx-login-field) inset !important; -webkit-text-fill-color: var(--nx-login-text) !important; border: 1px solid var(--nx-login-field-border) !important; transition: background-color 5000s ease-in-out 0s; } /* ========================================================= 馃挕 BOT脫N DE LOGIN (Tono Oscuro Elegante) ========================================================= */ .btn-login-dark { background-color: rgba(4, 112, 201, 0.568) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: var(--nx-login-text) !important; backdrop-filter: blur(5px) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .btn-login-dark:hover { background-color: rgba(30, 41, 59, 0.9) !important; border-color: rgba(6, 182, 212, 0.5) !important; box-shadow: 0 0 15px rgba(6, 182, 212, 0.2) !important; transform: translateY(-2px); } .btn-login-dark:active { transform: translateY(0); background-color: rgba(15, 23, 42, 0.9) !important; } /* Texto de ayuda dentro de los campos y enlaces: legibles sobre la escena oscura en cualquier tema */ .mayaland-glass-card .global-input::placeholder { color: var(--nx-login-muted) !important; opacity: .7; } .mayaland-glass-card a { color: var(--nx-login-text); } /* Bot贸n de acceso: s贸lido con el color de marca del comercio (el "pastel" se perd铆a sobre la escena oscura) */ .modal-footer-login .bs-btn { background: color-mix(in srgb, var(--nx-primary) 72%, var(--nx-login-button-mix)) !important; border-color: color-mix(in srgb, var(--nx-primary) 72%, var(--nx-login-button-mix)) !important; color: var(--nx-text-on-primary) !important; font-weight: 700; } .modal-footer-login .bs-btn:hover { background: color-mix(in srgb, var(--nx-primary) 58%, var(--nx-login-button-mix)) !important; border-color: var(--nx-primary) !important; } .modal-footer-login .bs-btn i { color: inherit !important; } /* Demo p煤blica: credenciales visibles */ .login-demo { margin: 6px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--nx-login-field); border: 1px dashed var(--nx-login-muted); color: var(--nx-login-text); font-size: .88rem; text-align: center; } /* Separadores y textos secundarios del login con los colores del tema (ADR-015) */ .mayaland-glass-card hr, .mayaland-glass-card .modal-header, .mayaland-glass-card .modal-footer { border-color: var(--nx-login-divider) !important; } /* Ojo para ver/ocultar la contrase帽a */ .mayaland-glass-card .login-pass { position: relative; } .mayaland-glass-card .login-pass .global-input { padding-right: 44px !important; } .mayaland-glass-card .login-pass-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 8px; cursor: pointer; color: var(--nx-login-muted); font-size: 1.05rem; } .mayaland-glass-card .login-pass-toggle:hover, .mayaland-glass-card .login-pass-toggle.is-visible { color: var(--nx-primary); } .mayaland-glass-card .login-pass-toggle:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 1px; } /* Banderitas de idioma (antes de iniciar sesi贸n) */ .mayaland-glass-card { position: relative; } .login-lang { position: absolute; top: 12px; right: 14px; z-index: 2; display: inline-flex; gap: 6px; } .login-lang a { display: inline-flex; padding: 2px; border-radius: 4px; border: 1px solid transparent; opacity: .55; transition: opacity .15s ease, transform .15s ease; } .login-lang a:hover { opacity: 1; transform: translateY(-1px); } .login-lang a.is-active { opacity: 1; border-color: var(--nx-primary); } .login-lang a:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 1px; opacity: 1; } .login-lang img { display: block; width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--nx-login-divider); } /* Imagen del panel derecho: m谩s alta, para que el panel no quede vac铆o */ .mayaland-glass-card .branding-img-box { height: clamp(150px, 24vh, 220px) !important; } /* Imagen por defecto (gente de distintos comercios): se muestra completa, en su proporci贸n */ .mayaland-glass-card .branding-img-box.is-default { height: auto !important; aspect-ratio: 1200 / 670; } .mayaland-glass-card .branding-img { display: block; } /* Bienvenida de una prueba gratis: crear contrase帽a (misma est茅tica del login) */ .bienvenida-page { margin: 0; min-height: 100vh; background: var(--nx-login-bg); font-family: var(--nx-font-family, sans-serif); } .bienvenida-wrap { width: 100%; height: 100vh; height: 100dvh; overflow-y: auto; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; box-sizing: border-box; } .mayaland-glass-card.bienvenida-card { max-width: 440px; padding: 2rem 1.75rem; text-align: center; box-sizing: border-box; background: var(--nx-login-card); border: 1px solid var(--nx-login-card-border); border-radius: 16px; backdrop-filter: blur(15px); } .bienvenida-logo { max-height: 90px; max-width: 70%; object-fit: contain; display: block; margin: 0 auto 10px; } .bienvenida-icono { font-size: 2.5rem; color: var(--nx-primary); } .bienvenida-titulo { margin: 4px 0 2px; font-size: 1.3rem; color: var(--nx-login-text); } .bienvenida-subtitulo { margin: 14px 0 6px; font-size: 1.05rem; color: var(--nx-login-text); } .bienvenida-texto { margin: 6px 0; font-size: .9rem; color: var(--nx-login-muted); line-height: 1.45; } .bienvenida-form { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; text-align: left; } .bienvenida-form .global-input { margin-bottom: 8px; } .bienvenida-boton { display: inline-flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; text-decoration: none; } .bienvenida-error { margin: 10px 0 0; padding: 10px; border-radius: 8px; font-size: .88rem; } .login-aviso { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 10px; border-radius: 8px; text-align: center; font-size: .88rem; color: var(--nx-login-text); background: color-mix(in srgb, var(--nx-success) 16%, transparent); border: 1px solid color-mix(in srgb, var(--nx-success) 45%, transparent); } /* Olvid茅 mi contrase帽a + aviso HTTPS (solo cuando la conexi贸n es realmente HTTPS) */ .login-extras { display: flex; flex-direction: column; align-items: center; gap: 4px; } .login-olvido { font-size: .82rem; font-weight: 600; color: var(--nx-primary); text-decoration: none; } .login-olvido:hover { text-decoration: underline; } .bienvenida-usuario strong { color: var(--nx-login-text); font-size: 1rem; } .recuperar-enviado { color: var(--nx-success); } .recuperar-volver { display: inline-block; margin-top: 14px; }