/* // 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%, #0f172a 0%, #000000 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(--brand-blue); top: -100px; left: -150px; } .blob-2 { width: 800px; height: 800px; background-color: #06b6d4; 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: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(15px) saturate(120%) !important; -webkit-backdrop-filter: blur(15px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; border-radius: 16px !important; } .mayaland-glass-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.2) !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: #ffffff !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); } .mayaland-glass-card .text-muted-custom, .mayaland-glass-card .global-label { color: rgba(255, 255, 255, 0.75) !important; } .mayaland-glass-card .global-input { background-color: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; padding: 10px 14px !important; } .mayaland-glass-card .global-input:focus { background-color: rgba(0, 0, 0, 0.5) !important; border-color: rgba(255, 255, 255, 0.4) !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 rgba(255, 255, 255, 0.1); } .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 rgba(255, 255, 255, 0.1); 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 #1e293b inset !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.4) !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: #f1f5f9 !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; }