/* ============================================================ QUIRUNET V2 - PREMIUM DESIGN SYSTEM ============================================================ */ /* Font loaded via in — removed @import to eliminate render-blocking waterfall */ :root { --brand-red: #E63946; --brand-red-hover: #D62828; --brand-red-glow: rgba(230, 57, 70, 0.4); --bg-dark: #0D0E15; --bg-surface: rgba(255, 255, 255, 0.03); --bg-surface-border: rgba(255, 255, 255, 0.08); --text-primary: #F8F9FA; --text-muted: #A0A4B8; --glass-blur: blur(16px); --radius-lg: 16px; --radius-md: 8px; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Outfit', sans-serif; background-color: var(--bg-dark); color: var(--text-primary); min-height: 100dvh; /* dvh fixes iOS Safari URL-bar overlap; fallback via 100vh for old browsers */ display: flex; justify-content: center; align-items: center; position: relative; overflow-x: hidden; /* only clip horizontal — allows y-scroll on mobile for error states */ } /* Efectos de fondo vibrante (Orbs abstractos rojos) */ body::before, body::after { content: ''; position: absolute; width: 60vh; height: 60vh; border-radius: 50%; background: radial-gradient(circle, var(--brand-red) 0%, transparent 70%); opacity: 0.15; filter: blur(80px); z-index: -1; animation: drift 20s infinite alternate ease-in-out; } body::before { top: -10%; left: -10%; } body::after { bottom: -10%; right: -10%; animation-delay: -10s; } @keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(15%, 15%) scale(1.1); } } /* Base Form Container - Glassmorphism */ .glass-panel { background: var(--bg-surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--bg-surface-border); border-radius: var(--radius-lg); padding: 3rem 2.5rem; width: 100%; max-width: 420px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); z-index: 10; } /* Header & Logo */ .auth-header { text-align: center; margin-bottom: 2.5rem; } .auth-header img { height: 60px; margin-bottom: 1.5rem; filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.3)); } .auth-header h1 { font-size: 1.8rem; font-weight: 600; letter-spacing: -0.5px; } .auth-header p { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.5rem; } /* Formularios Vivos */ .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .form-control { width: 100%; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--bg-surface-border); border-radius: var(--radius-md); padding: 0.9rem 1rem; color: var(--text-primary); font-family: inherit; font-size: 1rem; transition: var(--transition); } .form-control:focus { outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 3px var(--brand-red-glow); background: rgba(0, 0, 0, 0.4); } .form-control::placeholder { color: rgba(255, 255, 255, 0.2); } /* Botón Action Call */ .btn-primary { width: 100%; background: var(--brand-red); color: white; border: none; padding: 1rem; border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: var(--transition); text-transform: uppercase; letter-spacing: 1px; margin-top: 1rem; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3); } .btn-primary:hover { background: var(--brand-red-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230, 57, 70, 0.5); } .btn-primary:active { transform: translateY(0); } /* Utilidades */ .forgot-password { display: block; text-align: center; margin-top: 2rem; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: var(--transition); } .forgot-password:hover { color: var(--brand-red); text-decoration: underline; } .alert { padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; font-size: 0.9rem; font-weight: 600; text-align: center; border: 1px solid transparent; } .alert-error { background: rgba(230, 57, 70, 0.1); color: #ff6b6b; border-color: rgba(230, 57, 70, 0.3); animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-3px, 0, 0); } 40%, 60% { transform: translate3d(3px, 0, 0); } } /* ── Accessibility: prefers-reduced-motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── Small phones (≤400px) ── */ @media (max-width: 400px) { .glass-panel { padding: 2rem 1.25rem; border-radius: 12px; } .auth-header img { height: 48px; margin-bottom: 1rem; } .auth-header h1 { font-size: 1.3rem; } }