Iniciar sesión · Lalely
Iniciar sesión · Lalely /* ===== ESTILOS ESPECÍFICOS DE LOGIN ===== */ .auth-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); background: var(--bg); position: relative; overflow: hidden; } /* Fondo decorativo con SVG inline */ .auth-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .auth-bg svg { width: 100%; height: 100%; opacity: 0.4; } .auth-container { position: relative; z-index: 1; width: min(480px, 100%); display: flex; flex-direction: column; gap: var(--space-6); } .auth-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .auth-logo { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-3xl); font-weight: 700; color: var(--primary); text-decoration: none; transition: transform var(--transition-base); } .auth-logo:hover { transform: scale(1.02); text-decoration: none; color: var(--primary); } .auth-logo svg { width: 52px; height: 52px; } .auth-header h1 { font-size: var(--font-size-2xl); color: var(--text); margin: 0; } .auth-header p { color: var(--text-secondary); font-size: var(--font-size-md); max-width: 320px; margin: 0 auto; } .auth-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-8) var(--space-6); border: 1px solid var(--border-light); } .auth-error { background-color: #fdecea; color: var(--danger); border: 1px solid #f5c6cb; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--font-size-sm); font-weight: 500; display: flex; align-items: center; gap: var(--space-2); } .auth-error svg { width: 20px; height: 20px; flex-shrink: 0; } .auth-success { background-color: #e6f4ea; color: var(--success); border: 1px solid #b7dfb9; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--font-size-sm); font-weight: 500; display: flex; align-items: center; gap: var(--space-2); } .auth-success svg { width: 20px; height: 20px; flex-shrink: 0; } .auth-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; color: var(--text-tertiary); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.5px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-footer { text-align: center; color: var(--text-secondary); font-size: var(--font-size-sm); margin-top: var(--space-4); } .auth-footer a { font-weight: 600; } .auth-links { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; } .auth-links a { font-size: var(--font-size-sm); color: var(--text-secondary); display: inline-flex; align-items: center; gap: var(--space-1); transition: color var(--transition-fast); } .auth-links a:hover { color: var(--primary); text-decoration: none; } .auth-links svg { width: 16px; height: 16px; } .btn-google { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: 0.75rem 1rem; font-weight: 600; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: background-color var(--transition-fast), box-shadow var(--transition-fast); } .btn-google:hover { background: #f5f6f7; box-shadow: var(--shadow-md); } .btn-google svg { width: 22px; height: 22px; } .form-group { margin-bottom: var(--space-5); } .form-label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--text); margin-bottom: var(--space-2); } .form-input { width: 100%; padding: 0.75rem 1rem; font-size: var(--font-size-md); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); min-height: 48px; } .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15); } .form-input::placeholder { color: var(--text-tertiary); } .btn-primary { background-color: var(--primary); color: #fff; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); min-height: 48px; transition: background-color var(--transition-fast), transform var(--transition-fast); } .btn-primary:hover { background-color: var(--primary-hover); } .btn-primary:active { transform: scale(0.98); } .btn-block { width: 100%; } .auth-card .btn-primary { margin-top: var(--space-2); } .auth-card .btn-google { margin-top: var(--space-2); } .auth-card .btn-google svg { margin-right: var(--space-2); } .auth-card .btn-google span { display: inline-block; } .auth-card .btn-google:hover { background-color: #f5f6f7; } .auth-card .btn-google:focus-visible { outline: 3px solid rgba(24, 119, 242, 0.4); outline-offset: 2px; } .auth-card .btn-primary:focus-visible { outline: 3px solid rgba(24, 119, 242, 0.4); outline-offset: 2px; } .auth-card .form-input:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15); } .auth-card .form-input { background-color: var(--surface); } .auth-card .form-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; -webkit-text-fill-color: var(--text); transition: background-color 5000s ease-in-out 0s; } .auth-card .form-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; -webkit-text-fill-color: var(--text); } .auth-card .form-input { caret-color: var(--primary); } .auth-card .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15); } .auth-card .form-input::placeholder { color: var(--text-tertiary); opacity: 1; } .auth-card .form-input:focus::placeholder { color: var(--text-tertiary); opacity: 0.7; } .auth-card .form-input:hover { border-color: var(--primary)