/* ═══════════════════════════════════════════════════════════════ Flash Money — login.css CSS exclusivo para Login.aspx INSTALACIÓN: 1. En Login.aspx reemplaza: por: 2. La imagen de fondo se pone directamente en el : style="background-image:url('images/auth-bg/TU_FOTO.jpg'); background-size:cover" 3. Elimina estos scripts que no se usan en Login: vendor/global/global.min.js js/custom.min.js js/dlabnav-init.js ═══════════════════════════════════════════════════════════════ */ /* ── FUENTES ──────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap'); /* ── VARIABLES ────────────────────────────────────────────── */ :root { --brand: #ff8101; --brand-dark: #e97a09; --brand-glow: #df8122; --brand-light-1: #ff810129; --brand-light-2: #ff81011c; --card-bg: #ffffff; --card-radius: 24px; --card-shadow: 0 32px 72px rgba(0,0,0,.24), 0 8px 20px rgba(0,0,0,.14); --input-bg: #F4F5F7; --input-border: #E2E4EA; --input-h: 48px; --input-radius: 12px; --text: #1A1D2E; --text-2: #5A5F7D; --text-muted: #9699B0; --ease: 180ms cubic-bezier(.4,0,.2,1); } /* ── RESET ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } /* ── BODY ─────────────────────────────────────────────────── */ body { min-height: 100vh; /* La imagen viene del style inline del en Login.aspx */ background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background: radial-gradient(1200px 800px at 20% 20%, rgb(250 125 0), #f97d005c 55%), radial-gradient(900px 700px at 85% 35%, rgb(249 125 0), transparent 55%), linear-gradient(120deg, #f97d00, #00000020); font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; overflow: hidden !important; } /* Overlay oscuro sobre la foto para legibilidad */ body::before { content: ''; position: fixed; inset: 0; background: linear-gradient( 140deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.22) 50%, rgba(0,0,0,.42) 100% ); z-index: 0; pointer-events: none; } /* Blobs decorativos (divs .lk-blob.b1/.b2/.b3 en el HTML) */ .lk-blob { position: fixed; border-radius: 50%; filter: blur(90px); opacity: .15; pointer-events: none; z-index: 0; } .lk-blob.b1 { width: 600px; height: 600px; top: -200px; left: -150px; background: radial-gradient(circle, var(--brand), transparent 70%); } .lk-blob.b2 { width: 500px; height: 500px; bottom: -180px; right: -100px; background: radial-gradient(circle, var(--brand), transparent 70%); } .lk-blob.b3 { width: 300px; height: 300px; top: 40%; left: 38%; background: radial-gradient(circle,var(--brand-light-1), transparent 70%); opacity: .08; } /* ── WRAPPER ──────────────────────────────────────────────── */ .lk-wrap { position: relative; z-index: 1; width: 100%; max-width: 400px; animation: lkIn 420ms cubic-bezier(.34,1.46,.64,1) both; } @keyframes lkIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── CARD ─────────────────────────────────────────────────── */ .lk-card { background: var(--card-bg) !important; border-radius: var(--card-radius) !important; box-shadow: var(--card-shadow) !important; padding: 38px 32px 28px !important; position: relative; overflow: hidden; } /* Línea animada dorada arriba de la card */ .lk-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, transparent 0%, var(--brand) 30%, var(--brand-dark) 50%, var(--brand) 70%, transparent 100% ); background-size: 200% 100%; animation: shimmer 2.8s linear infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── LOGO + TÍTULO ────────────────────────────────────────── */ .lk-top { text-align: center; margin-bottom: 26px; } .lk-logo-mini { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .lk-logo-mini img { max-width: 170px; max-height: 80px; object-fit: contain; } .lk-title { font-family: 'Sora', sans-serif; font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -.3px; margin-bottom: 5px; } .lk-sub { font-size: 13px; color: var(--text-muted); font-weight: 400; line-height: 1.5; } /* ── CAMPOS ───────────────────────────────────────────────── */ .lk-field { margin-bottom: 14px; } .lk-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; letter-spacing: .15px; } .lk-label strong { font-weight: 600; } /* Wrapper con ícono */ .lk-ico { position: relative; display: flex; align-items: center; } /* Ícono izquierdo */ .lk-ico > i:first-child { position: absolute; left: 13px; font-size: 13px; color: var(--text-muted); pointer-events: none; transition: color var(--ease); z-index: 1; } .lk-ico:focus-within > i:first-child { color: var(--brand-dark); } /* Input nativo */ .lk-input { width: 100%; height: var(--input-h); padding: 0 42px 0 38px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--input-radius); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; text-align: center; outline: none; -webkit-appearance: none; appearance: none; transition: border-color var(--ease), background var(--ease), box-shadow var(--ease); } .lk-input::placeholder { color: var(--text-muted); font-weight: 400; } .lk-input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(255,173,10,.15); } /* Botón toggle password */ .toggle-pass { position: absolute; right: 11px; background: none; border: none; cursor: pointer; padding: 5px; color: var(--text-muted); font-size: 13px; display: flex; align-items: center; z-index: 1; transition: color var(--ease); } .toggle-pass:hover { color: var(--brand-dark); } /* ── BOTÓN INGRESAR — ASPxButton con clase .lk-btn ───────── */ .lk-btn, .dxbButton_MaterialCompact.lk-btn { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 50px !important; margin-top: 4px !important; border-radius: 14px !important; border: none !important; padding: 0 !important; cursor: pointer !important; overflow: hidden !important; isolation: isolate !important; text-decoration: none !important; background: linear-gradient(135deg, var(--brand) 0%, var(--brand) 100%) !important; color: #fff !important; box-shadow: 0 8px 22px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.10) !important; transition: transform 150ms cubic-bezier(.34,1.56,.64,1), box-shadow 150ms ease, filter 150ms ease !important; } /* Reflejo de luz */ .lk-btn::before { content: "" !important; position: absolute !important; inset: -40% -35% auto -35% !important; height: 95% !important; background: radial-gradient( 700px 220px at 35% 35%, rgba(255,255,255,.22), rgba(255,255,255,.10) 45%, transparent 72% ) !important; transform: rotate(-10deg) !important; pointer-events: none !important; z-index: 0 !important; } /* Borde luminoso perimetral */ .lk-btn::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 14px !important; padding: 1px !important; background: linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,.12), rgba(0,0,0,.06) ) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; z-index: 0 !important; } /* Texto del botón — el span .dx-vam es lo que se muestra */ .lk-btn .dxb, .lk-btn .dx-vam { position: relative !important; z-index: 1 !important; font-family: 'Sora', sans-serif !important; font-size: 13.5px !important; font-weight: 800 !important; letter-spacing: .5px !important; text-transform: uppercase !important; color: #fff !important; } /* El input submit oculto de DX */ .lk-btn .dxb-hbc { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important; } /* Hover */ .lk-btn:hover, .dxbButtonHover_MaterialCompact.lk-btn { transform: translateY(-2px) !important; filter: brightness(1.04) !important; box-shadow: 0 14px 34px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.12) !important; } /* Pressed */ .dxbButtonPressed_MaterialCompact.lk-btn, .lk-btn:active { transform: translateY(0) scale(.98) !important; filter: brightness(.97) !important; box-shadow: 0 4px 12px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.20) !important; } /* ── FOOTER AYUDA ─────────────────────────────────────────── */ .lk-help { margin-top: 16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-muted); text-align: center; } .lk-wa { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--input-border); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.07); font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; transition: transform var(--ease), box-shadow var(--ease), color var(--ease); } .lk-wa:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.11); color: var(--text); } .lk-wa i { font-size: 15px; color: #25D366; } /* ── COPYRIGHT ────────────────────────────────────────────── */ .lk-footer { margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--text-muted); } /* ── RESPONSIVE ───────────────────────────────────────────── */ @media (max-width: 480px) { body { padding: 16px !important; } .lk-card { padding: 28px 20px 22px !important; border-radius: 20px !important; } .lk-title { font-size: 19px; } .lk-logo-mini img { max-width: 140px; } }